:root{--paper:#f5f1e8;--ink:#102a27;--muted:#60706a;--teal:#287d74;--lime:#b7f34a;--line:#d9dfd8;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,76px);border-bottom:1px solid rgba(16,42,39,.12);position:sticky;top:0;background:rgba(245,241,232,.94);backdrop-filter:blur(14px);z-index:10}
.brand{display:flex;align-items:center;gap:11px;font-family:Manrope,sans-serif;font-weight:800}
.brand em{font-style:normal;color:var(--teal)}
.brand-mark{display:block;width:38px;height:38px;border-radius:10px;object-fit:cover}
nav{display:flex;gap:28px;font-size:14px;font-weight:600}
nav a:hover{color:var(--teal)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 19px;border-radius:13px;font-weight:700}
.button-dark{background:var(--ink);color:white}
.button-lime{background:var(--lime);color:var(--ink)}
.hero{padding:clamp(80px,11vw,150px) clamp(24px,8vw,130px) 72px;min-height:680px;background:radial-gradient(circle at 85% 30%,rgba(183,243,74,.24),transparent 25%),linear-gradient(135deg,var(--ink),#173b36);color:white}
.eyebrow{font:800 12px Manrope,sans-serif;letter-spacing:.19em;color:var(--lime)}
.eyebrow.teal{color:var(--teal)}
.hero h1{font:800 clamp(48px,8vw,94px)/.98 Manrope,sans-serif;max-width:880px;letter-spacing:-.055em;margin:25px 0}
.hero>p{font-size:clamp(18px,2vw,23px);line-height:1.55;color:rgba(255,255,255,.72);max-width:760px}
.hero-actions{display:flex;align-items:center;gap:27px;margin-top:36px}
.text-link{font-weight:700}
.text-link span{color:var(--lime)}
.trust-row{display:flex;flex-wrap:wrap;gap:16px 32px;border-top:1px solid rgba(255,255,255,.16);margin-top:72px;padding-top:24px;color:rgba(255,255,255,.66);font-size:14px}
.section{padding:100px clamp(24px,8vw,130px)}
.section h2{font:800 clamp(34px,5vw,58px)/1.08 Manrope,sans-serif;letter-spacing:-.04em;margin:16px 0}
.section p{color:var(--muted);line-height:1.7}
.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:9vw}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:22px;padding:27px 0;border-bottom:1px solid var(--line)}
.steps span{color:var(--teal);font:800 13px Manrope}
.steps h3{margin:0;font:700 21px Manrope}
.steps p{margin:6px 0 0}
.api-section{background:var(--ink);color:white}
.section-heading{display:grid;grid-template-columns:1fr .7fr;gap:8vw;align-items:end}
.api-section .section-heading p,.api-section article p{color:rgba(255,255,255,.62)}
.endpoint-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:45px}
.endpoint-grid article{padding:27px;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(255,255,255,.035)}
.method{font:800 11px Manrope;color:var(--lime);margin-right:12px}
.endpoint-grid code{font-size:15px}
.endpoint-grid b{font:700 12px Manrope;color:var(--lime)}
.code-card{margin-top:18px;border-radius:20px;overflow:hidden;background:#081a18}
.code-top{padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:12px}
.code-top button{background:none;border:0;color:var(--lime);font-weight:700;cursor:pointer}
pre{padding:22px;margin:0;overflow:auto;color:#d5e9df;line-height:1.7}
.webhook-section{border-top:1px solid var(--line)}
.webhook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:42px}
.webhook-grid article{padding:27px;border:1px solid var(--line);border-radius:20px;background:white}
.webhook-grid h3,.signature-tester h3{font:700 21px Manrope;margin:0 0 15px}
.webhook-grid dl{margin:0}.webhook-grid dl div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--line)}
.webhook-grid dt{font:700 13px monospace;color:var(--teal)}.webhook-grid dd{margin:0;color:var(--muted);font-size:13px}
.event-list{display:flex;flex-wrap:wrap;gap:8px}.event-list code{padding:7px 9px;border-radius:8px;background:#edf4ee;color:var(--ink);font-size:12px}
.signature-tester{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding:28px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.55)}
.signature-tester>div:first-child{grid-column:1/-1}.signature-tester label{display:grid;gap:7px;font-size:13px;font-weight:700}.signature-tester input,.signature-tester textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:white;padding:12px;color:var(--ink);font:500 13px "DM Sans",sans-serif}.signature-tester textarea{font-family:monospace;line-height:1.5;resize:vertical}.signature-tester .wide{grid-column:1/-1}.tester-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.tester-actions output{font-weight:700}.tester-actions output.valid{color:#087f67}.tester-actions output.invalid{color:#a33a2b}.teal-link{color:var(--teal);margin-left:auto}
.security{display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw;align-items:center}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.security-grid article{padding:27px;border-radius:20px;background:white;border:1px solid var(--line)}
.security-grid strong{font:800 35px Manrope;display:block;color:var(--teal)}
.security-grid span{display:block;margin-top:7px;color:var(--muted);font-size:14px}
.roadmap{border-top:1px solid var(--line)}
.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:43px}
.roadmap-grid article{padding:25px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.42)}
.roadmap-grid article.active{background:var(--lime);border-color:var(--lime)}
.roadmap-grid span{font:800 11px Manrope;letter-spacing:.12em;color:var(--teal)}
.roadmap-grid.active span{color:var(--ink)}
.roadmap-grid h3{font:700 19px Manrope;margin:14px 0 7px}
.roadmap-grid p{font-size:14px;margin:0}
footer{padding:34px clamp(24px,5vw,76px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:13px;color:var(--muted)}
footer>div:last-child{display:flex;gap:20px}
@media(max-width:900px){nav{display:none}
.intro,.section-heading,.security{grid-template-columns:1fr}
.endpoint-grid,.roadmap-grid{grid-template-columns:1fr 1fr}
.webhook-grid{grid-template-columns:1fr}
.site-header .button{display:none}
}
@media(max-width:600px){.site-header{height:68px}
.hero{min-height:610px}
.hero-actions{align-items:stretch;flex-direction:column}
.trust-row{margin-top:50px}
.section{padding-top:72px;padding-bottom:72px}
.endpoint-grid,.security-grid,.roadmap-grid{grid-template-columns:1fr}
.signature-tester{grid-template-columns:1fr}.signature-tester .wide,.signature-tester>div:first-child{grid-column:auto}.teal-link{margin-left:0;width:100%}
footer{align-items:flex-start;flex-direction:column}
}