/* ============================================================
   S&M Scholarly Solutions — Engineering Studio
   Design system: graphite base, muted-cyan accent, editorial type
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=satoshi@400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* surfaces */
  --bg:        #050506;
  --bg-1:      #0a0b0d;
  --bg-2:      #0f1114;
  --bg-3:      #15181c;
  --line:      rgba(255,255,255,0.075);
  --line-2:    rgba(255,255,255,0.13);

  /* ink */
  --fg:        #ECEAE4;
  --fg-soft:   rgba(236,234,228,0.66);
  --fg-mute:   rgba(236,234,228,0.40);
  --fg-faint:  rgba(236,234,228,0.22);

  /* accent — muted cyan / teal */
  --acc:       #45C9BD;
  --acc-dim:   #2C8A82;
  --acc-glow:  rgba(69,201,189,0.30);
  --acc-soft:  rgba(69,201,189,0.10);

  /* type */
  --display: 'General Sans', system-ui, sans-serif;
  --sans:    'Satoshi', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1320px;
  --gut: clamp(20px, 4.5vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Height of the fixed .nav in its scrolled state (14px padding top+bottom
     + content). Anything that parks content at the top of the viewport —
     the pinned process section, anchor-link targets — must clear this or it
     renders underneath the header bar. */
  --nav-h: 88px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* keeps anchor targets clear of the fixed header bar */
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  /* `overflow-x: hidden` on body makes body a scroll container (overflow-y
     computes to `auto`, clientHeight = full document height), which makes
     ScrollTrigger measure the viewport as the whole page at init — every
     `once: true` trigger fires immediately and self-kills, and the process
     pin never registers. `clip` clips the same overflow without creating a
     scroll container, so the document stays the sole scroller. */
  overflow-x: clip;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: var(--acc); color: #04110f; }

a { color: inherit; text-decoration: none; }

/* ---------- shared primitives ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--acc);
  opacity: 0.7;
}
.eyebrow.center::after {
  content: ""; width: 22px; height: 1px; background: var(--acc); opacity: 0.7;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; }

.section { position: relative; padding: clamp(90px, 13vh, 170px) 0; }

.section-head { max-width: 760px; }
.section-head h2 {
  font-size: clamp(34px, 5.2vw, 70px);
  margin-top: 22px;
}
.section-head p {
  color: var(--fg-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 560px;
  margin-top: 26px;
}

.idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
  letter-spacing: 0.1em;
}

/* reveal animation defaults (driven by JS) */
[data-reveal] { opacity: 0; transform: translateY(28px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em;
  padding: 15px 24px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s;
  will-change: transform;
}
.btn .arr { transition: transform .4s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

.btn-fill { background: var(--fg); color: #0a0a0a; }
.btn-fill:hover { background: var(--acc); }

.btn-ghost { color: var(--fg); border-color: var(--line-2); background: transparent; }
.btn-ghost:hover { border-color: var(--fg-soft); background: rgba(255,255,255,0.03); }

/* magnetic wrapper */
.mag { display: inline-block; will-change: transform; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut);
  transition: background .5s var(--ease), border-color .5s, padding .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5,5,6,0.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid var(--line);
  padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  width: 32px; height: 32px; border-radius: 3px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-1));
  position: relative; overflow: hidden;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--acc-soft), transparent 60%);
}
.brand .name { display: flex; flex-direction: column; line-height: 1; }
.brand .name b { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; }
.brand .name span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; color: var(--fg-mute); text-transform: uppercase; margin-top: 4px; }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 14.5px; color: var(--fg-soft); position: relative;
  transition: color .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--acc); transition: width .35s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-burger { display: none; }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-cta .btn-text { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 120px; padding-bottom: 60px;
  overflow: hidden;
}
.hero-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--hero-grid, var(--line)) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid, var(--line)) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 30%, transparent 78%);
}
.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 1100px; height: 1100px; left: 60%; top: -20%;
  background: radial-gradient(circle, var(--acc-glow), transparent 62%);
  opacity: var(--hero-glow-op, 0.42); filter: blur(20px);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(180deg, rgba(5,5,6,0.4), transparent 18%, transparent 80%, var(--bg));
}

.hero-inner {
  position: relative; z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.hero-eyebrow { margin-bottom: 30px; }
.hero h1 {
  font-size: clamp(44px, 6.6vw, 104px);
  letter-spacing: -0.045em;
  line-height: 0.94;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 em { font-style: normal; color: var(--acc); }

.hero-sub {
  margin-top: 34px;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--fg-soft);
  max-width: 480px;
  line-height: 1.55;
}
.hero-cta { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }

.hero-meta {
  margin-top: 56px; display: flex; gap: 40px;
  font-family: var(--mono); font-size: 12px; color: var(--fg-mute);
  letter-spacing: 0.04em;
}
.hero-meta b { display: block; font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--fg); letter-spacing: -0.02em; margin-bottom: 4px; }

/* ---- hero stage (floating panels) ---- */
.stage {
  position: relative; height: 540px;
  perspective: 1400px;
}
.panel {
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(22,25,29,0.92), rgba(10,11,13,0.92));
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  will-change: transform;
  overflow: hidden;
}
.panel .ph { padding: 16px 18px; }
.panel-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.panel-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-faint); }
.panel-bar .t { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); letter-spacing: 0.1em; margin-left: 4px; }

/* dashboard panel */
.p-dash { width: 360px; height: 300px; left: 4%; top: 18%; z-index: 3; }
.kpi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 16px; }
.kpi { background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; padding: 11px; }
.kpi .l { font-family: var(--mono); font-size: 8.5px; color: var(--fg-mute); letter-spacing: 0.08em; text-transform: uppercase; }
.kpi .v { font-family: var(--display); font-weight: 600; font-size: 20px; margin-top: 6px; }
.kpi .v small { color: var(--acc); font-size: 11px; font-weight: 500; }
.bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; padding: 0 16px 14px; }
.bars i { flex: 1; background: linear-gradient(180deg, var(--acc-dim), rgba(69,201,189,0.15)); border-radius: 3px 3px 0 0; display: block; }
.bars i:nth-child(4) { background: linear-gradient(180deg, var(--acc), var(--acc-dim)); }

