:root{
  /* ---- color tokens ---- */
  --bg:#0a0e14;
  --panel:#0f141d;
  --ink:#e8edf4;
  --muted:#8b97a8;
  --line:#1c2430;
  --accent:#3da9fc;
  --accent-dim:#1f6fb0;
  --accent-ink:#04111e;
  --warn:#f4b860;

  /* ---- typography tokens ---- */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fz-cap:11px;
  --fz-xs:12px;
  --fz-sm:13px;
  --fz-md:14px;
  --fz-base:15px;
  --fz-lg:17px;
  --fz-xl:18px;
  --fz-h3:18px;
  --fz-h2:28px;
  --fz-lead:18px;
  --fz-stat:30px;
  --fz-brand:18px;
  --fw-reg:400;
  --fw-md:600;
  --fw-bold:700;
  --fw-black:800;
  --ls-tight:-.02em;
  --ls-snug:-.01em;
  --ls-wide:.06em;
  --ls-wider:.1em;
  --ls-widest:.18em;
  --lh-body:1.6;
  --lh-tight:1.04;

  /* ---- spacing scale ---- */
  --sp-1:4px;
  --sp-2:6px;
  --sp-3:8px;
  --sp-4:12px;
  --sp-5:14px;
  --sp-6:16px;
  --sp-7:18px;
  --sp-8:20px;
  --sp-9:22px;
  --sp-10:24px;
  --sp-12:32px;
  --sp-14:34px;
  --sp-16:40px;
  --sp-section:64px;
  --sp-hero:90px;

  /* ---- layout tokens ---- */
  --maxw:1100px;
  --maxw-read:720px;
  --maxw-form:560px;
  --gutter:20px;
  --grid:32px;
  --navh:50px;

  /* ---- radius tokens ---- */
  --r-sm:4px;
  --r-md:6px;
  --r-lg:10px;
  --r-pill:20px;

  /* ---- border tokens ---- */
  --bw:1px;
  --border:var(--bw) solid var(--line);
  --border-accent:var(--bw) solid var(--accent);

  /* ---- effect tokens ---- */
  --t-fast:.12s;
  --t-base:.15s;
  --blur:10px;
  --lift:-2px;
  --z-nav:50;
  --accent-rgb:61,169,252;
  --bg-rgb:10,14,20;
  --warn-rgb:244,184,96;
  --accent-ink-rgb:4,18,31;
  --gold:#f5b301;
  --gold-dim:#d8ae3a;
  --ok:#39d98a;
  --hal:#ff2b1f;
  --hal-rgb:255,43,31;
  --ink-dim:#c9d3e0;
  --fz-2xs:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fz-base);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line) var(--bw),transparent var(--bw)),
    linear-gradient(90deg,var(--line) var(--bw),transparent var(--bw));
  background-size:var(--grid) var(--grid);
  background-position:calc(-1 * var(--bw)) calc(-1 * var(--bw));
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
header.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(var(--blur));
  border-bottom:var(--border);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--navh)}
.brand{font-family:var(--mono);font-weight:var(--fw-md);letter-spacing:.04em;font-size:var(--fz-brand);color:var(--ink);text-decoration:none;cursor:pointer}
.brand b{color:var(--accent)}
.navlinks{display:flex;gap:var(--sp-9);font-family:var(--mono);font-size:var(--fz-sm)}
.navlinks a{color:var(--muted)}
.navlinks a:hover,.navlinks a.active{color:var(--ink);text-decoration:none}
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:6px;width:40px;height:34px;background:none;border:var(--border);color:var(--ink);border-radius:var(--r-sm);padding:0 9px;cursor:pointer}
.menu-btn span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:var(--t-base)}

