:root{
  --bg:#090a0f;
  --surface:#12131b;
  --surface-strong:#181923;
  --line:#2c3040;
  --text:#f4f3f8;
  --muted:#a8abb8;
  --accent:#c5ff5b;
  --cyan:#7dd3fc;
  --rose:#fda4af;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 76% -8%,#31294e 0,transparent 34vw),
    radial-gradient(circle at 4% 8%,#203518 0,transparent 28vw),
    linear-gradient(180deg,#090a0f,#101119);
  color:var(--text);
  font:15px/1.6 Arial,sans-serif;
  min-height:100vh;
}
a{color:inherit}
.site-header,.site-footer,main{width:min(1180px,calc(100% - 36px));margin:auto}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px 0 34px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}
.brand img{display:block}
.site-header nav,.site-footer nav,.hero-actions,.trust-strip{
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
}
.site-header nav a,.site-footer nav a{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.site-header nav a:hover,.site-footer nav a:hover{color:var(--accent)}
.nav-cta{
  border:1px solid #40532d;
  border-radius:10px;
  background:#141b11;
  color:#effbdc!important;
  padding:8px 12px;
}
.eyebrow{
  display:inline-block;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}
.hero{
  display:grid;
  grid-template-columns:.94fr 1.06fr;
  align-items:center;
  gap:44px;
  padding:18px 0 56px;
}
.hero h1,.section h2,.cta-section h2{
  margin:13px 0 18px;
  font-size:4rem;
  line-height:1.02;
  letter-spacing:0;
}
.hero p,.section p,.cta-section p{
  max-width:680px;
  margin:0 0 22px;
  color:#c9cbd5;
  font-size:18px;
}
.hero-copy{max-width:650px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:10px;
  padding:0 18px;
  text-decoration:none;
  font-weight:900;
}
.button.primary{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#11140c;
  box-shadow:0 12px 30px #c5ff5b24;
}
.button.secondary{
  border:1px solid var(--line);
  background:#151620;
  color:var(--text);
}
.button:hover{transform:translateY(-1px)}
.compliance-line{
  max-width:590px!important;
  margin-top:18px!important;
  border-left:3px solid var(--accent);
  padding-left:14px;
  color:#e3ead9!important;
  font-size:14px!important;
  font-weight:800;
}
.product-visual{
  position:relative;
  min-height:500px;
  border:1px solid #343849;
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 0,#c5ff5b1f,transparent 35%),
    linear-gradient(145deg,#171923,#0e0f16);
  box-shadow:0 34px 100px #000a;
  overflow:hidden;
  padding:28px;
}
.product-visual:before{
  content:"";
  position:absolute;
  inset:18px auto 18px 18px;
  width:138px;
  border-right:1px solid var(--line);
  background:
    linear-gradient(#c5ff5b,#c5ff5b) 0 4px/38px 38px no-repeat,
    linear-gradient(#20222e,#20222e) 0 72px/94px 34px no-repeat,
    linear-gradient(#20222e,#20222e) 0 120px/108px 34px no-repeat,
    linear-gradient(#20222e,#20222e) 0 168px/82px 34px no-repeat;
  border-radius:14px 0 0 14px;
}
.visual-top,.visual-stats,.visual-list{position:relative;z-index:1;margin-left:168px}
.visual-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.visual-top span{
  font-size:31px;
  font-weight:900;
  letter-spacing:0;
}
.visual-top small{
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  padding:8px 12px;
}
.visual-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.visual-stats b{
  border:1px solid var(--line);
  border-radius:14px;
  background:#141620;
  padding:18px;
  font-size:30px;
}
.visual-stats small{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.visual-list{display:grid;gap:12px}
.visual-list article{
  border:1px solid var(--line);
  border-radius:14px;
  background:#12131b;
  padding:17px;
}
.visual-list strong,.visual-list span,.visual-list small{display:block}
.visual-list span{margin:6px 0;color:#e7e8ef;font-weight:700}
.visual-list small{color:var(--muted)}
.trust-strip{margin:0 0 34px}
.trust-strip span{
  border:1px solid #37402e;
  border-radius:999px;
  background:#11170f;
  color:#d7e8cc;
  padding:8px 12px;
  font-size:12px;
  font-weight:800;
}
.section{
  padding:58px 0;
  border-top:1px solid #242633;
}
.section h2{max-width:780px;font-size:3rem}
.walkthrough,.privacy,.use-cases,.plans{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:34px;
  align-items:start;
}
.walkthrough-panel,.privacy-points,.step-grid article,.case-grid article,.plan-grid article,.faq details{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(145deg,#171822,#101119);
}
.walkthrough-panel{padding:8px 24px}
.walkthrough-panel ol{margin:0;padding:8px 0;list-style:none;counter-reset:steps}
.walkthrough-panel li{
  position:relative;
  display:grid;
  gap:3px;
  min-height:72px;
  padding:16px 0 16px 52px;
  counter-increment:steps;
}
.walkthrough-panel li+li{border-top:1px solid #242633}
.walkthrough-panel li:before{
  content:counter(steps);
  position:absolute;
  left:0;
  top:17px;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--accent);
  color:#11140c;
  font-weight:900;
}
.walkthrough-panel span,.privacy-points span,.plan-grid li,.faq p{color:var(--muted)}
.step-grid,.case-grid,.plan-grid,.faq-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.step-grid article,.case-grid article,.plan-grid article{padding:22px}
.step-grid b{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--accent);
  color:#11140c;
}
.step-grid h3,.case-grid h3{
  margin:16px 0 7px;
  font-size:19px;
  line-height:1.2;
}
.step-grid p,.case-grid p{font-size:14px;margin:0;color:var(--muted)}
.case-grid,.plan-grid{grid-template-columns:repeat(3,1fr)}
.case-grid article:nth-child(2){border-color:#3e4b33;background:linear-gradient(145deg,#172017,#101119)}
.plan-grid article{display:grid;gap:14px}
.plan-grid span{color:var(--accent);font-weight:900}
.plan-grid strong{font-size:28px;line-height:1.1}
.plan-grid ul{display:grid;gap:9px;margin:0;padding-left:18px}
.featured-plan{border-color:#556b35!important;background:linear-gradient(145deg,#192315,#101119)!important}
.privacy-points{display:grid;gap:12px;padding:20px}
.privacy-points span{
  border:1px solid #34402b;
  border-radius:12px;
  background:#11170f;
  padding:14px;
  color:#d9e8d0;
  font-weight:800;
}
.faq-grid{grid-template-columns:repeat(2,1fr)}
.faq details{padding:18px}
.faq summary{
  cursor:pointer;
  color:#f4f3f8;
  font-size:17px;
  font-weight:900;
}
.faq p{margin:10px 0 0;font-size:15px}
.cta-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  margin:30px 0 62px;
  border:1px solid #42552c;
  border-radius:18px;
  background:radial-gradient(circle at 90% 0,#c5ff5b20,transparent 36%),linear-gradient(145deg,#182018,#101119);
  padding:clamp(26px,5vw,52px);
}
.cta-section h2{font-size:3rem;max-width:820px}
.cta-section p{margin-bottom:0}
.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0 38px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}

@media(max-width:980px){
  .hero,.walkthrough,.privacy,.use-cases,.plans{grid-template-columns:1fr}
  .step-grid,.case-grid,.plan-grid,.faq-grid{grid-template-columns:1fr 1fr}
  .product-visual{min-height:420px}
  .hero h1{font-size:3.5rem}
  .section h2,.cta-section h2{font-size:2.7rem}
}

@media(max-width:640px){
  .site-header{align-items:flex-start;flex-direction:column;padding-bottom:20px}
  .site-header nav a:not(.nav-cta){display:none}
  .hero{padding-top:6px;gap:28px}
  .hero h1{font-size:2.4rem}
  .section h2,.cta-section h2{font-size:2rem}
  .hero p,.section p,.cta-section p{font-size:16px}
  .hero-actions{align-items:stretch;flex-direction:column}
  .button{width:100%}
  .product-visual{min-height:auto;padding:18px}
  .product-visual:before{display:none}
  .visual-top,.visual-stats,.visual-list{margin-left:0}
  .visual-top{align-items:flex-start;flex-direction:column}
  .visual-top span{font-size:25px}
  .visual-stats,.step-grid,.case-grid,.plan-grid,.faq-grid{grid-template-columns:1fr}
  .section{padding:42px 0}
  .walkthrough-panel{padding:4px 18px}
  .cta-section,.site-footer{align-items:flex-start;flex-direction:column}
}
