/* ═══════════════════════════════════════════════════
   SELLERVINE — Design System v3
   Domain: sellervine.com
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ── TOKENS ─── */
:root {
  --bg:          #05080F;
  --bg2:         #080D18;
  --surface:     #0C1322;
  --card:        #101829;
  --card2:       #141F33;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.13);
  --white:       #F4F8FF;
  --muted:       #7A8BA8;
  --muted2:      #9BAEC8;
  --amber:       #FF5C1A;
  --amber-l:     #FF7A3D;
  --amber-dim:   rgba(255,92,26,0.13);
  --amber-glow:  rgba(255,92,26,0.30);
  --blue:        #2563EB;
  --blue-l:      #4B7EF5;
  --blue-dim:    rgba(37,99,235,0.13);
  --blue-glow:   rgba(37,99,235,0.28);
  --green:       #10D97E;
  --green-dim:   rgba(16,217,126,0.11);
  --yellow:      #FFCB47;
  --r:           12px;
  --r-lg:        20px;
  --r-xl:        28px;
  --shadow:      0 24px 64px rgba(0,0,0,0.5);
  --shadow-sm:   0 8px 24px rgba(0,0,0,0.3);
  --head:        'Syne', system-ui, sans-serif;
  --body:        'DM Sans', system-ui, sans-serif;
  --tr:          all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── RESET ─── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body { background:var(--bg); color:var(--white); font-family:var(--body); overflow-x:hidden; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100% }
ul { list-style:none }
button { font-family:var(--body); cursor:pointer; border:none; outline:none; background:none }

::-webkit-scrollbar { width:3px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--amber),var(--blue)); border-radius:2px }
::selection { background:var(--amber-dim); color:var(--amber) }

/* ── LAYOUT ─── */
.container      { max-width:1200px; margin:0 auto; padding:0 28px }
.container-wide { max-width:1440px; margin:0 auto; padding:0 28px }
.section        { padding:96px 0 }
.section-alt    { padding:96px 0; background:var(--bg2) }

/* ── TYPOGRAPHY ─── */
h1,h2,h3,h4,h5 { font-family:var(--head); line-height:1.1; letter-spacing:-0.02em }
p { line-height:1.75 }

/* ── NOISE OVERLAY ─── */
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

/* ── TAGS ─── */
.tag { display:inline-flex; align-items:center; gap:8px; font-size:0.71rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--amber); background:var(--amber-dim); border:1px solid rgba(255,92,26,0.22); padding:6px 14px; border-radius:100px }
.tag::before { content:''; width:5px; height:5px; background:var(--amber); border-radius:50%; box-shadow:0 0 6px var(--amber); flex-shrink:0 }
.grad { background:linear-gradient(135deg,var(--amber) 0%,#FF9D4D 40%,var(--blue-l) 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

/* ── SECTION TITLE ─── */
.sec-title { text-align:center; margin-bottom:64px }
.sec-title .tag { margin-bottom:18px }
.sec-title h2 { font-size:clamp(1.9rem,3.5vw,3rem); margin-bottom:14px }
.sec-title p { color:var(--muted2); font-size:1.04rem; max-width:560px; margin:0 auto; line-height:1.72 }

/* ── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-size:0.92rem; font-weight:500; padding:13px 26px; border-radius:100px; transition:var(--tr); white-space:nowrap; cursor:pointer }
.btn-primary  { background:linear-gradient(135deg,var(--amber),#D94A0A); color:#fff; box-shadow:0 4px 20px rgba(255,92,26,0.25) }
.btn-primary:hover  { transform:translateY(-2px); box-shadow:0 12px 32px var(--amber-glow) }
.btn-secondary { background:transparent; color:var(--white); border:1px solid var(--border2) }
.btn-secondary:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.22) }
.btn-blue  { background:linear-gradient(135deg,var(--blue),#1A4FD0); color:#fff }
.btn-blue:hover { transform:translateY(-2px); box-shadow:0 12px 28px var(--blue-glow) }
.btn-lg { padding:16px 36px; font-size:1rem }

/* ── PILLS ─── */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:500; padding:4px 12px; border-radius:100px }
.pill-green { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,217,126,0.2) }
.pill-blue  { background:var(--blue-dim);  color:var(--blue-l); border:1px solid rgba(75,126,245,0.2) }
.pill-amber { background:var(--amber-dim); color:var(--amber-l); border:1px solid rgba(255,92,26,0.2) }

