/* ==========================================================================
   TecBlitzWeb — design system v2

   Principles this file is built on, so future edits don't drift:

   1. SCALE CONTRAST. Display type runs to ~158px; utility labels sit at 10px.
      Energy comes from the interval between sizes, not from colour.
   2. ONE MOTIF, USED EVERYWHERE. The brand is "Blitz" — lightning. Lightning
      is a diagonal. So: skewed flags, slash rules, angled seams, oblique
      wipes. Every accent is a -8deg cut.
   3. TWO VOICES. Syne (grotesque, structural) carries the argument;
      DM Serif Display Italic interrupts it on one word per heading. Contrast
      between voices reads as emphasis without spending more colour.
   4. RHYTHM, NOT REPETITION. Sections alternate: dark → framed → INVERTED
      (cyan ground, black type) → dark. The inverted band is the loud beat.
   5. COLOUR IS CHARGE. Cyan at four intensities — hairline, dim, glow, solid.
      Solid fill is rationed: it means "act here".
   6. FRAME DEVICE. The corner brackets from the printed brand cover recur as
      a framing element, tying screen to print.
   ========================================================================== */

/* ---------- Fonts: self-hosted, subset, no third-party request ----------- */

@font-face{
  font-family:'Syne';
  src:url('/assets/fonts/syne-var.woff2') format('woff2-variations');
  font-weight:400 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('/assets/fonts/intertight-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Syne Mono';
  src:url('/assets/fonts/synemono.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DM Serif Display';
  src:url('/assets/fonts/dmserif-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

/* ---------- Tokens -------------------------------------------------------- */

:root{
  --ink:#050507;
  --deep:#0a0a0e;
  --panel:#101015;
  --panel-2:#16161d;
  --line:rgba(245,245,240,.09);
  --line-2:rgba(245,245,240,.17);
  --white:#f7f7f2;
  --muted:rgba(247,247,242,.55);
  --muted-2:rgba(247,247,242,.33);
  --cyan:#00e5ff;
  --cyan-dim:rgba(0,229,255,.13);
  --cyan-glow:rgba(0,229,255,.32);
  --wa:#25d366;

  --f-display:'Syne',sans-serif;
  --f-body:'Inter Tight',system-ui,-apple-system,sans-serif;
  --f-mono:'Syne Mono',ui-monospace,monospace;
  --f-accent:'DM Serif Display',Georgia,serif;

  --skew:-8deg;
  --rail:74px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1340px;
  --r:14px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--cyan);color:#04141a}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* ---------- Ambient: glow only. No grid mesh. ---------------------------- */

.field{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 520px at var(--mx,58%) var(--my,6%),rgba(0,229,255,.10),transparent 64%),
    radial-gradient(1000px 800px at 108% 102%,rgba(0,229,255,.055),transparent 62%),
    radial-gradient(700px 500px at -8% 62%,rgba(0,229,255,.035),transparent 60%);
}

/* ---------- Corner-bracket frame (from the printed identity) ------------- */

.frame{position:relative}
.frame::before,.frame::after{
  content:"";position:absolute;width:34px;height:34px;pointer-events:none;
  border-color:var(--cyan);opacity:.5;
}
.frame::before{top:0;left:0;border-top:1.5px solid;border-left:1.5px solid}
.frame::after{bottom:0;right:0;border-bottom:1.5px solid;border-right:1.5px solid}

/* ---------- Rail --------------------------------------------------------- */

.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  background:rgba(5,5,7,.7);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.rail-track{
  position:absolute;left:-1px;top:0;width:1px;height:var(--progress,0%);
  background:linear-gradient(180deg,var(--cyan),rgba(0,229,255,0));
  box-shadow:0 0 14px var(--cyan-glow);
}
.rail-node{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:13px 0;width:100%;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted-2);transition:color .3s var(--ease-2);
}
.rail-node .rail-dash{width:11px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.rail-node:hover{color:var(--white)}
.rail-node:hover .rail-dash{width:24px}
.rail-node[aria-current="page"]{color:var(--cyan)}
.rail-node[aria-current="page"] .rail-dash{width:28px;background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow)}
.rail-label{writing-mode:vertical-rl;font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.rail-mark{
  position:absolute;top:20px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.24em;color:var(--muted-2);writing-mode:vertical-rl;
}
.rail-bolt{position:absolute;bottom:20px;width:15px;opacity:.55}

/* ---------- Header: wordmark, no icon ------------------------------------ */

.shell{position:relative;z-index:1;padding-left:var(--rail)}

.head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease-2),border-color .35s var(--ease-2);
}
.head.is-stuck{
  background:rgba(5,5,7,.86);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line);
}
.brand{display:inline-block;flex-shrink:0}
.wordmark{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(19px,1.65vw,25px);
  letter-spacing:-.045em;text-transform:uppercase;
  line-height:1;white-space:nowrap;display:inline-block;
  transition:transform .35s var(--ease);
}
.wordmark em{font-style:normal;color:var(--cyan)}
.brand:hover .wordmark{transform:translateX(2px)}
.wordmark-rule{
  display:block;height:2px;margin-top:4px;width:0;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);
  transition:width .5s var(--ease);
}
.brand:hover .wordmark-rule{width:100%}

