/* ============================================================
   WEB ENGINEER — Design System
   Hand-written CSS. No framework, no build step.
   ============================================================ */

/* Self-hosted (SIL Open Font License). Variable fonts: one file covers every weight.
   latin + latin-ext only; latin-ext carries the rupee sign. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Certificate faces (OFL). Declared here, fetched only where a certificate is drawn. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/cormorant-garamond-normal-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/great-vibes-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Metric-matched fallbacks. Until a web font arrives the browser draws the
   fallback; if its glyphs are a different width, lines re-wrap when the real
   font swaps in and the hero jumps (measured: CLS 0.235 on desktop). These
   faces scale a local system font to the web font's measured width, so the
   swap changes the letterforms but not the layout. Values measured in Chrome
   against the real files (tools: canvas measureText over the page's own text). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:106.57%;ascent-override:91.02%;descent-override:22.52%;line-gap-override:0%}
@font-face{font-family:'Space Grotesk Fallback';src:local('Arial'),local('ArialMT'),local('Roboto');
  size-adjust:101.23%;ascent-override:96.8%;descent-override:28.65%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono Fallback';src:local('Courier New'),local('CourierNewPSMT');
  size-adjust:99.96%;ascent-override:102.04%;descent-override:30.01%;line-gap-override:0%}

/* ---------- 1. TOKENS ---------- */
:root {
  /* surfaces */
  --bg:            #07070b;
  --bg-elev:       #0c0c13;
  --bg-elev-2:     #12121c;
  --surface:       rgba(255,255,255,.028);
  --surface-hi:    rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.085);
  --line-hi:       rgba(255,255,255,.16);

  /* text */
  --text:          #f2f3f7;
  --text-soft:     #a7acbd;
  --text-dim:      #7d849a;   /* 4.99:1 on the darkest surface — AA */

  /* brand — taken from the logo: a teal globe with an amber highlight.
     Three shades, each chosen for the job it does rather than by eye:
       --brand-ink  the logo's own teal, for the mark and gradients
       --brand      a filled button; white text on it is 4.69:1 (AA)
       --brand-hi   accent text on dark surfaces; 9.99:1 (AA) */
  --brand-ink:    #0d9488;
  --brand:        #0b8278;
  --brand-dark:   #097068;   /* button hover; white text 5.95:1 */
  --brand-hi:     #2dd4bf;
  --cyan:          #22d3ee;
  --lime:          #a3e635;
  --amber:         #fbbf24;
  --rose:          #fb7185;

  --accent:        var(--brand);

  --grad-brand:    linear-gradient(120deg, #0d9488 0%, #2dd4bf 52%, #f59e0b 100%);
  --grad-warm:     linear-gradient(120deg, #fb7185 0%, #fbbf24 100%);
  --grad-fade:     linear-gradient(180deg, rgba(13,148,136,.14), transparent 70%);

  /* type */
  --f-display: "Space Grotesk", "Space Grotesk Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Menlo, monospace;

  /* fluid scale */
  --t-xs:  clamp(.72rem, .70rem + .1vw, .78rem);
  --t-sm:  clamp(.82rem, .80rem + .12vw, .90rem);
  --t-base:clamp(.95rem, .92rem + .16vw, 1.05rem);
  --t-lg:  clamp(1.08rem, 1.02rem + .3vw, 1.25rem);
  --t-xl:  clamp(1.3rem, 1.15rem + .7vw, 1.75rem);
  --t-2xl: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  --t-3xl: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  --t-4xl: clamp(2.7rem, 1.4rem + 5.4vw, 6.2rem);

  /* space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;
  --sp-9:6rem;   --sp-10:8rem;

  /* shape */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 10px 30px -12px rgba(0,0,0,.65);
  --sh-lg: 0 30px 70px -24px rgba(0,0,0,.8);

  /* motion */
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
  --d-fast: .18s; --d: .32s; --d-slow: .6s;

  --nav-h: 68px;
  --maxw: 1240px;
}

/* light theme */
:root[data-theme="light"] {
  --bg:#f7f8fb; --bg-elev:#ffffff; --bg-elev-2:#f1f2f7;
  --surface: rgba(10,12,25,.035); --surface-hi: rgba(10,12,25,.06);
  --line: rgba(10,12,25,.1); --line-hi: rgba(10,12,25,.2);
  --text:#0b0d16; --text-soft:#4a5068; --text-dim:#5f667e;   /* 5.09:1 — AA */
  /* Accents darkened for light backgrounds: the dark-theme values are 1.3-1.7:1
     on white. Every value here is >= 5:1 on page, card and pill surfaces. */
  --brand-hi:#096860; --cyan:#0f6f86; --lime:#3f6a0b; --amber:#a14a08; --rose:#be123c;
  --brand-ink:#0d9488; --brand-dark:#086861;
  --sh-md: 0 10px 30px -14px rgba(16,20,45,.22);
  --sh-lg: 0 30px 70px -28px rgba(16,20,45,.3);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
/* Sideways scroll on a phone, and why it needs to be on html, not just body.
   Two things stick out past the right edge before they settle: an element
   waiting to reveal sits at translateX(26px), and the drifting background
   orbs move 70px. On body alone the viewport still widened — on a 390px
   phone Chrome grew the layout viewport to 442, which then stretched every
   100vw element with it.
   clip, not hidden: hidden would make html a scroll container and break the
   sticky curriculum sidebar. clip just cuts, and leaves sticky alone. */
html{overflow-x:clip}
body{
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;min-height:100dvh;
  /* Short pages — sign in, your account — ended with the footer halfway
     down the window and a blank band beneath it. The column pushes the
     footer to the bottom; anything fixed or absolute stays out of flow. */
  display:flex;flex-direction:column;
  transition:background var(--d) var(--e-out), color var(--d) var(--e-out);
}
body > main{flex:1 0 auto}
img,svg,video,canvas{display:block;max-width:100%}
/* author display rules (img{display:block} above) beat the browser's own [hidden]{display:none}; restore it */
[hidden]{display:none!important}
img,video{height:auto}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--brand-hi);outline-offset:3px;border-radius:4px}
::selection{background:rgba(13,148,136,.35);color:#fff}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-hi);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--brand)}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.025em}
h1{font-size:var(--t-4xl);letter-spacing:-.04em}
h2{font-size:var(--t-3xl);letter-spacing:-.035em}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
p{color:var(--text-soft);text-wrap:pretty}
.mono{font-family:var(--f-mono);font-size:.88em;letter-spacing:-.01em}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-soft{color:var(--text-soft)} .text-dim{color:var(--text-dim)}
/* yes / no, for a note that answers while you type */
.text-lime{color:var(--lime)} .text-rose{color:var(--rose)}
.lead{font-size:var(--t-lg);color:var(--text-soft);max-width:60ch;line-height:1.6}
.balance{text-wrap:balance}
/* links inside running text must not rely on colour alone (WCAG 1.4.1) */
p a:not(.btn), li a:not(.btn):not(.nav-link), .prose a{text-decoration:underline;text-underline-offset:2px}
/* Size classes that let a heading keep its correct rank in the document
   outline while looking the size the layout needs. `.h4` was here on its
   own, so `<h1 class="h3">` on the sign-in page silently rendered at full
   h1 size — four lines of "Sign in or create an account" filling the card
   above a small form. */
.h3{font-size:var(--t-xl)}
.h4{font-size:var(--t-lg)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center-txt{text-align:center}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.wrap-sm{max-width:820px}
.wrap-lg{max-width:1480px}
.section{padding-block:clamp(4rem,9vw,8rem);position:relative}
.section-tight{padding-block:clamp(2.5rem,5vw,4.5rem)}
.grid{display:grid;gap:var(--sp-5)}
/* Grid items default to min-width:auto, so one long unbreakable line (a code
   sample, a URL) makes the whole column wider than the screen. Every grid in
   the design system opts out. */
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* A wide main column with a narrower sidebar. A class rather than an
   inline style, because an inline grid-template-columns cannot be undone
   by the breakpoint below and stayed two-up at 320px, slicing the text. */
.g-aside{grid-template-columns:1.4fr .9fr}
.flex{display:flex;gap:var(--sp-4)} .between{justify-content:space-between}
.center{align-items:center} .wrapf{flex-wrap:wrap} .col{flex-direction:column}
.stack>*+*{margin-top:var(--sp-4)}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g-aside{grid-template-columns:1fr}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.sec-head{max-width:720px;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head.ctr{margin-inline:auto;text-align:center}
.sec-head p{margin-top:var(--sp-4);font-size:var(--t-lg)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;
  color:var(--text-dim);margin-bottom:var(--sp-4);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--brand)}
.sec-head.ctr .eyebrow::after{content:"";width:22px;height:1px;background:var(--brand)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --b-bg:var(--surface-hi); --b-fg:var(--text); --b-bd:var(--line-hi);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.4rem;border-radius:var(--r-full);
  background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);
  font-size:var(--t-sm);font-weight:560;letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--d-fast) var(--e-out), background var(--d-fast),
             border-color var(--d-fast), box-shadow var(--d) var(--e-out), opacity var(--d-fast);
  overflow:hidden;isolation:isolate;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:17px;height:17px;flex:none}

