:root {
  --ink: #f4fff8;
  --muted: #9bb5a6;
  --deep: #03110c;
  --forest: #051912;
  --card: #0a261c;
  --mint: #3ddc97;
  --mint-2: #7dffc4;
  --gold: #e8c36a;
  --line: rgba(61, 220, 151, 0.18);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --radius: 28px;
  --font: "Outfit", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--deep);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--mint), var(--gold));
  z-index: 80; box-shadow: 0 0 18px var(--mint);
}

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(5, 25, 18, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: 0.04em; }
.brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.brand span { color: var(--mint); }
.nav-links { display: flex; gap: 22px; color: var(--muted); font-size: 14px; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-weight: 700; font-family: inherit;
  border-radius: 999px; padding: 12px 20px; transition: transform .25s, box-shadow .25s, background .25s;
  white-space: nowrap; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-mint { background: var(--mint); color: #042015; box-shadow: 0 10px 30px rgba(61,220,151,.28); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-gold { background: var(--gold); color: #2a1c04; }

.hero {
  position: relative; min-height: 92vh; display: grid; place-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3,17,12,.2), rgba(3,17,12,.82)),
    url("./media/hero-dining.jpg") center/cover;
  transform: scale(1.08);
  animation: ken 28s ease-in-out infinite alternate;
  filter: saturate(1.05);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(61,220,151,.18), transparent 42%);
}
@keyframes ken { to { transform: scale(1.18) translate(-2%, -1%); } }
.float-bolt {
  position: absolute; width: min(52vw, 520px); opacity: .12; right: -6%; top: 8%;
  animation: drift 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes drift {
  50% { transform: translateY(24px) rotate(-6deg); }
}
.hero-copy { position: relative; z-index: 2; padding: 90px 0 70px; }
.kicker {
  color: var(--mint); letter-spacing: .28em; text-transform: uppercase; font-size: 12px; font-weight: 700;
}
h1 {
  font-family: var(--display); font-weight: 500; font-size: clamp(42px, 7vw, 92px);
  line-height: .95; margin: 14px 0 18px; max-width: 14ch;
}
h1 em { font-style: italic; color: var(--mint-2); }
.lede { max-width: 46ch; color: #d7efe4; font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.meta-row { display: flex; gap: 28px; margin-top: 40px; color: var(--muted); font-size: 13px; }
.meta-row strong { display: block; color: var(--ink); font-size: 22px; font-family: var(--display); }

.marquee {
  border-block: 1px solid var(--line);
  background: #061c14;
  overflow: hidden; white-space: nowrap; padding: 16px 0;
}
.marquee-track { display: inline-flex; gap: 48px; animation: slide 28s linear infinite; }
.marquee-track span { color: var(--muted); letter-spacing: .18em; text-transform: uppercase; font-size: 13px; }
@keyframes slide { to { transform: translateX(-50%); } }

section { padding: 92px 0; }
.sec-title { font-family: var(--display); font-size: clamp(32px, 4vw, 56px); line-height: 1.05; }
.sec-sub { color: var(--muted); max-width: 52ch; margin-top: 12px; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.shot {
  border-radius: var(--radius); overflow: hidden; position: relative; min-height: 420px;
  box-shadow: var(--shadow);
}
.shot img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.shot-card {
  position: absolute; left: 22px; bottom: 22px; right: 22px;
  background: rgba(5,25,18,.78); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
}
.shot-card b { color: var(--mint); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.card {
  background: linear-gradient(180deg, #0c2d22, #081c16);
  border: 1px solid var(--line); border-radius: 24px; padding: 22px;
  min-height: 220px; transition: transform .35s, border-color .35s;
}
.card:hover { transform: translateY(-8px); border-color: rgba(61,220,151,.45); }
.card img { height: 120px; width: 100%; object-fit: cover; border-radius: 16px; margin-bottom: 14px; }
.card h3 { font-size: 20px; margin-bottom: 8px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.step { padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.num { font-family: var(--display); color: var(--gold); font-size: 36px; }

.download-band {
  position: relative; overflow: hidden; border-radius: 36px;
  padding: 48px; border: 1px solid var(--line);
  background: linear-gradient(135deg, #0a2a1e 0%, #051912 55%, #123226 100%);
}
.download-band::before {
  content: ""; position: absolute; inset: auto -10% -40% auto; width: 380px; height: 380px;
  background: url("./media/bolt.png") center/contain no-repeat; opacity: .16;
  animation: drift 8s ease-in-out infinite;
}
.dl-row { display: flex; justify-content: space-between; gap: 24px; align-items: end; position: relative; }
#apk-tag, #apk-size { color: var(--mint); font-weight: 700; }
.note { color: var(--muted); font-size: 13px; margin-top: 10px; }

.faq { display: grid; gap: 10px; margin-top: 28px; }
details {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
}
summary { cursor: pointer; font-weight: 700; }
details p { color: var(--muted); margin-top: 8px; }

.contact {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center;
}
.trial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.trial-form {
  display: grid; gap: 14px; padding: 28px; border-radius: 28px;
  background: var(--card); border: 1px solid var(--line);
}
.trial-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.trial-form input, .trial-form select {
  font: inherit; font-weight: 500; color: var(--ink);
  background: #03140e; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; outline: none;
}
.trial-form input:focus, .trial-form select:focus { border-color: var(--mint); }
.trial-form .btn { width: 100%; margin-top: 6px; }
.wa {
  display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 28px;
  background: url("./media/hero-tablet.jpg") center/cover;
  min-height: 280px; position: relative; overflow: hidden;
}
.wa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, #03110c 85%); }
.wa > * { position: relative; z-index: 1; }

footer { border-top: 1px solid var(--line); padding: 28px 0 48px; color: var(--muted); font-size: 13px; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.reveal { opacity: 0; transform: translateY(28px); animation: up .9s ease forwards; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .3s; }
@keyframes up { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .split, .grid-3, .steps, .dl-row, .contact, .trial-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .download-band { padding: 28px; }
}


/* ═══ v1.1.59 polish: plans, reveals, micro-animations ═════════════════
   All rules below are additive; nothing above was rewritten.            */

/* Plans grid */
.plans-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; align-items:stretch; }
.plan {
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg,#0c2d22,#071a14);
  border:1px solid var(--line); border-radius:28px; padding:30px 26px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1.1), border-color .35s, box-shadow .35s;
  overflow:hidden;
}
.plan::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 30%, rgba(61,220,151,.08) 45%, rgba(255,255,255,.10) 50%, rgba(61,220,151,.08) 55%, transparent 70%);
  background-size:220% 100%;
  transition:opacity .3s;
}
.plan:hover { transform:translateY(-10px); border-color:rgba(61,220,151,.5); box-shadow:0 34px 70px rgba(0,0,0,.5); }
.plan:hover::after { opacity:1; animation:shine 1.4s ease; }
@keyframes shine { from { background-position:180% 0; } to { background-position:-60% 0; } }
.plan-name { font-family:var(--display); font-size:26px; }
.plan-name.starter { color:var(--mint-2); }
.plan-name.growth { color:var(--mint); }
.plan-name.custom { color:var(--gold); }
.plan-for { color:var(--muted); font-size:13px; margin-top:-6px; }
.plan-price { font-family:var(--display); color:var(--ink); font-size:20px; display:flex; align-items:baseline; gap:2px; }
.plan-price b { font-size:52px; line-height:1; letter-spacing:-.02em; color:var(--gold); text-shadow:0 0 26px rgba(232,195,106,.25); }
.plan-price small { color:var(--muted); font-size:14px; font-family:var(--font); }
.plan-price-custom { font-size:34px !important; color:var(--gold); }
.plan-list { list-style:none; display:grid; gap:9px; margin:12px 0 6px; }
.plan-list li { padding-left:28px; position:relative; color:#d7efe4; font-size:14.5px; }
.plan-list li::before {
  content:"✓"; position:absolute; left:0; top:0;
  width:19px; height:19px; border-radius:7px; display:grid; place-items:center;
  background:rgba(61,220,151,.16); color:var(--mint); font-size:12px; font-weight:900;
}
.plan-cta { margin-top:auto; width:100%; }
.plan-best { text-align:center; color:var(--muted); font-size:12px; border-top:1px dashed var(--line); padding-top:10px; }
.plan.popular {
  border-color:rgba(61,220,151,.65);
  background:linear-gradient(180deg,#0f3527,#081e16);
  box-shadow:0 0 0 1px rgba(61,220,151,.35), 0 30px 80px rgba(61,220,151,.12);
  animation:glowpulse 3.2s ease-in-out infinite;
}
@keyframes glowpulse {
  50% { box-shadow:0 0 0 1px rgba(61,220,151,.6), 0 34px 90px rgba(61,220,151,.22); }
}
.plan-ribbon {
  position:absolute; top:16px; right:-34px; transform:rotate(38deg);
  background:linear-gradient(90deg,var(--mint),var(--mint-2)); color:#042015;
  font-size:11px; font-weight:900; letter-spacing:.14em; padding:6px 42px;
}

/* Scroll reveals (site.js adds .revealed via IntersectionObserver) */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].revealed { opacity:1; transform:none; }
.card[data-reveal]:nth-child(3n+2) { transition-delay:.08s; }
.card[data-reveal]:nth-child(3n+3) { transition-delay:.16s; }
.plans-grid [data-reveal]:nth-child(2) { transition-delay:.12s; }
.plans-grid [data-reveal]:nth-child(3) { transition-delay:.24s; }

/* Card hover glow + icon tilt (cards keep existing hover; extra lift shine) */
.card { position:relative; overflow:hidden; }
.card::after {
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(340px 180px at 20% 0%, rgba(61,220,151,.14), transparent 70%);
  transition:opacity .4s;
}
.card:hover::after { opacity:1; }
.card:hover img { transform:scale(1.045); }
.card img { transition:transform .5s ease; }

/* Nav links: growing underline */
.nav-links a { position:relative; padding-bottom:4px; transition:color .2s; }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--mint),var(--gold)); transition:width .28s ease;
}
.nav-links a:hover { color:var(--ink); }
.nav-links a:hover::after { width:100%; }

/* Marquee: pause on hover, longer trail with new tags */
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { transition:color .2s; }
.marquee-track span:hover { color:var(--mint); }

/* Hero accents — deliberately NOT using background-clip:text (renders as a
   solid box with invisible text on some Android engines). Solid colors from
   the base stylesheet stay; only safe effects added here. */
.kicker::after {
  content:""; display:inline-block; width:34px; height:2px; margin-left:10px;
  vertical-align:middle; background:linear-gradient(90deg,var(--mint),transparent);
  animation:kicker 2.8s ease-in-out infinite;
}
@keyframes kicker {
  0%, 100% { opacity:.35; transform:translateX(0); }
  50% { opacity:1; transform:translateX(6px); }
}
h1 em { text-shadow:0 0 38px rgba(61,220,151,.35); }

/* Buttons: mint pulse for primary CTA, gold hover sheen */
.btn-mint { animation:btnpulse 3.4s ease-in-out infinite; }
@keyframes btnpulse { 50% { box-shadow:0 14px 44px rgba(61,220,151,.45); } }
.btn { position:relative; overflow:hidden; }
.btn:hover { box-shadow:0 14px 40px rgba(0,0,0,.35); }
.btn:active { transform:scale(.97); }

/* FAQ: custom chevron + open fade */
details summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; }
details summary::-webkit-details-marker { display:none; }
details summary::after {
  content:"+"; font-size:22px; color:var(--mint); font-weight:800;
  transition:transform .3s ease; flex:0 0 auto;
}
details[open] summary::after { transform:rotate(135deg); }
details[open] p { animation:fadeup .45s ease; }
@keyframes fadeup { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Steps: number hover */
.step { transition:transform .3s ease, border-color .3s ease; }
.step:hover { transform:translateY(-6px); border-color:rgba(232,195,106,.5); }
.step:hover .num { transform:scale(1.12) rotate(-4deg); }
.num { display:inline-block; transition:transform .3s cubic-bezier(.2,1.6,.4,1); }

/* Download band: bolt sweep already there; band border glows when in view */
.dl-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.dl-actions .btn { padding: 14px 26px; font-size: 15px; }
.dl-actions .note { flex: 1 0 100%; text-align: end; margin-top: 6px; }
@media (max-width: 720px) {
  .dl-row { flex-direction: column; align-items: stretch; }
  .dl-actions { justify-content: stretch; }
  .dl-actions .btn { flex: 1; }
  .dl-actions .note { text-align: start; }
}

.download-band { transition:box-shadow .6s; }
.download-band:target, .download-band:hover { box-shadow:0 0 0 1px rgba(61,220,151,.35), 0 40px 90px rgba(0,0,0,.5); }

/* Trial form focus glow */
.trial-form input:focus, .trial-form select:focus { box-shadow:0 0 0 3px rgba(61,220,151,.18); }

/* Plans responsive */
@media (max-width:980px) { .plans-grid { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* Honour reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important; scroll-behavior:auto !important;
  }
  .hero-bg { animation:none; }
  [data-reveal] { opacity:1; transform:none; }
}

/* Plan currency bar (site.js: auto-detect + manual select) */
.currency-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  margin:20px 0 0; padding:12px 16px;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(61,220,151,.05);
}
.cur-label { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
#cur-select {
  background:#0b241c; color:var(--ink); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px; font-size:13.5px; font-weight:700; cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
#cur-select:hover { border-color:rgba(61,220,151,.5); }
#cur-select:focus { outline:none; border-color:rgba(61,220,151,.65); box-shadow:0 0 0 3px rgba(61,220,151,.15); }
.cur-note { font-size:12px; color:var(--muted); }


/* ═══ v1.1.61 · arrangement pass — fits text in cards, spaces every width ═
   Additive only: every rule above stays untouched; these refine typography,
   wrapping and breakpoints for phones (320px+), tablets and large desktops. */

/* Anchor jumps never land under the sticky nav */
[id] { scroll-margin-top: 86px; }

/* Wraps: balanced headings, no orphan tails in body text */
h1, h2, .sec-title, .card h3, .step h3, .wa h3, .plan-name, summary { text-wrap: balance; }
.sec-sub, .card p, .plan-list li, .note, details p, .lede, .plan-for, .plan-best { text-wrap: pretty; }
.card p, .plan-list li, .faq p, .step p, .wa h3 { overflow-wrap: break-word; }

/* Fluid section rhythm */
section { padding: clamp(62px, 9vw, 92px) 0; }

/* Big desktops get a slightly wider stage */
@media (min-width:1400px) { .wrap { width:min(1280px, calc(100% - 64px)); } }

/* Card grids: 2-up on tablets (base stacks at ≤900), 1-up on phones */
@media (max-width:900px) and (min-width:641px) {
  .grid-3, .steps, .split .grid-3 { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:640px) {
  .grid-3, .steps, .split .grid-3 { grid-template-columns:1fr !important; }
}

/* Cards: type sizes that keep titles to one or two tidy lines */
.card { padding:20px; }
.card h3 { font-size:clamp(17px, 2.4vw, 20px); line-height:1.25; }
@media (max-width:640px) {
  .card { padding:18px; }
  .card img { height:112px; }
}

/* Hero on phones: tighter, never wider than the viewport */
@media (max-width:640px) {
  .wrap { width:calc(100% - 28px); }
  [id] { scroll-margin-top:74px; }
  .hero-copy { padding:64px 0 52px; }
  .lede { font-size:16px; }
  .meta-row { gap:18px; flex-wrap:wrap; }
  .meta-row > div { flex:1 1 104px; }
  .meta-row strong { font-size:19px; }
  .float-bolt { width:min(70vw, 300px); top:4%; right:-16%; }
}

/* Nav: both CTAs stay, compactly — wrapping on narrow phones, roomier tap targets */
@media (max-width:640px) {
  .nav-inner { flex-wrap:wrap; padding:10px 0; row-gap:8px; }
  .brand { font-size:15px; }
  .brand img { width:36px; height:36px; border-radius:10px; }
  .nav-cta { width:100%; }
  .nav-cta .btn { flex:1; padding:11px 14px; font-size:13.5px; }
}
@media (max-width:1024px) and (min-width:641px) {
  .nav-links { gap:14px; font-size:13px; }
  .nav-cta .btn { padding:10px 16px; font-size:13.5px; }
}

/* Plans: price line can wrap gracefully; CTA always readable, equal heights */
.plan-price { flex-wrap:wrap; row-gap:2px; font-size:clamp(16px, 4.6vw, 20px); }
.plan-price b { font-size:clamp(34px, 9vw, 52px); }
.plan-cta { min-height:48px; }
.plan-list { flex:1; }
.plan { gap:8px; }
@media (max-width:900px) { .plan { padding:26px 20px; } }

/* Currency bar: iOS-friendly select (no zoom on tap), label on its own line on phones */
@media (max-width:900px) { #cur-select { font-size:16px; } }
@media (max-width:520px) {
  .currency-bar { gap:8px 10px; padding:12px; }
  .cur-label { width:100%; margin-bottom:-2px; }
  #cur-select { flex:1; }
}

/* Download band on phones: watermark tucks away, buttons breathe */
@media (max-width:720px) {
  .download-band { padding:26px 20px; }
  .download-band::before { width:240px; height:240px; inset:auto -14% -30% auto; }
  .dl-actions .btn { padding:13px 16px; font-size:14.5px; }
}

/* Shot overlay captions never crowd the photo edges */
@media (max-width:640px) {
  .shot, .shot img { min-height:300px; }
  .shot-card { left:14px; right:14px; bottom:14px; padding:12px 14px; }
}

/* FAQ + trial + footer spacing on phones */
@media (max-width:640px) {
  .faq { gap:8px; }
  summary { font-size:14.5px; }
  .trial-form { padding:22px 18px; gap:12px; }
  footer .foot { flex-direction:column; gap:8px; align-items:flex-start; }
  .marquee { padding:12px 0; }
  .marquee-track { gap:28px; }
}
.trial-grid, .contact { gap:clamp(24px, 4vw, 36px); }


/* ═══ v1.1.62 · 3D scroll pass — parallax depth, pointer tilt, coverflow gallery, rider band ═
   Additive & JS-gated: no-JS and reduced-motion visitors get the exact prior layout. */

/* Depth stage for existing scroll reveals */
.fx3d .grid-3, .fx3d .plans-grid, .fx3d .steps { perspective: 1200px; }
.fx3d .grid-3 [data-reveal]:not(.revealed), .fx3d .plans-grid [data-reveal]:not(.revealed) {
  transform: translateY(26px) rotateX(8deg);
  transform-origin: 50% 100%;
}

/* One-shot 3D pop (fx3d.js toggles .fx-pop; fill mode avoids pinning hover transforms) */
@keyframes fx3dpop {
  from { transform: perspective(1000px) rotateX(-9deg) translateY(22px); opacity: 0.35; }
  to   { transform: none; opacity: 1; }
}
.fx3d .fx-pop { animation: fx3dpop .85s cubic-bezier(.2,.75,.25,1) backwards; }

/* Pointer-tilt cards: base hover rules stay untouched; tilt writes inline transform, glare follows cursor */
.tilt { will-change: transform; backface-visibility: hidden; }
.fx3d .card.tilt:hover::after { background: radial-gradient(340px 190px at var(--gx,20%) var(--gy,0%), rgba(61,220,151,.18), transparent 70%); }

/* Hero bolt gets a stage wrapper so parallax never fights its float animation */
.bolt-stage { position: absolute; right: -6%; top: 8%; z-index: 1; width: min(52vw, 520px); pointer-events: none; }
.bolt-stage .float-bolt { position: relative; right: auto; top: auto; width: 100%; }

/* ── Rider band: night road + animated rider scene ───────────────── */
.rider-band {
  position: relative; overflow: hidden; border-radius: 36px; border: 1px solid var(--line);
  background: url("./media/g-rider.jpg") right center/cover no-repeat;
}
.rider-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(3,17,12,.94) 0%, rgba(3,17,12,.82) 46%, rgba(3,17,12,.25) 100%);
}
.rider-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; align-items: center; padding: 48px; }
.rider-copy .sec-title { font-size: clamp(26px, 3.2vw, 44px); }
.rider-scene { position: relative; height: 250px; }
.rider-scene svg.rider-svg {
  position: absolute; left: 0; bottom: 30px; width: min(360px, 88%); height: auto;
  color: #7dffc4; filter: drop-shadow(0 0 18px rgba(61,220,151,.4));
  animation: bob 1.1s ease-in-out infinite alternate;
}
@keyframes bob { to { transform: translateY(-6px) rotate(-.8deg); } }
.rider-svg .wheel { animation: spin .55s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spin { to { transform: rotate(360deg); } }
.rider-svg .beam { animation: beampulse 2.2s ease-in-out infinite; }
@keyframes beampulse { 50% { opacity: .25; } }
.rider-road {
  position: absolute; left: 0; right: -30px; bottom: 20px; height: 3px; opacity: .8;
  background: repeating-linear-gradient(90deg, rgba(232,195,106,.9) 0 46px, transparent 46px 92px);
  animation: road 1.15s linear infinite;
}
@keyframes road { to { transform: translateX(-92px); } }
.rider-streak {
  position: absolute; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(125,255,196,.85));
  animation: streak 1s linear infinite;
}
.rider-streak.a { width: 90px; top: 74px; left: 6%; }
.rider-streak.b { width: 60px; top: 116px; left: 0%; animation-delay: .35s; }
.rider-streak.c { width: 120px; top: 42px; left: 18%; animation-delay: .6s; }
@keyframes streak {
  from { transform: translateX(110px); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateX(-140px); opacity: 0; }
}

/* ── Coverflow gallery ─────────────────────────────────────────────── */
.fx-gallery { margin-top: 40px; }
.fx-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 46px 20px 54px; scrollbar-width: none; perspective: 1500px;
}
.fx-track::-webkit-scrollbar { display: none; }
.fx-slide {
  flex: 0 0 min(80vw, 480px); scroll-snap-align: center;
  border-radius: 26px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg,#0c2d22,#081c16);
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
  transition: opacity .2s linear, filter .2s linear;
  transform-style: preserve-3d; will-change: transform;
}
.fx-slide img { width: 100%; height: clamp(210px, 26vw, 300px); object-fit: cover; display: block; }
.fx-slide figcaption { padding: 15px 18px 17px; }
.fx-slide figcaption b { display: block; font-size: 16.5px; letter-spacing: .01em; }
.fx-slide figcaption span { color: var(--muted); font-size: 13px; }
.fx-hint { text-align: center; color: var(--muted); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; margin-top: -28px; }

@media (max-width: 900px) {
  .rider-inner { grid-template-columns: 1fr; padding: 30px 22px 34px; }
  .rider-band { background-position: center; }
  .rider-scene { height: 190px; margin-top: 8px; }
}
@media (max-width: 640px) {
  .fx-track { padding: 34px 12px 40px; }
  .fx-slide { flex-basis: 84vw; }
  .fx-slide img { height: 190px; }
  .rider-scene { height: 160px; }
}

/* ═══ v1.1.62 · Web-G layer — feature index, WebGL hero, cursor, coin intro, grain ═
   Additive; every piece degrades to the existing page when JS/WebGL is absent. */

/* Hero WebGL canvas (hero3d.js fades it in on first frame; static hero untouched otherwise) */
#gl3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.fx3d .hero { will-change: auto; }

/* Scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--muted); font-size: 10px; letter-spacing: .34em; font-weight: 700;
}
.scroll-cue i { width: 1.5px; height: 46px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(155,181,166,.4), transparent); display: block; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--mint); transform: translateY(-100%); animation: cue 1.7s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes cue { 60%, 100% { transform: translateY(100%); } }
@media (max-width: 640px) { .scroll-cue { display: none; } }

/* ── Feature index (numbered arcade entries) ─────────────────────── */
.entries { margin-top: 44px; }
.entry { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0; }
.entry .entry-side, .entry .entry-shot { transition: transform .5s ease; }
.entry-grid { }
.entry { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(26px, 4vw, 54px); align-items: center; }
.entry:nth-child(even) .entry-shot { order: -1; }
.entry-side { position: relative; }
.entry-num {
  position: absolute; top: -46px; right: 4px; font-family: var(--display);
  font-size: clamp(88px, 12vw, 168px); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(232,195,106,.16); user-select: none; pointer-events: none;
}
.entry-tag { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--mint); font-weight: 800; }
.entry-title { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; margin: 10px 0 14px; text-wrap: balance; }
.entry-copy { color: #cfe9db; max-width: 52ch; font-size: 16px; text-wrap: pretty; }
.entry-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 20px; padding: 16px 0; border-block: 1px dashed rgba(61,220,151,.22); }
.entry-specs dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.entry-specs dd { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.entry-link { display: inline-flex; align-items: center; gap: 8px; color: var(--mint); font-weight: 800; font-size: 13.5px; letter-spacing: .06em; }
.entry-link span { transition: transform .3s; }
.entry-link:hover span { transform: translateX(6px); }
.entry-shot { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.entry-shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.entry:hover .entry-shot img { transform: scale(1.045); filter: saturate(1.12) brightness(1.06); }
.entry-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(61,220,151,.10), transparent 38%); pointer-events: none; }
@media (max-width: 900px) {
  .entry, .entry:nth-child(even) .entry-shot { grid-template-columns: 1fr; order: 0; }
  .entry:nth-child(even) .entry-shot { order: -1; }
  .entry { gap: 22px; }
  .entry-num { top: -34px; }
}

