/*
Theme Name: GadgedUp Lead Generation Theme
Theme URI: https://gadgedup-tech.com
Author: GadgedUp
Description: A bold, conversion-first WordPress theme for GadgedUp — a performance-driven lead generation agency. Built for speed-to-lead, not enterprise brochureware: punchy hero, lead-gen service cards, transparent stats, and a straight-to-the-point contact flow.
Version: 3.0.0
Requires at least: 6.2
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: webfx
Tags: business, digital-marketing, lead-generation, marketing, full-width-template, custom-menu, custom-logo, responsive-layout
*/

/* ═══════════════════════════════════════════════════
   0. DESIGN TOKENS — GadgedUp Brand
   Navy + Orange + Magenta, sampled from the GadgedUp logo.
═══════════════════════════════════════════════════ */
:root {
  /* Brand — Navy (structural / headings / primary buttons) */
  --c-navy:        #29166f;
  --c-navy-dk:     #170b45;
  --c-navy-md:     #5b2fc4;  /* bright indigo-violet — glows & accents on dark bg */
  --c-navy-lt:     #eee8fb;

  /* Brand — Orange (CTA / energy / the "disruptive" pop) */
  --c-orange:      #e7773e;
  --c-orange-dk:   #c15f2c;
  --c-orange-lt:   #fdeee2;

  /* Brand — Magenta (secondary accent, mirrors the logo's arrow→"p" gradient) */
  --c-magenta:     #91217f;
  --c-magenta-dk:  #6d1861;
  --c-magenta-lt:  #f8e8f4;

  /* Legacy alias names kept so every rule below still resolves —
     blue/green now carry the new brand colors */
  --c-blue:        var(--c-navy);
  --c-blue-dk:     var(--c-navy-dk);
  --c-blue-md:     var(--c-navy-md);
  --c-blue-lt:     var(--c-navy-lt);
  --c-green:       var(--c-orange);
  --c-green-dk:    var(--c-orange-dk);

  --c-white:       #ffffff;
  --c-off:         #f8f7fc;
  --c-light:       #f1eef9;
  --c-border:      #e1dcf0;
  --c-mid:         #9c97b3;
  --c-text-lt:     #5f5878;
  --c-text:        #1d1533;
  --c-dark:        #150c33;
  --c-nav:         #140a38;
  --c-nav-b:       #241348;
  --ff-h:   'Sora', sans-serif;
  --ff-b:   'DM Sans', sans-serif;
  --mw:     1280px;
  --hh:     72px;
  --r-sm:   6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-f: 9999px;
  --sh-xs:  0 1px 4px rgba(0,0,0,.07);
  --sh-sm:  0 2px 10px rgba(0,0,0,.09);
  --sh-md:  0 4px 22px rgba(0,0,0,.12);
  --sh-lg:  0 8px 40px rgba(0,0,0,.15);
  --sh-xl:  0 16px 60px rgba(0,0,0,.2);
  --sh-org: 0 6px 24px rgba(231,119,62,.38);
  --sh-blu: 0 6px 28px rgba(41,22,111,.35);
  --sh-grn: var(--sh-org);
  --tr:     .25s ease; --tr-f: .15s ease;

  /* Compatibility aliases — several template files in this theme
     reference these shorter names directly; point them at the same tokens
     so every page (blog, contact, service, 404, pricing…) inherits the
     brand consistently instead of falling back to unstyled black/white. */
  --color-primary:     var(--c-navy);
  --color-accent:      var(--c-orange);
  --color-dark:        var(--c-dark);
  --color-light:       var(--c-light);
  --color-border:      var(--c-border);
  --color-text-light:  var(--c-text-lt);
  --font-heading:      var(--ff-h);
  --font-body:         var(--ff-b);
  --shadow-xl:         var(--sh-xl);
  --primary:           var(--c-navy);
  --primary-dark:      var(--c-navy-dk);
  --accent:            var(--c-orange);
  --white:             var(--c-white);
  --dark-bg:           var(--c-nav);
  --dark-border:       var(--c-nav-b);
  --text-light:        var(--c-text-lt);
  --light-gray:        var(--c-light);
  --font-head:          var(--ff-h);
}

/* ═══════════════════════════════════════════════════
   1. RESET & BASE
═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { font-family:var(--ff-b); color:var(--c-text); background:var(--c-white); line-height:1.65; overflow-x:hidden }
img,svg,video { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
button,input,select,textarea { font-family:inherit }
h1,h2,h3,h4,h5,h6 { font-family:var(--ff-h); font-weight:700; line-height:1.2; color:var(--c-text) }
p { margin-bottom:1em } p:last-child { margin-bottom:0 }

/* ═══════════════════════════════════════════════════
   2. LAYOUT
═══════════════════════════════════════════════════ */
.container { width:100%; max-width:var(--mw); margin-inline:auto; padding-inline:clamp(16px,4vw,48px) }
.container--narrow { max-width:820px }
.sec  { padding-block: clamp(56px,8vw,96px) }
.sec-sm { padding-block: clamp(32px,5vw,56px) }
.text-c { text-align:center }
.vis-hide { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }

/* ═══════════════════════════════════════════════════
   3. TYPOGRAPHY
═══════════════════════════════════════════════════ */
h1 { font-size:clamp(2.1rem,4.5vw,3.75rem) }
h2 { font-size:clamp(1.7rem,3.2vw,2.75rem) }
h3 { font-size:clamp(1.25rem,2.2vw,1.875rem) }
h4 { font-size:clamp(1.05rem,1.8vw,1.35rem) }
.eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--c-green); margin-bottom:12px;
}
.eyebrow::before { content:''; display:block; width:20px; height:2px; background:var(--c-green); border-radius:2px }
.section-title   { font-size:clamp(1.9rem,3.2vw,2.7rem); margin-bottom:16px; line-height:1.15 }
.section-sub     { font-size:1.05rem; color:var(--c-text-lt); max-width:640px; line-height:1.75 }
.section-hd      { margin-bottom:clamp(40px,6vw,72px) }
.section-hd.c    { text-align:center }
.section-hd.c .section-sub { margin-inline:auto }
.section-hd.c .eyebrow     { display:flex; justify-content:center }

/* ═══════════════════════════════════════════════════
   4. BUTTONS
═══════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px; border-radius:var(--r-f);
  font-family:var(--ff-h); font-weight:600; font-size:.95rem;
  cursor:pointer; border:2px solid transparent;
  transition:all var(--tr); white-space:nowrap; letter-spacing:.01em;
}
.btn-primary { background:var(--c-green); color:var(--c-dark); border-color:var(--c-green) }
.btn-primary:hover { background:var(--c-green-dk); border-color:var(--c-green-dk); transform:translateY(-2px); box-shadow:var(--sh-grn) }
.btn-blue    { background:var(--c-blue); color:var(--c-white); border-color:var(--c-blue) }
.btn-blue:hover { background:var(--c-blue-dk); transform:translateY(-2px); box-shadow:var(--sh-blu) }
.btn-outline { background:transparent; color:var(--c-white); border-color:rgba(255,255,255,.45) }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:var(--c-white) }
.btn-outline-dark { background:transparent; color:var(--c-blue); border-color:var(--c-blue) }
.btn-outline-dark:hover { background:var(--c-blue); color:var(--c-white) }
.btn-ghost   { background:rgba(255,255,255,.12); color:var(--c-white); border-color:rgba(255,255,255,.2) }
.btn-ghost:hover { background:rgba(255,255,255,.2) }
.btn-lg { padding:16px 40px; font-size:1.05rem }
.btn-sm { padding:9px 20px; font-size:.85rem }
.btn .arr { transition:transform var(--tr) }
.btn:hover .arr { transform:translateX(4px) }

/* BEM-style modifier aliases — the contact & service page templates use
   btn--primary / btn--lg (double dash) alongside the base .btn class;
   these map that naming onto the same brand styles above. */
.btn--primary,.btn--accent { background:var(--c-orange); color:var(--c-dark); border-color:var(--c-orange) }
.btn--primary:hover,.btn--accent:hover { background:var(--c-orange-dk); border-color:var(--c-orange-dk); transform:translateY(-2px); box-shadow:var(--sh-org) }
.btn--outline { background:transparent; color:var(--c-white); border-color:rgba(255,255,255,.45) }
.btn--outline:hover { background:rgba(255,255,255,.1); border-color:var(--c-white) }
.btn--white { background:var(--c-white); color:var(--c-navy); border-color:var(--c-white) }
.btn--white:hover { background:var(--c-navy-lt); transform:translateY(-2px) }
.btn--lg { padding:16px 40px; font-size:1.05rem }
.btn--sm { padding:9px 20px; font-size:.85rem }
.btn--full { width:100%; justify-content:center }

/* ═══════════════════════════════════════════════════
   5. TOP BAR
═══════════════════════════════════════════════════ */
.site-topbar {
  background:var(--c-nav); border-bottom:1px solid var(--c-nav-b);
  padding:7px 0; font-size:.78rem; color:rgba(255,255,255,.6);
}
.site-topbar .container { display:flex; justify-content:space-between; align-items:center; gap:16px }
.tb-left  { display:flex; align-items:center; gap:6px; font-family:var(--ff-h); font-weight:700; color:var(--c-green); font-size:.8rem; letter-spacing:.03em }
.tb-right { display:flex; align-items:center; gap:20px }
.tb-right a { color:rgba(255,255,255,.6); transition:color var(--tr-f) }
.tb-right a:hover { color:var(--c-green) }
.tb-phone { color:var(--c-white) !important; font-weight:600; font-size:.82rem }

/* ═══════════════════════════════════════════════════
   6. HEADER
═══════════════════════════════════════════════════ */
.site-header {
  background:var(--c-nav); border-bottom:1px solid var(--c-nav-b);
  height:var(--hh); position:sticky; top:0; z-index:1000;
  transition:box-shadow var(--tr);
}
.site-header.scrolled { box-shadow:0 2px 28px rgba(0,0,0,.5) }
.site-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px }

