/* ROOT VPN website styles. One brand system shared with the desktop + mobile
   apps: deep green ground, emerald signature gradient (Option C "Emerald
   Signature", green ramp anchored #159B6B), Space Grotesk display + Inter body.
   Boldness spent in ONE place: the peer-mesh, animated as traffic flowing
   through a network of consenting peers. Motion is production-polish restraint:
   purposeful reveals + the one signature, no decorative pulsing.
   This file is the single palette source for every page; generated pages get
   their inline helpers from site/seo/templates.js which leans on these tokens. */
/* ── Self-hosted brand type (OFL), same families as the desktop app so site
   and app read as one brand. Space Grotesk = display / wordmark / prices.
   Inter = running body. Local woff2 only (no third-party font requests). ── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/space-grotesk-700.woff2') format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/inter-700.woff2') format('woff2');
}

:root {
  /* Green/white palette matched to the ROOT VPN desktop app: deep green ground
     + emerald accent. Variable NAMES are legacy (blue/mint era) and kept so the
     620+ generated pages referencing them keep working; only VALUES moved. */
  --root-blue: #12B87A; --root-blue-2: #0A7A4D; --root-mint: #0B9A63;
  --root-gradient: linear-gradient(135deg, #17C47F 0%, #12A76A 100%);
  --ink: #FFFFFF; --ink-2: #F6F7F8; --panel: #FFFFFF; --panel-2: #F2F3F5; --line: #E6E8EB;
  --text: #191C1F; --muted: #5C636B; --on-accent: #FFFFFF;
  --warn: #B7791F; --danger: #E11900; --ok: #12B87A;
  /* Centralized helpers so templates carry no hardcoded palette values. */
  --accent-soft: rgba(10,138,87,.16);
  --foot-tint: rgba(24,28,33,.04);
  --grad-a: #17C47F; --grad-b: #12A76A; --ico-b: #12B87A;
  /* Font stack matched to the ROOT VPN desktop app. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  /* brand-node glyph (echoes the mesh mark) — used as a currentColor mask */
  --node-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.2'/%3E%3Ccircle%20cx='5'%20cy='6'%20r='2'/%3E%3Ccircle%20cx='19'%20cy='7'%20r='2'/%3E%3Ccircle%20cx='17.5'%20cy='19'%20r='2'/%3E%3Cpath%20d='M12%2012%205%206M12%2012%2019%207M12%2012%2017.5%2019'%20fill='none'%20stroke='black'%20stroke-width='1.5'/%3E%3C/svg%3E");
  --radius: 18px; --radius-md: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
* { box-sizing: border-box; }
/* Central control of the inline brand-gradient SVG defs stamped on every page.
   CSS wins over the stop-color presentation attributes, so recoloring the
   brand is a one-file change here even for the per-page inline logos. */
#meshGrad stop:first-child { stop-color: var(--grad-a); }
#meshGrad stop:last-child { stop-color: var(--grad-b); }
#icoGrad stop:first-child { stop-color: var(--grad-a); }
#icoGrad stop:last-child { stop-color: var(--ico-b); }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--ink);
  -webkit-font-smoothing: antialiased; line-height: 1.55;
  background-image:
    radial-gradient(120% 55% at 50% -8%, rgba(18,169,104,.05), transparent 60%),
    radial-gradient(90% 50% at 90% 106%, rgba(24,28,33,.025), transparent 55%);
  background-attachment: fixed;
}
a { color: var(--root-mint); text-decoration: none; }
.wrap { width: min(1140px, 92vw); margin: 0 auto; }
.grad { background: var(--root-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-family: var(--display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--root-mint); margin: 0 0 16px; font-weight: 700; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--root-mint); outline-offset: 3px; border-radius: 4px; }

/* ── Nav ── */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px);
  background: rgba(24,28,33,.04); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: 19px; }
