:root{
  --bg:#0b0e14; --panel:#12161f; --panel-border:#232a38;
  --text:#e8ecf4; --muted:#9aa3b5; --accent:#7fd6c2; --accent-dim:#3b6f63;
  --ground:#e08c46; --create:#8b78e6; --calm:#7fd6c2;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
}
a{color:var(--accent); text-underline-offset:3px;}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
.wrap{max-width:960px; margin:0 auto; padding:0 20px;}
.narrow{max-width:720px;}

header.site{padding:22px 0;}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:0.2em; font-size:14px;}
.brand svg{display:block;}
.nav{display:flex; align-items:center; gap:18px; font-size:14px;}
.nav a{color:var(--muted); text-decoration:none;}
.nav a:hover{color:var(--text);}

.btn{
  display:inline-block; padding:14px 26px; border-radius:14px; font-weight:700; font-size:16px;
  text-decoration:none; background:var(--accent); color:#0b0e14; border:1px solid var(--accent);
}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--panel-border);}
.btn.small{padding:9px 16px; font-size:14px; border-radius:11px;}

.hero{padding:56px 0 40px; text-align:center;}
.hero .mark{margin:0 auto 22px; display:block; filter:drop-shadow(0 0 18px rgba(127,214,194,0.2));}
.kicker{font-size:12px; letter-spacing:0.32em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;}
h1{font-size:clamp(34px,7.5vw,62px); line-height:1.08; letter-spacing:-0.02em; margin:0 0 18px;}
h1 em{font-style:normal; color:var(--accent);}
.lead{font-size:clamp(17px,2.6vw,21px); color:#b4bccb; max-width:620px; margin:0 auto 28px;}
.cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:14px;}
.fine{font-size:13px; color:var(--muted); margin:0;}

section{padding:36px 0;}
h2{font-size:clamp(24px,4.2vw,34px); line-height:1.2; letter-spacing:-0.01em; margin:0 0 14px;}
.sub{color:var(--muted); max-width:640px; margin:0 0 26px;}

.safety{
  background:rgba(224,150,107,0.08); border:1px solid rgba(224,150,107,0.4);
  border-radius:18px; padding:22px 22px 18px;
}
.safety h2{font-size:20px; margin:0 0 10px;}
.safety ul{margin:0; padding-left:20px;}
.safety li{margin:0 0 8px; color:#d9dde6;}
.safety li strong{color:var(--text);}

.quote{
  text-align:center; padding:44px 0;
}
.quote blockquote{
  margin:0 auto; max-width:640px; font-size:clamp(19px,3.2vw,26px); line-height:1.45; font-style:italic;
}
.quote .why{max-width:620px; margin:20px auto 0; color:#b4bccb; font-size:15px;}
.quote cite{display:block; margin-top:14px; font-size:13px; color:var(--muted); font-style:normal; letter-spacing:0.06em;}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.preset{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; padding:24px 20px;
}
.preset .num{
  width:54px; height:54px; border-radius:50%; border:2px solid var(--c); color:var(--c);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;
  box-shadow:0 0 18px color-mix(in srgb, var(--c) 35%, transparent); margin-bottom:14px;
}
.preset h3{margin:0 0 2px; font-size:19px;}
.preset .hz{font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--c); margin:0 0 10px;}
.preset p{margin:0; color:var(--muted); font-size:15px;}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.card{background:var(--panel); border:1px solid var(--panel-border); border-radius:18px; padding:20px;}
.card h3{margin:0 0 6px; font-size:17px;}
.card p{margin:0; color:var(--muted); font-size:15px;}

.shots{
  display:flex; gap:16px; overflow-x:auto; padding:6px 20px 18px; margin:0 -20px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.shots img{
  flex:0 0 auto; width:min(260px,68vw); height:auto; border-radius:22px; scroll-snap-align:center;
  border:1px solid var(--panel-border);
}

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.steps ol{margin:8px 0 0; padding-left:20px; color:#c9d0dc;}
.steps li{margin-bottom:6px;}

.honest{color:#b4bccb;}
.honest p{margin:0 0 12px;}

footer.site{border-top:1px solid var(--panel-border); margin-top:30px; padding:30px 0 50px; font-size:13px; color:var(--muted);}
footer.site .links{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:14px;}
footer.site p{margin:0 0 8px; max-width:720px;}

.legal{padding:36px 0 20px;}
.legal h1{font-size:clamp(30px,6vw,44px);}
.legal h2{font-size:20px; margin:30px 0 8px;}
.legal p,.legal li{color:#c9d0dc;}
.legal ul{padding-left:20px;}
.legal .meta{color:var(--muted); font-size:14px;}

@media (max-width:720px){
  .grid3{grid-template-columns:1fr;}
  .nav .hide-sm{display:none;}
  .hero{padding-top:36px;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.plans .card h3{font-size:19px;}
.plans .price{color:var(--text); font-size:30px; font-weight:700; margin:0 0 12px; line-height:1.1;}
.plans .price small{font-size:13px; font-weight:400; color:var(--muted); display:block; margin-top:4px;}
.plans .premium{border-color:var(--accent-dim);}
.plist{margin:0 0 14px; padding-left:18px; color:#c9d0dc; font-size:15px;}
.plist li{margin-bottom:6px;}
.plans-line{margin:0; font-size:15px; color:var(--text);}
.plans-note{margin-top:16px;}
@media (max-width:720px){ .plans{grid-template-columns:1fr;} }
