:root{
--black:#000000;
--bg-0:#0A0A0B;
--bg-1:#141416;
--bg-2:#1D1D20;
--bg-3:#27272B;
--border-subtle:#2A2A2E;
--border-strong:#3C3C42;
--white:#F5F5F2;
--text-primary:#F5F5F2;
--text-secondary:#9C9CA3;
--text-tertiary:#7E7E86;
--red-100:#FFDAD6;
--red-300:#FF8880;
--red-500:#FF3B30;
--red-600:#E52A20;
--red-700:#B01F18;
--yellow-400:#FFD542;
--yellow-500:#FFC400;
--yellow-600:#D6A400;
--green-400:#5CE897;
--green-500:#2FCB74;
--green-600:#20A25C;
--surface-app:var(--bg-0);
--surface-card:var(--bg-1);
--surface-raised:var(--bg-2);
--surface-overlay:var(--bg-3);
--border-default:var(--border-subtle);
--border-emphasis:var(--border-strong);
--text-body:var(--text-primary);
--text-muted:var(--text-secondary);
--text-faint:var(--text-tertiary);
--text-on-accent:#0A0A0B;
--accent-primary:var(--red-500);
--accent-primary-hover:var(--red-600);
--accent-primary-active:var(--red-700);
--accent-primary-subtle:rgba(255,59,48,0.14);
--accent-warning:var(--yellow-500);
--accent-warning-subtle:rgba(255,196,0,0.14);
--accent-success:var(--green-500);
--accent-success-subtle:rgba(47,203,116,0.14);
--focus-ring:var(--red-500);

--font-display:'Anton',Impact,sans-serif;
--font-body:'Archivo',-apple-system,sans-serif;
--text-xs:0.75rem;
--text-sm:0.8125rem;
--text-base:0.9375rem;
--text-lg:1.0625rem;
--text-xl:1.25rem;
--text-2xl:1.625rem;
--text-3xl:2.25rem;
--text-4xl:3rem;
--text-5xl:4rem;
--text-timer:5.5rem;
--lh-tight:1.05;
--lh-snug:1.25;
--lh-normal:1.5;
--tracking-tight:-0.01em;
--tracking-wide:0.04em;
--tracking-wider:0.08em;

--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;

--radius-none:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
--radius-full:999px;
--shadow-sm:0 1px 2px rgba(0,0,0,0.5);
--shadow-md:0 4px 16px rgba(0,0,0,0.55);
--shadow-lg:0 12px 32px rgba(0,0,0,0.6);
--glow-accent:0 0 28px rgba(255,59,48,0.35);
--glow-success:0 0 24px rgba(47,203,116,0.3);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--duration-fast:120ms;
--duration-base:200ms;
--duration-slow:360ms;
}

*{box-sizing:border-box}

body{
margin:0;
background:#0A0A0B;
color:#F5F5F2;
font-family:'Archivo',-apple-system,sans-serif;
-webkit-font-smoothing:antialiased
}

a{color:#FF3B30;text-decoration:none}
a:hover{color:#FF8880}

.logo-link,
.logo-link:hover{color:var(--text-primary)}

.back-link{color:var(--text-secondary)}
.back-link:hover{color:var(--text-primary)}

@keyframes btpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bt-beat{0%{transform:scale(1);opacity:.45}6%{transform:scale(1.5);opacity:1}40%{transform:scale(1);opacity:.45}100%{transform:scale(1);opacity:.45}}
@keyframes bt-halo{0%{opacity:.85}14%{opacity:.35}100%{opacity:.35}}

.nav-link{color:var(--text-secondary)}
.nav-link:hover{color:var(--text-primary)}

.cta-btn,
.cta-btn:hover{color:var(--text-on-accent)}
.cta-btn{background:var(--accent-primary)}
.cta-btn:hover{background:var(--accent-primary-hover)}

.ghost-btn,
.ghost-btn:hover{color:var(--text-primary)}
.ghost-btn:hover{border-color:var(--text-secondary)}

.footer-link{color:var(--text-secondary)}
.footer-link:hover{color:var(--accent-primary)}

.accent-card{cursor:pointer; transition:border-color 120ms var(--ease-out), transform 200ms var(--ease-out); background:none; text-align:left; font:inherit}
.accent-card:hover{transform:translateY(-3px)}

#accent-picker{min-width:0}
#accent-picker > button > span:last-child{min-width:0; overflow:hidden}
#accent-picker > button > span:last-child > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Scroll-reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out)}
.reveal.is-visible{opacity:1; transform:none}
.reveal-group > *:nth-child(1){transition-delay:0ms}
.reveal-group > *:nth-child(2){transition-delay:90ms}
.reveal-group > *:nth-child(3){transition-delay:180ms}
.reveal-group > *:nth-child(4){transition-delay:270ms}
.reveal-group > *:nth-child(5){transition-delay:360ms}
.reveal-group > *:nth-child(6){transition-delay:450ms}

/* Mouse-tracked tilt + spotlight cards (features, stats) */
.tilt-card{position:relative; transition:border-color 320ms var(--ease-out), box-shadow 320ms var(--ease-out); transform:perspective(600px)}
.tilt-card::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,59,48,.16), transparent 65%); opacity:0; transition:opacity 320ms ease; pointer-events:none}
.tilt-card:hover{border-color:var(--accent-primary); box-shadow:var(--shadow-md)}
.tilt-card:hover::after{opacity:1}

/* Preset pills */
.preset-pill{display:inline-block; transition:transform 220ms var(--ease-out), border-color 220ms var(--ease-out)}
.preset-pill:hover{transform:translateY(-3px); border-color:var(--accent-primary)}

/* CTA punch (hero + closing section) */
.cta-punch-wrap{position:relative; display:inline-flex; align-items:center; width:fit-content}
.cta-punch-pulse{position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px; border:2px solid var(--accent-primary); border-radius:50%; opacity:0; pointer-events:none}

/* Scroll-driven parallax on section index numbers (progressive enhancement) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .parallax-number{animation:bt-float-in linear both; animation-timeline:view(); animation-range:entry 0% cover 40%}
    @keyframes bt-float-in{from{transform:translateY(36px); opacity:.35} to{transform:translateY(0); opacity:1}}
  }
}

@media (max-width:900px){
  .hero-grid,
  .stats-grid,
  .colours-grid{grid-template-columns:1fr !important}
  .hero-grid{gap:48px !important}
  .colours-copy{order:1 !important}
  .colours-picker{order:2 !important}
}

@media (max-width:600px){
  .section-pad{padding-left:20px !important; padding-right:20px !important}
}

#nav-toggle{display:none; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm); color:var(--text-primary); cursor:pointer; padding:0}

@media (max-width:760px){
  #nav-toggle{display:flex}
  #site-nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:8px 20px 20px; background:var(--bg-1); border-bottom:1px solid var(--border-subtle); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out)}
  #site-nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  #site-nav a.nav-link{width:100%; padding:16px 0; border-bottom:1px solid var(--border-subtle)}
  #site-nav a.cta-btn{margin-top:16px; justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  #hero [data-px]{transition:none !important; transform:none !important}
  #ring-progress{transition:none !important}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .tilt-card{transition:none !important; transform:none !important}
  .tilt-card::after{display:none}
  .preset-pill,.accent-card{transition:none !important}
  .preset-pill:hover,.accent-card:hover{transform:none !important}
}