/* ══════════════════════════════════════════════
   COMBINED & DEDUPLICATED CSS
   Merged from style.css + style2.css
══════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bp: #1a56db; --bm: #3b82f6; --bl: #60a5fa; --bpa: #eff6ff;
  --ac: #2563eb; --go: #f59e0b; --wh: #ffffff; --gl: #f8fafc;
  --gr: #64748b; --dk: #1e293b;
  --text-primary: #1e293b; --text-secondary: #475569; --text-light: #94a3b8;
  --border: #e2e8f0; --card-bg: #ffffff; --section-alt: #f8fafc;
}

/* ── RESET & BASE ── */
* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text-primary); background: #ffffff; overflow-x: hidden }

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; backdrop-filter: blur(0px); display: flex; align-items: center; justify-content: space-between; padding: 0 5%; height: 70px; box-shadow: none; transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease }
.logo { font-size: 1.6rem; font-weight: 900; color: #1e293b; letter-spacing: -.5px; text-decoration: none; display: flex; align-items: center; gap: 8px }
.logo span { color: var(--ac) }
.logo-icon { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#2563eb,#06b6d4); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; box-shadow: 0 3px 10px rgba(37,99,235,.35); transition: transform .3s }
.logo:hover .logo-icon { transform: rotate(-8deg) scale(1.08) }
.nav-links { display: flex; gap: 2rem; list-style: none; align-items: center }
.nav-links a { color: rgba(255,255,255,.88); text-decoration: none; font-weight: 500; font-size: .93rem; transition: color .2s; position: relative }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--ac); transition: width .3s }
.nav-links a:hover, .nav-links a.active-link, .nav-links a.active { color: #1e293b }
.nav-links a:hover::after, .nav-links a.active-link::after, .nav-links a.active::after { width: 100% }
.nav-cta { background: var(--ac) !important; color: #fff !important; padding: 9px 22px; border-radius: 25px; font-weight: 700 !important }
.nav-cta::after { display: none !important }
.nav-cta:hover { background: #1d4ed8 !important; transform: translateY(-2px) }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px }
.hamburger span { width: 26px; height: 2px; background: #1e293b; border-radius: 2px; transition: all .3s; display: block }
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand-name {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 2px;
}

.brand-tagline {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  margin-top: 4px;
  display: block;
  font-size: 0.65rem;
  color: #60a5fa;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.whitebg .brand-tagline {
  background: linear-gradient(135deg, #0f2167, #1d4ed8, #0e7490);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-stack { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }
.logo-stack .logo-row { display: flex; align-items: center; gap: 8px; }
.logo-stack .brand-slogan { margin-top: -8px; margin-left: 6px; align-self: stretch; text-align: center; }
.brand-slogan { font-size: 0.55rem; color: #94a3b8; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-family: 'Inter', 'Segoe UI', sans-serif; font-style: italic; }
.whitebg .brand-slogan { color: #64748b; }
.f-brand .brand-name { font-size: 1.45rem; }
.f-brand .brand-tagline { font-size: 0.82rem; margin-top: 4px; }
.whitebg .brand-name {
  background: linear-gradient(135deg, #0f172a 0%, #2563eb 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* ── SERVICES DROPDOWN ── */
.nav-item-has-dropdown { position: relative }
.nav-item-has-dropdown > a { display: flex; align-items: center; gap: 5px }
.nav-item-has-dropdown > a .nav-arrow { display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s ease; flex-shrink: 0; vertical-align: middle; margin-left: 1px; opacity: .65 }
.nav-item-has-dropdown:hover > a .nav-arrow,
.nav-item-has-dropdown.open > a .nav-arrow { transform: rotate(225deg) }
.nav-dropdown {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  min-width: 680px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  box-shadow: 0 24px 60px rgba(37,99,235,.12), 0 4px 16px rgba(0,0,0,.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2000;
}

/* Invisible bridge — fills the gap so hover doesn't break mid-travel */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-item-has-dropdown:hover .nav-dropdown,
.nav-item-has-dropdown.open .nav-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  z-index: 1;
}
/*.nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); background: rgba(255,255,255,.98); backdrop-filter: blur(20px); border: 1px solid #e2e8f0; border-radius: 16px; padding: 10px; min-width: 220px; box-shadow: 0 24px 60px rgba(37,99,235,.12), 0 4px 16px rgba(0,0,0,.06); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 2000 }*/
/*.nav-item-has-dropdown:hover .nav-dropdown,*/
/*.nav-item-has-dropdown.open .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0) }*/
/*.nav-dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px; background: #fff; border-left: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0 }*/
/* Mega-menu group column */
.dd-group { display: flex; flex-direction: column; background: #f8fafc; border-radius: 12px; padding: 10px 8px; }
.dd-group-label { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: #94a3b8; padding: 2px 10px 8px; }
.nav-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; text-decoration: none; font-size: .84rem; font-weight: 600; color: #1e293b !important; transition: background .15s, color .15s; white-space: nowrap }
.nav-dropdown a:hover { background: #fff; color: #2563eb !important; box-shadow: 0 2px 10px rgba(37,99,235,.08) }
.nav-dropdown a::after { display: none !important }
.dd-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; transition: transform .2s }
.nav-dropdown a:hover .dd-icon { transform: scale(1.15) }

/* Indented sub-links below a parent item */
.dd-sub { display: flex; flex-direction: column; padding: 0 0 4px 38px; gap: 1px; }
.dd-sub a { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; font-size: .78rem; font-weight: 500; color: #475569 !important; white-space: nowrap; }
.dd-sub a::before { content: '›'; font-size: .9rem; color: #94a3b8; flex-shrink: 0; }
.dd-sub a:hover { background: #eff6ff; color: #2563eb !important; }
.dd-sub a:hover::before { color: #2563eb; }

/* ── SERVICE PAGE LAYOUT ── */
.svc-page { padding: 80px 5% }
.svc-page-inner { max-width: 1200px; margin: 0 auto }
.svc-layout { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 64px; align-items: start; margin-top: 56px }
.svc-layout > .reveal { min-width: 0 }
.svc-tag { display: inline-block; background: #eff6ff; color: #2563eb; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 16px; border-radius: 20px; margin-bottom: 18px }
.svc-page h2 { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; color: #0f172a; line-height: 1.18; margin-bottom: 16px }
.svc-page .svc-desc { font-size: .98rem; color: #475569; line-height: 1.85; margin-bottom: 28px }
.svc-offer-list { list-style: none; padding: 0; margin: 0 0 36px; display: block }
.svc-offer-list li { position: relative; display: block; width: 100%; box-sizing: border-box; font-size: .9rem; color: #475569; line-height: 1.6; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 22px 16px 60px; margin: 0 0 12px; transition: border-color .2s, box-shadow .2s, transform .2s }
.svc-offer-list li:hover { border-color: #bfdbfe; box-shadow: 0 8px 24px rgba(37,99,235,.08); transform: translateX(3px) }
.svc-offer-list li::before { content: '✓'; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#2563eb,#3b82f6); color: #fff; font-weight: 900; font-size: .82rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37,99,235,.3) }
.svc-offer-list li strong { color: #0f172a; font-weight: 800; font-size: .94rem }
.svc-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #fff; font-weight: 800; font-size: .92rem; padding: 14px 30px; border-radius: 50px; text-decoration: none; transition: background .2s, transform .2s; box-shadow: 0 6px 24px rgba(37,99,235,.25) }
.svc-cta-btn:hover { background: #1d4ed8; transform: translateY(-2px) }

/* Stats panel */
.svc-panel { border-radius: 22px; padding: 36px 32px; color: #fff; position: sticky; top: 90px; box-shadow: 0 20px 50px rgba(15,23,42,.18) }
.svc-panel .vlbl { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.7); margin: 0 0 22px; font-weight: 800 }
.svc-panel .mt { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 18px; margin: 0 0 10px; border: 1px solid rgba(255,255,255,.18); font-size: .86rem; color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border-radius: 12px; backdrop-filter: blur(4px) }
.svc-panel .mt:last-of-type { margin-bottom: 0 }
.svc-panel .mt > span:first-child { color: rgba(255,255,255,.85); font-size: .86rem; font-weight: 500 }
.svc-panel .mv { font-size: .95rem; font-weight: 900; color: #fff; letter-spacing: .2px }
.svc-panel .mv.g { color: #4ade80 }
.svc-panel .mv.y { color: #fbbf24 }
.svc-panel .vtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px }
.svc-panel .vtag { font-size: .74rem; font-weight: 700; padding: 6px 13px; border-radius: 20px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff }

/* Benefit cards */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; margin: 56px 0 0 }
.benefit-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 28px 24px; transition: box-shadow .25s, transform .25s }
.benefit-card:hover { box-shadow: 0 16px 40px rgba(37,99,235,.1); transform: translateY(-4px) }
.benefit-card .bc-ico { font-size: 1.8rem; margin-bottom: 14px }
.benefit-card h4 { font-size: .95rem; font-weight: 800; color: #0f172a; margin-bottom: 8px }
.benefit-card p { font-size: .84rem; color: #64748b; line-height: 1.7 }

/* FAQ (service pages) */
.svc-faq { padding: 80px 5%; background: #f8fafc }
.svc-faq-inner { max-width: 860px; margin: 0 auto }
.svc-faq h2 { text-align: center; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 900; color: #0f172a; margin-bottom: 8px }
.svc-faq .faq-sub { text-align: center; color: #64748b; font-size: .94rem; margin-bottom: 40px }

/* Page CTA */
.page-cta { background: linear-gradient(135deg,#1d4ed8,#3b82f6); padding: 80px 5%; text-align: center; position: relative; overflow: hidden }
.page-cta::before { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; background: rgba(0,198,255,.08); border-radius: 50% }
.page-cta-in { position: relative; z-index: 2; max-width: 640px; margin: 0 auto }
.page-cta h2 { color: #fff; font-size: clamp(1.8rem,3.5vw,2.4rem); font-weight: 900; margin-bottom: 12px }
.page-cta p { color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.8; margin-bottom: 30px }

/* Extra card themes (t8–t12) */
.t8 .sf::before { background: linear-gradient(90deg,#0891b2,#06b6d4) }
.t8 .sico { background: #ecfeff }
.t8 .sb { background: linear-gradient(145deg,#0e7490,#0891b2) }
.t9 .sf::before { background: linear-gradient(90deg,#15803d,#22c55e) }
.t9 .sico { background: #f0fdf4 }
.t9 .sb { background: linear-gradient(145deg,#166534,#15803d) }
.t10 .sf::before { background: linear-gradient(90deg,#9333ea,#c026d3) }
.t10 .sico { background: #fdf4ff }
.t10 .sb { background: linear-gradient(145deg,#7e22ce,#9333ea) }
.t11 .sf::before { background: linear-gradient(90deg,#dc2626,#ef4444) }
.t11 .sico { background: #fef2f2 }
.t11 .sb { background: linear-gradient(145deg,#b91c1c,#dc2626) }
.t12 .sf::before { background: linear-gradient(90deg,#d97706,#f59e0b) }
.t12 .sico { background: #fffbeb }
.t12 .sb { background: linear-gradient(145deg,#b45309,#d97706) }

@media(max-width:900px) {
  .svc-layout { grid-template-columns: 1fr }
  .svc-panel { position: static; order: -1 }
}
@media(max-width:600px) {
  .benefit-grid { grid-template-columns: 1fr }
  .nav-dropdown { min-width: unset; grid-template-columns: 1fr; left: 0; transform: translateX(0) translateY(4px) }
  .nav-item-has-dropdown:hover .nav-dropdown, .nav-item-has-dropdown.open .nav-dropdown { transform: translateX(0) translateY(0) }
}

/* ── HERO SLIDER ── */
#home { position: relative; height: 100vh; min-height: 660px; overflow: hidden; padding-top: 70px }
.hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1); pointer-events: none }
.hero-slide.active { opacity: 1; pointer-events: all }
.slide-bg-1 { background: linear-gradient(135deg,#0a0f1e 0%,#0d1b35 40%,#0f2755 75%,#0a1929 100%) }
.slide-bg-2 { background: linear-gradient(135deg,#0c0a1e 0%,#150d30 40%,#1e1048 75%,#0d0b20 100%) }
.slide-bg-3 { background: linear-gradient(135deg,#010d0f 0%,#041a1e 40%,#072c30 75%,#031215 100%) }
.slide-bg-4 { background: linear-gradient(135deg,#1a0a0f 0%,#2d0d1a 40%,#3d1030 75%,#1a0811 100%) }

/* Per-slide gradient & accent vars */
.slide-bg-1 { --grad-a: #60a5fa; --grad-b: #06b6d4; --accent-rgb: 96,165,250 }
.slide-bg-2 { --grad-a: #c084fc; --grad-b: #f472b6; --accent-rgb: 192,132,252 }
.slide-bg-3 { --grad-a: #34d399; --grad-b: #06b6d4; --accent-rgb: 52,211,153 }
.slide-bg-4 { --grad-a: #fb923c; --grad-b: #f43f5e; --accent-rgb: 251,146,60 }

.slide-noise { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); opacity: .4 }
.slide-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 72px 72px }
.slide-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18 }
.orb-1 { width: 600px; height: 600px; top: -180px; right: -120px; animation: orbDrift1 12s ease-in-out infinite }
.orb-2 { width: 400px; height: 400px; bottom: -120px; left: -80px; animation: orbDrift2 10s ease-in-out infinite; animation-delay: -5s }
.orb-3 { width: 250px; height: 250px; top: 40%; left: 40%; animation: orbDrift3 8s ease-in-out infinite; animation-delay: -3s; opacity: .10 }
.slide-bg-1 .orb-1 { background: radial-gradient(circle,#3b82f6,#1d4ed8) }
.slide-bg-1 .orb-2 { background: radial-gradient(circle,#06b6d4,#0891b2) }
.slide-bg-1 .orb-3 { background: #f0abfc }
.slide-bg-2 .orb-1 { background: radial-gradient(circle,#a855f7,#7c3aed) }
.slide-bg-2 .orb-2 { background: radial-gradient(circle,#ec4899,#be185d) }
.slide-bg-2 .orb-3 { background: #818cf8 }
.slide-bg-3 .orb-1 { background: radial-gradient(circle,#10b981,#059669) }
.slide-bg-3 .orb-2 { background: radial-gradient(circle,#06b6d4,#0891b2) }
.slide-bg-3 .orb-3 { background: #34d399 }
.slide-bg-4 .orb-1 { background: radial-gradient(circle,#f43f5e,#be123c) }
.slide-bg-4 .orb-2 { background: radial-gradient(circle,#f59e0b,#d97706) }
.slide-bg-4 .orb-3 { background: #fb7185 }
@keyframes orbDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-40px,30px) scale(1.08)} 66%{transform:translate(30px,-20px) scale(0.95)} }
@keyframes orbDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(30px,-40px) scale(1.06)} 70%{transform:translate(-20px,20px) scale(0.97)} }
@keyframes orbDrift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,30px)} }

.slide-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.particle { position: absolute; border-radius: 50%; animation: particleFloat linear infinite }
@keyframes particleFloat {
  0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0 }
  10% { opacity: 1 }
  90% { opacity: .6 }
  100% { transform: translateY(-100px) translateX(var(--drift)) scale(1); opacity: 0 }
}

/* ── SLIDE CONTENT LAYOUT ── */
.slide-inner { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; padding: 0 5%; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center }
.slide-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 8px 20px; border-radius: 40px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 28px; backdrop-filter: blur(8px) }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; animation: pls 2s infinite; flex-shrink: 0 }
@keyframes pls { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.6)} }
.slide-h1 { font-size: clamp(2.6rem,4.8vw,4.2rem); font-weight: 900; color: #ffffff; line-height: 1.05; margin-bottom: 24px; letter-spacing: -1.5px }
.slide-h1 .hl { background: linear-gradient(135deg,var(--grad-a),var(--grad-b)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.slide-h1 .ol { -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.5) }
.slide-sub { font-size: 1.06rem; color: rgba(255,255,255,.65); line-height: 1.85; margin-bottom: 40px; max-width: 500px }
.slide-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center }

/* Slide enter animations */
.hero-slide .slide-text-anim { opacity: 0; transform: translateY(30px); transition: opacity .7s ease .2s, transform .7s ease .2s }
.hero-slide.active .slide-text-anim { opacity: 1; transform: translateY(0) }
.hero-slide .slide-vis-anim { opacity: 0; transform: translateX(40px) scale(.95); transition: opacity .8s ease .4s, transform .8s ease .4s }
.hero-slide.active .slide-vis-anim { opacity: 1; transform: translateX(0) scale(1) }

.btn-hero-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,rgba(var(--accent-rgb),.9),rgba(var(--accent-rgb),.6)); color: #fff; font-weight: 800; padding: 15px 36px; border-radius: 50px; text-decoration: none; font-size: .95rem; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); transition: transform .25s, box-shadow .25s, background .25s; box-shadow: 0 4px 24px rgba(var(--accent-rgb),.3), inset 0 1px 0 rgba(255,255,255,.15); position: relative; overflow: hidden }
.btn-hero-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.1),transparent); opacity: 0; transition: opacity .3s }
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(var(--accent-rgb),.5) }
.btn-hero-primary:hover::before { opacity: 1 }
.btn-hero-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); font-weight: 600; padding: 15px 32px; border-radius: 50px; text-decoration: none; font-size: .95rem; backdrop-filter: blur(8px); transition: all .25s }
.btn-hero-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); transform: translateY(-3px); color: #fff }

/* Hero stat row */
.slide-stats { display: flex; gap: 0; margin-top: 52px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; backdrop-filter: blur(10px); max-width: max-content }
.ss-item { padding: 18px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,.08) }
.ss-item:last-child { border: none }
.ss-num { font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1 }
.ss-num em { color: rgba(var(--accent-rgb),1); font-style: normal }
.ss-lbl { font-size: .68rem; color: rgba(255,255,255,.45); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap }

/* ── VISUAL SIDE (Slide 1: Dashboard) ── */
.slide-visual { position: relative; perspective: 1000px; overflow: visible }
.premium-card { background: rgba(255,255,255,.06); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); animation: premFloat 6s ease-in-out infinite; position: relative; overflow: visible }
.premium-card::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(135deg,rgba(96,165,250,.04),rgba(6,182,212,.04)) }
@keyframes premFloat { 0%,100%{transform:translateY(0) rotateX(0deg)} 50%{transform:translateY(-12px) rotateX(2deg)} }
.pc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px }
.pc-dots { display: flex; gap: 6px }
.pcd { width: 11px; height: 11px; border-radius: 50% }
.pcd-r { background: #ff5f56 } .pcd-y { background: #ffbd2e } .pcd-g { background: #27c93f }
.pc-title { font-size: .7rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 2px; margin-left: 6px }
.metric-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05) }
.metric-row:last-of-type { border: none }
.mr-label { font-size: .84rem; color: rgba(255,255,255,.55) }
.mr-val { font-weight: 900; color: #fff; font-size: .92rem }
.mr-badge { padding: 3px 10px; border-radius: 20px; font-size: .7rem; font-weight: 800 }
.mr-up { background: rgba(52,211,153,.15); color: #34d399 }
.mr-dn { background: rgba(251,146,60,.15); color: #fb923c }
.sparkline { margin-top: 18px; height: 56px; background: rgba(255,255,255,.03); border-radius: 10px; display: flex; align-items: flex-end; gap: 4px; padding: 8px; overflow: hidden }
.sbar { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(to top,rgba(96,165,250,.6),rgba(6,182,212,.8)) }
.sbar:nth-child(1){animation:sb1 3.5s ease-in-out infinite}.sbar:nth-child(2){animation:sb2 3.5s ease-in-out infinite;animation-delay:.15s}.sbar:nth-child(3){animation:sb3 3.5s ease-in-out infinite;animation-delay:.3s}.sbar:nth-child(4){animation:sb4 3.5s ease-in-out infinite;animation-delay:.45s}.sbar:nth-child(5){animation:sb5 3.5s ease-in-out infinite;animation-delay:.6s}.sbar:nth-child(6){animation:sb6 3.5s ease-in-out infinite;animation-delay:.75s}.sbar:nth-child(7){animation:sb7 3.5s ease-in-out infinite;animation-delay:.9s}.sbar:nth-child(8){animation:sb8 3.5s ease-in-out infinite;animation-delay:1.05s}
@keyframes sb1{0%,100%{height:35%}50%{height:60%}}@keyframes sb2{0%,100%{height:55%}50%{height:80%}}@keyframes sb3{0%,100%{height:40%}50%{height:30%}}@keyframes sb4{0%,100%{height:75%}50%{height:95%}}@keyframes sb5{0%,100%{height:60%}50%{height:45%}}@keyframes sb6{0%,100%{height:85%}50%{height:65%}}@keyframes sb7{0%,100%{height:50%}50%{height:75%}}@keyframes sb8{0%,100%{height:95%}50%{height:70%}}

/* Floating pill cards */
.fp { position: absolute; background: rgba(255,255,255,.9); backdrop-filter: blur(20px); border-radius: 14px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; font-weight: 800; color: #0f172a; font-size: .82rem; box-shadow: 0 16px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8); white-space: nowrap; border: 1px solid rgba(255,255,255,.6); z-index: 10 }
.fp.fp-tl { top: -20px; right: -20px; animation: fpf1 5s ease-in-out infinite }
.fp.fp-br { bottom: -20px; left: -20px; animation: fpf2 5s ease-in-out infinite; animation-delay: -2.5s }
.fp-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0 }
@keyframes fpf1 { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes fpf2 { 0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-8px) rotate(-1deg)} }

/* ── SLIDE 2 VISUAL: Browser Frame ── */
.browser-frame { background: rgba(255,255,255,.05); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); animation: premFloat 6s ease-in-out infinite }
.bf-bar { background: rgba(255,255,255,.07); padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06) }
.bf-url { flex: 1; background: rgba(255,255,255,.08); border-radius: 20px; padding: 5px 16px; font-size: .72rem; color: rgba(255,255,255,.4); display: flex; align-items: center; gap: 6px }
.bf-body { position: relative; overflow: hidden }
.mock-hero { background: linear-gradient(135deg,#1e3a6e,#2563eb); padding: 22px 20px; position: relative }
.mock-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px }
.mock-logo { width: 55px; height: 7px; background: rgba(255,255,255,.7); border-radius: 4px }
.mock-nav-links { display: flex; gap: 10px }
.mock-nl { width: 26px; height: 5px; background: rgba(255,255,255,.3); border-radius: 3px }
.mock-cta { width: 44px; height: 17px; background: rgba(255,255,255,.9); border-radius: 8px }
.mock-h1 { width: 72%; height: 13px; background: rgba(255,255,255,.85); border-radius: 6px; margin-bottom: 9px }
.mock-h2 { width: 55%; height: 8px; background: rgba(255,255,255,.4); border-radius: 4px; margin-bottom: 5px }
.mock-h3 { width: 44%; height: 8px; background: rgba(255,255,255,.25); border-radius: 4px; margin-bottom: 16px }
.mock-btns { display: flex; gap: 10px }
.mock-btn1 { width: 76px; height: 21px; background: rgba(255,255,255,.9); border-radius: 10px }
.mock-btn2 { width: 76px; height: 21px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 10px }
.mock-cursor { position: absolute; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px rgba(255,255,255,.8); animation: mockCur 7s ease-in-out infinite }
@keyframes mockCur { 0%{top:45%;left:25%} 20%{top:60%;left:55%} 40%{top:38%;left:68%} 60%{top:55%;left:35%} 80%{top:42%;left:18%} 100%{top:45%;left:25%} }
.mock-secs { padding: 16px 18px; background: rgba(15,23,42,.6) }
.mock-st { width: 38%; height: 7px; background: rgba(255,255,255,.4); border-radius: 4px; margin-bottom: 12px }
.mock-cards { display: flex; gap: 9px }
.mock-card { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 9px }
.mci { width: 18px; height: 18px; border-radius: 5px; margin-bottom: 7px }
.mcl1 { width: 82%; height: 5px; background: rgba(255,255,255,.35); border-radius: 3px; margin-bottom: 4px }
.mcl2 { width: 60%; height: 4px; background: rgba(255,255,255,.18); border-radius: 3px }
.code-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; background: rgba(10,15,30,.9); border-left: 1px solid rgba(255,255,255,.08); padding: 14px 12px; display: flex; flex-direction: column; gap: 5px; overflow: hidden }
.cl { height: 6px; border-radius: 3px; animation: clGlow 2.8s ease-in-out infinite }
.cl.c1{background:rgba(96,165,250,.5);animation-delay:0s}.cl.c2{background:rgba(255,255,255,.12);animation-delay:.1s}.cl.c3{background:rgba(52,211,153,.45);animation-delay:.2s}.cl.c4{background:rgba(255,255,255,.08);animation-delay:.3s}.cl.c5{background:rgba(251,146,60,.4);animation-delay:.4s}.cl.c6{background:rgba(255,255,255,.1);animation-delay:.5s}.cl.c7{background:rgba(96,165,250,.35);animation-delay:.6s}.cl.c8{background:rgba(255,255,255,.08);animation-delay:.7s}.cl.c9{background:rgba(244,114,182,.4);animation-delay:.8s}.cl.c10{background:rgba(255,255,255,.1);animation-delay:.9s}.cl.c11{background:rgba(52,211,153,.3);animation-delay:1s}.cl.c12{background:rgba(255,255,255,.07);animation-delay:1.1s}
.cl:nth-child(odd){width:75%}.cl:nth-child(even){width:55%}.cl:nth-child(3){width:88%}.cl:nth-child(7){width:92%}.cl:nth-child(11){width:67%}
@keyframes clGlow { 0%,100%{opacity:.35} 50%{opacity:1} }

/* ── SLIDE 3 VISUAL: Analytics ── */
.analytics-card { background: rgba(255,255,255,.05); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.4); animation: premFloat 6s ease-in-out infinite; position: relative }
.ac-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px }
.ac-title { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.9) }
.ac-tag { font-size: .7rem; color: rgba(52,211,153,.8); background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.2); padding: 4px 12px; border-radius: 20px }
.svg-chart { width: 100%; height: 110px; overflow: visible; margin-bottom: 16px }
.chart-area { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; animation: drawPath 2.2s ease forwards .5s }
.chart-fill { stroke: none; opacity: 0; animation: fadeIn .8s ease forwards 2.5s }
@keyframes drawPath { to{stroke-dashoffset:0} }
@keyframes fadeIn { to{opacity:.12} }
.chart-dot-anim { opacity: 0; animation: dotPop .4s ease forwards }
@keyframes dotPop { to{opacity:1;transform:scale(1)} }
.kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px }
.kpi-b { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 13px; text-align: center; transition: background .3s }
.kpi-b:hover { background: rgba(255,255,255,.09) }
.kpi-v { font-size: 1.25rem; font-weight: 900; color: #fff; line-height: 1 }
.kpi-v span { color: #34d399 }
.kpi-l { font-size: .67rem; color: rgba(255,255,255,.4); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px }
.ac-float { position: absolute; border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,.3); animation: fpf1 5s ease-in-out infinite }
.acf-1 { top: -20px; right: -20px; background: linear-gradient(135deg,#059669,#10b981); padding: 14px 20px; animation-delay: 0s }
.acf-1 .acf-val { font-size: 1.4rem; font-weight: 900; color: #fff; line-height: 1 }
.acf-1 .acf-lbl { font-size: .66rem; color: rgba(255,255,255,.75); margin-top: 2px }
.acf-2 { bottom: -20px; left: -20px; background: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 10px; animation-delay: -2.5s }
.acf-ico { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg,#1d4ed8,#3b82f6); display: flex; align-items: center; justify-content: center; font-size: 1rem }
.acf-vl { font-size: .95rem; font-weight: 900; color: #0f172a; line-height: 1.1 }
.acf-lb { font-size: .66rem; color: #64748b }

/* ── SLIDE 4 VISUAL: Brand Design ── */
.brand-canvas { position: relative; animation: premFloat 6s ease-in-out infinite; animation-delay: -1s; overflow: visible }
.brand-main { background: rgba(255,255,255,.05); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 28px; box-shadow: 0 40px 80px rgba(0,0,0,.4); position: relative; overflow: visible }
.brand-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px }
.brand-title { font-size: .72rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: 2px; margin-left: 6px }
.color-palette { display: flex; gap: 8px; margin-bottom: 22px }
.cp-swatch { flex: 1; height: 52px; border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; transition: transform .3s, box-shadow .3s }
.cp-swatch:hover { transform: scaleY(1.1); box-shadow: 0 8px 20px rgba(0,0,0,.3) }
.cp-swatch::after { content: attr(data-name); position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: .55rem; font-weight: 700; color: rgba(255,255,255,.8); padding: 3px; background: rgba(0,0,0,.3) }
.cps1{background:#2563eb}.cps2{background:#7c3aed}.cps3{background:#db2777}.cps4{background:#f59e0b}.cps5{background:#10b981}
.logo-build { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 20px }
.logo-shape { width: 52px; height: 52px; border-radius: 10px; background: linear-gradient(135deg,rgba(251,146,60,.8),rgba(244,63,94,.8)); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; animation: logoPulse 3s ease-in-out infinite; box-shadow: 0 8px 24px rgba(244,63,94,.3) }
@keyframes logoPulse { 0%,100%{transform:scale(1) rotate(0deg);box-shadow:0 8px 24px rgba(244,63,94,.3)} 50%{transform:scale(1.05) rotate(-3deg);box-shadow:0 12px 32px rgba(244,63,94,.5)} }
.logo-text-build { display: flex; flex-direction: column; gap: 4px }
.ltb-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.7) }
.ltb-l1 { width: 100px; animation: ltb 2.5s ease-in-out infinite }
.ltb-l2 { width: 70px; background: rgba(251,146,60,.6); animation: ltb 2.5s ease-in-out infinite; animation-delay: .3s }
@keyframes ltb { 0%,100%{opacity:.7} 50%{opacity:1} }
.typo-row { display: flex; gap: 8px }
.typo-card { flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px; text-align: center }
.tf-name { font-size: .6rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px }
.tf-sample { font-size: 1rem; font-weight: 900; color: rgba(255,255,255,.85); line-height: 1 }
.tf-sans { font-family: 'Segoe UI',sans-serif }
.tf-serif { font-family: Georgia,serif }
.tf-mono { font-family: 'Courier New',monospace; font-size: .85rem }
.brand-pieces { display: flex; gap: 8px; margin-top: 16px }
.bp-card { flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px }
.bp-ico { font-size: 1.3rem }
.bp-lbl { font-size: .62rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .5px; text-align: center }
.bfp { position: absolute; border-radius: 14px; box-shadow: 0 12px 35px rgba(0,0,0,.3); z-index: 10 }
.bfp-1 { top: -20px; right: -20px; background: linear-gradient(135deg,#7c3aed,#a855f7); padding: 12px 18px; display: flex; align-items: center; gap: 8px; animation: fpf1 5s ease-in-out infinite }
.bfp-2 { bottom: -20px; left: -20px; background: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 10px; animation: fpf2 5s ease-in-out infinite }
.bfp-dot { width: 8px; height: 8px; border-radius: 50%; animation: pls 2s infinite }

/* ── SLIDER CONTROLS ── */
.slider-dots { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20 }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); border: none; cursor: pointer; transition: all .4s ease; padding: 0 }
.sdot.active { width: 28px; border-radius: 4px; background: #fff }
.slider-arrows { position: absolute; bottom: 28px; right: 5%; display: flex; gap: 12px; z-index: 20 }
.sarr { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s; backdrop-filter: blur(8px) }
.sarr:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color: #fff; transform: scale(1.08) }
.slide-counter { position: absolute; top: 50%; right: 2.5%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px }
.sc-num { font-size: 1.5rem; font-weight: 900; color: rgba(255,255,255,.9); line-height: 1; font-variant-numeric: tabular-nums }
.sc-line { width: 1px; height: 44px; background: rgba(255,255,255,.15) }
.sc-total { font-size: .75rem; color: rgba(255,255,255,.35); font-weight: 600 }
.slide-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); z-index: 20; overflow: hidden }
.sp-bar { height: 100%; background: linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.8)); animation: spA 5.5s linear infinite }
@keyframes spA { from{width:0%} to{width:100%} }

/* ── PAGE HERO (non-home pages) ── */
.page-hero { padding: 120px 5% 70px; background: linear-gradient(135deg,#0a0f1e 0%,#0d1b35 60%,#0f2755 100%); position: relative; overflow: hidden; text-align: center }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 72px 72px }
.page-hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18 }
.page-hero-orb-1 { width: 500px; height: 500px; top: -150px; right: -100px; background: radial-gradient(circle,#3b82f6,#1d4ed8) }
.page-hero-orb-2 { width: 350px; height: 350px; bottom: -80px; left: -60px; background: radial-gradient(circle,#06b6d4,#0891b2) }
.page-hero-inner { position: relative; z-index: 5; max-width: 800px; margin: 0 auto }
.page-hero-tag { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 8px 20px; border-radius: 40px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 24px; backdrop-filter: blur(8px) }
.page-hero h1 { font-size: clamp(2.2rem,4.5vw,3.5rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 18px; letter-spacing: -1px }
.page-hero h1 span { background: linear-gradient(135deg,#60a5fa,#06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.page-hero p { font-size: 1.05rem; color: rgba(255,255,255,.65); line-height: 1.85; max-width: 600px; margin: 0 auto }

/* ── STATIC HERO (service/about pages) ── */
.hero { padding: 130px 5% 80px; background: linear-gradient(135deg,#0a0f1e 0%,#0d1b35 55%,#0f2755 100%); position: relative; overflow: hidden; text-align: center }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 72px 72px }
.o1 { width: 560px; height: 560px; top: -160px; right: -120px; background: radial-gradient(circle,#3b82f6,#1d4ed8) }
.o2 { width: 380px; height: 380px; bottom: -100px; left: -70px; background: radial-gradient(circle,#06b6d4,#0891b2) }
.o3 { width: 260px; height: 260px; top: 40%; left: 35%; background: radial-gradient(circle,#a855f7,#7c3aed); opacity: .10 }
.hero-in { position: relative; z-index: 5; max-width: 900px; margin: 0 auto }
.htag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 8px 20px; border-radius: 40px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 24px }
.hero h1 { font-size: clamp(2.4rem,5vw,3.8rem); font-weight: 900; color: #fff; line-height: 1.08; margin-bottom: 20px; letter-spacing: -1.5px }
.hero h1 .hl { background: linear-gradient(135deg,#60a5fa,#06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.hero p { font-size: 1.06rem; color: rgba(255,255,255,.65); line-height: 1.85; max-width: 800px; margin: 0 auto 40px }
.hero-stats { display: flex; justify-content: center; gap: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; max-width: 660px; margin: 0 auto; backdrop-filter: blur(10px) }
.hstat { padding: 22px 30px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); flex: 1 }
.hstat:last-child { border: none }
.hstat .num { font-size: 1.8rem; font-weight: 900; color: #fff; line-height: 1 }
.hstat .num em { color: #60a5fa; font-style: normal }
.hstat .lbl { font-size: .65rem; color: rgba(255,255,255,.42); margin-top: 5px; text-transform: uppercase; letter-spacing: 1px }

/* ── QUICK NAV ── */
.qnav { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 0 5%; display: flex; overflow-x: auto; scrollbar-width: none; position: sticky; top: 70px; z-index: 900 }
.qnav::-webkit-scrollbar { display: none }
.qlink { padding: 15px 16px; font-size: .8rem; font-weight: 700; color: #64748b; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: all .2s }
.qlink:hover, .qlink.cur { color: #2563eb; border-bottom-color: #2563eb }

/* ── TRUST BAR ── */
#trust { background: #eff6ff; padding: 48px 5%; overflow: hidden; position: relative; border-top: 1px solid #dbeafe; border-bottom: 1px solid #dbeafe }
#trust::before, #trust::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2 }
#trust::before { left: 0; background: linear-gradient(90deg,#eff6ff,transparent) }
#trust::after { right: 0; background: linear-gradient(-90deg,#eff6ff,transparent) }
.trust-label { text-align: center; color: #94a3b8; font-size: .76rem; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 28px }
.trust-track { display: flex; gap: 64px; align-items: center; animation: mq 22s linear infinite; width: max-content }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.trust-item { color: #93c5fd; font-size: 1rem; font-weight: 900; letter-spacing: 2px; white-space: nowrap; transition: color .25s }
.trust-item:hover { color: #2563eb }

/* ── SHARED SECTION STYLES ── */
section { padding: 90px 5% }
.section-inner, .sec-inner, .sec { max-width: 1200px; margin: 0 auto }
.text-center { text-align: center; margin-bottom: 52px }
.text-center .s-sub { margin: 0 auto }
.s-tag, .stag { display: inline-block; background: #eff6ff; color: #2563eb; font-weight: 800; font-size: .73rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 16px; border-radius: 20px; margin-bottom: 14px }
h2 { font-size: clamp(1.8rem,3.5vw,2.75rem); font-weight: 900; color: var(--dk); line-height: 1.15; margin-bottom: 14px }
.s-sub, .ssub, .sub { color: var(--gr); font-size: .97rem; line-height: 1.8; max-width: 600px }
.anc { scroll-margin-top: 90px }

/* ── SERVICES ── */
#services { background: #f8fafc }
.services-header, .shdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 60px; flex-wrap: wrap }
.services-header .s-sub, .shdr .ssub { max-width: 480px }
.services-grid, .sgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px }
@media(max-width:1100px) { .services-grid, .sgrid { grid-template-columns: repeat(2,1fr) } }
@media(max-width:600px) { .services-grid, .sgrid { grid-template-columns: 1fr } }

/* Card base */
.svc-card, .sc { perspective: 900px; height: 280px; cursor: pointer; opacity: 0; transform: translateY(-50px) scale(.92); transition: opacity .55s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.34,1.56,.64,1) }
.svc-card.svc-in, .sc.in { opacity: 1; transform: translateY(0) scale(1) }
.svc-flip, .sflip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4,.2,.2,1) }
.svc-card:hover .svc-flip, .sc:hover .sflip { transform: rotateY(180deg) }

/* Front */
.svc-front, .sf { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #ffffff; border: 1px solid #e2e8f0; padding: 32px 26px 28px; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(37,99,235,.05); transition: box-shadow .3s, border-color .3s }
.svc-card:hover .svc-front, .sc:hover .sf { box-shadow: 0 20px 50px rgba(37,99,235,.12); border-color: #bfdbfe }
.svc-front::before, .sf::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .5s ease }
.svc-card:hover .svc-front::before, .sc:hover .sf::before { transform: scaleX(1) }

/* Back */
.svc-back, .sb { position: absolute; inset: 0; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; transform: rotateY(180deg); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; color: #fff }

/* Front content */
.svc-icon-wrap, .sico { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; flex-shrink: 0; transition: transform .4s, box-shadow .4s }
.svc-card:hover .svc-icon-wrap, .sc:hover .sico { transform: scale(1.1) rotate(-5deg) }
.svc-front h3, .sf h3 { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 8px; line-height: 1.3 }
.svc-front p, .sf p { font-size: .83rem; color: #64748b; line-height: 1.7; flex: 1 }
.svc-front-num, .snum { position: absolute; bottom: 16px; right: 20px; font-size: 3.5rem; font-weight: 900; color: rgba(37,99,235,.04); line-height: 1; pointer-events: none; transition: color .3s }
.svc-card:hover .svc-front-num { color: rgba(37,99,235,.08) }

/* Back content */
.svc-back-title, .sbt { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 12px }
.svc-back-tags, .sbtags { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: flex-start; padding-top: 4px }
.svc-back-tag, .sbtag { font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); color: #fff }
.svc-back-link, .sblink { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 700; font-size: .82rem; padding: 10px 18px; border-radius: 30px; text-decoration: none; transition: background .2s; margin-top: 14px; align-self: flex-start }
.svc-back-link:hover, .sblink:hover { background: rgba(255,255,255,.28) }

/* Per-card themes */
.svc-theme-1 .svc-front::before, .t1 .sf::before { background: linear-gradient(90deg,#2563eb,#06b6d4) }
.svc-theme-1 .svc-icon-wrap, .t1 .sico { background: #eff6ff }
.svc-theme-1 .svc-back, .t1 .sb { background: linear-gradient(145deg,#1d4ed8,#0891b2) }
.svc-theme-2 .svc-front::before, .t2 .sf::before { background: linear-gradient(90deg,#7c3aed,#a855f7) }
.svc-theme-2 .svc-icon-wrap, .t2 .sico { background: #f5f3ff }
.svc-theme-2 .svc-back, .t2 .sb { background: linear-gradient(145deg,#6d28d9,#7c3aed) }
.svc-theme-3 .svc-front::before, .t3 .sf::before { background: linear-gradient(90deg,#e11d48,#f43f5e) }
.svc-theme-3 .svc-icon-wrap, .t3 .sico { background: #fff1f2 }
.svc-theme-3 .svc-back, .t3 .sb { background: linear-gradient(145deg,#be123c,#e11d48) }
.svc-theme-4 .svc-front::before, .t4 .sf::before { background: linear-gradient(90deg,#d97706,#f59e0b) }
.svc-theme-4 .svc-icon-wrap, .t4 .sico { background: #fffbeb }
.svc-theme-4 .svc-back, .t4 .sb { background: linear-gradient(145deg,#b45309,#d97706) }
.svc-theme-5 .svc-front::before, .t5 .sf::before { background: linear-gradient(90deg,#ea580c,#f97316) }
.svc-theme-5 .svc-icon-wrap, .t5 .sico { background: #fff7ed }
.svc-theme-5 .svc-back, .t5 .sb { background: linear-gradient(145deg,#c2410c,#ea580c) }
.svc-theme-6 .svc-front::before, .t6 .sf::before { background: linear-gradient(90deg,#0d9488,#14b8a6) }
.svc-theme-6 .svc-icon-wrap, .t6 .sico { background: #f0fdfa }
.svc-theme-6 .svc-back, .t6 .sb { background: linear-gradient(145deg,#0f766e,#0d9488) }
.svc-theme-7 .svc-front::before, .t7 .sf::before { background: linear-gradient(90deg,#4f46e5,#6366f1) }
.svc-theme-7 .svc-icon-wrap, .t7 .sico { background: #eef2ff }
.svc-theme-7 .svc-back, .t7 .sb { background: linear-gradient(145deg,#4338ca,#4f46e5) }

/* 7-card layout */
@media(min-width:1101px) {
  .services-grid, .sgrid { grid-template-columns: repeat(4,1fr) }
  .svc-card:nth-child(5), .sc:nth-child(5) { grid-column: 1 }
  .svc-card:nth-child(6), .sc:nth-child(6) { grid-column: 2 }
  .svc-card:nth-child(7), .sc:nth-child(7) { grid-column: 3 }
}

/* ── SERVICE DETAIL SECTIONS ── */
.sds { padding: 78px 5% }
.sds.alt { background: #f8fafc }
.sdi { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center }
.sdi.rev .sdt { order: 2 } .sdi.rev .sdv { order: 1 }
.sdico { width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.08) }
.sdt h2 { font-size: 1.75rem; font-weight: 900; color: #1e293b; margin-bottom: 13px; line-height: 1.2 }
.sdt .desc { color: #475569; line-height: 1.85; margin-bottom: 16px; font-size: .94rem }
.sdl { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px }
.sdl li { display: flex; align-items: flex-start; gap: 11px; font-size: .87rem; color: #475569; line-height: 1.6 }
.sdl li::before { content: '✓'; color: #2563eb; font-weight: 900; flex-shrink: 0; margin-top: 1px }
.btnsvc { display: inline-flex; align-items: center; gap: 8px; background: #2563eb; color: #fff; text-decoration: none; padding: 12px 26px; border-radius: 28px; font-weight: 800; font-size: .88rem; transition: all .2s; width: fit-content; box-shadow: 0 4px 14px rgba(37,99,235,.25) }
.btnsvc:hover { background: #1d4ed8; transform: translateY(-2px) }
.sdv { border-radius: 20px; padding: 34px; display: flex; flex-direction: column; gap: 12px; min-height: 370px; position: relative; overflow: hidden }
.sdv::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.05); pointer-events: none }
.vlbl { font-size: .67rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px }
.mt { background: rgba(255,255,255,.12); border-radius: 10px; padding: 11px 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgba(255,255,255,.07) }
.mt span:first-child { color: rgba(255,255,255,.73); font-size: .84rem }
.mv { color: #fff; font-weight: 900; font-size: .96rem }
.g { color: #34d399 } .y { color: #fbbf24 }
.dg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.db2 { background: rgba(255,255,255,.12); border-radius: 10px; padding: 13px; text-align: center; border: 1px solid rgba(255,255,255,.09); transition: background .2s }
.db2:hover { background: rgba(255,255,255,.2) }
.db2 .di { font-size: 1.55rem; margin-bottom: 5px }
.db2 .dl { font-size: .67rem; color: rgba(255,255,255,.68); font-weight: 700; text-transform: uppercase; letter-spacing: .5px }
.vtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px }
.vtag { background: rgba(255,255,255,.15); color: #fff; padding: 5px 12px; border-radius: 17px; font-size: .7rem; font-weight: 700; border: 1px solid rgba(255,255,255,.18) }
.pal { display: flex; gap: 7px; margin-bottom: 3px }
.psw { flex: 1; height: 42px; border-radius: 9px }

/* ── PROCESS ── */
.proc { background: linear-gradient(135deg,#0a0f1e,#0f2755); padding: 68px 5%; text-align: center }
.proc h2 { color: #fff; font-size: 1.85rem; font-weight: 900; margin-bottom: 10px }
.proc p { color: rgba(255,255,255,.58); margin-bottom: 38px; max-width: 560px; margin-left: auto; margin-right: auto; font-size: .95rem; line-height: 1.75 }
.pls { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center }
.pl { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 9px 20px; border-radius: 28px; font-size: .8rem; font-weight: 700 }

/* ── STATS ── */
#stats { background: linear-gradient(135deg,#dbeafe,#eff6ff); padding: 70px 5%; border-top: 1px solid #bfdbfe; border-bottom: 1px solid #bfdbfe }
.stats-row { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)) }
.stat-block { text-align: center; padding: 30px 16px; border-right: 1px solid #bfdbfe }
.stat-block:last-child { border: none }
.s-big { font-size: 3rem; font-weight: 900; color: #1e293b; line-height: 1 }
.s-big em { color: #2563eb; font-style: normal }
.s-desc { color: #64748b; font-size: .88rem; margin-top: 8px }

/* Stats bar variant */
#stats-bar { background: linear-gradient(135deg,#dbeafe,#eff6ff); padding: 60px 5%; border-top: 1px solid #bfdbfe; border-bottom: 1px solid #bfdbfe }
.stat-b { text-align: center; padding: 26px 16px; border-right: 1px solid #bfdbfe }
.stat-b:last-child { border: none }
.stat-b .big { font-size: 2.8rem; font-weight: 900; color: #1e293b; line-height: 1 }
.stat-b .big em { color: #2563eb; font-style: normal }
.stat-b .desc { color: #64748b; font-size: .86rem; margin-top: 7px }

/* ── HOW WE WORK ── */
#how { background: #fff }
.steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-top: 56px; position: relative }
.steps::before { content: ''; position: absolute; top: 38px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg,var(--bpa) 0%,var(--bm) 50%,var(--ac) 100%); z-index: 0 }
.step { text-align: center; padding: 0 24px }
.step-num { width: 78px; height: 78px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; border: 4px solid #fff; box-shadow: 0 4px 20px rgba(37,99,235,.2); position: relative; z-index: 1; transition: transform .3s, background .3s }
.step:hover .step-num { transform: scale(1.12); background: #1d4ed8 }
.step h3 { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 10px }
.step p { font-size: .86rem; color: #64748b; line-height: 1.75 }

/* ── TESTIMONIALS ── */
#testimonials { background: #f8fafc }
.t-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px; margin-top: 52px }
.t-card { background: #fff; border-radius: 18px; padding: 30px; border: 1.5px solid #e2e8f0; transition: transform .3s, box-shadow .3s }
.t-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(37,99,235,.08) }
.stars { color: #f59e0b; font-size: 1rem; letter-spacing: 2px; margin-bottom: 14px }
.t-card blockquote { font-size: .92rem; color: #475569; line-height: 1.8; font-style: italic; margin-bottom: 20px; border-left: 3px solid #bfdbfe; padding-left: 16px }
.t-author { display: flex; align-items: center; gap: 12px }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: .95rem; flex-shrink: 0 }
.t-name { font-weight: 800; color: #1e293b; font-size: .88rem }
.t-role { font-size: .78rem; color: #64748b }

/* ── PRICING ── */
#pricing { background: #fff }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 26px; margin-top: 52px; align-items: start }
.p-card { border-radius: 20px; padding: 40px 30px; border: 2px solid #e2e8f0; transition: transform .3s, box-shadow .3s; position: relative }
.p-card.featured { background: linear-gradient(145deg,#1d4ed8,#3b82f6); border-color: transparent; transform: scale(1.04); box-shadow: 0 20px 60px rgba(37,99,235,.2) }
.p-card:hover:not(.featured) { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(37,99,235,.08) }
.popular { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #2563eb; color: #fff; font-weight: 900; padding: 5px 20px; border-radius: 20px; font-size: .75rem; white-space: nowrap }
.p-name { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #2563eb; margin-bottom: 8px }
.featured .p-name { color: rgba(255,255,255,.65) }
.p-price { font-size: 3rem; font-weight: 900; color: #1e293b; line-height: 1 }
.featured .p-price { color: #fff }
.p-price sup { font-size: 1.2rem; vertical-align: top; margin-top: 10px; display: inline-block }
.p-period { font-size: .83rem; color: #64748b; margin-bottom: 22px; margin-top: 2px }
.featured .p-period { color: rgba(255,255,255,.55) }
.p-feats { list-style: none; margin: 20px 0 28px }
.p-feats li { padding: 9px 0; font-size: .88rem; color: #475569; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f1f5f9 }
.featured .p-feats li { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.1) }
.p-feats li::before { content: '✓'; font-weight: 900; color: #2563eb; flex-shrink: 0 }
.featured .p-feats li::before { color: #fff }
.btn-p { display: block; text-align: center; padding: 13px; border-radius: 30px; font-weight: 900; text-decoration: none; font-size: .93rem; transition: all .2s }
.btn-p-dark { background: #1e293b; color: #fff }
.btn-p-dark:hover { background: #2563eb; transform: translateY(-2px) }
.btn-p-accent { background: #2563eb; color: #fff }
.btn-p-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,198,255,.4) }

/* ── CTA / CONSULTATION ── */
.cta-wrap { border-radius: 24px; padding: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; background: linear-gradient(135deg,#1d4ed8,#3b82f6); position: relative; overflow: hidden }
.cta-wrap::before { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; background: rgba(0,198,255,.08); border-radius: 50%; pointer-events: none }
.cta-wrap h2 { color: #fff; margin-bottom: 14px }
.cta-wrap p { color: rgba(255,255,255,.72); font-size: .97rem; line-height: 1.8 }
.cta-perks { margin-top: 20px; display: flex; flex-direction: column; gap: 8px }
.cta-perk { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255,255,255,.75) }
.cta-perk::before { content: '✅'; flex-shrink: 0 }
.cta-form-box { background: rgba(255,255,255,.07); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 32px }
.cta-form-box h3 { color: #fff; margin-bottom: 22px; font-size: 1.1rem; font-weight: 800 }
.fg { margin-bottom: 14px }
.fg label { display: block; color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 700; margin-bottom: 5px }
.fg input, .fg select, .fg textarea { width: 100%; padding: 11px 15px; border-radius: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .88rem; outline: none; transition: border .2s, background .2s; font-family: inherit }
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,.35) }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--ac); background: rgba(0,198,255,.04) }
.fg select option { background: #0A2463 }
.fg textarea { resize: vertical; height: 80px }
.btn-submit { width: 100%; background: var(--ac); color: #fff; padding: 14px; border: none; border-radius: 30px; font-weight: 900; font-size: .97rem; cursor: pointer; transition: all .2s; font-family: inherit }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,198,255,.45) }

/* ── CTA STRIP (alternate style) ── */
.cta-strip { background: linear-gradient(135deg,#1d4ed8,#3b82f6); padding: 90px 5%; text-align: center; position: relative; overflow: hidden }
.cta-strip::before { content: ''; position: absolute; right: -80px; top: -80px; width: 350px; height: 350px; background: rgba(0,198,255,.08); border-radius: 50% }
.cta-strip::after { content: ''; position: absolute; left: -60px; bottom: -60px; width: 250px; height: 250px; background: rgba(255,255,255,.04); border-radius: 50% }
.cta-in { position: relative; z-index: 2; max-width: 700px; margin: 0 auto }
.cta-strip h2 { color: #fff; font-size: clamp(1.9rem,4vw,2.7rem); font-weight: 900; margin-bottom: 14px }
.cta-strip p { color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.8; margin-bottom: 36px }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.btn-w { background: #fff; color: #1d4ed8; font-weight: 800; padding: 14px 34px; border-radius: 50px; text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 5px 20px rgba(0,0,0,.15); transition: transform .2s, box-shadow .2s }
.btn-w:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,0,0,.2) }
.btn-ghost { background: transparent; color: #fff; font-weight: 700; padding: 14px 32px; border-radius: 50px; text-decoration: none; font-size: .95rem; border: 2px solid rgba(255,255,255,.4); display: inline-flex; align-items: center; gap: 8px; transition: all .2s }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); transform: translateY(-3px) }

/* ── ABOUT ── */
#about { background: #f8fafc }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 52px }
.about-vis { background: linear-gradient(145deg,#1d4ed8,#3b82f6); border-radius: 22px; padding: 40px; min-height: 380px; display: flex; flex-direction: column; justify-content: center; gap: 20px; position: relative; overflow: hidden }
.about-vis::before { content: ''; position: absolute; right: -60px; bottom: -60px; width: 250px; height: 250px; background: rgba(0,198,255,.1); border-radius: 50%; pointer-events: none }
.a-stat-row { display: flex; gap: 16px }
.a-stat-box { flex: 1; background: rgba(255,255,255,.15); border-radius: 14px; padding: 22px; text-align: center; border: 1px solid rgba(255,255,255,.2) }
.a-stat-box .num { font-size: 2rem; font-weight: 900; color: #fff }
.a-stat-box .lbl { font-size: .72rem; color: rgba(255,255,255,.6); margin-top: 5px; text-transform: uppercase; letter-spacing: .5px }
.badges-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px }
.a-badge { background: rgba(255,255,255,.15); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: .72rem; font-weight: 800; border: 1px solid rgba(255,255,255,.25) }
.about-text p { color: #475569; line-height: 1.8; margin-bottom: 14px }
.val-list { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 14px }
.val-item { display: flex; align-items: flex-start; gap: 14px }
.v-ico { width: 30px; height: 30px; border-radius: 8px; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; margin-top: 2px }
.v-txt strong { display: block; color: #1e293b; font-size: .9rem; font-weight: 800 }
.v-txt span { font-size: .83rem; color: #64748b; line-height: 1.6 }

/* ── STORY ── */
#story { background: #fff }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 52px }
.story-visual { background: linear-gradient(145deg,#1d4ed8,#3b82f6); border-radius: 24px; padding: 42px; position: relative; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between }
.story-visual::before { content: ''; position: absolute; right: -60px; bottom: -60px; width: 280px; height: 280px; background: rgba(0,198,255,.1); border-radius: 50%; pointer-events: none }
.story-visual::after { content: ''; position: absolute; left: -40px; top: -40px; width: 200px; height: 200px; background: rgba(255,255,255,.03); border-radius: 50%; pointer-events: none }
.sv-year { font-size: 5rem; font-weight: 900; color: rgba(255,255,255,.08); line-height: 1; margin-bottom: -16px }
.sv-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 30px; padding: 8px 18px; font-size: .75rem; font-weight: 800; color: #fff; width: fit-content }
.stat-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px }
.sbox { background: rgba(255,255,255,.12); border-radius: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.15); text-align: center }
.sbox .n { font-size: 1.9rem; font-weight: 900; color: #fff; line-height: 1 }
.sbox .n em { color: #60a5fa; font-style: normal }
.sbox .l { font-size: .68rem; color: rgba(255,255,255,.55); margin-top: 5px; text-transform: uppercase; letter-spacing: .5px }
.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px }
.badge { background: rgba(255,255,255,.15); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: .72rem; font-weight: 800; border: 1px solid rgba(255,255,255,.22) }
.story-text p { color: #475569; line-height: 1.85; margin-bottom: 16px; font-size: .97rem }
.story-text p strong { color: #1e293b }

/* ── VALUES ── */
#values { background: #f8fafc }
.vals-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px; margin-top: 52px }
.val-card { background: #fff; border-radius: 20px; padding: 34px; border: 1.5px solid #e2e8f0; transition: transform .3s, box-shadow .3s, border-color .3s; position: relative; overflow: hidden }
.val-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 20px 20px 0 0 }
.val-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(37,99,235,.1); border-color: #bfdbfe }
.vc1::before { background: linear-gradient(90deg,#2563eb,#06b6d4) }
.vc2::before { background: linear-gradient(90deg,#7c3aed,#a855f7) }
.vc3::before { background: linear-gradient(90deg,#059669,#10b981) }
.vc4::before { background: linear-gradient(90deg,#d97706,#f59e0b) }
.vc5::before { background: linear-gradient(90deg,#e11d48,#f43f5e) }
.vc6::before { background: linear-gradient(90deg,#0d9488,#14b8a6) }
.val-ico { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 18px }
.val-card h3 { font-size: 1.05rem; font-weight: 800; color: #1e293b; margin-bottom: 10px }
.val-card p { font-size: .87rem; color: #64748b; line-height: 1.75 }

/* ── TIMELINE ── */
#journey { background: #fff }
.timeline { position: relative; margin-top: 56px; padding-left: 40px }
.timeline::before { content: ''; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg,#2563eb,#06b6d4,#7c3aed,#10b981) }
.titem { position: relative; margin-bottom: 44px; padding-left: 30px }
.titem:last-child { margin-bottom: 0 }
.tdot { position: absolute; left: -38px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 3px #bfdbfe; flex-shrink: 0 }
.tyear { display: inline-block; background: #eff6ff; color: #2563eb; font-size: .72rem; font-weight: 900; padding: 4px 12px; border-radius: 20px; letter-spacing: 1px; margin-bottom: 8px }
.titem h3 { font-size: 1.05rem; font-weight: 800; color: #1e293b; margin-bottom: 6px }
.titem p { font-size: .88rem; color: #64748b; line-height: 1.75; max-width: 640px }

/* ── TEAM ── */
#team { background: #f8fafc }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 26px; margin-top: 52px }
.team-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1.5px solid #e2e8f0; transition: transform .3s, box-shadow .3s }
.team-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(37,99,235,.1) }
.tc-top { height: 160px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden }
.tc-avatar { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; color: #fff; border: 4px solid rgba(255,255,255,.3); position: relative; z-index: 1 }
.tc-top::before { content: ''; position: absolute; inset: 0; opacity: .15; background: radial-gradient(circle at 50% 120%,rgba(255,255,255,.4),transparent) }
.tc-body { padding: 22px }
.tc-name { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 3px }
.tc-role { font-size: .78rem; font-weight: 700; color: #2563eb; margin-bottom: 10px }
.tc-bio { font-size: .82rem; color: #64748b; line-height: 1.7; margin-bottom: 14px }
.tc-skills { display: flex; flex-wrap: wrap; gap: 5px }
.tc-skill { background: #f1f5f9; color: #475569; font-size: .68rem; font-weight: 700; padding: 4px 10px; border-radius: 14px }

/* ── AWARDS ── */
#awards { background: #fff }
.aw-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 20px; margin-top: 52px }
.aw-card { border-radius: 16px; padding: 28px; border: 1.5px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: transform .3s, box-shadow .3s, border-color .3s }
.aw-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(37,99,235,.09); border-color: #bfdbfe }
.aw-ico { font-size: 2.2rem }
.aw-card h4 { font-size: .92rem; font-weight: 800; color: #1e293b }
.aw-card p { font-size: .8rem; color: #64748b; line-height: 1.6 }
.aw-year { font-size: .7rem; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 3px 10px; border-radius: 14px }

/* ── CULTURE ── */
#culture { background: #f8fafc }
.culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 52px }
.culture-visual { display: flex; flex-direction: column; gap: 14px }
.cv-big { background: linear-gradient(145deg,#1d4ed8,#3b82f6); border-radius: 20px; padding: 34px; color: #fff; position: relative; overflow: hidden }
.cv-big::before { content: ''; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; background: rgba(255,255,255,.06); border-radius: 50% }
.cv-big h3 { font-size: 1.2rem; font-weight: 900; margin-bottom: 8px }
.cv-big p { font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.75 }
.cv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.cv-mini { background: #fff; border-radius: 14px; padding: 20px; border: 1.5px solid #e2e8f0; text-align: center }
.cv-mini .ci { font-size: 1.6rem; margin-bottom: 7px }
.cv-mini h4 { font-size: .88rem; font-weight: 800; color: #1e293b; margin-bottom: 4px }
.cv-mini p { font-size: .76rem; color: #64748b; line-height: 1.6 }
.culture-text h3 { font-size: 1.4rem; font-weight: 800; color: #1e293b; margin-bottom: 14px }
.culture-text p { color: #475569; line-height: 1.85; margin-bottom: 14px; font-size: .96rem }
.perk-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px }
.perk-item { display: flex; align-items: flex-start; gap: 12px }
.perk-ico { width: 36px; height: 36px; border-radius: 10px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0 }
.perk-txt strong { display: block; font-size: .9rem; font-weight: 800; color: #1e293b }
.perk-txt span { font-size: .82rem; color: #64748b; line-height: 1.6 }

/* ── CONTACT ── */
#contact { background: linear-gradient(135deg,#1d4ed8,#3b82f6) }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start }
.c-info h2 { color: #fff; margin-bottom: 14px }
.c-info p { color: rgba(255,255,255,.68); line-height: 1.8; margin-bottom: 32px }
.c-items { display: flex; flex-direction: column; gap: 16px }
.c-item { display: flex; align-items: center; gap: 16px }
.c-ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(0,198,255,.12); border: 1px solid rgba(0,198,255,.2); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0 }
.c-detail strong { display: block; color: #fff; font-size: .9rem }
.c-detail span { font-size: .82rem; color: rgba(255,255,255,.55) }

/* ── CLOSING ── */
#closing, .clos { background: linear-gradient(135deg,#eff6ff,#dbeafe); padding: 90px 5%; text-align: center; border-top: 1px solid #bfdbfe }
.closing-inner, .clos-in { max-width: 700px; margin: 0 auto }
.closing-inner h2, .clos h2 { color: #1e293b; font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 900; margin-bottom: 16px }
.closing-inner p, .clos p { color: #475569; font-size: 1.05rem; line-height: 1.8; margin-bottom: 36px }
.btn-primary, .bp { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; font-weight: 800; padding: 14px 34px; border-radius: 50px; text-decoration: none; font-size: .96rem; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 5px 20px rgba(37,99,235,.3); transition: transform .2s, box-shadow .2s }
.btn-primary:hover, .bp:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(37,99,235,.4) }
.btn-outline, .bo { background: transparent; color: #1e293b; font-weight: 700; padding: 14px 32px; border-radius: 50px; text-decoration: none; font-size: .96rem; border: 2px solid #cbd5e1; display: inline-flex; align-items: center; gap: 8px; transition: all .2s }
.btn-outline:hover, .bo:hover { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,.04); transform: translateY(-3px) }
.closing-btns, .cbts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap }

/* ── FOOTER ── */
footer { background: #0f172a; padding: 64px 5% 28px }
.f-inner, .fi { max-width: 1200px; margin: 0 auto }
.f-grid { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr 1.2fr; gap: 40px; margin-bottom: 48px }
.f-brand .logo, .fb .logo { display: block; margin-bottom: 14px; color: #fff }
.f-brand p, .fb p { font-size: .86rem; color: rgba(255,255,255,.45); line-height: 1.75; max-width: 260px }
.f-col h4, .fc h4 { color: #fff; font-size: .92rem; font-weight: 800; margin-bottom: 16px }
.f-col ul, .fc ul { list-style: none; display: flex; flex-direction: column; gap: 8px }
.f-col a, .fc a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .85rem; transition: color .2s }
.f-col a:hover, .fc a:hover { color: #60a5fa }
.f-bottom, .fbot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.4) }
.socials, .soc { display: flex; gap: 10px; margin-top: 18px }
.s-btn { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(255,255,255,.6); font-size: .82rem; font-weight: 800; transition: all .2s }
.s-btn:hover { background: #2563eb; color: #fff }

/* ── TOAST ── */
.toast { position: fixed; bottom: 30px; right: 30px; z-index: 9999; background: #fff; border: 1px solid #bfdbfe; border-left: 3px solid #2563eb; color: #1e293b; padding: 14px 22px; border-radius: 14px; font-size: .88rem; font-weight: 500; box-shadow: 0 8px 40px rgba(37,99,235,.15); opacity: 0; transform: translateY(16px); transition: all .4s ease; pointer-events: none }
.toast.show { opacity: 1; transform: translateY(0) }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease }
.reveal.vis { opacity: 1; transform: translateY(0) }

/* ── LEGAL ── */
.legal-content { max-width: 820px; margin: 0 auto; padding: 80px 5% }
.legal-content h1 { font-size: 2.2rem; font-weight: 900; margin-bottom: 8px; color: var(--dk) }
.legal-content .meta { color: var(--gr); font-size: .88rem; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--border) }
.legal-content h2 { font-size: 1.25rem; font-weight: 800; margin: 40px 0 12px; color: var(--dk) }
.legal-content p, .legal-content li { font-size: .95rem; color: var(--text-secondary); line-height: 1.85; margin-bottom: 12px }
.legal-content ul { padding-left: 24px; margin-bottom: 16px }
.legal-content a { color: var(--ac) }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .slide-inner { grid-template-columns: 1fr }
  .slide-visual { display: none }
  .slide-counter, .slider-arrows { display: none }
  .about-grid, .contact-grid, .cta-wrap { grid-template-columns: 1fr }
  .cta-wrap { padding: 36px 24px }
  .f-grid { grid-template-columns: 1fr 1fr }
  .steps::before { display: none }
  .p-card.featured { transform: none }
  .stat-block, .stat-b { border: none; border-bottom: 1px solid #bfdbfe }
  .stat-block:last-child, .stat-b:last-child { border: none }
  .story-grid, .culture-grid { grid-template-columns: 1fr }
  .sdi, .sdi.rev { grid-template-columns: 1fr }
  .sdi.rev .sdt, .sdi.rev .sdv { order: 0 }
}
@media(max-width:768px) {
  section { padding: 60px 5% }
  .sds { padding: 54px 5% }
  .nav-links { display: none; position: fixed; top: 70px; left: 0; right: 0; background: #ffffff; backdrop-filter: blur(16px); flex-direction: column; gap: 0; padding: 20px 0 32px; border-bottom: 1px solid #e2e8f0; z-index: 9999; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: calc(100vh - 70px); overflow-y: auto }
  .nav-links a { color: #0f172a !important }
  /* Mobile dropdown submenus */
  .nav-item-has-dropdown .nav-dropdown { position: static; opacity: 1; pointer-events: none; transform: none; display: none; box-shadow: none; border: none; background: #f8fafc; border-radius: 0; padding: 4px 0; margin: 6px 0 0; min-width: 0; width: 100%; grid-template-columns: 1fr }
  .nav-item-has-dropdown .nav-dropdown::before,
  .nav-item-has-dropdown .nav-dropdown::after { display: none !important }
  .nav-item-has-dropdown.open .nav-dropdown { display: block; pointer-events: all }
  .nav-item-has-dropdown:hover .nav-dropdown { display: none }
  .nav-item-has-dropdown.open .nav-dropdown { display: block }
  .nav-dropdown a { justify-content: center; padding: 12px 20px !important; font-size: .92rem !important; border-bottom: 1px solid #e2e8f0; border-radius: 0 !important; color: #334155 !important }
  .nav-dropdown a:last-child { border-bottom: none }
  .nav-links.open { display: flex }
  .nav-links li { width: 100%; text-align: center }
  .nav-links a { display: block; padding: 14px 20px; font-size: 1rem; color: #475569 }
  .hamburger { display: flex }
  .f-grid { grid-template-columns: 1fr }
  .toast { left: 20px; right: 20px }
  .services-header, .shdr { flex-direction: column; align-items: flex-start }
  .hero-stats { flex-direction: column; max-width: 300px }
  .hstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08) }
  .hstat:last-child { border: none }
  .timeline { padding-left: 28px }
  .cv-row { grid-template-columns: 1fr 1fr }
}
@media(max-width:480px) {
  .f-grid { grid-template-columns: 1fr }
  .hero-stats { max-width: 100% }
}

/* ════════════════════════════════════════
   PRICING PAGE — pricing.html
   ════════════════════════════════════════ */

/* ── PRICING HERO ── */
.hero { padding: 128px 5% 80px; background: linear-gradient(135deg,#0a0f1e 0%,#0d1b35 55%,#0f2755 100%); position: relative; overflow: hidden; text-align: center }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 72px 72px }
.hero-in { position: relative; z-index: 5; max-width: 900px; margin: 0 auto }
.htag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); padding: 8px 20px; border-radius: 40px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; margin-bottom: 22px }
.hero h1 { font-size: clamp(2.3rem,4.5vw,3.6rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 18px; letter-spacing: -1.5px }
.hero h1 .hl { background: linear-gradient(135deg,#60a5fa,#06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text }
.hero p { font-size: 1.04rem; color: rgba(255,255,255,.65); line-height: 1.85; max-width: 800px; margin: 0 auto 32px }

/* ── BILLING TOGGLE ── */
.toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 8px }
.toggle-label { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.6) }
.toggle-label.act { color: #60a5fa }
.toggle { width: 52px; height: 28px; background: rgba(255,255,255,.15); border-radius: 14px; position: relative; cursor: pointer; border: 1px solid rgba(255,255,255,.2); transition: background .3s }
.toggle.on { background: #2563eb }
.toggle-knob { position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 2px; left: 3px; transition: left .3s; box-shadow: 0 2px 6px rgba(0,0,0,.2) }
.toggle.on .toggle-knob { left: 27px }
.save-badge { background: #10b981; color: #fff; font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 12px; letter-spacing: .5px }

/* ── SHARED SECTION HELPERS ── */
.stag { display: inline-block; background: #eff6ff; color: #2563eb; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 6px 16px; border-radius: 20px; margin-bottom: 12px }
h2.sh { font-size: clamp(1.8rem,3.5vw,2.5rem); font-weight: 900; color: #1e293b; line-height: 1.2; margin-bottom: 14px }
.sub { color: #64748b; font-size: .97rem; line-height: 1.8 }
.anc { scroll-margin-top: 90px }
.sec { max-width: 1200px; margin: 0 auto }

/* ── TRUST STRIP ── */
.trust-strip { background: #fff; padding: 52px 5%; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0 }
.trust-inner { max-width: 1000px; margin: 0 auto; display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; align-items: center }
.trust-item { display: flex; align-items: center; gap: 10px; color: #475569; font-size: .85rem; font-weight: 700 }
.trust-ico { font-size: 1.3rem }

/* ── PRICING PLAN CARDS ── */
#plans { background: #f8fafc }
.plan-intro { text-align: center; margin-bottom: 52px }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 24px; max-width: 1100px; margin: 0 auto }
.plan-card { background: #fff; border-radius: 22px; padding: 36px; border: 2px solid #e2e8f0; position: relative; transition: transform .3s, box-shadow .3s, border-color .3s; display: flex; flex-direction: column }
.plan-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(37,99,235,.12) }
.plan-card.featured { border-color: #2563eb; box-shadow: 0 12px 40px rgba(37,99,235,.15) }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#2563eb,#06b6d4); color: #fff; font-size: .72rem; font-weight: 900; padding: 6px 20px; border-radius: 20px; white-space: nowrap; letter-spacing: .5px }
.plan-icon { font-size: 2.2rem; margin-bottom: 14px }
.plan-name { font-size: 1.1rem; font-weight: 900; color: #1e293b; margin-bottom: 6px }
.plan-desc { font-size: .85rem; color: #64748b; line-height: 1.7; margin-bottom: 22px }
.plan-price { margin-bottom: 6px }
.plan-price .currency { font-size: 1.2rem; font-weight: 900; color: #1e293b; vertical-align: top; line-height: 2.2 }
.plan-price .amount { font-size: 3.2rem; font-weight: 900; color: #1e293b; line-height: 1 }
.plan-price .period { font-size: .85rem; color: #64748b; font-weight: 600 }
.plan-sub-note { font-size: .75rem; color: #94a3b8; margin-bottom: 24px }
.divider { height: 1px; background: #f1f5f9; margin-bottom: 22px }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1 }
.feat-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .87rem; color: #475569; line-height: 1.55 }
.feat-list li .chk { color: #2563eb; font-weight: 900; flex-shrink: 0; margin-top: 1px }
.feat-list li .x { color: #cbd5e1; flex-shrink: 0; margin-top: 1px }
.feat-list li.dim { color: #94a3b8 }
.plan-btn { display: block; text-align: center; padding: 13px 20px; border-radius: 30px; font-weight: 800; font-size: .9rem; text-decoration: none; transition: all .2s }
.btn-primary { background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.3) }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.4) }
.btn-outline { background: transparent; color: #2563eb; border: 2px solid #bfdbfe }
.btn-outline:hover { background: #eff6ff; transform: translateY(-2px) }
.btn-dark { background: #1e293b; color: #fff }
.btn-dark:hover { background: #0f172a; transform: translateY(-2px) }

/* ── GUARANTEE ── */
.guarantee { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border: 1.5px solid #86efac; border-radius: 20px; padding: 36px; display: flex; align-items: center; gap: 28px; max-width: 820px; margin: 52px auto 0 }
.g-ico { font-size: 3rem; flex-shrink: 0 }
.g-text h3 { font-size: 1.1rem; font-weight: 900; color: #14532d; margin-bottom: 8px }
.g-text p { font-size: .88rem; color: #166534; line-height: 1.75 }

/* ── SERVICE PACKAGES ── */
#packages { background: #fff }
.pkg-tabs { display: flex; gap: 0; background: #f1f5f9; border-radius: 14px; padding: 5px; margin-bottom: 42px; width: fit-content; flex-wrap: wrap }
.pkg-tab { padding: 10px 22px; border-radius: 10px; font-size: .83rem; font-weight: 700; color: #64748b; cursor: pointer; transition: all .2s; border: none; background: none }
.pkg-tab.active { background: #fff; color: #2563eb; box-shadow: 0 2px 8px rgba(0,0,0,.08) }
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px }
.pkg-card { border-radius: 18px; padding: 28px; border: 1.5px solid #e2e8f0; transition: transform .3s, box-shadow .3s, border-color .3s }
.pkg-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(37,99,235,.09); border-color: #bfdbfe }
.pkg-card::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 2px; margin-bottom: 18px }
.pkg-ico { font-size: 1.8rem; margin-bottom: 12px }
.pkg-card h3 { font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 6px }
.pkg-card .from { font-size: .72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px }
.pkg-price { font-size: 1.7rem; font-weight: 900; color: #1e293b; margin-bottom: 10px }
.pkg-price span { font-size: .85rem; font-weight: 600; color: #64748b }
.pkg-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px }
.pkg-list li { font-size: .82rem; color: #475569; display: flex; align-items: center; gap: 8px; line-height: 1.5 }
.pkg-list li::before { content: '✓'; color: #2563eb; font-weight: 900; font-size: .8rem; flex-shrink: 0 }
.pkg-link { font-size: .82rem; font-weight: 800; color: #2563eb; text-decoration: none; display: inline-flex; align-items: center; gap: 5px }
.pkg-link:hover { color: #1d4ed8 }

/* ── COMPARISON TABLE ── */
#compare { background: #f8fafc }
.compare-wrap { overflow-x: auto; margin-top: 48px }
table { width: 100%; border-collapse: collapse; min-width: 700px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 24px rgba(37,99,235,.07) }
thead tr { background: linear-gradient(135deg,#1d4ed8,#3b82f6) }
th { padding: 18px 20px; text-align: center; color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase }
th:first-child { text-align: left }
tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .2s }
tbody tr:last-child { border: none }
tbody tr:hover { background: #f8fafc }
td { padding: 14px 20px; font-size: .87rem; color: #475569; text-align: center; vertical-align: middle }
td:first-child { text-align: left; font-weight: 600; color: #1e293b; font-size: .9rem }
td .yes { color: #10b981; font-size: 1.1rem; font-weight: 900 }
td .no { color: #e2e8f0; font-size: 1.1rem }
td .part { color: #f59e0b; font-size: .78rem; font-weight: 700 }
.cat-row td { background: #f8fafc; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #94a3b8; padding: 10px 20px }
.plan-col-header { font-size: 1rem !important; text-transform: none !important; letter-spacing: 0 !important; color: #1e293b !important; font-weight: 900 !important; padding: 16px 20px !important }

/* ── ADD-ONS ── */
#addons { background: #fff }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; margin-top: 48px }
.addon-card { border-radius: 16px; padding: 24px 26px; border: 1.5px solid #e2e8f0; display: flex; align-items: flex-start; gap: 16px; transition: transform .3s, box-shadow .3s, border-color .3s }
.addon-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(37,99,235,.08); border-color: #bfdbfe }
.addon-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0 }
.addon-info h4 { font-size: .93rem; font-weight: 800; color: #1e293b; margin-bottom: 4px }
.addon-info p { font-size: .81rem; color: #64748b; line-height: 1.6; margin-bottom: 8px }
.addon-price { font-size: .85rem; font-weight: 900; color: #2563eb }

/* ── FAQ ── */
#faq { background: #f8fafc }
.faq-list { max-width: 820px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px }
.faq-item { background: #fff; border-radius: 14px; border: 1.5px solid #e2e8f0; overflow: hidden }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; cursor: pointer; transition: background .2s }
.faq-q:hover { background: #f8fafc }
.faq-q span { font-size: .93rem; font-weight: 700; color: #1e293b; flex: 1; padding-right: 16px }
.faq-icon { width: 28px; height: 28px; border-radius: 50%; background: #eff6ff; display: flex; align-items: center; justify-content: center; color: #2563eb; font-size: 1.1rem; font-weight: 900; flex-shrink: 0; transition: transform .3s }
.faq-item.open .faq-icon { transform: rotate(45deg) }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease }
.faq-item.open .faq-a { max-height: 300px }
.faq-a p { padding: 0 24px 20px; font-size: .88rem; color: #64748b; line-height: 1.8; border-top: 1px solid #f1f5f9; padding-top: 16px }

/* ── CTA STRIP ── */
.cta-strip { background: linear-gradient(135deg,#1d4ed8,#3b82f6); padding: 88px 5%; text-align: center; position: relative; overflow: hidden }
.cta-strip::before { content: ''; position: absolute; right: -80px; top: -80px; width: 350px; height: 350px; background: rgba(0,198,255,.08); border-radius: 50% }
.cta-strip::after { content: ''; position: absolute; left: -60px; bottom: -60px; width: 250px; height: 250px; background: rgba(255,255,255,.04); border-radius: 50% }
.cta-in { position: relative; z-index: 2; max-width: 680px; margin: 0 auto }
.cta-strip h2 { color: #fff; font-size: clamp(1.9rem,4vw,2.6rem); font-weight: 900; margin-bottom: 14px }
.cta-strip p { color: rgba(255,255,255,.72); font-size: 1rem; line-height: 1.8; margin-bottom: 34px }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap }
.btn-w { background: #fff; color: #1d4ed8; font-weight: 800; padding: 14px 34px; border-radius: 50px; text-decoration: none; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 5px 20px rgba(0,0,0,.15); transition: transform .2s }
.btn-w:hover { transform: translateY(-3px) }
.btn-ghost { background: transparent; color: #fff; font-weight: 700; padding: 14px 30px; border-radius: 50px; text-decoration: none; font-size: .95rem; border: 2px solid rgba(255,255,255,.4); display: inline-flex; align-items: center; gap: 8px; transition: all .2s }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); transform: translateY(-3px) }

/* ── PRICING RESPONSIVE ── */
@media(max-width:768px) {
  .guarantee { flex-direction: column; text-align: center }
  .pkg-tabs { width: 100% }
}
@media(max-width:480px) {
  .plans-grid { grid-template-columns: 1fr }
}

/* ════════════════════════════════════════
   CONTACT PAGE — contact.html
   ════════════════════════════════════════ */

/* ── HERO CARDS ── */
.hero-cards { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap }
.hcard { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px 24px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(8px); transition: background .2s }
.hcard:hover { background: rgba(255,255,255,.12) }
.hcard .hi { font-size: 1.4rem }
.hcard .ht { font-size: .82rem; color: rgba(255,255,255,.5); margin-bottom: 2px }
.hcard .hv { font-size: .9rem; font-weight: 800; color: #fff }

/* ── CONTACT WAYS ── */
#ways { background: #f8fafc }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; margin-top: 48px }
.way-card { background: #fff; border-radius: 20px; padding: 30px; border: 1.5px solid #e2e8f0; text-align: center; transition: transform .3s, box-shadow .3s, border-color .3s; cursor: pointer; text-decoration: none; display: block }
.way-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(37,99,235,.1); border-color: #bfdbfe }
.way-ico { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 16px }
.way-card h3 { font-size: .97rem; font-weight: 800; color: #1e293b; margin-bottom: 7px }
.way-card p { font-size: .83rem; color: #64748b; line-height: 1.65; margin-bottom: 12px }
.way-link { font-size: .82rem; font-weight: 800; color: #2563eb; display: inline-flex; align-items: center; gap: 5px }

/* ── CONTACT MAIN GRID ── */
#contact-main { background: #fff }
.contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start }

/* ── LEFT INFO BLOCKS ── */
.contact-info { display: flex; flex-direction: column; gap: 28px }
.info-block { background: #f8fafc; border-radius: 16px; padding: 24px; border: 1.5px solid #e2e8f0 }
.info-block h4 { font-size: .92rem; font-weight: 800; color: #1e293b; margin-bottom: 4px; display: flex; align-items: center; gap: 8px }
.info-block p, .info-block a { font-size: .87rem; color: #64748b; line-height: 1.7; text-decoration: none }
.info-block a:hover { color: #2563eb }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px }
.hour-item { font-size: .8rem; color: #64748b }
.hour-item strong { color: #1e293b; font-weight: 700; display: block }
.online-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; display: inline-block; margin-right: 5px; animation: pulse 2s infinite }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }
.social-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap }
.soc-btn { width: 38px; height: 38px; border-radius: 10px; background: #eff6ff; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #2563eb; font-size: .85rem; font-weight: 900; transition: all .2s; border: 1px solid #bfdbfe }
.soc-btn:hover { background: #2563eb; color: #fff !important; border-color: #2563eb; transform: translateY(-2px) }
.response-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#eff6ff,#dbeafe); border: 1px solid #bfdbfe; border-radius: 12px; padding: 12px 16px; font-size: .82rem; color: #1d4ed8; font-weight: 700; margin-top: 4px }

/* ── CONTACT FORM ── */
.form-wrap { background: #fff; border-radius: 24px; padding: 40px; border: 1.5px solid #e2e8f0; box-shadow: 0 8px 40px rgba(37,99,235,.07) }
.form-title { font-size: 1.3rem; font-weight: 900; color: #1e293b; margin-bottom: 6px }
.form-sub { font-size: .87rem; color: #64748b; margin-bottom: 28px; line-height: 1.6 }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px }
.form-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px }
.form-group label { font-size: .8rem; font-weight: 700; color: #374151; letter-spacing: .3px }
.form-group label .req { color: #e11d48; margin-left: 2px }
.form-control { padding: 12px 16px; border-radius: 12px; border: 1.5px solid #e2e8f0; font-size: .9rem; color: #1e293b; font-family: inherit; transition: border-color .2s, box-shadow .2s; background: #fff; outline: none; width: 100% }
.form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.08) }
.form-control::placeholder { color: #94a3b8 }
select.form-control { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center }
textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.6 }
.budget-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 4px }
.budget-opt { position: relative }
.budget-opt input { position: absolute; opacity: 0; width: 0; height: 0 }
.budget-opt label { display: flex; align-items: center; justify-content: center; padding: 10px 6px; border-radius: 10px; border: 1.5px solid #e2e8f0; font-size: .78rem; font-weight: 700; color: #64748b; cursor: pointer; transition: all .2s; text-align: center }
.budget-opt input:checked + label { border-color: #2563eb; background: #eff6ff; color: #2563eb }
.budget-opt label:hover { border-color: #93c5fd; color: #2563eb }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px }
.checkbox-row input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; accent-color: #2563eb; flex-shrink: 0; cursor: pointer }
.checkbox-row label { font-size: .82rem; color: #64748b; line-height: 1.6; cursor: pointer }
.checkbox-row a { color: #2563eb; font-weight: 700 }
.submit-btn { width: 100%; padding: 15px 24px; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border: none; border-radius: 14px; font-size: .96rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 18px rgba(37,99,235,.3) }
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.4) }
.submit-btn:active { transform: translateY(0) }
.form-success { display: none; background: linear-gradient(135deg,#f0fdf4,#dcfce7); border: 1.5px solid #86efac; border-radius: 16px; padding: 30px; text-align: center }
.form-success .si { font-size: 3rem; margin-bottom: 12px }
.form-success h3 { font-size: 1.1rem; font-weight: 900; color: #14532d; margin-bottom: 8px }
.form-success p { font-size: .88rem; color: #166534; line-height: 1.75 }

/* ── FREE CONSULTATION ── */
#consultation { background: #f8fafc; scroll-margin-top: 90px }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px;  }
.consult-visual { background: linear-gradient(145deg,#1d4ed8,#3b82f6); border-radius: 24px; padding: 40px; position: relative; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; justify-content: space-between }
.consult-visual::before { content: ''; position: absolute; right: -50px; bottom: -50px; width: 220px; height: 220px; background: rgba(255,255,255,.05); border-radius: 50% }
.cv-label { font-size: .68rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px }
.cv-heading { font-size: 1.6rem; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 14px }
.cv-desc { font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 24px }
.cv-perks { display: flex; flex-direction: column; gap: 10px }
.cv-perk { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: rgba(255,255,255,.85) }
.cv-perk::before { content: '✓'; width: 20px; height: 20px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: #fff; flex-shrink: 0 }
.cv-bottom { background: rgba(255,255,255,.1); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.15) }
.cv-bottom .ai { font-size: 1.8rem }
.cv-bottom .at { font-size: .78rem; color: rgba(255,255,255,.6) }
.cv-bottom .av { font-size: .9rem; font-weight: 800; color: #fff }
.consult-form { background: #fff; border-radius: 22px; padding: 36px; border: 1.5px solid #e2e8f0; box-shadow: 0 8px 40px rgba(37,99,235,.07) }
.cf-title { font-size: 1.2rem; font-weight: 900; color: #1e293b; margin-bottom: 5px }
.cf-sub { font-size: .86rem; color: #64748b; margin-bottom: 26px }
.slot-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 4px }
.slot-opt { position: relative }
.slot-opt input { position: absolute; opacity: 0; width: 0; height: 0 }
.slot-opt label { display: flex; align-items: center; justify-content: center; padding: 9px 4px; border-radius: 10px; border: 1.5px solid #e2e8f0; font-size: .76rem; font-weight: 700; color: #64748b; cursor: pointer; transition: all .2s; text-align: center }
.slot-opt input:checked + label { border-color: #2563eb; background: #eff6ff; color: #2563eb }
.slot-opt label:hover { border-color: #93c5fd; color: #2563eb }
.consult-btn { width: 100%; padding: 14px; background: linear-gradient(135deg,#2563eb,#1d4ed8); color: #fff; border: none; border-radius: 12px; font-size: .93rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: all .2s; box-shadow: 0 4px 16px rgba(37,99,235,.3) }
.consult-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(37,99,235,.4) }

/* ── FREE AUDIT ── */
#audit { background: #fff; scroll-margin-top: 90px }
.audit-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center }
.audit-form { background: #f8fafc; border-radius: 22px; padding: 36px; border: 1.5px solid #e2e8f0 }
.audit-info h3 { font-size: 1.5rem; font-weight: 900; color: #1e293b; margin-bottom: 14px; line-height: 1.2 }
.audit-info p { font-size: .93rem; color: #64748b; line-height: 1.8; margin-bottom: 20px }
.audit-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px }
.audit-list li { display: flex; align-items: flex-start; gap: 12px; font-size: .88rem; color: #475569; line-height: 1.6 }
.audit-ico { width: 32px; height: 32px; border-radius: 9px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0 }
.audit-stat-row { display: flex; gap: 20px; flex-wrap: wrap }
.audit-stat { text-align: center }
.audit-stat .n { font-size: 1.8rem; font-weight: 900; color: #1e293b }
.audit-stat .n em { color: #2563eb; font-style: normal }
.audit-stat .l { font-size: .75rem; color: #64748b }

/* ── OFFICES ── */
#offices { background: #f8fafc }
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(0px,1fr)); gap: 22px; margin-top: 48px }
.office-card { background: #fff; border-radius: 20px; overflow: hidden; border: 1.5px solid #e2e8f0; transition: transform .3s, box-shadow .3s }
.office-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(37,99,235,.1) }
.office-top { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; position: relative; overflow: hidden }
.office-top::before { content: ''; position: absolute; inset: 0; opacity: .15; background: radial-gradient(circle at 50% 120%,rgba(255,255,255,.5),transparent) }
.office-body { padding: 22px }
.office-city { font-size: 1rem; font-weight: 900; color: #1e293b; margin-bottom: 3px }
.office-country { font-size: .75rem; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 3px 10px; border-radius: 12px; display: inline-block; margin-bottom: 12px }
.office-detail {overflow-wrap: anywhere; font-size: .83rem; color: #64748b; line-height: 1.7; display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px }
.office-detail .oi { flex-shrink: 0; font-size: .9rem; margin-top: 1px }
.office-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #10b981; background: #f0fdf4; padding: 4px 10px; border-radius: 10px; border: 1px solid #bbf7d0; margin-top: 6px }

/* ── SOCIAL PROOF ── */
#social-proof { background: #fff; padding: 60px 5%; border-top: 1px solid #e2e8f0 }
.proof-inner { max-width: 1000px; margin: 0 auto }
.proof-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center }
.proof-item { background: #f8fafc; border-radius: 16px; padding: 24px; border: 1.5px solid #e2e8f0; max-width: 300px; flex: 1; min-width: 220px }
.proof-stars { color: #f59e0b; font-size: .95rem; margin-bottom: 10px }
.proof-item blockquote { font-size: .85rem; color: #475569; line-height: 1.75; font-style: italic; margin-bottom: 14px }
.proof-author { display: flex; align-items: center; gap: 10px }
.pa-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: .78rem; flex-shrink: 0 }
.pa-name { font-weight: 800; color: #1e293b; font-size: .83rem }
.pa-role { font-size: .73rem; color: #64748b }

/* ── CONTACT RESPONSIVE ── */
@media(max-width:1024px) {
  .contact-grid, .consult-grid, .audit-grid { grid-template-columns: 1fr }
}
@media(max-width:768px) {
  .form-row { grid-template-columns: 1fr }
  .budget-grid { grid-template-columns: 1fr 1fr }
  .slot-grid { grid-template-columns: 1fr 1fr }
  .hero-cards { flex-direction: column; align-items: center }
  .hcard { width: 100%; max-width: 320px }
  .audit-stat-row { justify-content: center }
}
@media(max-width:480px) {
  .budget-grid { grid-template-columns: 1fr 1fr }
  .slot-grid { grid-template-columns: 1fr 1fr }
}

/* ── FOOTER SOCIAL ICONS (contact page footer) ── */
.fsoc { display: flex; gap: 9px; margin-top: 15px }
.fsb { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(255,255,255,.5); font-size: .79rem; font-weight: 800; transition: all .2s }
.fsb:hover { background: #2563eb; color: #fff }

/* =========================================================
   ANGULAR NG-VIEW + HERO SLIDER FIXES
   ========================================================= */

/* 1. ng-view must be a block so children have a layout context */
[ng-view] { display: block; }

/* 2. NAV — base state is transparent (JS switches to white on scroll) */
nav .nav-links > li > a:not(.nav-cta) { color: rgba(255,255,255,.88); }
nav .logo { color: #ffffff; }
nav .hamburger span { background: #ffffff; }

/* 3. #home: full-viewport height, sits UNDER fixed nav (not pushed down).
      Slides cover the full viewport including behind-nav area — 
      slide content is padded inside so text clears the nav. */
#home {
  position: relative !important;
  height: 100vh !important;
  min-height: 640px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4. Slides fill #home completely (including behind nav area) */
.hero-slide {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1) !important;
}
.hero-slide.active {
  opacity: 1 !important;
  pointer-events: all !important;
  z-index: 2;
}

/* 5. slide-inner: pad top so text clears the 70px nav,
      pad bottom so stats clear the slider controls (~80px).
      Reduce font sizes so everything fits comfortably. */
.slide-inner {
  position: relative !important;
  z-index: 5 !important;
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 5% 80px !important;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

/* 6. Reduce hero heading so it doesn't overflow on smaller viewports */
.slide-h1 {
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}

/* 7. Tighten subtitle */
.slide-sub {
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
}

/* 8. Eyebrow badge smaller */
.slide-eyebrow {
  font-size: .66rem !important;
  padding: 6px 14px !important;
  margin-bottom: 16px !important;
}

/* 9. Stats bar — reduce top margin so it stays within bounds */
.slide-stats {
  margin-top: 24px !important;
}
.ss-num { font-size: 1.3rem !important; }
.ss-item { padding: 12px 20px !important; }

/* 10. Slider controls sit inside #home so they're always visible */
.slider-dots  { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 20; }
.slider-arrows { position: absolute; bottom: 16px; right: 5%; z-index: 20; }
.slide-counter { position: absolute; top: 50%; right: 2.5%; transform: translateY(-50%); z-index: 20; }
.slide-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; z-index: 20; }

/* 11. Inner page hero sections — push below fixed nav */

[ng-view] .page-hero { margin-top: 70px !important; }
[ng-view] .page-hero[style*="padding:100px"] { padding-top: 100px !important; }

/* ══ SLIDE 5: AI-Powered Marketing ══ */
.slide-bg-5 {
  background: linear-gradient(135deg,#071a0e 0%,#0d2b18 40%,#0f3d22 75%,#061510 100%);
  --grad-a: #a3e635;
  --grad-b: #4ade80;
  --accent-rgb: 163,230,53;
}
.slide-bg-5 .orb-1 { background: radial-gradient(circle,#16a34a,#15803d); }
.slide-bg-5 .orb-2 { background: radial-gradient(circle,#4ade80,#22c55e); }
.slide-bg-5 .orb-3 { background: #a3e635; }
.eyebrow-dot-lime { background: #a3e635; }

.fp-icon-lime { background: linear-gradient(135deg,#d9f99d,#bbf7d0); }

.premium-card-ai { border-color: rgba(163,230,53,.15); }

.sparkline-ai .sbar { background: linear-gradient(to top,rgba(163,230,53,.6),rgba(74,222,128,.8)); }

/* ── HQ CARD ── */
.hq-card {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 60%, #1e3a8a 100%);
  border-radius: 20px;
  padding: 40px 48px;
  margin-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(29,78,216,0.25);
}
.hq-card::after {
  content: '🏛️';
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 90px;
  opacity: 0.1;
  pointer-events: none;
}
.hq-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #93c5fd;
}
.hq-name {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}
.hq-address {
  font-size: 15px;
  color: #bfdbfe;
  font-weight: 500;
}
.hq-desc {
  font-size: 14px;
  color: #93c5fd;
  max-width: 600px;
  line-height: 1.7;
  margin: 4px 0 0;
}

/* ── TIMELINE WRAPPER ── */
.timeline {
  position: relative;
  padding-left: 80px; /* space for the dot column */
}

/* Vertical line running down the left */
.timeline::before {
  content: '';
  position: absolute;
  left: 25px; /* center of the 52px dot */
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: linear-gradient(to bottom, #1d4ed8, #3b82f6 50%, #1d4ed8);
  opacity: 0.25;
}

/* ── EACH ROW ── */
.tl-item {
  position: relative;
  margin-bottom: 40px;
}

/* The circular year dot — absolutely positioned left */
.tl-dot {
  position: absolute;
  left: -80px;         /* pull back into the left gutter */
  top: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1d4ed8;
  border: 3px solid #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 5px rgba(29,78,216,0.1);
}
.tl-dot span {
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
}

/* Current year dot */
.tl-dot-now {
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  border-color: #06b6d4;
  width: 58px;
  height: 58px;
  left: -83px;
  box-shadow: 0 0 0 7px rgba(6,182,212,0.15), 0 0 24px rgba(6,182,212,0.35);
  animation: tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(6,182,212,0.15), 0 0 24px rgba(6,182,212,0.35); }
  50%       { box-shadow: 0 0 0 13px rgba(6,182,212,0.08), 0 0 36px rgba(6,182,212,0.45); }
}

/* ── CARD ── */
.tl-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 30px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(29,78,216,0.1);
}

/* Arrow pointing left toward the dot */
.tl-card::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 18px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  transform: rotate(45deg);
  z-index: 1;
}

/* Dark card for 2025 */
.tl-card-now {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border-color: rgba(6,182,212,0.3);
  box-shadow: 0 8px 36px rgba(6,182,212,0.12);
}
.tl-card-now::before {
  background: #0f172a;
  border-color: rgba(6,182,212,0.25);
}
.tl-card-now h3 { color: #f1f5f9 !important; }
.tl-card-now p  { color: #94a3b8; }

/* ── CARD INTERNALS ── */
.tl-year-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 100px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.tl-now-badge {
  color: #06b6d4;
  background: rgba(6,182,212,0.12);
}
.tl-ico {
  font-size: 26px;
  margin-bottom: 6px;
  display: block;
}
.tl-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 10px;
}
.tl-card p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.75;
  margin: 0 0 14px;
}
.tl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tl-tags span {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 100px;
  background: #eff6ff;
  color: #1d4ed8;
}
.tl-now-tags span {
  background: rgba(6,182,212,0.12);
  color: #22d3ee;
}
.tl-cta {
  margin-top: 18px;
  font-size: 14px;
  color: #64748b;
}
.tl-cta a {
  color: #06b6d4;
  font-weight: 700;
  text-decoration: none;
  margin-left: 4px;
}
.tl-cta a:hover { text-decoration: underline; }

/* ── OFFICES STRIP ── */
.offices-strip {
  margin-top: 72px;
  text-align: center;
}
.offices-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 20px;
}
.offices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.office-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.office-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.07);
}
.hq-office {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #bfdbfe;
}
.office-ico {
  font-size: 26px;
  margin-bottom: 10px;
}
.office-city {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.hq-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: #1d4ed8;
  color: #fff;
  padding: 2px 7px;
  border-radius: 100px;
  text-transform: uppercase;
}
.office-addr {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.55;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .timeline { padding-left: 60px; }
  .timeline::before { left: 18px; }
  .tl-dot { left: -60px; width: 40px; height: 40px; }
  .tl-dot-now { left: -63px; width: 46px; height: 46px; }
  .tl-dot span { font-size: 8px; }
  .tl-card { padding: 18px 20px; }
  .offices-grid { grid-template-columns: 1fr 1fr; }
  .hq-card { padding: 28px 24px; }
  .hq-name { font-size: 22px; }
}
@media (max-width: 480px) {
  .timeline { padding-left: 50px; }
  .tl-dot { left: -50px; }
  .tl-dot-now { left: -53px; }
  .offices-grid { grid-template-columns: 1fr; }
}
/* -- HOW IT WORKS (Benefits & Process) -- */
.hiw-sec { padding: 60px 0 0; }
.hiw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.hiw-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 32px 28px; position: relative; overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s; }
.hiw-card:hover { transform: translateY(-5px); border-color: #bfdbfe; box-shadow: 0 16px 40px rgba(37,99,235,.08); }
.hiw-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #2563eb, #60a5fa); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.hiw-card:hover::before { transform: scaleX(1); }
.hiw-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #eff6ff; color: #2563eb; font-weight: 900; font-size: 1.1rem; border-radius: 12px; margin-bottom: 20px; }
.hiw-card h4 { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 12px; }
.hiw-card p { font-size: 0.94rem; color: #64748b; line-height: 1.7; margin: 0; }
.hiw-benefit { display: inline-block; margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e2e8f0; font-size: 0.9rem; color: #0f172a; font-weight: 600; line-height: 1.6; }
.hiw-benefit b { color: #2563eb; font-weight: 800; }