.nav{display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;padding:9px 14px;font-size:14.5px;font-weight:500;
  color:var(--muted);transition:color .22s var(--ease-2);
}
.nav a::before{
  content:"";position:absolute;inset:4px 6px;border-radius:7px;
  background:rgba(255,255,255,.05);transform:skewX(var(--skew)) scaleX(0);
  transform-origin:left;transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--white)}
.nav a:hover::before{transform:skewX(var(--skew)) scaleX(1)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);
  transform:skewX(var(--skew));
}

/* ---------- Buttons: skewed fill wipe ------------------------------------ */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;
  font-weight:600;font-size:15px;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease-2),color .25s var(--ease-2),border-color .25s var(--ease-2);
}
.btn::before{
  content:"";position:absolute;inset:-2px;z-index:-1;
  transform:skewX(var(--skew)) translateX(-118%);
  transition:transform .5s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}

.btn-primary{background:var(--cyan);color:#04141a}
.btn-primary::before{background:var(--white)}
.btn-primary:hover{box-shadow:0 12px 40px var(--cyan-glow);transform:translateY(-2px)}
.btn-primary:hover::before{transform:skewX(var(--skew)) translateX(0)}

.btn-ghost{border:1px solid var(--line-2);color:var(--white)}
.btn-ghost::before{background:var(--cyan)}
.btn-ghost:hover{color:#04141a;border-color:var(--cyan);transform:translateY(-2px)}
.btn-ghost:hover::before{transform:skewX(var(--skew)) translateX(0)}

.btn-dark{background:#04141a;color:var(--cyan)}
.btn-dark::before{background:#000}
.btn-dark:hover{transform:translateY(-2px)}
.btn-dark:hover::before{transform:skewX(var(--skew)) translateX(0)}

.btn-sm{padding:10px 19px;font-size:14px}
.btn-lg{padding:17px 34px;font-size:16.5px}

.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:10px;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--white);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--white);transition:transform .3s var(--ease)}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 var(--rail);z-index:55;
  background:rgba(5,5,7,.98);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--ease);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,9vw,48px);letter-spacing:-.045em;text-transform:uppercase;
  padding:10px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;
  transition:color .25s var(--ease-2),padding-left .35s var(--ease);
}
.drawer a:hover{color:var(--cyan);padding-left:10px}
.drawer a .n{font-family:var(--f-mono);font-size:12px;color:var(--cyan);letter-spacing:.1em}
.drawer .drawer-cta{
  margin-top:28px;border:0;justify-content:center;
  font-size:16.5px;text-transform:none;letter-spacing:normal;padding:17px 34px;
}

/* ---------- Layout ------------------------------------------------------- */

section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(76px,10vw,138px)}
.sec-tight{padding-block:clamp(50px,7vw,86px)}

.seam{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);max-width:var(--maxw);margin-inline:auto}
.seam-bolt{
  position:relative;height:36px;max-width:var(--maxw);margin-inline:auto;
  display:flex;align-items:center;gap:15px;padding-inline:var(--pad);
}
.seam-bolt::before,.seam-bolt::after{content:"";height:1px;background:var(--line);flex:1}
.seam-bolt i{
  width:10px;height:17px;background:var(--cyan);opacity:.6;
  clip-path:polygon(58% 0,10% 56%,44% 56%,32% 100%,90% 40%,52% 40%);
}

/* ---------- Type --------------------------------------------------------- */

.eyebrow{
  display:flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 22px;
}
.eyebrow::before{
  content:"";flex:0 0 28px;height:2px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);transform:skewX(var(--skew));
}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.045em;line-height:.94;margin:0}
h1{font-size:clamp(46px,7.6vw,112px);letter-spacing:-.055em}
h2{font-size:clamp(34px,4.9vw,68px);letter-spacing:-.05em}
h3{font-size:clamp(21px,2.2vw,29px);letter-spacing:-.03em;line-height:1.12}
h4{font-size:17px;letter-spacing:-.02em}

.serif{font-family:var(--f-accent);font-style:italic;font-weight:400;letter-spacing:-.01em}
h1 .serif,h2 .serif{font-size:1.03em}
.cy{color:var(--cyan)}
.dim{color:var(--muted)}
.ghost{color:transparent;-webkit-text-stroke:1.4px rgba(247,247,242,.2)}

p{margin:0 0 18px}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--muted);max-width:62ch}
.small{font-size:14px;color:var(--muted)}
.mono{font-family:var(--f-mono);letter-spacing:.06em}

.tag{
  display:inline-block;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  padding:6px 13px;border:1px solid var(--line-2);color:var(--muted);
  transform:skewX(var(--skew));
}
.tag > span{display:inline-block;transform:skewX(8deg)}
.tag-live{color:var(--wa);border-color:rgba(37,211,102,.4)}

.grid{display:grid;gap:22px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,76px);align-items:center}
.split-top{align-items:start}

/* ---------- Cards -------------------------------------------------------- */

.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--deep));
  border:1px solid var(--line);border-radius:var(--r);
  padding:30px;
  transition:border-color .35s var(--ease-2),transform .35s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.card:hover{border-color:var(--line-2);transform:translateY(-4px)}
.card:hover::after{transform:scaleX(1)}
.card-lit{border-color:rgba(0,229,255,.34)}
/* four-across cards need a smaller heading and a bottom-aligned link */
.g4 > .card{display:flex;flex-direction:column}
.g4 > .card h3{font-size:clamp(17.5px,1.35vw,20px);letter-spacing:-.025em;line-height:1.16}
.g4 > .card > p:last-child{margin-top:auto;padding-top:18px}
.card-lit::after{transform:scaleX(1)}

/* ---------- INVERTED band ------------------------------------------------ */