/* analytics panel */
.p-graph { width: 300px; height: 200px; right: 2%; top: 6%; z-index: 4; }
.spark { padding: 10px 16px 16px; height: calc(100% - 45px); position: relative; }
.spark svg { width: 100%; height: 100%; overflow: visible; }
.legend { display: flex; gap: 14px; padding: 0 16px 12px; font-family: var(--mono); font-size: 9px; color: var(--fg-mute); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 2px; display: inline-block; }

/* mobile panel */
.p-phone {
  width: 178px; height: 360px; right: 14%; bottom: -4%; z-index: 5;
  border-radius: 26px; padding: 8px;
  background: linear-gradient(165deg, #1b1f24, #0c0d10);
}
.p-phone .screen {
  width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--line);
}
.phone-top { padding: 18px 16px 12px; }
.phone-top .h { font-family: var(--display); font-weight: 600; font-size: 15px; }
.phone-top .s { font-family: var(--mono); font-size: 8.5px; color: var(--fg-mute); margin-top: 3px; letter-spacing: 0.05em; }
.phone-card { margin: 6px 12px; padding: 12px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); }
.phone-card .pc-l { font-family: var(--mono); font-size: 8px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: 0.1em; }
.phone-card .pc-v { font-family: var(--display); font-weight: 600; font-size: 19px; margin-top: 5px; }
.phone-card.acc { background: linear-gradient(150deg, var(--acc-dim), #14302d); border-color: transparent; }
.phone-card.acc .pc-v, .phone-card.acc .pc-l { color: #eafffb; }
.phone-row { display: flex; align-items: center; gap: 9px; margin: 10px 12px; }
.phone-row .av { width: 26px; height: 26px; border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line); }
.phone-row .ln { flex: 1; }
.phone-row .ln b { display: block; height: 7px; width: 60%; background: var(--fg-faint); border-radius: 3px; }
.phone-row .ln i { display: block; height: 5px; width: 40%; background: var(--line-2); border-radius: 3px; margin-top: 5px; }

/* small node chip */
.p-node {
  width: 168px; height: auto; left: 0; bottom: 6%; z-index: 6;
  padding: 14px 16px; border-radius: 10px;
}
.p-node .nt { font-family: var(--mono); font-size: 9px; color: var(--acc); letter-spacing: 0.1em; text-transform: uppercase; }
.p-node .nv { font-family: var(--display); font-weight: 600; font-size: 15px; margin-top: 8px; line-height: 1.2; }
.p-node .pulse { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-family: var(--mono); font-size: 9px; color: var(--fg-soft); }
.p-node .pulse .d { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 var(--acc-glow); animation: ping 2.4s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--acc-glow); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.scroll-cue {
  position: absolute; left: var(--gut); bottom: 30px; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.15em; text-transform: uppercase;
}
.scroll-cue .rail { width: 1px; height: 40px; background: var(--line-2); position: relative; overflow: hidden; }
.scroll-cue .rail::after { content:""; position: absolute; top: -50%; left: 0; width: 1px; height: 50%; background: var(--acc); animation: drop 2s var(--ease) infinite; }
@keyframes drop { 0% { top: -50%; } 100% { top: 100%; } }

@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .stage { display: none; }
}

/* ============================================================
   MARQUEE / TRUST STRIP
   ============================================================ */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; overflow: hidden; background: var(--bg-1); }
.strip-track { display: flex; gap: 64px; width: max-content; animation: marq 32s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track span { font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--fg-mute); white-space: nowrap; display: inline-flex; align-items: center; gap: 64px; letter-spacing: -0.02em; }
.strip-track span::after { content: "✳"; color: var(--acc); font-size: 12px; opacity: 0.6; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============================================================
   METRICS
   ============================================================ */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.metric { padding: 48px 36px; border-right: 1px solid var(--line); position: relative; }
.metric:last-child { border-right: none; }
.metric .num { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5vw, 68px); letter-spacing: -0.04em; line-height: 1; }
.metric .num .suf { color: var(--acc); }
.metric .cap { margin-top: 14px; color: var(--fg-soft); font-size: 15px; }
.metric .sub { margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.05em; }
@media (max-width: 860px) { .metrics { grid-template-columns: 1fr 1fr; } .metric:nth-child(2) { border-right: none; } .metric:nth-child(1), .metric:nth-child(2) { border-bottom: 1px solid var(--line); } }

/* ============================================================
   SERVICES (expandable)
   ============================================================ */
.svc-list { margin-top: 64px; border-top: 1px solid var(--line); }
.svc {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .5s var(--ease);
}
.svc:hover { background: var(--bg-1); }
.svc.open { background: var(--bg-1); }
.svc-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 24px; padding: 30px 28px; }
.svc-row .n { font-family: var(--mono); font-size: 13px; color: var(--fg-mute); }
.svc.open .svc-row .n { color: var(--acc); }
.svc-row .ti { font-family: var(--display); font-weight: 500; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; transition: color .3s; }
.svc.open .svc-row .ti { color: var(--fg); }
.svc:not(.open) .svc-row .ti { color: var(--fg-soft); }
.svc-row .ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--fg-mute); transition: transform .5s var(--ease), color .3s; }
.svc.open .svc-row .ic { transform: rotate(45deg); color: var(--acc); }

.svc-body { height: 0; overflow: hidden; transition: height .6s var(--ease); }
.svc-inner { display: grid; grid-template-columns: 90px 1.1fr 1fr; gap: 24px; padding: 4px 28px 40px; }
.svc-inner .desc { color: var(--fg-soft); font-size: 16.5px; line-height: 1.6; max-width: 460px; }
.svc-inner .tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-inner .tags i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--fg-soft); padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 2px; }
.svc-prev { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; min-height: 180px; padding: 16px; position: relative; overflow: hidden; }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 40px 1fr auto; gap: 14px; padding: 22px 8px; }
  .svc-inner { grid-template-columns: 1fr; padding: 0 8px 30px; }
  .svc-prev { display: none; }
}

/* mini preview elements */
.mini-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; height: 100%; }
.mini-node { flex: 1; min-width: 60px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 6px; padding: 10px; font-family: var(--mono); font-size: 9px; color: var(--fg-soft); text-align: center; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 100%; padding-top: 20px; }
.mini-bars i { flex: 1; background: var(--acc-dim); border-radius: 2px 2px 0 0; }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case { padding: clamp(70px, 9vh, 120px) 0; border-top: 1px solid var(--line); }
.case-inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
/* flip = media-first in DOM; widen the left column so the screenshot keeps the
   larger column and the copy/media sides genuinely alternate down the page. */
.case.flip .case-inner { grid-template-columns: 1.15fr 1fr; }
.case-tag { font-family: var(--mono); font-size: 12px; color: var(--acc); letter-spacing: 0.12em; text-transform: uppercase; }
.case h3 { font-size: clamp(30px, 4vw, 54px); margin-top: 18px; letter-spacing: -0.035em; }
.case .lede { color: var(--fg-soft); font-size: 17px; margin-top: 22px; max-width: 480px; line-height: 1.6; }
.case-stats { display: flex; gap: 40px; margin-top: 36px; }
.case-stats div b { font-family: var(--display); font-weight: 600; font-size: 30px; display: block; letter-spacing: -0.03em; }
.case-stats div span { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.04em; }
.case-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.case-meta i { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--fg-soft); padding: 6px 11px; border: 1px solid var(--line); border-radius: 2px; }

.case-media { position: relative; }
.frame {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2);
  background: var(--bg-1);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,0.85);
}
.frame-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
/* macOS-style traffic lights: muted at rest, they 'wake up' into colour
   on hover of the window bar, with a soft glow + spring on individual hover. */