/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
.nav { position:fixed; top:0; left:0; right:0; z-index:200; padding:20px 0; transition:var(--tr) }
.nav.scrolled { background:rgba(5,8,15,0.92); backdrop-filter:blur(24px); border-bottom:1px solid var(--border); padding:12px 0 }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px }
.nav-logo { font-family:var(--head); font-size:1.6rem; font-weight:800; letter-spacing:-0.03em; display:flex; align-items:center; gap:5px; flex-shrink:0 }
.logo-dot { width:9px; height:9px; background:var(--amber); border-radius:50%; box-shadow:0 0 10px var(--amber); animation:pulse-glow 2.5s ease-in-out infinite }
@keyframes pulse-glow { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.6} }
.nav-links { display:flex; align-items:center; gap:2px }
.nav-links a { display:block; padding:8px 14px; font-size:0.88rem; color:var(--muted2); border-radius:8px; transition:var(--tr); font-weight:500 }
.nav-links a:hover,.nav-links a.active { color:var(--white); background:rgba(255,255,255,0.06) }
.nav-links a.active { position:relative }
.nav-links a.active::after { content:''; position:absolute; bottom:2px; left:14px; right:14px; height:2px; background:var(--amber); border-radius:1px }
.nav-right { display:flex; align-items:center; gap:12px }

.mobile-overlay { display:none; position:fixed; inset:0; z-index:199; background:rgba(5,8,15,0.97); backdrop-filter:blur(20px); flex-direction:column; align-items:center; justify-content:center; gap:12px }
.mobile-overlay.open { display:flex }
.mobile-overlay a { font-family:var(--head); font-size:2rem; font-weight:700; color:rgba(255,255,255,0.5); transition:color 0.2s; padding:6px 0 }
.mobile-overlay a:hover { color:var(--white) }
.mobile-overlay .btn { margin-top:24px }

/* ══════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════ */
.page-hero { padding:160px 0 80px; position:relative; overflow:hidden; text-align:center; background:var(--bg) }
.page-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 80%) }
.page-hero .tag { margin-bottom:18px }
.page-hero h1 { font-size:clamp(2.4rem,5vw,4rem); margin-bottom:14px; position:relative }
.page-hero p  { color:var(--muted2); font-size:1.08rem; max-width:600px; margin:0 auto; line-height:1.72; position:relative }

/* ══════════════════════════════════
   METRICS
══════════════════════════════════ */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.metric-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 24px; position:relative; overflow:hidden; transition:var(--tr) }
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--blue-l)); transform:scaleX(0); transform-origin:left; transition:transform .4s ease }
.metric-card:hover::before { transform:scaleX(1) }
.metric-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-sm) }
.metric-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px }
.metric-num  { font-family:var(--head); font-size:2.6rem; font-weight:800; line-height:1; margin-bottom:6px }
.metric-desc { font-size:0.84rem; color:var(--muted2); line-height:1.55 }