/* hero */
.hero{padding:var(--sp-hero) 0 70px;border-bottom:var(--border)}
.eyebrow{font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-7)}
.hero h1{font-size:clamp(34px,6vw,62px);line-height:var(--lh-tight);font-weight:var(--fw-black);letter-spacing:var(--ls-tight);max-width:14ch}
.hero h1 .ln{display:block}
.hero p.lead{margin-top:var(--sp-9);max-width:54ch;color:var(--muted);font-size:var(--fz-xl)}
.cta-row{margin-top:var(--sp-14);display:flex;gap:var(--sp-5);flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:var(--fz-md);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-md);border:var(--border-accent);background:var(--accent);color:var(--accent-ink);font-weight:var(--fw-md);cursor:pointer;transition:var(--t-base)}
.btn:hover{background:var(--accent-dim);border-color:var(--accent-dim);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* sections */
section{padding:var(--sp-section) 0;border-bottom:var(--border)}
.sec-head{display:flex;align-items:baseline;gap:var(--sp-5);margin-bottom:var(--sp-14)}
.sec-num{font-family:var(--mono);color:var(--accent);font-size:var(--fz-md)}
.sec-head h2{font-size:var(--fz-h2);font-weight:var(--fw-bold);letter-spacing:var(--ls-snug)}
.sec-sub{color:var(--muted);max-width:60ch;margin-top:calc(-1 * var(--sp-9));margin-bottom:var(--sp-12);font-size:var(--fz-base)}

/* service cards */
.grid{display:grid;gap:var(--sp-7)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--panel);border:var(--border);border-radius:var(--r-lg);padding:var(--sp-10);transition:var(--t-base)}
.card:hover{border-color:var(--accent-dim);transform:translateY(var(--lift))}
.card .tag{font-family:var(--mono);font-size:var(--fz-cap);color:var(--accent);letter-spacing:var(--ls-wider);text-transform:uppercase}
.card h3{margin:var(--sp-4) 0 var(--sp-3);font-size:var(--fz-h3);display:flex;align-items:center}
.card .tag{display:block}
.card p{color:var(--muted);font-size:var(--fz-md)}

/* build log / portfolio */
.log{display:flex;flex-direction:column;gap:var(--sp-3)}
.entry{display:grid;grid-template-columns:64px 1fr auto;gap:var(--sp-7);align-items:center;padding:var(--sp-7) var(--sp-8);border-radius:var(--r-lg);transition:var(--t-base);text-decoration:none;color:inherit}
/* clickable rows = filled bar, obviously tappable */
.entry-link{background:var(--panel);border:var(--border);border-left:3px solid var(--accent);cursor:pointer}
.entry-link:hover,.entry-link:focus{background:var(--accent);border-color:var(--accent);text-decoration:none;transform:translateX(3px)}
.entry-link:hover .idx,.entry-link:focus .idx,
.entry-link:hover .meta h3,.entry-link:focus .meta h3,
.entry-link:hover .meta p,.entry-link:focus .meta p,
.entry-link:hover .ver,.entry-link:focus .ver{color:var(--accent-ink);background:rgba(var(--accent-ink-rgb),.14);border-color:rgba(var(--accent-ink-rgb),.55);font-weight:700}
.entry-link:active{transform:translateX(1px) scale(.998)}
.entry-link .arrow{color:var(--accent);font-size:var(--fz-md)}
.entry-link:hover .arrow,.entry-link:focus .arrow{color:var(--accent-ink)}
/* private rows = flat, not a button */
.entry-private{background:transparent;border:var(--border);border-left:3px solid var(--muted);opacity:.92}
.entry .idx{font-family:var(--mono);color:var(--accent-dim);font-size:var(--fz-sm)}
.entry .meta h3{font-size:var(--fz-lg);font-weight:var(--fw-md);color:var(--ink)}
.entry .meta p{color:var(--muted);font-size:var(--fz-sm);margin-top:3px}
.entry .ver{font-family:var(--mono);font-size:var(--fz-cap);font-weight:700;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);padding:var(--sp-1) 9px;border-radius:var(--r-pill);white-space:nowrap}
.entry .ver.live{color:var(--accent);background:rgba(var(--accent-rgb),.12);border-color:rgba(var(--accent-rgb),.5)}

/* stats strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-7)}
.stat{background:var(--panel);border:var(--border);border-radius:var(--r-lg);padding:var(--sp-9)}
.stat .n{font-family:var(--mono);font-size:var(--fz-stat);color:var(--accent);font-weight:var(--fw-md)}
.stat .l{color:var(--muted);font-size:var(--fz-sm);margin-top:var(--sp-1)}

/* contact form */
.form{display:grid;gap:var(--sp-6);max-width:var(--maxw-form)}
.form label{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);letter-spacing:var(--ls-wide);text-transform:uppercase}
.form input,.form textarea{width:100%;background:var(--panel);border:var(--border);border-radius:var(--r-md);color:var(--ink);padding:var(--sp-4) var(--sp-5);font-family:var(--sans);font-size:var(--fz-base);margin-top:var(--sp-2)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form textarea{min-height:130px;resize:vertical}

/* footer */
footer.ft{padding:var(--sp-16) 0;color:var(--muted);font-size:var(--fz-sm)}
.ft .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-5)}
.ft .mono{font-family:var(--mono)}

/* utility */
.read{max-width:var(--maxw-read)}
.lead-block{max-width:none}
.mt-lg{margin-top:var(--sp-10)}

@media(max-width:760px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:var(--navh);left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:var(--border);padding:var(--sp-6) var(--gutter);gap:var(--sp-5)}
  .menu-btn{display:flex}
  .grid.cols-3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .entry{grid-template-columns:36px 1fr;gap:var(--sp-4);padding:var(--sp-6)}
  .entry .ver{grid-column:2;justify-self:start;margin-top:var(--sp-1)}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* payment page */
