/* ================= THEMES ================= */
:root,[data-theme="mainstreet"]{
  --fh:"Archivo";--fb:"Inter";--fhw:800;--fhls:-.025em;
  --bg:#faf8f4;--bg2:#f2eee6;--panel:#ffffff;--panel2:#ffffff;--ink:#1c1a17;--mute:#5d574e;--dim:#8b8478;
  --line:rgba(28,26,23,.12);--line2:rgba(28,26,23,.08);--hover:rgba(28,26,23,.05);--hdr:rgba(250,248,244,.9);
  --acc:#e2571a;--acc2:#1c1a17;--acc-soft:rgba(226,87,26,.1);
  --btn:#e2571a;--btn-ink:#fff;--btn-sh:0 8px 20px -8px rgba(226,87,26,.55);--btn-ink-on-acc:#fff;
  --glow1:none;--glow2:none;--card-sh:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.12);--hot-sh:0 24px 60px -24px rgba(226,87,26,.35);
  --cta-bg:#fff;--input:#faf8f4;
  --d-bg:#1f1d1a;--d-tile:#2a2723;--d-ink:#f6f2ea;--d-mute:#bdb5a8;--d-dim:#8f877b;--d-line:rgba(255,255,255,.08);--d-border:#2f2c27;--d-sh:0 30px 70px -30px rgba(0,0,0,.45);
  --d-acc:#f07a3a;--d-acc-ink:#fff;--d-up:#4ade80;--d-live:#4ade80;--bar:#f07a3a;
  --map-bg:#26231f;--map-st:#3a3530;--map-road:#4a443c;--map-water:#2c3a44;--map-park:#2e3a2a;
  --c1:#f07a3a;--c2:#f7b267;
}
[data-theme="blueprint"]{
  --fh:"Manrope";--fb:"Manrope";--fhw:800;--fhls:-.03em;
  --bg:#ffffff;--bg2:#f3f6fb;--panel:#ffffff;--panel2:#ffffff;--ink:#0f1b2d;--mute:#4a5870;--dim:#8592a6;
  --line:rgba(15,27,45,.12);--line2:rgba(15,27,45,.07);--hover:#eef3fb;--hdr:rgba(255,255,255,.92);
  --acc:#2357e6;--acc-soft:rgba(35,87,230,.09);
  --btn:#2357e6;--btn-ink:#fff;--btn-sh:0 8px 22px -8px rgba(35,87,230,.55);
  --glow1:radial-gradient(closest-side,rgba(35,87,230,.08),transparent 70%);--glow2:none;--card-sh:0 1px 2px rgba(15,27,45,.04),0 10px 30px -14px rgba(15,27,45,.16);--hot-sh:0 24px 60px -24px rgba(35,87,230,.35);
  --cta-bg:#f3f6fb;--input:#fff;
  --d-bg:#ffffff;--d-tile:#f5f7fb;--d-ink:#0f1b2d;--d-mute:#4a5870;--d-dim:#8592a6;--d-line:rgba(15,27,45,.08);--d-border:rgba(15,27,45,.12);--d-sh:0 30px 70px -30px rgba(15,27,45,.3);
  --d-acc:#2357e6;--d-acc-ink:#fff;--d-up:#16a34a;--d-live:#16a34a;--bar:#2357e6;
  --map-bg:#eaf0f7;--map-st:#ffffff;--map-road:#fde7a8;--map-water:#bfd7f2;--map-park:#cfe8cf;
  --c1:#2357e6;--c2:#0ea5e9;
}
[data-theme="workshop"]{
  --fh:"DM Serif Display";--fb:"Work Sans";--fhw:400;--fhls:-.01em;
  --bg:#f4efe5;--bg2:#ebe3d3;--panel:#fffcf6;--panel2:#fffcf6;--ink:#1f2a22;--mute:#555d4f;--dim:#868a7c;
  --line:rgba(31,42,34,.14);--line2:rgba(31,42,34,.09);--hover:rgba(31,42,34,.06);--hdr:rgba(244,239,229,.92);
  --acc:#2d6a40;--acc-soft:rgba(45,106,64,.1);
  --btn:#2d6a40;--btn-ink:#fff;--btn-sh:0 8px 20px -10px rgba(45,106,64,.6);
  --glow1:none;--glow2:none;--card-sh:0 10px 28px -18px rgba(31,42,34,.25);--hot-sh:0 24px 60px -26px rgba(45,106,64,.4);
  --cta-bg:#fffcf6;--input:#f8f4ec;
  --d-bg:#18251c;--d-tile:#213126;--d-ink:#f3efe4;--d-mute:#b7bfae;--d-dim:#8a947f;--d-line:rgba(255,255,255,.08);--d-border:#24372a;--d-sh:0 30px 70px -30px rgba(24,37,28,.55);
  --d-acc:#e0a43a;--d-acc-ink:#1b1b12;--d-up:#86efac;--d-live:#86efac;--bar:#e0a43a;
  --map-bg:#1c2b20;--map-st:#2d4233;--map-road:#3d5544;--map-water:#22384a;--map-park:#28452e;
  --c1:#e0a43a;--c2:#f2cf7a;
}
[data-theme="bold"]{
  --fh:"Bricolage Grotesque";--fb:"Inter";--fhw:800;--fhls:-.035em;
  --bg:#ffffff;--bg2:#f4f3ef;--panel:#ffffff;--panel2:#ffffff;--ink:#0b0b0b;--mute:#3f3f3f;--dim:#7a7a7a;
  --line:#0b0b0b;--line2:rgba(0,0,0,.1);--hover:#ffe14d;--hdr:rgba(255,255,255,.95);
  --acc:#0b0b0b;--acc-soft:#ffe14d;
  --btn:#ffd400;--btn-ink:#0b0b0b;--btn-sh:4px 4px 0 #0b0b0b;--btn-ink-on-acc:#ffd400;
  --glow1:none;--glow2:none;--card-sh:5px 5px 0 #0b0b0b;--hot-sh:8px 8px 0 #0b0b0b;
  --cta-bg:#ffd400;--input:#fff;
  --d-bg:#111111;--d-tile:#1c1c1c;--d-ink:#ffffff;--d-mute:#c4c4c4;--d-dim:#8c8c8c;--d-line:rgba(255,255,255,.09);--d-border:#0b0b0b;--d-sh:8px 8px 0 #0b0b0b;
  --d-acc:#ffd400;--d-acc-ink:#0b0b0b;--d-up:#4ade80;--d-live:#ffd400;--bar:#ffd400;
  --map-bg:#1a1a1a;--map-st:#2c2c2c;--map-road:#3b3b3b;--map-water:#24303a;--map-park:#26331f;
  --c1:#ffd400;--c2:#ffe98a;
}
[data-theme="coastal"]{
  --fh:"Plus Jakarta Sans";--fb:"Plus Jakarta Sans";--fhw:800;--fhls:-.03em;
  --bg:#f6faf9;--bg2:#e8f3f1;--panel:#ffffff;--panel2:#ffffff;--ink:#0f2d2b;--mute:#4b6663;--dim:#86a19d;
  --line:rgba(15,45,43,.12);--line2:rgba(15,45,43,.07);--hover:#e3f1ee;--hdr:rgba(246,250,249,.92);
  --acc:#0f766e;--acc-soft:rgba(15,118,110,.1);
  --btn:#ff6b57;--btn-ink:#fff;--btn-sh:0 8px 22px -8px rgba(255,107,87,.6);
  --glow1:radial-gradient(closest-side,rgba(15,118,110,.09),transparent 70%);--glow2:radial-gradient(closest-side,rgba(255,107,87,.07),transparent 70%);--card-sh:0 1px 2px rgba(15,45,43,.04),0 12px 30px -16px rgba(15,45,43,.2);--hot-sh:0 24px 60px -24px rgba(15,118,110,.35);
  --cta-bg:#fff;--input:#f6faf9;
  --d-bg:#ffffff;--d-tile:#f2f8f7;--d-ink:#0f2d2b;--d-mute:#4b6663;--d-dim:#86a19d;--d-line:rgba(15,45,43,.08);--d-border:rgba(15,45,43,.12);--d-sh:0 30px 70px -30px rgba(15,45,43,.3);
  --d-acc:#0f766e;--d-acc-ink:#fff;--d-up:#059669;--d-live:#059669;--bar:#14b8a6;
  --map-bg:#e9f1ef;--map-st:#ffffff;--map-road:#fde4b0;--map-water:#bde3ea;--map-park:#cdeac9;
  --c1:#0f766e;--c2:#ff6b57;
}
body{background:var(--bg);color:var(--ink)}
.alt{background:var(--bg2)}
.grad{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--acc)}
[data-theme="bold"] .grad{color:var(--ink);background:linear-gradient(transparent 58%,#ffd400 58%,#ffd400 92%,transparent 92%)}
[data-theme="bold"] .card,[data-theme="bold"] .plan,[data-theme="bold"] .step,[data-theme="bold"] .cta-box{border:2px solid #0b0b0b}
[data-theme="bold"] .btn{border:2px solid #0b0b0b}
[data-theme="bold"] .btn-g{box-shadow:4px 4px 0 #0b0b0b}
[data-theme="bold"] .eyebrow:before{background:#ffd400;height:6px}
[data-theme="bold"] .card .more{text-decoration:underline;text-decoration-color:#ffd400;text-decoration-thickness:4px}
[data-theme="bold"] .cta-box .muted,[data-theme="bold"] .cta-box .next span{color:#1a1a1a}
[data-theme="bold"] .cta-box .eyebrow{color:#0b0b0b}
[data-theme="workshop"] h1,[data-theme="workshop"] h2{letter-spacing:-.01em;line-height:1.05}
[data-theme="workshop"] .grad{font-style:italic}
.ftr{background:var(--bg2)}
.ftr .base{border-top-color:var(--line)}
.hdr{border-bottom-color:var(--line2)}

/* brand mark */
.mark{width:36px;height:36px;border-radius:10px;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center;font:800 19px/1 var(--fh);box-shadow:var(--btn-sh)}
[data-theme="bold"] .mark{border:2px solid #0b0b0b;box-shadow:3px 3px 0 #0b0b0b}

/* ===== website before/after mock ===== */
.mock-wrap{position:relative;padding:30px 0 40px 40px}
.browser{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.12);box-shadow:0 30px 70px -28px rgba(0,0,0,.35);font-family:Inter,sans-serif;color:#18202a}
.browser .bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#f1f1f1;border-bottom:1px solid #e2e2e2}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#d0d0d0}
.browser .url{margin-left:10px;flex:1;background:#fff;border-radius:6px;font-size:11px;color:#666;padding:4px 10px;border:1px solid #e4e4e4}
.old{position:absolute;left:0;top:0;width:68%;transform:rotate(-5deg);filter:saturate(.6);opacity:.95;z-index:1}
.old .pg-old{padding:12px;font-family:"Times New Roman",serif;background:#f3f0e0;min-height:230px}
.old .pg-old h5{font:700 18px "Times New Roman";color:#1d3d99;text-align:center;text-decoration:underline}
.old .pg-old marquee,.old .pg-old .mq{font-size:11px;color:#c00;text-align:center;display:block;margin:4px 0}
.old .pg-old .row{display:flex;gap:8px;margin-top:8px}
.old .pg-old .row div{flex:1;background:#c9c3a6;height:54px;border:2px ridge #999}
.old .pg-old p{font-size:10.5px;line-height:1.4;color:#333;margin-top:8px}
.old .pg-old a{color:#00e;text-decoration:underline;font-size:10px}
.new{position:relative;z-index:2;margin-left:12%}
.nw-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee}
.nw-nav b{font:800 13px Inter;letter-spacing:.04em}
.nw-nav span{background:var(--btn);color:var(--btn-ink);font:700 10.5px Inter;padding:7px 10px;border-radius:7px}
.nw-hero{padding:26px 18px 22px;background:linear-gradient(120deg,rgba(15,20,28,.86),rgba(15,20,28,.55)),repeating-linear-gradient(135deg,#5a4a3c 0 14px,#4c3f33 14px 28px);color:#fff}
.nw-hero small{font:700 9.5px Inter;letter-spacing:.14em;color:#ffd58a}
.nw-hero h6{font:800 22px/1.1 Inter;margin:6px 0 8px;letter-spacing:-.02em}
.nw-hero p{font-size:11px;opacity:.85;max-width:260px}
.nw-hero .b{display:flex;gap:8px;margin-top:12px}
.nw-hero .b span{font:700 10.5px Inter;padding:8px 11px;border-radius:7px;background:var(--btn);color:var(--btn-ink)}
.nw-hero .b span+span{background:rgba(255,255,255,.14);color:#fff}
.nw-stars{font-size:10.5px;margin-top:10px;color:#ffd58a}
.nw-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 16px}
.nw-svc div{border:1px solid #eee;border-radius:8px;padding:9px;font:600 10.5px Inter}
.nw-svc div:before{content:"";display:block;width:18px;height:18px;border-radius:5px;background:var(--acc-soft);margin-bottom:6px;border:1px solid var(--acc)}
.tagx{position:absolute;z-index:3;font:800 11px var(--fb);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:7px}
.tag-old{left:4%;top:4px;background:#e5e5e5;color:#555;transform:rotate(-5deg)}
.tag-new{right:4%;top:14px;background:var(--btn);color:var(--btn-ink)}
.float{position:absolute;z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;box-shadow:var(--card-sh);font-size:12.5px}
.float b{display:block;font:800 20px var(--fh);color:var(--ink)}
.float span{color:var(--mute)}
.f1{left:0;bottom:6px}.f2{right:-10px;bottom:-14px}
[data-theme="bold"] .float{border:2px solid #0b0b0b}

/* signs checklist */
.signs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sign{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--card-sh)}
.sign i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fee2e2;color:#b91c1c;font:800 15px var(--fb);font-style:normal}
.sign b{display:block;font-size:16.5px;margin-bottom:3px}
.sign span{color:var(--mute);font-size:14.5px}
[data-theme="bold"] .sign{border:2px solid #0b0b0b}

/* theme switcher (preview only) */
.tswitch{position:sticky;top:0;z-index:60;background:#111;color:#fff;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 12px;font:600 13px Inter}
.tswitch button{background:#2a2a2a;color:#fff;border:1px solid #3a3a3a;border-radius:999px;padding:7px 13px;font:600 12.5px Inter;cursor:pointer}
.tswitch button.on{background:#fff;color:#111}
.tswitch .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.has-switch .hdr{top:46px}
@media (max-width:1020px){.signs{grid-template-columns:1fr 1fr}.mock-wrap{padding-left:10px}}
@media (max-width:620px){.signs{grid-template-columns:1fr}.f2{display:none}.has-switch .hdr{top:84px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--fb),system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.disp{font-family:var(--fh),sans-serif;font-weight:var(--fhw,700);letter-spacing:var(--fhls,-.02em);line-height:1.08}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 12.5px/1 var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--acc)}
.muted{color:var(--mute)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:11px;font:800 20px/1 var(--fh);letter-spacing:-.01em}
.brand small{font:inherit;color:var(--acc)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:9px 13px;border-radius:10px;font-size:15px;color:var(--mute);font-weight:500;transition:.2s}
.nav a:hover,.nav a.on{color:var(--ink);background:var(--hover)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px 11px;font-size:18px;cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 24px;border-radius:12px;font:700 16px/1 var(--fb);cursor:pointer;border:0;transition:transform .15s,box-shadow .2s}
.btn-p{background:var(--btn);color:var(--btn-ink);box-shadow:var(--btn-sh)}
.btn-p:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-g{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.btn-g:hover{border-color:var(--ink)}
.btn-sm{padding:11px 17px;font-size:14.5px}

/* sections */
section{padding:96px 0;position:relative}
.sec-h{max-width:760px;margin-bottom:52px}
.sec-h h2{font-size:clamp(32px,4.2vw,50px);margin:16px 0 16px}
.sec-h p{font-size:19px;color:var(--mute)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.alt{background:var(--bg2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}

/* hero */
.hero{padding:84px 0 90px;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-20% -10% auto auto;width:900px;height:900px;background:var(--glow1);pointer-events:none}
.hero:after{content:"";position:absolute;left:-200px;top:120px;width:700px;height:700px;background:var(--glow2);pointer-events:none}
.hero-g{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:clamp(38px,5vw,64px);margin:20px 0 22px}
.hero .lead{font-size:20px;color:var(--mute);max-width:560px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 26px}
.checks{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px;color:var(--mute)}
.checks span:before{content:"✓";color:var(--acc);font-weight:700;margin-right:8px}
.sub-hero{padding:76px 0 70px}
.sub-hero .hero-g{grid-template-columns:1.05fr .95fr}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--panel);box-shadow:var(--card-sh);border:1px solid var(--line);border-radius:var(--r);padding:30px;position:relative;transition:.25s}
.card:hover{border-color:var(--acc);transform:translateY(-3px)}
.card h3{font-size:23px;margin:18px 0 10px}
.card p{color:var(--mute);font-size:16px}
.ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--acc-soft);border:1px solid var(--line)}
.ico svg{width:25px;height:25px;stroke:var(--acc);fill:none;stroke-width:1.8}
.card .more{display:inline-flex;margin-top:20px;font-weight:700;font-size:15px;color:var(--acc)}
.card .more:after{content:"→";margin-left:8px;transition:.2s}
.card:hover .more:after{margin-left:13px}
.list{list-style:none;display:grid;gap:11px;margin-top:16px}
.list li{padding-left:30px;position:relative;color:var(--mute);font-size:16px}
.list li:before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:6px;background:var(--acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='7'/%3E%3C/svg%3E") center/100%;}
.list li:after{content:"";position:absolute;left:4px;top:8px;width:10px;height:6px;border-left:2.5px solid var(--btn-ink-on-acc,#fff);border-bottom:2.5px solid var(--btn-ink-on-acc,#fff);transform:rotate(-45deg)}
.list li b{color:var(--ink);font-weight:600}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split h2{font-size:clamp(30px,3.8vw,46px);margin:16px 0 18px}
.split p{color:var(--mute);font-size:18px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{padding:28px 24px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);counter-increment:s}
.step:before{content:"0" counter(s);font:800 15px/1 var(--fh);display:inline-block;padding:7px 10px;border-radius:9px;background:var(--acc-soft);color:var(--acc);margin-bottom:18px}
.step h4{font-size:19px;margin-bottom:8px}
.step p{font-size:15px;color:var(--mute)}

/* industries */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:15px;color:var(--mute)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column}
.plan.hot{background:var(--panel);border:2px solid var(--acc);box-shadow:var(--hot-sh);position:relative}
.plan.hot .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);font:700 11.5px/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:999px;white-space:nowrap}
.plan h3{font-size:22px}
.plan .desc{color:var(--mute);font-size:15px;margin:8px 0 22px;min-height:46px}
.price{font:var(--fhw,700) 50px/1 var(--fh);letter-spacing:-.03em}
.price small{font:500 16px var(--fb);color:var(--mute);letter-spacing:0}
.save{font-size:14px;color:var(--acc);font-weight:600;margin-top:8px;min-height:20px}
.plan .list{margin:24px 0 30px;flex:1}
.plan .btn{justify-content:center}
.note{font-size:14px;color:var(--dim);margin-top:26px;text-align:center}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line2);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;font:700 19px/1.35 var(--fb);display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--acc);font-size:26px;line-height:.9;transition:.2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq p{color:var(--mute);margin-top:12px;font-size:16.5px}

/* cta + form */
.cta-box{border-radius:28px;padding:56px;background:var(--cta-bg);box-shadow:var(--card-sh);border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.cta-box h2{font-size:clamp(30px,3.6vw,44px);margin:14px 0 16px}
.form{display:grid;gap:13px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form label{font-size:13px;color:var(--mute);font-weight:500;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;background:var(--input);border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:var(--ink);font:400 16px var(--fb);outline:none;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.form select option{background:var(--panel)}
.form textarea{min-height:96px;resize:vertical}
.form .btn{justify-content:center;width:100%;margin-top:4px}
.fine{font-size:13px;color:var(--dim);text-align:center}
.next{display:grid;gap:16px;margin-top:28px}
.next div{display:flex;gap:14px;align-items:flex-start}
.next b{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc);font:800 14px var(--fh)}
.next span{color:var(--mute);font-size:16px}
.next strong{color:var(--ink);display:block}

/* footer */
.ftr{border-top:1px solid var(--line2);padding:56px 0 34px;margin-top:30px;color:var(--mute);font-size:15px}
.ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ftr h5{font:700 13px var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.ftr a{display:block;margin-bottom:9px}
.ftr a:hover{color:var(--ink)}
.ftr .base{display:flex;justify-content:space-between;margin-top:44px;padding-top:24px;border-top:1px solid var(--line2);font-size:13.5px;color:var(--dim)}

/* ===== DASHBOARD MOCK ===== */
.dash{--ink:var(--d-ink);--mute:var(--d-mute);--dim:var(--d-dim);--line2:var(--d-line);color:var(--d-ink);background:var(--d-bg);border:1px solid var(--d-border);border-radius:20px;box-shadow:var(--d-sh);overflow:hidden;font-size:13px;font-family:var(--fb)}
.dash-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line2);background:var(--d-tile)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--d-line)}
.live{display:inline-flex;align-items:center;gap:7px;font:600 11px Inter;letter-spacing:.12em;color:var(--d-live);margin-left:auto;padding:5px 10px;border-radius:999px;background:transparent;border:1px solid var(--d-live)}
.live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--d-live);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.dash-title{font:600 13.5px Inter;color:var(--ink)}
.dash-body{padding:16px;display:grid;gap:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--d-tile);border:1px solid var(--line2);border-radius:12px;padding:11px 12px}
.kpi .l{color:var(--d-dim);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-weight:600}
.kpi .v{font:800 22px/1.2 var(--fb);margin-top:5px}
.kpi .d{font-size:11.5px;font-weight:600;margin-top:2px}
.up{color:var(--d-up)}.dn{color:var(--bad)}
.panel{background:var(--d-tile);border:1px solid var(--line2);border-radius:12px;padding:12px 13px}
.panel-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-weight:600;font-size:12.5px}
.panel-h span{color:var(--dim);font-weight:500;font-size:11.5px}
.dash-row{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.feed{display:grid;gap:7px;max-height:162px;overflow:hidden}
.feed div{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;padding:7px 8px;border-radius:9px;background:var(--d-bg);font-size:12px;color:var(--mute);animation:slide .5s ease}
.feed div b{color:var(--ink);font-weight:600}
.feed .t{font:700 10.5px var(--fb);color:var(--d-acc);white-space:nowrap;padding-top:1px}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* heatmap */
.hm{position:relative;border-radius:12px;overflow:hidden;background:var(--map-bg);aspect-ratio:1/1}
.hm svg.map{position:absolute;inset:0;width:100%;height:100%}
.hm .pts{position:absolute;inset:6%;display:grid;gap:0}
.hm .pt{display:grid;place-items:center}
.hm .pt i{width:78%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font:800 clamp(7px,.85vw,12px)/1 var(--fb);letter-spacing:-.04em;color:#0b0b14;font-style:normal;box-shadow:0 2px 8px rgba(0,0,0,.45);transition:background .6s}
.hm .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:22px;height:22px;z-index:2}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--mute);margin-top:9px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:50%}
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:6px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.bars b{width:100%;border-radius:6px 6px 3px 3px;background:var(--bar);opacity:.55;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.bars div:last-child b{background:var(--bar);opacity:1}
.bars span{font-size:10.5px;color:var(--dim)}

/* big demo dashboard page */
.demo{font-size:14px}
.demo .kpis{grid-template-columns:repeat(5,1fr)}
.demo .kpi .v{font-size:28px}
.demo-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
.tabs{display:inline-flex;background:var(--d-bg);border:1px solid var(--line2);border-radius:10px;padding:3px}
.tabs button{background:none;border:0;color:var(--mute);font:600 12.5px var(--fb);padding:7px 12px;border-radius:8px;cursor:pointer}
.tabs button.on{background:var(--d-acc);color:var(--d-acc-ink)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding:7px 6px;border-bottom:1px solid var(--line2);font-weight:600}
.tbl td{padding:9px 6px;border-bottom:1px solid var(--line2);color:var(--mute)}
.tbl td:first-child{color:var(--ink)}
.rk{display:inline-block;min-width:28px;text-align:center;padding:3px 7px;border-radius:7px;font:800 12px var(--fb);color:#0b0b14}
.demo-tag{display:inline-block;font:700 11px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:#a16207;background:#fef9c3;border:1px solid #fde68a;padding:5px 10px;border-radius:999px}
svg.line{width:100%;height:170px}

/* before/after heatmaps */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ba .cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-weight:600}
.ba .cap span{font:800 26px var(--fh)}

/* feature row */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.feat div h4{font-size:19px;margin:14px 0 8px}
.feat div p{color:var(--mute);font-size:15.5px}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.stat-strip div{background:var(--bg2);padding:28px 24px}
.stat-strip b{display:block;font:var(--fhw,700) 34px/1 var(--fh);margin-bottom:8px}
.stat-strip span{color:var(--mute);font-size:15px}

.legal{max-width:820px}
.legal h1{font-size:44px;margin:16px 0 10px}
.legal h2{font-size:24px;margin:34px 0 10px}
.legal p,.legal li{color:var(--mute);margin-bottom:10px}
.legal ul{padding-left:22px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1020px){
  .hero-g,.sub-hero .hero-g,.split,.cta-box,.demo-grid{grid-template-columns:1fr}
  .grid3,.plans,.feat{grid-template-columns:1fr}
  .grid4,.steps,.stat-strip{grid-template-columns:1fr 1fr}
  .demo .kpis{grid-template-columns:repeat(3,1fr)}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:#0b0a17;border-bottom:1px solid var(--line);padding:12px 20px}
  .nav.open{display:flex}
  .burger{display:block}
  .hdr .btn{display:none}
}
@media (max-width:620px){
  body{font-size:16px}
  section{padding:70px 0}
  .wrap{padding:0 20px}
  .grid2,.grid4,.steps,.stat-strip,.ba,.form .row{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .demo .kpis{grid-template-columns:1fr 1fr}
  .dash-row{grid-template-columns:1fr}
  .cta-box{padding:32px 22px}
  .ftr .base{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}