/* ================================================================
   SUMIT CHAUHAN — PORTFOLIO
   Design system: deep green-black surfaces, teal/mint accents,
   looping ridge footage behind the content.
   ================================================================ */

/* ----------------------------------------------------------------
   0 · TOKENS
---------------------------------------------------------------- */
:root {
  /* ── Surfaces ──────────────────────────────────────────────────
     Deep green-black, not neutral black. The base is a real colour,
     which is what stops the page reading as flat/dull. */
  --base:        #192524;
  --panel:       #1f2e2c;
  --panel-2:     #274039;

  /* ── Ink ───────────────────────────────────────────────────────
     All four tiers solid, in descending prominence. Ordering is
     load-bearing: --ink-faint must stay below --ink-dim. */
  --ink:         #EFECE9;
  --ink-soft:    #D0D5CE;
  --ink-dim:     #bcc4ba;
  /* Both weak tiers were raised again when the panels were removed. With
     content now on a light 0.42 wash instead of an opaque panel, the old
     #aab3a9 / #a1aaa3 pair measured 4.2 / 3.5:1 on bright frames — under
     AA. They were also within 3% of each other, which is not a hierarchy.
     Now genuinely separated, and both clear AA (5.1 / 4.7) at the worst
     backdrop the footage produces. Ordering still holds:
     ink > ink-soft > ink-dim > ink-faint. */
  --ink-faint:   #b4bdb3;

  /* ── Accent ────────────────────────────────────────────────────
     Teal carries the colour on surfaces (borders, panels, fills);
     mint carries it on text (links, highlights, active states).
     Mint is too pale to fill areas with, teal too dark to set type
     in — using each for the wrong job is what looks washed out. */
  --accent:      #d1ebdb;   /* mint — text-level highlights */
  --accent-soft: #EFECE9;   /* cream — brightest emphasis */
  --accent-deep: #3c5759;   /* teal — surfaces, borders, fills */
  /* Derived, not from the supplied six. Needed because the palette's only
     saturated colour (#3c5759) is too dark to set type in, while #d1ebdb is
     only ~11% saturated and reads as plain white at display sizes — which is
     exactly the "faded" problem. This is the same hue family, pushed to a
     lightness/saturation that actually registers as a colour. Use it for
     display accents and CTAs; use --accent for body-level highlights. */
  --accent-vivid: #8fd6b5;

  /* Legacy aliases from the old neon palette, repointed at the new
     accents. Keeps ~60 downstream call sites working untouched. */
  --blue:        #d1ebdb;
  --blue-bright: #EFECE9;
  --cyan:        #d1ebdb;
  --violet:      #3c5759;
  --warm:        #d1ebdb;

  /* Hairlines — tinted toward teal so borders carry colour too */
  --line:        rgba(209, 235, 219, 0.12);
  --line-strong: rgba(209, 235, 219, 0.22);
  --line-accent: rgba(209, 235, 219, 0.34);

  /* --glass-bg / --glass-shadow removed: panels no longer have a fill or a
     shadow. See .glass-panel — it is a masked wash now, not a surface. */

  --radius:      8px;
  --radius-sm:   6px;
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);

  /* Two families, not four. Weight and tracking carry the hierarchy. */
  --sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw:        1180px;
}

/* ----------------------------------------------------------------
   1 · RESET / BASE
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
strong { color: var(--ink); font-weight: 600; }
em { font-style: normal; }
::selection { background: rgba(209,235,219, 0.32); color: #fff; }

.font-mono { font-family: var(--mono); }
.text-white { color: #fff; }

.text-accent-glow {
  color: var(--accent-soft);
  font-weight: 500;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative;
  z-index: 2;
}

.hidden { display: none !important; }

/* ----------------------------------------------------------------
   2 · BACKDROP (looping footage)
   A procedural canvas "space scene" engine used to live here; it read as
   artificial and was deleted. Real footage sits far back instead, so it
   reads as atmosphere rather than as a feature.
---------------------------------------------------------------- */
.cosmos-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Fallback backdrop: shows before the video decodes, and stays visible
     if the file is missing or the browser blocks autoplay. */
  background:
    radial-gradient(135% 90% at 50% 0%, #23322f 0%, #192524 45%, #0f1717 100%);
}