.invert{background:var(--cyan);color:#04141a;position:relative;overflow:hidden}
.invert h2,.invert h3,.invert h4{color:#04141a}
.invert .eyebrow{color:rgba(4,20,26,.7)}
.invert .eyebrow::before{background:#04141a;box-shadow:none}
.invert .lede,.invert .small,.invert .dim{color:rgba(4,20,26,.74)}
.invert .mono{color:rgba(4,20,26,.66)}
.invert .tag{border-color:rgba(4,20,26,.3);color:rgba(4,20,26,.75)}
.invert::before{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:repeating-linear-gradient(102deg,rgba(4,20,26,.05) 0 2px,transparent 2px 34px);
}
.invert .wrap{position:relative;z-index:1}

/* ---------- Hero --------------------------------------------------------- */

.hero{padding-block:clamp(58px,8vw,104px) clamp(46px,6vw,78px)}
.hero-inner{padding:clamp(24px,3.2vw,44px) 0}
.hero h1{max-width:13ch}
.hero .lede{margin-top:28px;font-size:clamp(17px,1.6vw,22px);color:rgba(247,247,242,.68)}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px;align-items:center}
.hero-note{font-family:var(--f-mono);font-size:12px;color:var(--muted-2);letter-spacing:.05em;margin-top:18px}

.line{display:block;overflow:hidden}
.line > span{display:block;transform:translateY(105%);transition:transform .95s var(--ease)}
.line > span.line-row{display:flex;align-items:baseline}
.loaded .line > span{transform:none}
.loaded .line:nth-of-type(2) > span{transition-delay:.1s}
.loaded .line:nth-of-type(3) > span{transition-delay:.2s}

.rotator{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.08em}
.rotator > span{
  grid-area:1/1;color:var(--cyan);white-space:nowrap;
  transform:translateY(110%);opacity:0;
  transition:transform .6s var(--ease),opacity .35s linear;
}
.rotator > span.is-on{transform:none;opacity:1}
.rotator > span.is-out{transform:translateY(-110%);opacity:0}

/* ---------- Trust bar: dual, counter-scrolling, pausable ----------------- */

.trust{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,229,255,.045),transparent);
  padding:15px 0;overflow:hidden;position:relative;
}
.trust + .trust{border-top:0;background:linear-gradient(0deg,rgba(0,229,255,.035),transparent)}
.trust::before,.trust::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.trust::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.trust::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.trust-inner{display:flex;width:max-content;animation:slide 40s linear infinite;will-change:transform}
.trust-rev .trust-inner{animation-direction:reverse;animation-duration:53s}
.trust:hover .trust-inner,.trust:focus-within .trust-inner,.trust.is-held .trust-inner{animation-play-state:paused}
.trust-inner span{
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:0 24px;white-space:nowrap;color:rgba(247,247,242,.6);
  display:inline-flex;align-items:center;gap:24px;transition:color .25s var(--ease-2);
}
.trust:hover .trust-inner span{color:rgba(247,247,242,.85)}
.trust-inner span::before{
  content:"";width:7px;height:13px;flex:0 0 7px;background:var(--cyan);opacity:.8;
  clip-path:polygon(58% 0,10% 56%,44% 56%,32% 100%,90% 40%,52% 40%);
}
.trust-hint{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:3;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);opacity:0;transition:opacity .3s var(--ease-2);
}
.trust:hover .trust-hint{opacity:.9}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Stats -------------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{padding:34px 26px;border-right:1px solid var(--line);background:rgba(255,255,255,.014);position:relative;overflow:hidden}
.stat:last-child{border-right:0}
.stat::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.stat:hover::after{transform:scaleX(1)}
.stat-n{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,4.4vw,62px);letter-spacing:-.06em;color:var(--cyan);line-height:.9}
.stat-l{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.4;max-width:23ch}
.invert .stats{border-color:rgba(4,20,26,.16)}
.invert .stat{border-right-color:rgba(4,20,26,.16);background:rgba(4,20,26,.03)}
.invert .stat-n{color:#04141a}
.invert .stat-l{color:rgba(4,20,26,.7)}
.invert .stat::after{background:#04141a}

/* ---------- Work / case -------------------------------------------------- */

.work-card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--deep);position:relative;
  transition:border-color .35s var(--ease-2),transform .35s var(--ease);
}
.work-card:hover{border-color:var(--cyan);transform:translateY(-4px)}
.work-shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--panel);border-bottom:1px solid var(--line)}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease),filter .5s var(--ease-2);filter:saturate(.92)}
.work-card:hover .work-shot img{transform:scale(1.05);filter:saturate(1.1)}
.work-body{padding:26px}
.work-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.work-url{font-family:var(--f-mono);font-size:12.5px;color:var(--cyan);margin-top:16px;display:inline-flex;gap:8px;align-items:center;transition:gap .3s var(--ease)}
.work-url:hover{gap:14px}

.case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--deep);position:relative}
.case-shot{border-bottom:1px solid var(--line);background:var(--panel);overflow:hidden}
.case-shot img{width:100%;height:auto;transition:transform 1s var(--ease)}
.case:hover .case-shot img{transform:scale(1.02)}
.case-body{padding:clamp(26px,3.6vw,52px);position:relative}
.case-idx{
  position:absolute;top:clamp(16px,2.2vw,30px);right:clamp(20px,3vw,44px);
  font-family:var(--f-display);font-weight:800;font-size:clamp(46px,6.6vw,100px);
  letter-spacing:-.07em;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px rgba(0,229,255,.22);pointer-events:none;
}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.case-grid h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:400;margin-bottom:11px}
.case-grid p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}

/* ---------- Plans -------------------------------------------------------- */

