/* STRMLinks V10 — EXACT PREVIEW DESIGN */
/* Matches strmlinks_v10_preview.html exactly */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%;overflow-x:hidden;scroll-behavior:smooth}
button,input,textarea,select{font-family:inherit;border:none;outline:none}
button{cursor:pointer}a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ══ EXACT PREVIEW TOKENS ══ */
:root{
  --bg:#080810;--s1:#0e0e1a;--s2:#14141f;--s3:#1e1e2d;--s4:#2a2a3d;
  --t0:#f0f0ff;--t1:#9898b8;--t2:#5a5a7a;
  --p0:#7c5cfc;--p1:#6941ea;--p2:#a78bfa;--p3:#c4b5fd;
  --g0:#00d68f;--g1:#00b377;--cl:#22d3ee;
  --border:rgba(255,255,255,0.07);
  --bord:rgba(255,255,255,0.07);
  --bord-h:rgba(124,92,252,0.45);
  --glow:rgba(124,92,252,0.22);
  --glow-c:rgba(34,211,238,0.12);
  --card-border:rgba(255,255,255,0.07);
  --ink:var(--t0);--muted:var(--t2);--line:var(--bord);
  --s5:#0a0a14;
}

body{background:var(--bg);color:var(--t0);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6}

/* ══ LAYOUT ══ */
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* ══ GRADIENT TEXT — EXACT PREVIEW ══ */
.grad{background:linear-gradient(135deg,#a78bfa 0%,#7c5cfc 35%,#22d3ee 75%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grad-g{background:linear-gradient(135deg,#00d68f,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* legacy color spans */
.v{color:var(--p2)}
.tc{color:var(--cl)}

/* ══ NAVBAR — EXACT PREVIEW ══ */
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,48px);position:fixed;top:0;left:0;right:0;z-index:400;background:rgba(8,8,16,.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}

.logo{display:flex;align-items:center;gap:10px}
.logi{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#7c5cfc,#4f28c8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 20px rgba(124,92,252,.5)}
.logi svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ltx{font-size:15px;font-weight:700;color:var(--t0);letter-spacing:-.3px}
.nmid{display:flex;gap:2px}
.nl{padding:7px 13px;border-radius:8px;font-size:13px;color:var(--t1);font-weight:500;transition:all .15s}
.nl:hover{background:var(--s3);color:var(--t0)}
.navr{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}

.nbo{padding:8px 16px;border-radius:8px;font-size:13px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:500;transition:all .15s;background:transparent}
.nbo:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}
.nbf{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:700;background:var(--p0);color:#fff;transition:all .2s;box-shadow:0 0 20px var(--glow)}
.nbf:hover{background:var(--p1);transform:translateY(-1px);box-shadow:0 4px 24px var(--glow)}

@media(max-width:960px){.nmid{display:none}}

/* ══ HAMBURGER BUTTON ══ */
.ham-btn{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:8px;cursor:pointer;padding:0;flex-shrink:0}
.ham-btn span{display:block;width:18px;height:2px;background:var(--t0);border-radius:2px;transition:all .25s}
.ham-btn.ham-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham-btn.ham-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham-btn.ham-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){.ham-btn{display:flex}}

/* ══ MOBILE MENU DROPDOWN ══ */
.mob-menu{display:none;position:fixed;top:60px;left:0;right:0;background:var(--s1);border-bottom:1px solid var(--bord);z-index:399;flex-direction:column;padding:8px 0;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.mob-menu.mob-open{display:flex}
.mob-link{padding:13px clamp(16px,4vw,48px);font-size:14px;font-weight:500;color:var(--t1);border-bottom:1px solid rgba(255,255,255,.05);transition:background .15s,color .15s}
.mob-link:last-child{border-bottom:none}
.mob-link:hover{background:var(--s3);color:var(--t0)}

/* ══ HERO — EXACT PREVIEW ══ */
.hero{position:relative;overflow:hidden;background:var(--bg);padding:160px 20px 88px;text-align:center}
.hero-glow-1{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(124,92,252,.14),transparent 65%);pointer-events:none;z-index:0}
.hero-glow-2{position:absolute;bottom:-80px;right:5%;width:400px;height:400px;background:radial-gradient(circle,rgba(34,211,238,.08),transparent 65%);pointer-events:none;z-index:0}
/* canvas sits on top of glow divs, behind content */
#anim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-in{position:relative;z-index:2;max-width:760px;margin:0 auto}

/* Badges */
.bdgs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.bdg{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:600}
.bdg.g{border:1px solid rgba(0,214,143,.25);background:rgba(0,214,143,.07);color:var(--g0)}
.bdg.p{border:1px solid rgba(124,92,252,.3);background:rgba(124,92,252,.09);color:var(--p2)}

.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot.g{background:var(--g0);animation:pulse 2s infinite}
.dot.p{background:var(--p0)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}

/* Headline — EXACT PREVIEW */
h1.ht{font-size:clamp(42px,8vw,70px);font-weight:800;letter-spacing:-3px;line-height:1.02;margin-bottom:22px}
.hsub{font-size:18px;color:var(--t1);max-width:560px;margin:0 auto 40px;line-height:1.8}

/* Hero buttons — EXACT PREVIEW structure */
.hbtns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hbtn-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
/* role-label = preview's .role-label */
.hbtn-role{display:inline-flex;align-items:center;gap:5px;padding:5px 16px;border-radius:999px;font-size:12px;font-weight:600}
.hbtn-role::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;animation:pulse 2s infinite}
.hbtn-role.pub{background:rgba(124,92,252,.12);color:var(--p2);border:1px solid rgba(124,92,252,.25)}
.hbtn-role.adv{background:rgba(34,211,238,.1);color:var(--cl);border:1px solid rgba(34,211,238,.2)}