.frame-bar .d {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--fg-faint);
  position: relative;
  cursor: pointer;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.frame-bar:hover .d.r { background: #FF5F57; }
.frame-bar:hover .d.y { background: #FEBC2E; }
.frame-bar:hover .d.g { background: #28C840; }
.frame-bar .d.r:hover { box-shadow: 0 0 12px rgba(255,95,87,0.7);  transform: scale(1.22); }
.frame-bar .d.y:hover { box-shadow: 0 0 12px rgba(254,188,46,0.7);  transform: scale(1.22); }
.frame-bar .d.g:hover { box-shadow: 0 0 12px rgba(40,200,64,0.7);   transform: scale(1.22); }
/* glyph that fades in when you hover the individual light */
.frame-bar .d::after {
  content: ""; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 700 8px/1 var(--mono); color: rgba(0,0,0,0.55);
  opacity: 0; transition: opacity .2s var(--ease);
}
.frame-bar .d.r::after { content: "\00d7"; font-size: 10px; }
.frame-bar .d.y::after { content: "\2013"; }
.frame-bar .d.g::after { content: "\2197"; }
.frame-bar:hover .d:hover::after { opacity: 1; }
/* minimal-lights mode (tweakable): keep the dots monochrome & still */
body.lights-minimal .frame-bar:hover .d.r,
body.lights-minimal .frame-bar:hover .d.y,
body.lights-minimal .frame-bar:hover .d.g { background: var(--fg-faint); }
body.lights-minimal .frame-bar .d { width: 9px; height: 9px; cursor: default; }
body.lights-minimal .frame-bar .d:hover { box-shadow: none; transform: none; }
body.lights-minimal .frame-bar .d::after { display: none; }
.frame-bar .u { margin-left: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); }
.case-media image-slot { display: block; width: 100%; height: 380px; }
.case-media .frame image-slot { border-radius: 0; }
@media (max-width: 860px) {
  .case-inner { grid-template-columns: 1fr; }
  .case.flip .case-media { order: 0; }
  .case-media image-slot { height: 280px; }
}

/* ============================================================
   PROCESS (pinned horizontal)
   ============================================================ */
.process { position: relative; background: var(--bg-1); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.process-sticky { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
/* The pin parks .process-sticky at top:0, so the head needs the nav's height
   on top of its own 40px or the fixed header bar slices through the h2. */
.process-head { padding: calc(40px + var(--nav-h)) var(--gut) 0; display: flex; justify-content: space-between; align-items: flex-end; }
.process-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
.process-prog { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.process-prog b { color: var(--acc); }
.track-wrap { flex: 1; display: flex; align-items: center; overflow: hidden; }
.track { display: flex; gap: 28px; padding: 0 var(--gut); will-change: transform; }
.stage-card {
  flex: 0 0 clamp(300px, 34vw, 440px);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 36px; min-height: 420px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.stage-card .sn { font-family: var(--mono); font-size: 13px; color: var(--acc); letter-spacing: 0.1em; }
.stage-card h3 { font-size: 32px; margin-top: 18px; letter-spacing: -0.03em; }
.stage-card p { color: var(--fg-soft); margin-top: 16px; font-size: 15.5px; line-height: 1.6; }
.stage-card .sd { margin-top: auto; padding-top: 28px; }
.stage-diagram { display: flex; gap: 6px; align-items: flex-end; height: 70px; }
.stage-diagram i { flex: 1; background: linear-gradient(180deg, var(--acc-dim), transparent); border-radius: 3px 3px 0 0; opacity: 0.5; }
.stage-card .glow { position: absolute; width: 260px; height: 260px; right: -80px; top: -80px; background: radial-gradient(circle, var(--acc-soft), transparent 70%); }
.stage-list { list-style: none; margin-top: 20px; }
.stage-list li { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); padding: 7px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.stage-list li::before { content: "→"; color: var(--acc); }

@media (max-width: 760px) {
  .process-sticky { height: auto; padding-bottom: 60px; }
  .track-wrap { overflow-x: auto; }
  .track { transform: none !important; }
  .stage-card { min-height: auto; }
}

/* ============================================================
   TECH ECOSYSTEM (node map)
   ============================================================ */
.tech { position: relative; overflow: hidden; }
.tech-map { position: relative; height: 600px; margin-top: 56px; }
.tech-map svg.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tech-map svg.links path { fill: none; stroke: var(--line-2); stroke-width: 1; transition: stroke .4s; }
.tech-map svg.links path.lit { stroke: var(--acc); }
.tech-map svg.links circle.dot { fill: var(--acc); }
.node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px; border-radius: 100px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-family: var(--sans); font-weight: 500; font-size: 14px; white-space: nowrap;
  cursor: default; transition: border-color .35s, background .35s, transform .35s var(--ease), box-shadow .35s;
  z-index: 2;
}
.node .nd { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-mute); transition: background .3s, box-shadow .3s; }
.node:hover { border-color: var(--acc); background: var(--bg-3); box-shadow: 0 0 30px -8px var(--acc-glow); }
.node:hover .nd { background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.node.core {
  background: linear-gradient(150deg, var(--acc-dim), #123330);
  border-color: var(--acc); color: #eafffb;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 18px 26px; z-index: 3;
  box-shadow: 0 0 50px -10px var(--acc-glow);
}
.node.core .nd { background: #eafffb; box-shadow: 0 0 12px #eafffb; }
@media (max-width: 760px) {
  .tech-map { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tech-map svg.links { display: none; }
  .node { position: static; transform: none; justify-content: center; }
  .node.core { grid-column: 1 / -1; justify-content: center; }
}

/* ============================================================
   WHY US
   ============================================================ */
.why { position: relative; }
.why-statement { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -0.035em; line-height: 1.08; max-width: 1000px; }
.why-statement b { font-weight: 600; color: var(--fg); }
.why-statement .dim { color: var(--fg-faint); }
.why-grid { margin-top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.why-cell { background: var(--bg); padding: 40px 34px; transition: background .4s; }
.why-cell:hover { background: var(--bg-1); }
.why-cell .wn { font-family: var(--mono); font-size: 12px; color: var(--acc); letter-spacing: 0.1em; }
.why-cell h4 { font-family: var(--display); font-weight: 600; font-size: 23px; margin-top: 20px; letter-spacing: -0.02em; }
.why-cell p { color: var(--fg-soft); margin-top: 14px; font-size: 15px; line-height: 1.6; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { position: relative; text-align: center; padding: clamp(120px, 20vh, 220px) 0; overflow: hidden; border-top: 1px solid var(--line); }
.final-glow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1000px; height: 600px; background: radial-gradient(ellipse, var(--acc-glow), transparent 65%); opacity: 0.35; pointer-events: none; }
.final-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000, transparent 75%); }
.final .wrap { position: relative; z-index: 2; }
.final h2 { font-size: clamp(40px, 7vw, 110px); letter-spacing: -0.05em; line-height: 0.95; }
.final h2 em { font-style: normal; color: var(--acc); }
.final p { color: var(--fg-soft); font-size: 19px; margin: 32px auto 0; max-width: 540px; }
.final .hero-cta { justify-content: center; margin-top: 48px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding-top: 80px; background: var(--bg-1); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 70px; }
.foot-brand .name { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; }
.foot-brand p { color: var(--fg-soft); margin-top: 20px; max-width: 300px; font-size: 15px; line-height: 1.6; }
.foot-brand .loc { margin-top: 26px; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); line-height: 1.7; }
.foot-col h5 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-mute); margin-bottom: 20px; }
.foot-col a { display: block; color: var(--fg-soft); font-size: 15px; padding: 7px 0; transition: color .3s, padding-left .3s; }
.foot-col a:hover { color: var(--acc); padding-left: 6px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--fg-mute); flex-wrap: wrap; gap: 16px; }
.foot-bottom .socials { display: flex; gap: 22px; }
.foot-bottom .socials a:hover { color: var(--acc); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* big wordmark */
.foot-word { font-family: var(--display); font-weight: 600; font-size: clamp(60px, 16vw, 240px); letter-spacing: -0.05em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--line-2); padding: 30px 0 20px; white-space: nowrap; overflow: hidden; text-align: center; }

/* ============================================================
   FEATURED SERVICES (hierarchy)
   ============================================================ */
.svc-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:64px;background:var(--line);border:1px solid var(--line)}
.svc-card{background:var(--bg);padding:40px 34px 38px;position:relative;transition:background .4s var(--ease)}
.svc-card:hover{background:var(--bg-1)}
.svc-card .sc-n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--acc)}
.svc-card h3{font-size:clamp(24px,2.1vw,31px);margin-top:26px;letter-spacing:-.03em}
.svc-card p{color:var(--fg-soft);font-size:15.5px;margin-top:16px;line-height:1.62;text-wrap:pretty}
.svc-card .sc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:26px}
.svc-card .sc-tags i{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--fg-mute);padding:5px 9px;border:1px solid var(--line);border-radius:2px}
.svc-rest-head{display:flex;align-items:center;gap:20px;margin-top:90px}
.svc-rest-head .rule{flex:1;height:1px;background:var(--line)}
@media (max-width:900px){.svc-lead{grid-template-columns:1fr}.svc-card{padding:32px 24px}}

/* ============================================================
   ENGAGEMENT + GUARANTEES
   ============================================================ */