/* ══════════════════════════════════
   SERVICES CARDS
══════════════════════════════════ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.svc-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:34px 26px; transition:var(--tr) }
.svc-card:hover { border-color:rgba(37,99,235,0.25); transform:translateY(-6px); box-shadow:0 24px 56px rgba(0,0,0,0.4) }
.svc-icon  { width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:22px }
.svc-card h3 { font-family:var(--head); font-size:1.18rem; margin-bottom:10px }
.svc-card p  { font-size:0.87rem; color:var(--muted2); line-height:1.7; margin-bottom:18px }
.svc-list { display:flex; flex-direction:column; gap:8px; margin-bottom:24px }
.svc-list li { display:flex; align-items:center; gap:10px; font-size:0.83rem; color:var(--muted2) }
.svc-list li::before { content:'✓'; width:18px; height:18px; min-width:18px; border-radius:50%; background:var(--blue-dim); border:1px solid rgba(37,99,235,.25); color:var(--blue-l); display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; text-align:center; line-height:18px }
.svc-link { display:inline-flex; align-items:center; gap:6px; font-size:0.84rem; font-weight:500; color:var(--blue-l); transition:gap .2s }
.svc-link:hover { gap:12px }

/* ══════════════════════════════════
   PROCESS
══════════════════════════════════ */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:0 }
.process-steps::before { content:''; position:absolute; top:40px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,var(--amber),var(--blue-l)); opacity:0.25 }
.proc-step { text-align:center; padding:0 20px }
.proc-num  { width:60px; height:60px; border-radius:50%; background:var(--card); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-family:var(--head); font-size:1.1rem; font-weight:700; margin:0 auto 26px; position:relative; z-index:2; transition:var(--tr) }
.proc-step:hover .proc-num { background:linear-gradient(135deg,var(--amber),var(--blue)); border-color:transparent; transform:scale(1.12); box-shadow:0 0 0 8px rgba(255,92,26,0.1) }
.proc-step h3 { font-family:var(--head); font-size:1.05rem; margin-bottom:10px }
.proc-step p  { font-size:0.85rem; color:var(--muted2); line-height:1.65 }

/* ══════════════════════════════════
   RESULTS
══════════════════════════════════ */
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.result-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; transition:var(--tr) }
.result-card:hover { border-color:rgba(255,92,26,0.22); transform:translateY(-4px); box-shadow:0 20px 48px rgba(0,0,0,0.35) }
.result-cat { display:inline-block; font-size:0.69rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; color:var(--amber-l); background:var(--amber-dim); border:1px solid rgba(255,92,26,0.2); padding:4px 12px; border-radius:100px; margin-bottom:18px }
.result-card h3 { font-family:var(--head); font-size:1.08rem; margin-bottom:9px }
.result-card p  { font-size:0.86rem; color:var(--muted2); line-height:1.65; margin-bottom:22px }
.result-metrics { display:flex; gap:20px; padding-top:18px; border-top:1px solid var(--border) }
.rm h4 { font-family:var(--head); font-size:1.45rem; font-weight:700 }
.rm p  { font-size:0.71rem; color:var(--muted); margin-top:2px }
.pos { color:var(--green) }
.neg { color:var(--amber-l) }

/* ══════════════════════════════════
   TESTIMONIALS
══════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.testi-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px; transition:var(--tr) }
.testi-card:hover { border-color:var(--border2); transform:translateY(-4px); box-shadow:var(--shadow-sm) }
.testi-stars { display:flex; gap:3px; margin-bottom:14px }
.testi-stars span { color:var(--yellow) }
.testi-card blockquote { font-size:0.91rem; color:rgba(255,255,255,0.8); line-height:1.78; margin-bottom:22px; font-style:italic; border-left:2px solid var(--amber-dim); padding-left:14px }
.testi-author { display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--border) }
.testi-av   { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--head); font-size:1rem; font-weight:700; flex-shrink:0 }
.testi-author h5    { font-size:0.9rem; font-weight:600 }
.testi-author small { font-size:0.75rem; color:var(--muted); display:block; margin-top:1px }

/* ══════════════════════════════════
   WHY US
══════════════════════════════════ */
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center }
.why-items { display:flex; flex-direction:column; gap:20px; margin-top:32px }
.why-item  { display:flex; gap:14px; align-items:flex-start }
.why-ic { width:48px; height:48px; min-width:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.25rem }
.why-item h4 { font-family:var(--head); font-size:1rem; margin-bottom:3px }
.why-item p  { font-size:0.86rem; color:var(--muted2); line-height:1.6 }
.why-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); padding:34px }
.panel-label { font-size:0.67rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--muted); margin-bottom:22px }
.prog-row  { margin-bottom:15px }
.prog-head { display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:7px }
.prog-head span:last-child { color:var(--green); font-weight:600 }
.prog-track { height:6px; background:rgba(255,255,255,0.05); border-radius:100px; overflow:hidden }
.prog-fill  { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--blue-l),var(--green)) }
.panel-sep  { height:1px; background:var(--border); margin:24px 0 }
.panel-row  { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border) }
.panel-row:last-child { border-bottom:none }
.panel-row span:first-child { font-size:0.85rem; color:var(--muted2) }

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.faq-wrap { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color .2s }
.faq-item.open { border-color:var(--border2) }
.faq-q    { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 26px; cursor:pointer }
.faq-q h3 { font-family:var(--head); font-size:0.96rem; font-weight:600; line-height:1.35 }
.faq-icon { width:32px; height:32px; min-width:32px; border-radius:50%; background:rgba(255,255,255,0.04); border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--muted2); transition:var(--tr) }
.faq-item.open .faq-icon { background:var(--blue-dim); border-color:rgba(37,99,235,0.3); color:var(--blue-l); transform:rotate(45deg) }
.faq-body { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1) }
.faq-body p { padding:0 26px 20px; font-size:0.9rem; color:var(--muted2); line-height:1.75 }