/* hb1 = preview's .btn-primary */
.hb1{padding:14px 32px;border-radius:10px;background:var(--p0);color:#fff !important;font-size:15px;font-weight:700;box-shadow:0 0 28px var(--glow);display:inline-flex;align-items:center;gap:8px;transition:all .2s}
.hb1:hover{background:var(--p1);transform:translateY(-2px);box-shadow:0 8px 36px var(--glow)}
/* hb2 = preview's .btn-secondary */
.hb2{padding:14px 32px;border-radius:10px;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:15px;font-weight:600;background:var(--s2);transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.hb2:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px)}

/* Trust pills — EXACT PREVIEW */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.pill{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:6px;font-weight:500}
.pill::before{content:"✓";color:var(--g0);font-weight:800}
@media(max-width:480px){.hbtns,.pills,.bdgs{flex-direction:column;align-items:center}}

/* ══ URL BOX — EXACT PREVIEW ══ */
.url-sec{padding:48px 0;background:var(--bg)}
.url-sec .wrap{max-width:860px}
.url-header{text-align:center;margin-bottom:22px}
.url-header p{font-size:13px;color:var(--t2);font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px}
.url-header p::before,.url-header p::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--s4));max-width:100px}
.url-header p::after{background:linear-gradient(270deg,transparent,var(--s4))}
.url-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.ut{padding:7px 20px;border-radius:999px;font-size:13px;color:var(--t1);border:1px solid var(--s4);font-weight:500;background:var(--s2);transition:all .2s;cursor:pointer}
.ut.on{background:var(--p0);color:#fff;border-color:var(--p0);font-weight:700;box-shadow:0 0 16px var(--glow)}
.ut:hover:not(.on){border-color:var(--p0);color:var(--p2)}

.url-card{background:var(--s1);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.url-card:focus-within{border-color:rgba(124,92,252,.5);box-shadow:0 0 0 3px rgba(124,92,252,.1)}
.url-input-row{display:flex;align-items:stretch}
.ui{flex:1;padding:20px 24px;font-size:16px;color:var(--t0);background:transparent;min-width:0}
.ui::placeholder{color:var(--t2)}
.udiv{width:1px;background:var(--border);margin:14px 0;flex-shrink:0}
.url-card:focus-within .udiv{background:rgba(124,92,252,.4)}
.ugo{padding:16px 32px;font-size:14px;font-weight:700;background:var(--p0);color:#fff;border-radius:0 18px 18px 0;white-space:nowrap;transition:all .2s;flex-shrink:0;box-shadow:-4px 0 20px rgba(124,92,252,.2);cursor:pointer}
.ugo:hover{background:var(--p1)}
.url-opts-row{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:7px;flex-wrap:wrap}
.uo{padding:5px 13px;border-radius:999px;border:1px solid var(--s4);font-size:12px;color:var(--t2);background:var(--s2);transition:all .15s;cursor:pointer}
.uo:hover,.uo.on{border-color:var(--p0);color:var(--p2);background:rgba(124,92,252,.09)}

.url-result{padding:16px 22px;border-top:1px solid rgba(0,214,143,.2);background:rgba(0,214,143,.05);display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.url-result.show{display:flex}
.url-result-url{font-size:14px;color:var(--g0);font-weight:700;word-break:break-all}
.ucopy{padding:7px 18px;border-radius:9px;border:1px solid rgba(0,214,143,.4);color:var(--g0);font-size:12px;font-weight:700;white-space:nowrap;background:rgba(0,214,143,.08);cursor:pointer;transition:all .15s}
.ucopy:hover{background:rgba(0,214,143,.15)}

/* ══ TICKER ══ */
.ticker-wrap{background:var(--s2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;height:38px;display:flex;align-items:center}
.tick-r{display:flex;animation:tick 30s linear infinite;align-items:center}
.tick-r:hover{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{display:flex;align-items:center;gap:8px;padding:0 24px;white-space:nowrap;font-size:12px;color:var(--t2);flex-shrink:0;font-weight:500}
.tv{font-weight:700;color:var(--t0)}.ts{width:1px;height:14px;background:var(--s4)}

/* ══ METRICS — EXACT PREVIEW stat-card style ══ */
.metrics{padding:56px 0;background:var(--bg)}
.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.mcard{background:var(--s1);border:1px solid var(--border);border-radius:18px;padding:36px 28px;text-align:center;transition:border-color .2s,transform .2s}
.mcard:hover{border-color:rgba(124,92,252,.35);transform:translateY(-3px)}
.mn{font-size:46px;font-weight:800;letter-spacing:-2.5px;color:var(--t0)}
.mn span{color:var(--p2)}
.ml{font-size:12px;color:var(--t2);margin-top:6px;font-weight:500}
.mc{font-size:11px;color:var(--g0);margin-top:6px;font-weight:700}
.trust-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tcard{background:var(--s1);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center}
.tn{font-size:16px;font-weight:700;color:var(--p2)}
.tl{font-size:10px;color:var(--t2);margin-top:3px;font-weight:500}
@media(max-width:960px){.trust-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.metrics-grid{grid-template-columns:1fr}.trust-row{grid-template-columns:repeat(2,minmax(0,1fr))}.tcard:last-child{grid-column:span 2}}

/* ══ SECTIONS ══ */
.sec{padding:clamp(56px,8vw,96px) 0;background:var(--bg)}
.sec.on-s1{background:var(--s1)}
.shd{text-align:center;margin-bottom:clamp(36px,5vw,52px)}
/* Section tag — EXACT PREVIEW .section-tag */
.shd-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(124,92,252,.1);color:var(--p2);border:1px solid rgba(124,92,252,.2);margin-bottom:16px}

.shd h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1.5px;margin-bottom:12px;color:var(--t0)}
.shd p{font-size:16px;color:var(--t1);max-width:560px;margin:0 auto;line-height:1.8}
.sec-label{text-align:center;margin-bottom:22px;font-size:13px;color:var(--t2);font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px}
.sec-label::before,.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--s4));max-width:100px}
.sec-label::after{background:linear-gradient(270deg,transparent,var(--s4))}

/* ══ FEATURES — EXACT PREVIEW ══ */
.fgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.fc{background:var(--s1);border:1px solid var(--border);border-radius:18px;padding:28px;transition:border-color .2s,transform .2s}
.fc:hover{border-color:rgba(124,92,252,.4);transform:translateY(-4px)}
.fi{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:18px}
.fc h3{font-size:15px;font-weight:700;color:var(--t0);margin-bottom:8px;letter-spacing:-.2px}
.fc p{font-size:13px;color:var(--t2);line-height:1.8}
.ftag{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11px;margin-top:12px;font-weight:700}

/* ══ AD FORMAT CARDS ══ */
.adc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.adc{background:var(--s1);border:1px solid var(--border);border-radius:18px;padding:24px;transition:border-color .2s,transform .2s;position:relative;overflow:hidden}
.adc:hover{transform:translateY(-4px);border-color:rgba(124,92,252,.4)}
.adc-bar{position:absolute;top:0;left:0;right:0;height:3px}
/* adc-top: icon + name/sub row */
.adc-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.adc-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.adc-name{font-size:15px;font-weight:700;color:var(--t0);line-height:1.3}
.adc-sub{font-size:11px;color:var(--t2);font-weight:500;margin-top:2px}
.adc-desc{font-size:13px;color:var(--t2);line-height:1.75;margin-bottom:16px}
/* adc-ft: RPM badge row at bottom */
.adc-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.adc-rpm{font-size:13px;font-weight:700}
.adc-bdg{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
@media(max-width:900px){.adc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.adc-grid{grid-template-columns:1fr}}

/* ══ EARNINGS CALC ══ */
.cag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,44px);align-items:start}
input[type=range]{width:100%;accent-color:var(--p0)}
.car{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:30px}
.crl{font-size:11px;color:var(--t2);font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.crv{font-size:clamp(40px,5.5vw,56px);font-weight:800;color:var(--p2);letter-spacing:-3px;margin-bottom:6px}

.crp{font-size:13px;color:var(--t2);margin-bottom:26px;font-weight:500}
.crb{display:flex;justify-content:space-between;font-size:13px;padding:12px 0;border-bottom:1px solid var(--border)}
.crb:last-child{border-bottom:none}
.crbl{color:var(--t1);font-weight:500}.crbr{font-weight:700;color:var(--t0)}
@media(max-width:720px){.cag{grid-template-columns:1fr}}

/* ══ STEPS — EXACT PREVIEW ══ */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:28px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s}
.step:hover{border-color:rgba(124,92,252,.4);transform:translateY(-4px)}
.step-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p0),var(--cl))}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;background:rgba(124,92,252,.12);border:1px solid rgba(124,92,252,.25);font-size:18px;font-weight:800;color:var(--p2);margin-bottom:22px}