.engage{border-top:1px solid var(--line)}
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.eng-card{border:1px solid var(--line);background:var(--bg-1);padding:32px 28px 34px;display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .5s var(--ease)}
.eng-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.eng-card.feature{background:linear-gradient(165deg,rgba(69,201,189,.07),var(--bg-1) 55%);border-color:rgba(69,201,189,.28)}
.eng-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.eng-price{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acc);text-transform:uppercase}
.eng-card h3{font-size:26px;margin-top:24px;letter-spacing:-.03em}
.eng-card p{color:var(--fg-soft);font-size:15px;margin-top:14px;line-height:1.6;text-wrap:pretty}
.eng-list{list-style:none;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.eng-list li{font-size:14px;color:var(--fg-soft);display:flex;gap:10px;align-items:flex-start}
.eng-list li::before{content:"\2014";color:var(--acc);opacity:.75}
.guarantee{margin-top:22px;border:1px solid var(--line);background:var(--bg-1);padding:34px 30px}
.g-head{margin-bottom:26px}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 34px}
.g-grid>div{display:flex;flex-direction:column;gap:8px}
.g-grid b{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.g-grid span{color:var(--fg-mute);font-size:14px;line-height:1.55;text-wrap:pretty}
@media (max-width:960px){.eng-grid{grid-template-columns:1fr}.g-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.g-grid{grid-template-columns:1fr}}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.final{text-align:left}
.contact-wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:start}
.contact-copy h2{font-size:clamp(38px,5.2vw,76px);margin-top:26px}
.final p{margin-left:0;margin-right:0}
.contact-copy p{max-width:420px;font-size:17.5px}
.next-steps{list-style:none;margin-top:46px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.next-steps li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.next-steps b{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc);padding-top:3px}
.next-steps span{color:var(--fg-soft);font-size:15px;line-height:1.55;text-wrap:pretty}
.contact-direct{margin-top:38px;display:flex;flex-direction:column;gap:10px}
.contact-direct a{font-family:var(--display);font-size:20px;letter-spacing:-.02em;border-bottom:1px solid var(--line-2);align-self:flex-start;padding-bottom:3px;transition:color .3s,border-color .3s}
.contact-direct a:hover{color:var(--acc);border-color:var(--acc)}
.contact-direct span{font-family:var(--mono);font-size:11.5px;color:var(--fg-mute);letter-spacing:.04em;line-height:1.7}
.contact-panel{background:rgba(10,11,13,.86);backdrop-filter:blur(12px);border:1px solid var(--line-2);padding:clamp(26px,2.6vw,38px);border-radius:4px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.f-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.f-secure{font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);letter-spacing:.08em;text-transform:uppercase}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.field>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-mute);display:flex;align-items:baseline;gap:7px}
.field>span i{font-style:normal;color:var(--acc)}
.field>span small{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:var(--fg-faint)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15px;color:var(--fg);background:var(--bg-2);border:1px solid var(--line);border-radius:3px;padding:13px 14px;width:100%;transition:border-color .3s,background .3s;min-height:46px}
.field textarea{resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);background:var(--bg-3)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-mute) 50%),linear-gradient(135deg,var(--fg-mute) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.f-note{font-size:12.5px;color:var(--fg-faint);margin:-6px 0 20px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:13.5px;color:var(--fg-soft);background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:10px 16px;cursor:pointer;min-height:44px;transition:all .28s var(--ease)}
.chip:hover{border-color:var(--line-2);color:var(--fg)}
.chip.on{background:var(--acc);border-color:var(--acc);color:#04110f}
.drop-zone{border:1px dashed var(--line-2);border-radius:3px;padding:20px;text-align:center;font-size:13.5px;color:var(--fg-mute);cursor:pointer;transition:all .3s}
.drop-zone b{color:var(--fg);font-weight:500}
.drop-zone:hover,.drop-zone.over{border-color:var(--acc);background:var(--acc-soft);color:var(--fg-soft)}
.f-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.f-actions button{cursor:pointer}
.f-reply{font-size:13px;color:var(--fg-mute)}
.f-error{margin-top:16px;font-size:13.5px;color:#ff9d8a;border-left:2px solid #ff9d8a;padding-left:12px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#ff9d8a}
.f-success{text-align:center;padding:26px 4px}
.f-success .tick{width:54px;height:54px;border-radius:50%;background:var(--acc-soft);border:1px solid var(--acc);color:var(--acc);display:grid;place-items:center;font-size:24px;margin:0 auto 26px}
.f-success h3{font-size:30px;letter-spacing:-.03em}
.f-success p{color:var(--fg-soft);font-size:15.5px;margin-top:14px;max-width:none}
.f-success p b{font-family:var(--mono);font-size:13px;color:var(--acc)}
.f-success .meanwhile{color:var(--fg-mute);font-size:14px}
.f-success .btn{margin-top:26px}
@media (max-width:940px){.contact-wrap{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}.next-steps li{grid-template-columns:1fr;gap:6px}}

/* ============================================================
   CASE STUDIES — three distinct layouts
   ============================================================ */
.case-tag{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.12em;text-transform:uppercase}
#work h3{letter-spacing:-.035em}
#work .lede{color:var(--fg-soft);font-size:17px;margin-top:22px;line-height:1.6;text-wrap:pretty}
#work .case-meta{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
#work .case-meta i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--fg-soft);padding:6px 11px;border:1px solid var(--line);border-radius:2px}
.frame.edge{border-radius:14px 0 0 14px;border-right:none}

/* --- 01 edge stage --- */
.case-edge{border-top:1px solid var(--line);padding:clamp(70px,9vh,120px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:clamp(32px,5vw,74px);align-items:center;padding-left:max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut)))}
.case-edge .ce-copy{max-width:520px}
.case-edge h3{font-size:clamp(30px,3.4vw,50px);margin-top:18px}
.case-edge .ce-media image-slot{display:block;width:100%;height:clamp(300px,42vw,470px)}
.case-edge .ce-stats{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(46px,6vw,80px) max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut))) 0 0;padding:34px 0 0;border-top:1px solid var(--line);max-width:none}
.case-edge .ce-stats b{font-family:var(--display);font-weight:600;font-size:clamp(28px,3vw,40px);display:block;letter-spacing:-.03em}
.case-edge .ce-stats span{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:.04em}

/* --- 02 centred feature band --- */
.case-feature{margin-top:clamp(80px,10vh,140px);background:var(--bg-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(70px,9vh,120px) 0;text-align:center}
.case-feature .cf-head{max-width:760px;margin:0 auto}
.case-feature h3{font-size:clamp(32px,4.4vw,62px);margin-top:20px}
.case-feature .lede{margin:24px auto 0;max-width:600px}
.case-feature .cf-media{margin:clamp(46px,5vw,72px) auto 0;max-width:1000px}
.case-feature .cf-media image-slot{display:block;width:100%;height:clamp(280px,36vw,520px)}
.case-feature .cf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,4vw,58px);text-align:left}
.case-feature .cf-stats>div{background:var(--bg-1);padding:24px 22px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.case-feature .cf-stats b{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.5vw,36px);letter-spacing:-.03em}
.case-feature .cf-stats>div:last-child b{font-family:var(--mono);font-weight:400;font-size:12px;line-height:1.7;letter-spacing:.02em;color:var(--fg-soft)}
.case-feature .cf-stats span{font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);letter-spacing:.12em;text-transform:uppercase}

