/* Self-hosted variable fonts.
   Two reasons, not one. Performance: the first paint no longer waits on
   fonts.googleapis.com and fonts.gstatic.com, two extra DNS lookups and TLS
   handshakes that Lighthouse measured at 750ms of render blocking. Fidelity:
   this stylesheet asks for weights 620, 650 and 680, which only a variable
   font can actually render -- static instances silently snap to the nearest
   one. Only latin and latin-ext are kept; latin-ext carries the Turkish
   glyphs and must not be dropped. */

@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: 500 600;
  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: 500 600;
  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: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/sora-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: 'Sora';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/sora-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;
}

/* ============================================================
   ITU RSM — design system
   dark-first, signalling-inspired: navy night, signal blue,
   amber aspect lights, moving rails.
   ============================================================ */

:root{
  /* brand */
  --navy:#070F1C; --navy-700:#132A4A; --navy-500:#1E3F6B;
  --blue:#3B82F6; --blue-deep:#1D4ED8; --cyan:#22D3EE;
  --amber:#F5A524; --green:#34D399; --red:#F2545B;

  /* surfaces (dark is the default) */
  --bg:#070F1C; --bg-2:#0B1728;
  --surface:rgba(255,255,255,.045); --surface-solid:#0F1E33;
  --surface-2:#0C1A2C;
  --fg:#EAF2FF; --fg-muted:#93A7C4; --border:rgba(255,255,255,.10);
  --ring:rgba(59,130,246,.55);

  --logo-ink:#EAF2FF; --logo-body:#0B1728;

  --radius:18px; --radius-sm:10px; --radius-lg:28px;
  --shadow-1:0 1px 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 24px 60px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(59,130,246,.35),0 18px 50px rgba(29,78,216,.35);
  --maxw:1220px;

  --ff-display:"Sora","Segoe UI",system-ui,sans-serif;
  --ff-body:"Inter","Segoe UI",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --step:clamp(1rem,.96rem + .22vw,1.08rem);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F4F7FC; --bg-2:#EAF0F9;
  --surface:rgba(16,32,56,.035); --surface-solid:#FFFFFF; --surface-2:#E9F0FA;
  --fg:#0B1728; --fg-muted:#51657F; --border:rgba(11,23,40,.12);
  --logo-ink:#132A4A; --logo-body:#FFFFFF;
  --shadow-1:0 1px 2px rgba(15,23,42,.05),0 10px 24px rgba(15,23,42,.07);
  --shadow-2:0 26px 60px rgba(17,34,62,.16);
  --glow:0 0 0 1px rgba(59,130,246,.25),0 18px 44px rgba(29,78,216,.18);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--ff-body);
  font-size:var(--step);line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ambient light behind everything */
body::before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48vw 40vw at 78% -6%,rgba(59,130,246,.30),transparent 62%),
    radial-gradient(40vw 34vw at 6% 8%,rgba(34,211,238,.16),transparent 60%),
    radial-gradient(46vw 40vw at 50% 108%,rgba(245,165,36,.12),transparent 62%);
  filter:saturate(1.1);
}
:root[data-theme="light"] body::before{opacity:.5}
/* faint engineering grid */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 100%);
}

h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.08;letter-spacing:-.03em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);font-weight:700}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);font-weight:650}
h3{font-size:clamp(1.12rem,1rem + .55vw,1.38rem);font-weight:620;letter-spacing:-.015em}
/* A card title sitting directly under the page h1 has to be an h2 -- jumping
   from h1 to h3 breaks heading navigation for screen-reader users -- but it
   should still be drawn at card size, not section size. */
h2.h-sm{font-size:clamp(1.12rem,1rem + .55vw,1.38rem);font-weight:620;letter-spacing:-.015em}

/* Skip link: the first thing a keyboard reaches, invisible until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--surface-solid);color:var(--fg);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:1rem;top:1rem;text-decoration:none;outline:2px solid var(--blue);outline-offset:2px}
#main{display:block}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
img{display:block}
::selection{background:rgba(59,130,246,.35);color:#fff}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.section{padding:clamp(3.5rem,8vw,7.5rem) 0;position:relative}
.section--tint{background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent)}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--fg-muted);max-width:62ch}

/* eyebrow with a blinking signal dot */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1rem;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(245,165,36,.16),0 0 14px rgba(245,165,36,.9);
  animation:aspect 2.6s ease-in-out infinite;
}
@keyframes aspect{0%,100%{opacity:1}50%{opacity:.25}}