.cosmos-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* No blur. The 2px was inherited thinking from the old 320x180 clip, where
     it hid a 6x upscale. This source is 848x478 and the blur was throwing
     away the sharpness it actually has.
     NOTE: 848x478 is below HD — it cannot be made sharper than the file is.
     Removing the blur gets everything the source has; genuine HD needs a
     genuine HD file. */
  filter: saturate(1.04) brightness(0.98) contrast(1.08);
  transform: scale(1.02);          /* hides sub-pixel edge seams only */
  /* Kept for the JS fallback path only — the clip loops natively now
     (measured seam 20.7/255 on a slow drift), so nothing drives this
     during normal playback. */
  opacity: 1;
  transition: opacity 600ms ease-in-out;
}

/* Global tint, deliberately light. Its job is to marry the footage to the
   green-black palette and take the edge off the brightest frames — NOT to
   carry text contrast. Pushing this above ~0.45 starts hiding the footage
   again, which is the thing this backdrop exists to show. */
.cosmos-scrim {
  position: absolute;
  inset: 0;
  background: rgba(25, 37, 36, 0.14);
}

/* THE CONTRAST GUARANTEE — vertical, because the light is vertical.
   Measured per horizontal band across the whole clip:
       top   0-18%   median rgb(169,178,180)   <- bright cloud, nav sits here
       upper 18-45%  median rgb( 52, 64, 64)
       mid   45-75%  median rgb( 59, 69, 37)
       lower 75-100% median rgb( 54, 57, 27)   <- deep green, already dark
   So the veil is heaviest at the top and eases downward: it has to kill the
   cloud behind the nav, but veiling the lower two-thirds would just hide the
   green the design is built on. This element is inside the FIXED stage, so
   these bands are viewport-relative and hold at every scroll position.
   (The previous left-weighted gradient existed to protect hero copy from the
   portrait on the right. The portrait is gone and the light is top-heavy, so
   that axis no longer describes the problem.) */
.cosmos-veil {
  position: absolute;
  inset: 0;
  /* Roughly halved from the first pass — that version darkened the footage
     into the "blackish dull" look. What made the reduction affordable was
     moving small labels off the dim/faint ink tiers (see .eyebrow-text
     etc. below), not veiling harder. */
  background:
    linear-gradient(180deg,
      rgba(21, 31, 30, 0.60) 0%,
      rgba(21, 31, 30, 0.54) 13%,
      rgba(22, 33, 32, 0.40) 26%,
      rgba(23, 35, 33, 0.30) 42%,
      rgba(25, 37, 36, 0.25) 62%,
      rgba(25, 37, 36, 0.26) 100%);
}

/* The corner darkening is gone. A radial vignette at 0.62 was crushing the
   frame edges to near-black — the "dark in the corners" look. Only a light
   bottom fade remains, to stop the footage colliding with the footer.
   Contrast is unaffected: the measured band figures modelled scrim + veil
   only and never counted the vignette, so removing it brings the real
   backdrop into line with what was measured rather than lightening past it. */
.cosmos-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 82%, rgba(16, 26, 24, 0.34) 100%);
}

/* No prefers-reduced-motion rule here on purpose: initCosmicBackdrop
   returns before it ever assigns src, so under reduced motion there is
   no video element to style — the stage gradient is the whole backdrop.
   A filter override here would be dead code. */

/* Small screens: a full-bleed video is the worst bandwidth-per-pixel
   trade on the page. JS skips loading the source entirely; this just
   makes sure the element can't occupy space if that ever changes. */
@media (max-width: 760px) {
  .cosmos-video { display: none; }
}

/* ----------------------------------------------------------------
   3 · (reserved — stage rail removed)
---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   5 · SCROLL PROGRESS
---------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--violet));
  box-shadow: none;
  z-index: 9998;
}

/* ----------------------------------------------------------------
   6 · NAVIGATION
---------------------------------------------------------------- */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), backdrop-filter 0.4s;
}
#main-nav.scrolled {
  padding: 11px 0;
  background: rgba(21, 31, 30, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(208, 213, 206, 0.06);
}
.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.nav-logo-accent { color: var(--cyan); font-size: 0.85em; }

.nav-center { display: flex; gap: 4px; }
.nav-link {
  position: relative;
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-radius: 10px;
  transition: color 0.3s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }

.nav-resume {
  padding: 9px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
  /* Dark fill, not a light one. These three sit on BARE footage with
     light text on top, so a light fill raises the backdrop and *reduces*
     contrast (measured 3.2:1). Chips inside panels use a light fill for
     the opposite reason — there the panel behind them is already dark. */
  border: none;
  background: rgba(25, 37, 36, 0.58);
  /* Frosted, like .glass-panel. A dark fill alone is invisible where the
     footage is already dark foliage; the blur is what separates the
     surface from its backdrop without drawing a border. */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-radius: 999px;
  background: rgba(209,235,219, 0.08);
  transition: all 0.3s var(--ease);
}
.nav-resume:hover {
  background: rgba(209,235,219, 0.18);
  border-color: var(--blue);
  box-shadow: none;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger-line {
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.mobile-menu-btn.open .hamburger-line:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.mobile-menu-btn.open .hamburger-line:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(78vw, 320px);
  background: rgba(6, 8, 20, 0.92);
  backdrop-filter: blur(22px);
  border-left: 1px solid rgba(208, 213, 206, 0.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 40px;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  z-index: 49;
}
.mobile-menu.open { transform: none; }
.mobile-nav-link {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 0;
  transition: color 0.3s, padding-left 0.3s;
}
.mobile-nav-link:hover { color: var(--cyan); padding-left: 8px; }
.mobile-resume-link {
  margin-top: 20px;
  font-weight: 600;
  color: var(--cyan);
}

@media (max-width: 920px) {
  .nav-center, .nav-resume { display: none; }
  .mobile-menu-btn { display: flex; }
}

/* ----------------------------------------------------------------
   7 · SECTION SHELL / GLASS / SHARED HEADINGS
---------------------------------------------------------------- */
main { position: relative; z-index: 2; }

.scene-section {
  position: relative;
  z-index: 2;
}
.page-section {
  padding: clamp(90px, 13vh, 160px) 0;
}

/* Note: .glass-panel briefly carried backdrop-filter (frosted glass). With
   the fill gone there is nothing to frost, and a blur with no fill would
   render as a blurred rectangle — a box by another name. So the blur is off
   here. It survives only on the small controls (.btn-ghost, .social-btn,
   .nav-resume, .hero-badge), where a surface still has to separate itself
   from dark foliage. */
/* ── No box. ──────────────────────────────────────────────────────
   Every section now matches the experience timeline: content sits on
   the footage, held only by a soft wash. There is no fill, no border,
   no shadow, no frosted rectangle.

   The wash lives on ::before, not on the element, and that distinction
   matters: a mask on .glass-panel itself masks its CHILDREN, so text
   near an edge would fade with it. Masking the decoration instead
   leaves the content untouched.

   ::before rather than ::after because .achievement-card::after is
   already taken. */
.glass-panel {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  position: relative;
}

.glass-panel::before {
  content: "";
  position: absolute;
  /* inset 0, not a negative bleed: several of these sit in grids
     (4 platform cards, 3 achievement cards) and overlapping washes
     would stack into darker seams between them. */
  inset: 0;
  background: rgba(25, 37, 36, 0.42);
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, #000 60%, rgba(0,0,0,0.55) 84%, transparent 100%);
  mask-image: radial-gradient(118% 118% at 50% 50%, #000 60%, rgba(0,0,0,0.55) 84%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.eyebrow-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--cyan);
  letter-spacing: 0.2em;
}
.eyebrow-dash {
  width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.eyebrow-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  /* --ink, not a dim tier: this label sits on BARE footage, where the
     dim/faint tiers measured 2.7-4.1:1 once the veil was lightened. The
     hierarchy is carried by size and tracking instead of by dimming. */
  color: var(--ink);
  text-transform: uppercase;
}

.section-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 40px;
}

/* ----------------------------------------------------------------
   8 · HERO
---------------------------------------------------------------- */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 0 80px;
  position: relative;
}

.hero-grid {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  position: relative;
  z-index: 3;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  /* Dark fill, not a light one. These three sit on BARE footage with
     light text on top, so a light fill raises the backdrop and *reduces*
     contrast (measured 3.2:1). Chips inside panels use a light fill for
     the opposite reason — there the panel behind them is already dark. */
  border: none;
  background: rgba(25, 37, 36, 0.52);
  /* Frosted, like .glass-panel. A dark fill alone is invisible where the
     footage is already dark foliage; the blur is what separates the
     surface from its backdrop without drawing a border. */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-radius: 999px;
  background: rgba(209,235,219, 0.06);
  margin-bottom: 28px;
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #74b894;
  box-shadow: 0 0 0 3px rgba(126,168,130, 0.16);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
}
.hero-title-line { display: block; }
.hero-title-pre {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
/* Ends on --accent-vivid, not --violet: the old gradient ran cream -> dark
   teal, so the visible span was almost entirely off-white and the word read
   as flat. Running it into the vivid mint is what gives the headline colour. */
.hero-title-accent {
  background: linear-gradient(118deg, #EFECE9 0%, var(--accent) 42%, var(--accent-vivid) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Heavier and brighter than before. A 1.4px/0.52 hairline was fine over flat
   near-black, but this outline now sits on a detailed ridge — thin strokes
   get lost in the foliage and read as weak rather than restrained. */
.hero-title-dim {
  color: transparent;
  -webkit-text-stroke: 2px rgba(233, 238, 232, 0.82);
  /* lifts the outline off busy frames without filling the counters */
  text-shadow: 0 2px 18px rgba(12, 20, 18, 0.55);
}

.hero-desc {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 34px;
}
.hero-role-wrap { display: inline-block; }
.hero-role {
  color: var(--blue-bright);
  font-weight: 600;
  border-right: 2px solid var(--cyan);
  padding-right: 3px;
  animation: caret 0.9s step-end infinite;
}
@keyframes caret { 0%,100% { border-color: var(--cyan); } 50% { border-color: transparent; } }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  /* Mint, not cream. As a flat off-white gradient this was the largest
     element on the page with no colour in it — a big part of why the hero
     read as washed out. Dark base text on mint is the page's one high-
     chroma focal point. */
  color: var(--base);
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-vivid) 100%);
  border-radius: 999px;
  box-shadow: 0 14px 40px -16px rgba(143, 214, 181, 0.55), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.btn-primary:hover { box-shadow: 0 18px 52px -14px rgba(143, 214, 181, 0.75); }
.btn-primary svg { transition: transform 0.3s var(--ease); }
.btn-primary:hover svg { transform: translate(3px, -3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  /* Dark fill, not a light one. These three sit on BARE footage with
     light text on top, so a light fill raises the backdrop and *reduces*
     contrast (measured 3.2:1). Chips inside panels use a light fill for
     the opposite reason — there the panel behind them is already dark. */
  border: none;
  background: rgba(25, 37, 36, 0.62);
  /* Frosted, like .glass-panel. A dark fill alone is invisible where the
     footage is already dark foliage; the blur is what separates the
     surface from its backdrop without drawing a border. */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  border-radius: 999px;
  background: rgba(209,235,219, 0.04);
  transition: all 0.3s var(--ease);
}
.btn-ghost:hover { border-color: var(--blue); background: rgba(209,235,219, 0.12); }

.btn-primary--xl, .btn-ghost--xl { padding: 17px 34px; font-size: 1rem; }

.hero-social { display: flex; gap: 12px; }
.social-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: none;
  border-radius: 12px;
  background: rgba(25, 37, 36, 0.60);
  /* Frosted, like .glass-panel. A dark fill alone is invisible where the
     footage is already dark foliage; the blur is what separates the
     surface from its backdrop without drawing a border. */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  color: var(--ink-soft);
  transition: all 0.3s var(--ease);
}
.social-btn:hover {
  color: var(--cyan);
  border-color: rgba(209,235,219, 0.5);
  box-shadow: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Hero mini stats — quiet luminous chips beneath the actions */
.hero-mini-stats {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding-left: 16px;
}
.hero-mini-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, var(--cyan), transparent);
}
.hero-mini-stat b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.hero-mini-stat span {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /* --ink, not a dim tier: this label sits on BARE footage, where the
     dim/faint tiers measured 2.7-4.1:1 once the veil was lightened. The
     hierarchy is carried by size and tracking instead of by dimming. */
  color: var(--ink);
  text-transform: uppercase;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.5;
}
.scroll-cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: #fff;
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue { 0% { top: -50%; } 100% { top: 120%; } }
.scroll-cue-label { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 600px) {
  .hero-mini-stats { gap: 18px; }
  .hero-mini-stat b { font-size: 1.25rem; }
}

/* ----------------------------------------------------------------
   9 · ABOUT (Earth)
---------------------------------------------------------------- */
.about-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 30px;
  align-items: stretch;
}
.about-left { padding: 36px; }
.about-left .section-headline { margin-bottom: 24px; font-size: clamp(1.8rem, 3.6vw, 3rem); }
.about-primary-text { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink); margin: 0 0 18px; line-height: 1.55; }
.about-secondary-text { font-size: 0.98rem; color: var(--ink-soft); margin: 0 0 26px; }
.about-info-row { display: flex; flex-wrap: wrap; gap: 22px; }
.about-info-item { display: inline-flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--ink-dim); }
.about-info-item svg { color: var(--cyan); }