/* ══════════════════════════════════
   CTA BOX
══════════════════════════════════ */
.cta-box { background:linear-gradient(135deg,#0D1E42,#0A1528); border:1px solid rgba(37,99,235,0.22); border-radius:var(--r-xl); padding:72px; text-align:center; position:relative; overflow:hidden }
.cta-box::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,0.12),transparent 70%); top:-150px; left:-150px; pointer-events:none }
.cta-box::after  { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,92,26,0.10),transparent 70%); bottom:-100px; right:-100px; pointer-events:none }
.cta-box .tag { margin-bottom:22px }
.cta-box h2 { font-size:clamp(1.9rem,3.5vw,3rem); margin-bottom:14px; position:relative; z-index:1 }
.cta-box p  { color:var(--muted2); font-size:1.04rem; margin-bottom:38px; max-width:520px; margin-inline:auto; line-height:1.7; position:relative; z-index:1 }
.cta-btns   { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1 }

/* ══════════════════════════════════
   TICKER
══════════════════════════════════ */
.ticker-wrap  { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); padding:20px 0; overflow:hidden }
.ticker-label { text-align:center; font-size:0.67rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:14px }
.ticker-track { display:flex; gap:48px; animation:tick 28s linear infinite; width:max-content }
.ticker-track:hover { animation-play-state:paused }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { font-family:var(--head); font-size:1rem; font-weight:700; color:rgba(255,255,255,0.22); white-space:nowrap; display:flex; align-items:center; gap:6px; transition:color .3s }
.ticker-item:hover { color:rgba(255,255,255,0.6) }
.ticker-sep  { color:var(--amber); opacity:0.35; font-size:0.8rem }

