/* ============================================================
   KWAYZAR · 2026 · Steel & Bone
   Premium light-blue accent · zero red component · zero purple perception risk
   Typography: Instrument Serif (display italic) + Space Grotesk
   ============================================================ */

:root{
  /* base — warm bone (slightly off-white, never sterile) */
  --void-000: #ffffff;
  --void-050: #faf7f1;
  --void-100: #f6f2ea;
  --void-200: #f0ebe0;
  --void-300: #e8e2d4;
  --void-400: #dcd4c2;

  /* foreground — warm graphite ink */
  --fg-100: #0f0d0b;   /* near-black, warm */
  --fg-200: #2a2622;
  --fg-300: #5a544d;
  --fg-400: #8a8278;
  --fg-500: #b5ada3;

  /* single accent: Wedgwood / steel blue
     R < G < B with G high enough to keep it from drifting toward purple.
     Variable names kept for backwards compatibility with existing rules. */
  --violet:   #4a6e8c;   /* steel blue (Wedgwood) — the only accent */
  --violet-2: #7298b8;   /* lighter sky blue (for subtle 2-stop tonal gradients) */
  --magenta:  #1a1714;   /* graphite ink — used where strong contrast is needed */
  --cyan:     #6e6660;   /* warm taupe — for hairlines and metadata text */
  --emerald:  #3d4a40;   /* deep moss — only for "live/ok" indicators */
  --amber:    #a08454;   /* muted ochre — used very sparingly */

  /* glass on warm bone */
  --glass-bg: rgba(255, 252, 245, 0.62);
  --glass-bg-strong: rgba(255, 252, 245, 0.82);
  --glass-stroke: rgba(22, 18, 16, 0.10);
  --glass-stroke-strong: rgba(22, 18, 16, 0.22);
  --glass-shine: rgba(22, 18, 16, 0.04);

  /* layout */
  --maxw: 1440px;
  --pad-x: clamp(20px, 4vw, 64px);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 44px;

  /* type */
  --display: "Instrument Serif", "Times New Roman", serif;
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background: var(--void-000);
  color: var(--fg-100);
  font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  line-height: 1.5;
}

/* ============== Global background composition — WHITE ============== */
body::before{
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(1200px 800px at 12% -10%, rgba(74,110,140,0.10), transparent 60%),
    radial-gradient(900px 700px at 90% 10%, rgba(26,23,20,0.07), transparent 65%),
    radial-gradient(1100px 900px at 50% 110%, rgba(110,102,96,0.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  z-index: -3;
  pointer-events:none;
}
body::after{
  content:"";
  position: fixed; inset:0;
  background-image:
    linear-gradient(rgba(22,18,16,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,18,16,0.045) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
  mask-image: radial-gradient(1200px 800px at 50% 30%, #000 0%, transparent 80%);
  z-index:-2;
  pointer-events:none;
}

/* grain — barely-there on white */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.18;
  /* Removed `mix-blend-mode: multiply` — was forcing the GPU to recomposite the
     whole viewport on every paint. Lower opacity + neutral tint gets ~80% of the
     look at ~10% of the cost. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  contain: strict;
}

/* cursor light */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; pointer-events:none;
  border-radius:50%;
  background: radial-gradient(closest-side, rgba(74,110,140,0.18), rgba(74,110,140,0) 70%);
  filter: blur(20px);
  transform: translate(-50%,-50%);
  z-index:0;
  transition: opacity .3s ease;
  opacity:0;
  mix-blend-mode: multiply;
}

/* starfield — hidden on white */
.starfield{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none;}
.star-layer{position:absolute; inset:-50% -10% -50% -10%; opacity:.3;}
.star-layer--1{
  background-image:
    radial-gradient(1px 1px at 12% 20%, #e8dfc8 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 84%, #7298b8 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 12%, #e8dfc8 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 47%, #6e6660 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 73%, #e8dfc8 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 18%, #2a2622 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 55%, #e8dfc8 50%, transparent 51%);
  background-size: 100% 100%;
  animation: drift 90s linear infinite;
}
.star-layer--2{
  background-image:
    radial-gradient(1.5px 1.5px at 22% 60%, #7298b8 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 30%, #e8dfc8 50%, transparent 51%),
    radial-gradient(2px 2px at 73% 88%, #6e6660 50%, transparent 51%),
    radial-gradient(1px 1px at 89% 41%, #e8dfc8 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 78%, #2a2622 50%, transparent 51%);
  background-size: 100% 100%;
  animation: drift 140s linear infinite reverse;
  opacity:.45;
}
.star-layer--3{
  background-image:
    radial-gradient(2.5px 2.5px at 50% 50%, rgba(217,211,242,0.7) 50%, transparent 51%);
  background-size: 1200px 1200px;
  animation: twinkle 6s ease-in-out infinite alternate;
  opacity:.18;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-6%,-4%,0)}
}
@keyframes twinkle{
  0%{opacity:.10}
  100%{opacity:.28}
}

/* ============== Typography helpers ============== */
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--fg-300);}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--fg-300);
}
.dot{
  width:8px; height:8px; aspect-ratio:1; border-radius:50%;
  background: var(--fg-400); display:inline-block;
  flex-shrink: 0;
}
.dot--live{
  background: var(--emerald);
  box-shadow: 0 0 0 0 rgba(92,255,178,.5);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow: 0 0 0 0 rgba(92,255,178,.55)}
  70%{box-shadow: 0 0 0 10px rgba(92,255,178,0)}
  100%{box-shadow: 0 0 0 0 rgba(92,255,178,0)}
}

em{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
}

.grad{
  /* Solid claret italic — premium emphasis. No rainbow gradient (that's the AI tell). */
  background: none;
  color: var(--violet);
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  font-style: italic;
  font-family: var(--display);
}

/* ============== Glass primitive — light glass on white ============== */
.glass{
  position:relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  contain: paint;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(22,18,16,0.04),
    0 30px 60px -28px rgba(74,110,140,0.18),
    0 6px 18px -10px rgba(22,18,16,0.08);
  overflow:hidden;
}
.glass::before{
  /* refractive highlight */
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(74,110,140,0.10), transparent 50%),
    radial-gradient(120% 60% at 100% 100%, rgba(110,102,96,0.07), transparent 50%);
  border-radius: inherit;
  opacity:.9;
}
.glass::after{
  /* hairline rim */
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(140deg, rgba(74,110,140,0.4), transparent 30%, transparent 70%, rgba(110,102,96,0.25));
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity:.55;
}

/* ============== Buttons ============== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--sans);
  font-weight:500; font-size:14px; letter-spacing:.01em;
  color: var(--fg-100);
  text-decoration:none;
  padding: 13px 20px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .25s ease, background .25s ease, box-shadow .35s ease;
  white-space: nowrap;
  isolation:isolate;
}
.btn--lg{padding: 17px 26px; font-size:15px;}
.btn--sm{padding: 9px 14px; font-size:12px; min-height: 44px;}

/* liquid glass primary — dark pill on white */
.btn--liquid{
  background: linear-gradient(180deg, #1a0f3c, #07061a);
  border: 1px solid rgba(74,110,140,0.4);
  color: #fff;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(114,152,184,0.45),
    inset 0 -10px 30px -10px rgba(74,110,140,0.55),
    0 18px 40px -10px rgba(74,110,140,0.45),
    0 0 0 1px rgba(74,110,140,0.18);
  overflow:hidden;
}
.btn--liquid .btn__inner{display:inline-flex; align-items:center; gap:10px; position:relative; z-index:2;}
.btn--liquid .btn__ring{
  position:absolute; inset:-30%;
  background: conic-gradient(from 0deg, var(--violet), #2a4a6a, var(--violet-2), var(--violet));
  filter: blur(24px);
  opacity:.55;
  z-index: -1;
  animation: spin 8s linear infinite;
}
.btn--liquid::before{
  /* spec highlight */
  content:""; position:absolute; inset:1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(114,152,184,0.32), rgba(114,152,184,0) 55%);
  pointer-events:none;
  z-index:1;
}
.btn--liquid:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(217,211,242,0.55),
    inset 0 -12px 36px -10px rgba(74,110,140,0.7),
    0 28px 60px -10px rgba(74,110,140,0.55),
    0 0 0 1px rgba(74,110,140,0.4);
}

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

