/* ============================================================
   Geist via Vercel CDN
   ============================================================ */
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("https://assets.vercel.com/raw/upload/v1/fonts/geist/Geist-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  --bg:          #0a0a0a;
  --bg-2:        #0e0e0e;
  --surface:     #131313;
  --surface-2:   #1a1a1a;
  --line:        rgba(255,255,255,0.11);
  --line-soft:   rgba(255,255,255,0.06);
  --text:        #ededed;
  --text-2:      #c6c6c6;
  --muted:       #7c7c7c;
  --faint:       #4e4e4e;
  --accent:      #bfff00;
  --accent-2:    #a6e600;
  --accent-dim:  rgba(191,255,0,0.14);
  --accent-glow: rgba(191,255,0,0.08);

  --sans:        "Geist", system-ui, sans-serif;
  --mono:        "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --sidebar-w:   clamp(280px, 24vw, 360px);
  --pad-x:       clamp(28px, 5vw, 88px);
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.4; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }
::selection { background: var(--accent); color: #000; }

/* ============================================================
   Custom Cursor
   ============================================================ */
@media (pointer: fine) {
  body.has-anchor, body.has-anchor a, body.has-anchor button { cursor: none; }
}
.anchor-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 0; height: 0; mix-blend-mode: difference; display: none; opacity: 0;
}
@media (pointer: fine) { .anchor-cursor { display: block; } }
.anchor-cursor .node {
  position: absolute; width: 11px; height: 11px;
  transform: translate(-50%,-50%); border: 1.5px solid #fff; background: transparent;
  transition: width .18s var(--ease), height .18s var(--ease), background .18s, border-color .18s;
}
.anchor-cursor .arm { position: absolute; background: #fff; transform: translate(-50%,-50%); transition: width .18s var(--ease), height .18s var(--ease), background .18s; }
.anchor-cursor .arm.h { width: 26px; height: 1px; }
.anchor-cursor .arm.v { width: 1px; height: 26px; }
.anchor-cursor .coords { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: #fff; white-space: nowrap; opacity: .9; }
.anchor-cursor.is-active { mix-blend-mode: normal; }
.anchor-cursor.is-active .node { width: 9px; height: 9px; border-color: var(--accent); background: var(--accent); }
.anchor-cursor.is-active .arm { background: var(--accent); }
.anchor-cursor.is-active .arm.h { width: 34px; }
.anchor-cursor.is-active .arm.v { height: 34px; }
.anchor-cursor.is-active .coords { color: var(--accent); }

/* ============================================================
   Scroll Path
   ============================================================ */
.scroll-path { position: fixed; top: 0; right: 0; width: 64px; height: 100vh; z-index: 40; pointer-events: none; display: none; }
@media (min-width: 1100px) { .scroll-path { display: block; } }
.scroll-path svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scroll-path .sp-track { fill: none; stroke: var(--line); stroke-width: 1; }
.scroll-path .sp-drawn { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.scroll-path .sp-marker { position: absolute; width: 9px; height: 9px; background: var(--accent); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(191,255,0,0.16); }
.scroll-path .sp-marker::before, .scroll-path .sp-marker::after { content: ""; position: absolute; background: var(--accent); }
.scroll-path .sp-marker::before { left:50%; top:-7px; width:1px; height:5px; transform:translateX(-50%); }
.scroll-path .sp-marker::after  { left:50%; bottom:-7px; width:1px; height:5px; transform:translateX(-50%); }
.scroll-path .sp-pct { position: absolute; font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.05em; transform: translate(14px,-50%); white-space: nowrap; }

/* ============================================================
   Layout
   ============================================================ */
.app { display: block; }
.sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; border-right: 1px solid var(--line); padding: clamp(28px,3.4vw,44px); display: flex; flex-direction: column; background: var(--bg); z-index: 50; }
.main { margin-left: var(--sidebar-w); min-height: 100vh; }

/* ============================================================
   Component: Brand
   ============================================================ */
.brand { display: flex; flex-direction: column; gap: 14px; }
.brand__mark { width: 34px; height: 34px; border: 1px solid var(--line); display: grid; place-items: center; }
.brand__mark svg { width: 18px; height: 18px; }
.brand__name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; }
.brand__role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; margin-top: 3px; }

/* Component: Status */
.status { display: flex; align-items: center; gap: 9px; margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-2); }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s infinite var(--ease); flex: none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(191,255,0,0.45)} 70%{box-shadow:0 0 0 7px rgba(191,255,0,0)} 100%{box-shadow:0 0 0 0 rgba(191,255,0,0)} }

