:root{
  --bg:#F7F6F2;
  --paper:#FFFFFF;
  --ink:#0E1424;
  --muted:#5A647A;
  --line:rgba(14,20,36,.12);
  --accent:#2BB7F6;
  --accent2:#FF9A3D;
  --ok:#18B77E;
  --radius:18px;
  --shadow: 0 22px 55px rgba(14,20,36,.10);
  --shadow2: 0 14px 30px rgba(14,20,36,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 12% 5%, rgba(43,183,246,.14), transparent 55%),
    radial-gradient(760px 520px at 88% 10%, rgba(255,154,61,.14), transparent 58%),
    linear-gradient(180deg, var(--bg), #F1F0EB 70%);
}
.container{max-width:1100px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
strong{font-weight:800}
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(247,246,242,.86), rgba(247,246,242,.58));
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brandmark{
  width:34px;height:34px;border-radius:10px;object-fit:cover;
  border:1px solid rgba(14,20,36,.14);
  background: rgba(14,20,36,.04);
}
.brandtext{font-size:18px;letter-spacing:-.01em}
.navlinks{display:flex;align-items:center;gap:18px}
.navlinks a{color:var(--muted);font-weight:700;font-size:14px}
.navlinks a:hover{color:var(--ink)}
.navtoggle{display:none;background:transparent;border:0;cursor:pointer}
.navtoggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;opacity:.85}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#07101C;font-weight:900;border:0;cursor:pointer;
  box-shadow: var(--shadow2);
}
.btn:hover{transform: translateY(-1px)}
.btn-sm{padding:9px 12px;border-radius:11px;font-size:13px}
.btn-ghost{
  background: transparent;color:var(--ink);
  border:1px solid rgba(14,20,36,.18);
  box-shadow:none;
}
.btn-ghost:hover{border-color: rgba(14,20,36,.30)}
.hero{position:relative;padding:68px 0 26px;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:999px;filter: blur(24px);opacity:.6}
.blob-a{width:420px;height:420px;left:-160px;top:-140px;background:rgba(43,183,246,.24)}
.blob-b{width:360px;height:360px;right:-150px;top:-20px;background:rgba(255,154,61,.22)}
.blob-c{width:300px;height:300px;left:40%;top:160px;background:rgba(24,183,126,.10)}
.papergrain{
  position:absolute;inset:-20px;
  background-image: radial-gradient(rgba(14,20,36,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.25;
  mask-image: radial-gradient(ellipse at 30% 25%, rgba(0,0,0,.9), transparent 62%);
}
.hero-inner{display:grid;grid-template-columns: 1.05fr .95fr;gap:34px;align-items:center;position:relative}
.eyebrow{color:var(--muted);font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;margin:0 0 12px}
.hero h1{font-size:46px;line-height:1.05;margin:0 0 14px;letter-spacing:-.02em}
.lede{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 18px;max-width:56ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 16px}
.trustrow{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border-radius:999px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(14,20,36,.12);
  color:var(--muted);font-weight:900;font-size:13px;
}
.pill span{color:var(--ok);font-weight:1000}
.hero-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.88);
  border:1px solid rgba(14,20,36,.14);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-top{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid rgba(14,20,36,.12)}
.chip{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;color:rgba(14,20,36,.82);
  padding:6px 10px;border-radius:999px;
  background: rgba(14,20,36,.06);
  border:1px solid rgba(14,20,36,.12);
}
.dots i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:6px;background:rgba(14,20,36,.22)}
.card-body{padding:14px;display:grid;gap:12px}
.label{font-size:12px;color:rgba(14,20,36,.62);font-weight:1000;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
pre{
  margin:0;padding:12px;border-radius:14px;
  background: rgba(14,20,36,.04);
  border:1px solid rgba(14,20,36,.10);
  overflow:auto;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12px;color:rgba(14,20,36,.90);
}
.results{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.results li{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:14px;
  background: rgba(14,20,36,.03);
  border:1px solid rgba(14,20,36,.10);
  color:rgba(14,20,36,.92);
  font-weight:900;
}
.tag{font-size:11px;font-weight:1000;padding:4px 8px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.tag.calm{background: rgba(43,183,246,.16);border:1px solid rgba(43,183,246,.24)}
.tag.safe{background: rgba(24,183,126,.14);border:1px solid rgba(24,183,126,.22)}
.note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.divider{height:1px;background: linear-gradient(90deg, transparent, rgba(14,20,36,.18), transparent);margin-top:44px}
.section{padding:74px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.section-head h2{margin:0;font-size:30px;letter-spacing:-.01em}
.section-head p{margin:0;color:var(--muted);max-width:54ch;line-height:1.6}
.steps{display:grid;grid-template-columns: repeat(4, 1fr);gap:14px}
.step{border-radius: var(--radius);background: rgba(255,255,255,.72);border:1px solid rgba(14,20,36,.12);padding:16px;box-shadow: 0 10px 20px rgba(14,20,36,.06)}
.stepnum{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background: rgba(43,183,246,.12);border:1px solid rgba(43,183,246,.20);font-weight:1000;margin-bottom:10px}
.step h3{margin:0 0 6px;font-size:16px}
.step p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.section-soft{
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(43,183,246,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 60%, rgba(255,154,61,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  border-top:1px solid rgba(14,20,36,.10);
  border-bottom:1px solid rgba(14,20,36,.10);
}
.split{display:grid;grid-template-columns: 1fr 1fr;gap:14px;margin-top:12px}
.panel{border-radius: var(--radius);background: rgba(255,255,255,.80);border:1px solid rgba(14,20,36,.12);padding:18px;box-shadow: 0 10px 20px rgba(14,20,36,.06)}
.panel h3{margin:0 0 10px;font-size:17px}
.bullets{margin:0;padding-left:18px;color:var(--muted);line-height:1.8}
.badge-row{display:grid;grid-template-columns: repeat(3,1fr);gap:14px;margin-top:16px}
.badge{border-radius: var(--radius);background: rgba(255,255,255,.72);border:1px solid rgba(14,20,36,.12);padding:16px;box-shadow: 0 10px 20px rgba(14,20,36,.06)}
.badge-title{font-weight:1000;margin-bottom:4px}
.badge-desc{color:var(--muted);line-height:1.6}
.cards{display:grid;grid-template-columns: repeat(3,1fr);gap:14px}
.card{border-radius: var(--radius);background: rgba(255,255,255,.72);border:1px solid rgba(14,20,36,.12);padding:18px;box-shadow: 0 10px 20px rgba(14,20,36,.06)}
.card h3{margin:0 0 6px}
.card p{margin:0;color:var(--muted);line-height:1.6}
.meta{margin-top:10px;color:rgba(14,20,36,.70);font-weight:1000;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.callout{
  margin-top:18px;border-radius: calc(var(--radius) + 2px);
  border:1px solid rgba(14,20,36,.12);
  background: linear-gradient(135deg, rgba(43,183,246,.10), rgba(255,154,61,.10));
  padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  box-shadow: var(--shadow2);
}
.callout h3{margin:0 0 4px}
.callout p{margin:0;color:var(--muted);line-height:1.6;max-width:64ch}
.section-cta{padding:84px 0}
.cta-box{
  border-radius: 26px;background: rgba(255,255,255,.85);
  border:1px solid rgba(14,20,36,.12);box-shadow: var(--shadow);
  padding:22px;display:grid;grid-template-columns: 1fr 1fr;gap:18px;
}
.cta-copy h2{margin:0 0 8px}
.cta-copy p{margin:0;color:var(--muted);line-height:1.7}
.tiny{margin-top:12px;color:rgba(14,20,36,.62);font-size:12px}
.form{display:grid;gap:10px}
label span{display:block;color:rgba(14,20,36,.72);font-weight:1000;font-size:12px;margin:0 0 6px;letter-spacing:.06em;text-transform:uppercase}
input, textarea{
  width:100%;border-radius:14px;border:1px solid rgba(14,20,36,.14);
  background: rgba(255,255,255,.88);padding:12px;color:var(--ink);outline:none;
}
input:focus, textarea:focus{border-color: rgba(43,183,246,.55);box-shadow: 0 0 0 4px rgba(43,183,246,.14)}
.formnote{margin:0;color:rgba(14,20,36,.62);font-size:12px;line-height:1.5}
.footer{padding:26px 0;border-top:1px solid rgba(14,20,36,.10);background: rgba(255,255,255,.55)}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footnote{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.footlinks{display:flex;gap:14px;flex-wrap:wrap}
.footlinks a{color:var(--muted);font-weight:800;font-size:13px}
.footlinks a:hover{color:var(--ink)}
.copyright{color:rgba(14,20,36,.55);font-size:13px}
@media (max-width: 960px){
  .hero-inner{grid-template-columns: 1fr}
  .hero h1{font-size:40px}
  .steps{grid-template-columns: 1fr 1fr}
  .cards{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .badge-row{grid-template-columns: 1fr}
  .cta-box{grid-template-columns: 1fr}
  .navlinks{display:none}
  .navtoggle{display:block}
  body.menu-open .navlinks{
    display:flex;position:absolute;right:22px;top:62px;
    flex-direction:column;align-items:stretch;gap:12px;
    background: rgba(247,246,242,.96);
    border:1px solid rgba(14,20,36,.14);
    padding:14px;border-radius:16px;min-width:220px;
  }
}