/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — Light & Dark
════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
    --font:          'Satoshi', 'Inter', system-ui, sans-serif;

    /* Fluid type */
    --tx-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
    --tx-sm:   clamp(0.875rem, 0.82rem + 0.30vw, 1rem);
    --tx-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
    --tx-lg:   clamp(1.1rem,   1rem    + 0.50vw, 1.35rem);

    /* Spacing (4 px grid) */
    --sp-1:.25rem;  --sp-2:.5rem;  --sp-3:.75rem;
    --sp-4:1rem;    --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;

    /* Palette — Light */
    --bg:          #f5f4f0;
    --surface:     rgba(252,251,248,0.86);
    --surface-2:   #fafaf8;
    --border:      rgba(30,28,22,0.11);
    --border-lt:   rgba(30,28,22,0.065);
    --text:        #1d1b15;
    --text-muted:  #65625b;
    --text-faint:  #9a9790;
    --primary:     #01696f;
    --primary-h:   #095055;
    --primary-glow:rgba(1,105,111,0.16);
    --primary-tint:rgba(1,105,111,0.09);
    --green:       #437a22;

    /* Shadows */
    --sh-xs: 0 1px 2px rgba(16,24,40,0.05);
    --sh-sm: 0 2px 8px rgba(16,24,40,0.07);
    --sh-md: 0 10px 28px rgba(16,24,40,0.09);

    /* Motion */
    --ease: 200ms cubic-bezier(0.16,1,0.3,1);
    --spring: 380ms cubic-bezier(0.34,1.56,0.64,1);

    /* Layout */
    --h-nav: 5.25rem;
    --wrap:  min(1260px, calc(100% - 2.5rem));

    /* Radii */
    --r-sm:.375rem; --r-md:.625rem; --r-lg:1rem; --r-xl:1.5rem; --r-full:9999px;
}

[data-theme="dark"] {
    --bg:          #131210;
    --surface:     rgba(21,20,18,0.88);
    --surface-2:   #1e1d1b;
    --border:      rgba(230,225,215,0.13);
    --border-lt:   rgba(230,225,215,0.065);
    --text:        #edeae3;
    --text-muted:  #9f9c94;
    --text-faint:  #68655e;
    --primary:     #4ea0aa;
    --primary-h:   #7ec4cc;
    --primary-glow:rgba(78,160,170,0.2);
    --primary-tint:rgba(78,160,170,0.1);
    --green:       #71af47;
    --sh-xs:0 1px 2px rgba(0,0,0,0.22);
    --sh-sm:0 2px 8px rgba(0,0,0,0.28);
    --sh-md:0 10px 28px rgba(0,0,0,0.36);
}

@media (prefers-color-scheme:dark){
    :root:not([data-theme]){
        --bg:#131210; --surface:rgba(21,20,18,0.88); --surface-2:#1e1d1b;
        --border:rgba(230,225,215,0.13); --border-lt:rgba(230,225,215,0.065);
        --text:#edeae3; --text-muted:#9f9c94; --text-faint:#68655e;
        --primary:#4ea0aa; --primary-h:#7ec4cc;
        --primary-glow:rgba(78,160,170,0.2); --primary-tint:rgba(78,160,170,0.1);
        --green:#71af47;
        --sh-xs:0 1px 2px rgba(0,0,0,0.22);
        --sh-sm:0 2px 8px rgba(0,0,0,0.28);
        --sh-md:0 10px 28px rgba(0,0,0,0.36);
    }
}

/* ════════════════════════════════════════════════════════════
   BASE RESET
════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:var(--h-nav);-webkit-text-size-adjust:none;text-size-adjust:none;}
body{
    min-height:100dvh;
    font-family:var(--font);
    font-size:var(--tx-base);
    color:var(--text);
    background-color:var(--bg);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),
          box-shadow var(--ease),transform var(--ease),opacity var(--ease);}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--r-sm);}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
.site-header{
    position:sticky;top:0;z-index:200;
    backdrop-filter:blur(22px) saturate(155%);
    -webkit-backdrop-filter:blur(22px) saturate(155%);
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--sh-xs);
    transition:box-shadow var(--ease),background var(--ease);
}
.site-header.scrolled{box-shadow:var(--sh-sm);}

/* Teal gradient underline */
.site-header::after{
    content:"";position:absolute;bottom:-1px;left:8%;right:8%;
    height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--primary) 38%,var(--green) 68%,transparent);
    opacity:.45;
}

/* ── Scroll progress bar ─── */
.scroll-bar{
    position:absolute;bottom:0;left:0;height:2.5px;width:0%;
    background:linear-gradient(90deg,var(--primary),var(--green));
    border-radius:var(--r-full);transition:width 80ms linear;
}

/* ── Inner row (3-col grid) ─── */
.h-inner{
    width:var(--wrap);margin-inline:auto;
    min-height:var(--h-nav);
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;column-gap:var(--sp-4);
    padding-block:.9rem;
}

/* ════════════════════════════════════════════════════════════
   BRAND / LOGO
════════════════════════════════════════════════════════════ */
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);min-width:0;}
.brand:focus-visible{outline-offset:5px;border-radius:var(--r-md);}

.brand-mark{
    flex-shrink:0;width:3.125rem;height:3.125rem;
    border-radius:var(--r-lg);
    border:1px solid var(--border);
    background:linear-gradient(145deg,var(--primary-tint),rgba(255,255,255,0.32));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),var(--sh-sm);
    display:grid;place-items:center;overflow:hidden;color:var(--primary);
    transition:transform var(--spring),box-shadow var(--ease);
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark{
    transform:scale(1.08) rotate(-4deg);
    box-shadow:0 6px 20px var(--primary-glow),var(--sh-sm);
}
.brand-mark img{width:100%;height:100%;object-fit:contain;padding:.375rem;}
.brand-mark svg{width:58%;height:58%;}