.pay-card{display:flex;flex-direction:column}
.pay-card h3{margin-bottom:var(--sp-4)}
.pay-detail{display:grid;grid-template-columns:auto;gap:var(--sp-1);margin-bottom:var(--sp-7);font-size:var(--fz-sm)}
.pay-detail .k{font-family:var(--mono);font-size:var(--fz-cap);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--muted);margin-top:var(--sp-2)}
.pay-detail .v{color:var(--ink)}
.pay-detail .v.mono{font-family:var(--mono);font-size:var(--fz-xs)}
.pay-card .btn,.pay-card .btn.ghost{margin-top:auto;text-align:center}

/* capability chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.chip{font-family:var(--mono);font-size:var(--fz-sm);color:var(--ink);background:var(--panel);border:var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5)}

/* hero callout */
.callout{margin-top:var(--sp-9);max-width:60ch;color:var(--ink);font-size:var(--fz-base);border-left:3px solid var(--accent);padding-left:var(--sp-6);background:var(--panel);border:var(--border);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6)}

/* card icons */
.card .ico{display:inline-flex;width:24px;height:24px;margin:0 var(--sp-3) 0 0;color:var(--accent);vertical-align:middle;flex:0 0 auto}
.card .ico svg{width:100%;height:100%;display:block}
.card h3{margin:var(--sp-4) 0 var(--sp-3);font-size:var(--fz-h3);display:flex;align-items:center}

/* hero trench flythrough */
.hero-trench{position:relative;overflow:hidden;min-height:60vh}
.trench-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.trench-bg canvas{display:block;width:100%;height:100%}
.hero-trench .hero-content{position:relative;z-index:1}
/* darken/vignette so text stays readable over the animation */
.hero-trench::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 30% 40%, transparent 0%, rgba(var(--bg-rgb),.55) 60%, rgba(var(--bg-rgb),.85) 100%)}

/* steer hint */
.steer-hint{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);margin-bottom:var(--sp-4);opacity:.8}

/* steering joystick */
.joystick{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:3;width:96px;height:96px;border-radius:50%;
  background:rgba(15,20,29,.55);border:1px solid var(--accent);
  backdrop-filter:blur(4px);touch-action:none;cursor:grab;
  box-shadow:0 0 18px rgba(var(--accent-rgb),.25) inset, 0 4px 16px rgba(0,0,0,.4)}
.joystick-knob{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--accent);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.7);transition:none;pointer-events:none}
.joystick:active{cursor:grabbing}
@media(max-width:760px){.joystick{width:104px;height:104px;bottom:14px}}

/* recovery / level button */
.recover-btn{position:absolute;left:50%;bottom:122px;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:rgba(15,20,29,.7);border:1px solid var(--accent);
  border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;backdrop-filter:blur(4px);
  box-shadow:0 0 12px rgba(var(--accent-rgb),.25)}
.recover-btn:hover{background:var(--accent);color:var(--accent-ink)}
@media(max-width:760px){.recover-btn{bottom:128px}}

/* collision toggle */
.collide-btn{position:absolute;left:50%;bottom:152px;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:rgba(15,20,29,.7);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;backdrop-filter:blur(4px)}
.collide-btn.is-on{color:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.25)}
@media(max-width:760px){.collide-btn{bottom:158px}}

/* reset button (sits beside level) */
.recover-btn{left:calc(50% - 48px)}
.reset-btn{position:absolute;left:calc(50% + 48px);bottom:122px;transform:translateX(-50%);z-index:4;
  font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);background:rgba(15,20,29,.7);border:1px solid var(--warn);
  border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;backdrop-filter:blur(4px);
  box-shadow:0 0 12px rgba(var(--warn-rgb),.2)}
.reset-btn:hover{background:var(--warn);color:#1a1205}
@media(max-width:760px){.reset-btn{bottom:128px}}

/* flight FX hidden by default; shown only when html.fx-on is present */
.trench-bg,.joystick,.recover-btn,.reset-btn,.collide-btn,.steer-hint{display:none}
html.fx-on .trench-bg,
html.fx-on .joystick,
html.fx-on .recover-btn,
html.fx-on .reset-btn,
html.fx-on .collide-btn,
html.fx-on .steer-hint{display:block}
html.fx-on .joystick{display:flex}

/* settings page */
.setting-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-8);
  background:var(--panel);border:var(--border);border-radius:var(--r-lg);padding:var(--sp-10)}
.setting-row h3{font-size:var(--fz-h3);margin-bottom:var(--sp-3)}
.setting-row .muted{color:var(--muted);font-size:var(--fz-md)}
.setting-ctrl{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4);white-space:nowrap}
.fxstate{font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:var(--border);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4)}
.fxstate.is-on{color:var(--accent);border-color:var(--accent)}
@media(max-width:760px){.setting-row{flex-direction:column}.setting-ctrl{align-items:flex-start}}

/* BTC payment cards (QR) */
.btc-card{align-items:flex-start}
.btc-note{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin:calc(-1 * var(--sp-2)) 0 var(--sp-5)}
.btc-qr{display:block;width:180px;max-width:100%;height:auto;border-radius:var(--r-md);background:#fff;padding:8px;margin-bottom:var(--sp-6)}

/* showcase gallery */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
.shot{position:relative;display:block;border:var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);text-decoration:none;transition:var(--t-base)}
.shot:hover{border-color:var(--accent);transform:translateY(var(--lift));text-decoration:none}
.shot-img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;object-position:top center}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4) var(--sp-5);
  font-family:var(--mono);font-size:var(--fz-sm);color:var(--ink);
  background:linear-gradient(transparent, rgba(var(--bg-rgb),.92));}
.shot-arrow{color:var(--accent)}
@media(max-width:900px){.shots{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.shots{grid-template-columns:repeat(2,1fr)}}

/* ===== compact 2-col cards on mobile — HOW IT WORKS only ===== */
@media(max-width:760px){
  .how-compact .grid.cols-3{grid-template-columns:1fr 1fr;gap:var(--sp-4)}
  .how-compact .card{padding:var(--sp-5)}
  .how-compact .card .tag{font-size:10px}
  .how-compact .card h3{font-size:var(--fz-md);margin:var(--sp-3) 0 var(--sp-2)}
  .how-compact .card .ico{width:18px;height:18px;margin-right:var(--sp-2)}
  .how-compact .card p{font-size:var(--fz-sm);line-height:1.45}
}
@media(max-width:420px){
  .how-compact .card h3{font-size:var(--fz-sm)}
  .how-compact .card p{font-size:var(--fz-xs)}
}

/* pay method footnote */
.pay-foot{color:var(--muted);font-size:var(--fz-sm);line-height:1.5;margin:var(--sp-4) 0 var(--sp-6)}

/* guarantee / step cards — glow driven by JS sequence (.is-glowing) */
.how-compact .card{transition:box-shadow .35s ease, border-color .35s ease}
.how-compact .card.is-glowing{border-color:rgba(var(--accent-rgb),1);box-shadow:0 0 22px 2px rgba(var(--accent-rgb),.5)}
.how-compact .card.is-glowing .ico{filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.8))}
.how-compact .card.is-glowing-strong{border-color:rgba(var(--accent-rgb),1);box-shadow:0 0 34px 5px rgba(var(--accent-rgb),.75)}
.how-compact .card.is-glowing-strong .ico{filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),1))}
@media(prefers-reduced-motion:reduce){
  .how-compact .card.is-glowing,.how-compact .card.is-glowing-strong{box-shadow:0 0 16px 1px rgba(var(--accent-rgb),.3)}
}

/* rebuild request mini-form */
.rebuild-form{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.rebuild-form input{background:var(--bg);border:var(--border);border-radius:var(--r-md);color:var(--ink);
  padding:var(--sp-3) var(--sp-4);font-family:var(--sans);font-size:var(--fz-sm);width:100%}
.rebuild-form input:focus{outline:none;border-color:var(--accent)}
.rebuild-form .btn{width:100%;text-align:center;padding:var(--sp-3) var(--sp-4);font-size:var(--fz-sm)}
.rebuild-note{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted)}

/* expanded footer */
.ft-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4)}
.share-btn{background:transparent;color:var(--accent);border:1.5px solid var(--accent);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-8);font-family:var(--sans);
  font-size:var(--fz-base);font-weight:700;cursor:pointer;transition:background .2s,box-shadow .2s;
  margin-bottom:var(--sp-2)}
.share-btn:hover,.share-btn:focus{background:rgba(var(--accent-rgb),.10);box-shadow:0 0 20px rgba(var(--accent-rgb),.25)}
.ft-copy{color:var(--ink);font-size:var(--fz-base);line-height:1.4}
.ft-copy-sub{color:var(--muted);margin-top:calc(var(--sp-4)*-1 + 2px)}
.ft-ver{color:var(--muted);font-size:var(--fz-xs);margin-top:var(--sp-2)}
.ft-newest{color:var(--ok);font-weight:600}

/* paid offer card */
.offer-card{border-color:var(--accent);background:linear-gradient(180deg, rgba(var(--accent-rgb),.06), transparent)}
.offer-card .tag{color:var(--accent)}
.offer-card .btn{margin-top:var(--sp-5);display:inline-block}

