/* POPPIFY marketing + legal site — shared styles.
   Committed brand look (not theme-flipping): deep tolopea-950 chrome,
   warm violet-biased paper for content, #5c43ff as the single accent. */
:root{
  --ink:#190d45;
  --ink-2:#321b94;
  --violet:#5c43ff;
  --violet-600:#5022ff;
  --violet-200:#bbbeff;
  --violet-tint:#eaecff;
  --paper:#ffffff;
  --paper-warm:#faf9fc;
  --paper-warm-2:#f2effa;
  --line:#e5e1ef;
  --muted:#6f6a86;
  --muted-2:#9a95af;
  --on-dark:#f3f1ff;
  --on-dark-muted:#b7aee6;
  --gold:#e9b949;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-0.02em; text-wrap:balance; margin:0;}
a{color:inherit; text-decoration:none;}
.eyebrow{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--violet);}

/* ── Nav ─────────────────────────────────────────── */
header.nav{position:sticky; top:0; z-index:50; background:rgba(25,13,69,0.72); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.08);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--on-dark); font-weight:800; letter-spacing:-0.01em; font-size:18px;}
.brand .mark{width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, var(--violet) 0%, var(--violet-600) 100%); display:grid; place-items:center; color:#fff; font-family:var(--serif); font-size:16px; font-weight:700; box-shadow:0 4px 14px rgba(92,67,255,0.5);}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{color:var(--on-dark-muted); font-size:14px; font-weight:500;}
.nav-links a:hover{color:var(--on-dark);}
@media (max-width:680px){ .nav-links{display:none;} }

/* ── Hero ─────────────────────────────────────────── */
.hero{background:radial-gradient(1200px 500px at 80% -10%, rgba(92,67,255,0.35), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(50,27,148,0.5), transparent 55%), var(--ink); color:var(--on-dark); padding:88px 0 120px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:48px;} }
.hero h1{font-size:clamp(38px, 6vw, 66px); line-height:1.03; color:#fff;}
.hero h1 .hl{color:var(--violet-200); font-style:italic;}
.hero p.lead{margin:22px 0 0; max-width:30ch; font-size:clamp(16px,1.6vw,19px); color:var(--on-dark-muted); line-height:1.6;}
.cta-row{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.badge{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); color:var(--on-dark); padding:12px 18px; border-radius:14px; font-size:13px; font-weight:600; transition:border-color .2s, background .2s;}
.badge:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.28);}
.badge .sub{display:block; font-size:10px; font-weight:500; color:var(--on-dark-muted); letter-spacing:.04em;}
.badge svg{width:22px; height:22px; flex:none;}
.soon{margin-top:16px; font-size:12px; color:var(--on-dark-muted); display:flex; align-items:center; gap:8px;}
.soon .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(233,185,73,0.18);}

