:root{
  --ink:#040b18;--ink2:#060f20;--ink3:#081326;
  --neon:#06d6a0;--neonb:#00d4ff;--neonp:#a855f7;--neong:#f59e0b;
  --ff:'Bricolage Grotesque',system-ui,sans-serif;
  --fm:'DM Mono',monospace;
  --t:.28s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff);background:#fff;color:#0b1221;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--ff);font-weight:800;line-height:1.1;letter-spacing:-.03em;}
h1{font-size:var(--h1)!important;}
h2{font-size:var(--h2)!important;}
h3{font-size:var(--h3)!important;}
h4{font-size:1.4rem!important;}
a{text-decoration:none;color:inherit;}
/* THE ACTUAL FIX — decorative elements causing horizontal scroll */

html {
  overflow-x: hidden;
}

.gl::before,
.gl-lt::before {
  max-width: 100vw;
  overflow: hidden;
}

.hg1, .hg2 {
  max-width: 100vw;
  overflow: hidden;
}

/* Also clip any section that contains these */
.zz-hero,
.zz-sec {
  overflow: hidden;
  max-width: 100vw;
}
.zz-grid1{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.zz-grid2{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;}
.zz-grid2.flip .zz-col-img{order:2;} .zz-grid2.flip .zz-col-txt{order:1;}
.zz-grid3{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center;}
@media(max-width:900px){
  .zz-grid1,.zz-grid2,.zz-grid3{grid-template-columns:1fr;gap:40px;}
  .zz-grid2.flip .zz-col-img,.zz-grid2.flip .zz-col-txt{order:0;}
}
.zz-grid7{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;align-items:center;}
@media(max-width:900px){
  .zz-grid7{grid-template-columns:1fr;gap:40px;}
}
/* CANVAS */
#zz-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.28;}

/* LAYOUT */
.zz-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px);position:relative;z-index:2;}
.zz-sec{position:relative;overflow:hidden;padding:clamp(56px,7vw,106px) 0;}
.sec-dark{background:var(--ink);}
.sec-dark2{background:var(--ink2);}
.sec-dark3{background:var(--ink3);}
.sec-white{background:#fff;}
.sec-soft{background:#f7f9fc;}

/* GRID */
.zz-grid2{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,52px);align-items:center;}
.flip>*:first-child{order:2;}.flip>*:last-child{order:1;}
@media(max-width:900px){.zz-grid2{grid-template-columns:1fr;}.flip>*{order:unset!important;}}




/* DECORATIVE LAYERS */
.gp::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(6,214,160,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(6,214,160,.04) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;z-index:0;}
.gp-lt::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(6,214,160,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(6,214,160,.03) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;z-index:0;}
.gl::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:900px;height:420px;background:radial-gradient(ellipse at 50% 0%,rgba(6,214,160,.09) 0%,transparent 68%);pointer-events:none;z-index:0;}
.gl-lt::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:900px;height:320px;background:radial-gradient(ellipse at 50% 0%,rgba(6,214,160,.06) 0%,transparent 65%);pointer-events:none;z-index:0;}
.hg1{position:absolute;top:-15%;left:-8%;width:480px;height:480px;border-radius:50%;background:radial-gradient(ellipse,rgba(6,214,160,.1) 0%,transparent 68%);pointer-events:none;z-index:0;animation:gdrift 9s ease-in-out infinite;}
.hg2{position:absolute;top:25%;right:-6%;width:400px;height:400px;border-radius:50%;background:radial-gradient(ellipse,rgba(168,85,247,.07) 0%,transparent 65%);pointer-events:none;z-index:0;animation:gdrift 11s ease-in-out infinite reverse;}
@keyframes gdrift{0%,100%{transform:translate(0,0);}50%{transform:translate(24px,14px);}}

/* TYPE HELPERS */
.zh1{font-size:clamp(28px,5vw,58px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#fff;}
.zh2{font-size:clamp(22px,3.8vw,44px);font-weight:800;line-height:1.11;letter-spacing:-.028em;color:#fff;}
.zh2.lt{color:#0b1221;}
.zh3{font-size:clamp(20px,3vw,34px);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:#fff;}
.zh3.lt{color:#0b1221;}
em{font-style:normal;background:linear-gradient(135deg,#06d6a0,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.zb{font-size:15px;line-height:1.82;color:rgba(255,255,255,.85);margin-bottom:15px;text-align:justify;}
.zb.lt{color:#374151;}.zb b{color:rgba(255,255,255,.95);}.zb.lt b{color:#0b1221;}
.zkicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--neon);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.zkicker.lt{color:#059669;}
.zew{display:inline-flex;align-items:center;font-family:var(--fm);font-size:10px;font-weight:700;color:var(--neon);letter-spacing:.12em;text-transform:uppercase;background:rgba(6,214,160,.08);border:1px solid rgba(6,214,160,.22);border-radius:6px;padding:4px 11px;margin-bottom:14px;}
.zew.lt{color:#059669;background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.2);}

/* BUTTONS */
.zbtn{display:inline-flex!important;align-items:center!important;gap:8px!important;font-family:var(--ff)!important;font-weight:600!important;font-size:14px!important;border-radius:12px!important;padding:13px 26px!important;cursor:pointer!important;text-decoration:none!important;transition:all var(--t)!important;border:none!important;line-height:1!important;}
.zbtn-p{background:linear-gradient(135deg,#06d6a0,#00bfff)!important;color:#040b18!important;box-shadow:0 8px 28px rgba(6,214,160,.38)!important;}
.zbtn-p:hover{box-shadow:0 16px 48px rgba(6,214,160,.65)!important;transform:translateY(-3px) scale(1.02)!important;color:#040b18!important;}
.zbtn-g{background:transparent!important;color:var(--neon)!important;border:1.5px solid var(--neon)!important;box-shadow:0 0 14px rgba(6,214,160,.15)!important;}
.zbtn-g:hover{background:rgba(6,214,160,.1)!important;box-shadow:0 0 32px rgba(6,214,160,.42)!important;transform:translateY(-2px)!important;}
.zbtn-gl{background:transparent!important;color:#059669!important;border:1.5px solid #059669!important;}
.zbtn-gl:hover{background:rgba(5,150,105,.08)!important;transform:translateY(-2px)!important;}
.zbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

/* PULSE DOT */
.pdot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:pdot 1.8s ease-in-out infinite;display:inline-block;flex-shrink:0;}
.pdot-g{background:#28c840;box-shadow:0 0 10px #28c840;}
.pdot-y{background:#f59e0b;box-shadow:0 0 10px #f59e0b;}
@keyframes pdot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.62);}}

/* HERO */
.zz-hero{padding:clamp(80px,10vw,128px) 0 clamp(56px,7vw,96px);position:relative;background:var(--ink);}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:11.5px;font-weight:600;color:var(--neon);letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;}
.hero-kdot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:pdot 1.8s ease-in-out infinite;}
.hero-sub{font-size:15px;line-height:1.78;color:rgba(255,255,255,.7);margin:20px 0 0;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* TERMINAL PANEL */
.zterm{background:rgba(255,255,255,.03);border:1px solid rgba(6,214,160,.15);border-radius:18px;overflow:hidden;backdrop-filter:blur(14px);}
.scanlines{position:relative;}
.scanlines::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(6,214,160,.01) 3px,rgba(6,214,160,.01) 4px);pointer-events:none;border-radius:18px;}
.tbar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(6,214,160,.1);}
.tdot{width:10px;height:10px;border-radius:50%;}
.ttitle{margin-left:6px;font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.45);flex:1;}
.tbadge{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--neon);background:rgba(6,214,160,.12);border:1px solid rgba(6,214,160,.25);border-radius:4px;padding:2px 7px;}
.tbody{padding:18px 20px;}
.trow{display:grid;grid-template-columns:120px 1fr 42px;gap:10px;align-items:center;margin-bottom:11px;}
@media(max-width:380px){.trow{grid-template-columns:88px 1fr 34px;}}
.tlabel{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.52);}
.ttrack{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;}
.tfill{height:100%;background:linear-gradient(90deg,var(--neon),var(--neonb));border-radius:3px;animation:fillbar 1.6s cubic-bezier(.4,0,.2,1) forwards;width:0;}
@keyframes fillbar{to{width:var(--w,90%)}}
.tval{font-family:var(--fm);font-size:11.5px;font-weight:700;color:var(--neon);text-align:right;}
.tsep{height:1px;background:rgba(6,214,160,.1);margin:13px 0;}
.tres{display:flex;justify-content:space-between;align-items:center;}
.tres-lbl{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.52);}
.tres-badge{background:linear-gradient(135deg,var(--neon),var(--neonb));color:#040b18;font-family:var(--fm);font-size:11.5px;font-weight:800;padding:5px 13px;border-radius:6px;letter-spacing:.05em;}

/* HRC GRID */
.hrcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px;}
.hrc{background:rgba(255,255,255,.04);border:1px solid rgba(6,214,160,.12);border-radius:11px;padding:13px 10px;text-align:center;}
.hrc-num{font-size:19px;font-weight:800;color:var(--neon);letter-spacing:-.03em;}
.hrc-lbl{font-family:var(--fm);font-size:9.5px;color:rgba(255,255,255,.42);margin-top:4px;}

/* STAT BAR */
.statbar{background:rgba(6,214,160,.05);border-top:1px solid rgba(6,214,160,.1);border-bottom:1px solid rgba(6,214,160,.1);padding:clamp(20px,3.5vw,34px) 0;}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:680px){.statgrid{grid-template-columns:repeat(2,1fr);}}
.statitem{text-align:center;}
.statnum{font-size:clamp(20px,3vw,36px);font-weight:800;letter-spacing:-.04em;color:var(--neon);line-height:1;}
.statlbl{font-family:var(--fm);font-size:10px;color:rgba(255,255,255,.45);margin-top:5px;letter-spacing:.04em;}

/* SEC HEADER */
.sechead{text-align:center;margin-bottom:clamp(28px,4.5vw,52px);}
.seceyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10.5px;font-weight:600;color:var(--neon);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.seceyebrow.lt{color:#059669;}
.sectitle{font-size:clamp(20px,3.5vw,42px);font-weight:800;line-height:1.11;letter-spacing:-.028em;color:#fff;margin-bottom:12px;}
.sectitle.lt{color:#0b1221;}

/* CAROUSEL */
.carwrap{position:relative;overflow:hidden;}
.fadel,.fader{position:absolute;top:0;bottom:0;width:60px;z-index:10;pointer-events:none;}
.fadel{left:0;background:linear-gradient(90deg,var(--ink2),transparent);}
.fader{right:0;background:linear-gradient(-90deg,var(--ink2),transparent);}
.fadel.lt{background:linear-gradient(90deg,#f7f9fc,transparent);}
.fader.lt{background:linear-gradient(-90deg,#f7f9fc,transparent);}
.fadel.dk{background:linear-gradient(90deg,#0a1628,transparent);}
.fader.dk{background:linear-gradient(-90deg,#0a1628,transparent);}
.cartrack{display:flex;gap:18px;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform;cursor:grab;user-select:none;}
.cartrack:active{cursor:grabbing;}
.slide{position:relative;min-width:330px;height:390px;border-radius:18px;overflow:hidden;flex-shrink:0;}
@media(max-width:560px){.slide{min-width:260px;height:310px;}}
.sover{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,11,24,.96) 0%,rgba(4,11,24,.3) 55%,transparent 100%);}
.sinfo{position:absolute;bottom:0;left:0;right:0;padding:20px;z-index:2;}
.sbadge{display:inline-flex;align-items:center;font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--neon);background:rgba(6,214,160,.12);border:1px solid rgba(6,214,160,.28);border-radius:5px;padding:3px 9px;margin-bottom:8px;}
.sname{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.3;}
.smeta{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.45);margin-bottom:11px;}
.smeta-body{font-family:sans-serif;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.58;margin-bottom:0;}
.scta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--neon);text-decoration:none;transition:color .2s;}
.scta:hover{color:#fff;}
.scta svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
.carctrl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;}
.cdot{width:7px;height:7px;border-radius:50%;background:rgba(6,214,160,.2);border:none;cursor:pointer;padding:0;transition:all .22s;}
.cdot.on{background:var(--neon);width:19px;border-radius:3px;}
.cdot.lt-on{background:rgba(5,150,105,.2);}
.cdot.lt-on.on{background:#059669;}
.carr{width:35px;height:35px;border-radius:10px;border:1px solid rgba(6,214,160,.18);background:rgba(6,214,160,.05);color:var(--neon);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .22s;flex-shrink:0;}
.carr:hover{background:rgba(6,214,160,.14);border-color:rgba(6,214,160,.4);}
.carr svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
.carr.lt{border-color:rgba(5,150,105,.18);background:rgba(5,150,105,.05);color:#059669;}
.carr.lt:hover{background:rgba(5,150,105,.12);}

/* CHECKLIST */
.cklist{list-style:none;padding:0;}
.cklist li{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px;font-size:14px;color:rgba(255,255,255,.8);line-height:1.62;}
.cklist li::before{content:'✓';color:var(--neon);font-weight:800;font-size:13.5px;flex-shrink:0;margin-top:2px;}
.cklist.lt li{color:#374151;}
.cklist.lt li::before{color:#059669;}

/* REVEAL */
.rv{opacity:0;transform:translateY(24px);transition:opacity .62s ease,transform .62s ease;}
.rv.vis{opacity:1;transform:none;}
.rv.d1{transition-delay:.06s;}.rv.d2{transition-delay:.13s;}.rv.d3{transition-delay:.2s;}.rv.d4{transition-delay:.27s;}.rv.d5{transition-delay:.34s;}

/* BREADCRUMB */
.zbread{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:11px;color:rgba(255,255,255,.38);margin-bottom:20px;}
.zbread a{color:rgba(255,255,255,.48);transition:color .2s;}.zbread a:hover{color:var(--neon);}
.zbread span{color:rgba(255,255,255,.22);}

/* ══════════════════════════════
   VISUAL COMPONENTS
══════════════════════════════ */

/* SERP MOCKUP */
.serp-outer{background:rgba(255,255,255,.025);border:1px solid rgba(6,214,160,.12);border-radius:20px;overflow:hidden;}
.serp-searchbar{display:flex;align-items:center;gap:8px;background:#f1f3f4;margin:18px;border-radius:24px;padding:10px 14px;border:1px solid #dadce0;}
.serp-icon{font-size:13px;color:#9aa0a6;}
.serp-query{flex:1;font-family:var(--fm);font-size:11px;color:#202124;}
.serp-entries{padding:0 18px 18px;}
.serp-r{border-radius:12px;padding:14px 16px;margin-bottom:10px;border-left:4px solid;transition:transform .2s;}
.serp-r:hover{transform:translateX(4px);}
.serp-r-1{background:rgba(5,150,105,.05);border-color:#059669;}
.serp-r-2{background:rgba(0,0,0,.02);border-color:#e0e0e0;opacity:.5;}
.serp-r-3{background:rgba(0,0,0,.015);border-color:#ebebeb;opacity:.28;}
.serp-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.serp-rlink{font-size:10.5px;color:#059669;font-family:var(--fm);}
.serp-rlink-dim{color:#aaa;}
.serp-rpos{font-family:var(--fm);font-size:10px;font-weight:800;color:#059669;}
.serp-rpos-dim{color:black;}
.serp-rtitle{font-size:13.5px;font-weight:700;color:#1a0dab;margin-bottom:4px;line-height:1.3;}
.serp-rtitle-dim{color:black;}
.serp-rdesc{font-size:11.5px;color:black;line-height:1.5;}
.serp-rdesc-dim{color:black;}
.serp-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px;}
.serp-tag{font-family:var(--fm);font-size:8.5px;color:#059669;background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.18);padding:2px 7px;border-radius:4px;}
.serp-uplift{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:rgba(5,150,105,.04);border-top:1px solid rgba(5,150,105,.08);}
.serp-uplift-arrow{animation:arrowbounce 1.8s ease-in-out infinite;}
@keyframes arrowbounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.serp-uplift-txt{font-family:var(--fm);font-size:10.5px;font-weight:700;color:#059669;letter-spacing:.07em;}

/* ORBITAL */
.orbital{position:relative;width:100%;max-width:370px;margin:0 auto;aspect-ratio:1;}
.orb-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,var(--neon),var(--neonb));display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 40px rgba(6,214,160,.55),0 0 80px rgba(6,214,160,.2);z-index:5;}
.orb-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(6,214,160,.17);}
.orb-r1{width:124px;height:124px;animation:orbspin 8s linear infinite;}
.orb-r2{width:194px;height:194px;animation:orbspin 13s linear infinite reverse;}
.orb-r3{width:268px;height:268px;animation:orbspin 19s linear infinite;}
@keyframes orbspin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.orb-p{position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(6,214,160,.1);border:1px solid rgba(6,214,160,.28);display:flex;align-items:center;justify-content:center;font-size:13px;z-index:4;}
.rankbig{font-size:clamp(56px,9vw,96px);font-weight:900;background:linear-gradient(135deg,var(--neon),var(--neonb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;letter-spacing:-.05em;text-align:center;}
.ranklbl{font-family:var(--fm);font-size:10px;color:rgba(255,255,255,.32);letter-spacing:.1em;margin-top:3px;text-align:center;}

/* AI METRICS PANEL */
.ai-panel{background:rgba(255,255,255,.025);border:1px solid rgba(6,214,160,.14);border-radius:16px;overflow:hidden;position:relative;}
.ai-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(6,214,160,.5),transparent);}
.aip-head{padding:14px 18px;border-bottom:1px solid rgba(6,214,160,.08);display:flex;align-items:center;justify-content:space-between;}
.aip-title{font-family:var(--fm);font-size:10.5px;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
.aip-live{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:9px;font-weight:700;color:var(--neon);letter-spacing:.08em;}
.aip-live::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--neon);animation:pdot 1.4s ease-in-out infinite;}
.aip-body{padding:14px 18px;}
.aip-m{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;margin-bottom:7px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:all .22s;}
.aip-m:hover{border-color:rgba(6,214,160,.18);background:rgba(6,214,160,.03);}
.aip-m-name{font-family:var(--fm);font-size:11.5px;color:rgba(255,255,255,.6);}
.aip-m-val{font-family:var(--fm);font-size:12.5px;font-weight:700;}
.v-g{color:var(--neon);}.v-b{color:var(--neonb);}.v-y{color:#f59e0b;}
.aip-foot{padding:0 18px 18px;}
.aip-res{background:rgba(6,214,160,.06);border:1px solid rgba(6,214,160,.18);border-radius:10px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;}
.aip-res-lbl{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.48);}
.aip-res-val{font-family:var(--fm);font-size:13px;font-weight:800;background:linear-gradient(135deg,var(--neon),var(--neonb));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* WHITE HAT BAR CHART */
.barvis{background:rgba(255,255,255,.025);border:1px solid rgba(6,214,160,.12);border-radius:18px;overflow:hidden;}
.barchart{display:flex;align-items:flex-end;gap:5px;height:126px;padding:16px 18px 0;}
.bar{flex:1;border-radius:5px 5px 0 0;position:relative;overflow:visible;}
.bar-fill{width:100%;border-radius:5px 5px 0 0;transform-origin:bottom;animation:barrise 1.5s cubic-bezier(.4,0,.2,1) forwards;transform:scaleY(0);}
@keyframes barrise{to{transform:scaleY(1);}}
.bar-lbl{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:7.5px;color:rgba(255,255,255,.32);white-space:nowrap;}
.bar-crown{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:14px;animation:crownfloat 2.2s ease-in-out infinite;}
@keyframes crownfloat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-5px);}}
.barchart-note{text-align:center;font-family:var(--fm);font-size:9.5px;color:rgba(255,255,255,.32);padding:26px 0 12px;letter-spacing:.04em;}
.clean-badge{margin:0 18px 18px;background:rgba(6,214,160,.06);border:1px solid rgba(6,214,160,.18);border-radius:10px;padding:13px 15px;display:flex;align-items:flex-start;gap:11px;}
.cb-icon{font-size:20px;flex-shrink:0;}
.cb-body{font-family:var(--fm);font-size:11px;line-height:1.65;}
.cb-title{color:var(--neon);font-weight:700;letter-spacing:.06em;margin-bottom:4px;}
.cb-text{color:rgba(255,255,255,.52);}

/* RANKING GRAPH */
.rankgraph{background:rgba(255,255,255,.025);border:1px solid rgba(6,214,160,.12);border-radius:18px;padding:22px;}
.rg-title{font-family:var(--fm);font-size:10.5px;color:rgba(46, 44, 44, 0.81);letter-spacing:.1em;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.rg-svg{width:100%;height:116px;}
.rgstat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
.rgstat-item{text-align:center;background:rgba(6,214,160,.05);border:1px solid rgba(6,214,160,.1);border-radius:9px;padding:11px 6px;}
.rgstat-num{font-size:20px;font-weight:800;color:var(--neon);letter-spacing:-.03em;}
.rgstat-lbl{font-family:var(--fm);font-size:9px;margin-top:3px;}

/* WHY CHOOSE VISUAL */
.wcvis{background:rgba(255,255,255,.025);border:1px solid rgba(245,158,11,.15);border-radius:18px;overflow:hidden;}
.wcbar{background:rgba(245,158,11,.06);border-bottom:1px solid rgba(245,158,11,.12);padding:11px 16px;display:flex;align-items:center;gap:7px;}
.wcdot{width:10px;height:10px;border-radius:50%;}
.wctitle{font-family:var(--fm);font-size:10.5px;color:rgba(255,255,255,.42);flex:1;margin-left:5px;}
.wcbadge{font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.1em;color:#f59e0b;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);border-radius:4px;padding:2px 7px;}
.wcbody{padding:18px 18px 4px;}
.wcrow{display:flex;align-items:center;gap:12px;margin-bottom:11px;padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:9px;transition:all .22s;}
.wcrow:hover{border-color:rgba(245,158,11,.2);background:rgba(245,158,11,.04);transform:translateX(4px);}
.wcico{font-size:18px;flex-shrink:0;width:28px;text-align:center;}
.wctxt{font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.48;}.wctxt b{color:rgba(255,255,255,.92);}
.wcfoot{padding:0 18px 18px;}
.wcmedal{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(251,146,60,.07));border:1px solid rgba(245,158,11,.22);border-radius:9px;padding:12px 14px;display:flex;align-items:center;gap:10px;}
.wc-medal-txt{font-family:var(--fm);font-size:10.5px;color:#f59e0b;font-weight:700;letter-spacing:.06em;}

/* CONTACT SECTION */
.contact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:520px;margin:28px auto;}
.cstat{background:rgba(6,214,160,.05);border:1px solid rgba(6,214,160,.12);border-radius:11px;padding:13px 8px;text-align:center;}
.cstat-num{font-size:21px;font-weight:800;color:var(--neon);font-family:var(--ff);}
.cstat-lbl{font-family:var(--fm);font-size:9px;color:rgba(255,255,255,.38);margin-top:3px;}

/* SUBSCRIBE */
.sub-sec{background:linear-gradient(135deg,#059669,#047857);padding:clamp(48px,6vw,76px) 0;position:relative;overflow:hidden;}
.sub-sec::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.06) 0%,transparent 60%);pointer-events:none;}
.sub-inner{max-width:560px;margin:0 auto;text-align:center;position:relative;z-index:2;padding:0 18px;}
.sub-h{font-size:clamp(18px,3vw,28px);font-weight:800;color:#fff;margin-bottom:7px;}
.sub-p{font-size:13.5px;color:rgba(255,255,255,.7);margin-bottom:24px;}
.sub-form{display:flex;gap:10px;max-width:420px;margin:0 auto;}
.sub-input{flex:1;padding:12px 15px;border-radius:10px;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:13.5px;outline:none;}
.sub-input::placeholder{color:rgba(255,255,255,.48);}
.sub-btn{padding:12px 18px;border-radius:10px;background:#fff;color:#059669;font-weight:700;font-size:13px;border:none;cursor:pointer;white-space:nowrap;transition:all .2s;}
.sub-btn:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);}
.sub-note{font-size:11px;color:rgba(255,255,255,.52);margin-top:9px;}
@media(max-width:460px){.sub-form{flex-direction:column;}}

/* LEAD WRAP */
.leadwrap{position:relative;z-index:2;}

/* RESPONSIVE */
@media(max-width:900px){
  .hrcgrid{grid-template-columns:repeat(3,1fr);}
  .orbital{max-width:300px;}
  .contact-stats{max-width:100%;}
}
@media(max-width:560px){
  .hero-ctas{flex-direction:column;align-items:flex-start;}
  .rgstat{grid-template-columns:repeat(3,1fr);}
}


/* Paste these into your <style> block */
@media(max-width:900px) {
  .zz-grid1 { grid-template-columns: 1fr; gap: 32px; }
  .zz-grid3 { grid-template-columns: 1fr; gap: 32px; }
}
@media(max-width:680px) {
  .statgrid { gap: 10px; }
}
@media(max-width:480px) {
  .trow { grid-template-columns: 96px 1fr 36px; }
  .rgstat { gap: 6px; }
  .rgstat-num { font-size: 16px; }
  .rgstat-lbl { font-size: 8px; }
}
@media(max-width:400px) {
  .contact-stats { grid-template-columns: 1fr 1fr; }
  .contact-stats .cstat:last-child { grid-column: span 2; }
}
@media(max-width:360px) {
  .hrcgrid { grid-template-columns: 1fr 1fr; }
  .hrcgrid .hrc:last-child { grid-column: span 2; }
  .barchart { height: 90px; gap: 3px; padding: 12px 12px 0; }
  .bar-lbl { font-size: 6.5px; }
  .zh1 { font-size: 24px; }
}
.serp-query { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── REAL MOBILE FIX ── */

/* 1. ALL grid children must be allowed to shrink */
.zz-grid1 > *, .zz-grid2 > *, .zz-grid3 > *, .zz-grid7 > * {
  min-width: 0;
}

/* 2. All visual panel components must not overflow their parent */
.zterm, .serp-outer, .barvis, .ai-panel, .wcvis, .rankgraph, .orbital {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 3. Hero grid collapses on mobile */
@media(max-width:900px) {
  .zz-grid1 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .zz-grid3 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 4. statgrid: 4 cols → 2 cols on mobile */
@media(max-width:680px) {
  .statgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* 5. Terminal rows: label column too wide on small screens */
@media(max-width:520px) {
  .trow {
    grid-template-columns: 100px 1fr 36px;
    gap: 8px;
  }
  .tlabel {
    font-size: 9.5px;
  }
  .tval {
    font-size: 10px;
  }
  .tbody {
    padding: 14px 12px;
  }
}

/* 6. SERP query text must not stretch container */
.serp-query {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 7. hrcgrid 3 columns too tight below 400px */
@media(max-width:400px) {
  .hrcgrid {
    grid-template-columns: 1fr 1fr;
  }
  .hrcgrid .hrc:last-child {
    grid-column: 1 / -1;
  }
}

/* 8. SVG graph: remove distortion on mobile */
.rg-svg {
  preserveAspectRatio: xMidYMid meet; /* set this on the element itself, see note below */
}

/* 9. wcrow children must not overflow */
.wcrow {
  overflow: hidden;
}
.wctxt {
  min-width: 0;
  word-break: break-word;
}

/* 10. contact-stats 3 cols → 2 cols on small screens */
@media(max-width:420px) {
  .contact-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-stats .cstat:last-child {
    grid-column: 1 / -1;
  }
}