/* glass secondary */
.btn--glass{
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(22,18,16,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--fg-100);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 16px -8px rgba(22,18,16,0.12);
}
.btn--glass:hover{
  background: rgba(255,255,255,0.95);
  border-color: rgba(74,110,140,0.4);
}

/* ghost */
.btn--ghost{
  background: transparent;
  border: 1px solid rgba(22,18,16,0.16);
  color: var(--fg-200);
}
.btn--ghost:hover{
  border-color: rgba(74,110,140,0.5);
  color: var(--fg-100);
  background: rgba(74,110,140,0.05);
}
.btn__play{
  width:22px; height:22px; border-radius:50%;
  background: rgba(74,110,140,0.10);
  border: 1px solid rgba(74,110,140,0.30);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--violet);
}

/* ============== NAV ============== */
.nav{
  position: sticky; top: 14px; z-index: 100;
  display:flex; align-items:center; gap:24px;
  margin: 14px auto 0;
  max-width: calc(var(--maxw) - 0px);
  padding: 12px 14px 12px 18px;
  width: calc(100% - 28px);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(22,18,16,0.08);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 12px 30px -14px rgba(22,18,16,0.18);
}
.nav__brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color: var(--fg-100);}
.nav__logo{width:30px; height:30px; border-radius:9px; object-fit:cover; background:#ffffff;
  box-shadow: inset 0 0 0 1px rgba(22,18,16,0.12), 0 4px 14px -2px rgba(74,110,140,0.30);
}
.nav__wordmark{
  font-family: var(--sans); font-weight:600; font-size:15px; letter-spacing:.02em;
}
.nav__links{
  display:flex; align-items:center; gap:4px;
  margin-left: 16px;
}
.nav__links a{
  text-decoration:none;
  color: var(--fg-200);
  font-size:13.5px; padding: 8px 14px; border-radius: 999px;
  transition: color .2s ease, background .25s ease;
}
.nav__links a:hover{color: var(--fg-100); background: rgba(74,110,140,0.08);}
.nav__cta{margin-left:auto; display:inline-flex; align-items:center; gap:12px;}
.nav__status{
  font-family: var(--mono); font-size:11px; letter-spacing:.1em;
  color: var(--fg-300); display:inline-flex; align-items:center; gap:8px;
}
.nav__status .dot{background: var(--emerald);}

/* ============== HERO ============== */
.hero{
  position:relative;
  max-width: var(--maxw);
  margin: 24px auto 0;
  padding: 20px var(--pad-x) 80px;
  isolation:isolate;
}
.hero__aura{
  position:absolute; inset: -10% -5% 0 -5%;
  background:
    radial-gradient(700px 460px at 20% 30%, rgba(74,110,140,0.22), transparent 60%),
    radial-gradient(540px 360px at 85% 20%, rgba(42,38,34,0.14), transparent 60%),
    radial-gradient(620px 420px at 60% 90%, rgba(110,102,96,0.10), transparent 60%);
  /* No filter:blur — radial-gradient is already soft, the 40px filter blur was burning the GPU.
     Containment scopes paint so it never invalidates the whole hero. */
  z-index:-1;
  contain: layout paint;
  will-change: opacity;
  opacity:.9;
}
.hero__orbit{
  position:absolute; right:-200px; top:-40px; width: 720px; height: 720px;
  z-index:-1; opacity:.5;
}
.hero__orbit .ring{
  position:absolute; inset:0; border-radius:50%;
  border: 1px dashed rgba(114,152,184,0.3);
}
.hero__orbit .ring--2{inset: 12%; border-color: rgba(42,38,34,0.25); border-style:dotted;}
.hero__orbit .ring--3{inset: 24%; border-color: rgba(110,102,96,0.25);}
.hero__orbit .ring::after{
  content:"";
  position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%;
  background: var(--violet-2);
  box-shadow: 0 0 12px var(--violet-2);
  transform: translateX(-50%);
}
.hero__orbit .ring--1{ animation: orbit 28s linear infinite; }
.hero__orbit .ring--2{ animation: orbit 18s linear infinite reverse; }
.hero__orbit .ring--3{ animation: orbit 12s linear infinite; }
@keyframes orbit{
  to{transform: rotate(360deg)}
}

.hero__meta{margin-bottom: 20px;}
.hero__title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(46px, 8.4vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 38px;
  color: var(--fg-100);
  max-width: 17ch;
  text-wrap: balance;
}
.hero__title .line{display:block;}
.hero__title em{
  font-family: var(--display);
  font-style:italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.hero__sub{
  max-width: 56ch;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--fg-200);
  line-height: 1.55;
  margin: 0 0 40px;
}
.hero__sub .mono{font-size: 13px; color: var(--violet);}

.hero__actions{display:flex; flex-wrap:wrap; gap: 12px;}

.hero__strip{
  margin-top: 90px;
  display:grid; grid-template-columns: repeat(4, 1fr);
  padding: 26px 32px;
  border-radius: var(--radius-lg);
  gap: 24px;
}
.hero__stat{display:flex; flex-direction:column; gap:6px;}
.hero__statNum{
  font-family: var(--display);
  font-size: clamp(34px, 3.6vw, 56px);
  line-height: 1;
  color: var(--fg-100);
}
.hero__statLab{font-family: var(--mono); font-size: 11px; letter-spacing:.1em; color: var(--fg-300); text-transform:uppercase;}

/* ============== MARQUEE ============== */
.marquee{
  margin: 40px 0 60px;
  border-top: 1px solid rgba(22,18,16,0.08);
  border-bottom: 1px solid rgba(22,18,16,0.08);
  overflow:hidden;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}
.marquee__track{
  display:inline-flex; align-items:center; gap:48px;
  padding: 22px 0;
  white-space: nowrap;
  animation: scroll 50s linear infinite;
  font-family: var(--display);
  font-size: 28px;
  letter-spacing:-0.01em;
  color: var(--fg-200);
}
.marquee__track span[aria-hidden]{
  font-family: var(--sans);
  font-size: 14px;
  color: var(--violet-2);
  opacity: .8;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.marquee__track{animation-duration: 50s;}

/* ============== SECTIONS ============== */
.section{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px var(--pad-x);
}
.section__head{margin-bottom: 56px; max-width: 56ch;}
.section__head--row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  max-width: none;
}
.section__title{
  font-family: var(--sans);
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 16px 0 18px;
  color: var(--fg-100);
  text-wrap: balance;
}
.section__title em{
  font-family: var(--display); font-style:italic; font-weight:400;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.section__lede{
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--fg-200);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}