.site-logo { flex-shrink:0 }
.site-logo a { display:flex; align-items:center; gap:8px }
.site-logo img { height:36px; width:auto }
.logo-text { font-family:var(--ff-h); font-weight:800; font-size:1.35rem; color:var(--c-white); letter-spacing:-.01em }
.logo-text span { color:var(--c-green) }

.primary-nav { display:flex; align-items:center; gap:2px; flex:1; justify-content:center }
.nav-item { position:relative }
.nav-link {
  display:flex; align-items:center; gap:5px;
  padding:0 14px; height:var(--hh);
  font-family:var(--ff-h); font-weight:600; font-size:.875rem;
  color:rgba(255,255,255,.82); cursor:pointer;
  transition:color var(--tr-f); white-space:nowrap;
  background:none; border:none;
}
.nav-link:hover,.nav-item:hover .nav-link,.nav-item.open > .nav-link { color:var(--c-white) }
.nav-chev {
  display:inline-block; width:9px; height:9px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--tr-f);
}
.nav-item.open > .nav-link .nav-chev { transform:rotate(-135deg) translateY(2px) }

.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.hdr-phone { font-family:var(--ff-h); font-weight:600; font-size:.875rem; color:rgba(255,255,255,.72); transition:color var(--tr-f) }
.hdr-phone:hover { color:var(--c-white) }

.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--c-white); border-radius:2px; transition:all var(--tr) }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* ═══════════════════════════════════════════════════
   7. MEGA DROPDOWN
═══════════════════════════════════════════════════ */
.mega-drop {
  position:absolute; top:calc(var(--hh) - 1px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:760px; background:var(--c-white);
  border-radius:var(--r-md); box-shadow:var(--sh-xl);
  border:1px solid var(--c-border);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--tr), transform var(--tr), visibility var(--tr);
  z-index:999;
}
.nav-item:hover .mega-drop,
.nav-item.open  .mega-drop {
  opacity:1; visibility:visible; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.mega-drop::before {
  content:''; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-bottom-color:var(--c-white); border-top:none;
}
.mega-inner { display:flex }
.mega-cols  { display:flex; flex:1 }
.mega-col   { flex:1; padding:24px 20px; border-right:1px solid var(--c-border) }
.mega-col:last-child { border-right:none }
.mega-col-ttl { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-text-lt); margin-bottom:10px; padding:0 4px }
.mega-links { display:flex; flex-direction:column; gap:2px }
.mega-link {
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:var(--r-sm);
  font-size:.875rem; color:var(--c-text); font-weight:500; transition:all var(--tr-f);
}
.mega-link:hover { background:var(--c-blue-lt); color:var(--c-blue) }
.mega-link-ico { width:26px; height:26px; border-radius:5px; background:var(--c-light); color:var(--c-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.mega-link-ico svg { width:15px; height:15px }
.mega-link:hover .mega-link-ico { background:var(--c-blue); color:var(--c-white) }

.mega-feat {
  width:210px; flex-shrink:0;
  background:linear-gradient(145deg,var(--c-nav) 0%,#241348 100%);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:24px 18px;
  display:flex; flex-direction:column; gap:12px;
}
.mega-feat-card {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm); padding:14px; cursor:pointer; transition:all var(--tr-f);
}
.mega-feat-card:hover { background:rgba(255,255,255,.12) }
.mfc-title { font-size:.78rem; font-weight:700; color:var(--c-white); margin-bottom:3px }
.mfc-num   { font-size:1.35rem; font-weight:800; color:var(--c-green); font-family:var(--ff-h) }
.mfc-lbl   { font-size:.68rem; color:rgba(255,255,255,.45) }
.mfc-cta   { font-size:.72rem; color:var(--c-green); font-weight:600; margin-top:6px }

/* ═══════════════════════════════════════════════════
   8. MOBILE NAV
═══════════════════════════════════════════════════ */
.mob-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:1099; opacity:0; transition:opacity var(--tr);
}
.mob-overlay.open { opacity:1 }
.mob-nav {
  position:fixed; top:0; right:-100%; width:min(360px,100vw);
  height:100vh; overflow-y:auto; background:var(--c-nav);
  z-index:1100; transition:right .35s cubic-bezier(.25,.46,.45,.94);
  display:flex; flex-direction:column;
}
.mob-nav.open { right:0 }
.mob-nav-hd {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--c-nav-b);
}
.mob-close { background:none; border:none; color:var(--c-white); cursor:pointer; line-height:1; padding:4px 8px; display:flex }
.mob-close svg { width:22px; height:22px }
.mob-body  { flex:1; padding:8px 0 }
.mob-sec   { border-bottom:1px solid var(--c-nav-b) }
.mob-toggle {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:14px 20px; background:none; border:none;
  color:rgba(255,255,255,.88); font-family:var(--ff-h); font-weight:600;
  font-size:.9rem; cursor:pointer; text-align:left;
}
.mob-toggle .chev { display:inline-flex; opacity:.55; transition:transform var(--tr-f) }
.mob-sec.open .mob-toggle .chev { transform:rotate(180deg) }
.mob-sub { display:none; background:rgba(0,0,0,.25); padding:4px 0 8px }
.mob-sec.open .mob-sub { display:block }
.mob-sub a { display:block; padding:9px 32px; font-size:.85rem; color:rgba(255,255,255,.6); transition:color var(--tr-f) }
.mob-sub a:hover { color:var(--c-green) }
.mob-footer { padding:20px; border-top:1px solid var(--c-nav-b) }
.mob-footer .btn { width:100%; justify-content:center; margin-bottom:10px }
.mob-phone { display:block; text-align:center; color:rgba(255,255,255,.65); font-size:.9rem; font-weight:600 }