.step-num{display:none}
.step-title{font-size:16px;font-weight:700;color:var(--t0);margin-bottom:10px;letter-spacing:-.3px}
.step-desc{font-size:13px;color:var(--t1);line-height:1.8}

@media(max-width:720px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* ══ PRICING ══ */
.pgr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.pc{background:var(--s1);border:1px solid var(--border);border-radius:20px;padding:30px;position:relative;display:flex;flex-direction:column;transition:border-color .2s}
.pc.hot{border:2px solid var(--p0);box-shadow:0 0 50px rgba(124,92,252,.12)}
.ptg{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--p0),#4822c8);color:#fff;font-size:11px;padding:5px 20px;border-radius:999px;white-space:nowrap;font-weight:700;box-shadow:0 4px 16px var(--glow)}
.pnm{font-size:11px;color:var(--t2);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.ppr{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--t0);letter-spacing:-1px;margin-bottom:8px;line-height:1}
.ppr sub{font-size:12px;color:var(--t2);font-weight:500;letter-spacing:0}
.pds{font-size:13px;color:var(--t2);margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border);line-height:1.6}
.pf{font-size:13px;color:var(--t1);margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.pf::before{content:"✓";color:var(--g0);flex-shrink:0;font-weight:800;font-size:14px;line-height:1.5}
.pb{margin-top:auto;padding-top:24px;width:100%}
.pb button{width:100%;padding:13px;border-radius:10px;font-size:14px;font-weight:700;transition:all .15s;cursor:pointer}
.og{border:1px solid var(--s4);color:var(--t1);background:var(--s2)}
.og:hover{border-color:var(--p0);color:var(--p2)}
.vl{background:var(--p0);color:#fff;box-shadow:0 4px 24px var(--glow)}
.vl:hover{background:var(--p1);transform:translateY(-1px)}
@media(max-width:720px){.pgr{grid-template-columns:1fr}.pc.hot{margin-top:14px}}

/* ══ API ══ */
.agr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,56px);align-items:start}
.al h2{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-1px;margin-bottom:14px;color:var(--t0)}
.al p{font-size:14px;color:var(--t1);line-height:1.88;margin-bottom:22px}
.af{font-size:13px;color:var(--t1);margin-bottom:12px;display:flex;align-items:center;gap:10px;font-weight:500}
.af::before{content:"✓";color:var(--g0);font-weight:800;font-size:14px}
.code{background:#04040d;border:1px solid rgba(255,255,255,.06);border-radius:18px;overflow:hidden}
.codehd{padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;color:#44447a;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.codelv{color:var(--g0);font-size:10px;display:flex;align-items:center;gap:6px;font-weight:700}
.codelv::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g0);animation:pulse 2s infinite}
.codeb{padding:22px;font-size:12px;font-family:'Cascadia Code','Fira Code','Courier New',monospace;line-height:2.1;overflow-x:auto;color:#c4c4e4}
.kw{color:#c084fc}.sk{color:#86efac}.co{color:#3a3a64}.fn{color:#67e8f9}.nm{color:#fbbf24}
@media(max-width:720px){.agr{grid-template-columns:1fr}}

/* ══ CTA — EXACT PREVIEW ══ */
.cta-wrap{padding:96px 0;position:relative;overflow:hidden;background:var(--bg)}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(124,92,252,.12),transparent 65%);pointer-events:none;z-index:0}
.cta-inner{max-width:660px;margin:0 auto;padding:0 clamp(16px,4vw,48px);text-align:center;position:relative;z-index:1}
.cta-inner h2{font-size:clamp(30px,5vw,46px);font-weight:800;letter-spacing:-1.5px;margin-bottom:14px;color:var(--t0)}
.cta-inner p{font-size:15px;color:var(--t1);margin-bottom:36px;line-height:1.8}
.ctab{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
@media(max-width:480px){.ctab{flex-direction:column;align-items:center}}

/* ══ FOOTER — EXACT PREVIEW ══ */
footer,.v9-footer{background:var(--s1);border-top:1px solid var(--border)}
.v9-footer-inner,.footer-inner{max-width:1200px;margin:0 auto;padding:56px clamp(16px,4vw,48px) 40px;display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.v9-footer-brand,.footer-brand{display:flex;flex-direction:column;gap:16px}
.v9-footer-logo,.footer-brand-logo{display:inline-flex;align-items:center;gap:10px}
.v9-footer-tagline,.footer-tagline{font-size:13px;color:var(--t2);line-height:1.75;max-width:260px}
.v9-footer-cols,.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.v9-footer-col-title,.footer-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t2);margin-bottom:16px}
.v9-footer-link,.footer-col a{display:block;font-size:13px;color:var(--t2);padding:4px 0;transition:color .15s}
.v9-footer-link:hover,.footer-col a:hover{color:var(--p2)}

.v9-footer-bottom,.footer-bottom{border-top:1px solid var(--border);text-align:center;padding:20px clamp(16px,4vw,48px);font-size:12px;color:var(--t2)}
@media(max-width:760px){.v9-footer-inner,.footer-inner{grid-template-columns:1fr}.v9-footer-cols,.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.v9-footer-cols,.footer-cols{grid-template-columns:1fr}}
/* Small footer (pages that use inline footer) */
.footer{background:var(--bg);border-top:1px solid var(--border);padding:28px clamp(16px,4vw,48px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.fls{display:flex;gap:clamp(12px,2.5vw,24px);flex-wrap:wrap}
.fl{font-size:12px;color:var(--t2);font-weight:500;transition:color .15s}
.fl:hover{color:var(--p2)}
.fcp{font-size:12px;color:var(--t2);font-weight:500}
@media(max-width:480px){.footer{flex-direction:column;text-align:center}.fls{justify-content:center}}

/* ══ SCROLL REVEAL ══ */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:translateY(0)}
.rv-done{opacity:1!important;transform:none!important}

/* ══ V10 PREVIEW ADDITIONAL CLASSES ══ */

/* Badge — single preview badge style */
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid rgba(0,214,143,.25);background:rgba(0,214,143,.07);color:var(--g0)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--g0);animation:pulse 2s infinite;flex-shrink:0}