.edu-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; }
.edu-stat-card {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.edu-stat-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(209,235,219,0.5); }
.edu-stat-val {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.edu-stat-card--accent .edu-stat-val { color: var(--cyan); }
.edu-stat-key { font-size: 0.82rem; font-weight: 600; color: var(--blue-bright); margin-top: 6px; }
.edu-stat-sub { font-size: 0.72rem; color: var(--ink-faint); }

@media (max-width: 820px) {
  .about-layout { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   10 · SKILLS (Planets)
---------------------------------------------------------------- */
.skills-container { padding: 14px 30px; }
.skill-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid rgba(209,235,219, 0.05);
}
.skill-row:last-child { border-bottom: none; }
.skill-row-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.skill-row-icon { color: var(--cyan); }
.skill-row-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(209,235,219, 0.10);
  border: none;
  border-radius: 999px;
  transition: all 0.3s var(--ease);
}
.skill-pill:hover {
  transform: translateY(-3px);
  border-color: rgba(209,235,219, 0.4);
  background: rgba(209,235,219, 0.1);
  box-shadow: 0 10px 24px -12px rgba(209,235,219, 0.6);
}
.skill-pill-icon { font-size: 1rem; width: 16px; height: 16px; }
.skill-pill--primary { border-color: rgba(209,235,219, 0.4); background: rgba(209,235,219, 0.1); color: var(--blue-bright); }
/* colour was var(--violet) — which the palette swap repointed at the dark
   teal #3c5759, giving dark-teal text on a dark-teal pill at 1.75:1. That is
   why LangChain / RAG Pipelines looked blurred: they were nearly invisible.
   --accent-vivid takes it to 8.1:1. */
.skill-pill--secondary { border-color: rgba(143,214,181, 0.38); background: rgba(143,214,181, 0.10); color: var(--accent-vivid); }

@media (max-width: 720px) {
  .skill-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ----------------------------------------------------------------
   11 · PROJECTS (Solar System)
---------------------------------------------------------------- */
.projects-list { display: flex; flex-direction: column; gap: 36px; }
.project-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  position: relative;
}
.project-item--flip .project-visual { order: 2; }

.project-visual {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 30px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(209,235,219, 0.08), transparent 60%),
    rgba(21, 31, 30, 0.4);
  /* divider line removed — the two halves now separate by fill alone */
}