/* gradient headline accent */
.grad{
  background:linear-gradient(100deg,var(--cyan),var(--blue) 42%,#A78BFA 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* language switching */
[lang]:not(html){display:none}
html[data-lang="en"] [lang="en"],html[data-lang="tr"] [lang="tr"]{display:revert}

/* ============================ header ============================ */
/* the header and footer are injected by app.js, so their boxes have to be
   reserved up front -- otherwise the hero is painted at the top of the page and
   then pushed down by 78px, which is exactly the 0.15 layout shift Lighthouse
   measured. keep this in step with .site-header__bar's min-height. */
#site-header{min-height:78px}
.site-header{position:sticky;top:0;z-index:70;transition:background .3s,box-shadow .3s,border-color .3s}
.site-header::before{
  content:"";position:absolute;inset:0;backdrop-filter:blur(14px) saturate(1.5);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  opacity:0;transition:opacity .3s;border-bottom:1px solid transparent;
}
.site-header.is-stuck::before{opacity:1;border-bottom-color:var(--border)}
.site-header__bar{position:relative;display:flex;align-items:center;gap:1.25rem;min-height:78px;transition:min-height .3s}
.site-header.is-stuck .site-header__bar{min-height:64px}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:2;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--amber));box-shadow:0 0 12px rgba(59,130,246,.8)}

.brand{display:flex;align-items:center;gap:.75rem;color:var(--fg);font-family:var(--ff-display);font-weight:680;letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand__mark{width:46px;height:46px;flex:0 0 auto;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand__mark{transform:translateY(-2px) scale(1.04)}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__txt b{font-size:1.04rem}
.brand__txt span{font-size:.7rem;color:var(--fg-muted);font-weight:500;letter-spacing:.06em}

.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a{position:relative;padding:.55rem .78rem;border-radius:999px;color:var(--fg-muted);font-size:.92rem;font-weight:500;transition:color .2s}
.nav a:hover{color:var(--fg);text-decoration:none}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:.28rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));transition:left .25s,right .25s}
.nav a:hover::after{left:.78rem;right:.78rem}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{left:.78rem;right:.78rem}

.tools{display:flex;align-items:center;gap:.4rem;margin-left:.7rem}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.35rem;border-radius:999px;border:1px solid transparent;font-weight:600;
  font-size:.95rem;cursor:pointer;font-family:var(--ff-body);overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:linear-gradient(100deg,var(--blue-deep),var(--blue) 55%,var(--cyan));color:#fff;box-shadow:var(--glow)}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45),transparent 80%);
  transform:translateX(-120%);transition:transform .7s}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--ghost{background:var(--surface);color:var(--fg);border-color:var(--border);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--border));background:color-mix(in srgb,var(--blue) 12%,transparent)}
