:root{
  --bg:#fbfaf7; --surface:#ffffff; --surface-2:#f5f4f0;
  --text:#1a1d1c; --text-muted:#5b6260; --border:#e6e4de;
  --brand:#0f766e; --brand-2:#0d9488; --accent:#f59e0b;
  --brand-tint:#ecf7f5; --shadow: 0 1px 2px rgba(20,25,24,0.04), 0 8px 24px rgba(20,25,24,0.06);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1211; --surface:#161a19; --surface-2:#1b201f;
    --text:#eef1f0; --text-muted:#9aa5a2; --border:#262b2a;
    --brand:#2dd4bf; --brand-2:#14b8a6; --accent:#fbbf24;
    --brand-tint:#12312d; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1211; --surface:#161a19; --surface-2:#1b201f;
  --text:#eef1f0; --text-muted:#9aa5a2; --border:#262b2a;
  --brand:#2dd4bf; --brand-2:#14b8a6; --accent:#fbbf24;
  --brand-tint:#12312d; --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
img{max-width:100%;}

/* ---- header ---- */
header{position:sticky; top:0; z-index:20; background:color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none;}
.brand .mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800;}
nav.links{display:flex; align-items:center; gap:28px;}
nav.links a{font-size:14.5px; color:var(--text-muted); text-decoration:none; font-weight:500;}
nav.links a:hover{color:var(--text);}
.nav-cta{display:flex; align-items:center; gap:12px;}
@media (max-width: 760px){ nav.links{display:none;} }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border-radius:10px; font-weight:600; font-size:14.5px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-2);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-lg{padding:13px 24px; font-size:15.5px; border-radius:12px;}

/* ---- hero ---- */
.hero{padding:88px 0 64px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--brand); background:var(--brand-tint); border:1px solid color-mix(in oklab, var(--brand) 25%, transparent); padding:6px 14px; border-radius:999px; margin-bottom:22px;}
h1{font-size:clamp(32px, 5vw, 52px); line-height:1.08; letter-spacing:-0.02em; margin:0 0 20px; font-weight:700;}
h1 .accent{color:var(--brand);}
.sub{font-size:19px; line-height:1.55; color:var(--text-muted); max-width:640px; margin:0 auto 34px;}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;}
.hero-note{font-size:13.5px; color:var(--text-muted);}

/* ---- section shell ---- */
section{padding:72px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
.kicker{font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand);}
h2{font-size:clamp(26px,3.2vw,34px); margin:10px 0 12px; letter-spacing:-0.01em;}
.section-head p{color:var(--text-muted); font-size:16.5px; line-height:1.6; margin:0;}

/* ---- how it works ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow);}
.step .num{width:34px; height:34px; border-radius:9px; background:var(--brand-tint); color:var(--brand); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:15px;}
.step h3{margin:0 0 8px; font-size:17px;}
.step p{margin:0; color:var(--text-muted); font-size:14.5px; line-height:1.55;}

/* ---- what it is / isn't ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }
.card{border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:var(--surface);}
.card h3{margin:0 0 14px; font-size:16.5px; display:flex; align-items:center; gap:8px;}
.card ul{margin:0; padding:0; list-style:none;}
.card li{display:flex; gap:10px; padding:7px 0; font-size:14.5px; line-height:1.5; color:var(--text-muted);}
.tick{color:var(--brand); flex-shrink:0;}
.cross{color:#b45309; flex-shrink:0;}

/* ---- security ---- */
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:820px){ .sec-grid{grid-template-columns:1fr;} }
.sec-item{padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);}
.sec-item .ico{width:36px; height:36px; border-radius:10px; background:var(--brand-tint); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.sec-item h4{margin:0 0 6px; font-size:15px;}
.sec-item p{margin:0; font-size:13.5px; color:var(--text-muted); line-height:1.55;}
.compliance-note{margin-top:28px; padding:16px 20px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:13.5px; color:var(--text-muted); line-height:1.6;}

/* ---- pricing ---- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
@media (max-width:900px){ .pricing-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;} }
.plan{position:relative; border:1px solid var(--border); border-radius:var(--radius); padding:28px 26px; background:var(--surface); display:flex; flex-direction:column;}
.plan.featured{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow);}
.soon-badge{position:absolute; top:-11px; right:20px; background:var(--accent); color:#3a2a02; font-size:11px; font-weight:800; letter-spacing:0.03em; padding:4px 10px; border-radius:999px; text-transform:uppercase;}
.plan h3{margin:6px 0 4px; font-size:19px;}
.plan .price{font-size:30px; font-weight:700; margin:6px 0 2px;}
.plan .price small{font-size:14px; font-weight:500; color:var(--text-muted);}
.plan .tagline{font-size:13.5px; color:var(--text-muted); margin-bottom:18px; min-height:36px;}
.plan ul{list-style:none; margin:0 0 22px; padding:0; flex:1;}
.plan li{display:flex; gap:9px; font-size:14px; padding:6px 0; color:var(--text-muted);}
.pricing-foot{text-align:center; margin-top:28px; font-size:13.5px; color:var(--text-muted); line-height:1.6; max-width:640px; margin-left:auto; margin-right:auto;}
.pricing-foot + .pricing-foot{margin-top:10px;}
.pricing-foot a{color:var(--brand); text-decoration:none; font-weight:600;}
.pricing-foot a:hover{text-decoration:underline;}

/* ---- faq ---- */
.page-hero{padding:56px 0 12px; text-align:left;}
.page-hero h1{font-size:clamp(28px, 4vw, 40px); margin:10px 0 16px;}
.faq{max-width:720px;}
.faq-callout{padding:16px 20px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:14.5px; color:var(--text-muted); line-height:1.65; margin:0 0 12px;}
.faq-item{border-top:1px solid var(--border); padding:26px 0;}
.faq-item:first-of-type{border-top:none; padding-top:8px;}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-item h2{font-size:18px; margin:0 0 10px; letter-spacing:0;}
.faq-item p, .faq-item li{font-size:15px; line-height:1.65; color:var(--text-muted); margin:0 0 10px;}
.faq-item p:last-child, .faq-item ul:last-child{margin-bottom:0;}
.faq-item ul{margin:0 0 10px; padding-left:1.2em;}
.faq-item li{margin-bottom:6px;}
.faq-item strong{color:var(--text); font-weight:600;}
.faq a{color:var(--brand); text-decoration:none; font-weight:500;}
.faq a:hover{text-decoration:underline;}
.faq-back{margin-top:28px; font-size:14.5px;}

/* ---- cta band ---- */
.cta-band{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border-radius:20px; padding:52px 40px; text-align:center; color:#fff;}
.cta-band h2{color:#fff; margin-top:0;}
.cta-band p{color:rgba(255,255,255,0.85); max-width:520px; margin:0 auto 28px; font-size:16px;}
.cta-band .btn-primary{background:#fff; color:var(--brand);}
.cta-band .btn-primary:hover{background:#f2fbfa;}

/* ---- footer ---- */
footer{border-top:1px solid var(--border); padding:44px 0 32px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:28px;}
.foot-links{display:flex; gap:22px; flex-wrap:wrap;}
.foot-links a{font-size:13.5px; color:var(--text-muted); text-decoration:none;}
.foot-links a:hover{color:var(--text);}
.foot-bottom{font-size:12.5px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}