/* ── Project plate ────────────────────────────────────────────────
   Replaced two invented SVG "dashboards" (fake RUNNING badges, fake p99
   latency, 7 looping <animate> elements). They read as decoration
   pretending to be product. This is purely typographic and states only
   what is true: index, name, category. No numbers are claimed here —
   the real detail lives in .project-content beside it. */
.project-plate {
  position: relative;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.project-plate-idx {
  font-family: var(--mono);
  font-size: clamp(3.6rem, 7vw, 5.4rem);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.02em;
  /* Outlined, not filled: at this size a solid numeral would out-shout the
     project name, which is the thing worth reading. */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(143, 214, 181, 0.55);
}

.project-plate-rule {
  display: block;
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-vivid), transparent);
}

.project-plate-name {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
  line-height: 1.1;
}


.project-content { padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; }
.project-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.project-type-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.project-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--ink);
  margin: 6px 0 0;
}
.project-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: none;
  background: rgba(209,235,219, 0.10);
  border-radius: 10px;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.project-link-btn:hover { color: var(--cyan); border-color: rgba(209,235,219,0.5); background: rgba(209,235,219,0.08); }
.project-desc { color: var(--ink-soft); margin: 0 0 18px; font-size: 0.98rem; }
.project-bullets { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.project-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.project-bullets li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 0.7rem;
  top: 3px;
}
.project-tech-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tech-chip {
  padding: 5px 12px;
  font-size: 0.74rem;
  font-family: var(--mono);
  color: var(--ink-dim);
  background: rgba(209,235,219, 0.09);
  border: none;
  border-radius: 7px;
}