/* VPN wordmark: green pill matching the email header lockup (2026-09-11). */
.brand .vpn { color: #04120B; background: #12B87A; padding: 1px 6px; border-radius: 5px; margin-left: 5px; font-size: .62em; letter-spacing: .04em; }
/* Logo mesh mark sits in an app-icon tile: the green mesh glyph on a bordered
   white rounded square. Targets the mark SVG that is a direct child of .brand
   (nav wordmark on index.html + every generated page's renderNav). The footer
   .brand is text-only so it is unaffected. Green mark on white reads well; we
   only add the containing square, the glyph itself is unchanged. */
.brand > svg { width: 32px; height: 32px; padding: 4px; box-sizing: border-box;
  background: #12B87A; border: 1px solid rgba(24,28,33,.12); border-radius: 8px; flex: none; }
/* Thin white rim on the green mesh nodes so the mark pops on the dark tile. */
.brand > svg g { filter:
    drop-shadow(.6px 0 0 #fff) drop-shadow(-.6px 0 0 #fff)
    drop-shadow(0 .6px 0 #fff) drop-shadow(0 -.6px 0 #fff); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.btn) { color: var(--muted); font-size: 14px; font-weight: 600; transition: color .15s; }
.nav-links a:not(.btn):hover { color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-weight: 700;
  border-radius: var(--radius-md); padding: 11px 18px; cursor: pointer; font-size: 14px; border: 1px solid transparent;
  transition: transform .15s var(--ease), filter .15s, border-color .15s, background .15s; }
.btn-primary { background: var(--root-gradient); color: var(--on-accent); box-shadow: 0 4px 12px rgba(24,28,33,.12); }
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: rgba(10,138,87,.4); background: rgba(10,138,87,.05); }
.btn.lg { padding: 14px 26px; font-size: 15px; }

/* ── Hero ── */
.hero { padding: 78px 0 30px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; }
.hero h1 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.55rem); font-weight: 700; letter-spacing: -.03em; margin: 8px 0 18px; line-height: 1.04; }
.hero p.lead { font-size: clamp(1.02rem, 1.55vw, 1.2rem); color: var(--muted); max-width: 520px; margin: 0 0 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hero-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--root-mint); box-shadow: 0 0 8px rgba(10,138,87,.7); }
.hero-note b { color: var(--text); font-weight: 600; }

/* Frame: fits the hero column, ~430px, wide world-map aspect centred. */
.worldmap{
  position:relative; width:100%; max-width:430px; margin-left:auto;
  /* worldmap vars, kept local so the block is portable */
  --wm-land:#31493C;        /* desaturated green-grey land dots */
  --wm-dim:#4A6B59;         /* node resting (offline) tone */
}
.worldmap > svg{ width:100%; height:auto; overflow:visible; display:block; }

/* --- Land dot matrix (baked, static) --- */
.worldmap .land-dots circle{ fill:var(--wm-land); r:1.8px; }

/* --- Connecting arcs between a couple of hubs (emerald, drawn on) --- */
.worldmap .wm-arc{
  fill:none; stroke:var(--root-mint); stroke-width:1.4; stroke-linecap:round;
  opacity:.5; filter:drop-shadow(0 0 3px rgba(10,138,87,.6));
  stroke-dasharray:220 600; animation:wmArc 5.2s cubic-bezier(.22,.61,.36,1) infinite;
}
.worldmap .wm-arc.b{ animation-delay:2.1s; }
@keyframes wmArc{
  0%{ stroke-dashoffset:220; opacity:0; }
  18%{ opacity:.55; }
  60%,100%{ stroke-dashoffset:-600; opacity:0; }
}

/* --- Server nodes: start dim, light EMERALD in a staggered sweep, hold, loop --- */
.worldmap .node{ transform-box:fill-box; transform-origin:center; }
.worldmap .node .core{
  fill:var(--wm-dim); r:4px;
  animation:wmCore 9s ease-in-out infinite;
  animation-delay:calc(var(--i) * .45s);
}
.worldmap .node .ping{
  fill:none; stroke:var(--ok); stroke-width:1.5; r:4px; opacity:0;
  animation:wmPing 9s ease-out infinite;
  animation-delay:calc(var(--i) * .45s);
}
@keyframes wmCore{
  0%   { fill:var(--wm-dim); filter:none; }
  6%   { fill:var(--ok); filter:drop-shadow(0 0 6px rgba(10,138,87,.95)); }
  90%  { fill:var(--ok); filter:drop-shadow(0 0 5px rgba(10,138,87,.8)); }
  100% { fill:var(--wm-dim); filter:none; }
}
@keyframes wmPing{
  0%   { r:4px;  opacity:0; }
  6%   { r:4px;  opacity:.8; }
  34%  { r:17px; opacity:0; }
  100% { r:17px; opacity:0; }
}

/* --- Badge --- */
.worldmap .wm-badge{
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--on-accent);
  background:var(--root-gradient); padding:5px 12px; border-radius:999px;
  white-space:nowrap; box-shadow:0 4px 12px rgba(24,28,33,.14);
  display:inline-flex; align-items:center; gap:6px;
}
.worldmap .wm-badge::before{
  content:""; width:7px; height:7px; border-radius:50%; background:#0B3D2E;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}

/* Reduced motion: no pulsing. Nodes shown static emerald, arcs hidden. */
@media (prefers-reduced-motion: reduce){
  .worldmap .node .core{ animation:none; fill:var(--ok);
    filter:drop-shadow(0 0 4px rgba(10,138,87,.7)); }
  .worldmap .node .ping{ animation:none; opacity:0; }
  .worldmap .wm-arc{ animation:none; opacity:.35; stroke-dasharray:none; }
}

/* use-case cards — an icon, a benefit headline, a plain sentence */
.uc { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--ink-2); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.uc:hover { border-color: rgba(10,138,87,.32); transform: translateY(-2px); }
.uc .ico { flex: none; }
.uc h3 { margin: 2px 0 6px; font-size: 1.06rem; }
.uc p { color: var(--muted); margin: 0; font-size: .93rem; }

/* ── Stats / proof bar (honest facts, not invented numbers) ── */
.proofbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(24,28,33,.04); }
.proofbar .wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 26px 0; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.stat span { font-size: .82rem; color: var(--muted); }