.btn--sm{padding:.42rem .8rem;font-size:.82rem;font-family:var(--ff-mono);letter-spacing:.06em}
.icon-btn{width:38px;height:38px;padding:0;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.nav-toggle{display:none}

/* ============================ hero ============================ */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__inner{position:relative;z-index:3;padding:clamp(5rem,12vh,9rem) 0 clamp(3rem,7vh,5rem)}

/* receding rails, drawn in CSS perspective, sleepers in motion */
.rails{position:absolute;inset:auto 0 0;height:66%;z-index:1;pointer-events:none;
  perspective:340px;perspective-origin:50% 0%;
  mask-image:linear-gradient(to top,#000 42%,transparent 96%);}
/* the structure breathes with the headline swap, so the change reads as one
   event instead of a word flipping in front of a static backdrop.
   a transition, not a keyframe animation: restarting a keyframe needs a forced
   reflow every 2.6s, which Lighthouse counts against us. adding and removing the
   class drives a transition on its own. */
.rails{transition:filter .5s cubic-bezier(.16,.84,.26,1)}
.hero.is-swapping .rails{filter:blur(3px) brightness(1.35)}
.rails__plane{position:absolute;inset:-60% -30% -40%;transform:rotateX(74deg);transform-style:preserve-3d;
  background:
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(147,180,230,.5) 118px 124px,transparent 124px 242px);
  opacity:.85;
}
.rails__ties{position:absolute;inset:-60% -30% -40%;transform:rotateX(74deg);
  background:repeating-linear-gradient(0deg,rgba(147,180,230,.42) 0 7px,transparent 7px 62px);
  animation:ties 1.9s linear infinite;
}
@keyframes ties{to{background-position:0 62px}}
.hero__glow{position:absolute;left:50%;bottom:16%;width:min(60vw,720px);aspect-ratio:1;translate:-50% 0;z-index:2;
  background:radial-gradient(closest-side,rgba(59,130,246,.42),rgba(34,211,238,.12) 55%,transparent 72%);
  filter:blur(8px);animation:pulse 6s ease-in-out infinite;
  transition:filter .5s cubic-bezier(.16,.84,.26,1)}
.hero.is-swapping .hero__glow{filter:blur(22px) brightness(1.3) saturate(1.12)}
@keyframes pulse{0%,100%{opacity:.75;transform:translate(-50%,0) scale(1)}50%{opacity:1;transform:translate(-50%,-2%) scale(1.06)}}

.hero h1{max-width:16ch;margin-bottom:1.2rem}
.hero .lede{max-width:56ch;color:var(--fg-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* rotating keyword in the headline */
/* gaussian swap: the outgoing word defocuses on its way out, the incoming one
   resolves out of focus.
   the words are stacked in one grid cell, so they must never be visible at the
   same time -- two gradient words on top of each other read as a smear, not as a
   crossfade, and at this size it is very obvious. the incoming delay (.36s) is
   therefore >= the outgoing duration (.34s): the exit is completely finished,
   visibility included, before the entrance is allowed to start. do not shorten
   the delay below the exit duration to "tighten" the animation. */
.rotator{display:inline-grid;vertical-align:bottom}
.rotator > span{grid-area:1/1;opacity:0;visibility:hidden;
  filter:blur(18px);transform:translateY(.12em) scale(.98);
  transition:opacity .22s ease,
             filter .34s cubic-bezier(.4,0,.7,.2),
             transform .34s cubic-bezier(.4,0,.7,.2),
             visibility 0s linear .34s;
  will-change:opacity,filter,transform}
.rotator > span.is-on{opacity:1;visibility:visible;
  filter:blur(0);transform:none;
  transition:opacity .40s ease .36s,
             filter .62s cubic-bezier(.16,.84,.26,1) .36s,
             transform .62s cubic-bezier(.16,.84,.26,1) .36s,
             visibility 0s linear .36s}

/* stats strip */
.hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-top:clamp(2.5rem,6vh,4rem);
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;z-index:3}
.stat{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(8px);padding:1.25rem 1.35rem;transition:background .3s}
.stat:hover{background:color-mix(in srgb,var(--blue) 14%,var(--bg))}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--fg),color-mix(in srgb,var(--fg) 45%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.82rem;color:var(--fg-muted)}

.scrollcue{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:4;font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-muted);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scrollcue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--blue),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============================ marquee ============================ */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--border);padding:.85rem 0;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.7}

/* ============================ page header ============================ */
.pagehead{position:relative;padding:clamp(4rem,10vw,7rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 100% at 20% 0%,rgba(59,130,246,.22),transparent 70%)}
.pagehead h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);margin-bottom:.5rem}
.pagehead p{color:var(--fg-muted);margin:0;max-width:62ch;font-size:1.06rem}
.crumbs{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:1rem}
.crumbs a{color:var(--fg-muted)}

/* ============================ cards ============================ */
.grid{display:grid;gap:1.15rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem;backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
}
/* cursor spotlight (x/y set from JS) */
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(59,130,246,.22),transparent 65%);
}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--blue) 45%,var(--border));box-shadow:var(--shadow-2)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.45rem}
.card p{color:var(--fg-muted);margin-bottom:0}
.card--link{display:block;color:inherit}
.card--link:hover{text-decoration:none}
.card--feature{background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 22%,transparent),transparent 60%),var(--surface)}