/* offer card — glow level driven by JS (--g 0..1) for organic, randomized pulse */
.offer-card{
  --g:0;
  border-color:rgba(var(--accent-rgb),calc(.4 + .6 * var(--g)));
  box-shadow:0 0 calc(8px + 34px * var(--g)) calc(1px + 5px * var(--g)) rgba(var(--accent-rgb),calc(.15 + .55 * var(--g)));
}
.offer-card .ico{filter:drop-shadow(0 0 calc(10px * var(--g)) rgba(var(--accent-rgb),var(--g)))}
/* glow-only card: same organic pulse, no offer gradient (e.g. popular Rebuild) */
.glow-card{
  --g:0;
  border-color:rgba(var(--accent-rgb),calc(.4 + .6 * var(--g)));
  box-shadow:0 0 calc(8px + 30px * var(--g)) calc(1px + 4px * var(--g)) rgba(var(--accent-rgb),calc(.12 + .5 * var(--g)));
}
.glow-card .ico{filter:drop-shadow(0 0 calc(10px * var(--g)) rgba(var(--accent-rgb),var(--g)))}
@media(prefers-reduced-motion:reduce){
  .offer-card{--g:.5 !important}
  .glow-card{--g:.5 !important}
}

/* "…and many more" closers */
.shot-more{display:flex;align-items:center;justify-content:center;aspect-ratio:9/16;border-style:dashed;background:transparent}
.shot-more-txt{font-family:var(--mono);font-size:var(--fz-sm);color:var(--muted);text-align:center;padding:var(--sp-4)}
.entry-more{justify-content:flex-start;border-style:dashed;opacity:.85}
.entry-more h3{color:var(--muted);font-family:var(--mono);font-size:var(--fz-md)}

/* hero price strip */
.price-strip{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-2)}
.price-item{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:var(--border);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5)}
.price-label{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.price-val{font-family:var(--sans);font-weight:800;font-size:var(--fz-h3);color:var(--accent);line-height:1}
/* SEO report chip = gold-tinted offer accent */
.price-item-report{border-color:rgba(245,179,1,.5);background:linear-gradient(180deg,rgba(245,179,1,.06),var(--panel))}
.price-item-report .price-val{color:var(--gold)}
.price-item-report .price-label{color:var(--gold-dim)}
@media(max-width:520px){.price-strip{gap:var(--sp-2)}.price-item{padding:var(--sp-2) var(--sp-4);flex:1 1 44%;min-width:0}}

/* price item explainers (tap/hover the ⓘ) */
.price-top{display:flex;align-items:center;gap:var(--sp-2)}
.price-info{background:none;border:none;color:var(--accent);font-size:var(--fz-sm);cursor:pointer;padding:0;line-height:1;opacity:.8}
.price-info:hover{opacity:1}
.price-explain{display:none;margin-top:var(--sp-3);font-family:var(--sans);font-size:var(--fz-sm);
  color:var(--muted);line-height:1.5;max-width:34ch}
.price-item.open .price-explain{display:block}
.price-item.open{flex:1 1 100%}
/* on wider screens, reveal on hover too */
@media(hover:hover) and (min-width:760px){
  .price-item:hover .price-explain{display:block}
}

/* deeper 'More' layer inside price explainer */
.price-more{display:block;margin-top:var(--sp-3);background:none;border:none;color:var(--accent);
  font-family:var(--mono);font-size:var(--fz-xs);cursor:pointer;padding:0;letter-spacing:.05em}
.price-more:hover{text-decoration:underline}
.price-deep{display:none;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);
  font-size:var(--fz-sm);color:var(--muted);line-height:1.55}
.price-item.more-open .price-deep{display:block}

/* "I'm interested" trigger inside price popup */
.interested-btn{display:inline-block;margin-top:var(--sp-4);background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:var(--r-md);padding:var(--sp-2) var(--sp-4);font-family:var(--mono);
  font-size:var(--fz-xs);font-weight:600;cursor:pointer;letter-spacing:.04em}
.interested-btn:hover{filter:brightness(1.08)}

/* interest modal */
.imodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,14,.78);padding:var(--sp-5);backdrop-filter:blur(3px)}
.imodal[hidden]{display:none}
.imodal-box{background:var(--panel);border:1px solid var(--accent);border-radius:var(--r-lg);
  padding:var(--sp-6);max-width:440px;width:100%;max-height:90vh;overflow:auto;position:relative;
  box-shadow:0 0 40px rgba(var(--accent-rgb),.25)}
.imodal-close{position:absolute;top:var(--sp-4);right:var(--sp-4);background:none;border:none;
  color:var(--muted);font-size:var(--fz-h3);cursor:pointer;line-height:1}