/* ── Trust strip ── */
.trust { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; font-size: 13px; color: var(--muted); }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust .c { color: var(--root-mint); font-weight: 700; }

/* ── Sections ── */
section { padding: 66px 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.section-head h2 { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.35rem); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.section-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: linear-gradient(180deg, var(--panel), var(--ink-2)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; transition: border-color .18s var(--ease), transform .18s var(--ease); }
.card.hoverable:hover { border-color: rgba(10,138,87,.35); transform: translateY(-2px); }
.card h3 { margin: 16px 0 8px; font-size: 1.12rem; letter-spacing: -.01em; }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }
.ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(10,138,87,.18), rgba(10,138,87,.06));
  border: 1px solid rgba(10,138,87,.25); }
.ico svg { width: 24px; height: 24px; fill: none; stroke: url(#icoGrad); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* how-it-works — a real ordered sequence */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.step { position: relative; padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.step::before { counter-increment: step; content: "0" counter(step); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--root-mint); }
.step h3 { margin: 10px 0 8px; font-size: 1.08rem; }
.step p { color: var(--muted); margin: 0; font-size: .93rem; }

/* comparison — the honest wedge (ROOT vs a typical free VPN) */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs .col { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.vs .col.root { border-color: rgba(10,138,87,.4); background: linear-gradient(180deg, rgba(10,138,87,.05), transparent); }
.vs .col h3 { margin: 0 0 16px; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.vs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vs li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--text); }
.vs li .m { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.vs .col.other li { color: var(--muted); }

/* protocols */
.proto { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--ink-2); }
.proto .tag { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--root-mint);
  background: rgba(10,138,87,.1); border: 1px solid rgba(10,138,87,.3); white-space: nowrap; letter-spacing: .02em; }
.proto b { font-size: .98rem; } .proto span { color: var(--muted); font-size: .88rem; }

/* pricing */
.plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan.feature { border-color: rgba(10,138,87,.45); box-shadow: 0 8px 24px rgba(24,28,33,.06); }
.plan .kicker { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.plan .price { font-family: var(--display); font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: .9rem; color: var(--muted); font-weight: 600; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; flex: 1; }
.plan li { font-size: .92rem; color: var(--text); padding-left: 24px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--root-mint); font-weight: 700; }
.plan li.off { color: var(--muted); } .plan li.off::before { content: "—"; color: var(--muted); }
/* "Most popular" chip — custom pill: Space Grotesk, brand-node glyph, subtle
   lift on hover. Keeps the signature gradient fill that flags the featured plan. */
.badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--on-accent); background: var(--root-gradient); padding: 4px 11px 4px 9px; border-radius: 999px; margin-bottom: 10px;
  box-shadow: 0 3px 10px rgba(24,28,33,.12), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.badge::before { content: ""; flex: none; width: 12px; height: 12px; background-color: currentColor;
  -webkit-mask: var(--node-glyph) center / contain no-repeat; mask: var(--node-glyph) center / contain no-repeat; }