/* numbered tag */
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:1.7rem;padding:0 .55rem;
  border-radius:999px;font-family:var(--ff-mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);margin-bottom:.9rem}

/* ============================ tables ============================ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);backdrop-filter:blur(8px)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--border)}
th{position:sticky;top:64px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  font-family:var(--ff-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);z-index:2}
td:first-child{font-family:var(--ff-mono);font-size:.84rem;color:var(--cyan);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:color-mix(in srgb,var(--blue) 10%,transparent)}
/* a course code that actually leads somewhere must look different from one that does not */
td a{color:var(--cyan);white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--cyan) 45%,transparent)}
td a:hover{text-decoration:none;color:var(--fg);border-bottom-color:currentColor}

/* ============================ lists ============================ */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.65rem;color:var(--fg-muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.people{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.people li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.93rem;transition:.25s}
.people li:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--border));transform:translateX(4px)}
.people li > b{display:block;padding:.7rem 1rem;color:var(--fg-muted);font-weight:500}
.people li > a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem 1rem;color:var(--fg)}
.people li > a:hover{text-decoration:none;color:var(--blue)}
.people .ext{font-size:.9rem;color:var(--fg-muted);opacity:0;transform:translate(-4px,4px);transition:.25s}
.people li:hover .ext{opacity:1;transform:none;color:var(--blue)}
.people-note{margin-top:1.2rem;font-size:.84rem;color:var(--fg-muted)}

/* ============================ timeline ============================ */
.feed{list-style:none;padding:0;margin:0;position:relative}
.feed::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--blue),color-mix(in srgb,var(--blue) 10%,transparent))}
.feed li{position:relative;padding:0 0 2rem 2.4rem}
.feed li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.feed time{font-family:var(--ff-mono);font-size:.74rem;font-weight:600;color:var(--amber);letter-spacing:.14em;text-transform:uppercase}
.feed h3{margin:.3rem 0 .35rem;font-size:1.1rem}
.feed p{color:var(--fg-muted);margin:0}

/* ============================ cta ============================ */
.cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.4rem,6vw,4.2rem);text-align:center;
  border:1px solid var(--border);background:linear-gradient(140deg,color-mix(in srgb,var(--blue) 26%,transparent),transparent 55%),var(--surface-2)}
.cta::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;
  background:radial-gradient(closest-side,rgba(59,130,246,.35),transparent 70%);filter:blur(10px)}
.cta > *{position:relative;z-index:1}
.cta p{color:var(--fg-muted);max-width:58ch;margin-inline:auto}

/* ============================ footer ============================ */
.site-footer{--logo-ink:var(--fg);position:relative;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-2) 80%,transparent);padding:3.6rem 0 1.8rem;margin-top:2rem}
.site-footer h4{color:var(--fg);font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 .9rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem;font-size:.92rem}
.site-footer a{color:var(--fg-muted)}
.site-footer a:hover{color:var(--fg)}
.foot-grid{display:grid;gap:2.4rem 2rem;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:start}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-bottom{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:space-between;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-muted)}

/* ============================ motion ============================ */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .rails__ties,.marquee__track,.eyebrow::before,.hero__glow,.scrollcue::after{animation:none}
  .rotator > span,.rotator > span.is-on{filter:none;transform:none;
    transition:opacity .2s linear,visibility 0s linear .2s}
  .hero.is-swapping .rails{filter:none}
  .rails{transition:none}
  .hero.is-swapping .hero__glow{filter:blur(8px)}
  .hero__glow{transition:none}
}

/* ============================ responsive ============================ */
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;
    background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);padding:.8rem 1.25rem 1.4rem;display:none;box-shadow:var(--shadow-2)}
  .nav.is-open{display:flex}
  .nav a{padding:.8rem .6rem;font-size:1rem}
  .tools{margin-left:auto}
  th{top:0}
}
@media (max-width:520px){
  .brand__txt span{display:none}
  .hero{min-height:88svh}
}