.btn-primary{--b-bg:var(--brand);--b-fg:#fff;--b-bd:transparent;box-shadow:0 10px 30px -12px rgba(13,148,136,.8)}
.btn-primary:hover{--b-bg:var(--brand-dark);box-shadow:0 18px 44px -14px rgba(13,148,136,.95)}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--e-out);
}
.btn-primary:hover::after{transform:translateX(120%)}

.btn-ghost{--b-bg:transparent;--b-bd:var(--line-hi)}
.btn-ghost:hover{--b-bg:var(--surface-hi);--b-bd:var(--brand)}
.btn-solid{--b-bg:var(--text);--b-fg:var(--bg);--b-bd:transparent}
.btn-grad{--b-fg:#0a0a12;--b-bd:transparent;background:var(--grad-brand);font-weight:650}
.btn-sm{padding:.5rem 1rem;font-size:var(--t-xs)}
.btn-lg{padding:1rem 1.9rem;font-size:var(--t-base)}
.btn-block{width:100%}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--r-full)}

/* ---------- 6. CARDS ---------- */
.card{
  position:relative;background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-5);
  transition:border-color var(--d) var(--e-out), transform var(--d) var(--e-out),
             background var(--d) var(--e-out), box-shadow var(--d) var(--e-out);
}
.card-hover:hover{transform:translateY(-4px);border-color:var(--line-hi);box-shadow:var(--sh-md)}
.card-glass{background:var(--surface);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

.card-glow::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(13,148,136,.75), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0;transition:opacity var(--d) var(--e-out);pointer-events:none;
}
.card-glow:hover::before{opacity:1}

.pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);
  font-size:var(--t-xs);font-weight:520;color:var(--text-soft);white-space:nowrap;
}
.pill-brand{border-color:rgba(13,148,136,.4);background:rgba(13,148,136,.12);color:var(--brand-hi)}
.pill-cyan{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.12);color:var(--cyan)}
.pill-lime{border-color:rgba(163,230,53,.38);background:rgba(163,230,53,.1);color:var(--lime)}
.pill-amber{border-color:rgba(251,191,36,.38);background:rgba(251,191,36,.1);color:var(--amber)}
.pill-rose{border-color:rgba(251,113,133,.38);background:rgba(251,113,133,.1);color:var(--rose)}

.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none;
  box-shadow:0 0 0 0 rgba(163,230,53,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(163,230,53,0)}100%{box-shadow:0 0 0 0 rgba(163,230,53,0)}}

/* ---------- 7. BACKGROUND FX ---------- */
.fx-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 25%,transparent 78%);
  opacity:.75;
}
.fx-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.5}
.fx-orb-a{width:min(620px,70vw);aspect-ratio:1;background:radial-gradient(circle,rgba(13,148,136,.55),transparent 68%);
  top:-18%;left:-10%;animation:drift 22s var(--e-io) infinite alternate}
.fx-orb-b{width:min(540px,60vw);aspect-ratio:1;background:radial-gradient(circle,rgba(34,211,238,.4),transparent 68%);
  top:8%;right:-12%;animation:drift 28s var(--e-io) infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(70px,60px,0) scale(1.12)}}
.fx-noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.rel{position:relative;z-index:2}

/* ---------- 8. NAVBAR ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--d) var(--e-out), border-color var(--d), backdrop-filter var(--d);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:var(--line);
}
.nav-inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:var(--sp-5)}

.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--f-display);
  font-weight:700;font-size:1.05rem;letter-spacing:-.03em;flex:none}
.logo-text{white-space:nowrap}
/* The mark is the logo itself, drawn as SVG so it stays sharp at any size and
   can switch ink for the dark theme. */
