/* ============================================================
   Ripple Effect — Landing page
   Shares the app's dark editorial system. Responsive.
   ============================================================ */
:root{
  --bg:#141310;
  --bg-2:#1b1914;
  --surface:#211f18;
  --surface-2:#2a2820;
  --line:#3a362b;
  --line-soft:#2c2a21;
  --ink:#f5f1e6;
  --ink-2:#b7b1a0;
  --ink-3:#7e7868;
  --accent:#37cdbf;
  --accent-deep:#1f8f86;
  --accent-soft:#15302e;
  --high:#ff6f60;
  --mod:#f3c24c;
  --low:#5fd39c;
  --high-soft:#3a201d;
  --mod-soft:#352c16;
  --low-soft:#16321f;
  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui:'Hanken Grotesk', system-ui, sans-serif;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#06201e;}
a{color:inherit;text-decoration:none;}

/* ---------- ambient ripple background ---------- */
.bg-rings{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background:repeating-radial-gradient(circle at 50% 0%,
    transparent 0, transparent 70px,
    rgba(55,205,191,.05) 71px, rgba(55,205,191,.05) 73px, transparent 74px);
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0, transparent 65%);
          mask-image:radial-gradient(circle at 50% 0%, #000 0, transparent 65%);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(20,19,16,.92), rgba(20,19,16,.6));
  border-bottom:1px solid var(--line-soft);}
.nav .wrap{display:flex; align-items:center; gap:14px; height:64px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.2px;}
.brand b{color:var(--accent);}
.logomark{width:26px; height:26px; border-radius:50%; flex:none; position:relative; border:2px solid var(--accent);}
.logomark::after{content:""; position:absolute; inset:5px; border-radius:50%; border:1.5px solid var(--accent-deep);}
.nav .spacer{flex:1;}
.nav .navlinks{display:flex; gap:26px; font-size:14px; color:var(--ink-2);}
.nav .navlinks a:hover{color:var(--ink);}
@media (max-width:720px){ .nav .navlinks{display:none;} }
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-weight:700; font-size:15px;
  border-radius:13px; padding:11px 20px; transition:.16s; cursor:pointer; border:none; white-space:nowrap;}
.btn-primary{background:var(--accent); color:#06201e;}
.btn-primary:hover{background:#48ddce; transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-lg{font-size:17px; padding:16px 28px; border-radius:15px;}

/* ---------- hero ---------- */
.hero{padding:84px 0 72px; text-align:center;}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.4px; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-deep); border-radius:30px; padding:6px 16px; margin-bottom:26px;}
.hero h1{font-family:var(--font-display); font-weight:800; font-size:clamp(38px, 7vw, 76px); line-height:.98;
  letter-spacing:-2px; margin:0 auto; max-width:14ch; text-wrap:balance;}
.hero h1 .em{color:var(--accent);}
.hero .lede{font-size:clamp(16px, 2.4vw, 20px); color:var(--ink-2); max-width:60ch; margin:24px auto 0; text-wrap:pretty;}
.hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px;}
.hero .micro{font-size:13px; color:var(--ink-3); margin-top:18px;}

/* translate strip — the core "gap" idea, animated */
.translate{max-width:760px; margin:54px auto 0; display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch;}
@media (max-width:680px){ .translate{grid-template-columns:1fr; gap:12px;} .translate .arrow{transform:rotate(90deg);} }
.tcard{background:var(--surface); border:1.5px solid var(--line-soft); border-radius:18px; padding:22px; text-align:left;}
.tcard .lab{font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3);}
.tcard .head{font-family:var(--font-display); font-weight:700; font-size:22px; margin-top:10px; line-height:1.12;}
.tcard.news{opacity:.85;}
.tcard.you{border-color:var(--accent-deep); background:linear-gradient(180deg, var(--accent-soft), var(--surface));}
.tcard.you .head .big{color:var(--accent);}
.translate .arrow{align-self:center; color:var(--accent); font-size:26px; font-family:var(--font-display); font-weight:700;}

/* ---------- section scaffold ---------- */
.section{padding:72px 0; position:relative; z-index:1;}
.section.tight{padding:54px 0;}
.eyebrow{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); font-weight:700; text-align:center;}
.sec-title{font-family:var(--font-display); font-weight:700; font-size:clamp(28px, 4.5vw, 42px); line-height:1.05; letter-spacing:-1px;
  text-align:center; margin:12px auto 0; max-width:18ch; text-wrap:balance;}
.sec-sub{text-align:center; color:var(--ink-2); max-width:56ch; margin:16px auto 0; font-size:16px; text-wrap:pretty;}

/* ---------- the gap (problem) ---------- */
.gap-quote{max-width:820px; margin:0 auto; text-align:center;}
.gap-quote .q{font-family:var(--font-display); font-weight:600; font-size:clamp(24px, 4vw, 38px); line-height:1.2; letter-spacing:-.6px; text-wrap:balance;}
.gap-quote .q .dim{color:var(--ink-3);}
.gap-quote .q .lit{color:var(--accent);}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px;}
@media (max-width:780px){ .steps{grid-template-columns:1fr;} }
.stepcard{background:var(--surface); border:1.5px solid var(--line-soft); border-radius:20px; padding:26px 24px; position:relative;}
.stepcard .n{font-family:var(--font-display); font-weight:800; font-size:15px; color:#06201e; background:var(--accent);
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;}
.stepcard h3{font-family:var(--font-display); font-weight:700; font-size:20px; margin:18px 0 8px; letter-spacing:-.3px;}
.stepcard p{color:var(--ink-2); font-size:14.5px; margin:0;}

/* ---------- dimensions ---------- */
.dims{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:46px;}
@media (max-width:880px){ .dims{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .dims{grid-template-columns:1fr;} }
.dimcard{background:var(--surface); border:1.5px solid var(--line-soft); border-radius:18px; padding:22px 18px; text-align:center;}
.dimcard .g{font-size:30px;}
.dimcard h4{font-family:var(--font-display); font-weight:700; font-size:17px; margin:12px 0 6px;}
.dimcard p{color:var(--ink-3); font-size:13px; margin:0; line-height:1.35;}

/* ---------- sample output ---------- */
.sample{display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; margin-top:46px;}
@media (max-width:840px){ .sample{grid-template-columns:1fr; gap:28px;} }
.sample .copy h3{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,3.5vw,32px); line-height:1.1; letter-spacing:-.6px; margin:0;}
.sample .copy p{color:var(--ink-2); font-size:15.5px; margin:16px 0 0;}
.sample .copy ul{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px;}
.sample .copy li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--ink-2);}
.sample .copy li .tick{color:var(--accent); font-weight:700; flex:none;}

/* mock result panel */
.mock{background:linear-gradient(180deg, var(--bg-2), var(--bg)); border:1.5px solid var(--line); border-radius:24px; padding:24px;
  box-shadow:0 30px 80px -40px #000;}
.mock .label{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-3); text-align:center;}
.mock .big{font-family:var(--font-display); font-weight:800; font-size:clamp(44px,8vw,60px); line-height:.9; letter-spacing:-2px; text-align:center; margin-top:8px; font-variant-numeric:tabular-nums;}
.mock .days{text-align:center; font-size:15px; margin-top:10px;}
.mock .days b{color:var(--accent);}
.mock .incbar{max-width:260px; margin:16px auto 0;}
.mock .incbar .track{height:11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden;}
.mock .incbar .track > i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent-deep), var(--accent)); border-radius:8px; transition:width 1.1s cubic-bezier(.3,0,.2,1);}
.mock .incbar .cap{font-size:11px; color:var(--ink-3); text-align:center; margin-top:6px;}
.mock .equiv{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px;}
.mock .equiv .e{background:var(--surface); border:1.5px solid var(--line-soft); border-radius:14px; padding:12px 6px; text-align:center;}
.mock .equiv .e .n{font-family:var(--font-display); font-weight:800; font-size:22px; line-height:1; font-variant-numeric:tabular-nums;}
.mock .equiv .e .l{font-size:10.5px; color:var(--ink-3); margin-top:5px;}
.mock .ripple{display:flex; gap:11px; padding:13px; background:var(--surface); border:1.5px solid var(--line-soft);
  border-radius:14px; border-left:4px solid var(--sevcol,var(--line)); margin-top:10px;}
.mock .ripple[data-sev="high"]{--sevcol:var(--high);}
.mock .ripple[data-sev="mod"]{--sevcol:var(--mod);}
.mock .ripple .ic{width:34px; height:34px; border-radius:10px; background:var(--surface-2); display:grid; place-items:center; font-size:16px; flex:none;}
.mock .ripple .rb{flex:1; min-width:0;}
.mock .ripple .rtop{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.mock .ripple .dim{font-size:14px; font-weight:600;}
.mock .ripple .delta{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--sevcol); white-space:nowrap;}
.mock .ripple .why{font-size:12px; color:var(--ink-3); margin-top:3px; line-height:1.3;}
.mock .seedmore{text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:14px;}

/* ---------- who it's for ---------- */
.audience{max-width:760px; margin:0 auto; background:var(--surface); border:1.5px solid var(--line-soft); border-radius:22px; padding:34px;}
.audience .row{display:flex; gap:18px; align-items:center;}
@media (max-width:560px){ .audience .row{flex-direction:column; text-align:center;} }
.audience .badge{font-size:34px; flex:none;}
.audience h3{font-family:var(--font-display); font-weight:700; font-size:22px; margin:0 0 8px; letter-spacing:-.3px;}
.audience p{color:var(--ink-2); font-size:15px; margin:0;}

/* ---------- closing CTA ---------- */
.closing{text-align:center; padding:90px 0 100px;}
.closing h2{font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5.5vw,52px); line-height:1; letter-spacing:-1.5px; margin:0 auto; max-width:16ch; text-wrap:balance;}
.closing p{color:var(--ink-2); max-width:48ch; margin:18px auto 0; font-size:16px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft); padding:30px 0 50px;}
.foot .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--ink-3); font-size:13px;}
.foot .spacer{flex:1;}
.foot .disclaimer{max-width:60ch; line-height:1.5;}

/* ---------- entrance animation (progressive enhancement) ---------- */
/* Visible by default — only hidden once JS confirms it can reveal them */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .mock .incbar .track > i{transition:none !important;}
}