/* ══════════════════════════════════
   HERO (homepage only)
══════════════════════════════════ */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 80px; overflow:hidden }
.hero-orbs { position:absolute; inset:0; pointer-events:none }
.orb { position:absolute; border-radius:50%; filter:blur(90px) }
.orb-1 { width:700px; height:700px; background:radial-gradient(circle,rgba(255,92,26,0.18),transparent 65%); top:-200px; left:-200px; animation:orb-drift 16s ease-in-out infinite }
.orb-2 { width:800px; height:800px; background:radial-gradient(circle,rgba(37,99,235,0.14),transparent 65%); bottom:-200px; right:-200px; animation:orb-drift 20s ease-in-out infinite reverse }
.orb-3 { width:400px; height:400px; background:radial-gradient(circle,rgba(16,217,126,0.07),transparent 70%); top:40%; left:40%; animation:orb-drift 12s ease-in-out infinite 3s }
@keyframes orb-drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-40px) scale(1.05)} 66%{transform:translate(-30px,30px) scale(0.95)} }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 30%,transparent 80%) }
.hero-body { display:grid; grid-template-columns:55fr 45fr; gap:64px; align-items:center; position:relative; z-index:1 }
.hero-eyebrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:28px }
.hero-badge { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid var(--border2); border-radius:100px; padding:5px 14px; font-size:0.72rem; color:var(--muted2); letter-spacing:0.06em }
.hero-badge span { color:var(--yellow) }
.hero-h1 { font-size:clamp(2.8rem,5.5vw,5rem); line-height:1.06; letter-spacing:-0.03em; margin-bottom:22px }
.hero-sub { font-size:1.08rem; color:var(--muted2); line-height:1.8; max-width:520px; margin-bottom:40px }
.hero-ctas { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:52px }
.hero-trust { display:flex; align-items:center; gap:20px; padding-top:28px; border-top:1px solid var(--border) }
.trust-avs { display:flex }
.trust-avs span { width:36px; height:36px; border-radius:50%; border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; margin-left:-10px }
.trust-avs span:first-child { margin-left:0 }
.trust-text .stars { color:var(--yellow); font-size:0.8rem; letter-spacing:1px; margin-bottom:3px }
.trust-text strong { font-size:0.86rem; display:block }
.trust-text p { font-size:0.8rem; color:var(--muted) }
/* Hero card */
.hero-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px; box-shadow:0 40px 80px rgba(0,0,0,0.5); animation:card-float 7s ease-in-out infinite; position:relative }
@keyframes card-float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(0.5deg)} }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px }
.card-lbl { font-size:0.7rem; color:var(--muted); margin-bottom:4px; letter-spacing:0.1em; text-transform:uppercase }
.card-val { font-family:var(--head); font-size:1.8rem; font-weight:700 }
.card-change { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,217,126,0.2); padding:4px 10px; border-radius:8px; font-size:0.78rem; font-weight:600 }
.spark { height:64px; display:flex; align-items:flex-end; gap:5px; margin-bottom:20px }
.sbar { flex:1; border-radius:4px 4px 0 0; position:relative; overflow:hidden }
.sbar::after { content:''; position:absolute; bottom:0; left:0; right:0; border-radius:inherit; animation:sgrow 1.2s cubic-bezier(.4,0,.2,1) forwards }
@keyframes sgrow { from{height:0} to{height:var(--h)} }
.sbar:nth-child(1){--h:40%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(1)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.05s}
.sbar:nth-child(2){--h:58%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(2)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.1s}
.sbar:nth-child(3){--h:45%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(3)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.15s}
.sbar:nth-child(4){--h:72%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(4)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.2s}
.sbar:nth-child(5){--h:66%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(5)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.25s}
.sbar:nth-child(6){--h:88%;background:var(--amber-dim);border:1px solid rgba(255,92,26,.2)}.sbar:nth-child(6)::after{background:linear-gradient(0deg,var(--amber),rgba(255,92,26,0.3));animation-delay:.3s}
.sbar:nth-child(7){--h:80%;background:var(--blue-dim);border:1px solid rgba(37,99,235,.15)}.sbar:nth-child(7)::after{background:linear-gradient(0deg,var(--blue),rgba(37,99,235,0.3));animation-delay:.35s}
.card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.cstat { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:11px }
.cstat-lbl  { font-size:0.67rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:3px }
.cstat-val  { font-family:var(--head); font-size:1.1rem; font-weight:700 }
.cstat-diff { font-size:0.7rem; color:var(--green); margin-top:1px }
.cstat-diff.neg { color:var(--amber-l) }
.fbadge { position:absolute; background:var(--card2); border:1px solid var(--border2); border-radius:100px; padding:8px 16px; font-size:0.77rem; font-weight:500; display:flex; align-items:center; gap:8px; box-shadow:0 12px 32px rgba(0,0,0,0.4); white-space:nowrap; z-index:2 }
.fbadge-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0 }
.fbadge.top-r { top:-18px; right:-18px; animation:fbadge-a 5s ease-in-out infinite }
.fbadge.bot-l { bottom:-18px; left:-18px; animation:fbadge-b 6s ease-in-out infinite }
@keyframes fbadge-a { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)} }
@keyframes fbadge-b { 0%,100%{transform:translateY(0) rotate(1deg)}  50%{transform:translateY(8px) rotate(-2deg)} }