/* Nav aliases */
.nav-logo-icon{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#7c5cfc,#4f28c8);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 20px rgba(124,92,252,.5);font-size:17px}
.nav-logo-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round}
.nav-logo-text{font-size:15px;font-weight:700;color:var(--t0);letter-spacing:-.3px}
.nav-links{display:flex;gap:2px}
.nav-link{padding:7px 13px;border-radius:8px;font-size:13px;color:var(--t1);font-weight:500;transition:all .15s}
.nav-link:hover{background:var(--s3);color:var(--t0)}
.nav-right{display:flex;align-items:center;gap:8px}
.btn-out{padding:8px 16px;border-radius:8px;font-size:13px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:500;background:transparent;transition:all .15s;cursor:pointer}
.btn-out:hover{border-color:var(--p0);color:#fff;background:rgba(255,255,255,.08)}
.btn-fill{padding:8px 18px;border-radius:8px;font-size:13px;font-weight:700;background:var(--p0);color:#fff;box-shadow:0 0 20px var(--glow);transition:all .2s;cursor:pointer}
.btn-fill:hover{background:var(--p1);transform:translateY(-1px)}

/* Hero button aliases — exact preview */
.hero-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero-btn-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.role-label{display:inline-flex;align-items:center;gap:5px;padding:5px 16px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(124,92,252,.12);color:var(--p2);border:1px solid rgba(124,92,252,.25)}
.role-label.adv{background:rgba(34,211,238,.1);color:var(--cl);border-color:rgba(34,211,238,.2)}
.role-label::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;animation:pulse 2s infinite}

.btn-primary{padding:14px 32px;border-radius:10px;background:var(--p0);color:#fff !important;font-size:15px;font-weight:700;box-shadow:0 0 28px var(--glow);display:inline-flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer;text-decoration:none}
.btn-primary:hover{background:var(--p1);transform:translateY(-2px);box-shadow:0 8px 36px var(--glow)}
.btn-secondary{padding:14px 32px;border-radius:10px;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:15px;font-weight:600;background:rgba(255,255,255,.08);transition:all .2s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}
.btn-secondary:hover{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* Trust pills aliases */
.trust-pills{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.trust-pill{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:6px;font-weight:500}
.trust-pill::before{content:"✓";color:var(--g0);font-weight:800}

/* Section head — exact preview */
.section-head{text-align:center;margin-bottom:52px}
.section-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:rgba(124,92,252,.1);color:var(--p2);border:1px solid rgba(124,92,252,.2);margin-bottom:16px}

.section-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-1.5px;margin-bottom:12px;color:var(--t0)}
.section-head p{font-size:16px;color:var(--t1);max-width:560px;margin:0 auto;line-height:1.8}

/* CTA section — exact preview */
.cta-section{padding:96px 0;position:relative;overflow:hidden;background:var(--bg)}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(ellipse,rgba(124,92,252,.12),transparent 65%);pointer-events:none;z-index:0}
.cta-section .cta-inner{position:relative;z-index:1}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
@media(max-width:480px){.cta-btns,.hero-btns,.trust-pills{flex-direction:column;align-items:center}}

/* Footer exact preview */
footer{background:var(--s1);border-top:1px solid var(--border)}
.footer-inner{max-width:1200px;margin:0 auto;padding:56px clamp(16px,4vw,48px) 40px;display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:16px}
.footer-brand-logo{display:flex;align-items:center;gap:10px}
.footer-tagline{font-size:13px;color:var(--t2);line-height:1.75;max-width:260px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.footer-col h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t2);margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--t2);padding:4px 0;transition:color .15s;text-decoration:none}
.footer-col a:hover{color:var(--p2)}