.brand-text{min-width:0;}
.brand-name{
    display:block;font-size:var(--tx-lg);font-weight:900;
    letter-spacing:-.03em;line-height:1.05;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    background:linear-gradient(120deg,var(--text) 45%,var(--primary));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.brand-sub{
    display:block;margin-top:.2rem;font-size:var(--tx-xs);font-weight:500;
    color:var(--text-faint);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:17rem;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP NAV PILL
════════════════════════════════════════════════════════════ */
.nav-desk{
    display:flex;align-items:center;justify-content:center;gap:.25rem;
    padding:.35rem;border-radius:var(--r-full);
    background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.06));
    border:1px solid var(--border-lt);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--sh-xs);
}
.n-link{
    position:relative;display:inline-flex;align-items:center;
    min-height:2.75rem;padding-inline:.85rem;
    border-radius:var(--r-full);font-size:var(--tx-sm);font-weight:700;
    color:var(--text-muted);white-space:nowrap;overflow:hidden;
}
.n-link::before{
    content:"";position:absolute;inset:0;border-radius:inherit;
    background:var(--primary-tint);opacity:0;
    transform:scale(.84);
    transition:opacity var(--ease),transform var(--spring);
}
.n-link .lbl{position:relative;z-index:1;}
.n-link:hover,.n-link:focus-visible{color:var(--text);}
.n-link:hover::before,.n-link:focus-visible::before{opacity:1;transform:scale(1);}

/* Active state */
.n-link.active{color:var(--primary);font-weight:900;}
.n-link.active::before{opacity:1;transform:scale(1);}
.n-link.active::after{
    content:"";position:absolute;bottom:.42rem;left:50%;
    transform:translateX(-50%);width:4px;height:4px;
    border-radius:var(--r-full);background:var(--primary);
}

/* ════════════════════════════════════════════════════════════
   HEADER ACTIONS
════════════════════════════════════════════════════════════ */
.h-actions{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;}

/* Icon buttons */
.icon-btn{
    width:2.875rem;height:2.875rem;border-radius:var(--r-full);
    border:1px solid var(--border);
    background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--sh-xs);
    display:inline-grid;place-items:center;color:var(--text-muted);
}
.icon-btn:hover,.icon-btn:focus-visible{
    background:var(--primary-tint);border-color:rgba(1,105,111,.22);
    color:var(--primary);transform:translateY(-2px);
    box-shadow:0 6px 16px var(--primary-glow),var(--sh-xs);
}
.icon-btn:active{transform:translateY(0);}

/* Login CTA */
.btn-login{
    display:inline-flex;align-items:center;gap:.5rem;
    height:2.875rem;padding-inline:1.25rem;
    border-radius:var(--r-full);font-size:var(--tx-sm);font-weight:800;
    letter-spacing:.01em;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-h));
    border:1px solid rgba(0,0,0,.1);
    box-shadow:0 8px 20px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,.16);
    position:relative;overflow:hidden;
}
.btn-login::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(255,255,255,.12),transparent);
    transition:opacity var(--ease);
}
.btn-login:hover,.btn-login:focus-visible{
    transform:translateY(-2px);filter:brightness(1.06);
    box-shadow:0 14px 28px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-login:active{transform:translateY(0);}
.btn-login .lbl,.btn-login svg{position:relative;z-index:1;}

/* Hamburger — hidden on desktop */
.hamburger{display:none;}

/* ════════════════════════════════════════════════════════════
   MOBILE DRAWER
════════════════════════════════════════════════════════════ */
.mob-nav{
    display:none;
    width:var(--wrap);margin-inline:auto;
    padding:.6rem;margin-bottom:.875rem;
    border-radius:var(--r-xl);
    background:var(--surface-2);
    border:1px solid var(--border);
    box-shadow:var(--sh-md);
}
.mob-nav.open{
    display:grid;gap:.3rem;
    animation:slideDown 220ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes slideDown{
    from{opacity:0;transform:translateY(-10px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.m-link{
    display:flex;align-items:center;justify-content:space-between;
    min-height:3.25rem;padding:.875rem 1rem;
    border-radius:var(--r-lg);font-size:var(--tx-sm);font-weight:700;
    color:var(--text-muted);border:1px solid transparent;
}
.m-link:hover,.m-link:focus-visible{
    background:var(--primary-tint);border-color:rgba(1,105,111,.14);color:var(--text);
}
.m-link.active{
    background:var(--primary-tint);border-color:rgba(1,105,111,.2);color:var(--primary);
}
.m-link .arr{opacity:.3;transition:transform var(--ease),opacity var(--ease);}
.m-link:hover .arr,.m-link:focus-visible .arr{opacity:1;transform:translateX(4px);}

.mob-sep{height:1px;background:var(--border);margin:.4rem 0;border-radius:var(--r-full);}

.mob-login{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;height:3.25rem;border-radius:var(--r-xl);
    font-size:var(--tx-sm);font-weight:800;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-h));
    box-shadow:0 8px 20px var(--primary-glow);margin:.2rem 0 .3rem;
}
.mob-login:hover{filter:brightness(1.07);}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
    .nav-desk{display:none;}
    .hamburger{display:inline-grid;}
    .h-inner{grid-template-columns:auto 1fr auto;}
}
@media(max-width:640px){
    .brand-sub{display:none;}
    .btn-login .lbl{display:none;}
    .btn-login{padding-inline:.875rem;}
    :root{--h-nav:4.75rem;}
}
@media(max-width:400px){
    :root{--wrap:min(1260px,calc(100% - 1.5rem));}
}