/* ============================================================
   ISKRA — technological / energetic digital-studio system.

   Type: Unbounded (bold geometric display — full Cyrillic, unlike
   Space Grotesk which quietly has none and was the real reason an
   earlier pass "looked cheap") + Manrope (UI/body) + JetBrains Mono
   (labels, numbers, system chrome).

   Color has three jobs, used on purpose:
     DARK   — the default register, sophistication
     IVORY  — one breathing-space interruption (Voices only)
     ORANGE — brand energy: a moving band, a solid panel, hover-fill
              tiles, a title card, the whole contact moment. Not a
              detail — a structural color used at full strength in
              specific places.

   Every section has its own composition; nothing repeats the
   label→heading→list template twice. Motion: cursor glow + magnetic
   buttons in the hero, one load-time headline ignite, hover-fills
   that are pure color transitions (cheap), a clip-path reveal on
   the case image, and a thick orange scroll-progress bar. Native
   vertical scroll is never touched by any of it.
   ============================================================ */
:root{
  --bg:#0a0a0b;
  --text:#f5f3ee;
  --muted:#8f8b86;
  --line:rgba(245,243,238,.12);
  --ivory:#f2ebdd;
  --ink:#141210;
  --muted-ink:#6d6860;
  --line-ink:rgba(20,18,16,.14);
  --orange:#ff5a1f;
  --orange-deep:#d9440e;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
::selection{background:var(--orange); color:#0a0a0b;}
body{background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
ul,ol{list-style:none;}
img{display:block;}
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(24px,4vw,56px);}
.accent{color:var(--orange);}
.disp{font-family:'Unbounded',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(245,243,238,.18); border-radius:10px;}

/* faint engineered grid, used behind a couple of dark sections to give
   them a "spec sheet" quality — static, cheap, never fights for attention */
.tech-grid{background-image:linear-gradient(rgba(245,243,238,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(245,243,238,.045) 1px, transparent 1px); background-size:64px 64px;}

/* custom cursor — a small dot + lagging ring, magnetic on primary actions.
   disabled outright on touch; this is the one ambient interaction that
   runs the whole time, so it stays extremely quiet. */
.cur-dot,.cur-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:600; border-radius:50%; transform:translate(-50%,-50%);}
.cur-dot{width:7px; height:7px; background:var(--orange); mix-blend-mode:difference;}
.cur-ring{width:38px; height:38px; border:1px solid rgba(245,243,238,.4); transition:width .25s ease,height .25s ease,border-color .25s ease; mix-blend-mode:difference;}
.cur-ring.hot{width:64px; height:64px; border-color:var(--orange);}
@media(pointer:coarse){.cur-dot,.cur-ring{display:none;}}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none;}

/* thick orange progress bar — a real piece of system chrome, not a
   hairline: the page behaves like a product with state. */
.progress{position:fixed; top:0; left:0; right:0; height:4px; z-index:300; background:rgba(245,243,238,.08); pointer-events:none;}
.progress i{display:block; height:100%; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; will-change:transform; font-style:normal;}
@media(prefers-reduced-motion:reduce){.progress{display:none;}}

/* live chapter HUD — small system readout, ticks as sections cross center.
   Always has its own dark chip background so it stays legible over both
   dark and ivory sections. */
.hud{position:fixed; left:24px; bottom:24px; z-index:250; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,243,238,.75); background:rgba(10,10,11,.72); backdrop-filter:blur(6px); padding:9px 14px; border-radius:2px; pointer-events:none; opacity:0; transition:opacity .4s ease;}
.hud.show{opacity:1;}
.hud.at-footer{opacity:0;}
.hud b{color:var(--orange); font-weight:500;}
@media(prefers-reduced-motion:reduce){.hud{transition:none;}}
@media(max-width:560px){.hud{display:none;}}

/* preloader — a brief branded curtain, above everything (even the cursor)
   while the page loads. Fades out and hands off straight into the hero
   ignite, so the two moments read as one continuous reveal. */