@media (max-width: 860px) {
  .project-item, .project-item--flip { grid-template-columns: 1fr; }
  .project-item--flip .project-visual { order: 0; border-left: none; }
  .project-visual { min-height: 260px; border-right: none; border-bottom: 1px solid rgba(209,235,219,0.08); }
}

/* ----------------------------------------------------------------
   12 · ARENA / TELEMETRY (Galaxy)
---------------------------------------------------------------- */
.platform-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
.platform-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.platform-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(209,235,219,0.55); }
.platform-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.platform-logo--invert { filter: brightness(0) invert(1); opacity: 0.92; }
.platform-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.platform-name { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.platform-rank { font-size: 0.78rem; color: var(--ink-dim); }
.platform-rank b { color: var(--cyan); font-family: var(--mono); }
.platform-arrow { margin-left: auto; color: var(--ink-faint); transition: all 0.3s var(--ease); }
.platform-card:hover .platform-arrow { color: var(--cyan); transform: translate(2px, -2px); }

.telemetry-wrap { padding: clamp(22px, 3vw, 36px); position: relative; }
.telemetry-header { margin-bottom: 22px; }
.telemetry-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.telemetry-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c9707d;
  box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.16);
  animation: pulseDot 1.6s ease-in-out infinite;
}
.telemetry-subtitle { font-size: 0.84rem; color: var(--ink-dim); margin: 6px 0 0; }
.sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: rgba(209,235,219, 0.07);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.sync-btn:hover { color: var(--cyan); border-color: rgba(209,235,219,0.45); }
.sync-btn.syncing-active svg { animation: spin 1s linear infinite; }

.telemetry-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.t-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-dim);
  background: rgba(25, 37, 36, 0.4);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.t-tab-icon { width: 16px; height: 16px; object-fit: contain; }
.t-tab-icon--invert { filter: brightness(0) invert(1); opacity: 0.85; }
.t-tab:hover { color: var(--ink); border-color: rgba(209,235,219,0.3); }
.t-tab--active {
  color: var(--ink);
  background: rgba(209,235,219, 0.14);
  border-color: rgba(209,235,219, 0.5);
  box-shadow: inset 0 0 0 1px rgba(209,235,219,0.20);
}