.footer-bottom{border-top:1px solid var(--border);text-align:center;padding:20px clamp(16px,4vw,48px);font-size:12px;color:var(--t2)}
@media(max-width:760px){.footer-inner{grid-template-columns:1fr}.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.footer-cols{grid-template-columns:1fr}}

/* hero-sub alias */
.hero-sub{font-size:18px;color:var(--t1);max-width:560px;margin:0 auto 40px;line-height:1.8}

/* Nav always visible on all devices — responsive sizing */
@media(max-width:640px){
  .nbo,.btn-out{padding:6px 12px;font-size:12px}
  .nbf,.btn-fill{padding:6px 14px;font-size:12px}
  .navr,.nav-right{gap:6px}
  .ltx,.nav-logo-text{font-size:13px}
  .nav-logo-icon,.logi{width:28px;height:28px;font-size:14px}
  .nav{padding:0 12px}
}
@media(max-width:380px){
  .nbo,.btn-out{padding:5px 10px;font-size:11px}
  .nbf,.btn-fill{padding:5px 11px;font-size:11px}
  .nav{height:52px}
  .hero{padding-top:140px}
}


/* ══ FULL RESPONSIVE — ALL DEVICES ══ */

/* Large tablet (961–1200px) */
@media(max-width:1200px){
  .wrap{padding:0 clamp(16px,3vw,32px)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agr{gap:28px}
}

/* Tablet (641–960px) */
@media(max-width:960px){
  .nmid{display:none}
  .hero{padding:130px 20px 72px}
  h1.ht{font-size:clamp(34px,6vw,52px);letter-spacing:-2px}
  .hsub,.hero-sub{font-size:16px}
  .metrics-grid{grid-template-columns:repeat(3,1fr)}
  .trust-row{grid-template-columns:repeat(3,1fr)}
  .fgr{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pgr{grid-template-columns:1fr}
  .agr{grid-template-columns:1fr}
  .cag{grid-template-columns:1fr}
  .v9-footer-inner,.footer-inner{grid-template-columns:1fr;gap:40px}
  .v9-footer-cols,.footer-cols{grid-template-columns:repeat(3,1fr)}
  .adc-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile (max 640px) */
@media(max-width:640px){
  /* Nav — compact but ALWAYS shows login/signup */
  .nav{height:52px;padding:0 12px}
  .nav-logo-icon,.logi{width:28px;height:28px;font-size:14px}
  .ltx,.nav-logo-text{font-size:13px}
  .nbo,.btn-out{padding:5px 10px;font-size:11px;border-radius:7px}
  .nbf,.btn-fill{padding:5px 12px;font-size:11px;border-radius:7px}
  .navr,.nav-right{gap:5px}
  .thm{display:none!important}
  /* Hero */
  .hero{padding:110px 16px 56px}
  h1.ht{font-size:clamp(30px,9vw,44px);letter-spacing:-1.5px}
  .hsub,.hero-sub{font-size:15px;margin-bottom:28px}
  .hero-btns,.hbtns{flex-direction:column;align-items:center;gap:12px}
  .hbtn-wrap,.hero-btn-group{width:100%;align-items:center}
  .btn-primary,.hb1,.btn-secondary,.hb2{width:100%;max-width:320px;justify-content:center;padding:13px 24px}
  .trust-pills,.pills{gap:12px}
  .trust-pill,.pill{font-size:11px}
  /* URL box */
  .url-sec{padding:24px 0}
  .url-tabs{gap:6px}
  .ut{padding:6px 14px;font-size:12px}
  .ui{padding:14px 16px;font-size:14px}
  .ugo{padding:14px 20px;font-size:13px}
  /* Metrics */
  .metrics{padding:32px 0}
  .metrics-grid{grid-template-columns:1fr}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .mn{font-size:36px}
  /* Cards */
  .fgr{grid-template-columns:1fr}
  .fc{padding:22px}
  .adc-grid{grid-template-columns:1fr}
  .adc{padding:20px}
  .steps{grid-template-columns:1fr}
  .step{padding:20px}
  .cag{grid-template-columns:1fr}
  .car{padding:22px}
  .agr{grid-template-columns:1fr}
  /* Section headings */
  .shd h2,.section-head h2{font-size:24px;letter-spacing:-1px}
  /* CTA */
  .cta-section,.cta-wrap{padding:56px 0}
  .cta-inner h2{font-size:26px}
  .cta-btns,.ctab{flex-direction:column;align-items:center}
  .cta-btns a,.ctab a{width:100%;max-width:320px;justify-content:center}
  /* Footer */
  .v9-footer-inner,.footer-inner{grid-template-columns:1fr;gap:28px;padding:36px 16px 28px}
  .v9-footer-cols,.footer-cols{grid-template-columns:repeat(2,1fr);gap:20px}
  .v9-footer-bottom,.footer-bottom{font-size:11px;padding:16px}
  /* Ticker */
  .ticker-wrap{height:34px}
}

/* Small mobile (max 380px) */
@media(max-width:380px){
  .nav{padding:0 10px}
  .ltx,.nav-logo-text{display:none}
  .nbo,.btn-out{padding:5px 8px;font-size:10px}
  .nbf,.btn-fill{padding:5px 10px;font-size:10px}
  .hero{padding:100px 12px 48px}
  h1.ht{font-size:28px;letter-spacing:-1px}
  .v9-footer-cols,.footer-cols{grid-template-columns:1fr}
  .adc-grid{grid-template-columns:1fr}
}

/* Ensure nav buttons NEVER get hidden */
.nbo,.nbf,.btn-out,.btn-fill{display:inline-flex!important;align-items:center}

/* ══ KPI Card Square Badge Icons (campaigns, adv/dashboard, campaign_fund) ══
   strmlinks.css .badge = pill tag (border-radius:999px) — for status labels
   .cardy.kpi .badge = SQUARE icon — needs completely different treatment
   Using html selector prefix for maximum specificity without !important
   ══════════════════════════════════════════════════════════════════════════ */
html body .cardy.kpi .badge,
html body .col-3 .cardy .badge,
html body .grid .cardy .badge,
html body div.badge.b1,
html body div.badge.b2,
html body div.badge.b3,
html body div.badge.b4{
  display:grid!important;
  place-items:center!important;
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  min-height:62px!important;
  border-radius:18px!important;
  padding:0!important;
  border:none!important;
  flex-shrink:0!important;
  font-size:28px!important;
  line-height:1!important;
  box-shadow:0 4px 18px rgba(0,0,0,.3)!important;
}
html body div.badge.b1{background:linear-gradient(135deg,#8b5cf6,#3b82f6)!important}
html body div.badge.b2{background:linear-gradient(135deg,#10b981,#14b8a6)!important}
html body div.badge.b3{background:linear-gradient(135deg,#f59e0b,#ef4444)!important}
html body div.badge.b4{background:linear-gradient(135deg,#a78bfa,#60a5fa)!important}
/* img/svg/i inside badge */
html body .cardy.kpi .badge img,
html body div.badge.b1 img,
html body div.badge.b2 img,
html body div.badge.b3 img,
html body div.badge.b4 img,
html body div.badge img{
  width:34px!important;
  height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}
html body div.badge i,
html body .cardy.kpi .badge i{
  font-size:26px!important;
  color:#fff!important;
}
/* KPI card layout */
html body .cardy.kpi{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:20px 22px!important;
  min-height:90px!important;
}