.preloader{position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; align-items:center; justify-content:center; pointer-events:none; transition:opacity .6s cubic-bezier(.16,1,.3,1), visibility .6s cubic-bezier(.16,1,.3,1);}
.preloader.done{opacity:0; visibility:hidden;}
.pl-in{display:flex; flex-direction:column; align-items:center; gap:20px;}
.pl-mark{width:38px; height:auto; opacity:0; animation:plIn .6s cubic-bezier(.16,1,.3,1) forwards;}
.pl-bar{width:110px; height:2px; background:var(--line); overflow:hidden;}
.pl-bar i{display:block; height:100%; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; animation:plBar 1.1s cubic-bezier(.65,0,.35,1) forwards .15s; font-style:normal;}
@keyframes plIn{to{opacity:1;}}
@keyframes plBar{to{transform:scaleX(1);}}
@media(prefers-reduced-motion:reduce){.preloader{display:none;}}

/* promo — a timed sign-up nudge (once per session), built from the same
   card language as the pricing CTA: dark panel, thin line, solid orange
   top edge. Skips itself if the visitor is already at the contact form. */
.promo{position:fixed; inset:0; z-index:450; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,11,.72); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;}
.promo.show{opacity:1; visibility:visible;}
.promo-card{position:relative; max-width:420px; width:100%; background:var(--bg); border:1px solid var(--line); border-top:3px solid var(--orange); padding:40px 36px; box-shadow:0 40px 100px -30px rgba(0,0,0,.8); transform:translateY(16px) scale(.98); transition:transform .4s cubic-bezier(.16,1,.3,1);}
.promo.show .promo-card{transform:translateY(0) scale(1);}
.promo-close{position:absolute; top:16px; right:16px; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .25s ease,color .25s ease;}
.promo-close:hover{border-color:var(--orange); color:var(--orange);}
.promo-eyebrow{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange);}
.promo-h{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(19px,2.4vw,23px); line-height:1.3; margin-top:14px;}
.promo-sub{margin-top:12px; font-size:14.5px; line-height:1.6; color:var(--muted);}
.promo-cta{margin-top:24px; width:100%; justify-content:center;}
@media(prefers-reduced-motion:reduce){.promo,.promo-card{transition:none;}}
@media(max-width:480px){.promo-card{padding:32px 26px;}}

.tg-float{position:fixed; right:24px; bottom:24px; z-index:240; width:56px; height:56px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(255,90,31,.55); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;}
.tg-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 16px 36px -8px rgba(255,90,31,.7);}
.tg-float svg{width:24px; height:24px; fill:#180c06; position:relative; z-index:2;}
.tg-float::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px solid var(--orange); opacity:0; animation:tgPulse 2.8s ease-out infinite;}
.tg-float:hover::before{animation:none; opacity:0;}
@keyframes tgPulse{0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.6); opacity:0;}}
.tg-tip{position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px); background:var(--bg); border:1px solid var(--line); color:var(--text); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:8px 14px; border-radius:2px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;}
.tg-float:hover .tg-tip{opacity:1; transform:translateY(-50%) translateX(0);}
@media(max-width:768px){.tg-float{right:16px; bottom:16px; width:52px; height:52px;} .tg-tip{display:none;}}
@media(prefers-reduced-motion:reduce){.tg-float::before{animation:none;}}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.wipe{clip-path:inset(0 0 100% 0); transition:clip-path 1s cubic-bezier(.16,1,.3,1);}
.wipe.in{clip-path:inset(0 0 0 0);}
.split-reveal .word{display:inline-block; opacity:0; transform:translateY(.7em); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
.split-reveal.in .word{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;} .wipe{clip-path:none; transition:none;} .split-reveal .word{opacity:1; transform:none; transition:none;}}