.imodal-close:hover{color:var(--ink)}
.imodal-title{margin:0 0 var(--sp-2);font-size:var(--fz-h3);color:var(--ink)}
.imodal-sub{margin:0 0 var(--sp-4);font-family:var(--mono);font-size:var(--fz-xs);color:var(--accent)}
.imodal-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.ichip{background:var(--bg);border:var(--border);border-radius:999px;color:var(--ink);
  padding:6px var(--sp-4);font-family:var(--sans);font-size:var(--fz-sm);cursor:pointer}
.ichip.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.imodal-msg{width:100%;min-height:80px;background:var(--bg);border:var(--border);border-radius:var(--r-md);
  color:var(--ink);padding:var(--sp-3);font-family:var(--sans);font-size:var(--fz-sm);resize:vertical;margin-bottom:var(--sp-4)}
.imodal-msg:focus{outline:none;border-color:var(--accent)}
.imodal-pick{margin:0 0 var(--sp-3);font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.imodal-channels{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.ichan{background:var(--bg);border:1px solid var(--accent);border-radius:var(--r-md);color:var(--accent);
  padding:var(--sp-3);font-family:var(--mono);font-size:var(--fz-sm);font-weight:600;cursor:pointer}
.ichan:hover{background:var(--accent);color:var(--accent-ink)}

/* work card favicon + domain line */
.entry-dom{display:inline-flex;align-items:center;gap:6px;margin:3px 0 2px}
.entry-dom .fav{width:16px;height:16px;border-radius:4px;background:#182430;flex:0 0 16px;object-fit:cover}
.entry-dom-txt{font-family:var(--mono);font-size:var(--fz-cap);color:var(--accent)}
.entry-link:hover .entry-dom-txt,.entry-link:focus .entry-dom-txt{color:var(--accent-ink)}

/* rebuild 3-tier block */
.rebuild-sec .sec-sub{max-width:70ch}
.rebuild-tiers{margin-top:var(--sp-4)}
.rebuild-tier{display:flex;flex-direction:column}
.rebuild-tier .btn{margin-top:auto;align-self:flex-start}
.rebuild-tier.picked{outline:2px solid var(--accent);outline-offset:2px}
.rebuild-form-wide{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5);align-items:center}
.rebuild-form-wide input{flex:1 1 220px;min-width:0;background:#070b10;border:var(--border);color:var(--ink);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-family:var(--sans);font-size:var(--fz-sm)}
.rebuild-form-wide #rb-tier{color:var(--accent);font-family:var(--mono)}
.rebuild-form-wide .btn{flex:0 0 auto}
.rebuild-form-wide .rebuild-note{flex:1 1 100%;color:var(--muted);font-family:var(--mono);font-size:var(--fz-xs)}

/* service price chips under the main strip */
.price-services{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:var(--sp-3) 0 var(--sp-2)}
.price-services .ps-label{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);width:100%;margin-bottom:2px}
.ps-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--fz-xs);
  color:var(--ink);background:var(--panel);border:var(--border);border-radius:var(--r-pill);
  padding:6px 11px;text-decoration:none;transition:border-color .2s,background .2s}
.ps-chip b{color:var(--accent);font-weight:700}
.ps-chip:hover,.ps-chip:focus{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
/* smooth scroll + target highlight for services */
html{scroll-behavior:smooth}
.svc{scroll-margin-top:58px;position:relative}
.svc-back{display:inline-block;margin-top:var(--sp-3);font-family:var(--mono);font-size:var(--fz-xs);
  color:var(--accent);text-decoration:none;opacity:.8}
.svc-back:hover{opacity:1;text-decoration:underline}
.svc:target{outline:none}
@keyframes svcpulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}100%{box-shadow:0 0 0 22px rgba(var(--accent-rgb),0)}}
#price-strip{scroll-margin-top:58px}