/* ══════════════════════════════════
   FOOTER (shared, full version)
══════════════════════════════════ */
.footer { padding:68px 0 0; border-top:1px solid var(--border); background:var(--bg) }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.8fr; gap:44px }
.footer-logo { font-family:var(--head); font-size:1.5rem; font-weight:800; display:flex; align-items:center; gap:5px; margin-bottom:14px }
.footer-brand p  { font-size:0.87rem; color:var(--muted2); line-height:1.7; margin-bottom:18px }
.footer-contact a { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--muted2); margin-bottom:8px; transition:color .2s }
.footer-contact a:hover { color:var(--white) }
.footer-contact a svg { width:14px; height:14px; fill:var(--muted); flex-shrink:0 }
.footer-socials { display:flex; gap:10px; margin-top:18px }
.fsoc { width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; transition:var(--tr) }
.fsoc:hover { border-color:var(--border2); background:rgba(255,255,255,0.06) }
.fsoc svg { width:15px; height:15px; fill:var(--muted2); transition:fill .2s }
.fsoc:hover svg { fill:var(--white) }
.footer-col h4  { font-family:var(--head); font-size:0.88rem; margin-bottom:18px; font-weight:700 }
.footer-col ul  { display:flex; flex-direction:column; gap:10px }
.footer-col ul a { font-size:0.85rem; color:var(--muted2); transition:color .2s }
.footer-col ul a:hover { color:var(--white) }
.footer-sub h4  { font-family:var(--head); font-size:0.88rem; margin-bottom:8px; font-weight:700 }
.footer-sub p   { font-size:0.84rem; color:var(--muted2); line-height:1.6; margin-bottom:18px }
.sub-row { display:flex; gap:8px }
.sub-row input  { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 14px; font-family:var(--body); font-size:0.84rem; color:var(--white); outline:none; transition:border-color .2s }
.sub-row input::placeholder { color:var(--muted) }
.sub-row input:focus { border-color:rgba(37,99,235,.4) }
.sub-row button { background:linear-gradient(135deg,var(--amber),#D94A0A); color:#fff; border-radius:10px; padding:11px 16px; font-size:0.84rem; font-weight:500; transition:var(--tr) }
.sub-row button:hover { opacity:0.9 }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:22px 0; margin-top:56px; border-top:1px solid var(--border) }
.footer-bottom p    { font-size:0.8rem; color:var(--muted) }
.footer-bottom-links { display:flex; gap:22px }
.footer-bottom-links a { font-size:0.8rem; color:var(--muted); transition:color .2s }
.footer-bottom-links a:hover { color:var(--white) }

/* ══════════════════════════════════
   FORM STYLES
══════════════════════════════════ */
.form-card  { background:var(--card); border:1px solid var(--border); border-radius:var(--r-xl); padding:42px }
.form-title { font-family:var(--head); font-size:1.45rem; margin-bottom:7px }
.form-sub   { font-size:0.87rem; color:var(--muted2); margin-bottom:28px; line-height:1.6 }
.form-group { margin-bottom:18px }
.form-group label { display:block; font-size:0.83rem; font-weight:500; margin-bottom:7px; color:var(--muted2) }
.form-group input,
.form-group select,
.form-group textarea { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 15px; font-family:var(--body); font-size:0.9rem; color:var(--white); outline:none; transition:border-color .2s }
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--muted) }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:rgba(37,99,235,.4); box-shadow:0 0 0 3px rgba(37,99,235,0.08) }
.form-group select option { background:var(--card); color:var(--white) }
.form-group textarea { resize:vertical; min-height:100px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-note { font-size:0.74rem; color:var(--muted); text-align:center; margin-top:12px }

/* WhatsApp */
.wa-btn { display:none; position:fixed; bottom:24px; right:24px; z-index:500; width:54px; height:54px; border-radius:50%; background:#25D366; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(37,211,102,.35); transition:transform .2s }
.wa-btn:hover { transform:scale(1.08) }
@media(max-width:768px) { .wa-btn { display:flex } }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */

  .form-row { grid-template-columns:1fr }
  .hero-ctas { flex-direction:column }
}

/* ══════════════════════════════════
   REVEAL ANIMATION
   Starts visible; animates on scroll
══════════════════════════════════ */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.hidden-init {
  opacity: 0;
  transform: translateY(28px);
}
.reveal.hidden-init.visible {
  opacity: 1;
  transform: translateY(0);
}




/* ════════════════════════════════════════
   HAMBURGER — ONE RULE, NO DUPLICATES
   Default: hidden. Shown ONLY in media query.
════════════════════════════════════════ */
.hamburger {
  display: none;         /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 300;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #F4F8FF;
  border-radius: 2px;
  transition: all 0.28s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════
   MOBILE OVERLAY
════════════════════════════════════════ */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5,8,15,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Hidden by default via opacity+pointer-events */
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.mobile-overlay a {
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
  display: block;
  text-align: center;
  cursor: pointer;
}
.mobile-overlay a:hover,
.mobile-overlay a.active {
  color: #F4F8FF;
  background: rgba(255,255,255,0.05);
}
.mob-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.mob-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ════════════════════════════════════════
   DASHBOARD STAT STRIP
════════════════════════════════════════ */
.dash-stats-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.dash-stat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 8px 16px;
  flex: 1;
  min-width: 130px;
}
.dsp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dsp-label { font-size: 0.73rem; color: var(--muted2); flex: 1; }
.dsp-val { font-family: var(--head); font-size: 0.88rem; font-weight: 700; color: var(--white); }

/* Trust badge cards */
.hero-badges-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.trust-badge-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 4px 8px;
}