/* ── custom cursor (fine pointers only, .cursor-fx is added by fx3d.js) ── */
.cursor-fx #cur-dot, .cursor-fx #cur-ring { position: fixed; left: 0; top: 0; z-index: 1200; pointer-events: none; border-radius: 999px; transform: translate(-100px, -100px); }
.cursor-fx #cur-dot { width: 7px; height: 7px; background: var(--mint); box-shadow: 0 0 12px rgba(61,220,151,.8); }
.cursor-fx #cur-ring { width: 30px; height: 30px; border: 1.5px solid rgba(61,220,151,.55); opacity: .9; transition: width .22s, height .22s, border-color .22s, background .22s; }
.cursor-fx.cursor-hover #cur-ring { width: 62px; height: 62px; border-color: var(--gold); background: rgba(232,195,106,.07); }
.cursor-fx, .cursor-fx a, .cursor-fx button { cursor: none; }
.cursor-fx input, .cursor-fx select, .cursor-fx textarea { cursor: auto; }
@media (hover: none), (pointer: coarse) { .cursor-fx, .cursor-fx a, .cursor-fx button { cursor: auto; } .cursor-fx #cur-dot, .cursor-fx #cur-ring { display: none; } }

/* ── INSERT COIN preloader ─────────────────────────────────────────── */
#coin {
  position: fixed; inset: 0; z-index: 1300; background: #03110c;
  display: grid; place-items: center; transition: opacity .55s ease, visibility .55s;
}
#coin b {
  font-family: var(--display); font-size: clamp(22px, 4.6vw, 46px); font-weight: 500;
  letter-spacing: .3em; color: var(--mint); display: flex; align-items: baseline; gap: 18px;
  text-shadow: 0 0 34px rgba(61,220,151,.5);
}
#coin .boltmark { color: var(--gold); animation: blink 1.05s steps(2, start) infinite; text-shadow: 0 0 26px rgba(232,195,106,.75); }
@keyframes blink { 50% { opacity: 0; } }
#coin em { font-style: normal; font-family: var(--font); font-size: .55em; letter-spacing: .12em; color: var(--gold); font-weight: 800; }
#coin .coinbar { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--mint), var(--gold)); width: 0; transition: width .12s linear; }