/* --- 03 overlapping card --- */
.case-overlap{padding:clamp(90px,12vh,160px) 0 clamp(70px,9vh,120px);position:relative;overflow:hidden}
.case-overlap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:90px 90px;mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 72%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000,transparent 72%);pointer-events:none}
.co-inner{position:relative;display:grid;grid-template-columns:1fr}
.co-media{width:min(100%,78%)}
.co-media image-slot{display:block;width:100%;height:clamp(300px,40vw,520px)}
.co-card{width:min(100%,470px);margin:-90px 0 0 auto;position:relative;z-index:2;background:rgba(10,11,13,.94);backdrop-filter:blur(10px);border:1px solid var(--line-2);padding:clamp(26px,2.6vw,38px);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.co-card h3{font-size:clamp(26px,2.6vw,38px);margin-top:16px}
.co-card .lede{font-size:16px;margin-top:18px}
.co-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.co-stats b{font-family:var(--display);font-weight:600;font-size:26px;display:block;letter-spacing:-.03em}
.co-stats span{font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);letter-spacing:.04em}

@media (max-width:940px){
  .case-edge{grid-template-columns:1fr;padding-right:var(--gut);padding-left:var(--gut)}
  .frame.edge{border-radius:14px;border-right:1px solid var(--line-2)}
  .case-edge .ce-stats{grid-template-columns:1fr 1fr;margin-right:0}
  .case-feature .cf-stats{grid-template-columns:1fr 1fr}
  .co-media{width:100%}
  .co-card{width:100%;margin:-40px 0 0}
}
@media (max-width:560px){.case-edge .ce-stats,.case-feature .cf-stats{grid-template-columns:1fr}}

/* ============================================================
   AI LAYER
   ============================================================ */
.ailayer{border-top:1px solid var(--line);background:var(--bg-1)}
.ai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:60px}
.ai-card{border:1px solid var(--line);background:var(--bg);padding:32px 30px 34px;display:flex;flex-direction:column;transition:border-color .4s var(--ease)}
.ai-card:hover{border-color:var(--line-2)}
.ai-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.ai-card h3{font-size:clamp(22px,2vw,29px);margin-top:22px;letter-spacing:-.03em}
.ai-card p{color:var(--fg-soft);font-size:15px;margin-top:15px;line-height:1.62;text-wrap:pretty}
.ai-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.ai-card .tags i{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--fg-mute);padding:5px 9px;border:1px solid var(--line);border-radius:2px}
.ai-plat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:18px}
.ai-plat>div{background:var(--bg);padding:26px 24px;display:flex;flex-direction:column;gap:9px}
.ai-plat b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.ai-plat span{color:var(--fg-mute);font-size:13.5px;line-height:1.55;text-wrap:pretty}
.ai-scale{display:flex;flex-wrap:wrap;gap:34px;margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.ai-scale div{display:flex;flex-direction:column;gap:7px}
.ai-scale b{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.03em}
.ai-scale span{font-family:var(--mono);font-size:11px;color:var(--fg-mute);letter-spacing:.05em}
@media (max-width:940px){.ai-grid{grid-template-columns:1fr}.ai-plat{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ai-plat{grid-template-columns:1fr}}

/* ============================================================
   CASE MOCK UIs (stand in for real screenshots)
   ============================================================ */
.mock{position:relative;background:var(--bg);font-family:var(--sans);overflow:hidden;height:100%}
.mock *{box-sizing:border-box}
.mk-pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute)}

