:root {
  --ink: #07141f;
  --ink-2: #0c2433;
  --paper: #ead8bb;
  --white: #fff5df;
  --lime: #e2e044;
  --pink: #d45773;
  --blue: #52a2d9;
  /* Darkened accents for the paper background. The bright three are tuned for
     dark sections — on paper, lime measures 1.00:1, blue 2.00:1, pink 2.78:1. */
  --pink-ink: #982c49;
  --lime-ink: #5f5e0f;
  --blue-ink: #1c5a80;
  /* Default surface is dark; light surfaces override these below. */
  --accent-lime: #e2e044;
  --accent-pink: #d45773;
  --accent-blue: #52a2d9;
  --muted: #46545d;
  --line: rgba(7,20,31,.14);
  --max: 1180px;
  --shadow: 12px 12px 0 var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }
.wrap { width: min(var(--max), calc(100% - 40px)); margin: auto; }
.eyebrow { margin: 0 0 12px; color: var(--accent-pink); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.display { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-style: italic; font-weight: 900; line-height: .92; letter-spacing: .015em; text-transform: uppercase; }
.lime { color: var(--accent-lime); } .pink { color: var(--accent-pink); } .blue { color: var(--accent-blue); }

/* Accents resolve against whatever surface they sit on, via inherited tokens —
   so a dark panel nested inside a light section still gets the bright set,
   without any specificity fights. */
.section:not(.dark) { --accent-lime: var(--lime-ink); --accent-pink: var(--pink-ink); --accent-blue: var(--blue-ink); }
.dark, .punch-stage, .product-panel, .contact-card, .notify-form-wrap, .page-hero {
  --accent-lime: var(--lime); --accent-pink: var(--pink); --accent-blue: var(--blue);
}
/* The CTA band is pink — ink reads at 4.79:1 where lime managed 2.77:1. */
.cta { --accent-lime: var(--ink); --accent-pink: var(--ink); --accent-blue: var(--ink); }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--lime); padding: 10px 16px; font-weight: 900; }
.skip:focus { top: 12px; }