.telemetry-panel-area { position: relative; min-height: 260px; }
.telemetry-loader {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(21, 31, 30, 0.6);
  backdrop-filter: blur(4px);
  z-index: 5;
  color: var(--ink-dim);
  font-size: 0.84rem;
  border-radius: var(--radius-sm);
}
.telemetry-loader.active { display: flex; }
.loader-spin {
  width: 34px; height: 34px;
  border: 2.5px solid rgba(209,235,219, 0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.metric-box {
  padding: 18px;
  background: rgba(209, 235, 219, 0.055);
  border: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.metric-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.metric-val {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.metric-val--sm { font-size: 1.15rem; }
.metric-sub { font-size: 0.74rem; color: var(--ink-dim); }
.metric-sub--accent { color: var(--cyan); }
.metric-sub--green { color: #74b894; }

.contest-history-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}
.contest-history-title svg { color: var(--cyan); }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid rgba(209,235,219, 0.05);
  font-weight: 600;
}
.data-table td { padding: 12px; color: var(--ink-soft); border-bottom: 1px solid rgba(209,235,219, 0.06); }
.data-table .mono { font-family: var(--mono); }
.data-table .bold { font-weight: 600; color: var(--ink); }
.data-table .green, .green { color: #74b894; }
.data-table .red, .red { color: #d4838f; }

.diff-bars { margin-top: 4px; }
.diff-bar-row { margin-bottom: 16px; }
.diff-bar-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.diff-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.diff-easy { color: #74b894; }
.diff-med { color: #d9b871; }
.diff-hard { color: #d4838f; }
.diff-count { font-family: var(--mono); font-size: 0.84rem; color: var(--ink); }
.diff-track { height: 8px; background: rgba(209,235,219, 0.08); border-radius: 999px; overflow: hidden; }
.diff-fill { height: 100%; border-radius: 999px; transition: width 1s var(--ease); }
.diff-fill--easy { background: linear-gradient(90deg, #55977a, #74b894); }
.diff-fill--med { background: linear-gradient(90deg, #b8923f, #d9b871); }
.diff-fill--hard { background: linear-gradient(90deg, #a85560, #d4838f); }

.cc-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.summary-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.summary-list li {
  display: flex; justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(209,235,219, 0.05);
  font-size: 0.86rem;
}
.summary-list li span:first-child { color: var(--ink-faint); }
.summary-list li span:last-child { color: var(--ink); font-weight: 500; }
.cc-stars-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 22px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(209,235,219, 0.1), transparent 70%), rgba(25, 37, 36, 0.4);
  border-radius: var(--radius-sm);
}
.cc-stars-big {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cyan);
}
.cc-stars-panel strong { color: var(--ink); font-size: 0.92rem; }
.cc-stars-panel p { font-size: 0.78rem; color: var(--ink-dim); margin: 0; }

@media (max-width: 760px) {
  .platform-card-grid { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .cc-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .platform-card-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   13 · EXPERIENCE — vertical timeline
   Replaced .exp-card / .oss-card glass panels. Boxes fought the footage:
   five stacked frosted rectangles read as a wall, not a sequence. A rail
   carries the order with far less material.
---------------------------------------------------------------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
  position: relative;
}

/* The rail. Fades out at the bottom rather than stopping dead — the
   sequence is ongoing, and a hard terminus would contradict the open
   final node. */
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(143, 214, 181, 0.55) 0%,
    rgba(143, 214, 181, 0.35) 62%,
    rgba(143, 214, 181, 0.14) 86%,
    transparent 100%);
}

/* Removing the panels put this text directly on the footage, where
   --ink-soft measured 4.1:1 and --ink-dim 2.8:1 as the section scrolls
   through the bright cloud band. This is the replacement for the panel:
   a soft wash with NO border, NO radius and every edge faded out, so it
   reads as atmosphere rather than the box it replaced. Measured 5.5:1
   worst case at this strength. */
.timeline::after {
  content: "";
  position: absolute;
  inset: -30px -6% -30px -48px;
  background: linear-gradient(90deg,
    rgba(25, 37, 36, 0.30) 0%,
    rgba(25, 37, 36, 0.30) 70%,
    rgba(25, 37, 36, 0.12) 86%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.tl-node {
  position: relative;
  padding: 0 0 40px 0;
}
.tl-node:last-child { padding-bottom: 0; }

/* Marker sits ON the rail, not beside it */
.tl-node::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-vivid);
  box-shadow: 0 0 0 4px rgba(25, 37, 36, 0.9), 0 0 16px -2px rgba(143, 214, 181, 0.7);
}

/* Group labels — smaller, hollow marker: they mark a change of kind,
   not an event in the sequence. */
.tl-node--label { padding-bottom: 22px; }
.tl-node--label::before {
  width: 7px;
  height: 7px;
  top: 9px;
  left: -32px;
  background: transparent;
  border: 1px solid rgba(209, 235, 219, 0.55);
  box-shadow: 0 0 0 4px rgba(25, 37, 36, 0.9);
}
.tl-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl-label-sub {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Capped to roughly the body measure. Without this the head spans the full
   container and space-between throws the date to the far edge, where it
   reads as unrelated to the title it belongs to. */
.tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  max-width: 74ch;
}
.tl-role {
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.tl-period {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  /* --ink-soft, not --ink-dim: on bare footage the dim tier hit 2.8:1. */
  color: var(--ink-soft);
  white-space: nowrap;
}
.tl-period--now { color: var(--accent-vivid); }

.tl-org {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tl-chip {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(209, 235, 219, 0.12);
  color: var(--accent);
}
.tl-chip--google { border-color: rgba(219, 240, 228, 0.30); }

.tl-desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tl-tag {
  font-size: 0.76rem;
  padding: 5px 11px;
  border-radius: 999px;
  border: none;
  background: rgba(209, 235, 219, 0.10);
  color: var(--ink-soft);
}

.tl-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.84rem;
  font-weight: 500;
  /* --accent, not --accent-vivid: vivid measured 3.6:1 on bare footage. */
  color: var(--accent);
}
.tl-link svg { width: 15px; height: 15px; }
.tl-link:hover { text-decoration: underline; }

/* ── The open end ─────────────────────────────────────────────────
   Hollow, dashed marker. Deliberately makes no claim beyond the
   availability already stated in the hero badge — no invented role,
   employer or date. */
.tl-node--future::before {
  background: transparent;
  border: 1.5px dashed rgba(143, 214, 181, 0.75);
  width: 13px;
  height: 13px;
  left: -35px;
  box-shadow: 0 0 0 4px rgba(25, 37, 36, 0.9);
  animation: tlPulse 3.4s ease-in-out infinite;
}
@keyframes tlPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.tl-role--future { color: var(--accent); font-weight: 600; }
.tl-period--future {
  color: var(--accent-vivid);
  border: 1px solid rgba(143, 214, 181, 0.35);
  border-radius: 999px;
  padding: 3px 10px;
}
.tl-link--future { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .tl-node--future::before { animation: none; }
}

@media (max-width: 640px) {
  .timeline { padding-left: 26px; }
  .tl-node::before { left: -26px; }
  .tl-node--label::before { left: -24px; }
  .tl-node--future::before { left: -27px; }
  .tl-head { gap: 6px; }
}

.oss-github-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.oss-github-row svg { color: var(--ink-soft); }
.oss-gh-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 500; }
.oss-gh-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------
   14 · ACHIEVEMENTS (Multiverse)
---------------------------------------------------------------- */
.mega-stat {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 36px 40px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.mega-stat-num {
  font-family: var(--display);
  font-size: clamp(3.4rem, 9vw, 6.5rem);
  font-weight: 700;
  line-height: 0.9;
  background: linear-gradient(120deg, #fff, var(--accent), var(--accent-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mega-stat-info h3 { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--ink); margin: 0 0 6px; }
.mega-stat-info p { font-size: 0.92rem; color: var(--ink-dim); margin: 0; }

.achievement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.achievement-card {
  position: relative;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  overflow: hidden;
}
.achievement-card::after {
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(209,235,219, 0.16), transparent 70%);
}
.achievement-card:hover { transform: translateY(-7px); box-shadow: 0 36px 70px -32px rgba(209,235,219, 0.6); }
.ach-ext-icon { position: absolute; top: 18px; right: 18px; color: var(--ink-faint); }
.ach-rank {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--cyan);
  line-height: 1;
}
.ach-rank sup { font-size: 0.5em; }
.ach-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 8px 0 0; }
.ach-detail { font-size: 0.82rem; color: var(--ink-dim); margin: 0; }

.leadership-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.leadership-card { display: flex; align-items: center; gap: 16px; padding: 22px; transition: transform 0.35s var(--ease); }
.leadership-card:hover { transform: translateY(-5px); }
.leadership-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--cyan);
  background: rgba(209,235,219, 0.12);
  border: none;
  flex-shrink: 0;
}
.leadership-card h4 { font-family: var(--display); font-size: 1.05rem; color: var(--ink); margin: 0; }
.leadership-card h4 sup { font-size: 0.55em; }
.leadership-card p { font-size: 0.82rem; color: var(--ink-dim); margin: 4px 0 0; }

@media (max-width: 820px) {
  .achievement-grid, .leadership-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   15 · CONTACT (Beyond Time)
---------------------------------------------------------------- */
.contact-section { min-height: 90vh; display: flex; align-items: center; }
.contact-inner { padding: clamp(40px, 6vw, 72px); text-align: center; max-width: 820px; margin: 0 auto; }
.contact-inner .section-eyebrow { justify-content: center; }
.contact-headline {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 22px;
}
.contact-headline-accent {
  background: linear-gradient(120deg, var(--accent-soft), var(--accent), var(--accent-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-tagline { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--ink-soft); max-width: 560px; margin: 0 auto 36px; }
.contact-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.contact-details-row { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.contact-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink-dim);
  transition: color 0.3s;
}
.contact-detail-link svg { color: var(--cyan); }
.contact-detail-link:hover { color: var(--ink); }

/* ----------------------------------------------------------------
   16 · FOOTER
---------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(209,235,219, 0.05);
  background: rgba(4, 5, 14, 0.6);
  backdrop-filter: blur(12px);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 0.8rem; color: var(--ink-faint); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 0.82rem; color: var(--ink-dim); transition: color 0.3s; }
.footer-links a:hover { color: var(--cyan); }

/* ----------------------------------------------------------------
   17 · REVEAL ANIMATIONS
---------------------------------------------------------------- */
.reveal-elem {
  opacity: 0;
  transform: translateY(38px) scale(0.985);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal-elem.revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

[data-anim] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-elem, [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
}