.btn{display:inline-flex; align-items:center; gap:12px; padding:17px 32px; border-radius:2px; font-weight:600; font-size:14.5px; letter-spacing:.01em; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease; white-space:nowrap; will-change:transform;}
.btn-solid{background:var(--orange); color:#180c06; border-color:var(--orange);}
.btn-solid:hover{background:var(--text); border-color:var(--text);}
.btn-dark{border-color:var(--line-ink); color:var(--ink);}
.btn-dark:hover{background:var(--ink); color:var(--ivory);}

header{position:fixed; top:0; left:0; right:0; z-index:200;}
header::before{content:""; position:absolute; inset:0; background:rgba(10,10,11,.92); opacity:0; transition:opacity .35s ease;}
header.up::before{opacity:1;}
.head-row{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px;}
.mark{display:inline-flex; align-items:center;}
.mark img{height:20px; width:auto; display:block;}
.head-nav{display:flex; gap:30px;}
.head-nav a{font-size:14px; color:var(--muted); transition:color .25s ease;}
.head-nav a:hover{color:var(--text);}
.head-cta{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:var(--orange); color:#180c06; padding:10px 18px; border-radius:2px; transition:background .25s ease;}
.head-cta:hover{background:var(--text);}
.lang-switch{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:7px 12px; border-radius:2px; transition:color .25s ease,border-color .25s ease; margin-right:22px;}
.lang-switch:hover{color:var(--orange); border-color:var(--orange);}
.burger{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:44px; min-height:44px; background:none; border:none; cursor:pointer; padding:6px; margin:-6px;}
.burger span{width:22px; height:1px; background:var(--text);}
.head-drop{display:none;}
@media(max-width:820px){
  .head-nav{display:none;}
  .burger{display:flex;}
  .head-drop{display:flex; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px clamp(24px,4vw,56px) 20px; flex-direction:column; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s ease, visibility .35s;}
  .head-drop.open{max-height:480px; visibility:visible;}
  .head-drop a{padding:13px 0; font-size:16px; color:var(--muted); border-bottom:1px solid var(--line);}
  .head-drop a:last-child{border-bottom:none;}
}

section{padding:clamp(100px,13vh,160px) 0; position:relative;}
.ivory{background:var(--ivory); color:var(--ink);}
.label{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; align-items:baseline; gap:14px;}
.label b{font-weight:500; color:var(--orange);}
.ivory .label{color:var(--muted-ink);}

/* chapter mark — a small orange tick plus a hairline seam at the top of
   each plain dark section, so consecutive dark chapters (Process, FAQ,
   Contact) read as distinct rooms instead of one continuous void. */
.chapter-mark{width:44px; height:2px; background:var(--orange); margin-bottom:22px;}
#services, #pricing, #process, #faq, #launch{border-top:1px solid var(--line);}

/* ============================================================
   HERO — engineered dark stage: faint grid, a soft orange glow that
   follows the cursor, a massive ignite-in headline with a literal
   spark-bar that fires under the accent word on load.
   ============================================================ */
.hero{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 70px; position:relative; overflow:hidden;}
.hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(620px circle at var(--gx,50%) var(--gy,35%), rgba(255,90,31,.14), transparent 70%);}
.hero-in{position:relative; z-index:2;}
.hero-eyebrow{font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:30px; display:flex; align-items:center; gap:16px;}
.hero-eyebrow span{width:26px; height:1px; background:var(--orange);}
.hero h1{font-family:'Unbounded',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(42px,8.6vw,128px); line-height:.98; letter-spacing:-.01em;}
.hero h1 .ln{display:block; overflow:hidden;}
.hero h1 .ln>span{display:block; transform:translateY(112%); transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.hero h1.on .ln>span{transform:translateY(0);}
.hero h1 .ln:nth-child(2)>span{transition-delay:.12s;}
.hero h1 .ln:nth-child(2){font-size:1.3em; letter-spacing:-.01em;}
.spark-bar{display:block; height:.16em; margin-top:.08em; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.65,0,.35,1); transition-delay:.7s;}
.hero h1.on .spark-bar{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){
  .hero h1 .ln>span{transform:none; transition:none;}
  .spark-bar{transform:scaleX(1); transition:none;}
}
.hero-row{display:flex; justify-content:space-between; align-items:flex-end; gap:36px; margin-top:52px; flex-wrap:wrap;}
.hero-lead{font-size:17px; line-height:1.6; color:var(--muted); max-width:460px;}
.hero-lead b{color:var(--text); font-weight:600;}
.hero-cta{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hero-fine{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
@media(max-width:760px){.hero{padding-top:110px;} .hero-row{margin-top:36px;}}

/* orange marquee — the first energy moment, a solid orange band running
   the full width directly under the hero. pure CSS keyframe, no JS. */
.tick{overflow:hidden; background:var(--orange); padding:16px 0;}
.tick-track{display:flex; width:max-content; animation:tickmove 26s linear infinite;}
.tick-track span{font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px; letter-spacing:.01em; text-transform:uppercase; color:#180c06; padding:0 26px; white-space:nowrap;}
.tick-track span::after{content:"—"; margin-left:26px; opacity:.5;}
@keyframes tickmove{to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.tick-track{animation:none;}}

/* ============================================================
   STUDIO / FOUNDER — a two-surface composition: a solid orange
   panel carrying the founder's words in dark ink, beside a full-
   bleed treated portrait. The orange IS the section, not a detail
   inside it — and text never touches the photo.
   ============================================================ */
.studio{display:grid; grid-template-columns:1fr 1.15fr; min-height:82vh;}
.studio-panel{background:var(--bg); color:var(--text); display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,6vw,96px); position:relative;}
.studio-spine{position:absolute; top:0; right:0; transform:translateX(50%); height:100%; width:44px; z-index:2; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); background:var(--bg); pointer-events:none;}
@media(max-width:900px){.studio-spine{display:none;}}
.studio-panel .label{color:var(--muted);}
.studio-panel .label b{color:var(--orange);}
.studio-lead{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(24px,2.6vw,36px); line-height:1.28; letter-spacing:-.005em; margin-top:26px; max-width:480px; color:var(--text);}
.studio-copy{margin-top:28px; max-width:440px;}
.studio-copy p{font-size:16px; line-height:1.7; color:var(--muted);}
.studio-copy p + p{margin-top:16px;}
.studio-credit{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:16px;}
.studio-credit b{font-size:14.5px; font-weight:700; color:var(--orange);}
.studio-credit span{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.studio-photo{position:relative; overflow:hidden; background:#1c1c1e; transition:transform .35s ease-out;}
.studio-photo img{width:100%; height:100%; object-fit:cover; filter:contrast(1.08) saturate(1.05) brightness(.97); transform:scale(1.1); transition:transform 1.7s cubic-bezier(.16,1,.3,1);}
.studio-photo.in img{transform:scale(1);}
@media(prefers-reduced-motion:reduce){.studio-photo img{transform:none; transition:none;}}
@media(max-width:900px){
  .studio{grid-template-columns:1fr; min-height:0;}
  .studio-photo{height:56vh;}
  .studio-panel{padding:56px clamp(24px,6vw,48px);}
}

/* ============================================================
   SERVICES — a real grid of six panels (hairlines built from a 1px
   background gap, not per-cell borders). Hover inverts a tile to
   full orange. This is the "interaction feedback" surface.
   ============================================================ */
.svc-head{padding-bottom:0;}
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
.svc-tile{background:var(--bg); padding:40px 32px; min-height:230px; display:flex; flex-direction:column; transition:background .3s ease,color .3s ease;}
.svc-tile .n{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); transition:color .3s ease;}
.svc-tile h3{font-family:'Unbounded',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; margin-top:auto; padding-top:22px;}
.svc-tile p{margin-top:10px; font-size:14.5px; line-height:1.6; color:var(--muted); transition:color .3s ease;}
.svc-tile:hover{background:var(--orange); color:#180c06;}
.svc-tile:hover .n{color:rgba(24,12,6,.6);}
.svc-tile:hover p{color:rgba(24,12,6,.78);}
@media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}

/* ============================================================
   PRICING — an editorial rate card, not a SaaS pricing table.
   Each line is a name plus a big typographic price; details expand
   on click (independent toggles, not exclusive like FAQ, so a few
   can stay open for comparison). Packages sit underneath in a
   deliberately quieter register — a possibility, not the menu.
   ============================================================ */
.price-head{padding-bottom:0;}
.price-h{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,46px); letter-spacing:-.01em; line-height:1.15; margin-top:20px; max-width:640px;}
.price-sub{margin-top:20px; font-size:16px; line-height:1.65; color:var(--muted); max-width:560px;}

.price-groups{margin-top:64px; max-width:960px; display:flex; flex-direction:column; gap:56px;}
.price-group-head{display:flex; align-items:baseline; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.price-group-head .pg-n{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--orange); letter-spacing:.1em;}
.price-group-head h3{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(16px,1.8vw,20px); text-transform:uppercase; letter-spacing:.01em; margin-right:auto;}

/* per-category price reveal — the whole rate list stays collapsed until
   this is clicked; grid-rows (not max-height) so a row's own detail can
   still expand freely afterward without getting clipped by the parent. */
.price-reveal{display:inline-flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:6px 2px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .25s ease; flex-shrink:0;}
.price-reveal:hover{color:var(--text);}
.price-reveal .pr-ic{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); transition:transform .3s ease,border-color .3s ease,color .3s ease; flex-shrink:0;}
.price-reveal .pr-ic::before{content:"+";}
.price-group.prices-on .price-reveal{color:var(--text);}
.price-group.prices-on .price-reveal .pr-ic{transform:rotate(45deg); border-color:var(--orange); color:var(--orange);}

.price-rows{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.16,1,.3,1);}
.price-group.prices-on .price-rows{grid-template-rows:1fr;}
.price-rows-in{overflow:hidden; display:flex; flex-direction:column; min-height:0;}
.price-row{border-bottom:1px solid var(--line);}
.price-row-top{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0; cursor:pointer;}
.price-row-main{display:flex; flex-direction:column; gap:6px;}
.price-name{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(17px,1.9vw,21px); letter-spacing:-.005em;}
.price-teaser{font-size:14px; color:var(--muted); max-width:440px; line-height:1.55;}
.price-right{display:flex; align-items:center; gap:20px; flex-shrink:0;}
.price-num-wrap{display:flex; align-items:flex-end; gap:10px;}
.price-num{font-family:'Unbounded',sans-serif; font-weight:800; font-size:clamp(22px,3vw,34px); letter-spacing:-.01em; transition:color .3s ease; white-space:nowrap;}
.price-unit{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); line-height:1.5;}
.price-toggle{width:26px; height:26px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--muted); transition:transform .3s ease,border-color .3s ease,color .3s ease; flex-shrink:0;}
.price-row.open .price-toggle{transform:rotate(45deg); border-color:var(--orange); color:var(--orange);}
.price-row.open .price-num{color:var(--orange);}
.price-detail{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.price-detail-in{padding:0 0 30px; display:flex; flex-wrap:wrap; gap:32px;}
.price-includes{flex:1; min-width:240px;}
.price-includes p{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.price-includes ul{display:flex; flex-direction:column; gap:6px;}
.price-includes li{font-size:14px; color:var(--muted); line-height:1.5; padding-left:14px; position:relative;}
.price-includes li::before{content:"—"; position:absolute; left:0; color:var(--orange);}
.price-meta{flex-shrink:0; display:flex; flex-direction:column; gap:10px; min-width:140px;}
.price-meta span{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.price-meta b{display:block; font-family:'Manrope',sans-serif; font-size:14px; font-weight:600; color:var(--text); margin-top:4px; letter-spacing:0; text-transform:none;}
.price-note{margin-top:20px; font-size:13px; color:var(--muted);}
@media(max-width:680px){
  .price-row-top{flex-wrap:wrap; align-items:flex-start;}
  .price-right{width:100%; justify-content:space-between;}
}

/* packages — deliberately quiet, a possibility rather than the menu */
.price-pkgs{margin-top:64px; padding-top:44px; border-top:1px solid var(--line);}
.price-pkgs-head{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:24px;}
.price-pkgs-head b{color:var(--text); font-weight:500;}
.pkg-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.pkg-chip{background:var(--bg); padding:26px 22px; position:relative;}
.pkg-chip.popular{background:rgba(255,90,31,.06); box-shadow:inset 0 0 0 1px var(--orange);}
.pkg-chip .pkg-badge{position:absolute; top:-1px; right:-1px; background:var(--orange); color:#0a0a0b; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px;}
.pkg-chip .pkg-name{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; color:var(--orange);}
.pkg-chip .pkg-price{font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; margin-top:10px;}
.pkg-chip .pkg-save{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.03em; color:var(--orange); margin-top:4px;}
.pkg-chip .pkg-includes{margin-top:10px; font-size:12.5px; color:var(--muted); line-height:1.6;}
@media(max-width:880px){.pkg-row{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.pkg-row{grid-template-columns:1fr;}}

/* closing CTA — a quiet bordered panel, not another orange block */
.price-cta{margin-top:64px; padding:clamp(36px,5vw,56px); border:1px solid var(--line); border-top:3px solid var(--orange); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:32px;}
.price-cta-h{font-family:'Unbounded',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(20px,2.6vw,30px); line-height:1.15; max-width:440px;}
.price-cta-sub{margin-top:14px; font-size:14.5px; color:var(--muted); max-width:420px; line-height:1.6;}

.price-legal{margin-top:32px; max-width:720px;}
.price-legal p{font-size:12px; color:var(--muted); line-height:1.6;}
.price-legal p + p{margin-top:6px;}

/* orange title-card announcing the case — a short, bold banner that
   does the "dark → orange → dark" rhythm on its own */
.announce{background:var(--orange); color:#180c06; padding:clamp(36px,5vh,56px) 0;}
.announce .label{color:rgba(24,12,6,.65);}
.announce .label b{color:#180c06;}
.announce h2{font-family:'Unbounded',sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(28px,4vw,52px); line-height:1; letter-spacing:-.01em; margin-top:12px;}

/* Selected Work — a scrollable strip of cards (native scroll + optional
   mouse-drag), not a full-bleed screenshot. Ready to grow past one case
   without ever faking the ones that aren't real yet. */
.work-strip-viewport{width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; cursor:grab;}
.work-strip-viewport.dragging{cursor:grabbing;}
.work-strip-viewport::-webkit-scrollbar{height:6px;}
.work-strip{display:flex; align-items:stretch; gap:24px; padding:4px clamp(24px,4vw,56px) 36px;}
.work-card{flex:0 0 auto; width:min(600px,80vw); scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:#0d0d0e; transition:border-color .3s ease;}
.work-card:hover{border-color:var(--orange);}
.work-card-img{width:100%; aspect-ratio:16/9; overflow:hidden; background:#050505;}
.work-card-img img{width:100%; height:100%; object-fit:cover; object-position:top; filter:contrast(1.06) saturate(.95); transition:transform .6s cubic-bezier(.16,1,.3,1);}
.work-card:hover .work-card-img img{transform:scale(1.05);}
.work-card-meta{padding:26px 28px 30px; display:flex; flex-direction:column; flex:1;}
.work-card-meta h3{font-family:'Unbounded',sans-serif; font-weight:700; font-size:20px;}
.work-card-meta .cat{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:8px;}
.work-card-meta .desc{margin-top:12px; color:var(--muted); font-size:14.5px; line-height:1.6;}
@media(max-width:680px){.work-card{width:86vw;}}

/* VOICES — the one ivory breather: testimonials run as a continuous
   chain and pause under the cursor so they're actually readable. */
.quotes-viewport{width:100%; overflow:hidden; margin-top:44px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);}
.quotes-track{display:flex; width:max-content; gap:28px; padding-left:clamp(24px,4vw,56px); animation:quotesmove 52s linear infinite;}
.quotes-viewport:hover .quotes-track{animation-play-state:paused;}
@keyframes quotesmove{to{transform:translateX(-50%);}}
.q-card{flex:0 0 auto; width:clamp(300px,32vw,420px); background:rgba(20,18,16,.035); border:1px solid var(--line-ink); border-radius:2px; padding:32px 30px; display:flex; flex-direction:column;}
.q-card .qmark{font-family:'Unbounded',sans-serif; font-weight:900; font-size:40px; line-height:1; color:var(--orange);}
.q-card p{margin-top:14px; font-size:17px; line-height:1.55; letter-spacing:-.005em; flex:1;}
.q-card cite{display:block; margin-top:20px; font-family:'JetBrains Mono',monospace; font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-ink);}
@media(prefers-reduced-motion:reduce){.quotes-track{animation:none;}}
@media(max-width:680px){.q-card{width:78vw;}}

/* PROCESS — spec-sheet grid on the tech background */
.proc-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
.proc-cell{background:var(--bg); padding:34px 28px;}
.proc-cell b{font-family:'JetBrains Mono',monospace; font-weight:400; font-size:11.5px; letter-spacing:.08em; color:var(--orange); display:block;}
.proc-cell h3{font-family:'Unbounded',sans-serif; font-weight:700; margin-top:16px; font-size:18px;}
.proc-cell p{margin-top:10px; color:var(--muted); font-size:14px; line-height:1.6;}
@media(max-width:880px){.proc-row{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.proc-row{grid-template-columns:1fr;}}

/* FAQ — dark, plain accordion */
.faq-list{margin-top:52px; max-width:840px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px; padding:25px 0; cursor:pointer; font-size:16.5px; font-weight:600;}
.faq-q .p{font-family:'JetBrains Mono',monospace; font-size:18px; color:var(--muted); transition:transform .3s ease,color .3s ease; flex-shrink:0;}
.faq-item.open .faq-q .p{transform:rotate(45deg); color:var(--orange);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-a p{font-size:15.5px; line-height:1.7; color:var(--muted); padding-bottom:26px; max-width:660px;}

/* ============================================================
   LAUNCH — dark stage, oversized mixed-weight headline, and a dark
   quiz panel where every interactive state is orange: progress,
   picked choices, the submit button. The brand color closes the story.
   ============================================================ */
.launch-grid{display:grid; grid-template-columns:.85fr 1fr; gap:clamp(40px,5vw,90px); align-items:start;}
.launch-h{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(26px,2.9vw,40px); line-height:1.2; letter-spacing:-.005em; margin-top:22px; max-width:420px;}
.launch-sub{margin-top:22px; font-size:16px; color:var(--muted); max-width:400px; line-height:1.65;}
.launch-alt{margin-top:28px; font-size:14.5px; color:var(--muted);}
.launch-alt a{color:var(--text); border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .3s ease,border-color .3s ease;}
.launch-alt a:hover{color:var(--orange); border-color:var(--orange);}
@media(max-width:900px){.launch-grid{grid-template-columns:1fr;}}
.quiz{max-width:560px; background:rgba(245,243,238,.06); border:1px solid rgba(245,243,238,.2); box-shadow:0 40px 100px -30px rgba(0,0,0,.7); padding:44px 40px; position:relative; overflow:hidden;}
.hp-field{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}
.quiz-progress{position:absolute; top:0; left:0; right:0; height:3px; background:var(--line);}
.quiz-progress i{display:block; height:100%; width:20%; background:var(--orange); transition:width .45s cubic-bezier(.16,1,.3,1); font-style:normal;}
.quiz-step{display:none;}
.quiz-step.on{display:block;}
.quiz-label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:16px;}
.quiz-step h3{font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(19px,2.2vw,24px); margin-bottom:26px;}
.quiz-step input,.quiz-step textarea{width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); padding:12px 2px; color:var(--text); font-family:'Manrope',sans-serif; font-size:17px; outline:none; resize:none; transition:border-color .25s ease;}
.quiz-step input::placeholder,.quiz-step textarea::placeholder{color:var(--muted);}
.quiz-step input:focus,.quiz-step textarea:focus{border-color:var(--orange);}
.quiz-choices{display:flex; flex-wrap:wrap; gap:10px;}
.quiz-choice{padding:12px 18px; border-radius:2px; border:1px solid var(--line); background:transparent; color:var(--muted); font-family:'Manrope',sans-serif; font-size:14px; cursor:pointer; transition:border-color .25s ease,color .25s ease,background .25s ease;}
.quiz-choice:hover{border-color:var(--text); color:var(--text);}
.quiz-choice.picked{border-color:var(--orange); color:var(--text); background:rgba(255,90,31,.14);}
.quiz-nav{display:flex; justify-content:space-between; align-items:center; margin-top:32px;}
.quiz-nav .q-next{background:var(--orange); color:#180c06; border-color:var(--orange);}
.quiz-nav .q-next:hover{background:var(--text); border-color:var(--text);}
.quiz-nav button[data-back]{border-color:transparent; padding-left:0; color:var(--muted); background:none;}
.quiz-nav button[data-back]:hover{color:var(--text);}
.quiz-done p{color:var(--muted); font-size:15px; line-height:1.6; margin-top:12px;}
.quiz-privacy{max-width:560px; margin-top:16px; font-size:12px; line-height:1.6; color:var(--muted); opacity:.7;}
.quiz-privacy a{color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .25s ease;}
.quiz-privacy a:hover{color:var(--orange);}
@media(max-width:600px){.quiz{padding:36px 26px;}}

footer{border-top:1px solid var(--line); padding:48px 0;}
.f-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:28px 40px;}
footer p,footer a{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
footer a:hover{color:var(--orange);}
.f-meta{display:flex; align-items:center; flex-wrap:wrap; gap:18px; row-gap:12px;}
.f-dot{width:3px; height:3px; border-radius:50%; background:var(--line); flex:none;}
.f-social{display:flex; align-items:center; gap:16px;}
.f-social a{display:inline-flex; align-items:center;}
.f-social svg{width:14px; height:14px; fill:var(--muted); transition:fill .25s ease;}
.f-social a:hover svg{fill:var(--orange);}
.f-be{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted); line-height:1; transition:color .25s ease;}
.f-be:hover{color:var(--orange);}
@media(max-width:640px){.f-row{gap:20px;} .f-meta{gap:12px;} .f-dot{display:none;}}