/* Reveal */
.reveal { opacity: 1; transform: translateY(0); }

/* Misc */
.nav-cta { padding: 10px 22px !important; font-size: 0.86rem !important; }
.metric-label { font-family: var(--head); font-size: 0.85rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.wa-btn { display: none !important; }

/* Hero visual */
.hero-dashboard { position: relative; animation: card-float 7s ease-in-out infinite; }
.hero-dashboard .dash-svg { width: 100%; max-width: 480px; display: block; border-radius: 20px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }

/* ════════════════════════════════════════
   RESPONSIVE — ALL BREAKPOINTS
   Hamburger ONLY shown inside media query
════════════════════════════════════════ */
@media (max-width: 960px) {
  .hamburger { display: flex; }           /* SHOW hamburger */
  .nav-links { display: none !important; } /* HIDE desktop links */
  .nav-right .btn-secondary { display: none; }
  /* On mobile, hide Free Audit nav button - menu has it */
  .nav-cta { display: none; }
  /* Prevent nav overflow */
  .nav-inner { overflow: visible; }

  .hero-body { grid-template-columns: 1fr !important; gap: 40px; }
  .hero-visual { order: -1; }
  .hero-dashboard .dash-svg { max-width: 100%; }
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .results-grid { grid-template-columns: repeat(2,1fr); }
  .testi-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .process-steps::before { display: none; }
  .cs-grid { grid-template-columns: repeat(2,1fr) !important; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .values-grid { grid-template-columns: repeat(2,1fr); }
  .svc-detail-grid, .svc-detail-grid.rev { grid-template-columns: 1fr; direction: ltr; }
  .about-grid, .audit-grid, .contact-grid { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .cta-box { padding: 48px 28px; }
  .dd-grid { grid-template-columns: 1fr; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}

@media (max-width: 640px) {
  .hero-h1 { font-size: 2.3rem !important; }
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .cs-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-badges-row { flex-direction: column; align-items: flex-start; }
  .dash-stats-strip { flex-direction: column; }
  .cta-box { padding: 32px 18px; }
  .sub-row { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .svc-feats { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 2rem !important; }
  .container { padding: 0 18px; }
}

/* ════════════════════════════════════════
   SMALL MOBILE NAV FIX
════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav-inner {
    gap: 8px;
  }
  .nav-logo {
    font-size: 1.3rem;
  }
  /* Make sure hamburger is always visible and not clipped */
  .nav-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .hamburger {
    flex-shrink: 0;
  }
}