/* ═══════════════════════════════════════════════════
   9. HERO
═══════════════════════════════════════════════════ */
.site-hero {
  background:var(--c-nav);
  background-image:
    radial-gradient(ellipse 80% 60% at 60% 30%, rgba(91,47,196,.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(231,119,62,.1) 0%, transparent 60%);
  padding:clamp(64px,9vw,112px) 0 clamp(56px,8vw,96px);
  overflow:hidden; position:relative;
}
.site-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; position:relative; z-index:1 }
.hero-badge-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(231,119,62,.15); border:1px solid rgba(231,119,62,.3);
  color:var(--c-green); padding:5px 14px 5px 10px;
  border-radius:var(--r-f); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px;
}
.hero-badge-pill svg { width:14px; height:14px; flex-shrink:0 }
.hero-badge-dot { width:7px; height:7px; background:var(--c-green); border-radius:50%; animation:pdot 2s infinite }
@keyframes pdot { 0%,100%{box-shadow:0 0 0 0 rgba(231,119,62,.5)} 50%{box-shadow:0 0 0 6px rgba(231,119,62,0)} }
.hero-h1 { color:var(--c-white); margin-bottom:20px; line-height:1.1 }
.hero-h1 em { color:var(--c-green); font-style:normal }
.hero-desc { font-size:1.1rem; color:rgba(255,255,255,.7); margin-bottom:36px; line-height:1.75 }
.hero-btns { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:44px }
.hero-stats { display:flex; gap:clamp(16px,4vw,40px); flex-wrap:wrap; padding-top:32px; border-top:1px solid rgba(255,255,255,.1) }
.hs-num   { font-family:var(--ff-h); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; color:var(--c-white); line-height:1.1 }
.hs-num span { color:var(--c-green) }
.hs-lbl   { font-size:.75rem; color:rgba(255,255,255,.48); text-transform:uppercase; letter-spacing:.07em; margin-top:2px }

/* Dashboard visual */
.hero-visual { position:relative }
.hero-dash {
  background:linear-gradient(135deg,#241348 0%,#1a0e42 100%);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px); box-shadow:var(--sh-xl); position:relative; overflow:hidden;
}
.hero-dash::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--c-orange),var(--c-magenta)) }
.dash-dots { display:flex; align-items:center; gap:6px; margin-bottom:20px }
.dd { width:10px; height:10px; border-radius:50% }
.dd:nth-child(1){background:#ff5f57} .dd:nth-child(2){background:#febc2e} .dd:nth-child(3){background:#28c840}
.dash-lbl { margin-left:auto; font-size:.68rem; color:rgba(255,255,255,.3); font-family:var(--ff-h) }
.dash-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px }
.dc {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-sm); padding:12px; text-align:center;
}
.dc .num { font-family:var(--ff-h); font-size:1.1rem; font-weight:800; color:var(--c-white); line-height:1 }
.dc .lbl { font-size:.6rem; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.07em; margin-top:3px }
.dc.hi   .num { color:var(--c-green) }
.dash-chart-wrap { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:var(--r-sm); padding:14px; margin-bottom:12px }
.dc-lbl  { font-size:.62rem; color:rgba(255,255,255,.32); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px }
.dc-bars { display:flex; align-items:flex-end; gap:5px; height:52px }
.dc-bar  { flex:1; border-radius:2px 2px 0 0; background:rgba(91,47,196,.7); transition:opacity var(--tr) }
.dc-bar:nth-child(4),.dc-bar:nth-child(7),.dc-bar:last-child { background:var(--c-green) }
.dash-live { display:flex; align-items:center; gap:8px; font-size:.7rem; color:rgba(255,255,255,.38) }
.dl-dot    { width:6px; height:6px; border-radius:50%; background:var(--c-green); animation:pdot 2s infinite }