/* Component: Nav */
.nav { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 36px; }
.nav__link { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 15px; color: var(--muted); transition: color .2s var(--ease), padding-left .25s var(--ease); }
.nav__idx { font-family: var(--mono); font-size: 10px; color: var(--faint); transition: color .2s; }
.nav__link::after { content: ""; position: absolute; left: -3px; top: 50%; transform: translateY(-50%) scaleY(0); width: 5px; height: 5px; background: var(--accent); transition: transform .25s var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--text); padding-left: 16px; }
.nav__link:hover .nav__idx, .nav__link.is-active .nav__idx { color: var(--accent); }
.nav__link.is-active::after, .nav__link:hover::after { transform: translateY(-50%) scaleY(1); }

/* Component: Sidebar Footer */
.side-foot { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.side-foot__socials { display: flex; gap: 16px; align-items: center; }
.side-foot__socials a { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; display: flex; align-items: center; gap: 5px; transition: color .2s; }
.side-foot__socials a:hover { color: var(--accent); }
.side-foot__socials a svg { width: 13px; height: 13px; }
.side-foot__meta { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0.04em; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.side-foot__clock { color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Component: Label */
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; }

/* Component: Tag */
.tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; transition: border-color .25s, color .25s; }
.tag svg { width: 11px; height: 11px; }
.tag--accent { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-dim); }