/* ============== CAPABILITIES ============== */
.caps{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cap{
  padding: 36px 32px 30px;
  border-radius: var(--radius-lg);
  min-height: 260px;
  display:flex; flex-direction:column;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
.cap:hover{transform: translateY(-4px); border-color: var(--glass-stroke-strong);}
.cap__index{display:block; margin-bottom: 64px; color: var(--violet);}
.cap__title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing:-0.015em;
  margin: 0 0 12px;
  color: var(--fg-100);
}
.cap__text{
  color: var(--fg-200);
  font-size: 15.5px; line-height:1.55;
  margin: 0 0 22px;
  max-width: 50ch;
}
.cap__tags{
  list-style:none; padding:0; margin:auto 0 0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.cap__tags li{
  font-family: var(--mono); font-size: 11px; letter-spacing:.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22,18,16,0.10);
  color: var(--fg-200);
  background: rgba(255,255,255,0.6);
}

/* ============== WORK ============== */
.work{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
}
.work__card{
  position:relative;
  grid-column: span 3;
  grid-row: span 2;
  border-radius: var(--radius-lg);
  overflow:hidden;
  text-decoration:none;
  color: var(--fg-100);
  border: 1px solid rgba(22,18,16,0.08);
  background: #ffffff;
  display:flex; flex-direction:column;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
  isolation:isolate;
  box-shadow: 0 8px 24px -16px rgba(22,18,16,0.12);
}
.work__card--lg{
  grid-column: span 3;
  grid-row: span 3;
}
.work__card:hover{
  transform: translateY(-6px);
  border-color: rgba(74,110,140,0.35);
  box-shadow: 0 28px 60px -22px rgba(74,110,140,0.35);
}
.work__media{
  position:relative;
  flex:1;
  min-height: 280px;
  overflow:hidden;
}
.work__media--violet{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(42,38,34,0.45), transparent 60%),
    radial-gradient(100% 70% at 20% 80%, rgba(110,102,96,0.30), transparent 60%),
    linear-gradient(150deg, #1a0f3c, #2a1066 60%, #3d0b66);
}
.work__media--cyan{
  background:
    radial-gradient(70% 50% at 50% 80%, rgba(110,102,96,0.45), transparent 60%),
    radial-gradient(120% 70% at 20% 30%, rgba(110,102,96,0.30), transparent 60%),
    radial-gradient(80% 60% at 80% 30%, rgba(74,110,140,0.30), transparent 60%),
    linear-gradient(150deg, #042033, #0a1e5c 60%, #04183a);
}
.work__media--magenta{
  background:
    radial-gradient(80% 80% at 50% 60%, rgba(42,38,34,0.55), transparent 60%),
    linear-gradient(150deg, #3a0a2a, #66103f 70%, #2a061f);
}
.work__media--emerald{
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(110,102,96,0.40), transparent 60%),
    radial-gradient(100% 70% at 20% 80%, rgba(74,110,140,0.40), transparent 60%),
    linear-gradient(150deg, #0a1a3d, #1b0a4a 60%, #04181a);
}
.work__media--obsidian{
  background:
    radial-gradient(80% 80% at 70% 30%, rgba(114,152,184,0.4), transparent 60%),
    radial-gradient(60% 60% at 30% 80%, rgba(110,102,96,0.25), transparent 60%),
    linear-gradient(150deg, #07071a, #0a0a26 70%, #050511);
}
.work__noise{
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity:.6;
}
.work__label{
  position:absolute; top: 18px; left: 20px;
  color: rgba(217,211,242,.7);
  font-size: 11px;
  z-index:2;
}
.work__sphere{
  position:absolute; right: -40px; bottom: -40px;
  width: 320px; height: 320px; border-radius:50%; aspect-ratio: 1;
  background:
    radial-gradient(40% 40% at 32% 28%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(80% 80% at 50% 50%, #b5cce0 0%, #4a6e8c 40%, #0a1620 90%);
  box-shadow:
    inset -50px -40px 90px rgba(0,0,0,.55),
    inset 30px 20px 60px rgba(255,255,255,.06),
    0 30px 80px rgba(74,110,140,0.45);
  filter: saturate(1.15);
  transition: transform .8s ease;
}
.work__sphere::after{
  /* ring around the planet */
  content:""; position:absolute; inset: -12% 18% 0 -18%;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  transform: rotate(-22deg);
  aspect-ratio: 2.4;
  height: auto;
  filter: blur(.4px);
  mix-blend-mode: screen;
}
.work__card:hover .work__sphere{transform: translate(-10px,-10px) scale(1.04);}

.work__grid3d{
  /* legacy — unused now */
  display:none;
}

/* Isometric K8s pod stack */
.work__stack{
  position:absolute; inset: 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 10px;
  padding: 30px;
  transform: perspective(900px) rotateX(46deg) rotateZ(-26deg);
  transform-origin: 50% 60%;
}
.stack-cube{
  width: 78%;
  display:flex; align-items:center; gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(110,102,96,0.32), rgba(74,110,140,0.32));
  border: 1px solid rgba(114,152,184,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 14px 28px -10px rgba(110,102,96,0.55),
    0 6px 14px -6px rgba(74,110,140,0.4);
  backdrop-filter: blur(6px);
  transform: translateY(0px);
  animation: stack-float 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.6s);
  color: #fbf5e8;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.stack-cube span{color: #c0b8e0; min-width: 56px;}
.stack-cube b{margin-left:auto; color: #e6c98b; font-weight:500;}
.stack-cube i.ok{
  width: 8px; height: 8px; aspect-ratio:1; border-radius:50%;
  background: #5cffb2;
  box-shadow: 0 0 10px #5cffb2;
  flex-shrink: 0;
}
@keyframes stack-float{
  0%, 100%{transform: translateY(0); opacity: 1;}
  50%{transform: translateY(-6px); opacity: .85;}
}
.work__bottle{
  /* Circular vinyl-disc — round, not oval bottle */
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 280px; height: 280px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at center,
      transparent 0,
      transparent 14px,
      rgba(255,255,255,0.15) 14px,
      rgba(255,255,255,0.15) 15px,
      transparent 15px,
      transparent 100%),
    repeating-radial-gradient(circle at center,
      #2a061f 0,
      #2a061f 2px,
      #4a1031 2px,
      #4a1031 3px),
    linear-gradient(135deg, #2a2622, #0d0a08);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 30px 60px -10px rgba(42,38,34,0.45);
  animation: spin-vinyl 12s linear infinite;
}
.work__bottle::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 86px; height: 86px; aspect-ratio: 1; border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(135deg, #2a2622, #1a1714);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.4);
}
.work__bottle::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 12px; height: 12px; aspect-ratio: 1; border-radius:50%;
  background: #1a0114;
}
@keyframes spin-vinyl{ to{transform: translate(-50%,-50%) rotate(360deg);} }
.work__wave{
  /* Multi-color wireframe globe — not just green */
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: 320px; height: 320px; aspect-ratio: 1; border-radius:50%;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(110,102,96,0.18), transparent 70%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 30px 80px -20px rgba(74,110,140,0.45);
  animation: spin-globe 28s linear infinite;
}
.work__wave::before{
  /* meridian lines */
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent calc(50% - .5px),
      rgba(114,152,184,.35) calc(50% - .5px), rgba(114,152,184,.35) calc(50% + .5px),
      transparent calc(50% + .5px));
  mask: radial-gradient(circle, #000 60%, transparent 70%);
}
.work__wave::after{
  /* latitude ellipses */
  content:""; position:absolute; inset:0;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at center,
      transparent 0,
      transparent 22px,
      rgba(110,102,96,.45) 22px,
      rgba(110,102,96,.45) 23px),
    repeating-conic-gradient(from 0deg,
      rgba(26,23,20,.18) 0deg 4deg,
      transparent 4deg 30deg);
  mask: radial-gradient(circle, #000 0%, #000 64%, transparent 68%);
  mix-blend-mode: screen;
}
@keyframes spin-globe{ to{transform: translate(-50%,-50%) rotate(360deg);} }
.work__orbit{
  /* Optimized: a clean centerpiece planet with two crisp orbital rings + accent stars */
  position:absolute; inset:0;
}
.work__orbit::before, .work__orbit::after{
  content:""; position:absolute; left:50%; top:55%;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.work__orbit::before{
  /* outer ring */
  width: 88%; aspect-ratio: 2.4;
  border: 1.5px solid rgba(114,152,184,0.55);
  transform: translate(-50%,-50%) rotate(-22deg);
  box-shadow: 0 0 24px rgba(114,152,184,.25);
  animation: orbit-tilt 22s linear infinite;
}
.work__orbit::after{
  /* inner ring */
  width: 62%; aspect-ratio: 2;
  border: 1.5px solid rgba(110,102,96,0.7);
  transform: translate(-50%,-50%) rotate(20deg);
  box-shadow: 0 0 20px rgba(110,102,96,.3);
  animation: orbit-tilt 16s linear infinite reverse;
}
.work__orbit > i{display:none;}
@keyframes orbit-tilt{
  0%{transform: translate(-50%,-50%) rotate(0deg);}
  100%{transform: translate(-50%,-50%) rotate(360deg);}
}
/* Centerpiece planet + scattered stars */
.work__media--obsidian::before{
  content:""; position:absolute; left:50%; top:55%; transform: translate(-50%,-50%);
  width: 140px; height: 140px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(40% 40% at 32% 28%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(80% 80% at 50% 50%, #b5cce0 0%, #2a4a6a 40%, #0f0c0a 90%);
  box-shadow:
    inset -20px -16px 36px rgba(0,0,0,.55),
    0 24px 60px rgba(74,110,140,0.55);
  z-index: 1;
}
.work__media--obsidian::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 16%, rgba(114,152,184,.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 80%, rgba(110,102,96,.9), transparent 50%),
    radial-gradient(2px 2px at 86% 78%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1px 1px at 44% 14%, rgba(26,23,20,.9), transparent 50%);
  pointer-events:none;
}
.work__meta{
  padding: 22px 24px 26px;
  border-top: 1px solid rgba(22,18,16,0.08);
  background: #ffffff;
}
.work__client{
  display:flex; gap:10px; align-items:center;
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform: uppercase;
  color: var(--fg-300);
  margin-bottom: 8px;
}
.work__client span:first-child{color: var(--fg-100);}
.work__title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--fg-100);
  max-width: 30ch;
}

/* ============== MANIFESTO ============== */
.manifesto{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px var(--pad-x);
  border-top: 1px solid rgba(22,18,16,0.08);
  border-bottom: 1px solid rgba(22,18,16,0.08);
}
.manifesto__text{
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-100);
  max-width: 22ch;
  margin: 0;
}
.manifesto__text em{
  font-family: var(--display); font-style:italic; font-weight:400;
}
.manifesto__sign{
  display:block;
  margin-top: 32px;
  color: var(--fg-300);
}

/* ============== PROCESS ============== */
.process{
  list-style:none; padding:0; margin:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(22,18,16,0.10);
  border-left: 1px solid rgba(22,18,16,0.10);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.process__step{
  padding: 36px 30px 40px;
  border-right: 1px solid rgba(22,18,16,0.10);
  border-bottom: 1px solid rgba(22,18,16,0.10);
  position:relative;
  transition: background .35s ease;
}
.process__step:hover{background: rgba(74,110,140,0.05);}
.process__num{
  display:block;
  color: var(--violet);
  margin-bottom: 70px;
}
.process__step h3{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 12px;
  color: var(--fg-100);
}
.process__step p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-200);
  margin: 0;
  max-width: 36ch;
}

/* ============== QUOTES ============== */
.quotes{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.quote{
  padding: 32px 28px;
  border-radius: var(--radius-lg);
}
.quote blockquote{margin:0;}
.quote p{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.35;
  color: var(--fg-100);
  margin: 0 0 28px;
}
.quote figcaption{display:flex; flex-direction:column; gap:2px;}
.quote__name{font-weight:500; font-size:14px; color: var(--fg-100);}
.quote__role{font-family: var(--mono); font-size:11px; color: var(--fg-300); letter-spacing:.06em;}

/* ============== JOURNAL ============== */
.journal{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.entry{
  display:flex; flex-direction:column;
  text-decoration:none;
  padding: 30px 28px 28px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(22,18,16,0.08);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
  color: var(--fg-100);
  min-height: 240px;
}
.entry:hover{
  transform: translateY(-4px);
  border-color: rgba(74,110,140,0.35);
  background: rgba(255,255,255,0.9);
}
.entry__date{color: var(--violet); margin-bottom: 26px; display:block;}
.entry__title{
  font-family: var(--sans);
  font-weight:500;
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--fg-100);
  letter-spacing: -0.01em;
}
.entry__excerpt{
  color: var(--fg-200);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.entry__more{
  margin-top:auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--fg-200);
  display:inline-flex; align-items:center; gap:6px;
}

/* ============== CTA ============== */
.cta{
  max-width: var(--maxw);
  margin: 80px auto 80px;
  padding: 100px var(--pad-x) 120px;
  text-align:center;
  position:relative;
  isolation: isolate;
  border-top: 1px solid rgba(22,18,16,0.08);
}
.cta__glow{
  position:absolute; inset: 0; z-index:-1;
  background:
    radial-gradient(700px 380px at 50% 30%, rgba(74,110,140,0.22), transparent 60%),
    radial-gradient(440px 260px at 30% 70%, rgba(26,23,20,0.14), transparent 60%),
    radial-gradient(540px 320px at 75% 80%, rgba(110,102,96,0.14), transparent 60%);
  filter: blur(10px);
  opacity:.9;
}
.cta__title{
  font-family: var(--sans);
  font-weight:500;
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 14px auto 22px;
  max-width: 22ch;
  color: var(--fg-100);
  text-wrap: balance;
}
.cta__title em{
  font-family: var(--display); font-style:italic; font-weight:400;
}
.cta__sub{
  max-width: 52ch;
  margin: 0 auto 44px;
  color: var(--fg-200);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height:1.55;
}
.cta__row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap;}

/* ============== FOOTER ============== */
.foot{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px var(--pad-x) 40px;
  border-top: 1px solid rgba(22,18,16,0.08);
  overflow: hidden;
}
.foot__top{
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 60px;
  align-items: flex-start;
}
.foot__brand{display:flex; flex-direction:column; gap:18px;}
.foot__logo{width:46px; height:46px; border-radius:12px; object-fit:cover; background:#fff;
  box-shadow: inset 0 0 0 1px rgba(22,18,16,0.12), 0 6px 18px -4px rgba(74,110,140,0.30);
}
.foot__line{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-200);
  max-width: 38ch;
  margin: 0;
}
.foot__cols{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.foot__col{display:flex; flex-direction:column; gap:10px;}
.foot__col h4{
  margin: 0 0 10px; color: var(--fg-300);
}
.foot__col a{
  text-decoration:none;
  color: var(--fg-200);
  font-size: 14.5px;
  transition: color .2s ease;
}
.foot__col a:hover{color: var(--fg-100);}

.foot__giant{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(64px, 17vw, 260px);
  line-height: .85;
  letter-spacing: -0.045em;
  margin: 70px 0 30px;
  padding: 0 4px;
  background: linear-gradient(180deg, rgba(74,110,140,0.55) 0%, rgba(74,110,140,0.06) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-align:center;
  user-select:none;
  white-space: nowrap;
  width: 100%;
  display:block;
}

.foot__bottom{
  display:flex; justify-content:space-between; align-items:center; gap: 24px;
  flex-wrap:wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(22,18,16,0.08);
}

/* ============== Responsive ============== */
@media (max-width: 980px){
  .nav__links{display:none;}
  .nav__status{display:none;}
  .hero__strip{grid-template-columns: repeat(2,1fr); gap:24px;}
  .caps{grid-template-columns: 1fr;}
  .work{grid-template-columns: 1fr; grid-auto-rows: auto;}
  .work__card, .work__card--lg{grid-column: span 1; grid-row: auto;}
  .work__media{min-height: 280px;}
  .process{grid-template-columns: 1fr;}
  .quotes, .journal{grid-template-columns: 1fr;}
  .foot__top{grid-template-columns: 1fr;}
  .foot__cols{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 560px){
  .hero__strip{grid-template-columns: 1fr;}
  .foot__cols{grid-template-columns: 1fr;}
  .section__head--row{flex-direction:column; align-items:flex-start;}
}

/* ============== Network canvas ============== */
.network{
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: .5;
}

/* ============== Nav tag ============== */
.nav__tag{
  margin-left: 6px;
  color: var(--fg-300);
  border-left: 1px solid rgba(22,18,16,0.10);
  padding-left: 10px;
}

/* ============== Hero — IT layout ============== */
.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: start;        /* both columns hug the top — no center-drop for shorter column */
  padding-top: 8px;
}
.hero__col{display:flex; flex-direction:column;}

.hero__sub strong{
  color: var(--fg-100);
  font-weight: 500;
}

.hero__chips{
  list-style:none; padding:0; margin: 40px 0 0;
  display:flex; flex-wrap:wrap; gap: 8px;
}
.hero__chips li{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22,18,16,0.10);
  background: rgba(255,255,255,0.7);
  color: var(--fg-200);
  display:inline-flex; align-items:center; gap:8px;
  backdrop-filter: blur(8px);
}
.chip-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  box-shadow: 0 0 8px var(--violet);
}

/* ============== IDE panel — dark surface on white ============== */
.ide{
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: rotate(.5deg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 460px;
  display:flex; flex-direction:column;
  background: #07061a !important;
  border: 1px solid rgba(22,18,16,0.18) !important;
  box-shadow:
    0 40px 80px -20px rgba(22,18,16,0.35),
    inset 0 1px 0 rgba(114,152,184,0.3) !important;
  color: #e8dfc8;
}
.ide::before, .ide::after{display:none !important;}
.ide__top{
  display:flex; align-items:center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(114,152,184,.18);
  background: rgba(0,0,0,.3);
}
.ide__dots{display:inline-flex; gap:6px;}
.ide__dots i{
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c, #555);
  display:inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.ide__file{flex:1; text-align:center; color: var(--fg-300); font-size: 11px;}
.ide__live{color: var(--emerald); font-size: 10px; display:inline-flex; align-items:center; gap:6px;}

.ide__body{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  flex:1;
  min-height: 320px;
}
.ide__code{
  margin: 0;
  padding: 20px 18px 22px 56px;
  color: #c0b8e0;
  font-size: 12.5px;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(255,255,255,0.02);
  counter-reset: ln;
}
.ide__code::before{
  /* line numbers gutter */
  content:"";
  position:absolute; left: 0; top:0; bottom:0; width: 40px;
  background: rgba(0,0,0,.3);
  border-right: 1px solid rgba(114,152,184,.12);
}
.tok-key{color: #7298b8;}
.tok-str{color: #5cffb2;}
.tok-fn{color: #6e6660;}
.tok-com{color: var(--fg-400); font-style: italic;}
.tok-num{color: #ffc25c;}
.tok-tag{color: #2a2622;}
.caret{
  color: var(--violet-2);
  animation: blink 1s steps(1) infinite;
  font-weight: 600;
}
@keyframes blink{ 50%{opacity:0} }

.ide__panel{
  border-left: 1px solid rgba(114,152,184,.18);
  background: rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  min-height: 0;
}
.ide__panelHead{
  padding: 10px 14px;
  color: #8a85a0;
  border-bottom: 1px solid rgba(114,152,184,.12);
  font-size: 10px;
}
.ide__log{
  padding: 10px 14px;
  font-size: 11.5px;
  color: #c0b8e0;
  flex: 1;
  overflow: hidden;
}
.ide__log .ln{display:block; padding: 2px 0;}
.ide__log .ok{color: #5cffb2;}
.ide__log .warn{color: #ffc25c;}
.ide__log .err{color: #ff7090;}
.ide__log .ts{color: #6b6685; margin-right: 6px;}

.ide__foot{
  display:flex; align-items:center; gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid rgba(114,152,184,.18);
  background: rgba(0,0,0,.3);
  font-size: 10.5px;
  color: #8a85a0;
  flex-wrap: wrap;
}
.ide__foot .ok{color: #5cffb2; margin: 0 4px;}

@media (max-width: 1100px){
  .hero__grid{grid-template-columns: 1fr; gap: 40px;}
  .ide{transform: none;}
}

/* ============== Marquee — double row ============== */
.marquee--double .marquee__track{
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-100);
  font-weight: 500;
  padding: 18px 0;
}
.marquee--double{padding: 6px 0;}
.marquee--double .marquee__track--rev{
  animation-direction: reverse;
  animation-duration: 60s;
  color: var(--violet);
  font-family: var(--display);
  font-style: italic;
  text-transform: none;
  font-size: 26px;
}
.marquee--double .marquee__track span[aria-hidden]{
  color: var(--fg-400);
  font-family: var(--sans);
  font-size: 14px;
}

/* ============== SERVICES ============== */
.svcs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.svc{
  padding: 28px 24px 26px;
  border-radius: var(--radius-md);
  position: relative;
  display:flex; flex-direction:column; gap: 6px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
  min-height: 320px;
  transform-style: preserve-3d;
}
.svc:hover{border-color: var(--glass-stroke-strong);}
.svc__icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(74,110,140,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(252,249,243,.85));
  border: 1px solid rgba(22,18,16,.10);
  display:flex; align-items:center; justify-content:center;
  color: var(--violet);
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 22px -10px rgba(74,110,140,.30);
}
.svc__index{
  position:absolute; top: 24px; right: 24px;
  color: var(--fg-400);
}
.svc__title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  color: var(--fg-100);
}
.svc__text{
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-200);
  margin: 0 0 18px;
  flex: 1;
}
.svc__stack{
  list-style: none; padding: 0; margin: 0;
  display:flex; flex-wrap:wrap; gap: 6px;
}
.svc__stack li{
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(22,18,16,.10);
  color: var(--fg-200);
  background: rgba(255,255,255,.6);
}
.svc__arrow{
  position:absolute; bottom: 22px; right: 24px;
  color: var(--violet);
  font-size: 22px;
  opacity: .4;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.svc:hover .svc__arrow{opacity: 1; transform: translate(4px,-4px);}

/* ============== 3D Tilt ============== */
.tilt{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.tilt::after{
  /* mouse-tracked spotlight */
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(220px 220px at var(--mx,50%) var(--my,50%), rgba(74,110,140,.14), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
  z-index: 1;
}
.tilt:hover::after{opacity: 1;}

/* ============== SPLIT — device mockup ============== */
.split{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 100px var(--pad-x);
}
.split__inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split__title{
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-100);
  margin: 14px 0 22px;
  text-wrap: balance;
}
.split__title em{font-family: var(--display); font-style:italic; font-weight:400;}
.split__lede{
  color: var(--fg-200);
  line-height: 1.55;
  margin: 0 0 28px;
  font-size: clamp(15px,1.1vw,17px);
  max-width: 50ch;
}
.split__list{
  list-style:none; padding:0; margin: 0 0 36px;
  display:flex; flex-direction:column; gap: 10px;
}
.split__list li{
  font-size: 14.5px;
  color: var(--fg-100);
  display:flex; align-items:center; gap: 12px;
}
.check{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px var(--violet);
}
.check::before{
  content:""; position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.5l2 2 4-5' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>") center / 10px no-repeat;
}

/* Device */
.device{
  position: relative;
  height: 620px;
  display:flex; align-items:center; justify-content:center;
  perspective: 1400px;
}
.device__halo{
  position:absolute; inset: -20%;
  background:
    radial-gradient(45% 45% at 50% 50%, rgba(74,110,140,.30), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}
.device__frame{
  width: 320px;
  height: 600px;
  border-radius: 48px;
  padding: 14px;
  background:
    linear-gradient(160deg, #1a1733, #0a0817 70%);
  border: 1px solid rgba(114,152,184,.28);
  box-shadow:
    inset 0 1px 0 rgba(217,211,242,.18),
    inset 0 -2px 0 rgba(0,0,0,.7),
    0 40px 80px -20px rgba(0,0,0,.8),
    0 0 0 1px rgba(114,152,184,.12);
  position: relative;
  transform: rotateY(-12deg) rotateX(6deg) rotate(-2deg);
  animation: float-y 6s ease-in-out infinite alternate;
}
@keyframes float-y{
  to{transform: rotateY(-10deg) rotateX(4deg) rotate(-2deg) translateY(-14px);}
}
.device__notch{
  position:absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; border-radius: 16px;
  background: #02020a;
  border: 1px solid rgba(114,152,184,.12);
  z-index: 3;
}
.device__screen{
  width: 100%; height: 100%;
  border-radius: 36px;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(74,110,140,.35), transparent 60%),
    linear-gradient(180deg, #0a0820 0%, #050410 100%);
  border: 1px solid rgba(114,152,184,.12);
  overflow: hidden;
  position: relative;
  padding: 56px 18px 22px;
}

.dash{display:flex; flex-direction:column; gap: 14px; height: 100%;}
.dash__top{display:flex; align-items:center; justify-content:space-between;}
.dash__title{font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--fg-100);}
.dash__chip{
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(92,255,178,.15);
  color: var(--emerald);
  border: 1px solid rgba(92,255,178,.25);
}
.dash__chart{
  width: 100%;
  height: 80px;
  border-radius: 12px;
  background: rgba(20,19,42,.35);
  border: 1px solid rgba(114,152,184,.12);
  padding: 6px;
}
.chart-line{
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 3.2s cubic-bezier(.2,.8,.2,1) forwards .4s;
}
@keyframes draw{ to{stroke-dashoffset: 0;} }
.chart-pulse{
  filter: drop-shadow(0 0 8px #fff);
  animation: chartPulse 1.8s ease-in-out infinite;
}
@keyframes chartPulse{
  0%, 100%{r: 4; opacity: 1;}
  50%{r: 6; opacity: .7;}
}

.dash__grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.dash__cell{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20,19,42,.4);
  border: 1px solid rgba(114,152,184,.12);
  display:flex; flex-direction:column; gap: 4px;
}
.dash__cell span{color: var(--fg-400); font-size: 9.5px;}
.dash__cell strong{font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--fg-100);}

.dash__bars{
  display:flex; align-items:flex-end; gap: 4px;
  height: 60px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(20,19,42,.4);
  border: 1px solid rgba(114,152,184,.12);
}
.dash__bars i{
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--violet-2), var(--violet));
  display: block;
  animation: barpulse 4s ease-in-out infinite;
}
.dash__bars i:nth-child(2n){animation-delay: .3s; background: var(--cyan);}
.dash__bars i:nth-child(3n){animation-delay: .6s; background: linear-gradient(180deg, var(--cyan), #2080a0);}
@keyframes barpulse{
  0%, 100%{transform: scaleY(1); transform-origin: bottom;}
  50%{transform: scaleY(.78); transform-origin: bottom;}
}

/* Floating cards around device — on white */
.float-card{
  position:absolute;
  padding: 14px 16px;
  border-radius: 16px;
  min-width: 160px;
  display:flex; flex-direction:column; gap: 4px;
  z-index: 2;
  animation: float-card 7s ease-in-out infinite alternate;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(22,18,16,0.08) !important;
  box-shadow: 0 18px 40px -20px rgba(22,18,16,0.18) !important;
}
.float-card::before, .float-card::after{display:none !important;}
.float-card span{font-size: 10px; color: var(--fg-300);}
.float-card strong{font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--fg-100);}
.float-card .ok-line{
  height: 3px; width: 100%;
  background: var(--violet);
  border-radius: 2px;
  margin-top: 4px;
}
.ok-line--magenta{background: var(--violet-2) !important;}
.ok-line--cyan{background: linear-gradient(90deg, var(--cyan), var(--emerald)) !important;}

.float-card--a{top: 18%; left: -8%; animation-delay: 0s;}
.float-card--b{top: 56%; right: -10%; animation-delay: -2s;}
.float-card--c{bottom: 8%; left: -4%; animation-delay: -4s;}

@keyframes float-card{
  to{transform: translateY(-12px);}
}

@media (max-width: 980px){
  .split__inner{grid-template-columns: 1fr; gap: 60px;}
  .device{height: 540px;}
  .svcs{grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 560px){
  .svcs{grid-template-columns: 1fr;}
}

/* ============== Pricing ============== */
.prices{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.price{
  padding: 36px 32px 32px;
  border-radius: var(--radius-lg);
  position: relative;
  display:flex; flex-direction:column;
  min-height: 460px;
}
.price__badge{
  position:absolute; top: 18px; right: 18px;
  font-size: 10px; letter-spacing: .12em;
  padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  color: #ffffff;
  font-weight: 600;
}
.price--featured{
  border-color: rgba(74,110,140,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 60px -20px rgba(74,110,140,.35);
}
.price__tier{color: var(--violet); margin-bottom: 6px; display:block;}
.price__head h3{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.015em;
  margin: 0 0 22px;
  color: var(--fg-100);
}
.price__amount{
  display:flex; align-items:baseline; gap: 8px;
  margin-bottom: 18px;
}
.price__from{color: var(--fg-300);}
.price__num{
  font-family: var(--display);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  background: linear-gradient(135deg, var(--violet) 0%, #2a4a6a 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.price__per{color: var(--fg-300);}
.price__desc{
  color: var(--fg-200);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 22px;
}
.price__feat{
  list-style:none; padding: 0; margin: 0 0 30px;
  display:flex; flex-direction:column; gap: 10px;
}
.price__feat li{
  display:flex; align-items:center; gap: 10px;
  color: var(--fg-100); font-size: 14px;
}
.btn--full{width: 100%; justify-content: center; margin-top: auto;}

@media (max-width: 980px){
  .prices{grid-template-columns: 1fr;}
}

/* ============== FAQ ============== */
.faq{
  display:flex; flex-direction:column; gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.faq__item{
  padding: 22px 26px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.faq__item summary{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  color: var(--fg-100);
  list-style: none;
  display:flex; align-items:center; justify-content:space-between;
  cursor: pointer;
  letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content: "+";
  font-family: var(--mono);
  font-size: 24px;
  color: var(--violet);
  transition: transform .3s ease;
  font-weight: 300;
}
.faq__item[open] summary::after{
  transform: rotate(45deg);
}
.faq__item p{
  color: var(--fg-200);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 80ch;
}

/* ============== Reveal on scroll ============== */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.in{
  opacity: 1;
  transform: none;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============== Hide scrollbar (page stays scrollable) ============== */
html{
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
html::-webkit-scrollbar{           /* Chromium, Safari */
  width: 0;
  height: 0;
  display: none;
}
body{ overflow-y: scroll; }        /* preserve scroll on short pages so layout doesn't jump */

/* ============================================================
   Page-load loader · galaxy orbital (cinnabar / cobalt / brass)
   ============================================================ */
.loader{
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center;
  background:
    radial-gradient(70% 70% at 50% 38%, #fefcf8 0%, #f7f3ea 55%, #ecdfc6 100%);
  opacity: 1;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .9s;
  will-change: opacity;
  contain: strict;            /* strongest containment — paint, layout, size, style scoped */
}
.loader::before{                /* faint nebula on top of the bone bg — static, no animation */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(55% 42% at 82% 18%, rgba(74,110,140,.10), transparent 62%),
    radial-gradient(45% 32% at 16% 82%, rgba(26,23,20,.08), transparent 62%),
    radial-gradient(60% 50% at 50% 110%, rgba(110,102,96,.08), transparent 70%);
  pointer-events:none;
  /* dropped the nebula-drift animation on the loader — was animating during
     the loader's lifetime + competing with the rings for compositing budget */
}
.loader--done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader--lottie .loader__galaxy{ display:none; }   /* hide CSS galaxy when Lottie is in use */

.loader__galaxy{
  width: clamp(240px, 34vw, 380px);
  height: clamp(240px, 34vw, 380px);
  /* drop-shadow on a rotating element is one of the most expensive CSS ops
     — moved to a static box-shadow on .loader__galaxy-shadow below if needed.
     For now, the SVG glow filter alone gives enough depth. */
  animation: loader-entry 1.1s cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity;
  contain: layout paint style;
}
.loader__ring{
  transform-origin: 160px 160px;
  transform-box: fill-box;
  will-change: transform;
  backface-visibility: hidden;
  /* SVG <filter> stays inside the ring only — never applied via outer drop-shadow */
}
.loader__ring--slow{ animation: loader-spin 24s linear infinite; }
.loader__ring--mid { animation: loader-spin 13s linear infinite reverse; }
.loader__ring--fast{ animation: loader-spin 6.5s linear infinite; }
@keyframes loader-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@keyframes loader-entry{
  0%   { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}

.loader__lottie{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.loader__lottie lottie-player{ width: clamp(260px, 36vw, 400px); height: clamp(260px, 36vw, 400px); }

.loader__brand{
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; gap: 8px;
  pointer-events:none;
  animation: loader-brand-in 1.4s cubic-bezier(.22,.61,.36,1) .35s both;
}
@keyframes loader-brand-in{
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); letter-spacing: .55em; }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
.loader__monogram{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(56px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--violet);     /* solid forest, no rainbow */
  /* Removed pulse animation — was causing 1px reflows + filter recompute every frame.
     The rotating rings already provide motion; the K stays stable, which actually
     reads as more confident anyway. */
  will-change: auto;
}
.loader__wordmark{
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--fg-300);
  margin-top: 4px;
}
.loader__tag{
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-400);
  margin-top: 6px;
  opacity: .9;
}
@keyframes loader-pulse{
  0%, 100%{ transform: scale(1);     filter: drop-shadow(0 0 0   rgba(74,110,140,0)); }
  50%     { transform: scale(1.035); filter: drop-shadow(0 0 18px rgba(74,110,140,.40)); }
}

/* ============================================================
   Galaxy touches · subtle, never overwhelm the editorial feel
   ============================================================ */
.starfield{ display: block !important; opacity: .14; }     /* enable warm-cream starfield */
.starfield .star-layer{ opacity: .8; }

.nebula{
  position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background:
    radial-gradient(50% 38% at 88% 92%, rgba(31, 58, 95, 0.10), transparent 65%),
    radial-gradient(45% 35% at 8% 6%,   rgba(193, 74, 31, 0.08), transparent 65%),
    radial-gradient(60% 50% at 50% 110%, rgba(202, 162, 86, 0.08), transparent 70%);
  animation: nebula-drift 32s ease-in-out infinite alternate;
}
@keyframes nebula-drift{
  0%   { transform: translate3d(0,0,0)    scale(1); }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(1%,-1%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  .loader__ring--slow,
  .loader__ring--mid,
  .loader__ring--fast,
  .loader__monogram,
  .loader__galaxy,
  .loader__brand,
  .loader::before,
  .nebula{ animation: none !important; }
}

/* ============================================================
   Premium polish — refined typography, hairlines, lift, focus
   ============================================================ */

/* Crisper type rendering */
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body{
  font-feature-settings: "ss01","ss02","cv11","kern","liga","calt";
  font-kerning: normal;
}

/* Service card — softer lift + warm-hairline top accent on hover */
.svc{
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    border-color .4s ease,
    box-shadow .55s cubic-bezier(.22,.61,.36,1) !important;
}
.svc:hover{
  transform: translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 38px 60px -28px rgba(74,110,140,0.32),
    0 10px 24px -12px rgba(22,18,16,0.10);
}
.svc::after{                /* gold hairline above the card on hover */
  content: ""; position: absolute; top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110,102,96,.55), transparent);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.svc:hover::after{ opacity: 1; }

/* Work cards — match the same lift register */
.work__card{
  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .6s cubic-bezier(.22,.61,.36,1) !important;
}
.work__card:hover{
  transform: translateY(-6px);
}

/* Price cards — gentle scale on hover, refined shadow */
.price{
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    border-color .4s ease;
}
.price:not(.price--featured):hover{
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 32px 56px -24px rgba(74,110,140,.28);
}

/* Refined focus rings — cinnabar, with offset (premium accessibility) */
:focus{ outline: none; }
:focus-visible{
  outline: 2px solid rgba(74,110,140,.65);
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .15s ease;
}
.btn:focus-visible,
.nav__brand:focus-visible{
  outline-offset: 5px;
}

/* Subtle warm selection highlight */
::selection{
  background: rgba(74,110,140,.20);
  color: var(--fg-100);
}

/* Smoother native smooth-scroll feel */
html{ scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Section-head hairline divider above the title (premium editorial cue) */
.section__head .section__title::before{
  content: "";
  display: block;
  width: 42px; height: 1px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(74,110,140,.7), rgba(110,102,96,.0));
}

/* Glass — slightly stronger frost + warmer inner highlight */
.glass{
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.glass::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 22%),
    linear-gradient(0deg, rgba(110,102,96,.04) 0%, transparent 30%);
  mix-blend-mode: screen;
}

/* Error pages (404 / 500) */
.errorpage{
  min-height: 100vh;
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 96px var(--pad-x) 96px;
}
.errorpage__inner{
  max-width: 640px;
  text-align: center;
  display: grid; gap: 18px; justify-items: center;
}
.errorpage__title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--fg-100);
}
.errorpage__title .grad{ font-style: italic; }
.errorpage__sub{
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-300);
  margin: 0 0 8px;
  max-width: 520px;
}
.errorpage__row{
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}

/* Buttons — refined active-press feel */
.btn{
  transition:
    transform .25s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background-color .25s ease,
    color .25s ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }


/* ============================================================
   Accessibility · skip-to-content link
   ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--fg-100);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-radius: 10px;
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid rgba(74,110,140,.65);
  outline-offset: 3px;
}

/* ============================================================
   Mobile hamburger (hidden on desktop, shown <980px)
   ============================================================ */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(22,18,16,0.10);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background .2s ease, border-color .2s ease;
}
.nav__toggle:hover { background: rgba(74,110,140,0.06); }
.nav__toggle:focus-visible {
  outline: 2px solid rgba(74,110,140,.65);
  outline-offset: 2px;
}
.nav__toggle-bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg-100);
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav__toggle { display: inline-flex; }
  .nav__tag { display: none; }
  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 14px;
    gap: 2px;
    background: rgba(252,249,243,0.96);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    border: 1px solid rgba(22,18,16,0.08);
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(22,18,16,0.20);
    animation: nav-drop .25s cubic-bezier(.2,.8,.2,1);
  }
  .nav__links.is-open a {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
  }
}

@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle-bar { transition: none; }
  .nav__links.is-open { animation: none; }
}

/* ============================================================
   MOBILE RESPONSIVENESS PASS — iPhone 16 Pro Max and similar
   Target viewport: 375–560px. Fixes audit findings:
   - decorative elements escaping viewport (orbit, cursor-glow)
   - IDE panel + code overflow
   - footer giant text overflow
   - cards with too much padding/height for narrow screens
   - vertical rhythm too generous on small screens
   ============================================================ */

/* Defense-in-depth: html-level horizontal clip (body has overflow-x:hidden but
   html-level clip is safer for sticky descendants on iOS Safari). */
html { overflow-x: clip; }

/* Contain decorations within their section bounds so they don't expand body width
   on narrow viewports. Without these clips, .hero__aura (inset: -10% -5%) pushed
   body's scrollWidth past 440px on iPhone, causing right-edge text truncation.
   Mobile-only — on desktop the orbit ring intentionally bleeds past .hero. */
@media (max-width: 980px) {
  .hero,
  .section,
  .split,
  .cta,
  .manifesto,
  .marquee {
    overflow-x: clip;
  }
}

/* ---- Tablet and below (≤980px) ---- */
@media (max-width: 980px) {
  /* IDE panel goes full-width once the hero grid collapses — shrink chrome */
  .ide { min-height: auto; }
  .ide__code {
    padding: 18px 14px 18px 40px;
    font-size: 12px;
    line-height: 1.55;
  }
  .ide__panel { padding: 14px; }
  .ide__log { font-size: 11px; }

  /* Cursor glow halo should never escape narrow viewports */
  .cursor-glow { width: 360px; height: 360px; }

  /* Hero decorative orbit ring (720px) — pull off-screen entirely */
  .hero__orbit { display: none; }

  /* Hero stat strip readability */
  .hero__strip { padding: 20px; }
}

/* ---- Small mobile (≤560px) — iPhone 16 Pro Max sits here at 440px ---- */
@media (max-width: 560px) {
  /* --- Tighter vertical rhythm on every section --- */
  .section--services,
  .section--work,
  .section--process,
  .section--pricing,
  .section--studio,
  .section--faq { padding: 60px var(--pad-x); }
  .split { padding: 60px var(--pad-x); }
  .cta { padding: 70px var(--pad-x) 80px; }
  .manifesto { padding: 60px var(--pad-x); }
  .hero { padding: 12px var(--pad-x) 56px; }

  /* --- Hero --- */
  .hero__title { font-size: clamp(36px, 11vw, 72px); }
  .hero__sub   { font-size: 15px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .hero__chips { gap: 6px; }
  .hero__chips li { font-size: 12px; padding: 6px 10px; }
  .hero__strip { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .hero__statNum { font-size: 32px; }

  /* --- IDE panel further trim --- */
  .ide__top { padding: 10px 14px; }
  .ide__file, .ide__live { font-size: 10px; }
  .ide__code {
    padding: 14px 10px 14px 32px;
    font-size: 10.5px;
    line-height: 1.6;
  }
  .ide__foot { padding: 10px 14px; gap: 10px; flex-wrap: wrap; font-size: 10px; }

  /* --- Section headers --- */
  .section__title { font-size: clamp(28px, 8vw, 56px); }
  .section__lede  { font-size: 15px; }

  /* --- Service cards --- */
  .svc { padding: 22px 18px; min-height: auto; }
  .svc__icon { width: 44px; height: 44px; }
  .svc__icon svg { width: 30px; height: 30px; }
  .svc__title { font-size: 17px; }
  .svc__text  { font-size: 13.5px; }
  .svc__stack li { font-size: 10.5px; }

  /* --- Work cards --- */
  .work__media { min-height: 180px; }
  .work__title { font-size: 17px; }
  .work__meta  { padding: 16px 18px 20px; }

  /* --- Split section (idea → production) --- */
  .split__title { font-size: clamp(32px, 9vw, 64px); }
  .split__lede  { font-size: 15px; }
  .device { height: 460px; }
  .device__frame { width: 280px; height: 460px; }
  .device__halo { inset: -8%; }
  /* Hide the floating cards — they sit at negative offsets and clutter on mobile */
  .float-card { display: none; }

  /* --- Process steps --- */
  .process__step { padding: 26px 20px; }
  .process__step h3 { font-size: 24px; }
  .process__step p  { font-size: 14px; }
  .process__num { font-size: 13px; }

  /* --- Pricing cards --- */
  .price { padding: 28px 22px; min-height: auto; }
  .price__num { font-size: 44px; }
  .price__desc { font-size: 14px; }
  .price__feat li { font-size: 13.5px; }

  /* --- Quotes --- */
  .quote { padding: 24px 20px; }
  .quote blockquote p { font-size: 17px; line-height: 1.5; }

  /* --- FAQ --- */
  .faq__item { padding: 16px 20px; }
  .faq__item summary { font-size: 16px; }
  .faq__item p { font-size: 14px; }

  /* --- Manifesto --- */
  .manifesto__text { font-size: clamp(20px, 5.6vw, 36px); line-height: 1.35; }

  /* --- CTA --- */
  .cta__title { font-size: clamp(32px, 9vw, 64px); }
  .cta__sub   { font-size: 15px; }
  .cta__row { flex-direction: column; align-items: stretch; }
  .cta__row .btn { justify-content: center; }

  /* --- Footer --- */
  .foot { padding: 60px var(--pad-x) 36px; }
  .foot__line { font-size: 14px; }
  .foot__col h4 { font-size: 12px; }
  .foot__col a  { font-size: 13.5px; }
  .foot__giant {
    font-size: clamp(44px, 14vw, 120px);
    line-height: .9;
    word-break: break-word;
    letter-spacing: -.04em;
  }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11px; }

  /* --- Marquee — keep the speed comfortable on small screens --- */
  .marquee__track { gap: 14px; font-size: 14px; }

  /* --- Nav — slight pill tightening so brand + hamburger + CTA all fit ---- */
  .nav { padding: 10px 10px 10px 14px; gap: 10px; }
  .nav__wordmark { font-size: 14px; }
  .nav__brand .nav__logo { width: 26px; height: 26px; }

  /* --- Buttons — match touch target rules established in audit --- */
  .btn { padding: 12px 18px; }
  .btn--lg { padding: 14px 22px; font-size: 14px; }
}