/* ── film grain over the whole page ────────────────────────────────── */
#grain { position: fixed; inset: -60px; z-index: 1100; pointer-events: none; opacity: .05; mix-blend-mode: overlay; animation: grainshift 1.2s steps(3) infinite; }
@keyframes grainshift { 0% { transform: translate(0,0); } 33% { transform: translate(-14px, 9px); } 66% { transform: translate(9px, -12px); } }

/* ═══ v1.1.63 site · React Bits pack (reactbits.js) — additive only ════
   Every rule is gated behind html.rbits, which only exists when the
   script runs; reduced-motion / no-JS visitors see none of this.       */

/* 1 · DecryptedText — scramble glow per character; word boxes keep
   line breaks between words only (never "flo-or / n-ever") */
.rbits .rb-w { display:inline-block; white-space:nowrap; }
.rbits .rb-ch { display:inline-block; }
.rbits .rb-ch.rb-s { color:#6EE7C8; opacity:.85; text-shadow:0 0 14px rgba(110,231,200,.35); }

/* 2 · BlurText — words settle out of blur when the title scrolls in */
.rbits .rb-word {
  display:inline-block;
  opacity:0; transform:translateY(.55em); filter:blur(10px);
  transition:opacity .55s ease var(--d,0s), transform .55s cubic-bezier(.2,.8,.2,1) var(--d,0s), filter .55s ease var(--d,0s);
}
.rbits .rb-on .rb-word { opacity:1; transform:none; filter:none; }

/* 3 · SpotlightCard — mint light pool that trails the pointer */
.rbits .rb-spot { position:relative; }
.rbits .rb-spot::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), rgba(110,231,183,.13), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.rbits .rb-spot:hover::before { opacity:1; }