.dash-float {
  position:absolute; bottom:-16px; right:-16px;
  background:var(--c-white); border-radius:var(--r-md);
  padding:12px 16px; box-shadow:var(--sh-lg);
  display:flex; align-items:center; gap:10px;
  animation:flt 4s ease-in-out infinite;
}
@keyframes flt { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.df-icon { width:30px; height:30px; flex-shrink:0; border-radius:50%; background:var(--c-orange-lt); color:var(--c-orange); display:flex; align-items:center; justify-content:center }
.df-icon svg { width:16px; height:16px }
.df-num  { font-family:var(--ff-h); font-weight:800; font-size:1.1rem; color:var(--c-blue); line-height:1 }
.df-lbl  { font-size:.65rem; color:var(--c-text-lt); margin-top:2px }

/* ═══════════════════════════════════════════════════
   10. LOGO STRIP / MARQUEE
═══════════════════════════════════════════════════ */
.logo-strip { background:var(--c-off); border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); padding:18px 0; overflow:hidden }
.ls-track {
  display:flex; align-items:center; gap:clamp(32px,5vw,64px);
  animation:marquee 28s linear infinite; white-space:nowrap;
}
.ls-track + .ls-track { display:none }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ls-item { font-family:var(--ff-h); font-weight:700; font-size:.95rem; color:var(--c-mid); letter-spacing:.03em }

/* ═══════════════════════════════════════════════════
   11. STATS BAR
═══════════════════════════════════════════════════ */
.stats-bar { background:var(--c-blue-dk); padding:clamp(28px,4vw,48px) 0 }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.1) }
.stat-block { background:var(--c-blue-dk); padding:clamp(24px,3vw,36px) 24px; text-align:center }
.stat-num   { font-family:var(--ff-h); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--c-white); line-height:1.05; margin-bottom:6px }
.stat-num span { color:var(--c-green) }
.stat-lbl   { font-size:.78rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.1em; font-weight:600 }

/* ═══════════════════════════════════════════════════
   12. SERVICES SECTION
═══════════════════════════════════════════════════ */
.services-sec { padding:clamp(64px,9vw,112px) 0 }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px }
.svc-card {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,36px);
  transition:all var(--tr); cursor:pointer; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.svc-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--c-orange),var(--c-magenta));
  transform:scaleX(0); transform-origin:left; transition:transform var(--tr);
}
.svc-card:hover { border-color:var(--c-blue-md); transform:translateY(-4px); box-shadow:var(--sh-lg) }
.svc-card:hover::before { transform:scaleX(1) }
.svc-icon { width:52px; height:52px; background:var(--c-blue-lt); color:var(--c-blue); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:all var(--tr) }
.svc-icon svg { width:24px; height:24px }
.svc-card:hover .svc-icon { background:var(--c-blue); color:var(--c-white) }
.svc-title { font-size:1.1rem; margin-bottom:8px }
.svc-desc  { font-size:.88rem; color:var(--c-text-lt); line-height:1.72; margin-bottom:20px; flex:1 }
.svc-stat  { font-size:.78rem; color:var(--c-blue); font-weight:700; font-family:var(--ff-h); margin-bottom:12px; display:flex; align-items:center; gap:5px }
.svc-stat svg { flex-shrink:0 }
.svc-link  { display:flex; align-items:center; gap:6px; font-size:.875rem; font-weight:600; color:var(--c-blue); margin-top:auto }

/* ═══════════════════════════════════════════════════
   13. RESULTS SECTION
═══════════════════════════════════════════════════ */
.results-sec { background:var(--c-off); padding:clamp(64px,9vw,112px) 0 }
.results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:clamp(32px,5vw,56px) }
.result-card {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  box-shadow:var(--sh-xs); transition:all var(--tr);
}
.result-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) }
.rc-client { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-lt); margin-bottom:10px }
.rc-stat   { font-family:var(--ff-h); font-size:clamp(2rem,4vw,2.75rem); font-weight:800; color:var(--c-blue); margin-bottom:6px; line-height:1 }
.rc-stat span { color:var(--c-green) }
.rc-desc   { font-size:.875rem; color:var(--c-text-lt); line-height:1.65 }
.rc-tag    { display:inline-block; margin-top:10px; padding:3px 10px; background:var(--c-blue-lt); color:var(--c-blue); font-size:.7rem; font-weight:700; border-radius:var(--r-f); text-transform:uppercase; letter-spacing:.07em }

/* ═══════════════════════════════════════════════════
   14. WHY US SECTION
═══════════════════════════════════════════════════ */
.why-sec { padding:clamp(64px,9vw,112px) 0 }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,100px); align-items:center }
.why-feats { display:flex; flex-direction:column; gap:28px }
.why-feat  { display:flex; gap:18px; align-items:flex-start }
.wf-ico { width:44px; height:44px; border-radius:var(--r-md); background:var(--c-blue-lt); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--c-blue) }
.wf-ico svg { width:20px; height:20px }
.wf-h   { font-size:1rem; margin-bottom:4px }
.wf-p   { font-size:.88rem; color:var(--c-text-lt); line-height:1.72 }
.why-visual {
  background:linear-gradient(145deg,var(--c-nav) 0%,#241348 100%);
  border-radius:var(--r-xl); padding:clamp(28px,4vw,48px); box-shadow:var(--sh-xl);
}
.award-row { display:flex; align-items:center; gap:14px; padding:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); margin-bottom:10px }
.award-ico   { width:34px; height:34px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--c-orange) }
.award-ico svg { width:18px; height:18px }
.award-title { font-family:var(--ff-h); font-weight:700; font-size:.875rem; color:var(--c-white) }
.award-sub   { font-size:.72rem; color:rgba(255,255,255,.42) }
.why-count   { text-align:center; padding:20px; border-top:1px solid rgba(255,255,255,.1); margin-top:14px }
.why-count strong { font-family:var(--ff-h); font-size:2.25rem; font-weight:800; color:var(--c-green) }
.why-count p { font-size:.78rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.08em; margin-top:4px }