.plan.feature:hover .badge { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(24,28,33,.16), inset 0 1px 0 rgba(255,255,255,.22); }
@media (prefers-reduced-motion: reduce){ .badge { transition: none; } .plan.feature:hover .badge { transform: none; } }

/* FAQ accordion */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ink-2); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; transition: transform .2s var(--ease); color: var(--root-mint); }
.faq details[open] summary .chev { transform: rotate(90deg); }
.faq .a { padding: 0 20px 18px; color: var(--muted); font-size: .95rem; }

/* download */
.dl { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.dl .os { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--ink-2); min-width: 200px; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.dl a.os:hover { border-color: rgba(10,138,87,.4); transform: translateY(-1px); }
.dl .os.soon { opacity: .55; }
.dl .os svg { width: 26px; height: 26px; stroke: var(--root-mint); fill: none; stroke-width: 1.6; }
.dl .os b { display: block; } .dl .os span { font-size: 12px; color: var(--muted); }

.cta-band { text-align: center; background: linear-gradient(180deg, var(--panel), var(--ink-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 54px 24px; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -10%, rgba(10,138,87,.16), transparent 60%); pointer-events: none; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 40px 0; margin-top: 40px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--muted); font-size: 13px; margin-right: 18px; }
footer a:hover { color: var(--text); }

/* scroll reveal — one unit per section, subtle, once */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; text-align: center; }
  .hero p.lead { margin-inline: auto; } .hero-cta, .hero-note { justify-content: center; }
  .mesh { margin: 8px auto 0; }
  .grid-3, .plans, .steps, .vs, .proofbar .wrap { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .proofbar .wrap { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .nav-links a:not(.btn):not(.cta-signin) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .globe .arc { animation: none; opacity: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
   Premium landing pass (v7). Daylight palette + vars only. Home-scoped where
   it could touch the 620 generated pages; shared card depth is intentional.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero: signature background (soft aurora mesh + faded dot grid) ── */
.hero-home { padding: 84px 0 40px; }
.hero-home .wrap { position: relative; z-index: 1; }
@media (min-width: 901px) { .hero-home .wrap { grid-template-columns: 1fr 1.06fr; gap: 40px; } }
@media (max-width: 900px) { .hero-home .worldmap { margin: 10px auto 0; } }
.hero-home::before, .hero-home::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* faint dot grid, densest under the map, fading to the edges */
.hero-home::before {
  background-image: radial-gradient(rgba(11,154,99,.14) 1px, transparent 1.4px);
  background-size: 24px 24px; background-position: 0 0;
  -webkit-mask: radial-gradient(120% 90% at 72% 34%, #000 0%, transparent 66%);
          mask: radial-gradient(120% 90% at 72% 34%, #000 0%, transparent 66%);
  opacity: .6;
}
/* slow-drifting emerald aurora behind the map side */
.hero-home::after {
  background:
    radial-gradient(38% 46% at 74% 26%, rgba(18,184,122,.16), transparent 62%),
    radial-gradient(34% 42% at 90% 68%, rgba(23,196,127,.12), transparent 60%),
    radial-gradient(30% 40% at 58% 8%, rgba(11,154,99,.08), transparent 60%);
  animation: heroAurora 20s ease-in-out infinite;
  will-change: transform;
}
@keyframes heroAurora {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.07); }
  100% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
}

/* ── Hero: bigger, more prominent world map ── */
.hero-home .worldmap { max-width: 600px; }
.worldmap .wm-packet { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(18,184,122,.95)); }
.worldmap .wm-packet.p1 { offset-path: path('M250 120 Q330 60 393 98'); animation: wmPacket 5.2s cubic-bezier(.4,0,.6,1) infinite; }
.worldmap .wm-packet.p2 { offset-path: path('M393 98 Q560 40 700 128'); animation: wmPacket 5.2s cubic-bezier(.4,0,.6,1) infinite; animation-delay: 2.1s; }
.worldmap .wm-packet.p3 { offset-path: path('M250 120 Q330 60 393 98'); animation: wmPacket 5.2s cubic-bezier(.4,0,.6,1) infinite; animation-delay: 3.4s; opacity: 0; }
@keyframes wmPacket {
  0%   { offset-distance: 0%;  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── Trust band: honest icon + label chips ── */
.trustband { border-bottom: 1px solid var(--line); background: var(--panel); }
.trustband .wrap { display: flex; flex-wrap: wrap; gap: 10px 12px; justify-content: center; padding: 18px 0; }
.tchip { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text);
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2);
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }
.tchip:hover { border-color: rgba(11,154,99,.4); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(24,28,33,.22); }
.tchip svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--root-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Section rhythm: alternating tint bands ── */
section.band-tint { background: var(--ink-2); }

/* ── Depth: softer, layered shadows on cards + stronger hover ── */
.card, .uc { box-shadow: 0 1px 2px rgba(24,28,33,.04), 0 10px 26px -16px rgba(24,28,33,.14); }
.card.hoverable:hover, .uc:hover { box-shadow: 0 6px 16px -8px rgba(24,28,33,.10), 0 18px 40px -20px rgba(18,169,104,.24); }
.card { transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }
.uc  { transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .22s var(--ease); }

/* ── Premium type scale (home only, keeps generated pages untouched) ── */
.home .section-head { max-width: 720px; }
.home .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.03em; line-height: 1.08; }
.home .section-head p { font-size: 1.08rem; max-width: 620px; margin-inline: auto; }

/* ── Animated underline on in-content links ── */
.card p a, .section-head p a, .cmp-note a, .loc-note a, #plans + p a {
  color: var(--root-mint);
  background-image: linear-gradient(var(--root-mint), var(--root-mint));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .25s var(--ease); padding-bottom: 1px;
}
.card p a:hover, .section-head p a:hover, .cmp-note a:hover, .loc-note a:hover, #plans + p a:hover { background-size: 100% 1.5px; }

/* ── Comparison table ── */
#compare-home .cmp-wrap { max-width: 940px; margin: 0 auto; overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 44px -26px rgba(24,28,33,.28); background: var(--panel); }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 660px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--display); font-weight: 700; font-size: .92rem; color: var(--text); background: var(--ink-2); }
.cmp thead th.cmp-root { color: var(--on-accent); background: var(--root-gradient); }
.cmp tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); }
.cmp td.cmp-root { background: rgba(18,184,122,.07); color: var(--text); font-weight: 500; }
.cmp td.cmp-root b { color: var(--root-blue-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(24,28,33,.02); }
.cmp tbody tr:hover td.cmp-root { background: rgba(18,184,122,.11); }
.cmp .y { color: var(--root-mint); font-weight: 700; }
.cmp .n { color: var(--muted); }
.cmp .mid { color: var(--text); }
.cmp-note { text-align: center; color: var(--muted); font-size: 12.5px; margin: 16px auto 0; max-width: 660px; }

/* ── Pricing: room for the fourth (Enterprise) tier ── */
.plans { gap: 16px; }
.plan { padding: 24px; }
.plan .price-custom { font-size: 1.95rem; }
.plan-ent { border-color: var(--line); }
.plan-ent:hover { border-color: rgba(11,154,99,.4); }
@media (min-width: 1161px) { .plans { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 901px) and (max-width: 1160px) { .plans { grid-template-columns: repeat(2, 1fr); } }

/* ── Reduced motion: freeze the signature, hide packets, static aurora ── */
@media (prefers-reduced-motion: reduce) {
  .hero-home::after { animation: none; }
  .worldmap .wm-packet { display: none; }
}