/* 4 · GlareHover — diagonal light sweep across buttons (hover + one auto ping) */
.rbits .btn::after {
  content:""; position:absolute; top:-25%; bottom:-25%; left:-70%; width:38%;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none; transition:left .55s ease;
}
.rbits .btn:hover::after { left:135%; }
@keyframes rbping { from { left:-70%; } to { left:135%; } }
.rbits .btn.rb-ping::after { animation:rbping .9s ease .05s 1; }

/* 5 · BorderGlow — beam orbiting the download band (JS drives --rba) */
.rbits .download-band::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px;
  background:conic-gradient(from var(--rba,0deg),
    transparent 0 55%, rgba(110,231,183,.85) 68%, rgba(250,204,21,.75) 74%, transparent 86% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* 6 · MOST POPULAR pulse — outline ring + ribbon breathing (rotate preserved) */
@keyframes rbRing {
  0%,100% { outline:1px solid rgba(110,231,183,0); outline-offset:2px; }
  50%     { outline:1px solid rgba(110,231,183,.55); outline-offset:6px; }
}
.rbits .plan.popular { animation:rbRing 5.6s ease-in-out infinite; }
@keyframes rbRibbon {
  0%,100% { transform:rotate(38deg) translateY(0); }
  50%     { transform:rotate(38deg) translateY(-2.5px); }
}
.rbits .plan.popular .plan-ribbon { animation:rbRibbon 3.4s ease-in-out infinite; }

/* 6 · AnimatedContent — hero meta tiles rise in once on load */
@keyframes rbIn {
  from { opacity:0; transform:translateY(16px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.rbits .meta-row > div.rb-anim { animation:rbIn .7s cubic-bezier(.2,.8,.2,1) both; }

/* 7 · Magnet — buttons follow the cursor; CSS eases them home on leave */
.rbits .hero-actions .btn, .rbits .dl-actions .btn, .rbits .trial-form .btn { will-change:transform; }

/* 8 · Sparkles — ember canvas sits above the backdrop, under the copy */
.rbits .rb-spark { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* 9 · ShinyText touches — sheen on SCROLL cue + MOST POPULAR ribbon,
   terminal blink on the brand caret, glow halo on focused trial fields */
@keyframes rbSheen { from { transform:translateX(-115%); } to { transform:translateX(115%); } }
.rbits .scroll-cue { overflow:hidden; }
.rbits .scroll-cue::after {
  content:""; position:absolute; inset:-8px -25%; pointer-events:none;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  animation:rbSheen 3.6s .6s ease-in-out infinite;
}
.rbits .plan-ribbon { overflow:hidden; }
.rbits .plan-ribbon::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  animation:rbSheen 4.6s .8s ease-in-out infinite;
}
@keyframes rbCaret { 0%,54% { opacity:1; } 55%,100% { opacity:.15; } }
.rbits .brand span { animation:rbCaret 1.15s steps(1) infinite; }
.rbits .trial-form input:focus, .rbits .trial-form select:focus {
  border-color:rgba(110,231,199,.65);
  box-shadow:0 0 0 3px rgba(110,231,199,.14), 0 0 24px rgba(110,231,199,.22);
  transition:box-shadow .3s ease, border-color .3s ease;
}

/* 10 · ShinyText (safe ColorText variant) — sheen via animated color, never
   background-clip:text: this site's history shows clip-text renders as an
   invisible box on some Android engines.
   11 · TextGrad — the italic hero line breathes mint → ice → gold by color */
@keyframes rbColor { 0%,100% { color: var(--mint); } 50% { color: #f2fffa; } }
.rbits .kicker { animation: rbColor 6.5s ease-in-out infinite; }
@keyframes rbGrad { 0%,100% { color: var(--mint-2); } 45% { color: #eafff5; } 75% { color: var(--gold); } }
.rbits .hero h1 em { animation: rbGrad 9s ease-in-out infinite; }

/* 12 · ElectricBorder — the Download button crackles with a mint aura */
@keyframes rbZap {
  0%,100% { box-shadow: 0 0 0 0 rgba(61,220,151,.0), 0 6px 22px rgba(4,32,21,.35); }
  6%  { box-shadow: 0 0 0 4px rgba(61,220,151,.30), 0 6px 26px rgba(4,32,21,.30); }
  10% { box-shadow: 0 0 0 1px rgba(61,220,151,.12), 0 6px 22px rgba(4,32,21,.35); }
  15% { box-shadow: 0 0 0 5px rgba(61,220,151,.34), 0 6px 28px rgba(4,32,21,.28); }
  20% { box-shadow: 0 0 0 0 rgba(61,220,151,.0), 0 6px 22px rgba(4,32,21,.35); }
  62% { box-shadow: 0 0 0 3px rgba(61,220,151,.22), 0 6px 24px rgba(4,32,21,.30); }
  67% { box-shadow: 0 0 0 0 rgba(61,220,151,.0), 0 6px 22px rgba(4,32,21,.35); }
}
.rbits #dl-btn { animation: rbZap 4.6s ease-in-out infinite; }
.rbits #dl-btn:hover { animation-play-state: paused; }

/* 13 · Aurora — the download band's gradient drifts slowly behind content */
.rbits .download-band { background-size: 170% 170%; animation: rbAurora 16s ease-in-out infinite alternate; }
@keyframes rbAurora { from { background-position: 0% 40%; } to { background-position: 100% 60%; } }

/* Reduced motion: never animate (belt & braces on top of the JS guard) */
@media (prefers-reduced-motion: reduce) {
  .rbits .rb-word { opacity:1; transform:none; filter:none; transition:none; }
  .rbits .rb-ch.rb-s { text-shadow:none; }
  .rbits .btn::after, .rbits .download-band::after { display:none; }
  .rbits .plan.popular, .rbits .plan.popular .plan-ribbon { animation:none; }
  .rbits .scroll-cue::after, .rbits .plan-ribbon::after { display:none; }
  .rbits .brand span, .rbits .meta-row > div.rb-anim { animation:none; }
  .rbits .kicker, .rbits .hero h1 em { animation:none; }
  .rbits #dl-btn, .rbits .download-band { animation:none; }
}

/* ── v1.1.72 · a11y & legal polish ─────────────────────────────────── */
.skip { position:fixed; left:14px; top:-56px; z-index:100; background:var(--mint); color:#042015;
  padding:10px 16px; border-radius:12px; font-weight:800; text-decoration:none; transition:top .15s ease; }
.skip:focus { top:14px; }
:focus-visible { outline:3px solid rgba(125,255,196,.85); outline-offset:2px; border-radius:6px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid rgba(125,255,196,.85); outline-offset:3px; }
.cookiebar { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:90;
  width:min(720px, calc(100% - 24px)); background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:16px 18px 12px; box-shadow:var(--shadow); }
.cookiebar[hidden] { display:none; }
.cookiebar p { font-size:13px; line-height:1.65; color:var(--ink); }
.cookiebar p a { color:var(--mint-2); text-decoration:underline; }
.cb-actions { display:flex; gap:10px; margin-top:10px; }
.cb-actions .btn { padding:9px 16px; font-size:13px; }
.consent-row { display:flex !important; flex-direction:row !important; gap:10px !important; align-items:flex-start;
  font-size:12.5px !important; font-weight:600 !important; color:var(--ink) !important; }
.consent-row input { width:18px; height:18px; margin-top:1px; accent-color:var(--mint); flex:0 0 auto; }
.consent-row a { color:var(--mint-2); text-decoration:underline; }
.biz-card { margin-top:16px; font-style:normal; font-size:12.5px; line-height:1.8; color:var(--muted);
  border:1px dashed var(--line); border-radius:14px; padding:12px 14px; }
.biz-card b { color:var(--ink); }
.legal-table { overflow-x:auto; margin-top:14px; }
.legal-table table { width:100%; border-collapse:collapse; font-size:13px; color:var(--muted); min-width:560px; }
.legal-table th, .legal-table td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal-table th { color:var(--ink); }
.legal-table code { background:rgba(61,220,151,.12); color:var(--mint-2); padding:2px 6px; border-radius:6px; font-size:12px; }
@media (prefers-reduced-motion: reduce) {
  .skip { transition:none; }
  html { scroll-behavior:auto; }
  .cookiebar, .cb-actions .btn { transition:none; }
}