/* ═══════════════════════════════════════════════════
   15. TESTIMONIALS
═══════════════════════════════════════════════════ */
.testi-sec   { background:var(--c-off); padding:clamp(64px,9vw,112px) 0 }
.testi-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px }
.testi-card  {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,36px);
  box-shadow:var(--sh-xs); display:flex; flex-direction:column; transition:all var(--tr);
}
.testi-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md) }
.testi-stars  { color:var(--c-orange); display:flex; gap:3px; margin-bottom:16px }
.testi-quote  { font-size:.95rem; line-height:1.8; flex:1; color:var(--c-text) }
.testi-author { margin-top:24px; display:flex; align-items:center; gap:12px; padding-top:20px; border-top:1px solid var(--c-border) }
.ta-avatar { width:44px; height:44px; border-radius:50%; background:var(--c-blue); display:flex; align-items:center; justify-content:center; font-family:var(--ff-h); font-weight:700; color:var(--c-white); font-size:.9rem; flex-shrink:0 }
.ta-name   { font-weight:700; font-size:.875rem }
.ta-role   { font-size:.75rem; color:var(--c-text-lt) }
.ratings-row { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; margin-top:clamp(32px,5vw,56px) }
.rating-item { text-align:center }
.ri-source { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-lt); margin-bottom:4px }
.ri-score  { font-family:var(--ff-h); font-size:2rem; font-weight:800; color:var(--c-text) }
.ri-stars  { color:var(--c-orange); display:flex; gap:2px; justify-content:center; margin-top:4px }

/* ═══════════════════════════════════════════════════
   16. CTA SECTION
═══════════════════════════════════════════════════ */
.cta-sec {
  background:var(--c-nav);
  background-image:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(91,47,196,.3) 0%, transparent 70%);
  padding:clamp(64px,9vw,112px) 0; text-align:center; position:relative; overflow:hidden;
}
.cta-sec::before {
  content:''; position:absolute; bottom:-80px; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(231,119,62,.07) 0%,transparent 70%);
  pointer-events:none;
}
.cta-eyebrow { display:block; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-green); margin-bottom:18px }
.cta-title   { font-size:clamp(2rem,4vw,3.25rem); color:var(--c-white); margin-bottom:16px }
.cta-title em { color:var(--c-green); font-style:normal }
.cta-sub     { font-size:1.05rem; color:rgba(255,255,255,.62); max-width:560px; margin:0 auto 40px; line-height:1.75 }
.cta-btns    { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1 }

/* ═══════════════════════════════════════════════════
   16b. PLATFORM STRIP
═══════════════════════════════════════════════════ */
.platform-strip { padding:clamp(28px,4vw,40px) 0; border-bottom:1px solid var(--c-border) }
.platform-strip .container { display:flex; align-items:center; justify-content:center; gap:clamp(20px,4vw,40px); flex-wrap:wrap }
.platform-strip-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-lt); flex-shrink:0 }
.platform-chip { display:inline-flex; align-items:center; gap:8px; color:var(--c-text); font-weight:700; font-family:var(--ff-h); font-size:.9rem }
.platform-chip svg { width:18px; height:18px; color:var(--c-navy) }

/* ═══════════════════════════════════════════════════
   16c. FREE AUDIT / RISK-REVERSAL BANNER
═══════════════════════════════════════════════════ */
.audit-sec {
  background:var(--c-nav); position:relative; overflow:hidden;
  padding:clamp(48px,7vw,80px) 0;
}
.audit-sec::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 90% at 85% 20%, rgba(231,119,62,.16) 0%, transparent 60%),
             radial-gradient(ellipse 50% 70% at 10% 90%, rgba(145,33,127,.22) 0%, transparent 60%);
}
.audit-grid { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(20px,4vw,40px); align-items:center }
.audit-badge {
  width:64px; height:64px; border-radius:50%; background:rgba(231,119,62,.15);
  border:1px solid rgba(231,119,62,.35); color:var(--c-orange);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.audit-badge svg { width:30px; height:30px }
.audit-eyebrow { display:block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--c-orange); margin-bottom:10px }
.audit-title { font-size:clamp(1.4rem,2.6vw,2rem); color:var(--c-white); margin-bottom:8px; line-height:1.25 }
.audit-desc  { font-size:.95rem; color:rgba(255,255,255,.62); max-width:560px; line-height:1.7 }
.audit-cta   { flex-shrink:0 }
@media (max-width:900px) {
  .audit-grid { grid-template-columns:1fr; text-align:center }
  .audit-badge { margin-inline:auto }
  .audit-desc  { margin-inline:auto }
}