/* ---- 01 ERP dashboard ---- */
.mk-erp{display:grid;grid-template-columns:150px 1fr;height:100%}
.mk-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px;background:var(--bg-1)}
.mk-side .sh{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin:12px 8px 6px}
.mk-side a{font-size:11.5px;color:var(--fg-mute);padding:7px 9px;border-radius:5px;display:flex;align-items:center;gap:7px}
.mk-side a::before{content:"";width:5px;height:5px;border-radius:1px;background:var(--fg-faint)}
.mk-side a.on{background:var(--acc-soft);color:var(--fg)}
.mk-side a.on::before{background:var(--acc)}
.mk-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-bar h4{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.02em}
.mk-tabs{display:flex;gap:5px}
.mk-tabs i{font-style:normal;font-family:var(--mono);font-size:8.5px;color:var(--fg-mute);border:1px solid var(--line);padding:4px 8px;border-radius:100px}
.mk-tabs i.on{color:#04110f;background:var(--acc);border-color:var(--acc)}
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mk-kpi{border:1px solid var(--line);border-radius:6px;padding:10px;background:var(--bg-1)}
.mk-kpi b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em;margin-top:5px}
.mk-kpi b em{font-style:normal;font-size:9px;color:var(--acc);margin-left:4px}
.mk-chart{border:1px solid var(--line);border-radius:6px;background:var(--bg-1);padding:12px;flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.mk-cols{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:54px}
.mk-cols i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--acc-dim),rgba(69,201,189,.12))}
.mk-cols i.hi{background:linear-gradient(180deg,var(--acc),var(--acc-dim))}
.mk-tbl{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg-1)}
.mk-tr{display:grid;grid-template-columns:1fr 70px 60px 54px;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--fg-soft);align-items:center}
.mk-tr:last-child{border-bottom:none}
.mk-tr.h{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);background:var(--bg-2)}
.mk-tag{font-family:var(--mono);font-size:8px;padding:3px 6px;border-radius:100px;border:1px solid var(--line-2);color:var(--fg-mute);justify-self:start}
.mk-tag.ok{color:var(--acc);border-color:var(--acc-dim)}
.mk-tag.wait{color:#e0b74a;border-color:rgba(224,183,74,.4)}

/* ---- 02 field ops ---- */
.mk-ops{display:grid;grid-template-columns:1fr 190px;height:100%}
.mk-map{position:relative;padding:16px 18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line);min-width:0}
.mk-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.7}
.mk-map>*{position:relative}
.mk-agents{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.mk-ag{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:rgba(10,11,13,.9)}
.mk-ag .av{width:22px;height:22px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2)}
.mk-ag>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.mk-ag .nm{display:block;font-size:11px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ag .lc{display:block;font-family:var(--mono);font-size:8.5px;color:var(--fg-faint);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ag .st{font-family:var(--mono);font-size:8px;color:var(--acc)}
.mk-ag .st.off{color:var(--fg-faint)}
.mk-phone{padding:16px 14px;background:var(--bg-1);display:flex;flex-direction:column;gap:8px}
.mk-ph-top{display:flex;justify-content:space-between;align-items:baseline}
.mk-ph-top b{font-family:var(--display);font-weight:600;font-size:13px}
.mk-sync{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:8px;color:var(--acc)}
.mk-sync i{width:5px;height:5px;border-radius:50%;background:var(--acc);display:block}
.mk-task{border:1px solid var(--line);border-radius:7px;padding:9px 10px;background:var(--bg)}
.mk-task.acc{background:linear-gradient(150deg,var(--acc-dim),#14302d);border-color:transparent}
.mk-task b{display:block;font-family:var(--display);font-weight:600;font-size:12px;margin-top:4px}
.mk-task.acc b,.mk-task.acc .mk-pill{color:#eafffb}
.mk-prog{height:4px;border-radius:100px;background:var(--bg-3);overflow:hidden;margin-top:8px}
.mk-prog i{display:block;height:100%;background:var(--acc);border-radius:100px}
.mk-offline{margin-top:auto;font-family:var(--mono);font-size:8px;color:var(--fg-mute);border:1px dashed var(--line-2);border-radius:5px;padding:7px 8px;line-height:1.5}

/* ---- 03 AI workspace ---- */
.mk-ai{display:grid;grid-template-columns:1fr 210px;height:100%}
.mk-doc{padding:16px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:9px;min-width:0}
.mk-q{display:flex;align-items:center;gap:8px;border:1px solid var(--acc-dim);border-radius:6px;padding:9px 11px;background:var(--acc-soft);font-size:11px;color:var(--fg)}
.mk-q span{color:var(--acc);font-family:var(--mono);font-size:9px}
.mk-lines{display:flex;flex-direction:column;gap:7px;flex:1;min-height:0;overflow:hidden}
.mk-lines i{display:block;height:6px;border-radius:2px;background:var(--line-2)}
.mk-lines i.s{width:72%}
.mk-lines i.m{width:88%}
.mk-lines i.hl{background:rgba(69,201,189,.42);position:relative}
.mk-cite{font-family:var(--mono);font-size:8px;color:var(--acc);border:1px solid var(--acc-dim);border-radius:100px;padding:2px 7px;align-self:flex-start}
.mk-panel{padding:16px 14px;background:var(--bg-1);display:flex;flex-direction:column;gap:9px}
.mk-field{border:1px solid var(--line);border-radius:6px;padding:9px 10px;background:var(--bg)}
.mk-field b{display:block;font-size:11.5px;margin-top:4px;color:var(--fg)}
.mk-conf{display:flex;align-items:center;gap:6px;margin-top:7px;font-family:var(--mono);font-size:8px;color:var(--fg-mute)}
.mk-conf .m{flex:1;height:3px;background:var(--bg-3);border-radius:100px;overflow:hidden}
.mk-conf .m i{display:block;height:100%;background:var(--acc)}
.mk-review{margin-top:auto;display:flex;gap:6px}
.mk-review i{flex:1;font-style:normal;text-align:center;font-family:var(--mono);font-size:8.5px;padding:7px 0;border-radius:5px;border:1px solid var(--line-2);color:var(--fg-mute)}
.mk-review i.pri{background:var(--acc);border-color:var(--acc);color:#04110f}

@media (max-width:760px){
  .mk-erp{grid-template-columns:1fr}.mk-side{display:none}
  .mk-ops,.mk-ai{grid-template-columns:1fr}.mk-phone,.mk-panel{display:none}
  .mk-kpis{grid-template-columns:1fr 1fr}
}

/* ============================================================
   CASE MOCKS — each product gets its OWN visual identity,
   deliberately NOT the site palette, so the frames read as
   screenshots of real, separate applications.
   ============================================================ */
.mock{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:0}
.mock .mk-pill{font-family:inherit;font-size:9.5px;letter-spacing:.02em;text-transform:none;font-weight:500}

/* ---------- 01 ERP — light enterprise, indigo-blue ---------- */
.mk-erp{--i:#0F172A;--i2:#5A6478;--i3:#8C93A1;--ln:#E4E7EC;--pa:#FFF;--pb:#F6F7F9;--ac:#2563EB;background:var(--pb);color:var(--i)}
.mk-erp .mk-pill{color:var(--i3)}
.mk-erp .mk-side{background:#0F172A;border-right:none;padding:14px 10px;gap:2px}
.mk-erp .mk-side .sh{color:rgba(255,255,255,.35);font-family:inherit;font-size:9px;letter-spacing:.06em;text-transform:uppercase;margin:12px 8px 5px}
.mk-erp .mk-side a{color:rgba(255,255,255,.62);font-size:11.5px;font-weight:450}
.mk-erp .mk-side a::before{background:rgba(255,255,255,.28);border-radius:2px}
.mk-erp .mk-side a.on{background:rgba(255,255,255,.11);color:#fff;font-weight:550}
.mk-erp .mk-side a.on::before{background:#60A5FA}
.mk-erp .mk-body{background:var(--pb);gap:12px}
.mk-erp .mk-bar h4{font-family:inherit;font-weight:600;font-size:14px;color:var(--i);letter-spacing:-.01em}
.mk-erp .mk-tabs i{font-family:inherit;font-size:9.5px;font-weight:500;color:var(--i2);border:1px solid var(--ln);background:var(--pa);border-radius:5px;padding:4px 9px}
.mk-erp .mk-tabs i.on{background:var(--ac);border-color:var(--ac);color:#fff}
.mk-erp .mk-kpi{background:var(--pa);border:1px solid var(--ln);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.mk-erp .mk-kpi b{font-family:inherit;font-weight:600;font-size:17px;color:var(--i);letter-spacing:-.02em}
.mk-erp .mk-kpi b em{color:#12A150;font-weight:600}
.mk-erp .mk-chart{background:var(--pa);border:1px solid var(--ln);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.mk-erp .mk-cols i{background:#DCE4F7;border-radius:3px 3px 0 0}
.mk-erp .mk-cols i.hi{background:var(--ac)}
.mk-erp .mk-tbl{background:var(--pa);border:1px solid var(--ln);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.mk-erp .mk-tr{border-bottom:1px solid var(--ln);color:var(--i2);font-size:11px}
.mk-erp .mk-tr.h{background:var(--pb);color:var(--i3);font-family:inherit;font-size:9.5px;letter-spacing:.03em;font-weight:600;text-transform:none}
.mk-erp .mk-tag{font-family:inherit;font-size:9px;font-weight:500;border-radius:5px;padding:3px 7px}
.mk-erp .mk-tag.ok{color:#0A7C43;border-color:#B7E4C7;background:#EDFBF2}
.mk-erp .mk-tag.wait{color:#9A6B04;border-color:#F3DDA4;background:#FEF8E7}

/* ---------- 02 Field ops — utility dark slate, amber ---------- */
.mk-ops{--sl:#12161C;--sl2:#1A2028;--ln:#262E38;--tx:#E7EAEE;--tx2:#98A2B0;--am:#F59E0B;--gn:#34D399;background:var(--sl);color:var(--tx)}
.mk-ops .mk-pill{color:var(--tx2)}
.mk-ops .mk-map{border-right:1px solid var(--ln)}
.mk-ops .mk-map::before{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);opacity:1}
.mk-ops .mk-bar h4{font-family:inherit;font-weight:600;font-size:13.5px;color:var(--tx);letter-spacing:-.01em}
.mk-ops .mk-tabs i{font-family:inherit;font-size:9.5px;font-weight:500;color:var(--tx2);border:1px solid var(--ln);border-radius:5px;background:var(--sl2)}
.mk-ops .mk-tabs i.on{background:var(--am);border-color:var(--am);color:#231400}
.mk-ops .mk-ag{background:var(--sl2);border:1px solid var(--ln);border-radius:7px}
.mk-ops .mk-ag .av{background:#2B333E;border:1px solid var(--ln)}
.mk-ops .mk-ag .nm{color:var(--tx);font-size:11.5px;font-weight:500}
.mk-ops .mk-ag .lc{font-family:inherit;font-size:9.5px;color:var(--tx2)}
.mk-ops .mk-ag .st{font-family:inherit;font-size:9px;font-weight:600;color:var(--gn)}
.mk-ops .mk-ag .st.off{color:var(--am)}
.mk-ops .mk-phone{background:var(--sl2);border-left:1px solid var(--ln)}
.mk-ops .mk-ph-top b{font-family:inherit;font-weight:600;font-size:13px;color:var(--tx)}
.mk-ops .mk-sync{font-family:inherit;font-size:9px;font-weight:600;color:var(--gn)}
.mk-ops .mk-sync i{background:var(--gn)}
.mk-ops .mk-task{background:var(--sl);border:1px solid var(--ln);border-radius:8px}
.mk-ops .mk-task b{font-family:inherit;font-weight:600;font-size:12.5px;color:var(--tx)}
.mk-ops .mk-task.acc{background:linear-gradient(150deg,#8A5B04,#3A2703);border-color:#A9700A}
.mk-ops .mk-task.acc b{color:#FFF6E5}
.mk-ops .mk-task.acc .mk-pill{color:#F5D9A3}
.mk-ops .mk-prog{background:rgba(0,0,0,.35)}
.mk-ops .mk-prog i{background:var(--am)}
.mk-ops .mk-offline{font-family:inherit;font-size:9.5px;color:var(--tx2);border:1px dashed var(--ln);background:rgba(245,158,11,.06)}

/* ---------- 03 AI workspace — light, indigo, yellow citations ---------- */
.mk-ai{--i:#131629;--i2:#5B6072;--i3:#8E93A6;--ln:#E6E7EF;--pa:#FFF;--pb:#FAFAFC;--ac:#4F46E5;background:var(--pb);color:var(--i)}
.mk-ai .mk-pill{color:var(--i3)}
.mk-ai .mk-doc{background:var(--pa);border-right:1px solid var(--ln)}
.mk-ai .mk-q{border:1px solid #C9C5F5;background:#F1F0FE;color:var(--i);font-size:11.5px;border-radius:8px}
.mk-ai .mk-q span{font-family:inherit;font-size:9px;font-weight:700;color:var(--ac);letter-spacing:.06em}
.mk-ai .mk-lines i{background:#E9EAF0;height:7px;border-radius:3px}
.mk-ai .mk-lines i.hl{background:#FDE68A;box-shadow:0 0 0 3px #FEF6DC}
.mk-ai .mk-cite{font-family:inherit;font-size:9.5px;font-weight:500;color:var(--ac);border:1px solid #C9C5F5;background:#F1F0FE;border-radius:5px;padding:3px 8px}
.mk-ai .mk-panel{background:var(--pb);border-left:1px solid var(--ln)}
.mk-ai .mk-field{background:var(--pa);border:1px solid var(--ln);border-radius:8px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.mk-ai .mk-field b{font-family:inherit;font-weight:600;font-size:12px;color:var(--i)}
.mk-ai .mk-conf{font-family:inherit;font-size:9.5px;font-weight:500;color:var(--i3)}
.mk-ai .mk-conf .m{background:#EAEBF2}
.mk-ai .mk-conf .m i{background:var(--ac)}
.mk-ai .mk-review i{font-family:inherit;font-size:9.5px;font-weight:500;border:1px solid var(--ln);background:var(--pa);color:var(--i2);border-radius:6px}
.mk-ai .mk-review i.pri{background:var(--ac);border-color:var(--ac);color:#fff}