/* The landing page. `_shared.css` styles the legal pages and stays as it is:
   those are documents, this is a shopfront, and one stylesheet trying to be
   both is how a privacy policy ends up with a hero. */
:root{
  --bg:#0B0B0C; --bg-lift:#141518; --surface:#1A1C1E; --hairline:#2E3236;
  --text:#F2F0EC; --muted:#8A8F94; --faint:#5A6066; --accent:#E02020;
  --held:#2FBF5E;
  --display:'Oswald','Archivo Narrow','Roboto Condensed',system-ui,sans-serif;
  --ui:Barlow,system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* Nav ---------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.nav .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{font:700 .95rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;display:flex;align-items:center;gap:9px;margin-right:auto}
.brand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.lang{min-height:44px;padding:0 34px 0 12px;border-radius:999px;background:var(--surface);
  border:1px solid var(--hairline);color:var(--text);font:500 .9rem var(--ui);cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8F94' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 26px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;
  font:700 .88rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 0 0 rgba(224,32,32,.45);transition:box-shadow .2s,transform .2s}
.btn:hover{box-shadow:0 0 34px 0 rgba(224,32,32,.45)}
.nav .btn{min-height:44px;padding:0 18px;font-size:.78rem}

/* Hero --------------------------------------------------------------- */
.hero{background:radial-gradient(120% 90% at 18% 0%,#2a0c0c 0%,var(--bg-lift) 45%,var(--bg) 100%);
  border-bottom:1px solid var(--hairline);padding:clamp(48px,8vw,104px) 0}
.hero .wrap{display:flex;gap:clamp(28px,5vw,72px);align-items:center;flex-wrap:wrap}
.hero .copy{flex:1 1 420px;min-width:0}
.hero .shot{flex:0 1 360px;min-width:0}
.kicker{color:var(--accent);font:700 .82rem/1.3 var(--display);letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 18px}
h1{font:700 clamp(38px,6vw,68px)/0.96 var(--display);letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 22px}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--muted);margin:0 0 30px;max-width:52ch}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cta-note{color:var(--muted);font-size:.92rem}
.figures{display:flex;gap:clamp(20px,4vw,44px);margin:40px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.figures b{display:block;font:700 30px/1 var(--display)}
.figures span{display:block;color:var(--muted);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:6px}

/* Sections ----------------------------------------------------------- */
section{padding:clamp(48px,7vw,92px) 0;border-bottom:1px solid var(--hairline)}
h2{font:700 clamp(28px,3.6vw,42px)/1.04 var(--display);letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 20px}
section p{color:var(--muted);max-width:62ch}
.split{display:flex;gap:clamp(28px,5vw,72px);align-items:center;flex-wrap:wrap}
.split>div{flex:1 1 380px;min-width:0}
.split>figure{flex:0 1 330px;min-width:0;margin:0}
.steps{display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.steps li{flex:1 1 260px;background:var(--surface);border:1px solid var(--hairline);
  border-radius:14px;padding:24px}
.steps b{display:block;font:700 1.05rem/1.3 var(--ui);margin:10px 0 8px}
.steps em{font:700 26px/1 var(--display);color:var(--accent);font-style:normal}
.steps p{margin:0;font-size:.95rem}
.tally{display:flex;gap:28px;margin:26px 0 0;padding:0;list-style:none}
.tally b{font:700 26px/1 var(--display)}
.tally span{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;margin-top:6px}
.tally .h b{color:var(--held)} .tally .b b{color:var(--accent)}

/* FAQ ---------------------------------------------------------------- */
.faq{display:grid;gap:0;margin-top:8px}
.faq details{border-top:1px solid var(--hairline);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;font:600 1.05rem/1.4 var(--ui);list-style:none;
  display:flex;justify-content:space-between;gap:16px;min-height:32px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font:700 22px/1 var(--display)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0}

/* Close and footer --------------------------------------------------- */
.close{text-align:center;background:radial-gradient(80% 120% at 50% 100%,#2a0c0c 0%,var(--bg) 70%)}
.close h2{margin-bottom:26px}
footer{padding:44px 0 64px;color:var(--faint);font-size:.88rem}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}
footer nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;
  border:1px solid var(--hairline);border-radius:10px;background:#000;text-decoration:none}
.badge svg{width:22px;height:26px;flex:none}
.badge s{text-decoration:none;display:block;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.badge strong{display:block;font:600 1.05rem/1.1 var(--ui)}

@media (max-width:640px){
  .nav .wrap{min-height:56px;gap:10px}
  .brand{font-size:.85rem}
  .hero .shot{flex-basis:100%;max-width:340px;margin-inline:auto}
  .cta-row{width:100%}
  .btn{width:100%}
  .tally{gap:20px}
}