/* Phone mock */
.phone-stage{display:grid; place-items:center;}
.phone{width:270px; height:560px; border-radius:42px; padding:12px; background:linear-gradient(160deg,#2a1b6b,#170b3e); box-shadow:0 40px 90px -30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.08); position:relative;}
.phone .screen{width:100%; height:100%; border-radius:32px; background:var(--paper-warm); overflow:hidden; position:relative;}
.phone .notch{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:96px; height:22px; background:#170b3e; border-radius:12px; z-index:3;}
.scr-top{background:var(--ink); color:#fff; padding:34px 18px 18px;}
.scr-top .h{font-family:var(--serif); font-size:19px; font-weight:600;}
.scr-top .s{font-size:11px; color:var(--on-dark-muted); margin-top:2px;}
.scr-search{margin:14px 0 0; background:rgba(255,255,255,0.12); border-radius:10px; height:34px; display:flex; align-items:center; padding:0 12px; color:var(--on-dark-muted); font-size:12px;}
.scr-body{padding:16px 16px;}
.scr-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:12px; box-shadow:0 6px 16px -12px rgba(25,13,69,0.4);}
.scr-card .row{display:flex; align-items:center; gap:10px;}
.scr-card .logo{width:38px; height:38px; border-radius:10px; background:var(--violet-tint); display:grid; place-items:center; font-size:18px;}
.scr-card .name{font-size:13px; font-weight:700; color:var(--ink);}
.scr-card .verified{font-size:10px; color:var(--violet); font-weight:700; display:flex; align-items:center; gap:3px;}
.scr-card .meta{font-size:11px; color:var(--muted); margin-top:1px;}
.pill{font-size:9px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--violet-tint); color:var(--violet-600); letter-spacing:.02em;}

/* ── Sections ─────────────────────────────────────── */
section{padding:96px 0;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head h2{font-size:clamp(28px,3.6vw,44px); line-height:1.08; margin-top:14px;}
.section-head p{color:var(--muted); font-size:17px; margin:16px 0 0;}
.markets{background:var(--paper-warm);}
.market-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:820px){ .market-grid{grid-template-columns:1fr;} }
.market{background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px 28px; transition:transform .25s ease, box-shadow .25s ease;}
.market:hover{transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(25,13,69,0.45);}
.market .ico{width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:26px; margin-bottom:20px; background:var(--violet-tint);}
.market h3{font-size:22px;}
.market p{color:var(--muted); font-size:15px; margin:10px 0 0;}
.market .tag{margin-top:18px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet);}
.trust{background:var(--ink); color:var(--on-dark);}
.trust .section-head h2{color:#fff;}
.trust .section-head p{color:var(--on-dark-muted);}
.trust-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:8px;}
@media (max-width:820px){ .trust-grid{grid-template-columns:1fr;} }
.tcard{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:28px 24px;}
.tcard .ico{width:44px; height:44px; border-radius:12px; background:rgba(92,67,255,0.22); display:grid; place-items:center; margin-bottom:16px; color:var(--violet-200);}
.tcard h3{font-size:18px; color:#fff;}
.tcard p{color:var(--on-dark-muted); font-size:14px; margin:8px 0 0;}
.tcard svg{width:22px; height:22px;}
.steps{max-width:820px; margin:0 auto; display:grid; gap:8px;}
.step{display:grid; grid-template-columns:auto 1fr; gap:22px; padding:22px 0; border-bottom:1px solid var(--line); align-items:start;}
.step:last-child{border-bottom:none;}
.step .n{font-family:var(--serif); font-size:26px; color:var(--violet); font-weight:600; width:46px; font-variant-numeric:tabular-nums;}
.step h3{font-size:19px;}
.step p{color:var(--muted); font-size:15px; margin:6px 0 0;}
.cta-band{background:var(--paper-warm-2);}
.cta-card{background:radial-gradient(700px 300px at 90% -20%, rgba(92,67,255,0.4), transparent 60%), var(--ink); border-radius:28px; padding:64px 48px; text-align:center; color:#fff; position:relative; overflow:hidden;}
.cta-card h2{font-size:clamp(28px,3.6vw,40px); color:#fff;}
.cta-card p{color:var(--on-dark-muted); max-width:46ch; margin:16px auto 0; font-size:16px;}
.cta-card .cta-row{justify-content:center;}

/* ── Footer ───────────────────────────────────────── */
footer{background:var(--ink); color:var(--on-dark-muted); padding:64px 0 40px; border-top:1px solid rgba(255,255,255,0.08);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08);}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr; gap:28px;} }
.foot-brand .brand{margin-bottom:14px;}
.foot-brand p{font-size:14px; max-width:34ch; line-height:1.6;}
.foot-col h4{color:#fff; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 16px;}
.foot-col a{display:block; font-size:14px; color:var(--on-dark-muted); padding:6px 0;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:13px; flex-wrap:wrap; gap:12px;}

/* ── Document (legal) pages ───────────────────────── */
.doc-hero{background:var(--ink); color:var(--on-dark); padding:72px 0 56px;}
.doc-hero h1{color:#fff; font-size:clamp(32px,5vw,52px); margin-top:14px;}
.doc-hero .eff{margin-top:16px; font-size:13px; color:var(--on-dark-muted);}
.doc{max-width:760px; margin:0 auto; padding:64px 24px 96px;}
.doc .intro{font-size:18px; color:var(--muted); line-height:1.7; margin:0 0 40px; padding-bottom:32px; border-bottom:1px solid var(--line);}
.doc section{padding:0; margin:0 0 40px;}
.doc h2{font-size:22px; margin:0 0 14px; scroll-margin-top:84px;}
.doc p{margin:0 0 14px; color:#2c2542; font-size:16px; line-height:1.75;}
.doc p:last-child{margin-bottom:0;}
.doc strong{font-weight:700; color:var(--ink);}
.doc ul{margin:0 0 14px; padding-left:22px;}
.doc li{margin:0 0 8px; color:#2c2542; font-size:16px; line-height:1.7;}
.doc a{color:var(--violet-600); text-decoration:underline; text-underline-offset:2px;}
.doc .contact-box{background:var(--paper-warm); border:1px solid var(--line); border-radius:14px; padding:20px 22px; font-size:15px;}

/* ── Support page ─────────────────────────────────── */
.support-contact{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:900px; margin:0 auto 56px;}
@media (max-width:760px){ .support-contact{grid-template-columns:1fr;} }
.contact-card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; text-align:center;}
.contact-card .ico{width:48px; height:48px; border-radius:13px; background:var(--violet-tint); display:grid; place-items:center; font-size:22px; margin:0 auto 14px;}
.contact-card h3{font-size:16px;}
.contact-card p{font-size:14px; color:var(--muted); margin:6px 0 0;}
.contact-card a{color:var(--violet-600); font-weight:600; font-size:14px;}
.faq{max-width:820px; margin:0 auto;}
.faq-cat{margin-bottom:44px;}
.faq-cat h2{font-size:24px; margin:0 0 18px; display:flex; align-items:center; gap:12px;}
.faq-cat h2 .emoji{font-size:22px;}
details.qa{border:1px solid var(--line); border-radius:14px; margin-bottom:12px; background:#fff; overflow:hidden;}
details.qa summary{list-style:none; cursor:pointer; padding:18px 22px; font-weight:600; font-size:16px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::after{content:"+"; font-family:var(--serif); font-size:22px; color:var(--violet); flex:none; transition:transform .2s;}
details.qa[open] summary::after{content:"\2013";}
details.qa .a{padding:0 22px 20px; color:#2c2542; font-size:15px; line-height:1.7;}
.callout{max-width:820px; margin:0 auto 48px; background:var(--paper-warm-2); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; padding:18px 22px; font-size:15px; color:#2c2542; line-height:1.65;}

/* ── Reveal ───────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }