/* The Geek Network — showcase site. Styled ENTIRELY from Circle Design System
   tokens (--circle-*). No hard-coded colours/spacing — change the tokens, change the site. */

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
/* No scrollbars, ever (house rule). */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
    margin: 0;
    font-family: var(--circle-font-sans);
    color: var(--circle-content-primary);
    background: var(--circle-surface-base);
    line-height: var(--circle-leading-normal);
    transition: background var(--circle-transition-normal), color var(--circle-transition-normal);
}

a { color: inherit; text-decoration: none; }

/* ---------- top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: var(--circle-z-sticky);
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--circle-space-4) clamp(var(--circle-space-4), 5vw, var(--circle-space-12));
    background: var(--circle-surface-glass);
    backdrop-filter: blur(var(--circle-blur-md));
    -webkit-backdrop-filter: blur(var(--circle-blur-md));
    border-bottom: 1px solid var(--circle-border-subtle);
}
.brand { display: flex; align-items: center; gap: var(--circle-space-2); font-weight: var(--circle-weight-bold); }
.brand-mark { color: var(--circle-brand-primary); font-size: var(--circle-text-xl); }
.brand-name { font-size: var(--circle-text-base); letter-spacing: var(--circle-tracking-tight); }
.theme-toggle {
    border: 1px solid var(--circle-border-default); background: var(--circle-surface-raised);
    color: var(--circle-content-primary); width: 40px; height: 40px; border-radius: var(--circle-radius-full);
    cursor: pointer; font-size: var(--circle-text-base); line-height: 1;
}

/* ---------- hero ---------- */
.hero {
    text-align: center;
    padding: clamp(var(--circle-space-16), 9vw, var(--circle-space-24)) var(--circle-space-6) var(--circle-space-12);
    max-width: 880px; margin: 0 auto;
}
.eyebrow {
    text-transform: uppercase; letter-spacing: var(--circle-tracking-wider);
    color: var(--circle-content-secondary); font-size: var(--circle-text-sm);
    font-weight: var(--circle-weight-semibold); margin: 0 0 var(--circle-space-4);
}
.hero h1 {
    font-size: var(--circle-text-4xl); line-height: var(--circle-leading-tight);
    letter-spacing: var(--circle-tracking-tight); margin: 0 0 var(--circle-space-5); font-weight: var(--circle-weight-bold);
}
.hero h1 .accent { color: var(--circle-brand-primary); }
.lede {
    font-size: var(--circle-text-lg); color: var(--circle-content-secondary);
    max-width: 620px; margin: 0 auto var(--circle-space-8);
}
.hero-cta { display: flex; gap: var(--circle-space-3); justify-content: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: var(--circle-space-2);
    padding: var(--circle-space-3) var(--circle-space-6);
    border-radius: var(--circle-radius-full); font-weight: var(--circle-weight-semibold);
    font-size: var(--circle-text-base); cursor: pointer; border: 1px solid transparent;
    transition: transform var(--circle-transition-spring), box-shadow var(--circle-transition-normal);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--circle-brand-primary); color: var(--circle-brand-onBrand); box-shadow: var(--circle-elevation-2); }
.btn-primary:hover { box-shadow: var(--circle-elevation-3); }
.btn-ghost { background: transparent; color: var(--circle-content-primary); border-color: var(--circle-border-strong); }

/* ---------- catalog ---------- */
.catalog { max-width: 1180px; margin: 0 auto; padding: 0 clamp(var(--circle-space-4), 5vw, var(--circle-space-12)) var(--circle-space-20); }
.category { margin-top: var(--circle-space-12); }
.category h2 {
    font-size: var(--circle-text-xl); margin: 0 0 var(--circle-space-5);
    letter-spacing: var(--circle-tracking-tight);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--circle-space-4); }

.card {
    display: flex; align-items: flex-start; gap: var(--circle-space-4); position: relative;
    background: var(--circle-surface-raised); border: 1px solid var(--circle-border-subtle);
    border-radius: var(--circle-radius-2xl); padding: var(--circle-space-5);
    box-shadow: var(--circle-elevation-1);
    transition: transform var(--circle-transition-spring), box-shadow var(--circle-transition-normal), border-color var(--circle-transition-normal);
    overflow: hidden;
}
.card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--app, var(--circle-brand-primary));
}
.card:not(.card-static):hover { transform: translateY(-3px); box-shadow: var(--circle-elevation-3); border-color: var(--app, var(--circle-border-strong)); }

.card-tile {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--circle-radius-lg);
    display: grid; place-items: center; font-weight: var(--circle-weight-bold); font-size: var(--circle-text-base);
    color: #fff; background: var(--app, var(--circle-brand-primary));
}
.card-body { display: flex; flex-direction: column; gap: var(--circle-space-1); min-width: 0; }
.card-name { font-weight: var(--circle-weight-semibold); font-size: var(--circle-text-base); display: flex; align-items: center; gap: var(--circle-space-2); }
.card-desc { color: var(--circle-content-secondary); font-size: var(--circle-text-sm); }
.badge {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: var(--circle-tracking-wide);
    background: var(--circle-feedback-info); color: #fff; padding: 2px 6px; border-radius: var(--circle-radius-full);
}
.card-go { position: absolute; top: var(--circle-space-4); right: var(--circle-space-5); font-size: var(--circle-text-xs); color: var(--app, var(--circle-brand-primary)); font-weight: var(--circle-weight-semibold); }
.card-go.muted { color: var(--circle-content-muted); }

/* ---------- footer ---------- */
.site-footer { text-align: center; padding: var(--circle-space-16) var(--circle-space-6); border-top: 1px solid var(--circle-border-subtle); background: var(--circle-surface-sunken); }
.signoff { font-size: var(--circle-text-lg); margin: 0 0 var(--circle-space-3); }
.signoff strong { color: var(--circle-brand-primary); }
.copyright { color: var(--circle-content-muted); font-size: var(--circle-text-sm); margin: 0; }

/* ---------- not found ---------- */
.empty { text-align: center; padding: var(--circle-space-24) var(--circle-space-6); }
.empty .btn { margin-top: var(--circle-space-5); }