/* ============================================================================
   sois-landing — funnel design system (self-contained).
   Inherits the sois.ai aesthetic: true-black canvas, SF system type, restrained
   silver accent, the white pill as the one bright element. Tuned for a single
   conversion goal: lean nav, repeated CTA, sticky CTA bar, scroll reveal.
   ========================================================================== */
:root {
  --bg:#000; --bg-soft:#060608; --bg-raise:#0c0c10; --surface:#111114; --surface-2:#18181d;
  --border:#232329; --border-2:#2d2d35;
  --t1:#f5f5f7; --t2:#a1a1aa; --t3:#8b8b95;
  --ac:#c9c9d2; --ac-2:#e7e7ee; --ac-dim:rgba(255,255,255,.06);
  --silver-grad:linear-gradient(135deg,#fff 0%,#cfcfd6 45%,#8c8c95 100%);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Helvetica,Arial,sans-serif;
  --maxw:1140px; --nav-h:56px; --radius:18px; --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--t1); font-family:var(--font); line-height:1.5; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img, svg, video { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
svg.mdi { width:1em; height:1em; display:inline-block; vertical-align:-.125em; fill:currentColor; }

.skip-link { position:absolute; left:12px; top:-60px; z-index:200; background:#f5f5f7; color:#000; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:500; transition:top .2s var(--ease); }
.skip-link:focus { top:12px; }
:focus-visible { outline:2px solid var(--ac-2); outline-offset:3px; border-radius:4px; }

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section { position:relative; padding:clamp(64px,10vw,128px) 0; }
.section--tight { padding:clamp(44px,7vw,84px) 0; }
.center { text-align:center; }
.muted { color:var(--t2); }
.mt-s { margin-top:14px; } .mt-m { margin-top:28px; }
.section-head { max-width:760px; margin:0 auto clamp(36px,5vw,64px); }
.section-head.center { text-align:center; }

.kicker { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ac-2); padding:6px 12px; border:1px solid var(--border-2); border-radius:999px; background:var(--ac-dim); margin-bottom:20px; }
.kicker .dot { width:6px; height:6px; border-radius:50%; background:var(--ac); box-shadow:0 0 10px var(--ac); }

h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.025em; line-height:1.05; text-wrap:balance; }
.display { font-size:clamp(1.9rem,7vw,4.6rem); font-weight:600; letter-spacing:-.035em; line-height:1.03; }
.h2 { font-size:clamp(1.8rem,4.2vw,3.1rem); letter-spacing:-.03em; }
.h3 { font-size:clamp(1.2rem,2.2vw,1.55rem); }
.lead { font-size:clamp(1.08rem,1.6vw,1.32rem); color:var(--t2); line-height:1.5; font-weight:400; letter-spacing:-.01em; text-wrap:pretty; }
.eyebrow-grad { background:var(--silver-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:550; padding:13px 22px; border-radius:999px; border:1px solid transparent; transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn-sm { padding:9px 16px; font-size:14px; }
.btn-primary { background:#f5f5f7; color:#0a0a0c; }
.btn-primary:hover { background:#fff; }
.btn-link { color:var(--ac-2); padding-inline:6px; }
.btn-link:hover { color:#fff; }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cta-row.center { justify-content:center; }

/* ── Reveal ─────────────────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.06s; } .reveal[data-delay="2"] { transition-delay:.12s; } .reveal[data-delay="3"] { transition-delay:.18s; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.lp-nav { position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100; display:flex; align-items:center; transition:background .25s var(--ease), border-color .25s var(--ease); border-bottom:1px solid transparent; }
.lp-nav.scrolled { background:rgba(6,6,8,.72); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--border); }
.lp-nav .wrap { display:flex; align-items:center; justify-content:space-between; }
.lp-brand { display:inline-flex; align-items:center; font-weight:700; }
.lp-brand img { height:30px; width:auto; }
.lp-brand .fallback { font-size:19px; }
.lp-nav-right { display:flex; align-items:center; gap:16px; }
.lp-lang { display:inline-flex; align-items:center; gap:6px; color:var(--t2); font-size:13px; position:relative; }
.lp-lang select { appearance:none; background:transparent; border:0; color:var(--t2); font:inherit; font-size:13px; padding-right:4px; cursor:pointer; }
.lp-lang select option { background:var(--surface); color:var(--t1); }
.lp-lang .mdi-chevron-down { pointer-events:none; }
body { padding-top:var(--nav-h); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.lp-hero { position:relative; padding:clamp(56px,9vw,118px) 0 clamp(48px,7vw,90px); overflow:hidden; }
.lp-hero-glow { position:absolute; inset:0; pointer-events:none; }
.lp-hero-glow .orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.lp-hero-glow .orb-1 { width:520px; height:520px; top:-160px; left:-120px; background:radial-gradient(circle,rgba(201,201,210,.20),transparent 70%); }
.lp-hero-glow .orb-2 { width:420px; height:420px; bottom:-160px; right:-100px; background:radial-gradient(circle,rgba(140,140,150,.16),transparent 70%); }
.lp-hero-inner { max-width:760px; }
.lp-hero .display { margin-bottom:18px; }
.lp-hero .lead { max-width:620px; }
.lp-hero .cta-row { margin-top:30px; }
.lp-hero-note { color:var(--t3); font-size:14px; margin-top:16px; }
.lp-hero-media { margin-top:clamp(36px,5vw,64px); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--bg-raise); box-shadow:0 30px 80px rgba(0,0,0,.55); }
.lp-hero-media img { width:100%; height:auto; }

/* ── Problem / agitate ──────────────────────────────────────────────────── */
.lp-pain { list-style:none; margin:0 auto; padding:0; max-width:760px; display:grid; gap:12px; }
.lp-pain li { display:flex; gap:12px; align-items:flex-start; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--t1); }
.lp-pain li .mdi { color:#d77; font-size:20px; flex:none; margin-top:1px; }

/* ── Benefits ───────────────────────────────────────────────────────────── */
.lp-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.lp-card { padding:26px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .25s var(--ease), transform .25s var(--ease); }
.lp-card:hover { border-color:var(--border-2); transform:translateY(-2px); }
.lp-card-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; background:var(--ac-dim); border:1px solid var(--border-2); color:var(--ac-2); font-size:22px; margin-bottom:16px; }
.lp-card h3 { margin-bottom:8px; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.lp-steplist { list-style:none; margin:0 auto; padding:0; max-width:780px; display:grid; gap:14px; counter-reset:step; }
.lp-step { display:flex; gap:18px; align-items:flex-start; padding:22px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.lp-step-n { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:15px; background:var(--ac-dim); border:1px solid var(--border-2); color:var(--ac-2); }
.lp-step h3 { margin-bottom:6px; }

/* ── Social proof ───────────────────────────────────────────────────────── */
.lp-logowall { display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; align-items:center; }
.lp-logo { display:inline-flex; align-items:center; gap:9px; color:var(--t2); font-weight:550; font-size:15px; padding:8px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
.lp-quote { max-width:760px; margin:clamp(28px,4vw,48px) auto 0; }
.lp-quote blockquote { margin:0; font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:500; letter-spacing:-.02em; line-height:1.32; color:var(--t1); }
.lp-quote figcaption { margin-top:16px; color:var(--t2); font-size:15px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.lp-faqlist { max-width:780px; margin:0 auto; display:grid; gap:10px; }
.lp-faq-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; }
.lp-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; font-weight:550; font-size:16px; }
.lp-faq-item summary::-webkit-details-marker { display:none; }
.lp-faq-item summary .mdi { color:var(--t2); transition:transform .25s var(--ease); flex:none; }
.lp-faq-item[open] summary .mdi { transform:rotate(180deg); }
.lp-faq-a { padding:0 20px 18px; color:var(--t2); line-height:1.6; }
.lp-faq-a p { margin:0; }

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.lp-final { position:relative; overflow:hidden; }
.lp-final-glow { position:absolute; inset:auto 0 -50% 0; height:120%; background:radial-gradient(60% 60% at 50% 100%,rgba(201,201,210,.16),transparent 70%); pointer-events:none; }
.lp-final .wrap { position:relative; }

/* ── Sticky CTA bar ─────────────────────────────────────────────────────── */
.lp-sticky { position:fixed; inset:auto 0 0 0; z-index:90; transform:translateY(110%); transition:transform .35s var(--ease); background:rgba(6,6,8,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-top:1px solid var(--border); padding:12px 0; }
.lp-sticky.show { transform:none; }
.lp-sticky .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lp-sticky-text { font-weight:550; font-size:15px; color:var(--t1); }

/* ── Cookie notice (subtle, EU only, shown only when a cookie tracker is on) ── */
.lp-cookie { position:fixed; left:16px; bottom:16px; z-index:95; max-width:340px; display:none; gap:10px; flex-direction:column; padding:14px 16px; background:rgba(12,12,16,.92); backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px); border:1px solid var(--border-2); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.lp-cookie.show { display:flex; }
.lp-cookie p { margin:0; font-size:13px; line-height:1.5; color:var(--t2); }
.lp-cookie-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }
.lp-cookie-actions a { font-size:13px; color:var(--t3); }
.lp-cookie-actions a:hover { color:var(--t1); }
.lp-cookie-actions button { font-size:13px; font-weight:600; color:#0a0a0c; background:#f5f5f7; border:0; border-radius:999px; padding:7px 16px; }
.lp-cookie-actions button:hover { background:#fff; }
@media (max-width:560px) { .lp-cookie { left:12px; right:12px; bottom:12px; max-width:none; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lp-footer { border-top:1px solid var(--border); padding:40px 0 56px; margin-top:clamp(40px,6vw,80px); }
.lp-foot-top { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.lp-foot-brand { display:inline-flex; align-items:center; gap:12px; color:var(--t2); font-weight:550; }
.lp-foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:26px; color:var(--t3); font-size:13px; }
.lp-foot-links { display:flex; gap:18px; }
.lp-foot-links a:hover { color:var(--t1); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:880px) {
  .lp-grid-3 { grid-template-columns:1fr; }
  .lp-sticky-text { display:none; }
  .lp-sticky .wrap { justify-content:center; }
  .lp-sticky .btn { width:100%; justify-content:center; }
}
/* Phones: hide the NAV language switcher so the (now larger) logo and the single
   CTA get the full nav width. The footer language switcher stays. */
@media (max-width:560px) {
  .lp-nav .lp-lang { display:none; }
}