.plan{
  display:flex;flex-direction:column;position:relative;overflow:hidden;min-width:0;
  background:linear-gradient(180deg,var(--panel),var(--deep));
  border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;
  transition:transform .4s var(--ease),border-color .35s var(--ease-2);
}
.plan:hover{transform:translateY(-5px);border-color:var(--line-2)}
.plan.is-featured{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,229,255,.22),0 30px 80px rgba(0,229,255,.1)}
.plan-flag{
  position:absolute;top:20px;right:-36px;
  background:var(--cyan);color:#04141a;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 42px;transform:rotate(38deg);
}
.plan-name{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap}
.plan-for{font-size:14px;color:var(--muted-2);margin-top:9px;min-height:44px}
.plan-price{font-family:var(--f-display);font-weight:800;font-size:clamp(29px,3vw,40px);letter-spacing:-.05em;margin:22px 0 5px;line-height:1;white-space:nowrap}
.plan-sub{font-size:13px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.03em}
.plan ul{list-style:none;margin:26px 0;padding:0;flex:1}
.plan li{font-size:15px;line-height:1.55;color:rgba(247,247,242,.78);padding:10px 0 10px 27px;position:relative;border-bottom:1px solid rgba(247,247,242,.05)}
.plan li::before{
  content:"";position:absolute;left:2px;top:15px;width:5px;height:10px;
  border-right:1.7px solid var(--cyan);border-bottom:1.7px solid var(--cyan);
  transform:rotate(45deg);
}
.plan li b{color:var(--white);font-weight:600}
.plan li.is-off{color:var(--muted-2)}
.plan li.is-off::before{top:20px;left:0;width:11px;height:0;border-right:0;border-bottom:1.7px solid var(--muted-2);transform:none}
.g4 > .plan{padding:30px 24px}
.g4 > .plan .plan-name{font-size:clamp(15.5px,1.28vw,18px)}
.g4 > .plan .plan-price{font-size:clamp(19px,1.75vw,26px)}
.plan.is-featured .plan-name{padding-right:30px}
.g4 > .plan .plan-sub{font-size:12px}
.g4 > .plan li{font-size:14.5px}

/* ---------- Tables ------------------------------------------------------- */

.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:16px}
.tbl th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:400;border-bottom:1px solid var(--line-2)}
.tbl td{border-bottom:1px solid var(--line)}
.tbl td:last-child,.tbl th:last-child{text-align:right;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .25s var(--ease-2)}
.tbl tbody tr:hover{background:rgba(0,229,255,.045)}
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--deep)}

/* ---------- Steps -------------------------------------------------------- */

.step{display:grid;grid-template-columns:minmax(96px,.16fr) 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--line);position:relative}
.step:last-child{border-bottom:0}
.step-n{
  font-family:var(--f-display);font-weight:800;font-size:clamp(44px,5.4vw,76px);
  letter-spacing:-.07em;line-height:.8;color:transparent;
  -webkit-text-stroke:1.4px rgba(0,229,255,.3);
  transition:color .4s var(--ease-2),-webkit-text-stroke-color .4s var(--ease-2);
}
.step:hover .step-n{color:var(--cyan);-webkit-text-stroke-color:transparent}
.step h3{margin-bottom:11px}
.step p{color:var(--muted);margin:0;max-width:62ch}
.step-flag{
  display:inline-block;margin-top:15px;padding:5px 12px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(0,229,255,.3);transform:skewX(var(--skew));
}
.step-flag > span{display:inline-block;transform:skewX(8deg)}

/* ---------- Accordion ---------------------------------------------------- */

.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:26px 48px 26px 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:clamp(18px,1.8vw,23px);
  letter-spacing:-.03em;transition:color .25s var(--ease-2),padding-left .35s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--cyan);padding-left:10px}
.acc summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:1.6px solid var(--cyan);border-bottom:1.6px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.acc details[open] summary{color:var(--cyan)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc .acc-body{padding:0 0 28px;color:var(--muted);max-width:78ch;font-size:16px}
.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- Callout ------------------------------------------------------ */

.callout{border:1px solid var(--line);border-left:3px solid var(--cyan);background:rgba(0,229,255,.04);padding:26px 30px}
.callout p:last-child{margin-bottom:0}
.invert .callout{border-color:rgba(4,20,26,.2);border-left-color:#04141a;background:rgba(4,20,26,.06)}

/* ---------- CTA ---------------------------------------------------------- */

.cta{position:relative;text-align:center;padding:0 clamp(26px,4vw,60px)}
.cta h2{max-width:17ch;margin-inline:auto}
.cta .lede{margin:24px auto 0;text-align:center}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}

/* ---------- Forms -------------------------------------------------------- */

.form{display:grid;gap:16px}
.field-row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
input,select,textarea{
  width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  color:var(--white);padding:14px 15px;font-family:var(--f-body);font-size:16px;
  transition:border-color .25s var(--ease-2),background .25s var(--ease-2),box-shadow .25s var(--ease-2);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);background:var(--panel-2);box-shadow:0 0 0 3px rgba(0,229,255,.1)}
textarea{resize:vertical;min-height:130px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.form-note{font-size:13px;color:var(--muted-2)}
.form-status{font-family:var(--f-mono);font-size:13px;min-height:20px}
.form-status.ok{color:var(--wa)}
.form-status.err{color:#ff6b6b}

/* ---------- Footer ------------------------------------------------------- */

.foot{border-top:1px solid var(--line);background:var(--deep);padding-block:clamp(52px,6vw,80px) 30px;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;position:relative;z-index:1}
.foot h4{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:400;margin-bottom:17px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a{font-size:15px;color:var(--muted);transition:color .22s var(--ease-2)}
.foot a:hover{color:var(--cyan)}
.foot-bolt{width:36px;opacity:.9;margin-bottom:18px}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted-2);position:relative;z-index:1;
}
.foot-mark{
  position:absolute;left:var(--pad);right:0;bottom:-.36em;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(52px,10vw,148px);letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(247,247,242,.05);
  pointer-events:none;user-select:none;white-space:nowrap;z-index:0;
}

/* ---------- FAB ---------------------------------------------------------- */

.fab{
  position:fixed;right:20px;bottom:20px;z-index:70;
  width:56px;height:56px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 38px rgba(37,211,102,.36);
  transition:transform .3s var(--ease);
}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--wa);animation:ping 2.6s var(--ease-2) infinite}
.fab:hover{transform:scale(1.08)}
.fab svg{width:29px;height:29px;fill:#06230f;position:relative;z-index:1}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}

/* ---------- Reveal ------------------------------------------------------- */

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive --------------------------------------------------- */

@media(max-width:1260px){
  .g4{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  :root{--rail:0px}
  .rail{left:0;right:0;top:0;bottom:auto;width:auto;height:3px;flex-direction:row;border-right:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .rail-node,.rail-mark,.rail-bolt{display:none}
  .rail-track{left:0;top:0;height:3px;width:var(--progress,0%);background:linear-gradient(90deg,var(--cyan),rgba(0,229,255,.35))}
  .drawer{inset:0}
  .nav{display:none}
  .head .btn-primary{display:none}
  .burger{display:flex}
  .g2,.g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .case-grid{grid-template-columns:1fr;gap:24px}
  .case-idx{font-size:58px;top:14px;right:18px}
  .field-row{grid-template-columns:1fr}
  .step{grid-template-columns:64px 1fr;gap:18px}
  .frame::before,.frame::after{width:22px;height:22px}
}

@media(max-width:700px){
  .g4{grid-template-columns:1fr}
}

@media(max-width:560px){
  body{font-size:16px}
  .eyebrow{font-size:9.5px;letter-spacing:.16em;gap:9px}
  .eyebrow::before{flex:0 0 18px}
  h1{font-size:clamp(38px,11vw,56px)}
  .card{padding:25px 21px}
  .plan{padding:28px 22px}
  .plan-price{font-size:clamp(26px,8vw,36px)}
  .g4 > .plan .plan-price{font-size:clamp(26px,8vw,36px)}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .hero-actions .btn{width:100%}
  .trust::before,.trust::after{width:44px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .line > span{transform:none}
  .rotator > span{opacity:0}
  .rotator > span.is-on{opacity:1;transform:none}
}

@media print{
  .rail,.head,.fab,.drawer,.trust,.foot-mark{display:none}
  body{background:#fff;color:#000}
  .shell{padding-left:0}
}