header { position: sticky; top: 0; z-index: 50; background: rgba(7,20,31,.97); border-bottom: 3px solid #02070b; backdrop-filter: blur(16px); }
.nav { min-height: 76px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; width: 190px; line-height: 1; }
.brand-logo { display: block; width: 100%; height: auto; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 25px; }
.nav-links a { color: white; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--lime); }
.nav-cta { display: inline-flex; min-height: 44px; padding: 0 17px; align-items: center; justify-content: center; color: var(--ink) !important; background: var(--lime); border: 2px solid var(--lime); }
.nav-cta-with-bolt { gap: 9px; padding-right: 13px; }
.nav-bolt { width: 17px; height: 25px; flex: 0 0 auto; overflow: visible; fill: #fff6df; stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke fill; filter: drop-shadow(1.5px 1.5px 0 var(--pink)); transform: rotate(8deg); transition: transform .2s ease; }
.nav-cta-with-bolt:hover .nav-bolt { transform: rotate(-4deg) scale(1.15); }
.menu { display: none; margin-left: auto; padding: 8px; color: white; border: 0; background: transparent; font-size: 1.6rem; cursor: pointer; }

.hero { position: relative; min-height: 680px; overflow: hidden; display: grid; align-items: center; color: white; background: radial-gradient(circle at 77% 44%, rgba(82,162,217,.27), transparent 28%), linear-gradient(135deg, var(--ink), #04101a 65%, var(--ink-2)); }
.hero::before, .dark-grid::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #bcd3e2 1px, transparent 1.5px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .95fr 1.05fr; gap: 30px; align-items: center; padding: 72px 0; }
.hero h1 { font-size: clamp(4.5rem, 8vw, 7.8rem); }
.hero-copy { max-width: 610px; }
.hero-copy > p:not(.eyebrow) { margin: 25px 0 30px; max-width: 580px; color: #dce7ed; font-size: clamp(1.1rem, 2vw, 1.35rem); }
.buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 950; letter-spacing: .035em; text-transform: uppercase; transition: transform .2s, box-shadow .2s; cursor: pointer; }
.btn:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 currentColor; }
.btn-lime { background: var(--lime); }
.btn-with-bolt { gap: 12px; padding-right: 18px; }
.btn-bolt { width: 22px; height: 31px; flex: 0 0 auto; overflow: visible; fill: #fff6df; stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; paint-order: stroke fill; filter: drop-shadow(2px 2px 0 var(--pink)); transform: rotate(8deg); transition: transform .2s ease; }
.btn-with-bolt:hover .btn-bolt { transform: rotate(-4deg) scale(1.13); }
.btn-outline { border-color: white; color: white; background: transparent; }
.hero-art { position: relative; min-height: 510px; display: grid; place-items: center; }
.burst { position: absolute; width: min(590px, 100%); aspect-ratio: 1; border-radius: 50%; opacity: .78; animation: spin 26s linear infinite; background: repeating-conic-gradient(from 0deg, transparent 0 7deg, rgba(82,162,217,.76) 7.5deg 8.5deg, transparent 9deg 15deg); mask-image: radial-gradient(circle, #000 0 61%, transparent 63%); }
.bolt-wrap { position: relative; width: min(310px, 55%); animation: boltFloat 3.2s ease-in-out infinite; filter: drop-shadow(17px 19px 0 #02090e) drop-shadow(0 0 25px rgba(226,224,68,.26)); }
.bolt-svg { display: block; width: 100%; overflow: visible; }
.bolt-core { fill: var(--lime); stroke: #f7f47a; stroke-width: 3; stroke-linejoin: bevel; }
.spark { transform-origin: center; fill: var(--pink); animation: spark 1.8s ease-in-out infinite alternate; }
.spark.two { fill: var(--blue); animation-delay: -.7s; }
/* The star's usable interior is much narrower than its bounding box — the
   notches cut in to roughly 17% a side. Padding keeps the longest word inside
   that safe area rather than crossing a point into the background. */
.speech { position: absolute; left: 2%; top: 45%; width: 250px; padding: 34px 42px; color: var(--ink); background: white; text-align: center; font-family: Impact, sans-serif; font-style: italic; font-size: 1.5rem; line-height: 1.02; clip-path: polygon(50% 0,59% 15%,74% 5%,76% 23%,94% 21%,84% 38%,100% 49%,83% 57%,94% 76%,74% 74%,70% 96%,55% 84%,43% 100%,35% 82%,15% 92%,19% 70%,0 62%,17% 49%,3% 34%,24% 29%,22% 9%,42% 17%); transform: rotate(-6deg); animation: pop 3.2s ease-in-out infinite; }

/* The band overhangs so the -1deg tilt doesn't leave wedges at the edges; the
   clip wrapper keeps that overhang from creating horizontal page scroll.
   Ink on pink instead of white: white measured 3.9:1, hard to read in motion. */
.ticker-clip { overflow: hidden; }
.ticker { position: relative; width: 104%; margin-left: -2%; overflow: hidden; padding: 15px 0; color: var(--ink); background: var(--pink); border-block: 3px solid var(--ink); transform: rotate(-1deg); }
.ticker-track { width: max-content; display: flex; gap: 36px; font-weight: 950; text-transform: uppercase; letter-spacing: .07em; animation: ticker 22s linear infinite; }
.ticker-bolt { width: 12px; height: 18px; margin: 0 7px -4px; overflow: visible; fill: var(--lime); stroke: var(--ink); stroke-width: 3.4; stroke-linejoin: round; paint-order: stroke fill; }
.section { padding: 95px 0; background-color: var(--paper); background-image: radial-gradient(circle, rgba(74,47,31,.12) 1px, transparent 1.4px); background-size: 12px 12px; }
.section > .wrap { position: relative; }
.section-head { max-width: 740px; margin-bottom: 46px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section h2, .page-hero h1 { font-size: clamp(3.1rem, 6vw, 5.7rem); }
.section-lead { color: var(--muted); font-size: 1.15rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { position: relative; min-height: 300px; padding: 28px; background: var(--white); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink), inset 0 0 0 2px rgba(126,80,47,.12); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translate(-4px,-4px); box-shadow: 14px 14px 0 var(--ink), inset 0 0 0 2px rgba(126,80,47,.12); }
.card-icon { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 30px; border: 3px solid var(--ink); background: var(--accent, var(--lime)); box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); }
.card:nth-child(2) .card-icon { transform: rotate(2deg); }
.card-icon svg { width: 52px; height: 52px; fill: var(--white); stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.services-cards .card-icon { width: 90px; height: 90px; margin-bottom: 34px; border-width: 4px; box-shadow: 7px 7px 0 var(--ink); }
.services-cards .card-icon svg { width: 70px; height: 70px; stroke-width: 2.5; }
.card h3 { margin: 0 0 12px; font-size: 1.35rem; text-transform: uppercase; }
.card p { margin: 0; color: var(--muted); }
.code-cards .card h3,
.engagement-cards .card h3 { display: inline-block; margin: -3px 0 22px -3px; padding: 9px 13px 8px; color: var(--ink); background: var(--lime); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); line-height: 1.08; }
.code-cards .card:nth-child(2) h3,
.code-cards .card:nth-child(5) h3,
.engagement-cards .card:nth-child(2) h3 { background: var(--blue); }
.code-cards .card:nth-child(3) h3,
.code-cards .card:nth-child(6) h3,
.engagement-cards .card:nth-child(3) h3 { background: var(--pink); }
.card-link { position: absolute; right: 25px; bottom: 21px; font-weight: 950; }
.punch-stage { margin-top: 95px; min-height: 560px; display: grid; grid-template-columns: .72fr 1.28fr; overflow: hidden; color: white; background: var(--ink); border: 5px solid var(--ink); box-shadow: 14px 14px 0 var(--pink); }
.punch-copy { position: relative; z-index: 5; align-self: center; padding: 48px; }
.punch-copy h3 { font-size: clamp(2.8rem,5vw,4.8rem); }
.punch-copy > p:last-child { max-width: 420px; color: #c8d5dc; }
.punch-screen { position: relative; min-height: 560px; overflow: hidden; background: radial-gradient(circle at 58% 48%,rgba(82,162,217,.36),transparent 34%),linear-gradient(145deg,#132e40,#07141f 62%,#3f2030); border-left: 5px solid #02070b; isolation: isolate; }
.punch-screen::after { content:""; position:absolute; inset:14px; border:2px solid rgba(255,255,255,.25); pointer-events:none; }
.impact-rays { position:absolute; z-index:-1; inset:-30%; opacity:.6; background:repeating-conic-gradient(from 2deg at 57% 48%,transparent 0 8deg,rgba(226,224,68,.75) 8.4deg 9.5deg,transparent 10deg 17deg); animation:spin 45s linear infinite; }
/* height:auto is required — the width/height attributes on the <img> would
   otherwise pin the height to the file's pixel height and stretch it. */
.punch-fist { position:absolute; z-index:8; left:48%; top:46%; width:min(430px,62%); height:auto; transform:translate(-170%,-42%) scale(.22) rotate(-12deg); filter:drop-shadow(18px 20px 0 rgba(0,0,0,.55)); animation:punchScreen 7s cubic-bezier(.2,.8,.2,1) infinite; }
/* z-index 9 puts this above the fist (8) — at 7 it was hidden behind the fist
   at the exact moment it was meant to read. */
.impact-word { position:absolute; z-index:9; left:55%; top:43%; color:var(--pink); font:italic 900 clamp(3rem,6vw,6rem)/1 Impact,sans-serif; text-shadow:5px 5px 0 #050b11,-3px -3px 0 var(--white); transform:translate(-50%,-50%) rotate(-8deg) scale(0); animation:impactWord 7s ease-in-out infinite; }
.app-device { position:absolute; z-index:6; left:57%; top:50%; width:230px; height:455px; overflow:hidden; padding:25px 18px 16px; color:var(--ink); background:#f8f3e8; border:9px solid #02070b; border-radius:32px; box-shadow:16px 18px 0 var(--blue),-11px -9px 0 var(--pink); transform:translate(-50%,-42%) scale(.2) rotate(8deg); opacity:0; animation:appLaunch 7s cubic-bezier(.16,.8,.22,1) infinite; }
.app-top { display:flex; align-items:center; gap:7px; }
.app-top i { width:9px;height:9px;margin-left:auto;border-radius:50%;background:var(--pink); }
.app-top i:last-child { margin-left:0;background:var(--blue); }
.app-avatar { width:30px;height:30px;border:3px solid var(--ink);border-radius:50%;background:var(--lime); }
.app-welcome { margin:22px 0 18px; font-size:.58rem;letter-spacing:.1em; }
.app-welcome strong { display:block;margin-top:5px;font:italic 900 1.35rem/1 Impact,sans-serif;letter-spacing:.01em; }
.app-stats { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.app-stats span { padding:10px 8px;border:2px solid var(--ink);background:white;font-size:.62rem; }
.app-stats b { display:block;color:var(--pink);font-size:1.3rem; }
.app-chart { height:105px;margin:12px 0;display:flex;align-items:flex-end;gap:7px;padding:12px;border:2px solid var(--ink);background:#dbeef7; }
.app-chart i { flex:1;height:35%;background:var(--blue);border:2px solid var(--ink); }
.app-chart i:nth-child(2){height:62%;background:var(--pink)}.app-chart i:nth-child(3){height:48%;background:var(--lime)}.app-chart i:nth-child(4){height:82%}.app-chart i:nth-child(5){height:68%;background:var(--pink)}
.app-list { display:grid;gap:7px; }.app-list span { height:21px;border:2px solid var(--ink);background:white; }.app-list span::before { content:"✓";display:inline-grid;place-items:center;width:20px;height:100%;margin-right:7px;color:white;background:var(--pink); }
.app-nav { position:absolute;left:0;right:0;bottom:0;padding:12px 5px;color:white;background:var(--ink);font-size:.72rem;text-align:center; }
@keyframes punchScreen { 0%,12%{transform:translate(-170%,-42%) scale(.22) rotate(-12deg);opacity:0} 18%{opacity:1} 34%,39%{transform:translate(-50%,-48%) scale(1.16) rotate(0);opacity:1} 48%,100%{transform:translate(82%,35%) scale(.42) rotate(18deg);opacity:0} }
/* Pops on impact, overshoots, then HOLDS at full opacity from 34% to 50%
   — about 1.1s at 7s — before clearing. Previously it hit opacity 1 at a
   single instant (35%) and immediately began fading, so it never read. */
@keyframes impactWord {
  0%,29%   { transform:translate(-50%,-50%) rotate(-8deg) scale(0);    opacity:0 }
  34%      { transform:translate(-50%,-50%) rotate(-8deg) scale(1.3);  opacity:1 }
  38%      { transform:translate(-50%,-50%) rotate(-8deg) scale(1.12); opacity:1 }
  50%      { transform:translate(-50%,-50%) rotate(-8deg) scale(1.16); opacity:1 }
  60%,100% { transform:translate(-50%,-50%) rotate(-8deg) scale(1.5);  opacity:0 }
}
@keyframes appLaunch { 0%,42%{transform:translate(-50%,-42%) scale(.2) rotate(8deg);opacity:0} 54%,88%{transform:translate(-50%,-50%) scale(1) rotate(-2deg);opacity:1} 96%,100%{transform:translate(-50%,-50%) scale(.94) rotate(0);opacity:0} }
.dark { position: relative; overflow: hidden; color: white; background-color: var(--ink); background-image: radial-gradient(circle, rgba(82,162,217,.19) 1px, transparent 1.4px); background-size: 15px 15px; }
.dark .section-lead, .dark .muted { color: #bdcbd4; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feature-row + .feature-row { margin-top: 100px; }
.feature-row:nth-child(even) .feature-visual { order: -1; }
.feature-copy h3 { margin: 0 0 18px; font-size: clamp(2.3rem,4vw,4rem); }
.feature-copy p { max-width: 570px; color: var(--muted); font-size: 1.08rem; }
.dark .feature-copy p { color: #c7d4db; }
.feature-list { padding: 0; list-style: none; }
.feature-list li { padding: 11px 0 11px 30px; position: relative; border-bottom: 1px solid rgba(255,255,255,.12); }
.feature-list li::before { content: ""; position: absolute; left: 2px; top: .22em; width: 11px; height: 17px; background: var(--lime); clip-path: polygon(58% 0,8% 58%,43% 58%,27% 100%,92% 42%,57% 42%); filter: drop-shadow(1.5px 1.5px 0 #02070b); }
.feature-visual { min-height: 430px; position: relative; overflow: hidden; border: 5px solid #02070b; outline: 2px solid rgba(255,255,255,.2); background-color: #71543d; background-position: center; background-size: cover; isolation: isolate; box-shadow: 12px 12px 0 rgba(0,0,0,.42); transition: background-size .7s ease, transform .35s ease; }
.feature-visual:hover { background-size: 106%; transform: translateY(-4px); }
.about-manifesto { min-height: 500px; display: grid; align-content: center; gap: 18px; padding: 46px 44px; color: var(--white); background-color: var(--ink); background-image: radial-gradient(circle, rgba(82,162,217,.28) 1px, transparent 1.5px), repeating-conic-gradient(from 8deg at 82% 54%, transparent 0 10deg, rgba(226,224,68,.09) 10.5deg 12deg, transparent 12.5deg 22deg); background-size: 16px 16px, auto; box-shadow: 14px 14px 0 var(--pink); }
.about-manifesto:hover { background-size: 16px 16px, auto; }
.about-manifesto::before { content: ""; position: absolute; right: -34px; top: -26px; width: 190px; height: 300px; background: rgba(226,224,68,.15); clip-path: polygon(58% 0,8% 58%,43% 58%,27% 100%,92% 42%,57% 42%); transform: rotate(10deg); }
.manifesto-kicker { position: relative; justify-self: start; padding: 7px 12px 6px; color: var(--ink); background: var(--pink); border: 3px solid #02070b; box-shadow: 4px 4px 0 #02070b; font-weight: 950; letter-spacing: .14em; font-size: .72rem; }
.manifesto-rule { position: relative; display: grid; grid-template-columns: 58px 1fr; align-items: center; color: var(--ink); background: var(--white); border: 4px solid #02070b; box-shadow: 7px 7px 0 #02070b; transform: rotate(-1deg); }
.manifesto-rule:nth-of-type(3) { transform: rotate(1deg); }
.manifesto-rule span { align-self: stretch; display: grid; place-items: center; background: var(--lime); border-right: 4px solid #02070b; font: italic 900 1.65rem/1 Impact,sans-serif; }
.manifesto-rule:nth-of-type(3) span { background: var(--blue); }
.manifesto-rule:nth-of-type(4) span { background: var(--pink); }
.manifesto-rule strong { padding: 13px 15px 11px; font: italic 900 clamp(1.7rem,3vw,2.55rem)/.95 Impact,sans-serif; letter-spacing: .02em; }
.manifesto-footer { position: relative; color: #c8d5dc; font-size: .7rem; font-weight: 900; letter-spacing: .13em; text-align: center; }
.discovery-panel { background-image: linear-gradient(180deg, transparent 56%, rgba(5,11,17,.45)), url('assets/comic-discovery.webp'); }
.launch-panel { background-image: linear-gradient(180deg, transparent 56%, rgba(5,11,17,.48)), url('assets/comic-launch.webp'); }
.comic-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgba(255,229,190,.12) 1px, transparent 1.6px); background-size: 9px 9px; mix-blend-mode: soft-light; }
.comic-panel::after { content: ""; position: absolute; inset: 9px; border: 2px solid rgba(255,245,223,.46); pointer-events: none; }
.scene-label { position: absolute; z-index: 8; top: 0; left: 0; min-width: 145px; padding: 10px 18px 9px; color: #07141f; background: #e8a7b5; border-right: 4px solid #02070b; border-bottom: 4px solid #02070b; font: italic 900 1.1rem/1 Impact, sans-serif; letter-spacing: .04em; transform: rotate(-1deg); }
.scene-label small { display: block; margin-top: 4px; font: italic 800 .7rem/1.1 Inter,sans-serif; letter-spacing: .03em; }
.speech-bubble { position: absolute; z-index: 9; top: 68px; right: 20px; display: flex; align-items: center; justify-content: center; width: 245px; min-height: 138px; padding: 28px 30px 45px; color: #07141f; background: url('assets/speech-bubble-left.svg') center / 100% 100% no-repeat; text-align: center; font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif; font-size: 1rem; font-style: italic; font-weight: 900; line-height: 1.08; letter-spacing: -.02em; transform: rotate(-.7deg); filter: drop-shadow(5px 6px 0 rgba(0,0,0,.27)); }
.bubble-copy { display: block; width: 100%; text-align: center; }
.speech-bubble::before,.speech-bubble::after { content: none; }
.speech-bubble em { color: var(--pink); font-style: inherit; }
.discovery-panel .speech-bubble { top: auto; right: 10px; bottom: 65px; width: 235px; min-height: 133px; padding: 25px 28px 43px; font-size: .78rem; }
.panel-caption { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; padding: 15px 22px 13px; color: #fff5df; background: #050b11; border-top: 5px solid #050b11; font: italic 900 clamp(1.35rem,2.6vw,2.15rem)/1 Impact,sans-serif; letter-spacing: .035em; text-align: center; }
.panel-caption span { color: var(--blue); }
.launch-panel .speech-bubble { top: 14px; left: 38%; right: auto; width: 142px; min-height: 96px; padding: 22px 21px 32px; background-image: url('assets/speech-bubble-right.svg?v=2'); font-size: .7rem; transform: translateX(-50%) rotate(-.5deg); }
.action-burst { position: absolute; z-index: 10; right: 18px; bottom: 70px; width: 176px; height: 138px; display: grid; place-items: center; padding: 18px 23px 12px; color: white; background: transparent url('assets/action-burst.svg?v=1') center / 100% 100% no-repeat; text-shadow: 4px 4px 0 #050b11; font: italic 900 1.72rem/.92 Impact,sans-serif; transform: rotate(6deg); animation: comicPop 2.6s ease-in-out infinite; }
@keyframes comicPop { 50% { transform: rotate(4deg) scale(1.06); } }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); }
.step { min-height: 250px; padding: 28px; border-right: 2px solid var(--ink); background: var(--white); }
.step:last-child { border: 0; }
.step span { color: var(--pink); font: italic 900 3.5rem/1 Impact, sans-serif; }
.step h3 { font-size: 1.2rem; text-transform: uppercase; }
.faq { max-width: 850px; margin: auto; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 2px solid var(--ink); }
.faq summary { cursor: pointer; padding: 23px 45px 23px 0; font-weight: 900; font-size: 1.12rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; color: var(--pink-ink); font-size: 1.7rem; }
.faq details[open] summary::after { content: "−"; }
.faq p { max-width: 720px; margin: 0 0 24px; color: var(--muted); }
.cta { padding: 70px 0; color: white; background: var(--pink); border-block: 3px solid var(--ink); }
.cta-inner { display: flex; gap: 35px; justify-content: space-between; align-items: center; }
.cta h2 { max-width: 760px; font-size: clamp(3rem,6vw,5.5rem); }

.page-hero { position: relative; overflow: hidden; padding: 110px 0 90px; color: white; background-color: var(--ink); background-image: radial-gradient(circle, rgba(82,162,217,.24) 1px, transparent 1.5px); background-size: 17px 17px; border-bottom: 5px solid #02070b; }
/* Full-colour brand bolt — lime core, ink outline, pink and blue offsets, sparks.
   An SVG rather than the ⚡ emoji so it renders identically on every platform. */
.page-hero::after { content: ""; position: absolute; right: 5%; top: -20px; width: 340px; height: 440px; opacity: .5; background: url('assets/page-bolt.svg') center / contain no-repeat; transform: rotate(10deg); animation: boltFloat 3.6s ease-in-out infinite; pointer-events: none; }
@media (max-width: 900px) { .page-hero::after { right: -12%; width: 230px; height: 300px; opacity: .26; } }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero p { max-width: 700px; color: #cfdae0; font-size: 1.25rem; }
/* .eyebrow is a <p>, so the rule above outranks it — restore the accent. */
.page-hero p.eyebrow { color: var(--pink); font-size: .78rem; }
.contact-hero h1 { color: var(--blue); }
.contact-hero h1 .lime { color: var(--lime); }
.work-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.work-card { min-height: 410px; padding: 35px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; border: 4px solid var(--ink); background-color: var(--white); background-image: radial-gradient(circle, rgba(7,20,31,.14) 1px, transparent 1.4px); background-size: 11px 11px; }
.work-card:nth-child(2), .work-card:nth-child(3) { background: var(--blue); }
.work-card:nth-child(4) { background: var(--lime); }
.work-card::before { content: attr(data-mark); position: absolute; right: 20px; top: -25px; color: rgba(7,20,31,.1); font: italic 900 12rem/1 Impact,sans-serif; }
.work-card h3 { margin: 0 0 8px; font-size: 2rem; text-transform: uppercase; }
.work-card p { max-width: 500px; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.stat { padding: 30px; border-left: 5px solid var(--pink); background: var(--white); }
.stat strong { display: block; font: italic 900 2rem/1 Impact,sans-serif; text-transform: uppercase; }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
.contact-card { align-self: start; padding: 32px; color: white; background: var(--ink); }
.contact-card a { color: var(--lime); font-weight: 900; }
.contact-card hr { border: 0; border-top: 1px solid rgba(255,255,255,.2); margin: 30px 0; }
.contact-body > h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 30px; }
.contact-reasons { display: grid; gap: 24px; }
.contact-reason { padding: 24px 26px; background: var(--white); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.contact-reason:nth-child(2) { box-shadow: 8px 8px 0 var(--blue); }
.contact-reason:nth-child(3) { box-shadow: 8px 8px 0 var(--pink); }
.contact-reason h3 { margin: 0 0 8px; font-size: 1.12rem; text-transform: uppercase; }
.contact-reason p { margin: 0; color: var(--muted); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 900; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.field input, .field textarea, .field select { width: 100%; border: 2px solid var(--ink); border-radius: 0; background: white; padding: 13px; }
.field textarea { min-height: 145px; resize: vertical; }
.form-note { grid-column: 1/-1; color: var(--muted); font-size: .85rem; }
footer { padding: 58px 0 25px; color: #b9c6cd; background: #030a0f; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer-brand { width: 220px; }
footer h3 { color: white; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
footer a { display: block; margin: 7px 0; }
.copyright { margin-top: 45px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .83rem; }
/* Reveals are only hidden when JS is running (html.js is set inline in <head>),
   so a script failure or a no-JS visitor still sees every section. */
.reveal { transition: opacity .65s, transform .65s; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- stealth holding page ---------- */
.stealth-body { background: var(--ink); }
.stealth { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 60px 24px; color: white; background: radial-gradient(circle at 72% 40%, rgba(82,162,217,.24), transparent 34%), linear-gradient(150deg, var(--ink), #04101a 62%, var(--ink-2)); }
.stealth::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle, #bcd3e2 1px, transparent 1.5px); background-size: 22px 22px; }
.stealth-art { position: absolute; right: -6%; top: 50%; width: min(620px, 62vw); translate: 0 -50%; display: grid; place-items: center; opacity: .5; pointer-events: none; }
.stealth-art .bolt-wrap { width: 46%; }
.stealth-inner { position: relative; z-index: 2; width: min(620px, 100%); }
.stealth-logo { display: block; width: 260px; max-width: 72%; height: auto; margin-bottom: 40px; }
.stealth h1 { font-size: clamp(3.4rem, 9vw, 5.6rem); margin-bottom: 22px; }
.stealth-lead { max-width: 52ch; margin: 0 0 40px; color: #dce7ed; font-size: clamp(1.05rem, 2vw, 1.2rem); }
.stealth-form { max-width: 430px; }
.stealth-form .field label { color: white; }
.stealth-form .form-note { margin: 0; color: #a9b8c2; }
.stealth-form .form-note[data-state="error"] { color: #ffc9d4; font-weight: 700; }
.stealth-form .form-note[data-state="success"] { color: var(--lime); font-weight: 900; }
.stealth-foot { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 52px 0 0; font-size: .84rem; color: #8d9aa2; }
.stealth-foot a { color: var(--lime); font-weight: 900; }
.stealth .notify-fallback { max-width: 430px; padding: 26px; background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.22); }
@media (max-width: 700px) {
  .stealth-art { right: -22%; opacity: .32; width: 92vw; }
  .stealth-foot { margin-top: 40px; }
}

/* ---------- building page ---------- */
.inline-link { color: var(--pink-ink); font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.dark .inline-link { color: var(--lime); }
.footer-note { max-width: 260px; margin: 16px 0 0; font-size: .82rem; line-height: 1.5; color: #8d9aa2; }

.product-panel { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; padding: 52px 48px; color: white; background: var(--ink); border: 5px solid var(--ink); box-shadow: 14px 14px 0 var(--blue); }
.product-copy h2 { font-size: clamp(3rem, 6vw, 5rem); margin-bottom: 20px; }
.product-lead { max-width: 52ch; font-size: 1.2rem; color: #dce7ed; }
.product-copy > p:last-of-type { max-width: 52ch; color: #b7c6ce; }
.product-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.product-tags span { padding: 8px 14px 7px; color: var(--ink); background: var(--lime); border: 3px solid #02070b; box-shadow: 4px 4px 0 #02070b; font-weight: 950; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.product-tags span:nth-child(2) { background: var(--blue); }
.product-stamp { flex: 0 0 auto; display: grid; place-items: center; gap: 6px; width: 190px; height: 190px; padding: 20px; color: var(--white); border: 5px solid var(--pink); border-radius: 50%; text-align: center; transform: rotate(-9deg); }
.stamp-mark { font: italic 900 3.6rem/1 Impact, sans-serif; color: var(--pink); }
.stamp-label { font-weight: 950; font-size: .8rem; letter-spacing: .16em; line-height: 1.35; }

.notify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.notify-copy h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 18px; }
.notify-form-wrap { padding: 34px; background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.22); }
.notify-form { display: grid; gap: 18px; }
.notify-form .field label { color: white; }
.notify-form .btn { width: 100%; }
.notify-form .form-note { margin: 0; color: #bdcbd4; }
.notify-form .form-note[data-state="error"] { color: #ffc9d4; font-weight: 700; }
.notify-form .form-note[data-state="success"] { color: var(--lime); font-weight: 900; font-size: 1rem; }
.notify-fallback { padding: 34px; background: rgba(255,255,255,.06); border: 3px solid rgba(255,255,255,.22); }
.notify-fallback p { margin: 0 0 18px; color: #dce7ed; }
.notify-fallback p:last-child { margin: 0; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes boltFloat { 50% { transform: translateY(-13px) rotate(2deg); } }
@keyframes spark { to { transform: scale(1.25) rotate(12deg); opacity: .55; } }
@keyframes pop { 50% { transform: rotate(-3deg) scale(1.04); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .menu { display: block; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 76px; padding: 24px 20px; align-items: flex-start; flex-direction: column; background: var(--ink); }
  .nav-links.open { display: flex; }
  .hero-grid, .feature-row, .contact-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-copy { padding-top: 30px; }
  .hero-art { min-height: 430px; }
  .cards { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step:nth-child(2) { border-right: 0; }
  .step:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .feature-row:nth-child(even) .feature-visual { order: initial; }
  .work-grid, .notify-grid { grid-template-columns: 1fr; }
  .product-panel { grid-template-columns: 1fr; justify-items: start; gap: 34px; padding: 40px 32px; }
  .punch-stage { grid-template-columns: 1fr; }
  .punch-screen { min-height: 520px; border-left: 0; border-top: 5px solid #02070b; }
}
@media (max-width: 620px) {
  .wrap { width: min(var(--max), calc(100% - 24px)); }
  .hero-grid { padding-top: 45px; }
  .hero h1 { font-size: 4rem; }
  .hero-art { min-height: 330px; }
  .speech { width: 200px; padding: 26px 32px; font-size: 1.12rem; left: -3%; }
  .cards, .stats, .footer-grid, .form { grid-template-columns: 1fr; }
  .field.full, .form-note { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 2px solid var(--ink) !important; }
  .step:last-child { border-bottom: 0 !important; }
  .cta-inner { align-items: flex-start; flex-direction: column; }
  .section { padding: 70px 0; }
  .btn { width: 100%; }
  .punch-stage { margin-top: 75px; min-height: 0; }
  .card, .step { min-height: 0; }
  .product-panel { padding: 32px 24px; }
  .product-stamp { width: 150px; height: 150px; }
  .notify-form-wrap, .notify-fallback { padding: 26px 22px; }
  .punch-copy { padding: 35px 25px; }
  .punch-screen { min-height: 470px; }
  .app-device { width: 205px; height: 410px; }
  .punch-fist { width: 75%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .punch-fist, .impact-word { display: none; }
  .app-device { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
}