/*
Theme Name: WebFX Revenue Theme
Theme URI: https://yoursite.com
Author: Your Agency
Description: A pixel-faithful WordPress theme inspired by WebFX.com — mega-menus, animated stats, service cards, full SEO schema, GTM/GA4, conversion-optimised front page.
Version: 2.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, seo, full-width-template, custom-menu, custom-logo, responsive-layout
*/

/* ═══════════════════════════════════════════════════
   0. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --c-blue:        #0d5eaf;
  --c-blue-dk:     #093f7a;
  --c-blue-md:     #1a7fd4;
  --c-blue-lt:     #e8f2fc;
  --c-green:       #17c37b;
  --c-green-dk:    #0ea869;
  --c-white:       #ffffff;
  --c-off:         #f7f9fc;
  --c-light:       #eef1f7;
  --c-border:      #d9e2ef;
  --c-mid:         #9aa5b8;
  --c-text-lt:     #5a6a7e;
  --c-text:        #1a2332;
  --c-dark:        #0f1c2e;
  --c-nav:         #07111f;
  --c-nav-b:       #172840;
  --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-grn: 0 6px 24px rgba(23,195,123,.38);
  --sh-blu: 0 6px 28px rgba(13,94,175,.35);
  --tr:     .25s ease; --tr-f: .15s ease;
}

/* ═══════════════════════════════════════════════════
   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) }

/* ═══════════════════════════════════════════════════
   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); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0 }
.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%,#0d2548 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); font-size:1.5rem; cursor:pointer; line-height:1; padding:4px 8px }
.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 { font-style:normal; font-size:.7rem; 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(13,94,175,.25) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(23,195,123,.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(23,195,123,.15); border:1px solid rgba(23,195,123,.3);
  color:var(--c-green); padding:5px 14px 5px 8px;
  border-radius:var(--r-f); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px;
}
.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(23,195,123,.5)} 50%{box-shadow:0 0 0 6px rgba(23,195,123,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,#0d2548 0%,#091a34 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-green),var(--c-blue-md)) }
.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(13,94,175,.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 { font-size:1.2rem }
.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-blue),var(--c-blue-md));
  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); border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; transition:all var(--tr) }
.svc-card:hover .svc-icon { background:var(--c-blue) }
.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 }
.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; font-size:1.1rem; flex-shrink:0; color:var(--c-blue) }
.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%,#0d2548 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   { font-size:1.75rem }
.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:#f59e0b; font-size:1rem; margin-bottom:16px; letter-spacing:3px }
.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:#f59e0b; font-size:.75rem; margin-top:2px }

/* ═══════════════════════════════════════════════════
   16. CTA SECTION
═══════════════════════════════════════════════════ */
.cta-sec {
  background:var(--c-nav);
  background-image:radial-gradient(ellipse 70% 80% at 50% 50%, rgba(13,94,175,.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(23,195,123,.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 }

/* ═══════════════════════════════════════════════════
   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:#040d18; 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:#040d18; 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;
  font-size:.82rem; color:rgba(255,255,255,.5); transition:all var(--tr-f);
}
.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(13,94,175,.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(13,94,175,.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 var(--c-green) }
.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: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) }
}
@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 }
}
/* Remove dropdown icons completely */
.mega-link-ico 
{
  display: none !important;
}
.mega-link 
{
  padding-left: 10px; /* reduce spacing */
  gap: 0; /* remove gap */
}