.logo-mark{width:32px;height:32px;flex:none;display:grid;place-items:center;
  --logo-ink:var(--brand-ink);
  transition:transform var(--d) var(--e-out)}
.logo-mark svg{width:100%;height:100%;display:block}
:root:not([data-theme="light"]) .logo-mark{--logo-ink:#2dd4bf}
.logo-word{color:var(--brand-ink)}
:root:not([data-theme="light"]) .logo-word{color:#2dd4bf}
.logo:hover .logo-mark{transform:rotate(-10deg) scale(1.08)}

.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-link{position:relative;padding:.5rem .8rem;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;color:var(--text-soft);
  transition:color var(--d-fast),background var(--d-fast)}
.nav-link:hover{color:var(--text);background:var(--surface)}
.nav-link.active{color:var(--text)}
.nav-link.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.18rem;
  height:2px;border-radius:2px;background:var(--grad-brand)}
.nav-actions{display:flex;align-items:center;gap:.5rem;flex:none}

.theme-btn{width:38px;height:38px;border-radius:var(--r-full);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text-soft);transition:all var(--d-fast)}
.theme-btn:hover{color:var(--text);border-color:var(--line-hi);background:var(--surface)}
.theme-btn svg{width:17px;height:17px}
:root[data-theme="light"] .i-moon{display:none}
:root:not([data-theme="light"]) .i-sun{display:none}

.burger{display:none;width:40px;height:40px;border-radius:var(--r-sm);
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{width:19px;height:1.8px;background:var(--text);border-radius:2px;
  transition:transform var(--d) var(--e-out),opacity var(--d-fast)}
.burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

@media(max-width:1000px){
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;
    gap:.2rem;padding:var(--sp-5) clamp(1rem,4vw,2rem) var(--sp-6);
    background:var(--bg-elev);border-bottom:1px solid var(--line);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform var(--d) var(--e-out),opacity var(--d) var(--e-out);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto}
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-link{padding:.8rem 1rem;font-size:var(--t-base)}
  .nav-link.active::after{display:none}
  .burger{display:flex}
  .nav-actions .btn{display:none}
}

.scroll-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:700;
  background:var(--grad-brand);transition:width .1s linear}

/* ---------- 9. REVEAL ---------- */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.reveal-ready [data-reveal="left"]{transform:translateX(-26px)}
.reveal-ready [data-reveal="right"]{transform:translateX(26px)}
.reveal-ready [data-reveal="scale"]{transform:scale(.95)}
.reveal-ready [data-reveal].in{opacity:1;transform:none}

/* Everything above is scoped to .reveal-ready, which core.js adds as soon
   as it runs. Without it nothing is hidden, so a page whose JavaScript
   fails to load shows its content rather than a blank column. */
@media (prefers-reduced-motion: reduce) {
  /* Asking for less motion should not cost you the page. */
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal="left"],
  .reveal-ready [data-reveal="right"],
  .reveal-ready [data-reveal="scale"] { opacity:1; transform:none; transition:none }
}

/* ---------- 10. FOOTER ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-elev);position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;background:var(--grad-fade);pointer-events:none}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--sp-6);
  padding-block:clamp(3rem,6vw,5rem)}
.footer h2{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-dim);font-family:var(--f-mono);font-weight:500;margin-bottom:var(--sp-4)}
.footer-links{display:flex;flex-direction:column;gap:.7rem}
/* min-height, not padding: these sit in a flex column, so padding would
   also widen the gap between them. 24px is the WCAG target size. */
.footer-links a{font-size:var(--t-sm);color:var(--text-soft);width:fit-content;display:inline-flex;align-items:center;min-height:24px;
  transition:color var(--d-fast),transform var(--d-fast)}
.footer-links a:hover{color:var(--text);transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);
  flex-wrap:wrap;padding-block:var(--sp-5);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--text-dim)}
.socials{display:flex;gap:.5rem}
.socials a{width:36px;height:36px;border-radius:var(--r-full);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text-soft);transition:all var(--d-fast)}
.socials a:hover{color:var(--text);border-color:var(--brand);background:rgba(13,148,136,.12);transform:translateY(-2px)}
.socials svg{width:16px;height:16px}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}