/* ═══════════════════════════════════════════════════
   16d. PROCESS TIMELINE — What Happens Next
═══════════════════════════════════════════════════ */
.timeline-sec { padding:clamp(64px,9vw,112px) 0; background:var(--c-off) }
.timeline-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; margin-top:clamp(32px,5vw,56px) }
.timeline-card {
  background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,28px); position:relative;
}
.timeline-num {
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--c-orange),var(--c-magenta)); color:var(--c-white);
  font-family:var(--ff-h); font-weight:800; font-size:1rem; margin-bottom:16px;
}
.timeline-when { display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--c-text-lt); margin-bottom:6px }
.timeline-h { font-size:1rem; margin-bottom:8px }
.timeline-p  { font-size:.85rem; color:var(--c-text-lt); line-height:1.65 }
.timeline-card:not(:last-child)::after {
  content:''; position:absolute; top:38px; left:100%; width:20px; height:2px;
  background:var(--c-border); display:none;
}
@media (min-width:1101px) { .timeline-card:not(:last-child)::after { display:block } }
@media (max-width:1100px) { .timeline-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px)  { .timeline-grid { grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════
   17. BLOG PREVIEW
═══════════════════════════════════════════════════ */
.blog-prev-sec { padding:clamp(64px,9vw,112px) 0 }
.blog-grid     { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px }
.blog-card     { border-radius:var(--r-lg); overflow:hidden; background:var(--c-white); border:1px solid var(--c-border); transition:all var(--tr) }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg) }
.bc-thumb      { aspect-ratio:16/9; background:var(--c-light); overflow:hidden }
.bc-thumb img  { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.blog-card:hover .bc-thumb img { transform:scale(1.04) }
.bc-body       { padding:clamp(20px,3vw,28px) }
.bc-cat        { display:inline-block; padding:3px 10px; background:var(--c-blue-lt); color:var(--c-blue); font-size:.7rem; font-weight:700; border-radius:var(--r-f); text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px }
.bc-title      { font-size:1.05rem; margin-bottom:8px; line-height:1.35 }
.bc-title a    { color:var(--c-text); transition:color var(--tr-f) }
.bc-title a:hover { color:var(--c-blue) }
.bc-excerpt    { font-size:.875rem; color:var(--c-text-lt); line-height:1.7; margin-bottom:14px }
.bc-meta       { display:flex; gap:12px; font-size:.75rem; color:var(--c-text-lt) }

/* ═══════════════════════════════════════════════════
   18. FOOTER
═══════════════════════════════════════════════════ */
.site-footer { background:var(--c-nav) }
.ftr-stats   { background:#0f0828; padding:clamp(24px,4vw,44px) 0; border-bottom:1px solid var(--c-nav-b) }
.ftr-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.06) }
.ftr-stat   { background:#0f0828; padding:clamp(18px,3vw,32px) 20px; text-align:center }
.ftr-s-num  { font-family:var(--ff-h); font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; color:var(--c-green); line-height:1.05; margin-bottom:4px }
.ftr-s-lbl  { font-size:.7rem; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.1em }
.ftr-main   { padding:clamp(48px,7vw,80px) 0 clamp(32px,5vw,56px) }
.ftr-grid   { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px) }
.ftr-brand .logo-text { font-size:1.4rem; margin-bottom:14px; display:block }
.ftr-desc   { font-size:.875rem; color:rgba(255,255,255,.45); line-height:1.75; margin-bottom:18px }
.ftr-phone  { font-family:var(--ff-h); font-weight:700; color:var(--c-white); font-size:1.05rem; margin-bottom:16px; display:block }
.ftr-social { display:flex; gap:8px }
.social-ico {
  width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); transition:all var(--tr-f);
}
.social-ico svg { width:16px; height:16px }
.social-ico:hover { background:var(--c-blue); border-color:var(--c-blue); color:var(--c-white) }
.ftr-col-ttl { font-family:var(--ff-h); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.45); margin-bottom:14px }
.ftr-links   { display:flex; flex-direction:column; gap:7px }
.ftr-links a { font-size:.875rem; color:rgba(255,255,255,.52); transition:color var(--tr-f) }
.ftr-links a:hover { color:var(--c-green) }
.ftr-bottom  { border-top:1px solid var(--c-nav-b); padding:18px 0 }
.ftr-bottom .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px }
.ftr-copy    { font-size:.78rem; color:rgba(255,255,255,.3) }
.ftr-bot-links { display:flex; gap:18px }
.ftr-bot-links a { font-size:.75rem; color:rgba(255,255,255,.3); transition:color var(--tr-f) }
.ftr-bot-links a:hover { color:rgba(255,255,255,.6) }

