:root{
  --bg:#eceff3; --card:#ffffff; --card-2:#f6f8fa;
  --ink:#0e1a1c; --muted:#54636b; --faint:#8a97a0;
  --hair:#e3e8ed; --hair-2:#d3dbe1;
  --teal:#0d9488; --teal-ink:#0b7d73; --teal-wash:#e6f7f4; --teal-deep:#0a5f58;
  --pass:#0f9d58; --pass-wash:#e7f6ec;
  --warn:#b7791f; --warn-wash:#fbf1de;
  --hero-grad:linear-gradient(155deg,#f3fbf9,#e7eef2);
  --shadow-sm:0 1px 2px rgba(14,26,28,.06);
  --shadow:0 2px 4px rgba(14,26,28,.05), 0 20px 44px -26px rgba(14,26,28,.45);
  --shadow-lg:0 30px 70px -30px rgba(11,125,115,.5);
  --r:16px;
  --font:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --display:"Manrope","IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Consolas",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%}
.shell{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,28px)}
a{color:inherit}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;font-family:var(--display)}

nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
nav .shell{display:flex;align-items:center;gap:12px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:17px}
.logo svg{width:25px;height:25px;color:var(--teal)}
nav .links{margin-left:auto;display:flex;gap:26px}
nav .links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
nav .links a:hover{color:var(--ink)}
@media(max-width:820px){nav .links{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;
  font-size:14.5px;padding:10px 18px;border-radius:11px;text-decoration:none;cursor:pointer;border:0}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal-deep)}
.btn.ghost{background:transparent;border:1px solid var(--hair-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal-ink)}

.hero{background:var(--hero-grad);border-bottom:1px solid var(--hair)}
.hero .shell{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);
  align-items:center;padding:clamp(44px,7vw,84px) 0}
@media(max-width:860px){.hero .shell{grid-template-columns:1fr;padding:44px 0 36px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--teal-ink);background:var(--teal-wash);padding:6px 13px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(30px,6vw,52px);font-weight:800;line-height:1.05;margin:0 0 18px}
.hero h1 .hl{color:var(--teal-ink)}
.hero p.lead{font-size:clamp(16px,2.4vw,19px);color:var(--muted);margin:0 0 26px;max-width:38ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.trust{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;color:var(--faint);font-size:13px}
.trust b{color:var(--ink);font-weight:600}

.mock{background:var(--card);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:20px;transform:rotate(1.4deg)}
@media(max-width:860px){.mock{transform:none;max-width:360px;margin:0 auto}}
.mock .mh{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.ring{position:relative;width:66px;height:66px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{fill:none;stroke:var(--hair-2);stroke-width:8}
.ring .a{fill:none;stroke:var(--pass);stroke-width:8;stroke-linecap:round;stroke-dasharray:182;stroke-dashoffset:182}
.ring .l{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px;color:var(--pass)}
.mock .mt b{font-family:var(--display);font-weight:700;font-size:15px;display:block}
.mock .mt span{color:var(--muted);font-size:13px}
.mock .mrows{display:flex;flex-direction:column;margin-top:6px}
.mock .mrow{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.mock .mrow:last-child{border-bottom:0}
.mock .mrow .k{color:var(--muted)}
.mchip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.mchip.ok{background:var(--pass-wash);color:var(--pass)}
.mchip.warn{background:var(--warn-wash);color:var(--warn)}
.mock .mref{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--teal-ink);text-align:center}

section{padding:clamp(48px,7vw,84px) 0}
.kicker{color:var(--teal-ink);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.sec-h{font-size:clamp(24px,4vw,34px);font-weight:800;margin:0 0 14px}
.sec-lead{color:var(--muted);font-size:17px;max-width:56ch;margin:0 0 38px}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.feat{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm)}
.feat .ic{width:42px;height:42px;border-radius:11px;background:var(--teal-wash);color:var(--teal-ink);display:grid;place-items:center;margin-bottom:14px}
.feat .ic svg{width:22px;height:22px}
.feat h3{font-size:16.5px;font-weight:700;margin:0 0 6px}
.feat p{color:var(--muted);font-size:14px;margin:0}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--card-2);border:1px solid var(--hair);border-radius:var(--r);padding:26px 22px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;
  width:36px;height:36px;border-radius:10px;background:var(--teal);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:17px;box-shadow:var(--shadow-sm)}
.step h3{font-size:17px;font-weight:700;margin:14px 0 6px}
.step p{color:var(--muted);font-size:14px;margin:0}

.band{background:var(--teal-deep);color:#fff;border-radius:22px;padding:clamp(30px,5vw,52px);text-align:center}
.band h2{color:#fff;font-size:clamp(24px,4vw,34px);margin:0 0 12px}
.band p{color:rgba(255,255,255,.85);font-size:17px;margin:0 0 26px;max-width:54ch;margin-inline:auto}
.band .btn.primary{background:#fff;color:var(--teal-deep)}
.band .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}

footer{border-top:1px solid var(--hair)}
footer .shell{padding:34px 0 48px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;color:var(--faint);font-size:13px;line-height:1.6}
footer .note{max-width:62ch}
footer a{color:var(--teal-ink);text-decoration:none}

@media(prefers-reduced-motion:no-preference){
  .ring .a{animation:draw 1.1s .3s cubic-bezier(.3,.7,.3,1) forwards}
  @keyframes draw{to{stroke-dashoffset:calc(182 - 182*0.97)}}
}