/* Nuovida site: base styles. Tokens from Brand_Tokens_v1 (Nuovida) + derived dark-canvas values. */
/* self-hosted fonts (Google Fonts latin subset, variable weight files) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 600;font-display:swap;src:url(/assets/fonts/SpaceGrotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/Inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --charcoal:#1a1a1a;
  --surface-1:#202020;
  --surface-2:#262626;
  --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.16);
  --ink:#f4f4f6;
  --ink-2:rgba(244,244,246,.74);
  --ink-3:#9a9a9a;
  --orange:#ff6b00;
  --orange-hover:#e55a00;
  --orange-glow:rgba(255,107,0,.10);
  --white:#ffffff;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --r:8px;
  --max:1200px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t:280ms;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--charcoal);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s2);top:-48px;z-index:100;background:var(--orange);color:var(--charcoal);padding:10px 14px;border-radius:var(--r);font-weight:600;transition:top var(--t) var(--ease-out)}
.skip:focus{top:var(--s2)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}

/* layout */
.wrap{width:min(var(--max),calc(100% - var(--s5)));margin-inline:auto}
@media (max-width:720px){.wrap{width:calc(100% - 48px)}}
section{position:relative}
.sec{padding-block:var(--s7)}
@media (max-width:720px){.sec{padding-block:var(--s6)}}
.hair{border:0;border-top:1px solid var(--hairline);margin:0}

/* type scale */
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px;font-weight:500}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--orange);display:inline-block}
.h-xl{font-size:clamp(2.6rem,7.2vw,6rem);font-weight:500;letter-spacing:-.03em;line-height:1.0}
.h-l{font-size:clamp(2rem,4.4vw,3.5rem)}
.h-m{font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.015em}
.h-s{font-size:1.35rem;letter-spacing:-.01em;line-height:1.2}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-2);line-height:1.55;max-width:56ch}
.muted{color:var(--ink-3)}
.small{font-size:.9rem}
.mono{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);font-weight:600;font-size:1rem;letter-spacing:-.005em;transition:background var(--t) var(--ease-out),transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out),color var(--t) var(--ease-out);white-space:nowrap}
.btn-primary{background:var(--orange);color:var(--charcoal)}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border:1px solid var(--hairline-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.04)}
.btn .arr{transition:transform var(--t) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
@media (pointer:coarse){.btn{min-height:48px}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;display:flex;align-items:center;transition:background var(--t) var(--ease-out),border-color var(--t) var(--ease-out);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(26,26,26,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--hairline)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:34px;width:auto}
.brand .word{font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-links a{font-size:.95rem;color:var(--ink-2);transition:color var(--t)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav .btn{min-height:40px;padding:0 16px;font-size:.92rem}
@media (max-width:720px){.brand .word{display:none}}

/* footer */
.foot{padding:var(--s6) 0 var(--s5);border-top:1px solid var(--hairline);color:var(--ink-3);font-size:.9rem}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);align-items:center}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot .sep{opacity:.5;margin:0 8px}

/* grain overlay */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main{position:relative}
.nav{z-index:50}

/* reveal choreography */
.rv{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}.stagger.in>*:nth-child(2){transition-delay:80ms}.stagger.in>*:nth-child(3){transition-delay:160ms}.stagger.in>*:nth-child(4){transition-delay:240ms}.stagger.in>*:nth-child(5){transition-delay:320ms}.stagger.in>*:nth-child(6){transition-delay:400ms}
.stagger.done>*{transition-delay:0ms!important}
/* self-drawing hairline */
.draw{height:1px;background:var(--hairline-strong);transform-origin:left;transform:scaleX(0);transition:transform 900ms var(--ease-io)}
.draw.in{transform:scaleX(1)}

/* shared section patterns */
.quotes{display:grid;gap:var(--s4)}
.quote{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.15;color:var(--ink);max-width:22ch}
.quote::before{content:"\201C";color:var(--orange);margin-right:.1em}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}
.card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);transition:border-color var(--t),transform var(--t) var(--ease-out)}
.card:hover{border-color:var(--hairline-strong);transform:translateY(-2px)}
.card .idx{font-family:var(--display);font-size:12px;letter-spacing:.1em;color:var(--orange)}
.card h3{font-size:1.3rem;letter-spacing:-.012em}
.card p{color:var(--ink-2);font-size:1rem}
.rules{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.01em}
.rules span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--orange);margin-right:12px;vertical-align:middle}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media (max-width:900px){.proof{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.proof{grid-template-columns:1fr}}
.shot{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;background:var(--surface-1);transition:border-color var(--t),transform var(--t) var(--ease-out)}
.shot:hover{border-color:var(--hairline-strong);transform:translateY(-2px)}
.shot .frame{aspect-ratio:16/10;background:
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 30%),
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.035) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.035) 23px 24px),
  var(--surface-2);position:relative}
.shot .frame::before{content:"";position:absolute;left:12px;top:10px;width:44px;height:6px;border-radius:3px;background:var(--hairline-strong)}
.shot .frame::after{content:"screenshot";position:absolute;inset:auto 12px 10px auto;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.shot .cap{padding:var(--s2) var(--s3) var(--s3);display:grid;gap:6px}
.shot .cap b{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.shot .cap span{color:var(--ink-2);font-size:.95rem}
.shot .cap .num{color:var(--orange);font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:720px){.stats{grid-template-columns:1fr}}
.stat .big{font-family:var(--display);font-size:clamp(3rem,7vw,5.5rem);letter-spacing:-.04em;line-height:1;color:var(--ink)}
.stat .big em{font-style:normal;color:var(--orange)}
.stat p{color:var(--ink-2);max-width:40ch;margin-top:var(--s2)}
.stat .src{color:var(--ink-3);font-size:.85rem;margin-top:8px}
.cta-final{text-align:center;padding-block:var(--s8)}
.cta-final .h-l{margin-bottom:var(--s4)}
.cta-final .mail{display:block;margin-top:var(--s3);color:var(--ink-3)}
.cta-final .mail a{color:var(--ink-2);border-bottom:1px solid var(--hairline-strong)}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.stagger>*{opacity:1!important;transform:none!important}
  .draw{transform:scaleX(1)!important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}