/* Component: Button */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 13px 20px; transition: gap .25s var(--ease), background .2s, color .2s; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--primary { color: #000; background: var(--accent); }
.btn--primary:hover { background: #fff; gap: 16px; }
.btn--ghost { color: var(--text-2); border: 1px solid var(--line); background: transparent; }
.btn--ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }

/* Component: Project Row */
.proj-list { border-top: 1px solid var(--line); }
.proj { position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: start; gap: clamp(16px,3vw,40px); padding: clamp(24px,2.8vw,38px) 8px; border-bottom: 1px solid var(--line); transition: background .3s var(--ease); text-decoration: none; color: inherit; }
.proj:hover { background: linear-gradient(90deg,rgba(191,255,0,0.04),transparent 60%); }
.proj__idx { font-family: var(--mono); font-size: 12px; color: var(--faint); transition: color .25s; padding-top: 0.5em; }
.proj:hover .proj__idx { color: var(--accent); }
.proj__body { min-width: 0; }
.proj__title { position: relative; display: inline-block; font-size: clamp(26px,4.2vw,54px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: var(--text-2); transition: color .25s var(--ease); }
.proj:hover .proj__title { color: var(--text); }
.proj__bbox { position: absolute; inset: -10px -14px; border: 1px solid var(--accent); opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.proj__bbox i { position: absolute; width: 7px; height: 7px; background: var(--accent); transform: translate(-50%,-50%); }
.proj__bbox i:nth-child(1){left:0;top:0} .proj__bbox i:nth-child(2){left:100%;top:0} .proj__bbox i:nth-child(3){left:0;top:100%} .proj__bbox i:nth-child(4){left:100%;top:100%}
.proj:hover .proj__bbox { opacity: 1; }
.proj__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.proj__desc { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 54ch; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease); }
.proj:hover .proj__desc { max-height: 80px; opacity: 1; margin-top: 16px; }
.proj__right { display: flex; align-items: center; gap: clamp(14px,1.6vw,26px); justify-self: end; padding-top: 0.4em; }
.proj__year { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.proj__arrow { width: 22px; height: 22px; flex: none; color: var(--faint); transition: color .25s var(--ease), transform .3s var(--ease); }
.proj:hover .proj__arrow { color: var(--accent); transform: translate(3px,-3px); }

/* Sections */
.section { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Section: Hero */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 96px; padding-bottom: 72px; border-bottom: 1px solid var(--line-soft); }
.hero__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(26px,4vw,44px); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero__eyebrow .sep { color: var(--faint); }
.hero__eyebrow b { color: var(--text-2); font-weight: 500; }
.hero__h1 { font-weight: 500; font-size: clamp(44px,8.4vw,138px); line-height: 0.94; letter-spacing: -0.035em; max-width: 16ch; }
.hero__h1 .thin { font-weight: 200; color: var(--text-2); }
.hero__h1 em { font-style: normal; font-weight: 700; }
.hero__h1 .dot { color: var(--accent); font-weight: 700; }
.hero__intro { margin-top: clamp(34px,5vw,60px); max-width: 58ch; display: grid; gap: 22px; }
.hero__intro p { font-size: clamp(16px,1.5vw,19px); line-height: 1.55; color: var(--text-2); text-wrap: pretty; max-width: 46ch; }
.hero__intro .hl { color: var(--text); }
.hero__intro .acc { color: var(--accent); white-space: nowrap; }
.hero__scroll-hint { margin-top: clamp(40px,6vw,72px); display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.hero__scroll-hint .line { width: 46px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll-hint .line::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--accent); animation: slide 2.4s infinite var(--ease); }
@keyframes slide { 0%{transform:translateX(-110%)} 60%,100%{transform:translateX(280%)} }

/* Section: Work */
.work { padding-top: clamp(80px,10vw,140px); padding-bottom: clamp(60px,8vw,110px); }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: clamp(34px,5vw,60px); gap: 24px; flex-wrap: wrap; }
.work__h2 { font-size: clamp(26px,3.4vw,44px); font-weight: 600; letter-spacing: -0.02em; margin-top: 16px; }
.work__count { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.05em; }

/* Section: AnchorLabs Highlight */
.lab { padding-top: clamp(70px,9vw,120px); padding-bottom: clamp(70px,9vw,120px); border-top: 1px solid var(--line-soft); }
.lab__wrap { border: 1px solid var(--line); background: linear-gradient(180deg,var(--bg-2),var(--bg)); display: grid; grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .lab__wrap { grid-template-columns: 1fr; } }
.lab__copy { padding: clamp(28px,3.4vw,52px); display: flex; flex-direction: column; }
.lab__h3 { font-size: clamp(30px,4vw,52px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; margin-top: 20px; }
.lab__h3 .acc { color: var(--accent); }
.lab__p { margin-top: 20px; color: var(--text-2); font-size: clamp(15px,1.4vw,17px); line-height: 1.6; max-width: 44ch; text-wrap: pretty; }
.lab__stats { margin-top: auto; padding-top: 36px; display: flex; gap: clamp(24px,4vw,52px); }
.lab__cta { margin-top: 34px; align-self: start; }
.stat__n { font-size: clamp(28px,3.4vw,44px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__unit { color: var(--accent); }
.stat__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* AnchorLabs viz panel */
.lab__viz { position: relative; border-left: 1px solid var(--line); overflow: hidden; min-height: 360px; background: linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/100% 28px, linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/28px 100%; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .lab__viz { border-left: none; border-top: 1px solid var(--line); } }
.lab__viz svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab__viz-label { position: absolute; left: 18px; bottom: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); }

/* Section: About */
.about { padding-top: clamp(70px,9vw,120px); padding-bottom: clamp(50px,6vw,90px); }
.about__grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(34px,6vw,96px); }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 48px; } }
.about__lede { font-size: clamp(20px,2.4vw,30px); font-weight: 400; line-height: 1.42; letter-spacing: -0.015em; color: var(--text); margin-top: 26px; text-wrap: pretty; max-width: 26ch; }
.about__lede .mut { color: var(--muted); }
.about__body { color: var(--text-2); font-size: 15px; line-height: 1.65; margin-top: 26px; max-width: 50ch; }
.about__body + .about__body { margin-top: 16px; }

/* Component: Capability Table */
.caps { margin-top: 6px; }
.cap-row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.cap-row:first-child { border-top: 1px solid var(--line); }
.cap-row__key { font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.cap-row__key svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.cap-row__val { font-family: var(--mono); font-size: 11px; color: var(--muted); text-align: right; letter-spacing: 0.02em; }

/* Section: Contact */
.contact { padding-top: clamp(80px,10vw,150px); padding-bottom: clamp(50px,6vw,80px); border-top: 1px solid var(--line-soft); }
.contact__h2 { font-size: clamp(34px,7vw,104px); font-weight: 500; letter-spacing: -0.035em; line-height: 0.96; margin-top: 24px; }
.contact__h2 a { position: relative; transition: color .25s; }
.contact__underline { position: absolute; left: 0; bottom: 0.08em; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.contact__h2 a:hover { color: var(--accent); }
.contact__h2 a:hover .contact__underline { transform: scaleX(1); }
.contact__sub { margin-top: 28px; color: var(--text-2); font-size: clamp(15px,1.5vw,18px); max-width: 48ch; text-wrap: pretty; }

/* Component: Footer */
.footer { margin-top: clamp(60px,8vw,110px); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: 0.03em; }
.footer a { color: var(--muted); transition: color .2s; }
.footer a:hover { color: var(--accent); }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } [data-reveal]{opacity:1;transform:none;} }

/* Responsive */
@media (max-width: 820px) {
  .sidebar { position:static; width:100%; height:auto; border-right:none; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:center; gap:18px 28px; }
  .nav { margin-top:0; padding-top:0; flex-direction:row; flex-wrap:wrap; gap:4px 18px; width:100%; }
  .nav__link { padding:4px 0; }
  .nav__link::after { display:none; }
  .status { margin-top:0; }
  .side-foot { margin-top:0; width:100%; }
  .main { margin-left:0; }
  .hero { min-height:auto; padding-top:64px; }
}

/* ============================================================
   Case Study Page
   ============================================================ */
.cs-hero { padding-top:clamp(80px,10vw,140px); padding-bottom:clamp(60px,8vw,110px); border-bottom:1px solid var(--line-soft); }
.cs-hero__back { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:48px; transition:color .2s, gap .2s var(--ease); }
.cs-hero__back:hover { color:var(--accent); gap:12px; }
.cs-hero__back svg { width:13px; height:13px; }
.cs-hero__kicker { font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.cs-hero__h1 { font-size:clamp(38px,6vw,88px); font-weight:600; letter-spacing:-0.03em; line-height:0.96; max-width:18ch; }
.cs-hero__sub { margin-top:28px; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--text-2); max-width:52ch; text-wrap:pretty; }
.cs-hero__meta { margin-top:48px; display:flex; gap:48px; flex-wrap:wrap; }
.cs-hero__meta-item { display:flex; flex-direction:column; gap:6px; }
.cs-hero__meta-label { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.cs-hero__meta-value { font-size:14px; color:var(--text-2); }
.cs-section { padding-top:clamp(64px,8vw,112px); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid var(--line-soft); }
.cs-section:last-of-type { border-bottom:none; }
.cs-section__num { font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); margin-bottom:12px; }
.cs-section__h2 { font-size:clamp(28px,3.6vw,52px); font-weight:600; letter-spacing:-0.025em; line-height:1.04; }
.cs-section__lead { margin-top:20px; font-size:clamp(16px,1.4vw,19px); line-height:1.6; color:var(--text-2); max-width:54ch; text-wrap:pretty; }
.cs-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:start; }
@media (max-width:860px) { .cs-cols { grid-template-columns:1fr; } }
.cs-cols--wide { grid-template-columns:1.4fr 1fr; }
@media (max-width:860px) { .cs-cols--wide { grid-template-columns:1fr; } }
.cs-body { font-size:15px; line-height:1.72; color:var(--text-2); }
.cs-body p+p { margin-top:20px; }
.cs-body strong { color:var(--text); font-weight:500; }
.card { background:var(--surface); border:1px solid var(--line); padding:clamp(20px,2.4vw,36px); }
.card--accent { border-color:rgba(191,255,0,0.2); background:var(--accent-glow); }
.card__label { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.card__title { font-size:18px; font-weight:600; letter-spacing:-0.01em; line-height:1.2; }
.card__body { margin-top:12px; font-size:14px; line-height:1.65; color:var(--text-2); }
.card__icon { width:32px; height:32px; color:var(--accent); margin-bottom:16px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(32px,4vw,56px); }
.cards-grid .card { background:var(--bg-2); }
.feature-list { list-style:none; display:flex; flex-direction:column; gap:0; }
.feature-list li { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--line-soft); font-size:15px; line-height:1.5; color:var(--text-2); }
.feature-list li:first-child { border-top:1px solid var(--line-soft); }
.feature-list li svg { width:16px; height:16px; color:var(--accent); flex:none; margin-top:2px; }
.timeline { display:flex; flex-direction:column; }
.timeline__item { display:grid; grid-template-columns:80px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--line-soft); }
.timeline__item:first-child { border-top:1px solid var(--line-soft); }
.timeline__v { font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.06em; padding-top:2px; }
.timeline__title { font-size:15px; font-weight:500; letter-spacing:-0.01em; }
.timeline__desc { margin-top:6px; font-size:14px; color:var(--muted); line-height:1.5; }
.cs-quote { border-left:2px solid var(--accent); padding:20px 28px; margin:40px 0; background:var(--accent-glow); }
.cs-quote p { font-size:clamp(16px,1.5vw,20px); line-height:1.5; color:var(--text); font-weight:300; letter-spacing:-0.01em; }
.cs-quote cite { display:block; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; font-style:normal; }
.cs-viz { position:relative; overflow:hidden; background: linear-gradient(var(--line-soft) 1px,transparent 1px) 0 0/100% 24px, linear-gradient(90deg,var(--line-soft) 1px,transparent 1px) 0 0/24px 100%; border:1px solid var(--line); min-height:300px; display:flex; align-items:center; justify-content:center; }
.cs-viz svg { max-width:100%; }
.cs-viz__label { position:absolute; left:16px; bottom:14px; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.05em; }
.swatches { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.swatch { display:flex; flex-direction:column; gap:8px; }
.swatch__dot { width:48px; height:48px; border:1px solid var(--line); }
.swatch__name { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:0.06em; }
.cs-nav { padding-top:clamp(60px,8vw,100px); padding-bottom:clamp(40px,5vw,72px); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); }
.cs-nav__label { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.cs-nav__title { font-size:clamp(18px,2vw,26px); font-weight:500; letter-spacing:-0.015em; color:var(--text-2); transition:color .25s; }
.cs-nav__link:hover .cs-nav__title { color:var(--accent); }