:root {
  --cream: #fcf5eb;
  --white: #ffffff;
  --mint: #d9fdd3;
  --green: #25d366;
  --teal: #008069;
  --deep: #0a332c;
  --ink: #111b21;
  --soft: #3b4a54;
  --muted: #667781;
  --line: #e6ddd0;
  --r: 28px;
}
* { margin:0; padding:0; box-sizing:border-box; }
::selection { background: var(--green); color: var(--ink); }
html { scroll-behavior:smooth; }
body { background:var(--white); color:var(--ink); font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:600; letter-spacing:-0.03em; line-height:1.08; }
.mono { font-family:'JetBrains Mono',monospace; }
.wrap { max-width:1180px; margin:0 auto; padding:0 5vw; }

/* NAV */
nav { position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.88); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s; }
nav.scrolled { border-color:var(--line); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:700; letter-spacing:-0.02em; }
.brand svg { width:32px; height:32px; }
.nav-l { display:flex; gap:30px; align-items:center; }
.nav-l a { font-size:15px; font-weight:500; color:var(--soft); transition:color .18s; }
.nav-l a:hover { color:var(--teal); }
.nav-r { display:flex; gap:10px; align-items:center; }
.pillbtn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:600; padding:12px 24px; border-radius:999px; transition:all .18s ease; border:1.5px solid transparent; cursor:pointer; }
.pillbtn:active { transform:scale(0.98); }
.pb-green { background:var(--green); color:var(--ink); }
.pb-green:hover { background:#1fc55c; box-shadow:0 6px 20px -6px rgba(37,211,102,0.5); }
.pb-dark { background:var(--ink); color:#fff; }
.pb-dark:hover { background:var(--teal); }
.pb-line { border-color:var(--ink); color:var(--ink); background:transparent; }
.pb-line:hover { background:var(--ink); color:#fff; }
.lang { font-size:13px; font-weight:600; border:1.5px solid var(--line); border-radius:999px; padding:8px 14px; color:var(--soft); }
.lang:hover { border-color:var(--teal); color:var(--teal); }

/* HERO */
.hero { background:var(--cream); border-radius:0 0 48px 48px; padding:70px 0 80px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:5vw; align-items:center; }
.hero h1 { font-size:clamp(38px,5.4vw,64px); font-weight:700; max-width:15ch; }
.hero h1 .hl { color:var(--teal); }
.hero-lede { margin-top:24px; font-size:18px; color:var(--soft); max-width:46ch; }
.hero-cta { margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hero-note { font-size:13.5px; color:var(--muted); margin-top:14px; }
.hero-art { position:relative; }
.hero-art svg { width:100%; height:auto; display:block; filter:drop-shadow(0 30px 50px rgba(10,51,44,0.16)); }
.float { animation:float 5s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* DISCLAIMER */
.disclaimer { padding:22px 0; }
.disclaimer .box { background:var(--white); border:1.5px solid var(--line); border-radius:20px; padding:16px 22px; font-size:14px; color:var(--soft); }
.disclaimer strong { color:var(--ink); }

/* SECTIONS */
section.blk { padding:90px 0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin-bottom:18px; }
.eyebrow::before { content:''; width:22px; height:2.5px; border-radius:2px; background:var(--green); }
.blk h2 { font-size:clamp(30px,4vw,48px); font-weight:700; max-width:22ch; }
.blk .sub { margin-top:18px; font-size:17px; color:var(--soft); max-width:56ch; }

/* FEATURE ROWS */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; padding:56px 0; }
.frow:nth-child(even) .fart { order:-1; }
.frow h3 { font-size:clamp(24px,2.6vw,32px); font-weight:700; }
.frow p { margin-top:14px; font-size:16px; color:var(--soft); max-width:48ch; }
.fart { background:var(--cream); border-radius:36px; padding:34px; }
.fart.mint { background:var(--mint); }
.fart svg { width:100%; height:auto; display:block; }
.flist { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.flist span { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--soft); }
.flist svg { width:20px; height:20px; flex-shrink:0; margin-top:1px; }

/* ANTI-BAN */
.ban { background:var(--deep); border-radius:48px; margin:0 3vw; padding:90px 0; color:var(--cream); }
.ban .eyebrow { color:var(--green); }
.ban h2 { color:#fff; }
.ban .sub { color:#b5cdc7; }
.ban-grid { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; margin-top:20px; }
.ban-list { display:flex; flex-direction:column; gap:0; counter-reset:rec; }
.rec { display:flex; gap:20px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,0.12); }
.rec:last-child { border-bottom:none; }
.rec-n { width:38px; height:38px; flex-shrink:0; border-radius:12px; background:rgba(37,211,102,0.16); color:var(--green); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.rec h4 { font-size:17.5px; font-weight:600; color:#fff; letter-spacing:-0.01em; }
.rec p { margin-top:5px; font-size:14.5px; color:#b5cdc7; line-height:1.55; }
.ban-art svg { width:100%; height:auto; }

/* CODE */
.code-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:5vw; align-items:center; }
.term { background:var(--ink); border-radius:24px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(17,27,33,0.4); }
.term-tabs { display:flex; padding:6px 10px 0; border-bottom:1px solid #2a3942; }
.term-tab { font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:12px 16px; color:#667781; cursor:pointer; border-bottom:2px solid transparent; transition:all .18s; }
.term-tab.on { color:#e9edef; border-color:var(--green); }
.term pre { padding:24px 22px; font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.85; color:#e9edef; overflow-x:auto; }
.term .k{color:#25d366} .term .s{color:#ffd279} .term .c{color:#667781}

/* INTEGRATIONS */
.integ-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
.icard { background:var(--cream); border-radius:24px; padding:26px 24px; transition:transform .2s ease, box-shadow .2s ease; }
.icard:hover { transform:translateY(-5px); box-shadow:0 18px 36px -18px rgba(10,51,44,0.25); }
.icard .ic { width:44px; height:44px; border-radius:14px; background:var(--white); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.icard .ic svg { width:22px; height:22px; stroke:var(--teal); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.icard h3 { font-size:17px; font-weight:700; }
.icard p { margin-top:7px; font-size:13.5px; color:var(--soft); line-height:1.5; }

/* PRICING */
.price-card { background:var(--cream); border-radius:40px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; }
.pnum { font-size:clamp(70px,9vw,120px); font-weight:700; letter-spacing:-0.04em; line-height:0.9; }
.pnum sup { font-size:0.32em; vertical-align:super; color:var(--teal); }
.pper { font-size:17px; color:var(--soft); margin-top:10px; }
.plist { list-style:none; display:flex; flex-direction:column; gap:13px; }
.plist li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--soft); }
.plist svg { width:21px; height:21px; flex-shrink:0; margin-top:1px; }

/* FAQ */
.q { border-bottom:1.5px solid var(--line); padding:26px 0; cursor:pointer; }
.q-h { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.q-h h3 { font-size:19px; font-weight:600; letter-spacing:-0.01em; }
.q-m { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--mint); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:600; transition:transform .28s; }
.q.open .q-m { transform:rotate(45deg); }
.q-b { max-height:0; overflow:hidden; transition:max-height .32s ease, margin-top .32s ease; }
.q.open .q-b { max-height:230px; margin-top:14px; }
.q-b p { font-size:15.5px; color:var(--soft); max-width:66ch; }

/* CTA + FOOTER */
.cta { background:var(--mint); border-radius:48px; margin:0 3vw; padding:80px 5vw; text-align:center; }
.cta h2 { font-size:clamp(32px,4.5vw,54px); font-weight:700; }
.cta p { margin-top:16px; font-size:17px; color:var(--soft); }
.cta .pillbtn { margin-top:30px; }
footer { padding:60px 0 44px; }
.foot { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px; }
.foot-links { display:flex; gap:26px; flex-wrap:wrap; }
.foot-links a { font-size:14px; color:var(--soft); font-weight:500; }
.foot-links a:hover { color:var(--teal); }
.foot-meta { font-size:13px; color:var(--muted); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity:1; transform:none; }

@media (max-width:860px) {
  .hero-grid,.frow,.ban-grid,.code-grid,.price-card { grid-template-columns:1fr; }
  .frow:nth-child(even) .fart { order:0; }
  .integ-cards { grid-template-columns:1fr 1fr; }
  .nav-l { display:none; }
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }
