/* ============================================================
   HRL INFOTECHS — styles.css
   Colors: #02006e (navy) | #5aeb9d (mint) | #121212 (dark) | #ffffff
   Font: Poppins
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{--navy:#02006e;--mint:#5aeb9d;--dark:#121212;--white:#ffffff}
body{font-family:'Poppins',sans-serif;background:var(--dark);color:var(--white);overflow-x:hidden;min-height:100vh}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 48px;height:68px;background:rgba(18,18,18,0.95);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,0.07)}
.nav-left{display:flex;align-items:center;gap:36px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.nav-logo-icon{width:38px;height:38px;background:var(--navy);border-radius:9px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(90,235,157,0.35);flex-shrink:0}
.nav-logo-text{font-size:14px;font-weight:700;color:var(--white);letter-spacing:0.02em;white-space:nowrap}
.nav-logo-text span{color:var(--mint)}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links li{position:relative}
.nav-links a,.nav-links button.nav-item{font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:400;color:rgba(255,255,255,0.65);text-decoration:none;background:none;border:none;cursor:pointer;padding:8px 14px;border-radius:8px;display:flex;align-items:center;gap:5px;transition:color 0.18s,background 0.18s;white-space:nowrap}
.nav-links a:hover,.nav-links button.nav-item:hover{color:var(--white);background:rgba(255,255,255,0.06)}
.nav-links button.nav-item.open{color:var(--mint);background:rgba(90,235,157,0.07)}
.chevron{width:14px;height:14px;display:inline-block;transition:transform 0.22s}
.nav-links button.nav-item.open .chevron{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;right:auto;width:700px;background:#0d0d2b;border:1px solid rgba(90,235,157,0.15);border-radius:18px;padding:18px;display:none;gap:14px;z-index:300;box-shadow:0 24px 64px rgba(0,0,0,0.7)}
.dropdown.open{display:flex}
.dd-left{width:210px;flex-shrink:0;background:linear-gradient(145deg,var(--navy) 0%,#1a0a60 55%,#3a1080 100%);border:1px solid rgba(90,235,157,0.2);border-radius:14px;padding:20px 18px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.dd-left::before{content:'';position:absolute;top:-50px;right:-50px;width:180px;height:180px;background:radial-gradient(circle,rgba(90,235,157,0.12) 0%,transparent 70%);pointer-events:none}
.dd-left-header{display:flex;align-items:center;gap:8px}
.dd-left-header svg{width:20px;height:20px;flex-shrink:0}
.dd-left-title{font-size:15px;font-weight:700;color:var(--white)}
.dd-left-desc{font-size:11.5px;font-weight:300;color:rgba(255,255,255,0.55);line-height:1.6}
.dd-left-cards{display:flex;flex-direction:column;gap:7px}
.dd-mini-card{background:rgba(90,235,157,0.07);border:1px solid rgba(90,235,157,0.15);border-radius:10px;padding:10px 12px;cursor:pointer;transition:background 0.18s,border-color 0.18s}
.dd-mini-card:hover{background:rgba(90,235,157,0.15);border-color:rgba(90,235,157,0.4)}
.dd-mini-card-title{font-size:12px;font-weight:600;color:var(--mint);margin-bottom:2px}
.dd-mini-card-sub{font-size:10.5px;font-weight:300;color:rgba(255,255,255,0.5);line-height:1.4}
.dd-right{flex:1;display:flex;flex-direction:column;gap:12px}
.dd-right-header{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid rgba(90,235,157,0.1)}
.dd-right-header svg{width:18px;height:18px;flex-shrink:0}
.dd-section-title{font-size:13.5px;font-weight:600;color:var(--white)}
.dd-section-sub{font-size:11px;font-weight:300;color:rgba(255,255,255,0.4);margin-top:1px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.dd-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dd-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:12px 13px;cursor:pointer;transition:background 0.18s,border-color 0.18s;display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.dd-item:hover{background:rgba(90,235,157,0.08);border-color:rgba(90,235,157,0.3)}
.dd-item:hover .dd-item-name{color:var(--mint)}
.dd-item-name{font-size:12.5px;font-weight:600;color:var(--white);margin-bottom:3px;transition:color 0.18s}
.dd-item-sub{font-size:10.5px;font-weight:300;color:rgba(255,255,255,0.42);line-height:1.45}
.dd-item-arrow{color:rgba(255,255,255,0.2);font-size:13px;flex-shrink:0;margin-top:1px;transition:color 0.18s}
.nav-right{display:flex;align-items:center;gap:10px}
.btn-outline{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--white);background:transparent;border:1.5px solid rgba(255,255,255,0.5);cursor:pointer;padding:8px 18px;border-radius:50px;transition:all 0.2s;white-space:nowrap}
.btn-outline:hover{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.btn-solid{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--navy);background:var(--white);border:1.5px solid var(--white);cursor:pointer;padding:8px 18px;border-radius:50px;transition:all 0.2s;white-space:nowrap}
.btn-solid:hover{background:var(--mint);border-color:var(--mint);color:var(--navy)}
.dd-overlay{position:fixed;inset:0;z-index:150;display:none}
.dd-overlay.open{display:block}

/* ════════════════════════════════════════
   SECTION 1 — HERO
════════════════════════════════════════ */
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;position:relative;overflow:hidden;background:linear-gradient(175deg,#0d00b8 0%,#0a0096 18%,#07006e 38%,#040050 58%,#020030 78%,#121212 100%)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 90% 65% at 50% 5%,rgba(30,10,220,0.85) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 15% 55%,rgba(10,0,160,0.45) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 65%,rgba(90,235,157,0.08) 0%,transparent 55%),radial-gradient(ellipse 40% 30% at 50% 50%,rgba(40,20,200,0.3) 0%,transparent 60%)}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:160px;background:linear-gradient(to bottom,transparent,#121212);pointer-events:none;z-index:3}
.dot-grid{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,0.22) 1px,transparent 1px);background-size:26px 26px;pointer-events:none;z-index:2}
.hero-heading{font-size:clamp(36px,5.5vw,70px);font-weight:800;line-height:1.08;letter-spacing:-0.025em;margin-bottom:22px;position:relative;z-index:5;animation:fadeUp 0.6s 0.1s ease both}
.hero-heading .line1{color:var(--white);display:block;margin-bottom:8px}
.hero-heading .line2{display:flex;align-items:center;justify-content:center;gap:18px}
.static-text{color:var(--white)}
.ai-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:16px;padding:6px 18px 6px 8px;min-width:260px;height:60px;overflow:hidden}
.chip-inner{display:flex;align-items:center;gap:10px;animation-fill-mode:both}
.chip-icon{width:40px;height:40px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip-name{font-size:clamp(26px,3.6vw,48px);font-weight:800;color:var(--mint);letter-spacing:-0.02em;white-space:nowrap}
@keyframes sIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes sOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}
.entering{animation:sIn 0.38s ease forwards}
.leaving{animation:sOut 0.3s ease forwards}
.hero-sub{font-size:clamp(15px,1.7vw,17.5px);font-weight:300;color:rgba(255,255,255,0.6);max-width:580px;line-height:1.75;margin-bottom:32px;position:relative;z-index:5;animation:fadeUp 0.6s 0.18s ease both}
.hero-sub strong{color:rgba(255,255,255,0.9);font-weight:500}
.hero-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;position:relative;z-index:5;animation:fadeUp 0.6s 0.26s ease both}
.cta-primary{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--navy);background:var(--mint);border:2px solid var(--mint);cursor:pointer;padding:14px 34px;border-radius:50px;transition:transform 0.18s,box-shadow 0.18s,background 0.2s}
.cta-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(90,235,157,0.38);background:#72ffb4;border-color:#72ffb4}
.cta-secondary{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;color:var(--white);background:transparent;border:2px solid rgba(255,255,255,0.55);cursor:pointer;padding:14px 30px;border-radius:50px;transition:all 0.2s}
.cta-secondary:hover{background:var(--mint);border-color:var(--mint);color:var(--navy)}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   SECTION 2 — FEATURE SLIDER
════════════════════════════════════════ */
.features-section{padding:60px 0 80px;background:#ffffff;position:relative;overflow:hidden}
.features-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(2,0,110,0.12),transparent)}
.feat-header{text-align:center;margin-bottom:40px;padding:0 24px}
.feat-title{font-size:clamp(26px,3.8vw,48px);font-weight:800;line-height:1.12;letter-spacing:-0.025em;color:#0a0a1a;margin-bottom:12px}
.feat-title em{font-style:normal;color:var(--navy)}
.feat-sub{font-size:15px;font-weight:300;color:#6b7280;max-width:480px;margin:0 auto;line-height:1.7}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.slides-container{width:100%;max-width:100%;margin:0;padding:0;position:relative}
.slides-track{position:relative;width:100%}
.slide{display:none;width:100%;box-sizing:border-box}
.slide.active{display:block}
.slide-inner{max-width:1280px;margin:0 auto;padding:64px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;border-top:2px solid rgba(2,0,110,0.18);border-left:2px solid rgba(2,0,110,0.08);border-right:2px solid rgba(2,0,110,0.08);border-bottom:none;border-radius:28px 28px 0 0;background:linear-gradient(180deg,#f7f8ff 0%,#ffffff 60%,#f0f4ff 100%);box-shadow:0 0 60px rgba(2,0,110,0.05),inset 0 1px 0 rgba(2,0,110,0.08)}
.slide-inner::after{content:'';position:absolute;bottom:-2px;left:-2px;right:-2px;height:120px;background:linear-gradient(to bottom,transparent,rgba(240,244,255,0.6) 60%,rgba(235,240,255,0.9) 100%);border-radius:0 0 28px 28px;pointer-events:none}
.sl-text { /* intentionally blank */ }
.sl-step{font-size:11px;font-weight:700;letter-spacing:0.14em;color:rgba(2,0,110,0.5);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sl-step::before{content:'';width:28px;height:2px;background:rgba(2,0,110,0.3)}
.sl-title{font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.12;letter-spacing:-0.025em;color:#0a0a1a;margin-bottom:16px}
.sl-title span{color:var(--navy)}
.sl-desc{font-size:15.5px;font-weight:300;color:#4b5563;line-height:1.8;margin-bottom:28px;max-width:460px}
.sl-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px}
.sl-tag{font-size:12.5px;font-weight:500;background:#f0f4ff;border:1px solid rgba(2,0,110,0.12);color:#374151;padding:6px 15px;border-radius:50px;display:flex;align-items:center;gap:6px}
.sl-tag::before{content:'✓';color:var(--navy);font-size:10px;font-weight:800}
.sl-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);background:transparent;border:none;cursor:pointer;transition:gap 0.2s;font-family:'Poppins',sans-serif}
.sl-link:hover{gap:13px}
.sl-link svg{width:16px;height:16px}
.sl-visual{position:relative;padding-top:24px}
.v-card{background:#0d0d1f;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:28px;position:relative;overflow:hidden}
.v-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(90,235,157,0.3),transparent)}
.v-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.v-title{font-size:13px;font-weight:600;color:var(--white)}
.v-badge{font-size:10.5px;font-weight:600;color:var(--mint);background:rgba(90,235,157,0.1);border:1px solid rgba(90,235,157,0.2);padding:3px 10px;border-radius:50px}
.bar-row{display:flex;align-items:center;gap:14px;margin-bottom:11px}
.bar-lbl{font-size:11.5px;color:rgba(255,255,255,0.4);width:86px;flex-shrink:0;text-align:right}
.bar-lbl.you{color:var(--mint);font-weight:600}
.bar-bg{flex:1;height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden}
.bar-fg{height:100%;border-radius:4px;width:0;transition:width 1s cubic-bezier(0.22,1,0.36,1)}
.bar-fg.c1{background:linear-gradient(90deg,#5aeb9d,#3dd68c)}
.bar-fg.c2{background:linear-gradient(90deg,#5b8ef5,#89b4ff)}
.bar-fg.c3{background:linear-gradient(90deg,#5b8ef5,#89b4ff)}
.bar-fg.c4{background:linear-gradient(90deg,var(--mint),#02c870)}
.bar-pct{font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);width:30px;text-align:right}
.bar-pct.you{color:var(--mint)}
.plat-list{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.plat-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px}
.plat-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.plat-name{font-size:12px;font-weight:500;color:rgba(255,255,255,0.6);flex:1}
.plat-val{font-size:12.5px;font-weight:700;color:var(--white)}
.float-badge{position:absolute;top:-20px;right:20px;background:var(--white);border-radius:14px;padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,0.35);text-align:center;min-width:118px;z-index:5}
.fb-label{font-size:10px;font-weight:600;color:#666;margin-bottom:7px}
.fb-gauge{width:80px;height:44px;margin:0 auto 6px}
.fb-val{font-size:20px;font-weight:800;color:#111}
.fb-delta{font-size:11px;font-weight:700}
.fb-delta.pos{color:#16a34a}
.act-list{display:flex;flex-direction:column;gap:9px}
.act-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:11px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02)}
.act-item.done{border-color:rgba(90,235,157,0.15);background:rgba(90,235,157,0.03)}
.act-chk{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.act-chk.ok{background:var(--mint)}
.act-chk.pending{background:rgba(255,255,255,0.07);border:1.5px solid rgba(255,255,255,0.12)}
.act-chk svg{width:11px;height:11px}
.act-body{flex:1}
.act-name{font-size:12px;font-weight:600;color:var(--white);margin-bottom:2px}
.act-meta{font-size:10px;color:rgba(255,255,255,0.35)}
.act-pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:50px;white-space:nowrap;flex-shrink:0}
.pill-done{background:rgba(90,235,157,0.12);color:var(--mint);border:1px solid rgba(90,235,157,0.2)}
.pill-engaged{background:rgba(99,102,241,0.12);color:#a5b4fc;border:1px solid rgba(99,102,241,0.25)}
.pill-update{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);border:1px solid rgba(255,255,255,0.1)}
.flow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.flow-heading{font-size:13px;font-weight:600;color:var(--white)}
.flow-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--mint)}
.flow-dot-live{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 2s ease infinite}
.flow-nodes{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:24px}
.fnode{display:flex;flex-direction:column;align-items:center;gap:7px}
.fnode-box{width:48px;height:48px;border-radius:13px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);display:flex;align-items:center;justify-content:center;font-size:18px}
.fnode.on .fnode-box{background:rgba(2,0,110,0.5);border-color:rgba(90,235,157,0.3);box-shadow:0 0 16px rgba(90,235,157,0.12)}
.fnode-lbl{font-size:10px;font-weight:500;color:rgba(255,255,255,0.35)}
.fnode.on .fnode-lbl{color:rgba(90,235,157,0.7)}
.farrow{width:30px;height:1.5px;background:rgba(255,255,255,0.1);margin:0 4px;margin-bottom:18px;flex-shrink:0;position:relative}
.farrow::after{content:'›';position:absolute;right:-5px;top:-9px;color:rgba(255,255,255,0.2);font-size:13px}
.queue{display:flex;flex-direction:column;gap:8px}
.q-item{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.q-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.q-body{flex:1}
.q-name{font-size:11.5px;font-weight:600;color:var(--white);margin-bottom:2px}
.q-sub{font-size:10px;color:rgba(255,255,255,0.3)}
.q-status{font-size:10px;font-weight:600;padding:2px 9px;border-radius:50px;white-space:nowrap;flex-shrink:0}
.qs-run{background:rgba(99,102,241,0.15);color:#a5b4fc;border:1px solid rgba(99,102,241,0.25);animation:blink 2s ease infinite}
.qs-done{background:rgba(90,235,157,0.1);color:var(--mint);border:1px solid rgba(90,235,157,0.18)}
.qs-q{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.35);border:1px solid rgba(255,255,255,0.09)}
.timeline-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:32px;padding-bottom:16px}
.tdot{height:8px;border-radius:4px;background:rgba(2,0,110,0.15);cursor:pointer;border:none;padding:0;transition:background 0.25s,width 0.25s;width:8px;position:relative;overflow:hidden}
.tdot.active{width:36px;background:rgba(2,0,110,0.2)}
.tdot.active::after{content:'';position:absolute;left:0;top:0;bottom:0;background:var(--navy);border-radius:4px;width:var(--prog,0%)}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideFadeIn{from{opacity:0}to{opacity:1}}
.slide.active{animation:slideFadeIn 0.35s ease both}
.slide-in .sl-text{animation:fadeSlide 0.45s 0.05s ease both}
.slide-in .sl-visual{animation:fadeSlide 0.45s 0.12s ease both}

/* ════════════════════════════════════════
   SECTION 3 — SCROLL-CONTROLLED STICKY SHOWCASE
   Apple-style: section pins, scroll stepper transitions dashboards
════════════════════════════════════════ */

/* Outer scroll container — gives scroll room for 4 steps */
.platform-section {
  position: relative;
  background: var(--dark);
}
.platform-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.3), transparent);
}

/* The tall scroll-spacer that creates scroll distance */
.pf-scroll-space {
  height: calc(4 * 100vh); /* 4 panels */
  position: relative;
}

/* Section header — above the sticky area */
.platform-header {
  text-align: center;
  padding: 80px 24px 48px;
}
.platform-title {
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--white); margin-bottom: 14px;
}
.platform-title em { font-style: normal; color: var(--mint); }
.platform-sub {
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.4); line-height: 1.75;
  max-width: 520px; margin: 0 auto;
}

/* The sticky viewport */
.pf-sticky {
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 48px;
  align-items: center;
}

/* ── LEFT NAV ── */
.pf-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: visible;
}

/* CRITICAL: position:relative so pf-track and pf-fill anchor here */
.pf-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  /* Lock height to exactly 4 items × 150px — no reflow during transitions */
  height: 600px;
  flex-shrink: 0;
}

.pf-track {
  position: absolute;
  left: 0;
  width: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  /* height and top are set by JS via cacheFillHeights() */
  top: 0;
  height: 100%;
}

.pf-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  background: var(--mint);
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(90,235,157,0.55);
  height: 0;
  /* NO CSS transition — height is driven directly by scroll position for pixel-perfect tracking */
  z-index: 5;
}

.pf-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0 20px 28px;
  cursor: pointer;
  position: relative;
  /* FIXED HEIGHT: prevents dot positions from shifting when description expands/collapses */
  min-height: 150px;
  flex-shrink: 0;
}

.pf-dot {
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  background: var(--dark);
  transition: all 0.35s;
  z-index: 10;
}
.pf-item.active .pf-dot {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 0 4px rgba(90,235,157,0.18), 0 0 14px rgba(90,235,157,0.5);
}

/* Dots already scrolled past — solid green, no glow ring */
.pf-item.passed .pf-dot {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: none;
}

.pf-item-body { flex: 1; }

.pf-item-num {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  margin-bottom: 5px;
  transition: color 0.3s;
}
.pf-item.active .pf-item-num { color: rgba(90,235,157,0.7); }

.pf-item-name {
  font-size: 17px; font-weight: 700;
  color: rgba(255,255,255,0.22);
  line-height: 1.25;
  transition: color 0.3s;
}
.pf-item.active .pf-item-name { color: var(--white); }

.pf-item-desc {
  font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,0);
  line-height: 1.65;
  max-height: 0; overflow: hidden;
  transition: color 0.35s, max-height 0.35s ease, margin-top 0.3s;
}
.pf-item.active .pf-item-desc {
  color: rgba(255,255,255,0.42);
  max-height: 120px;
  margin-top: 8px;
}

/* ── RIGHT: Dashboard panel area ── */
.pf-panels {
  position: relative;
  /* Same height as pf-sticky so it never reflows */
  height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  overflow: hidden; /* clip cards inside bounds */
  /* Explicitly contain all children — prevents any size bleed */
  contain: strict;
}

/* Each panel absolutely stacked, one visible at a time.
   All panels occupy identical space → zero layout impact on left nav */
.pf-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0 32px 48px;
  opacity: 0;
  transform: translateY(28px) scale(0.975);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  /* Prevent any size change from bleeding out */
  will-change: transform, opacity;
}
.pf-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pf-panel.exit {
  opacity: 0;
  transform: translateY(-24px) scale(0.975);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.pf-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;  /* Size of the outer circle */
  height: 24px;
  border: 1.5px solid var(--mint);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); /* Start hidden/shrunk */
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
  pointer-events: none;
}

/* Show the circle when the parent item is active */
.pf-item.active .pf-dot::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Optional: Make the inner dot glow more when active */
.pf-item.active .pf-dot {
  background: var(--mint) !important;
  box-shadow: 0 0 15px var(--mint);
}

/* Dashboard mockup card */
.dash-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 24px 60px rgba(0,0,0,0.18);
}

/* Card top bar — browser-like chrome */
.dash-chrome {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
}
.dash-chrome-dots {
  display: flex; gap: 6px;
}
.dash-chrome-dots span {
  width: 10px; height: 10px; border-radius: 50%;
}
.dash-chrome-dots span:nth-child(1) { background: #ff5f57; }
.dash-chrome-dots span:nth-child(2) { background: #febc2e; }
.dash-chrome-dots span:nth-child(3) { background: #28c840; }
.dash-chrome-bar {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px; color: #9ca3af;
  display: flex; align-items: center; gap: 6px;
}
.dash-chrome-bar svg { opacity: 0.4; flex-shrink: 0; }
.dash-badge-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--mint);
  background: rgba(90,235,157,0.1);
  border: 1px solid rgba(90,235,157,0.25);
  border-radius: 50px; padding: 3px 10px;
}
.dash-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint); animation: blink 2s ease infinite;
}

/* Card body padding */
.dash-body {
  padding: 22px 22px 26px;
}

/* ─── CARD 1: Content Engine ─── */
.ce-toolbar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 18px;
}
.ce-tool-tab {
  font-size: 11.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.ce-tool-tab.on {
  background: rgba(90,235,157,0.1);
  border-color: rgba(90,235,157,0.3);
  color: var(--mint);
}
.ce-prompt-box {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.ce-prompt-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(90,235,157,0.5);
  margin-bottom: 8px;
}
.ce-prompt-text {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7);
  margin-bottom: 12px; line-height: 1.5;
}
.ce-prompt-footer {
  display: flex; align-items: center; justify-content: space-between;
}
.ce-prompt-meta { font-size: 11px; color: rgba(255,255,255,0.3); }
.ce-gen-btn {
  font-size: 11px; font-weight: 700;
  padding: 7px 16px; border-radius: 8px;
  background: var(--mint); color: var(--navy);
  border: none; cursor: pointer;
}
.ce-output {
  background: rgba(2,0,110,0.12);
  border: 1px solid rgba(90,235,157,0.1);
  border-radius: 12px; padding: 18px;
  margin-bottom: 16px;
}
.ce-out-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.ce-out-title { font-size: 12.5px; font-weight: 700; color: var(--white); }
.ce-out-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 9px; border-radius: 50px;
  background: rgba(90,235,157,0.1); border: 1px solid rgba(90,235,157,0.2);
  color: var(--mint);
}
.ce-lines { display: flex; flex-direction: column; gap: 8px; }
.ce-line {
  height: 9px; border-radius: 5px;
  background: rgba(255,255,255,0.06); position: relative; overflow: hidden;
}
.dash-card.in-view .ce-line::after {
  content: '';
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, rgba(90,235,157,0.4), rgba(90,235,157,0.15));
  border-radius: 5px;
  animation: grow-line 1.6s ease forwards;
}
@keyframes grow-line { from{width:0} to{width:var(--w)} }
.ce-line:nth-child(1)::after{--w:92%;animation-delay:0.1s}
.ce-line:nth-child(2)::after{--w:78%;animation-delay:0.25s}
.ce-line:nth-child(3)::after{--w:88%;animation-delay:0.4s}
.ce-line:nth-child(4)::after{--w:62%;animation-delay:0.55s}
.ce-line:nth-child(5)::after{--w:74%;animation-delay:0.7s}
.ce-kpi-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
}
.ce-kpi {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 12px; text-align: center;
}
.ce-kpi-val { font-size: 20px; font-weight: 800; color: var(--mint); margin-bottom: 3px; }
.ce-kpi-lbl { font-size: 10px; color: rgba(255,255,255,0.3); }

/* ─── CARD 2: Keyword Tracker ─── */
.kw-stats-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px;
}
.kw-stat {
  background: rgba(2,0,110,0.2);
  border: 1px solid rgba(90,235,157,0.1);
  border-radius: 10px; padding: 12px 14px;
}
.kw-stat-val { font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 2px; }
.kw-stat-lbl { font-size: 10px; color: rgba(255,255,255,0.35); }
.kw-stat-delta { font-size: 10px; font-weight: 700; color: var(--mint); margin-top: 2px; }
.kw-search-bar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.kw-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px; padding: 9px 14px;
  font-size: 12px; color: rgba(255,255,255,0.5);
  display: flex; align-items: center; gap: 8px;
}
.kw-input svg { opacity: 0.3; flex-shrink: 0; }
.kw-btn {
  font-size: 11px; font-weight: 600;
  padding: 9px 14px; border-radius: 9px;
  background: rgba(90,235,157,0.08);
  border: 1px solid rgba(90,235,157,0.2);
  color: var(--mint); cursor: pointer;
}
.kw-table { display: flex; flex-direction: column; gap: 5px; }
.kw-head {
  display: grid;
  grid-template-columns: 1fr 58px 38px 32px 52px;
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kw-h { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.2); }
.kw-row {
  display: grid;
  grid-template-columns: 1fr 58px 38px 32px 52px;
  align-items: center;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  gap: 4px;
}
.kw-row.top { background: rgba(90,235,157,0.05); border-color: rgba(90,235,157,0.12); }
.kw-kwd { font-size: 12px; font-weight: 600; color: var(--white); }
.kw-vol { font-size: 11px; color: rgba(255,255,255,0.35); text-align: right; }
.kw-kd { font-size: 11px; font-weight: 700; text-align: center; }
.kw-kd.e { color: var(--mint); }
.kw-kd.m { color: #fbbf24; }
.kw-kd.h { color: #f87171; }
.kw-pos { font-size: 11px; font-weight: 700; color: var(--white); text-align: right; }
.kw-spark { height: 22px; }

/* ─── CARD 3: Guest Blogger ─── */
.gb-agent-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 16px;
  background: rgba(2,0,110,0.25);
  border: 1px solid rgba(90,235,157,0.2);
  border-radius: 12px;
}
.gb-ava {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), #6b21a8);
  border: 2px solid rgba(90,235,157,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.gb-agent-name { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 3px; }
.gb-agent-role { font-size: 11px; color: rgba(90,235,157,0.65); }
.gb-pub-to { margin-left: auto; text-align: right; }
.gb-pub-label { font-size: 10px; color: rgba(255,255,255,0.3); margin-bottom: 2px; }
.gb-pub-site { font-size: 12px; font-weight: 700; color: var(--white); }

.gb-site-chips {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px;
}
.gb-chip {
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 50px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.45);
}
.gb-chip.on {
  background: rgba(90,235,157,0.1); border-color: rgba(90,235,157,0.3);
  color: var(--mint);
}

.gb-pitch-list { display: flex; flex-direction: column; gap: 8px; }
.gb-pitch {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
}
.gb-pitch.accepted { border-color: rgba(90,235,157,0.2); background: rgba(90,235,157,0.04); }
.gb-pitch-ico { font-size: 18px; flex-shrink: 0; }
.gb-pitch-body { flex: 1; }
.gb-pitch-title { font-size: 12px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.gb-pitch-meta { font-size: 10.5px; color: rgba(255,255,255,0.3); }
.gb-pitch-pill {
  font-size: 10px; font-weight: 600;
  padding: 3px 10px; border-radius: 50px; white-space: nowrap;
}
.gb-pitch-pill.acc { background: rgba(90,235,157,0.12); border: 1px solid rgba(90,235,157,0.2); color: var(--mint); }
.gb-pitch-pill.rev { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); color: #fbbf24; }
.gb-pitch-pill.pend { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); }
.gb-pitch-da { font-size: 10.5px; color: rgba(255,255,255,0.3); margin-left: 8px; }
.gb-pitch-da strong { color: var(--white); font-weight: 700; }

/* ─── CARD 4: Social Buddy ─── */
.sb-plat-row {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.sb-plat-btn {
  flex: 1; padding: 10px 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.2s;
}
.sb-plat-btn.on {
  background: rgba(90,235,157,0.08); border-color: rgba(90,235,157,0.25);
}
.sb-plat-ico { font-size: 18px; margin-bottom: 4px; }
.sb-plat-nm { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.35); }
.sb-plat-btn.on .sb-plat-nm { color: var(--mint); }

.sb-compose {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 15px 16px; margin-bottom: 14px;
}
.sb-compose-hdr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
}
.sb-compose-ava {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg,var(--navy),rgba(90,235,157,0.2));
  border: 1.5px solid rgba(90,235,157,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink:0;
}
.sb-compose-name { font-size: 12px; font-weight: 700; color: var(--white); }
.sb-compose-handle { font-size: 10px; color: rgba(255,255,255,0.25); }
.sb-compose-sched { margin-left: auto; font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.3); }
.sb-compose-text {
  font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,0.65);
  line-height: 1.6; margin-bottom: 10px;
}
.sb-compose-text strong { color: var(--mint); font-weight: 600; }
.sb-compose-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-ht { font-size: 11px; color: rgba(99,102,241,0.75); }

.sb-kpi-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
}
.sb-kpi {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 9px; padding: 10px 12px; text-align: center;
}
.sb-kpi-val { font-size: 16px; font-weight: 800; color: var(--white); margin-bottom: 2px; }
.sb-kpi-lbl { font-size: 9.5px; color: rgba(255,255,255,0.3); }
.sb-kpi-delta { font-size: 9.5px; font-weight: 700; color: var(--mint); }

/* ════════════════════════════════════════
   WHITE-THEME DASHBOARD CARDS (Section 3)
════════════════════════════════════════ */
.dash-card.wt {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,0.18), 0 1px 0 rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}

/* Chrome bar */
.wt-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
}
.wt-chrome-bar {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px; color: #9ca3af;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif;
}
.wt-badge-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--navy);
  background: rgba(2,0,110,0.07);
  border: 1px solid rgba(2,0,110,0.15);
  border-radius: 50px; padding: 3px 10px;
  white-space: nowrap;
}
.wt-badge-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint); animation: blink 2s ease infinite;
}

/* Body */
.wt-body { padding: 20px 22px 24px; }

/* ── Card 1: Content Engine ── */
.wt-toolbar { display: flex; gap: 7px; margin-bottom: 16px; }
.wt-tab {
  font-size: 11.5px; font-weight: 600; padding: 6px 14px;
  border-radius: 8px; cursor: pointer; color: #6b7280;
  background: #f9fafb; border: 1px solid #e5e7eb;
}
.wt-tab.on {
  background: var(--navy); color: #ffffff; border-color: var(--navy);
}
.wt-prompt-box {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.wt-prompt-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mint);
  background: rgba(2,0,110,0.06); display: inline-block;
  padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.wt-prompt-text {
  font-size: 13px; font-weight: 500; color: #111827;
  margin-bottom: 12px; line-height: 1.5;
}
.wt-prompt-footer { display: flex; align-items: center; justify-content: space-between; }
.wt-prompt-meta { font-size: 11px; color: #9ca3af; }
.wt-gen-btn {
  font-size: 11.5px; font-weight: 700; padding: 7px 18px;
  border-radius: 8px; background: var(--mint); color: var(--navy);
  border: none; cursor: pointer;
}
.wt-output {
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 12px; padding: 16px; margin-bottom: 14px;
}
.wt-out-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wt-out-title { font-size: 12.5px; font-weight: 700; color: #111827; }
.wt-out-badge {
  font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 50px;
  background: rgba(2,0,110,0.08); border: 1px solid rgba(2,0,110,0.15); color: var(--navy);
}
.wt-lines { display: flex; flex-direction: column; gap: 7px; }
.wt-line {
  height: 9px; border-radius: 5px; background: #d1fae5;
  position: relative; overflow: hidden;
}
.wt-line::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%;
  width: var(--w, 80%);
  background: linear-gradient(90deg, var(--navy), #3b0fd4);
  border-radius: 5px;
  animation: wt-grow 1.4s cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}
.wt-line:nth-child(1){--i:0}.wt-line:nth-child(2){--i:1}.wt-line:nth-child(3){--i:2}.wt-line:nth-child(4){--i:3}.wt-line:nth-child(5){--i:4}
@keyframes wt-grow { from{width:0} to{width:var(--w)} }
.wt-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.wt-kpi {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 12px; text-align: center;
}
.wt-kpi-val { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 3px; }
.wt-kpi-lbl { font-size: 10px; color: #9ca3af; }

/* ── Card 2: Keyword Tracker ── */
.wt-kw-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.wt-kw-stat {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 10px; padding: 12px 14px;
}
.wt-kw-val { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 2px; }
.wt-kw-lbl { font-size: 10px; color: #6b7280; }
.wt-kw-delta { font-size: 10px; font-weight: 700; color: #16a34a; margin-top: 2px; }
.wt-search-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.wt-input {
  flex: 1; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 8px; padding: 8px 13px;
  font-size: 11.5px; color: #9ca3af;
  display: flex; align-items: center; gap: 7px;
}
.wt-filter-btn {
  font-size: 11px; font-weight: 600; padding: 8px 14px;
  border-radius: 8px; background: var(--navy); color: #fff;
  border: none; cursor: pointer;
}
.wt-table { display: flex; flex-direction: column; gap: 4px; }
.wt-thead {
  display: grid; grid-template-columns: 1fr 56px 38px 32px 50px;
  padding: 0 10px 7px; border-bottom: 1px solid #e5e7eb;
}
.wt-th { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; }
.wt-th.right { text-align: right; }
.wt-th.center { text-align: center; }
.wt-tr {
  display: grid; grid-template-columns: 1fr 56px 38px 32px 50px;
  align-items: center; padding: 8px 10px; border-radius: 8px;
  background: #f9fafb; border: 1px solid #f3f4f6; gap: 4px;
}
.wt-tr.hi { background: #eff6ff; border-color: #bfdbfe; }
.wt-td { font-size: 11.5px; color: #374151; }
.wt-td.kw { font-weight: 600; color: #111827; }
.wt-td.right { text-align: right; color: #6b7280; }
.wt-td.center { text-align: center; }
.wt-td.pos { font-weight: 700; color: var(--navy); }
.kd-e { font-size: 11px; font-weight: 700; color: #16a34a; background: #dcfce7; padding: 1px 7px; border-radius: 4px; }
.kd-m { font-size: 11px; font-weight: 700; color: #d97706; background: #fef3c7; padding: 1px 7px; border-radius: 4px; }
.kd-h { font-size: 11px; font-weight: 700; color: #dc2626; background: #fee2e2; padding: 1px 7px; border-radius: 4px; }
.wt-spark { height: 22px; }

/* ── Card 3: Guest Blogger ── */
.wt-gb-agent {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 14px;
  background: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 12px;
}
.wt-gb-ava {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wt-gb-name { font-size: 12.5px; font-weight: 700; color: #111827; margin-bottom: 2px; }
.wt-gb-role { font-size: 10.5px; color: var(--navy); font-weight: 500; }
.wt-gb-pub { margin-left: auto; text-align: right; }
.wt-gb-pub-lbl { font-size: 9.5px; color: #9ca3af; margin-bottom: 2px; }
.wt-gb-pub-site { font-size: 12px; font-weight: 700; color: #111827; }
.wt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.wt-chip {
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 50px;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280;
}
.wt-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.wt-pitch-list { display: flex; flex-direction: column; gap: 8px; }
.wt-pitch {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 10px;
}
.wt-pitch.accepted { background: #f0fdf4; border-color: #bbf7d0; }
.wt-pitch-ico { font-size: 16px; flex-shrink: 0; }
.wt-pitch-body { flex: 1; }
.wt-pitch-title { font-size: 11.5px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.wt-pitch-meta { font-size: 10px; color: #9ca3af; }
.wt-pill { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 50px; white-space: nowrap; }
.wt-pill.acc { background: #dcfce7; border: 1px solid #bbf7d0; color: #16a34a; }
.wt-pill.rev { background: #fef3c7; border: 1px solid #fde68a; color: #d97706; }
.wt-pill.pend { background: #f3f4f6; border: 1px solid #e5e7eb; color: #9ca3af; }
.wt-da { font-size: 10.5px; color: #9ca3af; margin-left: 6px; }
.wt-da strong { color: #374151; font-weight: 700; }

/* ── Card 4: Social Buddy ── */
.wt-plat-row { display: flex; gap: 8px; margin-bottom: 14px; }
.wt-plat {
  flex: 1; padding: 9px 6px; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 9px;
  text-align: center; cursor: pointer;
}
.wt-plat.on { background: #eff6ff; border-color: #bfdbfe; }
.wt-plat-ico { font-size: 17px; margin-bottom: 3px; color: #374151; }
.wt-plat.on .wt-plat-ico { color: var(--navy); }
.wt-plat-nm { font-size: 9.5px; font-weight: 600; color: #9ca3af; }
.wt-plat.on .wt-plat-nm { color: var(--navy); }
.wt-compose {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 11px; padding: 14px 15px; margin-bottom: 13px;
}
.wt-compose-hdr { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.wt-compose-ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); display: flex; align-items: center;
  justify-content: center; font-size: 12px; flex-shrink: 0;
}
.wt-compose-name { font-size: 11.5px; font-weight: 700; color: #111827; }
.wt-compose-handle { font-size: 10px; color: #9ca3af; }
.wt-compose-sched { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--navy); background: rgba(2,0,110,0.06); padding: 3px 10px; border-radius: 50px; }
.wt-compose-text { font-size: 12px; color: #374151; line-height: 1.6; margin-bottom: 9px; }
.wt-compose-text strong { color: var(--navy); font-weight: 700; }
.wt-compose-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wt-ht { font-size: 11px; color: #2563eb; font-weight: 500; }
.wt-kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.wt-kpi-card {
  background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 9px; padding: 10px; text-align: center;
}
.wt-kpi-card-val { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 2px; }
.wt-kpi-card-lbl { font-size: 9px; color: #9ca3af; }
.wt-kpi-card-delta { font-size: 9.5px; font-weight: 700; color: #16a34a; }

/* ════════════════════════════════════════
   SECTION 4 — STATS
════════════════════════════════════════ */
.stats-section {
  background: var(--dark);
  padding: 100px 24px 110px;
  position: relative;
}
.stats-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.stats-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.stats-heading {
  margin-bottom: 64px;
}
.stats-heading h2 {
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.s4-mint { color: var(--mint); }
.s4-white { color: var(--white); }
.stats-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.stat-item {
  flex: 1;
  padding: 0 48px;
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { padding-right: 0; }
.stat-divider {
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(90,235,157,0.6) 30%, rgba(90,235,157,0.9) 50%, rgba(90,235,157,0.6) 70%, transparent);
  box-shadow: 0 0 12px rgba(90,235,157,0.25);
  flex-shrink: 0;
  align-self: center;
}
.stat-num {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  margin-bottom: 10px;
}
.stat-desc {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  line-height: 1.65;
  max-width: 240px;
}

/* ════════════════════════════════════════
   SECTION 5 — SEO STRATEGIES
════════════════════════════════════════ */
.seo-section {
  background: var(--dark);
  padding: 100px 24px 110px;
  position: relative;
  overflow: hidden;
}
.seo-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.3), transparent);
}
.seo-section::after {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(2,0,110,0.25) 0%, transparent 65%);
  pointer-events: none;
}
.seo-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }

.seo-header { text-align: center; margin-bottom: 64px; }
.seo-title {
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--white);
  margin-bottom: 18px;
}
.seo-mint { color: var(--mint); }
.seo-sub {
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.75;
  max-width: 620px; margin: 0 auto 28px;
}
.seo-cta {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--navy); background: var(--mint);
  border: none; cursor: pointer;
  padding: 13px 30px; border-radius: 50px;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
  letter-spacing: 0.01em;
}
.seo-cta:hover { background: #72ffb4; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(90,235,157,0.3); }

/* Cards grid */
.seo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.seo-card {
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  position: relative;
}

/* Card 1 — Vivid Navy-to-Purple gradient */
.seo-card:nth-child(1) {
  background: linear-gradient(145deg, #02006e 0%, #1a0080 40%, #2d0a9f 70%, #3d1abf 100%);
  border: 1px solid rgba(90,235,157,0.3);
  box-shadow: 0 4px 40px rgba(2,0,110,0.5), 0 0 60px rgba(90,235,157,0.06), inset 0 1px 0 rgba(90,235,157,0.15);
}
.seo-card:nth-child(1):hover {
  border-color: rgba(90,235,157,0.55);
  box-shadow: 0 12px 56px rgba(2,0,110,0.6), 0 0 80px rgba(90,235,157,0.12);
  transform: translateY(-4px);
}

/* Card 2 — Deep teal / midnight blue */
.seo-card:nth-child(2) {
  background: linear-gradient(145deg, #060630 0%, #0d0d50 40%, #0a1060 70%, #081c7a 100%);
  border: 1px solid rgba(90,235,157,0.2);
  box-shadow: 0 4px 40px rgba(0,0,40,0.6), 0 0 50px rgba(90,235,157,0.04), inset 0 1px 0 rgba(255,255,255,0.06);
}
.seo-card:nth-child(2):hover {
  border-color: rgba(90,235,157,0.4);
  box-shadow: 0 12px 56px rgba(0,0,60,0.7), 0 0 60px rgba(90,235,157,0.1);
  transform: translateY(-4px);
}

/* Card 3 — Rich dark charcoal with mint accent */
.seo-card:nth-child(3) {
  background: linear-gradient(145deg, #0f0f1a 0%, #131325 40%, #0a0a20 70%, #050518 100%);
  border: 1px solid rgba(90,235,157,0.25);
  box-shadow: 0 4px 40px rgba(0,0,0,0.65), 0 0 50px rgba(90,235,157,0.05), inset 0 1px 0 rgba(90,235,157,0.1);
}
.seo-card:nth-child(3):hover {
  border-color: rgba(90,235,157,0.5);
  box-shadow: 0 12px 56px rgba(0,0,0,0.75), 0 0 70px rgba(90,235,157,0.12);
  transform: translateY(-4px);
}

/* Top glow accent on all cards */
.seo-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.7), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Radial glow in top-right of each card */
.seo-card::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(90,235,157,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.seo-card-text { padding: 32px 28px 22px; position: relative; z-index: 3; }
.seo-card-title {
  font-size: 17px; font-weight: 700;
  color: var(--white); line-height: 1.3;
  margin-bottom: 12px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.seo-card-desc {
  font-size: 13.5px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.75;
}

/* ── Visual 1: Content Editor ── */
.seo-card-visual { flex: 1; overflow: hidden; position: relative; z-index: 3; }
.seo-card-visual.v1 {
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(90,235,157,0.2);
  padding: 16px 18px 0;
}
.sv1-bar { display: flex; gap: 6px; margin-bottom: 12px; }
.sv1-tab {
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35); cursor: pointer;
}
.sv1-tab.on { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: var(--white); }
.sv1-tab.accent { background: rgba(2,0,110,0.5); border-color: rgba(90,235,157,0.3); color: var(--mint); }
.sv1-new { font-size: 9px; background: var(--mint); color: var(--navy); padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.sv1-doc {
  background: rgba(255,255,255,0.04); border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
  padding: 18px 18px 22px;
}
.sv1-doc-title {
  font-size: 12px; font-weight: 700; color: var(--white);
  margin-bottom: 12px; line-height: 1.4;
}
.sv1-doc-line {
  height: 7px; border-radius: 4px;
  background: rgba(255,255,255,0.1);
  width: var(--w, 80%);
  margin-bottom: 7px;
}
.sv1-doc-highlight {
  background: rgba(90,235,157,0.08); border-left: 3px solid var(--mint);
  border-radius: 4px; padding: 8px 10px;
  margin: 10px 0;
}
.sv1-hl-line {
  height: 7px; border-radius: 4px;
  background: rgba(90,235,157,0.25);
  width: var(--w, 80%);
  margin-bottom: 6px;
}
.sv1-hl-line:last-child { margin-bottom: 0; }

/* ── Visual 2: Content Strategy ── */
.seo-card-visual.v2 {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(90,235,157,0.2);
  padding: 16px 18px;
}
.sv2-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.sv2-t {
  font-size: 10.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35); cursor: pointer;
}
.sv2-t.on { background: rgba(2,0,110,0.5); border-color: rgba(90,235,157,0.3); color: var(--mint); }
.sv2-count { font-size: 10.5px; color: rgba(255,255,255,0.3); margin-bottom: 8px; }
.sv2-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sv2-f {
  font-size: 10.5px; font-weight: 600;
  padding: 4px 11px; border-radius: 6px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.35); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
.sv2-f.on { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: var(--white); }
.sv2-n {
  font-size: 10px; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4);
  padding: 1px 6px; border-radius: 4px;
}
.sv2-n.ac { background: rgba(90,235,157,0.15); color: var(--mint); }
.sv2-table { background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.sv2-thead {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  padding: 8px 12px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sv2-th { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.06em; }
.sv2-row {
  display: grid; grid-template-columns: 1fr 1fr 80px;
  padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
}
.sv2-row:last-child { border-bottom: none; }
.sv2-td { font-size: 11px; color: rgba(255,255,255,0.5); }
.sv2-td.kw { font-weight: 600; color: rgba(255,255,255,0.8); }
.sv2-diff {
  font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 4px;
}
.sv2-diff.mid { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* ── Visual 3: Technical SEO ── */
.seo-card-visual.v3 {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(90,235,157,0.2);
  padding: 16px 18px;
}
.sv3-searchbar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px 12px;
  margin-bottom: 12px;
}
.sv3-searchbar span { font-size: 11.5px; color: rgba(255,255,255,0.25); flex: 1; }
.sv3-ai-btn {
  font-size: 10.5px; font-weight: 700;
  padding: 5px 12px; border-radius: 6px;
  background: rgba(2,0,110,0.7); color: var(--mint);
  border: 1px solid rgba(90,235,157,0.3); cursor: pointer; white-space: nowrap;
}
.sv3-table { background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.sv3-thead {
  display: grid; grid-template-columns: 1fr 40px 110px;
  padding: 7px 12px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sv3-th { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.05em; }
.sv3-th.wide { font-size: 10.5px; }
.sv3-row {
  display: grid; grid-template-columns: 1fr 40px 110px;
  padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: center;
}
.sv3-row:last-child { border-bottom: none; }
.sv3-td { font-size: 10.5px; color: rgba(255,255,255,0.45); }
.sv3-td.url {
  font-size: 10px; color: rgba(90,235,157,0.6);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.sv3-miss {
  font-size: 10.5px; font-weight: 600;
  color: #f87171; background: rgba(239,68,68,0.12);
  padding: 2px 8px; border-radius: 4px;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .seo-section {
    padding: 80px 20px 100px;
  }
  .seo-header {
    margin-bottom: 48px;
  }
  .seo-title {
    font-size: clamp(24px, 5vw, 36px);
  }
  .seo-sub {
    font-size: 14px;
  }
  .seo-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .seo-card {
    flex-direction: column;
    height: auto;
    min-height: 400px;
  }
  .seo-card-text {
    padding: 24px 20px 20px;
  }
  .seo-card-title {
    font-size: 18px;
  }
  .seo-card-desc {
    font-size: 14px;
  }
  .seo-card-visual {
    height: 200px;
  }
  .seo-card-visual.v1 .sv1-doc {
    padding: 12px;
  }
  .seo-card-visual.v2 .sv2-table {
    font-size: 12px;
  }
  .seo-card-visual.v3 .sv3-table {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .seo-section {
    padding: 60px 16px 80px;
  }
  .seo-header {
    margin-bottom: 32px;
  }
  .seo-title {
    font-size: clamp(20px, 6vw, 28px);
  }
  .seo-sub {
    font-size: 13px;
  }
  .seo-card {
    min-height: 350px;
  }
  .seo-card-text {
    padding: 20px 16px 16px;
  }
  .seo-card-title {
    font-size: 16px;
  }
  .seo-card-desc {
    font-size: 13px;
  }
  .seo-card-visual {
    height: 180px;
  }
}

/* ════════════════════════════════════════
   SECTION 6 — RESULTS SLIDER
   Left text + right laptop mockup, one slide at a time
   Wheel-driven JS handles slide transitions
════════════════════════════════════════ */
.results-section {
  background: rgba(255,255,255,0.03);
  padding: 80px 0 60px;
  position: relative;
  overflow: visible; /* never clip content */
}
.results-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #5AEB9D, transparent);
}

/* Header */
.rs-header {
  text-align: left;
  max-width: 1200px;
  color: rgb(255, 255, 255);
  margin: 0 auto 40px;
  padding: 0 80px;
}
.rs-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #5AEB9D; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.rs-eyebrow::before { content:''; width:28px; height:2px; background:rgba(255, 255, 255, 0.3); }
.rs-title {
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em; color: #ffffff;
  margin-bottom: 14px;
}
.rs-title em { font-style: normal; color: #5AEB9D; }
.rs-sub {
  font-size: 15px; font-weight: 300;
  color: #5AEB9D; line-height: 1.75;
  max-width: 560px;
}

/* Slides wrapper */
.rs-slides-container { width: 100%; position: relative; }
.rs-slide { display: none; width: 100%; box-sizing: border-box; }
.rs-slide.active { display: block; animation: rsFadeIn 0.4s ease both; }
@keyframes rsFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Each slide inner layout — no min-height, no align-items:end so nothing gets cut */
.rs-slide-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 80px 40px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  align-items: center; /* centre-aligned so both sides are always visible */
}

/* Text side */
.rs-text { padding: 0; }
.rs-slide.active .rs-text  { animation: rsFadeSlide 0.45s 0.05s ease both; }
.rs-slide.active .rs-visual { animation: rsFadeSlide 0.45s 0.12s ease both; }
@keyframes rsFadeSlide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.rs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: #374151;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  border-radius: 50px; padding: 5px 14px; margin-bottom: 22px;
}
.rs-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }

.rs-slide-title {
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 800; line-height: 1.18;
  letter-spacing: -0.022em; color: #ffffff;
  margin-bottom: 14px;
}
.rs-slide-title em { font-style: normal; color: #5AEB9D; }
.rs-slide-desc {
  font-size: 15px; font-weight: 300;
  color: #929694; line-height: 1.8;
  margin-bottom: 28px; max-width: 420px;
}
.rs-slide-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
  color: #5AEB9D; background: transparent;
  border: none; cursor: pointer; transition: gap 0.2s;
  font-family: 'Poppins', sans-serif;
}
.rs-slide-link:hover { gap: 14px; }
.rs-slide-link svg { width: 16px; height: 16px; }

/* Visual / laptop side */
.rs-visual {
  position: relative;
}

/* Laptop frame */
.rs-laptop {
  position: relative;
  width: 100%;
}
.rs-laptop-screen {
  background: #1a1a2e;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 8px solid #1a1a2e;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.2),
    0 -24px 80px rgba(0,0,0,0.15),
    0 8px 40px rgba(0,0,0,0.12);
}
.rs-laptop-base {
  height: 18px;
  background: linear-gradient(to bottom, #2d2d3e, #9ca3af);
  border-radius: 0 0 4px 4px;
  margin: 0 -12px;
  position: relative;
}


/* Screen chrome */
.rs-screen-chrome {
  background: #f1f5f9;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.rs-screen-dots { display: flex; gap: 5px; }
.rs-screen-dots span { width: 8px; height: 8px; border-radius: 50%; }
.rs-screen-dots span:nth-child(1) { background: #ff5f57; }
.rs-screen-dots span:nth-child(2) { background: #febc2e; }
.rs-screen-dots span:nth-child(3) { background: #28c840; }
.rs-screen-url {
  flex: 1; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 4px 10px;
  font-size: 10px; color: #9ca3af;
  display: flex; align-items: center; gap: 5px;
}

/* Screen content — shared app shell */
.rs-app-shell {
  background: #fff;
  display: grid;
  grid-template-columns: 44px 1fr;
  min-height: 380px;
}
.rs-app-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column;
  align-items: center; padding: 12px 0; gap: 10px;
}
.rs-sidebar-ico {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #9ca3af;
}
.rs-sidebar-ico.on { background: #f0f4ff; color: var(--navy); }
.rs-app-content { overflow: hidden; }

/* ── Slide 1 content: Brand Kit ── */
.rs-bk-app {}
.rs-bk-topbar {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 6px;
}
.rs-bk-toptab {
  font-size: 10px; font-weight: 600; color: #9ca3af;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.rs-bk-toptab.on { background: #f0f4ff; color: var(--navy); }
.rs-bk-body { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rs-bk-col-hdr { font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.rs-bk-row { margin-bottom: 12px; }
.rs-bk-row-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 6px; }
.rs-bk-row-val { font-size: 10.5px; color: #374151; line-height: 1.5; }
.rs-bk-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.rs-bk-pill {
  font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 50px;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151;
}
.rs-bk-pill.blue { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.rs-bk-pill.green { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.rs-bk-swatches { display: flex; gap: 6px; margin-top: 6px; }
.rs-bk-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e5e7eb; }

/* ── Slide 2 content: Campaign Planner ── */
.rs-camp-app {}
.rs-camp-hero-img {
  height: 90px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 10px 14px;
}
.rs-camp-hero-img::before {
  content: '😊';
  position: absolute; right: 16px; top: 8px;
  font-size: 40px; opacity: 0.4;
}
.rs-camp-hero-badges { display: flex; gap: 5px; margin-bottom: 4px; }
.rs-camp-hero-badge {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 50px;
  background: rgba(255,255,255,0.15); color: #fff;
}
.rs-camp-hero-badge.active { background: var(--mint); color: var(--navy); }
.rs-camp-hero-title { font-size: 13px; font-weight: 800; color: #fff; }
.rs-camp-detail { padding: 12px 14px; }
.rs-camp-section-lbl { font-size: 11px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.rs-camp-field { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.rs-camp-field-icon { font-size: 10px; color: #9ca3af; width: 14px; flex-shrink: 0; margin-top: 1px; }
.rs-camp-field-lbl { font-size: 9.5px; color: #9ca3af; width: 56px; flex-shrink: 0; }
.rs-camp-field-val { font-size: 10px; color: #374151; flex: 1; line-height: 1.4; }
.rs-camp-plat-row { display: flex; gap: 4px; align-items: center; }
.rs-camp-plat-badge {
  width: 18px; height: 18px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #fff;
}
.rs-camp-ctx { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.rs-camp-ctx-title { font-size: 10px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.rs-camp-ctx-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 8px; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 6px; margin-bottom: 4px;
}
.rs-camp-ctx-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rs-camp-ctx-nm { font-size: 9.5px; color: #374151; flex: 1; }
.rs-camp-ctx-type { font-size: 9px; font-weight: 600; color: #6b7280; background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
.rs-camp-ctx-date { font-size: 9px; color: #9ca3af; }

/* ── Slide 3 content: Analytics ── */
.rs-ana-app {}
.rs-ana-topbar {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 8px 14px; display: flex; align-items: center; gap: 6px;
}
.rs-ana-chan {
  font-size: 9.5px; font-weight: 600; padding: 3px 9px; border-radius: 50px;
  border: 1px solid #e5e7eb; color: #6b7280; background: #f9fafb;
  display: flex; align-items: center; gap: 4px;
}
.rs-ana-chan.on { background: #fff0f3; border-color: #fda4af; color: #e11d48; }
.rs-ana-body { padding: 12px 14px; }
.rs-ana-sec-title { font-size: 12px; font-weight: 700; color: #111827; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.rs-ana-period-row { display: flex; gap: 4px; }
.rs-ana-per-btn {
  font-size: 9px; font-weight: 600; padding: 2px 8px; border-radius: 50px;
  background: #f3f4f6; border: 1px solid #e5e7eb; color: #6b7280;
}
.rs-ana-per-btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.rs-ana-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rs-kpi-box {
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px;
}
.rs-kpi-lbl { font-size: 8.5px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.rs-kpi-val { font-size: 18px; font-weight: 800; color: #111827; line-height: 1; margin-bottom: 3px; }
.rs-kpi-delta { font-size: 9.5px; font-weight: 700; color: #16a34a; background: #f0fdf4; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 50px; }
.rs-ana-chart-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.rs-ana-chart-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 8px; }
.rs-mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.rs-mini-bar { flex: 1; border-radius: 2px 2px 0 0; background: #dbeafe; }
.rs-mini-bar.hi { background: #16a34a; }
.rs-top-posts-lbl { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin-bottom: 7px; }
.rs-top-post-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: #f9fafb; border: 1px solid #e5e7eb;
  border-radius: 7px; margin-bottom: 5px;
}
.rs-post-img {
  width: 34px; height: 34px; border-radius: 5px; flex-shrink: 0;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.rs-post-nm { font-size: 9.5px; font-weight: 600; color: #111827; flex: 1; line-height: 1.3; }
.rs-post-rch { font-size: 10px; font-weight: 700; color: #16a34a; }

/* Navigation controls */
.rs-controls {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto;
  padding: 40px 80px 60px;
}
.rs-dots { display: flex; align-items: center; gap: 8px; }
.rs-dot {
  height: 8px; border-radius: 4px;
  background: rgba(2,0,110,0.12);
  cursor: pointer; border: none; padding: 0;
  transition: background 0.25s, width 0.25s;
  width: 8px; position: relative; overflow: hidden;
}
.rs-dot.active { width: 36px; background: rgba(2,0,110,0.2); }
.rs-dot.active::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--navy); border-radius: 4px;
  width: var(--prog, 0%);
}
.rs-arrows { display: flex; align-items: center; gap: 10px; }
.rs-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f3f4f6; border: 1px solid #e5e7eb;
  color: #6b7280; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; transition: all 0.2s; font-size: 18px;
}
.rs-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.rs-arrow:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* ════════════════════════════════════════
   SECTION 7 — FOR ALL KINDS OF CREATORS
════════════════════════════════════════ */
.creators-section {
  background: var(--dark);
  padding: 100px 24px 110px;
  position: relative;
  overflow: hidden;
}
.creators-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.3), transparent);
}
/* Subtle navy radial accent top-left */
.creators-section::after {
  content: '';
  position: absolute;
  top: -150px; left: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(2,0,110,0.22) 0%, transparent 70%);
  pointer-events: none;
}

.creators-inner {
  max-width: 1160px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.creators-header { text-align: center; margin-bottom: 70px; }
.creators-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(90,235,157,0.6); margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.creators-eyebrow::before,
.creators-eyebrow::after { content: ''; width: 28px; height: 2px; background: rgba(90,235,157,0.4); }
.creators-title {
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.025em; color: var(--white);
  margin-bottom: 16px;
}
.creators-title em { font-style: normal; color: var(--mint); }
.creators-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.75;
  max-width: 560px; margin: 0 auto;
}

/* Grid: 3 cols on desktop, 2 on tablet */
.creators-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Card */
.creator-card {
  background: #0d0d2b;
  border: 1px solid rgba(90,235,157,0.1);
  border-radius: 20px;
  padding: 32px 28px 30px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  cursor: default;
}
.creator-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.5), transparent);
  opacity: 0;
  transition: opacity 0.28s;
}
.creator-card::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(90,235,157,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.creator-card:hover {
  border-color: rgba(90,235,157,0.32);
  box-shadow: 0 8px 48px rgba(0,0,0,0.45), 0 0 40px rgba(90,235,157,0.07);
  transform: translateY(-4px);
}
.creator-card:hover::before { opacity: 1; }

/* Icon badge */
.creator-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(2,0,110,0.4);
  border: 1px solid rgba(90,235,157,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(2,0,110,0.3);
  transition: background 0.25s, box-shadow 0.25s;
  position: relative; z-index: 1;
}
.creator-card:hover .creator-icon {
  background: rgba(2,0,110,0.65);
  box-shadow: 0 4px 24px rgba(90,235,157,0.15);
}

/* Role name */
.creator-role {
  font-size: 16px; font-weight: 700;
  color: var(--white); margin-bottom: 10px;
  line-height: 1.25;
  position: relative; z-index: 1;
}
.creator-role span { color: var(--mint); }

/* Description */
.creator-desc {
  font-size: 13.5px; font-weight: 300;
  color: rgba(255,255,255,0.45); line-height: 1.75;
  position: relative; z-index: 1;
}

/* CTA bottom */
.creators-cta-wrap {
  text-align: center;
  margin-top: 56px;
}
.creators-cta {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--navy); background: var(--mint);
  border: 2px solid var(--mint);
  cursor: pointer; padding: 14px 38px;
  border-radius: 50px;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
  letter-spacing: 0.01em;
}
.creators-cta:hover {
  background: #72ffb4; border-color: #72ffb4;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(90,235,157,0.3);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .creators-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .creators-section {
    padding: 80px 20px 100px;
  }
  .creators-header {
    margin-bottom: 40px;
  }
  .creators-title {
    font-size: clamp(26px, 5vw, 40px);
  }
  .creators-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }
  .creator-card {
    padding: 24px 20px;
  }
  .creator-icon {
    font-size: 36px;
  }
  .creator-role {
    font-size: 16px;
  }
  .creator-desc {
    font-size: 13px;
  }
  .creators-cta-wrap {
    margin-top: 40px;
  }
  .creators-cta {
    font-size: 14px;
    padding: 12px 28px;
  }
}

@media (max-width: 480px) {
  .creators-section {
    padding: 60px 16px 80px;
  }
  .creators-header {
    margin-bottom: 32px;
  }
  .creators-title {
    font-size: clamp(22px, 6vw, 32px);
  }
  .creators-sub {
    font-size: 13px;
  }
  .creator-card {
    padding: 20px 16px;
  }
  .creator-icon {
    font-size: 32px;
  }
  .creator-role {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .creator-desc {
    font-size: 12px;
  }
  .creators-cta {
    font-size: 13px;
    padding: 10px 24px;
  }
}

/* ════════════════════════════════════════
   SECTION 8 — SCROLL ZOOM REVEAL
════════════════════════════════════════ */
.zoom-section {
  position: relative;
  height: 300vh; /* tall enough for scroll animation */
  background: #0b0b18;
}
.zoom-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 60px 24px 0;
}
/* Text above laptop */
.zoom-text-top {
  text-align: center;
  margin-bottom: 36px;
  position: relative; z-index: 5;
  transition: opacity 0.3s;
}
.zoom-headline {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 400; line-height: 1.25;
  color: var(--white); letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.zoom-headline strong { font-weight: 800; }
.zoom-tagline {
  font-size: 15px; font-weight: 300;
  color: rgba(255,255,255,0.45);
}

/* Frame that scales */
.zoom-frame-wrap {
  width: 100%;
  max-width: 960px;
  transform-origin: top center;
  transition: transform 0.05s linear;
  position: relative; z-index: 4;
}

/* Laptop shell */
.zoom-laptop { position: relative; width: 100%; }
.zoom-screen {
  background: #1a1a2e;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 8px solid #252540;
  box-shadow:
    0 0 0 1px rgba(90,235,157,0.15),
    0 32px 80px rgba(0,0,0,0.6);
}
.zoom-base {
  height: 18px;
  background: linear-gradient(to bottom, #2a2a3e, #1a1a2e);
  border-radius: 0 0 6px 6px;
  margin: 0 -10px;
  border: 1px solid rgba(90,235,157,0.1);
  border-top: none;
  position: relative;
}
.zoom-base::after {
  content: '';
  position: absolute; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 60px; height: 6px;
  background: #333; border-radius: 4px 4px 0 0;
}

/* Chrome bar */
.zoom-screen-chrome {
  background: #f1f5f9;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #e2e8f0;
}
.zoom-dots { display: flex; gap: 5px; }
.zoom-dots span { width: 8px; height: 8px; border-radius: 50%; }
.zoom-dots span:nth-child(1) { background: #ff5f57; }
.zoom-dots span:nth-child(2) { background: #febc2e; }
.zoom-dots span:nth-child(3) { background: #28c840; }
.zoom-url {
  flex: 1; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 4px 10px;
  font-size: 10px; color: #9ca3af;
  display: flex; align-items: center; gap: 5px;
}

/* App shell */
.zoom-app {
  display: grid;
  grid-template-columns: 52px 1fr;
  height: 420px;
  background: #fff;
}

/* Sidebar */
.zoom-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  padding: 14px 0;
}
.zoom-sb-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.zoom-sb-item {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #9ca3af; cursor: pointer;
}
.zoom-sb-item.active { background: #eff6ff; }

/* Main content area */
.zoom-main { display: flex; flex-direction: column; overflow: hidden; }
.zoom-topbar {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.zoom-topbar-left { display: flex; align-items: center; gap: 14px; }
.zoom-page-title { font-size: 13px; font-weight: 700; color: #111827; }
.zoom-view-tabs { display: flex; gap: 4px; }
.zoom-vtab {
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 6px; color: #6b7280; cursor: pointer;
  border: 1px solid transparent;
}
.zoom-vtab.active { background: #f0f4ff; color: var(--navy); border-color: rgba(2,0,110,0.12); }
.zoom-topbar-right { display: flex; align-items: center; gap: 8px; }
.zoom-filter-btn {
  font-size: 11px; font-weight: 600; padding: 5px 12px;
  border-radius: 6px; border: 1px solid #e5e7eb;
  color: #6b7280; background: #f9fafb; cursor: pointer;
}
.zoom-create-btn {
  font-size: 11px; font-weight: 700; padding: 6px 14px;
  border-radius: 7px; background: var(--navy); color: #fff;
  cursor: pointer;
}

/* Calendar header row */
.zoom-cal-header {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.zoom-cal-day {
  padding: 7px 10px;
  font-size: 10.5px; font-weight: 600; color: #9ca3af;
  border-right: 1px solid #f3f4f6;
  text-align: center;
}
.zoom-cal-day.zoom-today {
  color: var(--navy); background: #eff6ff;
}

/* Calendar grid */
.zoom-cal-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  flex: 1; overflow: hidden;
  border-top: none;
}
.zoom-cal-col {
  padding: 8px 6px;
  border-right: 1px solid #f3f4f6;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.zoom-cal-col.today { background: #fafbff; }

/* Post cards */
.zoom-post-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.zoom-post-img {
  height: 60px;
  background-size: cover;
  background-position: center;
}
/* Colourful gradient placeholders for images */
.img1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.img2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.img3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.img4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.img5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.img6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }

.zoom-post-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 4px;
}
.zoom-post-plat { font-size: 9px; font-weight: 700; color: #374151; }
.zoom-post-time { font-size: 8.5px; color: #9ca3af; }
.zoom-post-text {
  font-size: 9.5px; color: #374151; line-height: 1.4;
  padding: 0 8px 6px; font-weight: 500;
}
.zoom-post-status {
  font-size: 8.5px; font-weight: 700;
  padding: 3px 8px 6px; letter-spacing: 0.04em;
}
.zoom-post-status.published { color: #16a34a; }
.zoom-post-status.scheduled { color: #2563eb; }
.zoom-post-status.live { color: var(--mint); }
.zoom-post-status.queued { color: #d97706; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  /* Fix: remove vh-based height — was causing massive empty space below content
     since sticky is disabled and content is much shorter than 180vh */
  .zoom-section {
    height: auto;
  }
  .zoom-sticky {
    position: relative !important;
    top: auto !important;
    height: auto;
    padding: 56px 20px 48px;
    justify-content: flex-start;
  }
  /* Disable JS-driven scale transform on mobile */
  .zoom-frame-wrap {
    transform: none !important;
    max-width: 100%;
    width: 100%;
  }
  .zoom-text-top {
    margin-bottom: 24px;
  }
  .zoom-headline {
    font-size: clamp(18px, 4.5vw, 26px);
    line-height: 1.3;
  }
  .zoom-tagline {
    font-size: 14px;
  }
  /* App height: fixed at compact size so laptop fits screen cleanly */
  .zoom-app {
    height: 320px;
  }
  .zoom-screen {
    border: 4px solid #252540;
    border-radius: 8px 8px 0 0;
  }
  .zoom-base {
    height: 14px;
    border-radius: 0 0 4px 4px;
  }
  .zoom-sidebar {
    padding: 10px 0;
    gap: 8px;
  }
  .zoom-sb-item {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .zoom-topbar {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .zoom-page-title {
    font-size: 12px;
  }
  .zoom-view-tabs {
    gap: 3px;
  }
  .zoom-vtab {
    font-size: 10px;
    padding: 3px 8px;
  }
  .zoom-create-btn {
    font-size: 10px;
    padding: 4px 10px;
  }
  .zoom-filter-btn {
    display: none;
  }
  .zoom-cal-day {
    font-size: 9.5px;
    padding: 5px 4px;
  }
  .zoom-cal-col {
    padding: 4px 3px;
    gap: 5px;
  }
  .zoom-post-img {
    height: 40px;
  }
  .zoom-post-meta {
    padding: 3px 5px 2px;
  }
  .zoom-post-plat {
    font-size: 7px;
  }
  .zoom-post-time {
    font-size: 7px;
  }
  .zoom-post-text {
    font-size: 8px;
    padding: 0 5px 3px;
  }
  .zoom-post-status {
    font-size: 7px;
    padding: 2px 5px 3px;
  }
}

@media (max-width: 480px) {
  .zoom-section {
    height: auto;
  }
  .zoom-sticky {
    position: relative !important;
    top: auto !important;
    height: auto;
    padding: 48px 16px 40px;
  }
  .zoom-frame-wrap {
    transform: none !important;
    max-width: 100%;
    width: 100%;
  }
  .zoom-text-top {
    margin-bottom: 20px;
  }
  .zoom-headline {
    font-size: clamp(16px, 5vw, 22px);
    line-height: 1.25;
  }
  .zoom-tagline {
    font-size: 13px;
  }
  .zoom-app {
    height: 260px;
  }
  .zoom-screen {
    border: 3px solid #252540;
    border-radius: 6px 6px 0 0;
  }
  .zoom-base {
    height: 12px;
    border-radius: 0 0 3px 3px;
    margin: 0 -6px;
  }
  .zoom-app {
    grid-template-columns: 42px 1fr;
  }
  .zoom-sidebar {
    padding: 8px 0;
    gap: 6px;
  }
  .zoom-sb-logo {
    width: 26px;
    height: 26px;
  }
  .zoom-sb-item {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .zoom-topbar {
    padding: 6px 8px;
    gap: 4px;
  }
  .zoom-topbar-left {
    gap: 6px;
  }
  .zoom-topbar-right {
    gap: 4px;
  }
  .zoom-page-title {
    font-size: 11px;
  }
  .zoom-vtab {
    font-size: 9px;
    padding: 2px 6px;
  }
  .zoom-create-btn {
    font-size: 9px;
    padding: 3px 8px;
  }
  /* Show only 3 columns on very small screens */
  .zoom-cal-header {
    display: none;
  }
  .zoom-cal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
  .zoom-cal-col {
    padding: 2px 2px;
    gap: 4px;
  }
  .zoom-post-card {
    border-radius: 4px;
  }
  .zoom-post-img {
    height: 30px;
  }
  .zoom-post-meta {
    padding: 2px 4px 1px;
  }
  .zoom-post-plat {
    font-size: 6px;
  }
  .zoom-post-time {
    font-size: 6px;
  }
  .zoom-post-text {
    font-size: 7px;
    padding: 0 4px 2px;
  }
  .zoom-post-status {
    font-size: 6px;
    padding: 1px 4px 2px;
  }
}

/* ════════════════════════════════════════
   SECTION 9 — WALL OF LOVE
   Two infinite-scroll marquee rows.
   Row 1: left → right | Row 2: right → left
════════════════════════════════════════ */
.wol-section {
  background: #f8f9fb;
  padding: 100px 0 110px;
  position: relative;
  overflow: hidden;
}
 
/* Top border accent */
.wol-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2,0,110,0.12), transparent);
}
 
/* ── Header ── */
.wol-header {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 56px;
}
 
.wol-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 50px;
  padding: 7px 18px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.wol-stars {
  font-size: 13px;
  color: #f59e0b;
  letter-spacing: 1px;
}
.wol-rating-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}
 
.wol-title {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #0a0a1a;
  margin-bottom: 12px;
}
 
.wol-sub {
  font-size: 16px;
  font-weight: 300;
  color: #6b7280;
  line-height: 1.7;
  max-width: 440px;
  margin: 0 auto;
}
 
/* ── Rows wrapper ── */
.wol-rows-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* overflow:hidden clips cards outside viewport */
  overflow: hidden;
}
 
/* ── Edge fade masks ── */
.wol-fade-left,
.wol-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  z-index: 10;
  pointer-events: none;
}
.wol-fade-left {
  left: 0;
  background: linear-gradient(to right, #f8f9fb 0%, transparent 100%);
}
.wol-fade-right {
  right: 0;
  background: linear-gradient(to left, #f8f9fb 0%, transparent 100%);
}
 
/* ── Each scrolling row ── */
.wol-row {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Pause on hover for the whole row */
}
.wol-row:hover .wol-track { animation-play-state: paused; }
 
/* ── The moving track inside each row ── */
.wol-track {
  display: flex;
  gap: 20px;
  /* Width set by JS to 2× natural width for seamless loop */
  will-change: transform;
  flex-shrink: 0;
}
 
/* Row 1: L → R  (positive direction) */
.wol-row-fwd .wol-track {
  animation: wolScrollFwd 40s linear infinite;
}
 
/* Row 2: R → L (negative direction) */
.wol-row-rev .wol-track {
  animation: wolScrollRev 40s linear infinite;
}
 
@keyframes wolScrollFwd {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
 
@keyframes wolScrollRev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
 
/* ── Individual card ── */
.wol-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 24px 26px;
  width: 320px;
  flex-shrink: 0;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
  cursor: default;
}
.wol-card:hover {
  box-shadow:
    0 4px 12px rgba(0,0,0,0.06),
    0 16px 48px rgba(2,0,110,0.1);
  border-color: rgba(2,0,110,0.15);
  transform: translateY(-3px);
}
 
/* Card top: avatar + name + stars */
.wol-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
 
/* Circular avatar */
.wol-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
 
.wol-author-info { flex: 1; }
.wol-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}
.wol-role {
  font-size: 11.5px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 2px;
}
 
.wol-card-stars {
  font-size: 12px;
  color: #f59e0b;
  letter-spacing: 1px;
  flex-shrink: 0;
}
 
/* Testimonial text */
.wol-text {
  font-size: 14px;
  font-weight: 400;
  color: #374151;
  line-height: 1.75;
  font-style: italic;
  position: relative;
}
.wol-text::before {
  content: '\201C';
  position: absolute;
  top: -8px; left: -4px;
  font-size: 36px;
  line-height: 1;
  color: rgba(2,0,110,0.08);
  font-family: Georgia, serif;
  pointer-events: none;
}
 
/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .wol-section { padding: 72px 0 80px; }
  .wol-header { margin-bottom: 40px; }
  .wol-card { width: 260px; padding: 18px 20px; }
  .wol-text { font-size: 13px; }
  /* Slightly slower on mobile so it feels comfortable */
  .wol-row-fwd .wol-track { animation-duration: 30s; }
  .wol-row-rev .wol-track { animation-duration: 30s; }
  .wol-fade-left, .wol-fade-right { width: 60px; }
}

/* ════════════════════════════════════════
   SECTION 10 — COST SAVING (CRO REDESIGN)
════════════════════════════════════════ */
.cost-section {
  background: #07070f;
  padding: 110px 24px 120px;
  position: relative; overflow: hidden;
}
/* Ambient glow top-centre */
.cost-section::before {
  content: '';
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(90,235,157,0.07) 0%, transparent 70%);
  pointer-events: none;
}
/* Subtle grid dots */
.cost-section::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cost-inner {
  max-width: 1080px; margin: 0 auto;
  position: relative; z-index: 1;
  text-align: center;
}
 
/* Eyebrow */
.cost-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(239,68,68,0.9);
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 50px; padding: 6px 16px;
  margin-bottom: 28px;
}
.cost-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  animation: blink 1.4s ease infinite;
  flex-shrink: 0;
}
 
/* Headline — loss-aversion framing */
.cost-title {
  font-size: clamp(34px, 4.5vw, 62px);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em; color: var(--white);
  margin-bottom: 16px;
}
.cost-title em {
  font-style: normal;
  color: #ef4444;
  position: relative;
  display: inline-block;
}
/* Strike-through animated underline on the red number */
.cost-title em::after {
  content: '';
  position: absolute;
  left: 0; top: 52%;
  width: 100%; height: 3px;
  background: #ef4444;
  border-radius: 2px;
  animation: strikeGrow 0.6s 0.4s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: left center;
}
@keyframes strikeGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
 
.cost-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.45); margin-bottom: 40px;
}
 
/* Tab pills */
.cost-tabs {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
}
.cost-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  padding: 9px 20px; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.45);
  cursor: pointer; transition: all 0.2s;
}
.cost-tab:hover {
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.75);
}
.cost-tab.active {
  background: var(--mint); border-color: var(--mint);
  color: var(--navy);
}
 
/* Main card — two-column comparison */
.cost-card {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: linear-gradient(135deg, rgba(30,8,8,0.85) 0%, rgba(12,12,24,0.9) 50%, rgba(4,18,12,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px; overflow: hidden;
  margin-bottom: 28px;
  text-align: left;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 32px 80px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  position: relative;
}
/* Subtle top highlight line across entire card */
.cost-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(239,68,68,0.4) 0%, rgba(255,255,255,0.08) 50%, rgba(90,235,157,0.4) 100%);
  pointer-events: none; z-index: 2;
}
 
/* Left — what they pay now */
.cost-card-left {
  padding: 36px 36px 32px;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(239,68,68,0.07) 0%, rgba(239,68,68,0.02) 50%, transparent 100%);
  position: relative;
}
/* Red corner glow */
.cost-card-left::after {
  content: '';
  position: absolute; top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(239,68,68,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cost-card-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 24px;
}
.cost-card-label--bad  { color: rgba(239,68,68,0.8); }
.cost-card-label--good { color: rgba(90,235,157,0.8); }
 
/* Stack of tool lines */
.cost-stack { flex: 1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.cost-stack-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(239,68,68,0.08) 0%, rgba(239,68,68,0.03) 100%);
  border: 1px solid rgba(239,68,68,0.14);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.cost-stack-row:hover {
  background: linear-gradient(90deg, rgba(239,68,68,0.13) 0%, rgba(239,68,68,0.06) 100%);
  border-color: rgba(239,68,68,0.25);
}
.cost-stack-name { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.65); }
.cost-stack-price {
  font-size: 13px; font-weight: 700; color: rgba(239,68,68,0.9);
  white-space: nowrap;
}
.cost-card-total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0 0;
  border-top: 1px solid rgba(239,68,68,0.12);
}
.cost-card-total-lbl { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.4); }
.cost-card-total-num {
  font-size: 28px; font-weight: 800; letter-spacing: -0.03em;
  color: #ef4444; transition: all 0.35s;
  text-shadow: 0 0 24px rgba(239,68,68,0.4);
}
 
/* VS divider */
.cost-vs-divider {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 20px; gap: 10px;
}
.cost-vs-line { width: 1px; flex: 1; background: rgba(255,255,255,0.06); }
.cost-vs-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
 
/* Right — HRL */
.cost-card-right {
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(90,235,157,0.07) 0%, rgba(90,235,157,0.03) 50%, transparent 100%);
  position: relative;
}
/* Green corner glow */
.cost-card-right::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(90,235,157,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cost-hrl-price-wrap { margin-bottom: 24px; position: relative; z-index: 1; }
.cost-hrl-from {
  font-size: 12px; font-weight: 400;
  color: rgba(90,235,157,0.6); margin-bottom: 2px;
}
.cost-hrl-price {
  font-size: clamp(44px, 5vw, 64px); font-weight: 800;
  letter-spacing: -0.04em; color: var(--mint); line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 0 40px rgba(90,235,157,0.3);
}
.cost-hrl-price span { font-size: 22px; font-weight: 400; opacity: 0.6; }
.cost-hrl-everything {
  font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
 
/* Savings callout */
.cost-saving-callout {
  flex: 1;
  background: linear-gradient(135deg, rgba(90,235,157,0.1) 0%, rgba(90,235,157,0.04) 100%);
  border: 1px solid rgba(90,235,157,0.22);
  border-radius: 16px; padding: 22px 24px;
  margin-bottom: 24px;
  position: relative; z-index: 1;
  box-shadow: 0 4px 24px rgba(90,235,157,0.06), inset 0 1px 0 rgba(90,235,157,0.12);
}
.cost-saving-row {
  display: flex; align-items: center; gap: 0; margin-bottom: 18px;
}
.cost-saving-block { flex: 1; }
.cost-saving-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(90,235,157,0.55);
  margin-bottom: 4px;
}
.cost-saving-val {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--mint); line-height: 1;
  transition: all 0.35s;
  text-shadow: 0 0 20px rgba(90,235,157,0.25);
}
.cost-saving-sep {
  width: 1px; height: 44px; flex-shrink: 0; margin: 0 20px;
  background: linear-gradient(to bottom, transparent, rgba(90,235,157,0.35), transparent);
}
.cost-bar-wrap { display: flex; flex-direction: column; gap: 7px; }
.cost-bar-track {
  height: 7px; background: rgba(255,255,255,0.06);
  border-radius: 4px; overflow: hidden;
}
.cost-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #5aeb9d, #02c870);
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 10px rgba(90,235,157,0.5);
}
.cost-bar-lbl {
  font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.38);
}
.cost-bar-lbl span { color: var(--mint); font-weight: 700; }
 
/* CTA block */
.cost-actions { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.cost-cta-primary {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--navy); background: var(--mint);
  border: none; cursor: pointer;
  padding: 17px 28px; border-radius: 12px;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
  width: 100%; letter-spacing: 0.01em;
  box-shadow: 0 4px 24px rgba(90,235,157,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;
}
.cost-cta-primary:hover {
  background: #72ffb4;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(90,235,157,0.45);
}
.cost-trust-row {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.cost-trust-item {
  font-size: 11.5px; font-weight: 500;
  color: rgba(255,255,255,0.32);
}
 
/* Social proof strip */
.cost-proof-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(90,235,157,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 28px 40px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.cost-proof-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.cost-proof-num {
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 800;
  letter-spacing: -0.03em; color: var(--white);
  text-shadow: 0 0 30px rgba(90,235,157,0.2);
}
.cost-proof-lbl {
  font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.38);
}
.cost-proof-divider {
  width: 1px; height: 52px; flex-shrink: 0; margin: 0 32px;
  background: linear-gradient(to bottom, transparent, rgba(90,235,157,0.2), transparent);
}
 
/* Responsive */
@media (max-width: 768px) {
  .cost-card { grid-template-columns: 1fr; }
  .cost-card-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .cost-vs-divider { flex-direction: row; padding: 16px 0; }
  .cost-vs-line { height: 1px; width: auto; flex: 1; }
  .cost-proof-strip { flex-direction: column; gap: 20px; padding: 24px; }
  .cost-proof-divider { width: 100%; height: 1px; margin: 0; }
  .cost-saving-row { flex-direction: column; gap: 16px; }
  .cost-saving-sep { width: 100%; height: 1px; margin: 0; }
}
@media (max-width: 1024px) {
  .cost-card-left, .cost-card-right { padding: 28px 24px; }
}
 
/* ════════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
════════════════════════════════════════ */
 
/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  nav { padding: 0 24px; }
 
  .pf-sticky {
    grid-template-columns: 220px 1fr;
    padding: 0 24px;
    gap: 0;
  }
 
  .slide-inner {
    padding: 48px 40px;
    gap: 48px;
  }
 
  .trust-inner { grid-template-columns: 1fr; gap: 48px; }
  .trust-left { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
  .trust-stats { flex-direction: row; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
}
 
/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
 
  /* NAV */
  nav { padding: 0 16px; height: 60px; }
  .nav-links { display: none; }
  .btn-outline { display: none; }
  .btn-solid { font-size: 12px; padding: 7px 14px; }
  .nav-logo-text { font-size: 13px; }
 
  /* HERO */
  .hero { padding: 80px 20px 60px; }
  .hero-heading { font-size: clamp(30px, 8vw, 44px); }
  .hero-heading .line2 { flex-direction: column; gap: 10px; align-items: center; }
  .ai-chip { min-width: 220px; height: 52px; }
  .chip-name { font-size: clamp(22px, 6vw, 36px); }
  .hero-sub { font-size: 14px; }
  .hero-ctas { flex-direction: column; gap: 10px; width: 100%; }
  .cta-primary, .cta-secondary { width: 100%; max-width: 320px; text-align: center; }
 
  /* SECTION 2 — FEATURE SLIDER */
  .slide-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 20px 48px;
    border-radius: 16px 16px 0 0;
  }
  .sl-title { font-size: clamp(24px, 6vw, 32px); }
  .sl-visual { padding-top: 0; }
  .float-badge { position: static; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 12px; text-align: left; }
  .fb-gauge { width: 60px; height: 33px; }
 
  /* SECTION 3 — SCROLL STICKY PLATFORM SHOWCASE */
  /* On mobile: disable scroll-sticky, tab bar + panel below */
  .pf-scroll-space {
    height: auto !important;
  }

  .pf-sticky {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    grid-template-columns: 1fr;
    padding: 0 0 40px;
    gap: 0;
    align-items: start;
  }

  .pf-nav-wrap {
    height: auto;
    margin-bottom: 0;
    justify-content: flex-start;
  }

  /* Hide scroll-driven track line */
  .pf-track, .pf-fill { display: none; }

  /* Horizontal scrollable tab bar */
  .pf-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0;
    padding: 0;
    scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: 100%;
    height: auto;
  }
  .pf-nav::-webkit-scrollbar { display: none; }

  /* Tab item — reset all desktop distortions */
  .pf-item {
    min-height: unset;        /* ← removes the 150px desktop min-height */
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 14px 20px;
    border-bottom: 2px solid transparent;
    border-left: none;
    flex-shrink: 0;
    min-width: auto;
    transition: border-color 0.25s;
  }
  .pf-item.active {
    border-bottom-color: var(--mint);
  }
  .pf-item.passed {
    border-bottom-color: rgba(90,235,157,0.3);
  }

  /* Hide dot entirely on mobile — tab underline shows active state */
  .pf-dot,
  .pf-dot::after {
    display: none !important;
  }

  /* Kill the active dot glow that bleeds into tab layout */
  .pf-item.active .pf-dot,
  .pf-item.passed .pf-dot {
    display: none !important;
    box-shadow: none !important;
  }

  .pf-item-body {
    text-align: left;
  }

  .pf-item-num {
    display: none;
  }

  .pf-item-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
  }
  .pf-item.active .pf-item-name {
    color: var(--mint);
  }

  .pf-item-desc {
    display: none;
  }

  /* Panel container — active panel is relative so height is content-driven */
  .pf-panels {
    position: relative;
    height: auto;
    min-height: 0;
    contain: none;
    overflow: visible;
    padding: 20px 16px 0;
  }

  /* All panels hidden by default */
  .pf-panel {
    position: absolute;
    inset: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 0.35s ease;
  }

  /* Active panel: break out of absolute stack so it takes up real height */
  .pf-panel.active {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  /* Exit panel fades out while still absolute */
  .pf-panel.exit {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: none;
    transition: opacity 0.25s ease;
  }

  /* ── Panel content: full-width, no overflow ── */
  .pf-panels {
    padding: 16px 0 0;
  }
  .pf-panel {
    padding: 0;
  }
  .pf-panel.active {
    width: 100%;
  }

  /* Dashboard card fills full width on mobile */
  .dash-card {
    border-radius: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .dash-body {
    padding: 16px 14px 18px;
    overflow-x: hidden;
  }

  /* Chrome bar text clamp */
  .dash-chrome-bar {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55vw;
  }

  /* Card 1 — Content Engine */
  .wt-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: 6px;
  }
  .wt-toolbar::-webkit-scrollbar { display: none; }
  .wt-tab {
    font-size: 11px;
    padding: 5px 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .wt-prompt-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .wt-gen-btn {
    width: 100%;
    text-align: center;
  }
  .wt-kpi-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .wt-kpi {
    padding: 10px 6px;
  }
  .wt-kpi-val {
    font-size: 16px;
  }
  .wt-kpi-lbl {
    font-size: 9px;
  }

  /* Card 2 — Keyword Tracker */
  .wt-kw-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 12px;
  }
  .wt-kw-stat {
    padding: 10px 8px;
  }
  .wt-kw-val {
    font-size: 16px;
  }
  .wt-kw-lbl {
    font-size: 9px;
  }
  .wt-kw-delta {
    font-size: 9px;
  }
  .wt-search-bar {
    margin-bottom: 10px;
  }
  /* Keyword table — hide position + trend columns */
  .wt-th:nth-child(4),
  .wt-th:nth-child(5),
  .wt-td:nth-child(4),
  .wt-td:nth-child(5),
  .wt-spark {
    display: none;
  }
  .wt-thead,
  .wt-tr {
    grid-template-columns: 1fr 52px 38px;
  }
  .wt-td.kw {
    font-size: 11px;
  }

  /* Card 3 — Guest Blogger */
  .wt-gb-agent {
    flex-wrap: wrap;
    gap: 8px;
    padding: 11px 12px;
  }
  .wt-gb-pub {
    margin-left: 0;
    text-align: left;
    width: 100%;
    border-top: 1px solid #e0e7ff;
    padding-top: 8px;
  }
  .wt-pitch {
    flex-wrap: wrap;
    gap: 6px;
  }
  .wt-pitch-body {
    width: calc(100% - 36px);
  }
  .wt-pitch-title {
    font-size: 11px;
  }
  .wt-pill {
    flex-shrink: 0;
  }
  .wt-da {
    font-size: 10px;
    flex-shrink: 0;
  }

  /* Card 4 — Social Buddy */
  .wt-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }
  .wt-compose-sched {
    font-size: 9px;
    padding: 3px 7px;
    white-space: nowrap;
  }
  .wt-compose-text {
    font-size: 11.5px;
  }
 
  /* SECTION 6 — RESULTS SLIDER mobile */
  .results-section { padding: 56px 0 40px; }
  .rs-header { padding: 0 20px; margin-bottom: 28px; }
  .rs-slide-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 20px 20px;
  }
  .rs-laptop-screen {
    border-radius: 8px 8px 0 0;
    border: 4px solid #1a1a2e;
  }
  .rs-app-shell {
    min-height: 300px;
    grid-template-columns: 36px 1fr;
  }
  .rs-app-sidebar {
    padding: 8px 0;
    gap: 8px;
  }
  .rs-sidebar-ico {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .rs-screen-chrome {
    padding: 6px 8px;
  }
  .rs-screen-dots span {
    width: 6px;
    height: 6px;
  }
  .rs-screen-url {
    font-size: 9px;
    padding: 3px 8px;
  }
 
  /* STATS */
  .stats-grid { flex-wrap: wrap; gap: 32px; }
  .stat-item { flex: 0 0 calc(50% - 16px); padding: 0; }
  .stat-divider { display: none; }
 
  /* SECTION 10 — COST (responsive handled inside section CSS) */
 
  /* TRUST */
  .trust-inner { grid-template-columns: 1fr; gap: 40px; }
  .trust-stats { flex-direction: row; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
  .trust-badge-row { flex-wrap: wrap; }
 
  /* PLATFORM HEADER */
  .platform-header { padding: 56px 20px 32px; }
 
  /* DROPDOWN — hide on mobile */
  .dropdown { width: 95vw; left: -20px; }
}
 
/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .stat-item { flex: 0 0 100%; }
  .wt-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .wt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .wt-kw-stats { grid-template-columns: 1fr 1fr; }
  .wt-kw-stat:last-child { grid-column: 1 / -1; }
}
/* ════════════════════════════════════════
   SECTION 11 — BUILT FOR ANY BUSINESS
   AI Rays / Orbital Animation
════════════════════════════════════════ */
.biz-section {
  background: var(--dark);
  padding: 120px 24px 130px;
  position: relative;
  overflow: hidden;
}
.biz-section::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 600px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.25), transparent);
}

.biz-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 620px;
  justify-content: center;
}

/* ── Centre orb + headline ── */
.biz-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
  margin-top: 0;
}

.biz-ai-orb {
  position: relative;
  width: 160px; height: 160px;
  margin-bottom: -140px;
  flex-shrink: 0;
}

#bizCanvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  pointer-events: none;
  opacity: 0.75;
}

.biz-orb-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  background: radial-gradient(circle at 40% 35%, rgba(2,0,110,0.9), #02006e);
  border: 2px solid rgba(90,235,157,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 8px rgba(90,235,157,0.06), 0 0 0 16px rgba(90,235,157,0.03), 0 0 40px rgba(90,235,157,0.2);
  z-index: 2;
}

.biz-title {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 18px;
}
.biz-title em {
  font-style: normal;
  color: var(--mint);
}
.biz-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 auto 0;
}

/* ── Floating chips ── */
.biz-chips-field {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.biz-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  padding: 10px 18px 10px 10px;
  white-space: nowrap;
  left: 0;
  top: 0;
  margin-left: -50px;
  transform: translate(var(--tx, 0), var(--ty, 0));
  pointer-events: all;
  cursor: default;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  opacity: 0;
  animation: 
    chipEntrance 0.8s ease-out forwards, 
    chipFloat 5s ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + 0.8s);
}

.biz-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(90, 235, 157, 0.4);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10;
}
.biz-chip span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
.biz-chip-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

@keyframes chipEntrance {
  from { 
    opacity: 0; 
    transform: translate(var(--tx, 0), calc(var(--ty, 0) + 40px)) scale(0.8); 
  }
  to { 
    opacity: 1; 
    transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); 
  }
}
@keyframes chipFloat {
  0%, 100% { transform: translate(var(--tx, 0), var(--ty, 0)); }
  50% { transform: translate(var(--tx, 0), calc(var(--ty, 0) - 15px)); }
}

/* ── CTA ── */
.biz-cta-wrap {
  margin-top: 60px;
  text-align: center;
  position: relative;
  z-index: 5;
}
.biz-cta {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 600;
  color: var(--navy); background: var(--mint);
  border: 2px solid var(--mint);
  cursor: pointer; padding: 14px 36px;
  border-radius: 50px;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
  margin-bottom: 14px;
  display: inline-block;
}
.biz-cta:hover {
  background: #72ffb4; border-color: #72ffb4;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(90,235,157,0.35);
}
.biz-cta-note {
  font-size: 12.5px; font-weight: 300;
  color: rgba(255,255,255,0.3);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .biz-section {
    padding: 80px 20px 100px;
  }
  .biz-inner {
    min-height: 500px;
  }
  .biz-ai-orb {
    width: 120px;
    height: 120px;
    margin-bottom: -100px;
  }
  #bizCanvas {
    width: 400px;
    height: 400px;
  }
  .biz-orb-core {
    width: 56px;
    height: 56px;
  }
  .biz-title {
    font-size: clamp(28px, 6vw, 48px);
    margin-bottom: 16px;
  }
  .biz-sub {
    font-size: 14px;
    max-width: 400px;
  }
  .biz-chips-field {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px 4px;
    pointer-events: all;
  }
  .biz-chip {
    position: relative;
    left: auto;
    top: auto;
    margin-left: 0;
    padding: 7px 13px 7px 7px;
    animation: chipEntranceMobile 0.55s ease-out forwards;
    animation-delay: var(--delay, 0s);
  }
  .biz-chip-icon {
    width: 26px;
    height: 26px;
  }
  .biz-chip span {
    font-size: 11.5px;
  }
  .biz-cta-wrap {
    margin-top: 40px;
  }
  .biz-cta {
    font-size: 14px;
    padding: 12px 28px;
  }
}

@media (max-width: 480px) {
  .biz-section {
    padding: 60px 16px 80px;
  }
  .biz-inner {
    min-height: 400px;
  }
  .biz-ai-orb {
    width: 100px;
    height: 100px;
    margin-bottom: -80px;
  }
  #bizCanvas {
    width: 300px;
    height: 300px;
  }
  .biz-orb-core {
    width: 48px;
    height: 48px;
  }
  .biz-title {
    font-size: clamp(24px, 7vw, 36px);
  }
  .biz-sub {
    font-size: 13px;
  }
  .biz-cta {
    font-size: 13px;
    padding: 10px 24px;
  }
  .biz-chip {
    padding: 6px 11px 6px 6px;
  }
  .biz-chip-icon {
    width: 22px;
    height: 22px;
  }
  .biz-chip span {
    font-size: 10.5px;
  }
}

@keyframes chipEntranceMobile {
  from { opacity: 0; transform: translateY(10px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ════════════════════════════════════════
   SECTION 12 — AND EVERY PLATFORM
   platform-section.css
════════════════════════════════════════ */
 
/* ═══ SECTION BASE ═══ */
.plat-section {
  background: var(--dark, #0a0a0a);
  padding: 120px 24px 100px;
  position: relative;
  overflow: hidden;
}
 
.plat-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.2), transparent);
}
 
.plat-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
 
/* ═══ HEADING ═══ */
.plat-heading {
  text-align: center;
  margin-bottom: 64px;
  position: relative;
  z-index: 5;
}
 
.plat-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5aeb9d;
  margin-bottom: 14px;
}
 
.plat-title {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 16px;
}
 
.plat-title em {
  font-style: italic;
  color: #5aeb9d;
}
 
.plat-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto;
}
 
/* ═══ STAGE ═══ */
.plat-stage {
  position: relative;
  width: 100%;
  max-width: 860px;
  height: 480px;
  display: flex;
  align-items: center;
}
 
#platCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
 
/* ═══ NODES ═══ */
.plat-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
 
.plat-node-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(90,235,157,0.25);
  animation: platRingPulse 2.5s ease-in-out infinite;
}
 
.plat-node-core {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
 
.plat-node-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
 
/* Agent node */
.plat-node--agent {
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}
 
.plat-node--agent .plat-node-ring {
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-20px);
}
 
.plat-node--agent .plat-node-core {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 40% 35%, rgba(2,0,110,0.95), #02006e);
  border: 2px solid rgba(90,235,157,0.6);
  box-shadow:
    0 0 0 8px rgba(90,235,157,0.07),
    0 0 40px rgba(90,235,157,0.25);
}
 
/* Hub node */
.plat-node--hub {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
 
.plat-node--hub .plat-node-ring {
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-16px);
  animation-delay: 0.8s;
  animation-name: platRingPulseHub;
}
 
.plat-node--hub .plat-node-core {
  width: 56px;
  height: 56px;
  background: radial-gradient(circle at 40% 35%, #1a1a2e, #0f0f1e);
  border: 1.5px solid rgba(90,235,157,0.4);
  box-shadow:
    0 0 0 6px rgba(90,235,157,0.06),
    0 0 28px rgba(90,235,157,0.18);
}
 
@keyframes platRingPulse {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(-20px) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-20px) scale(1.18);
    opacity: 0.15;
  }
}
 
@keyframes platRingPulseHub {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(-16px) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) translateY(-16px) scale(1.2);
    opacity: 0.15;
  }
}
 
/* ═══ PLATFORMS ═══ */
.plat-platforms {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}
 
.plat-platform {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(20px);
  animation: platPlatIn 0.5s ease-out forwards;
  animation-delay: calc(0.8s + var(--delay, 0s));
  cursor: default;
  transition: transform 0.2s ease;
}
 
.plat-platform:hover {
  transform: translateX(-4px);
}
 
@keyframes platPlatIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
 
.plat-platform-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: box-shadow 0.2s;
}
 
.plat-platform:hover .plat-platform-icon {
  box-shadow: 0 4px 20px rgba(90,235,157,0.2);
}
 
.plat-platform span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  min-width: 80px;
}
 
/* ═══ STATS ═══ */
.plat-stats {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 72px;
  padding: 32px 56px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  background: rgba(255,255,255,0.025);
}
 
.plat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
 
.plat-stat-num {
  font-size: 36px;
  font-weight: 800;
  color: #5aeb9d;
  line-height: 1;
}
 
.plat-stat-label {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
 
.plat-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}
 
/* ═══ RESPONSIVE ═══ */
@media (max-width: 700px) {
  .plat-stage {
    height: 360px;
  }
  .plat-stats {
    gap: 24px;
    padding: 24px 28px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .plat-stat-divider {
    display: none;
  }
}

@media (max-width: 768px) {
  .plat-section {
    padding: 80px 20px 100px;
  }
  .plat-heading {
    margin-bottom: 40px;
  }
  .plat-title {
    font-size: clamp(28px, 6vw, 48px);
  }
  .plat-sub {
    font-size: 14px;
  }
  .plat-stage {
    height: 400px;
  }
  .plat-platforms {
    right: 5%;
    gap: 8px;
  }
  .plat-platform span {
    font-size: 12px;
    min-width: 70px;
  }
  .plat-platform-icon {
    width: 36px;
    height: 36px;
  }
  #platCanvas {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 480px) {
  .plat-section {
    padding: 60px 16px 80px;
  }
  .plat-heading {
    margin-bottom: 32px;
  }
  .plat-title {
    font-size: clamp(24px, 7vw, 36px);
  }
  .plat-sub {
    font-size: 13px;
  }
  .plat-stage {
    height: 320px;
  }
  .plat-platforms {
    right: 8%;
    top: 45%;
    gap: 6px;
  }
  .plat-platform {
    gap: 8px;
  }
  .plat-platform span {
    font-size: 11px;
    min-width: 60px;
  }
  .plat-platform-icon {
    width: 32px;
    height: 32px;
  }
  #platCanvas {
    width: 300px;
    height: 300px;
  }
  .plat-node-core svg {
    width: 24px;
    height: 24px;
  }
  .plat-node-label {
    font-size: 11px;
  }
}

/* ════════════════════════════════════════
   SECTION 13 — FAQ
   faq-section.css
════════════════════════════════════════ */
 
/* ═══ SECTION BASE ═══ */
.faq-section {
  background: var(--dark, #0a0a0a);
  padding: 120px 24px 130px;
  position: relative;
  overflow: hidden;
}
 
/* Subtle top separator line */
.faq-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90,235,157,0.18), transparent);
}
 
/* Faint background grid texture */
.faq-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90,235,157,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,235,157,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}
 
.faq-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
 
/* ═══ HEADING ═══ */
.faq-heading {
  text-align: center;
  margin-bottom: 56px;
}
 
.faq-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5aeb9d;
  margin-bottom: 14px;
}
 
.faq-title {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 16px;
}
 
.faq-title em {
  font-style: italic;
  color: #5aeb9d;
}
 
.faq-sub {
  font-size: 16px;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
}
 
/* ═══ TABS ═══ */
.faq-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
  justify-content: center;
}
 
.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.45);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
 
.faq-tab:hover {
  border-color: rgba(90,235,157,0.3);
  color: rgba(255,255,255,0.75);
  background: rgba(90,235,157,0.05);
}
 
.faq-tab--active {
  border-color: rgba(90,235,157,0.55);
  background: rgba(90,235,157,0.1);
  color: #5aeb9d;
}
 
.faq-tab-num {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
  letter-spacing: 0.05em;
}
 
.faq-tab--active .faq-tab-num {
  opacity: 1;
}
 
/* ═══ FAQ LIST ═══ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
 
/* ═══ FAQ ITEM ═══ */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  /* JS adds .faq-item--hidden to non-matching categories */
  display: block;
}
 
.faq-item--hidden {
  display: none;
}
 
/* Entrance animation when items filter in */
.faq-item--entering {
  animation: faqItemIn 0.3s ease-out forwards;
}
 
@keyframes faqItemIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
/* ═══ QUESTION BUTTON ═══ */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  transition: color 0.2s ease;
}
 
.faq-question:hover {
  color: #ffffff;
}
 
.faq-question[aria-expanded="true"] {
  color: #5aeb9d;
}
 
/* ── Plus/Minus icon ── */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  transition: border-color 0.2s, background 0.2s, transform 0.35s ease;
}
 
/* Horizontal bar */
.faq-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 1.5px;
  background: rgba(255,255,255,0.6);
  transition: background 0.2s;
}
 
/* Vertical bar */
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5px; height: 10px;
  background: rgba(255,255,255,0.6);
  transition: background 0.2s, transform 0.35s ease, opacity 0.25s ease;
}
 
/* Open state */
.faq-question[aria-expanded="true"] .faq-icon {
  border-color: rgba(90,235,157,0.5);
  background: rgba(90,235,157,0.1);
  transform: rotate(45deg);
}
 
.faq-question[aria-expanded="true"] .faq-icon::before,
.faq-question[aria-expanded="true"] .faq-icon::after {
  background: #5aeb9d;
}
 
/* ═══ ANSWER ═══ */
.faq-answer {
  /* Height animated by JS via max-height trick */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.faq-answer p {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.85;
  padding-bottom: 28px;
  margin: 0;
  padding-right: 40px;
}
 
/* ═══ CTA STRIP ═══ */
.faq-cta {
  margin-top: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 40px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  flex-wrap: wrap;
}
 
.faq-cta-text {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
 
.faq-cta-btn {
  display: inline-block;
  padding: 13px 32px;
  border-radius: 50px;
  background: #5aeb9d;
  color: #02006e;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
}
 
.faq-cta-btn:hover {
  background: #72ffb4;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(90,235,157,0.3);
}
 
/* ═══ RESPONSIVE ═══ */
@media (max-width: 600px) {
  .faq-section {
    padding: 80px 20px 100px;
  }
 
  .faq-tabs {
    gap: 6px;
  }
 
  .faq-tab {
    padding: 8px 14px;
    font-size: 12px;
  }
 
  .faq-question {
    font-size: 15px;
    padding: 20px 0;
  }
 
  .faq-answer p {
    font-size: 14px;
    padding-right: 0;
  }
 
  .faq-cta {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 28px 24px;
  }
}

/* ── FAQ → Footer Divider ── */
.faq-footer-divider {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    #121212 0%,
    var(--navy, #02006e) 15%,
    var(--mint, #5aeb9d) 50%,
    var(--navy, #02006e) 85%,
    #121212 100%
  );
  position: relative;
  overflow: hidden;
}

.faq-footer-divider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(90, 235, 157, 0.6) 50%,
    transparent 100%
  );
  animation: dividerShimmer 2.5s ease-in-out infinite;
}

@keyframes dividerShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   HRL INFOTECHS — footer.css
   Colors: #02006e (navy) | #5aeb9d (mint) | #121212 (dark) | #ffffff
   Font: Poppins (loaded in main styles.css)
   ============================================================ */

/* ════════════════════════════════════════
   FOOTER BANNER — Section 1
════════════════════════════════════════ */
.ft-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0d00b8 0%, #0a0096 20%, #07006e 42%, #04004a 66%, #020030 85%, #0d001a 100%);
  padding: 90px 24px 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ft-banner-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 10, 220, 0.7) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 60%, rgba(10, 0, 160, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 70%, rgba(90, 235, 157, 0.07) 0%, transparent 55%);
  z-index: 0;
}

.ft-banner-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 1;
}

.ft-banner-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(18, 18, 18, 0.6));
  pointer-events: none;
  z-index: 2;
}

/* AI Logo Pill */
.ft-banner-logos {
  position: relative;
  z-index: 5;
  margin-bottom: 32px;
}

.ft-logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 8px 14px;
  backdrop-filter: blur(10px);
}

.ft-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.2s;
}

.ft-logo-icon:hover {
  transform: translateY(-3px);
}

/* Heading */
.ft-banner-heading {
  position: relative;
  z-index: 5;
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 18px;
  animation: ftFadeUp 0.6s 0.1s ease both;
}

.ft-banner-accent {
  color: var(--mint, #5aeb9d);
}

.ft-banner-sub {
  position: relative;
  z-index: 5;
  font-size: clamp(14px, 1.5vw, 16.5px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.75;
  max-width: 560px;
  margin-bottom: 36px;
  animation: ftFadeUp 0.6s 0.2s ease both;
}

/* CTAs */
.ft-banner-ctas {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  animation: ftFadeUp 0.6s 0.3s ease both;
}

.ft-cta-primary {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #121212;
  background: #ffffff;
  border: 2px solid #ffffff;
  cursor: pointer;
  padding: 13px 30px;
  border-radius: 50px;
  transition: transform 0.18s, box-shadow 0.18s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft-cta-primary:hover {
  background: var(--mint, #5aeb9d);
  border-color: var(--mint, #5aeb9d);
  color: #02006e;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(90, 235, 157, 0.35);
}

.ft-cta-arrow {
  font-size: 17px;
  line-height: 1;
}

.ft-cta-secondary {
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 13px 30px;
  border-radius: 50px;
  transition: all 0.2s;
  backdrop-filter: blur(8px);
}

.ft-cta-secondary:hover {
  background: var(--mint, #5aeb9d);
  border-color: var(--mint, #5aeb9d);
  color: #02006e;
}

@keyframes ftFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ════════════════════════════════════════
   FOOTER MAIN — Section 2
════════════════════════════════════════ */
.ft-main {
  background: #ffffff;
  color: #0a0a1a;
  border-top: 1px solid rgba(2, 0, 110, 0.08);
}

.ft-main-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 48px 60px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

/* ── Left Column ── */
.ft-left {
  flex-shrink: 0;
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ft-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ft-brand-icon {
  width: 38px;
  height: 38px;
  background: var(--navy, #02006e);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(90, 235, 157, 0.35);
  flex-shrink: 0;
}

.ft-brand-text {
  font-size: 14px;
  font-weight: 700;
  color: #0a0a1a;
  letter-spacing: 0.02em;
}

.ft-brand-text span {
  color: var(--navy, #02006e);
}

.ft-tagline {
  font-size: 12.5px;
  font-weight: 300;
  color: #6b7280;
  line-height: 1.7;
}

/* Trust Badges */
.ft-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.ft-badge {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ft-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ft-badge-gdpr  { background: #3b5bdb; }
.ft-badge-iso   { background: #2f9e44; }
.ft-badge-ssl   { background: #e67700; }
.ft-badge-uptime{ background: #ae3ec9; }

.ft-badge-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ft-badge-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0a0a1a;
}

.ft-badge-sub {
  font-size: 10.5px;
  font-weight: 300;
  color: #9ca3af;
}

/* ── Nav Columns ── */
.ft-nav-cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.ft-col-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 16px;
}

.ft-col-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ft-col-links li a {
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  text-decoration: none;
  transition: color 0.18s;
  display: inline-block;
}

.ft-col-links li a:hover {
  color: var(--navy, #02006e);
}

/* Highlighted platform links */
.ft-col-links li:first-child a {
  color: var(--navy, #02006e);
  font-weight: 500;
}

/* ── Copyright Bar ── */
.ft-bar {
  border-top: 1px solid rgba(2, 0, 110, 0.08);
  background: #ffffff;
}

.ft-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ft-copy {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}

.ft-bar-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.ft-bar-links a {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.18s;
}

.ft-bar-links a:hover {
  color: var(--navy, #02006e);
}

/* Social Icons */
.ft-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ft-social {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(2, 0, 110, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.18s;
}

.ft-social:hover {
  background: var(--navy, #02006e);
  border-color: var(--navy, #02006e);
  color: #ffffff;
}


/* ════════════════════════════════════════
   FOOTER WATERMARK — Section 3
════════════════════════════════════════ */
.ft-watermark {
  background: #ffffff;
  overflow: hidden;
  padding: 0 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
}

.ft-watermark-text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(2, 0, 110, 0.08);
  background: linear-gradient(180deg, rgba(2, 0, 110, 0.07) 0%, rgba(2, 0, 110, 0.03) 60%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: block;
  white-space: nowrap;
  transform: translateY(12%);
  line-height: 1;
}


/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ft-main-inner {
    flex-direction: column;
    gap: 48px;
    padding: 60px 32px 48px;
  }
  .ft-left {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
  }
  .ft-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
  }
  .ft-nav-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
  }
  .ft-bar-inner {
    padding: 20px 32px;
  }
}

@media (max-width: 640px) {
  .ft-banner {
    padding: 72px 20px 80px;
  }
  .ft-logo-pill {
    gap: 4px;
    padding: 7px 10px;
  }
  .ft-logo-icon {
    width: 34px;
    height: 34px;
  }
  .ft-nav-cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .ft-main-inner {
    padding: 48px 20px 36px;
  }
  .ft-bar-inner {
    padding: 18px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ft-watermark-text {
    font-size: clamp(60px, 18vw, 120px);
  }
}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE — REMAINING CONTAINER FIXES
   Covers all sections not yet fully responsive
════════════════════════════════════════ */

/* ── SECTION 2: Feature Slider ── */
@media (max-width: 768px) {
  .features-section {
    padding: 48px 0 60px;
  }
  .feat-header {
    margin-bottom: 28px;
    padding: 0 20px;
  }
  .feat-title {
    font-size: clamp(22px, 6vw, 34px);
  }
  .feat-sub {
    font-size: 14px;
  }
  .timeline-dots {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .features-section {
    padding: 36px 0 48px;
  }
  .feat-header {
    margin-bottom: 20px;
    padding: 0 16px;
  }
}

/* ── SECTION 4: Stats ── */
@media (max-width: 768px) {
  .stats-section {
    padding: 60px 20px 72px;
  }
  .stats-heading {
    margin-bottom: 40px;
  }
  .stats-heading h2 {
    font-size: clamp(20px, 5vw, 28px);
  }
}

@media (max-width: 480px) {
  .stats-section {
    padding: 48px 16px 56px;
  }
  .stats-heading {
    margin-bottom: 28px;
  }
}

/* ── SECTION 6: Results Slider controls ── */
@media (max-width: 768px) {
  .rs-controls {
    padding: 20px 20px 36px;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }
  .rs-arrows {
    gap: 8px;
  }
  .rs-arrow {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .rs-controls {
    padding: 16px 16px 28px;
  }
  .rs-title {
    font-size: clamp(22px, 7vw, 32px);
  }
  .rs-sub {
    font-size: 13px;
  }
}

/* ── SECTION 3: Platform Showcase — 480px refinements ── */
@media (max-width: 480px) {
  .pf-item {
    padding: 12px 14px;
  }
  .pf-item-name {
    font-size: 12px;
  }
  .pf-panels {
    padding: 14px 0 0;
  }
  .pf-panel{
    justify-content: start;
    padding: 0px 10px;
    
  }
  .dash-card {
    border-radius: 14px;
    width: 95vw;
    overflow: hidden;
  }
  .dash-body {
    padding: 12px 12px 16px;
  }
  .wt-tab {
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .wt-kpi-val {
    font-size: 15px;
  }
  .wt-kw-val {
    font-size: 15px;
  }
  .wt-pitch-title {
    font-size: 10.5px;
  }
  .wt-compose-text {
    font-size: 11px;
  }
  .wt-kpi-grid {
    gap: 6px;
  }
  .wt-kpi-card-val {
    font-size: 14px;
  }
}

/* ── SEO Section — additional card fix on very small screens ── */
@media (max-width: 480px) {
  .seo-cta {
    font-size: 13px;
    padding: 11px 24px;
  }
}

/* ── SECTION 10: Cost Saving — small screen polish ── */
@media (max-width: 480px) {
  .cost-section {
    padding: 72px 16px 80px;
  }
  .cost-title {
    font-size: clamp(28px, 7vw, 44px);
  }
  .cost-sub {
    font-size: 14px;
  }
  .cost-card-left,
  .cost-card-right {
    padding: 24px 20px;
  }
  .cost-proof-strip {
    padding: 20px 16px;
  }
}

/* ── SECTION 9: Wall of Love — very small screen ── */
@media (max-width: 480px) {
  .wol-section {
    padding: 56px 0 64px;
  }
  .wol-header {
    margin-bottom: 28px;
  }
  .wol-card {
    width: 230px;
    padding: 16px 18px;
  }
}

/* ── General: prevent horizontal overflow on all containers ── */
@media (max-width: 768px) {
  .hero,
  .features-section,
  .platform-section,
  .stats-section,
  .seo-section,
  .results-section,
  .creators-section,
  .wol-section,
  .cost-section,
  .biz-section,
  .plat-section,
  .faq-section {
    overflow-x: hidden;
  }
}