/* service cards styled like the top price cards (second row) */
.price-strip-svc{margin-top:var(--sp-3);align-items:stretch}
.ps-label-full{width:100%;font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);margin-bottom:var(--sp-1)}
.svc-chip{text-decoration:none;cursor:pointer;justify-content:space-between}
.svc-chip .price-top{min-height:2.6em;display:flex;align-items:flex-start}
.svc-chip .price-val{font-size:var(--fz-h3);margin-top:auto}
.svc-chip .from{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);font-weight:500}
.svc-chip .per{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);font-weight:500}
.svc-chip .price-val-incl{color:var(--ok);font-size:var(--fz-h3)}
.svc-chip:hover,.svc-chip:focus{border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
@media(max-width:520px){.svc-chip{flex:1 1 44%}}

/* JS-driven flash highlight when scrolled to a service */


/* HAL 9000 typewriter cursor for the rebuild sub-line */
.hal-line{position:relative}
.hal-cursor{display:inline-block;width:.62em;height:1.05em;margin-left:2px;vertical-align:text-bottom;
  background:var(--hal);border-radius:1px;
  box-shadow:0 0 8px rgba(var(--hal-rgb),.9),0 0 18px rgba(var(--hal-rgb),.55);
  animation:halblink 1s steps(1) infinite}
@keyframes halblink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.hal-line.hal-typing .hal-cursor{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.hal-cursor{animation:none;opacity:.85}}

/* package detail cards (scroll targets for the top price cards) */
.price-nav{text-decoration:none;cursor:pointer}
.price-nav:hover,.price-nav:focus{border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
.pkg-grid{margin-top:var(--sp-4)}
.pkg-card{scroll-margin-top:58px;display:flex;flex-direction:column}
.pkg-card .interested-btn{align-self:flex-start;margin-top:var(--sp-2)}
.pkg-card .svc-back{margin-top:var(--sp-3)}
.pkg-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.pkg-name{font-family:var(--sans);font-weight:700;font-size:var(--fz-h4)}
.pkg-price{font-family:var(--sans);font-weight:800;font-size:var(--fz-h3);color:var(--accent)}
.pkg-card.offer-card .pkg-price{color:var(--gold)}
/* flash highlight now also covers package cards */


/* hero headline reveal — staggered rise + accent flash on the punchline */
.hero h1 .ln{opacity:0;transform:translateY(.55em);animation:heroRise .75s cubic-bezier(.2,.75,.2,1) forwards}
.hero h1 .ln:nth-child(1){animation-delay:.12s}
.hero h1 .ln:nth-child(2){animation-delay:.42s}
@keyframes heroRise{to{opacity:1;transform:translateY(0)}}
/* "ship." gets a brief accent glow after it lands */
.hero h1 .ln:nth-child(2){position:relative;
  text-shadow:0 0 0 rgba(var(--accent-rgb),0);animation:heroRise .75s cubic-bezier(.2,.75,.2,1) .42s forwards, shipGlow 1.5s ease-out 1.05s 1}
@keyframes shipGlow{0%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}35%{text-shadow:0 0 22px rgba(var(--accent-rgb),.7)}100%{text-shadow:0 0 0 rgba(var(--accent-rgb),0)}}

/* showcase — private (non-linked) marker */
.shot-priv{font-family:var(--mono);font-size:var(--fz-2xs,10px);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle}


/* peer-to-peer "how it works" diagram */
.p2p-how{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.p2p-how-label{display:block;font-family:var(--mono);font-size:var(--fz-2xs,10px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.p2p-diagram{width:100%;max-width:330px;height:auto;display:block;margin:0 auto}
.p2p-diagram .pd-panel-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.p2p-diagram .pd-panel-label-hi{fill:var(--accent)}
.p2p-diagram .pd-cap{font-family:var(--mono);font-size:9px;fill:var(--muted)}
.p2p-diagram .pd-cap-hi{fill:var(--ink-dim)}
.p2p-diagram .pd-nlabel{font-family:var(--mono);font-size:9px;fill:var(--ink-dim)}
.p2p-diagram .pd-node{fill:var(--bg);stroke:var(--muted);stroke-width:1.6}
.p2p-diagram .pd-node-you,.p2p-diagram .pd-node-hi{stroke:var(--accent)}
.p2p-diagram .pd-server{fill:rgba(148,163,184,.07);stroke:var(--muted);stroke-width:1.6}
.p2p-diagram .pd-server-label{font-family:var(--mono);font-size:8px;letter-spacing:.1em;fill:var(--muted)}
.p2p-diagram .pd-data{fill:var(--gold)}
.p2p-diagram .pd-div{stroke:var(--line);stroke-width:1}
.p2p-diagram .pd-line{stroke:var(--line);stroke-width:1.6;fill:none;stroke-dasharray:4 5;stroke-linecap:round;animation:pdDash 1.2s linear infinite}
.p2p-diagram .pd-line-p2p{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 5;animation-duration:.9s}
.p2p-diagram .pd-mask{fill:var(--bg)}
.p2p-diagram .pd-lock-body{fill:rgba(var(--accent-rgb),.14);stroke:var(--accent);stroke-width:1.4}
.p2p-diagram .pd-lock{stroke:var(--accent);stroke-width:1.5;fill:none}
.p2p-diagram .pd-lock-key{fill:var(--accent)}
@keyframes pdDash{to{stroke-dashoffset:-18}}


/* jump highlight — invert to blue + glow, starts on arrival, fades back over 1.5s */
.price-nav,.svc-chip{scroll-margin-top:58px}
.svc-flash{animation:flashInvert 1.5s ease-out 1}
.svc-flash *{animation:flashInvertText 1.5s ease-out 1}
@keyframes flashInvert{0%{background-color:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 0 26px rgba(var(--accent-rgb),.6)}}
@keyframes flashInvertText{0%{color:var(--accent-ink);fill:var(--accent-ink)}}

/* HAL typewriter pause/repeat control */
.hal-ctrl{display:inline-flex;align-items:center;margin:0 0 var(--sp-6);font-family:var(--mono);font-size:var(--fz-xs);letter-spacing:.04em;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 14px;cursor:pointer;transition:border-color .15s,color .15s}
.hal-ctrl:hover,.hal-ctrl:focus{border-color:var(--accent);color:var(--accent)}

/* instant estimate tool */
.est{margin-top:var(--sp-12);padding:var(--sp-10);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.est-kicker{display:inline-block;font-family:var(--mono);font-size:var(--fz-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.est-title{font-family:var(--sans);font-weight:800;font-size:var(--fz-h3);margin:0 0 4px;line-height:1.15}
.est-sub{color:var(--muted);font-size:var(--fz-sm);margin:0 0 var(--sp-6);line-height:1.5}
.est-input{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:var(--fz-base);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.est-input:focus{outline:none;border-color:var(--accent)}
.est-lab{display:block;font-family:var(--mono);font-size:var(--fz-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:var(--sp-6) 0 7px}
.est-opts{display:flex;flex-wrap:wrap;gap:8px}
.est-opt{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.est-opt:hover{border-color:var(--accent);color:var(--ink)}
.est-opt.is-sel{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:700}
.est-go{margin-top:var(--sp-8)}
.est-result{margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--line)}
.est-range{font-family:var(--sans);font-weight:800;font-size:var(--fz-stat);color:var(--accent);line-height:1}
.est-note{color:var(--muted);font-size:var(--fz-sm);margin:8px 0 var(--sp-6);line-height:1.5}
.est-fine{color:var(--muted);font-size:var(--fz-2xs);margin:var(--sp-4) 0 0;opacity:.8}

/* estimator — live scan UI */
.est-scan-row{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.est-scan-row .est-input{flex:1 1 180px;min-width:0}
.est-scan{font-family:var(--mono);font-size:var(--fz-xs);white-space:nowrap;color:var(--accent-ink);background:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:10px 16px;cursor:pointer;font-weight:700;transition:opacity .15s}
.est-scan:hover{opacity:.9}
.est-scan:disabled{opacity:.55;cursor:default}
.est-scan-status{margin-top:8px;font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted)}
.est-scan-status.err{color:var(--warn)}
.est-scan-out{margin-top:var(--sp-6);padding:var(--sp-6);border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.est-find-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.est-score{font-family:var(--sans);font-weight:800;font-size:var(--fz-h4);padding:2px 12px;border-radius:var(--r-pill);line-height:1.3}
.est-score.good{color:var(--ok);border:1px solid var(--ok)}
.est-score.ok{color:var(--gold);border:1px solid var(--gold)}
.est-score.bad{color:var(--warn);border:1px solid var(--warn)}
.est-find-title{font-family:var(--mono);font-size:var(--fz-xs);color:var(--muted)}
.est-flags{margin:0;padding-left:20px;color:var(--ink);font-size:var(--fz-sm);line-height:1.6}
.est-flags li{margin:3px 0}
.est-flags li.ok{color:var(--ok);list-style:none;margin-left:-20px}

/* hero — launch spotlight for the free site scan */
#estimate{scroll-margin-top:58px}
.scan-cta{display:flex;align-items:center;gap:12px;margin:var(--sp-6) 0;padding:14px 18px;border:1.5px solid var(--accent);border-radius:12px;background:rgba(var(--accent-rgb),.08);text-decoration:none;color:var(--ink);transition:background .15s;animation:scanPulse 2.6s ease-in-out infinite}
.scan-cta:hover,.scan-cta:focus{background:rgba(var(--accent-rgb),.14)}
.scan-cta-ic{font-size:1.4em;line-height:1}
.scan-cta-txt{flex:1;font-size:var(--fz-sm);line-height:1.45}
.scan-cta-txt strong{color:var(--accent)}
.scan-cta-arrow{color:var(--accent);font-weight:700;font-size:1.2em}
@keyframes scanPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}50%{box-shadow:0 0 22px 0 rgba(var(--accent-rgb),.28)}}
@media(max-width:520px){.scan-cta{gap:10px;padding:12px 14px}.scan-cta-txt{font-size:var(--fz-xs)}}