/* ═══════════════════════════════════════════════════
   19. INNER PAGE HERO / BREADCRUMBS
═══════════════════════════════════════════════════ */
.pg-hero {
  background:var(--c-nav);
  background-image:radial-gradient(ellipse 60% 60% at 30% 50%, rgba(91,47,196,.2) 0%, transparent 70%);
  padding:clamp(40px,6vw,72px) 0; color:var(--c-white);
}
.pg-title    { font-size:clamp(1.9rem,4vw,3rem); color:var(--c-white); margin-bottom:12px }
.pg-desc     { font-size:1.05rem; color:rgba(255,255,255,.62); max-width:600px; line-height:1.75 }
.breadcrumbs { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.78rem; color:rgba(255,255,255,.45); margin-bottom:14px }
.breadcrumbs a { color:rgba(255,255,255,.45); transition:color var(--tr-f) }
.breadcrumbs a:hover { color:var(--c-green) }
.breadcrumbs .sep { opacity:.4; font-size:.68rem }

/* ═══════════════════════════════════════════════════
   20. FORMS
═══════════════════════════════════════════════════ */
.form-group  { display:flex; flex-direction:column; gap:5px; margin-bottom:18px }
.form-label  { font-size:.875rem; font-weight:600; color:var(--c-text) }
.form-control {
  padding:11px 14px; border:1.5px solid var(--c-border);
  border-radius:var(--r-sm); font-size:.95rem; font-family:inherit;
  transition:border-color var(--tr),box-shadow var(--tr); background:var(--c-white);
}
.form-control:focus { outline:none; border-color:var(--c-blue); box-shadow:0 0 0 3px rgba(91,47,196,.12) }
.form-control::placeholder { color:var(--c-mid) }
select.form-control { cursor:pointer }
textarea.form-control { resize:vertical; min-height:110px }
.form-2col  { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-ok    { background:#e7f9ef; color:#047857; padding:14px 18px; border-radius:var(--r-sm); font-weight:600; border-left:4px solid #10b981 }
.form-err   { background:#fee2e2; color:#b91c1c; padding:14px 18px; border-radius:var(--r-sm); font-weight:600; border-left:4px solid #ef4444 }

/* ═══════════════════════════════════════════════════
   21. FAQ
═══════════════════════════════════════════════════ */
.faq-list  { display:flex; flex-direction:column; gap:8px }
.faq-item  { border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden }
.faq-q {
  width:100%; text-align:left; background:none; border:none;
  padding:18px 20px; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--ff-h); font-weight:600; font-size:.975rem; color:var(--c-text);
  cursor:pointer; transition:background var(--tr-f); gap:12px;
}
.faq-q:hover { background:var(--c-off) }
.faq-q[aria-expanded="true"] { background:var(--c-blue-lt); color:var(--c-blue) }
.faq-ico { font-size:1.25rem; font-weight:300; line-height:1; flex-shrink:0; transition:transform var(--tr-f) }
.faq-q[aria-expanded="true"] .faq-ico { transform:rotate(45deg) }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease }
.faq-a-in { padding:0 20px 18px; font-size:.9rem; color:var(--c-text-lt); line-height:1.75 }

/* ═══════════════════════════════════════════════════
   22. SKIP LINK
═══════════════════════════════════════════════════ */
.skip-link { position:absolute; top:-99px; left:16px; background:var(--c-blue); color:var(--c-white); padding:8px 16px; border-radius:var(--r-sm); font-weight:700; z-index:9999; transition:top var(--tr-f) }
.skip-link:focus { top:16px }

/* ═══════════════════════════════════════════════════
   23. RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width:1150px) {
  /* Prevent the 760px-wide mega-dropdown from overflowing narrower desktop/tablet viewports */
  .mega-drop { min-width:min(760px,92vw); left:auto; right:0; transform:translateY(8px) }
  .nav-item:hover .mega-drop,.nav-item.open .mega-drop { transform:translateY(0) }
  .mega-drop::before { left:auto; right:24px; transform:none }
}
@media (max-width:1100px) {
  .hero-grid { grid-template-columns:1fr }
  .hero-visual { display:none }
  .why-grid  { grid-template-columns:1fr }
  .ftr-grid  { grid-template-columns:1fr 1fr 1fr }
  .ftr-brand { grid-column:1/-1 }
}
@media (max-width:900px) {
  .primary-nav,.hdr-phone,.header-actions .btn { display:none }
  .hamburger { display:flex }
  .stats-grid { grid-template-columns:repeat(2,1fr) }
  .ftr-stats-grid { grid-template-columns:repeat(2,1fr) }
  .platform-strip .container { justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px }
}
@media (max-width:640px) {
  .ftr-grid { grid-template-columns:1fr 1fr }
  .ftr-brand { grid-column:1/-1 }
  .form-2col { grid-template-columns:1fr }
  .cta-btns  { flex-direction:column; align-items:center }
  .hero-stats { gap:20px }
  .stats-grid,.ftr-stats-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:480px) {
  .hero-btns { flex-direction:column; align-items:flex-start }
  .tb-right  { display:none }
}
@media print {
  .site-topbar,.site-header,.mob-nav,.mob-overlay,.cta-sec,.ftr-stats { display:none }
  body { color:#000 }
}