/* ================================================================
   BrainCodesLab — Redesigned Landing Page
   Aesthetic: Tech-Forward Professional
   Fonts: Space Grotesk (Display) + DM Sans (Body)
   Palette: Slate + Blue + Indigo CTA
   Skills: landing-page-guide-v2 + landing-page-design
   ================================================================ */

/* ─── Design Tokens ──────────────────────────────────── */
:root {
  /* Fonts */
  --ff-display: 'Space Grotesk', system-ui, sans-serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;

  /* Palette - Enhanced UI/UX Pro Max Recommendations */
  --c-primary: #0F172A;
  --c-blue: #3B82F6;
  --c-indigo: #6366F1;
  --c-emerald: #10B981;
  --c-emerald-dark: #059669;
  --c-orange: #3B82F6;
  --c-orange-dark: #2563EB;
  --c-white: #FFFFFF;
  --c-slate-50: #F8FAFC;
  --c-slate-100: #F1F5F9;
  --c-slate-200: #E2E8F0;
  --c-slate-300: #CBD5E1;
  --c-slate-400: #94A3B8;
  --c-slate-500: #64748B;
  --c-slate-600: #475569;
  --c-slate-700: #334155;
  --c-slate-800: #1E293B;
  --c-slate-900: #0F172A;
  
  /* Focus Ring - WCAG AAA Compliant */
  --focus-ring: 0 0 0 3px rgba(99,102,241,.3);
  --focus-ring-offset: 0 0 0 2px var(--c-white);

  /* Spacing scale (4px base) */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem;
  --s32: 8rem;

  /* Misc */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow: 0 4px 12px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);
  --shadow-xl: 0 24px 48px rgba(15,23,42,.16);
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 0.35s;
}

/* ─── Reset ──────────────────────────────────────────── */
*,*::before,*::after { margin:0;padding:0;box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { 
  font-family:var(--ff-body); 
  color:var(--c-slate-700); 
  line-height:1.65; 
  background:var(--c-white); 
  overflow-x:hidden;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewport="0 0 24 24" style="fill:black;"><circle cx="12" cy="12" r="3" fill="%233B82F6"/><circle cx="12" cy="12" r="1.5" fill="white"/></svg>') 12 12, auto;
}
h1,h2,h3,h4 { font-family:var(--ff-display); font-weight:700; color:var(--c-primary); line-height:1.15; }
a { 
  color:inherit; 
  text-decoration:none; 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
}
ul { list-style:none; }
img { max-width:100%; display:block; height:auto; }
button { 
  border:none; 
  background:none; 
  font:inherit; 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
}

/* Accessibility - Focus States (CRITICAL) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
details:focus-visible {
  outline:none;
  box-shadow:var(--focus-ring-offset), var(--focus-ring);
  border-radius:var(--radius);
}

/* Mobile touch improvements */
@media(max-width:768px){
  html { -webkit-tap-highlight-color:rgba(59,130,246,.2); }
  body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
  a, button { min-height:44px; min-width:44px; } /* Minimum touch target size */
}

/* ─── Layout ─────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 var(--s6); }
@media(min-width:768px){ .container{ padding:0 var(--s8); } }
@media(max-width:480px){ .container{ padding:0 var(--s4); } }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }

.anim-fade { opacity:0; animation:fadeInUp .6s var(--ease) forwards; animation-delay:calc(var(--delay,0) * 100ms); }
.anim-word { display:inline-block; opacity:0; animation:fadeInUp .5s var(--ease) forwards; animation-delay:calc(var(--delay,0) * 80ms); }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal:nth-child(2){ transition-delay:80ms; }
.reveal:nth-child(3){ transition-delay:160ms; }
.reveal:nth-child(4){ transition-delay:240ms; }
.reveal:nth-child(5){ transition-delay:320ms; }
.reveal:nth-child(6){ transition-delay:400ms; }

@media(prefers-reduced-motion:reduce){
  .anim-fade,.anim-word,.reveal { opacity:1!important; transform:none!important; animation:none!important; transition:none!important; }
}

/* ─── Buttons ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--ff-body); font-weight:600; font-size:.9375rem;
  padding:var(--s3) var(--s6); border-radius:var(--radius-full);
  transition:all var(--dur) var(--ease); border:2px solid transparent;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewport="0 0 32 32"><circle cx="16" cy="16" r="7" fill="%233B82F6"/><circle cx="16" cy="16" r="3.5" fill="white"/><circle cx="16" cy="16" r="11" fill="none" stroke="%233B82F6" stroke-width="2.5" opacity="0.5"/><path d="M 16 5 L 16 11" stroke="white" stroke-width="2" stroke-linecap="round"/><circle cx="16" cy="16" r="2" fill="%236366F1"/></svg>') 16 16, pointer;
  white-space:nowrap; position:relative; overflow:hidden;
  user-select:none;
}
.btn:disabled {
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
.btn svg { transition:transform var(--dur) var(--ease); flex-shrink:0; z-index:1; position:relative; }
.btn:hover svg { transform:translateX(3px); }
.btn:active svg { transform:translateX(1px) scale(.95); }

.btn-primary { 
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo)); 
  color:var(--c-white); 
  box-shadow:0 4px 14px rgba(59,130,246,.35);
  position:relative;
  z-index:1;
  cursor:pointer;
}
.btn-primary::before {
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(135deg, var(--c-indigo), var(--c-blue));
  transition:left .4s var(--ease);
  z-index:-1;
  border-radius:var(--radius-full);
}
.btn-primary:hover::before { left:0; }
.btn-primary:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 24px rgba(59,130,246,.5); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-primary:focus-visible {
  box-shadow:var(--focus-ring-offset), var(--focus-ring), 0 8px 24px rgba(59,130,246,.5);
}

/* Emerald CTA Variant - UI/UX Pro Max Recommendation */
.btn-primary-emerald {
  background:linear-gradient(135deg, var(--c-emerald), var(--c-emerald-dark));
  box-shadow:0 4px 14px rgba(16,185,129,.35);
}
.btn-primary-emerald::before {
  background:linear-gradient(135deg, var(--c-emerald-dark), var(--c-emerald));
}
.btn-primary-emerald:hover {
  box-shadow:0 8px 24px rgba(16,185,129,.5);
}

.btn-ghost { border-color:var(--c-slate-300); color:var(--c-primary); cursor:pointer; }
.btn-ghost:hover { border-color:var(--c-blue); color:var(--c-blue); background:rgba(59,130,246,.04); transform:translateY(-1px); }
.btn-ghost:active { transform:translateY(0); }
.btn-ghost:focus-visible { border-color:var(--c-indigo); box-shadow:var(--focus-ring); }

.btn-nav-cta { background:var(--c-blue); color:var(--c-white); font-size:.875rem; padding:var(--s2) var(--s5); border-radius:var(--radius-full); }
.btn-nav-cta:hover { background:var(--c-indigo); transform:translateY(-1px); }

.btn-lg { padding:var(--s4) var(--s8); font-size:1.0625rem; }
.btn-block { width:100%; justify-content:center; }

@media(max-width:640px){
  .btn { font-size:.875rem; padding:var(--s3) var(--s5); }
  .btn-lg { padding:var(--s3) var(--s6); font-size:1rem; }
}

/* ================================================================
   HEADER
   ================================================================ */
.header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--c-slate-200);
  transition:all var(--dur) var(--ease);
}
.header.scrolled { 
  box-shadow:0 4px 24px rgba(15,23,42,.08); 
  background:rgba(255,255,255,.95);
  border-bottom-color:rgba(226,232,240,.8);
}

.header-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
@media(max-width:768px){
  .header-inner { height:64px; }
}

/* Logo */
.logo { 
  display:flex; 
  align-items:center; 
  gap:var(--s3); 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
  transition:opacity .2s var(--ease); 
}
.logo:hover { opacity:.85; }
.logo:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius); }
.logo-icon { flex-shrink:0; border-radius:8px; object-fit:contain; transition:transform .3s var(--ease); }
.logo:hover .logo-icon { transform:rotate(-5deg) scale(1.05); }
@media(max-width:480px){
  .logo-icon { width:28px; height:28px; }
}
.logo-text { font-family:var(--ff-display); font-size:1.25rem; font-weight:700; color:var(--c-primary); }
@media(max-width:480px){
  .logo-text { font-size:1.125rem; }
}
.logo-accent { color:var(--c-blue); }

/* Nav */
.nav { display:flex; gap:var(--s8); }
.nav-link { 
  font-size:.9375rem; 
  font-weight:500; 
  color:var(--c-slate-600); 
  position:relative; 
  transition:color var(--dur) var(--ease); 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
}
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--c-blue); transition:width var(--dur) var(--ease); border-radius:2px; }
.nav-link:hover { color:var(--c-blue); }
.nav-link:hover::after { width:100%; }
.nav-link:focus-visible { color:var(--c-indigo); outline:none; }
.nav-link:focus-visible::after { width:100%; background:var(--c-indigo); }

/* Mobile toggle */
.mobile-toggle { 
  display:none; 
  width:28px; 
  height:22px; 
  flex-direction:column; 
  justify-content:space-between; 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
  padding:var(--s2); 
  margin:calc(var(--s2) * -1); 
}
.mobile-toggle:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius); }
.mobile-toggle span { display:block; height:2px; background:var(--c-primary); border-radius:2px; transition:all var(--dur) var(--ease); }
.mobile-toggle.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2){ opacity:0; }
.mobile-toggle.open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

@media(max-width:768px){
  .nav, .btn-nav-cta { display:none; }
  .mobile-toggle { display:flex; }
  .nav.open { display:flex; flex-direction:column; position:fixed; top:64px; left:0; right:0; background:rgba(255,255,255,.98); backdrop-filter:blur(14px); padding:var(--s6); gap:var(--s4); border-bottom:1px solid var(--c-slate-200); box-shadow:var(--shadow-lg); animation:fadeInUp .3s var(--ease); }
  .nav.open .nav-link { font-size:1.125rem; padding:var(--s3) 0; }
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position:relative; overflow:hidden;
  padding:calc(72px + var(--s16)) 0 var(--s16);
  min-height:100vh; display:flex; align-items:center;
}
@media(max-width:768px){ .hero { min-height:auto; padding:calc(72px + var(--s12)) 0 var(--s12); } }

/* BG effects with Enhanced Halo Effects */
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-glow { 
  position:absolute; border-radius:50%; 
  filter:blur(120px); 
  mix-blend-mode:screen;
  will-change:transform, opacity;
}
.hero-glow--1 { 
  width:700px; height:700px; top:-20%; right:-10%; 
  background:
    radial-gradient(circle at 40% 40%, rgba(59,130,246,.3) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(99,102,241,.2) 0%, transparent 60%);
  animation:glow-pulse-bloom 8s ease-in-out infinite, glow-drift 20s ease-in-out infinite;
  box-shadow:
    inset 0 0 80px rgba(59,130,246,.3),
    0 0 120px rgba(59,130,246,.2),
    0 0 200px rgba(99,102,241,.15);
}
.hero-glow--2 { 
  width:600px; height:600px; bottom:-15%; left:-10%; 
  background:
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.25) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(139,92,246,.15) 0%, transparent 60%);
  animation:glow-pulse-bloom 10s ease-in-out infinite reverse, glow-drift 25s ease-in-out infinite reverse;
  box-shadow:
    inset 0 0 80px rgba(99,102,241,.3),
    0 0 120px rgba(99,102,241,.2),
    0 0 200px rgba(139,92,246,.15);
}

/* Enhanced glow animations with bloom effect */
@keyframes glow-pulse-bloom {
  0%, 100% { opacity:1; transform:scale(1); filter:blur(120px) brightness(1); }
  33% { opacity:.75; transform:scale(1.15); filter:blur(140px) brightness(1.2); }
  66% { opacity:.85; transform:scale(0.95); filter:blur(100px) brightness(0.9); }
}
@keyframes glow-drift {
  0%, 100% { transform:translate(0, 0) rotate(0deg); }
  25% { transform:translate(30px, -20px) rotate(5deg); }
  50% { transform:translate(-20px, 30px) rotate(-5deg); }
  75% { transform:translate(20px, 20px) rotate(3deg); }
}
.hero-grid-bg {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(226,232,240,.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,232,240,.4) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%);
}

/* Layout: 2-col on desktop */
.hero-inner { display:grid; grid-template-columns:1fr; gap:var(--s12); position:relative; z-index:1; align-items:center; }
@media(min-width:1024px){ .hero-inner { grid-template-columns:1fr 1fr; gap:var(--s16); } }

/* Content */
.hero-content { text-align:center; }
@media(min-width:1024px){ .hero-content { text-align:left; } }

.hero-badge {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); border-radius:var(--radius-full);
  background:var(--c-white); border:1px solid var(--c-slate-200);
  font-size:.8125rem; font-weight:500; color:var(--c-slate-600);
  margin-bottom:var(--s6); box-shadow:var(--shadow-sm);
}
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--c-blue); animation:pulse-dot 2s ease infinite; }

.hero-title { font-size:clamp(2.25rem,5.5vw,4.25rem); margin-bottom:var(--s6); letter-spacing:-0.02em; }
.hero-highlight {
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub { font-size:clamp(1.0625rem,1.6vw,1.25rem); color:var(--c-slate-600); max-width:540px; margin-bottom:var(--s8); line-height:1.7; }
@media(max-width:1023px){ .hero-sub { margin-left:auto; margin-right:auto; } }

.hero-ctas { display:flex; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s10); }
@media(max-width:1023px){ .hero-ctas { justify-content:center; } }
@media(max-width:640px){
  .hero-ctas { flex-direction:column; width:100%; }
  .hero-ctas .btn { width:100%; }
}

/* Social proof bar */
.hero-proof { display:flex; align-items:center; gap:var(--s8); }
@media(max-width:1023px){ .hero-proof { justify-content:center; } }
@media(max-width:640px){ .hero-proof { gap:var(--s5); flex-wrap:wrap; } }
@media(max-width:480px){ .hero-proof { flex-direction:column; gap:var(--s4); } }

.proof-stat { text-align:center; transition:all var(--dur) var(--ease); }
@media(min-width:1024px){ .proof-stat { text-align:left; } }
.proof-stat:hover { transform:scale(1.05); }
@media(max-width:480px){
  .proof-stat { width:100%; }
}
.proof-num { 
  display:block; font-family:var(--ff-display); font-size:2rem; 
  font-weight:700; color:var(--c-blue); line-height:1;
  text-shadow:0 2px 8px rgba(59,130,246,.2);
}
@media(max-width:640px){
  .proof-num { font-size:1.75rem; }
}
@media(max-width:480px){
  .proof-num { font-size:1.5rem; }
}
.proof-stat span { font-size:.8125rem; color:var(--c-slate-500); margin-top:2px; display:block; }
.proof-divider { width:1px; height:36px; background:var(--c-slate-300); }
@media(max-width:480px){ .proof-divider { width:36px; height:1px; } }

/* ─── Hero Visual: Code Card ─────────────────────────── */
.hero-visual { display:none; }
@media(min-width:1024px){ .hero-visual { display:block; } }

.hero-card {
  position:relative; border-radius:var(--radius-lg); overflow:visible;
  box-shadow:0 24px 48px rgba(15,23,42,.12), 0 0 0 1px rgba(59,130,246,.1);
  border:1px solid var(--c-slate-200);
  background:var(--c-white);
  transition:all .5s var(--ease);
}
.hero-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 32px 64px rgba(59,130,246,.2), 0 0 0 1px rgba(59,130,246,.2);
}
.card-browser {
  display:flex; align-items:center; gap:6px;
  padding:var(--s3) var(--s4); background:var(--c-slate-100);
  border-bottom:1px solid var(--c-slate-200);
}
.dot { width:10px; height:10px; border-radius:50%; }
.dot--red { background:#EF4444; }
.dot--yellow { background:#EAB308; }
.dot--green { background:#22C55E; }
.card-url { margin-left:auto; font-size:.75rem; color:var(--c-slate-400); font-family:var(--ff-body); }

.card-body { padding:var(--s6); }
.card-code { font-family:'SF Mono', 'Fira Code', monospace; font-size:.8125rem; line-height:1.85; }
.code-line { display:block; }
.indent { padding-left:1.5rem; }
.ck { color:#C026D3; } /* keyword */
.cf { color:#3B82F6; } /* function */
.cp { color:#0F172A; } /* property */
.cs { color:#16A34A; } /* string */
.cc { color:var(--c-slate-400); } /* comment */

/* Floating badges */
.float-badge {
  position:absolute; padding:var(--s2) var(--s4);
  background:var(--c-white); border:1px solid var(--c-slate-200);
  border-radius:var(--radius-full); font-size:.75rem; font-weight:600;
  box-shadow:0 4px 16px rgba(15,23,42,.12); white-space:nowrap;
  animation:float 4s ease-in-out infinite;
  backdrop-filter:blur(10px);
  transition:all .3s var(--ease);
}
.float-badge:hover {
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 8px 24px rgba(59,130,246,.2);
  border-color:var(--c-blue);
  color:var(--c-blue);
}
.float-badge--1 { top:-16px; right:24px; animation-delay:0s; }
.float-badge--2 { bottom:80px; left:-40px; animation-delay:1.3s; }
.float-badge--3 { bottom:-12px; right:60px; animation-delay:2.6s; }

/* ================================================================
   LOGOS BAR
   ================================================================ */
.logos-bar {
  padding:var(--s10) 0;
  background:var(--c-slate-50);
  border-top:1px solid var(--c-slate-200);
  border-bottom:1px solid var(--c-slate-200);
}
@media(max-width:768px){ .logos-bar { padding:var(--s8) 0; } }
@media(max-width:480px){ .logos-bar { padding:var(--s6) 0; } }

.logos-label { text-align:center; font-size:.8125rem; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--c-slate-400); margin-bottom:var(--s6); }
@media(max-width:480px){ .logos-label { margin-bottom:var(--s4); font-size:.75rem; } }

.logos-track { display:flex; gap:var(--s6); justify-content:center; flex-wrap:wrap; }
@media(max-width:640px){ .logos-track { gap:var(--s4); } }

.logo-pill { padding:var(--s2) var(--s5); background:var(--c-white); border:1px solid var(--c-slate-200); border-radius:var(--radius-full); font-size:.875rem; font-weight:500; color:var(--c-slate-600); }
@media(max-width:480px){ .logo-pill { padding:var(--s2) var(--s4); font-size:.8125rem; } }

/* ================================================================
   SECTION HEADER (reusable)
   ================================================================ */
.section-header { text-align:center; max-width:700px; margin:0 auto var(--s12); }
@media(max-width:768px){ .section-header { margin-bottom:var(--s10); } }
@media(max-width:480px){ .section-header { margin-bottom:var(--s8); } }
.section-tag {
  display:inline-block; padding:var(--s2) var(--s4);
  background:rgba(59,130,246,.08); color:var(--c-blue);
  font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  border-radius:var(--radius-full); margin-bottom:var(--s4);
}
.section-title { 
  font-size:clamp(1.75rem,3.6vw,2.75rem); 
  margin-bottom:var(--s4); 
  letter-spacing:-0.015em;
  background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-slate-700) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative;
  display:inline-block;
  width:100%;
}
.section-lead { font-size:1.0625rem; color:var(--c-slate-600); line-height:1.75; max-width:620px; margin:0 auto; }

/* ================================================================
   PROBLEM SECTION
   ================================================================ */
.problem { padding:var(--s20) 0; }
@media(max-width:768px){ .problem { padding:var(--s16) 0; } }
@media(max-width:480px){ .problem { padding:var(--s12) 0; } }

.pain-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s5); }
@media(max-width:640px){ .pain-grid { grid-template-columns:1fr; gap:var(--s4); } }
.pain-card {
  display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s6);
  background:var(--c-white); border:1px solid var(--c-slate-200);
  border-radius:var(--radius); transition:all .3s var(--ease);
  position:relative; overflow:hidden;
  cursor:default;
  will-change:transform;
}
@media(max-width:640px){
  .pain-card { padding:var(--s5); gap:var(--s3); }
}
.pain-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background:linear-gradient(180deg, var(--c-blue), var(--c-indigo));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .4s var(--ease);
}
/* Subtle gradient overlay */
.pain-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(59,130,246,.01) 0%, rgba(99,102,241,.02) 100%);
  opacity:0;
  transition:opacity .3s var(--ease);
  pointer-events:none;
}
.pain-card:hover::before { transform:scaleY(1); }
.pain-card:hover::after { opacity:1; }
.pain-card:hover { 
  border-color:rgba(59,130,246,.3); 
  transform:translateX(6px) scale(1.01); 
  box-shadow:0 8px 24px rgba(59,130,246,.12), 0 0 0 1px rgba(59,130,246,.05); 
}
.pain-icon { 
  font-size:1.5rem; 
  flex-shrink:0; 
  line-height:1;
  filter:grayscale(.3);
  transition:filter .3s var(--ease);
}
.pain-card:hover .pain-icon {
  filter:grayscale(0);
}
.pain-card p { font-size:.9375rem; color:var(--c-slate-700); line-height:1.6; }
.pain-card strong { color:var(--c-primary); }

/* ================================================================
   FEATURES
   ================================================================ */
.features { 
  padding:var(--s20) 0; 
  background:var(--c-slate-50);
  position:relative;
}
@media(max-width:768px){ .features { padding:var(--s16) 0; } }
@media(max-width:480px){ .features { padding:var(--s12) 0; } }
.features::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(59,130,246,.03) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(99,102,241,.03) 1px, transparent 1px);
  background-size:50px 50px, 70px 70px;
  background-position:0 0, 25px 25px;
  z-index:0;
  pointer-events:none;
}
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s6); }
@media(max-width:768px){ .features-grid { grid-template-columns:1fr; gap:var(--s5); } }
@media(max-width:640px){ .features-grid { grid-template-columns:1fr; gap:var(--s4); } }

.feature-card {
  padding:var(--s8); background:var(--c-white);
  border:1px solid var(--c-slate-200); border-radius:var(--radius-lg);
  transition:all .3s var(--ease); position:relative; overflow:hidden;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
  will-change:transform;
}
@media(max-width:640px){
  .feature-card { padding:var(--s6); }
}
.feature-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-indigo));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease);
}
/* Subtle gradient overlay on hover */
.feature-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(59,130,246,.02) 0%, rgba(99,102,241,.03) 100%);
  opacity:0;
  transition:opacity .3s var(--ease);
  pointer-events:none;
}
.feature-card:hover::before { transform:scaleX(1); }
.feature-card:hover::after { opacity:1; }
.feature-card:hover { 
  border-color:rgba(59,130,246,.4); 
  transform:translateY(-8px) scale(1.01); 
  box-shadow:0 16px 40px rgba(59,130,246,.18), 0 0 0 1px rgba(59,130,246,.1); 
}
.feature-card:focus-within {
  border-color:var(--c-indigo);
  box-shadow:var(--focus-ring), 0 12px 32px rgba(99,102,241,.15);
}

.feature-icon-wrap {
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.12));
  border-radius:var(--radius); color:var(--c-blue); margin-bottom:var(--s5);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 12px rgba(59,130,246,.08);
  position:relative;
  overflow:hidden;
}
/* Shimmer effect on icon background */
.feature-icon-wrap::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform:translateX(-100%);
  transition:transform .6s ease;
}
.feature-card:hover .feature-icon-wrap::before {
  transform:translateX(100%);
}
.feature-card:hover .feature-icon-wrap { 
  transform:scale(1.12) rotate(5deg); 
  background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(99,102,241,.2));
  box-shadow:0 8px 20px rgba(59,130,246,.15);
}
.feature-icon-wrap svg {
  position:relative;
  z-index:1;
}

.feature-card h3 { font-size:1.25rem; margin-bottom:var(--s3); }
.feature-card p { font-size:.9375rem; color:var(--c-slate-600); line-height:1.7; }

/* CTA feature card with logo theme colors (Blue/Indigo) */
.feature-card--cta {
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  border-color:transparent; display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* Animated gradient background */
.feature-card--cta::before {
  content:'';
  position:absolute;
  inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,.15) 180deg, transparent 360deg);
  animation:rotate-gradient 8s linear infinite;
}
@keyframes rotate-gradient {
  to { transform:rotate(360deg); }
}
.feature-card--cta h3 { color:var(--c-white); font-size:1.5rem; margin-bottom:var(--s3); position:relative; z-index:1; }
.feature-card--cta p { color:rgba(255,255,255,.9); margin-bottom:var(--s6); position:relative; z-index:1; }
.feature-card--cta:hover { 
  transform:translateY(-6px) scale(1.02); 
  box-shadow:0 20px 50px rgba(59,130,246,.4), 0 0 0 1px rgba(255,255,255,.15);
}
.feature-card--cta .btn {
  position:relative;
  z-index:1;
  background:white;
  color:var(--c-blue);
  font-weight:700;
}
.feature-card--cta .btn:hover {
  background:rgba(255,255,255,.95);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 24px rgba(255,255,255,.3);
}

/* ================================================================
   PROCESS / HOW IT WORKS - MODERN STEPPED CARDS
   ================================================================ */
.process { 
  padding:var(--s24) 0; 
  background:linear-gradient(180deg, var(--c-white) 0%, var(--c-slate-50) 50%, var(--c-white) 100%);
  position:relative;
  overflow:hidden;
}

.process::before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:1200px;
  height:100%;
  background:
    radial-gradient(circle at 30% 20%, rgba(59,130,246,.04) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(99,102,241,.04) 0%, transparent 50%);
  pointer-events:none;
}

/* Process Grid - Modern Card Layout */
.process-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--s8);
  max-width:1200px;
  margin:0 auto;
  padding:var(--s8) var(--s6);
  position:relative;
}

@media(max-width:899px) {
  .process-grid {
    grid-template-columns:1fr;
    gap:var(--s6);
    padding:var(--s6) var(--s4);
  }
}

/* Process Card */
.process-card {
  background:var(--c-white);
  border:1px solid var(--c-slate-200);
  border-radius:var(--radius-lg);
  padding:var(--s8);
  position:relative;
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 4px 20px rgba(15,23,42,.06);
  overflow:hidden;
  cursor:default;
}

.process-card::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-indigo));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.process-card:hover::before {
  transform:scaleX(1);
}

.process-card:hover {
  transform:translateY(-8px) scale(1.02);
  box-shadow:
    0 24px 48px rgba(59,130,246,.15),
    0 0 0 1px rgba(59,130,246,.1);
  border-color:rgba(59,130,246,.3);
}

/* Featured Card (Step 4) */
.process-card--featured {
  grid-column:1 / -1;
  background:linear-gradient(135deg, 
    rgba(59,130,246,.02) 0%, 
    rgba(99,102,241,.02) 100%);
  border:2px solid rgba(59,130,246,.15);
}

.process-card--featured::before {
  height:4px;
  background:linear-gradient(90deg, #F59E0B, #EF4444);
}

.process-card--featured:hover {
  border-color:rgba(245,158,11,.4);
  box-shadow:
    0 24px 48px rgba(245,158,11,.2),
    0 0 0 1px rgba(245,158,11,.15);
}

@media(max-width:899px) {
  .process-card--featured {
    grid-column:1;
  }
}

/* Card Header */
.process-card-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:var(--s6);
  position:relative;
}

/* Icon Wrapper */
.process-icon-wrap {
  display:flex;
  align-items:center;
  gap:var(--s4);
}

/* Process Icon */
.process-icon {
  width:64px;
  height:64px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-white);
  flex-shrink:0;
  position:relative;
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 8px 24px rgba(59,130,246,.2),
    0 0 0 1px rgba(59,130,246,.1);
}

.process-icon::before {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:-1;
  filter:blur(12px);
}

.process-card:hover .process-icon {
  transform:rotate(-5deg) scale(1.1);
}

.process-card:hover .process-icon::before {
  opacity:.6;
}

.process-icon svg {
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
  transition:transform .3s var(--ease);
}

.process-card:hover .process-icon svg {
  transform:scale(1.1);
}

/* Featured Icon */
.process-icon--featured {
  background:linear-gradient(135deg, #F59E0B, #EF4444);
  box-shadow:
    0 8px 24px rgba(245,158,11,.25),
    0 0 0 1px rgba(245,158,11,.15);
}

.process-icon--featured::before {
  background:linear-gradient(135deg, #F59E0B, #EF4444);
}

/* Process Number */
.process-number {
  font-family:var(--ff-display);
  font-size:2.5rem;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg, rgba(59,130,246,.2), rgba(99,102,241,.2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:-.05em;
  transition:all .3s var(--ease);
}

.process-card:hover .process-number {
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transform:translateY(-2px);
}

/* Process Badge */
.process-badge {
  display:inline-flex;
  align-items:center;
  padding:var(--s2) var(--s4);
  background:linear-gradient(135deg, rgba(59,130,246,.08), rgba(99,102,241,.08));
  color:var(--c-blue);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-radius:var(--radius-full);
  border:1px solid rgba(59,130,246,.15);
  transition:all .3s var(--ease);
  white-space:nowrap;
}

.process-card:hover .process-badge {
  background:linear-gradient(135deg, rgba(59,130,246,.15), rgba(99,102,241,.15));
  border-color:rgba(59,130,246,.3);
  transform:translateY(-2px);
}

/* Badge Variants */
.process-badge--discovery {
  background:linear-gradient(135deg, rgba(59,130,246,.08), rgba(99,102,241,.08));
  color:var(--c-blue);
  border-color:rgba(59,130,246,.15);
}

.process-badge--development {
  background:linear-gradient(135deg, rgba(16,185,129,.08), rgba(5,150,105,.08));
  color:var(--c-emerald);
  border-color:rgba(16,185,129,.15);
}

.process-badge--launch {
  background:linear-gradient(135deg, rgba(139,92,246,.08), rgba(124,58,237,.08));
  color:#8B5CF6;
  border-color:rgba(139,92,246,.15);
}

.process-badge--growth {
  background:linear-gradient(135deg, rgba(245,158,11,.08), rgba(239,68,68,.08));
  color:#F59E0B;
  border-color:rgba(245,158,11,.15);
}

/* Card Body */
.process-card-body {
  position:relative;
  z-index:1;
}

/* Process Title */
.process-title {
  font-size:1.75rem;
  font-weight:700;
  color:var(--c-primary);
  margin-bottom:var(--s4);
  line-height:1.2;
  letter-spacing:-.01em;
  transition:color .3s var(--ease);
}

.process-card:hover .process-title {
  color:var(--c-blue);
}

.process-card--featured .process-title {
  font-size:2rem;
}

/* Process Description */
.process-desc {
  font-size:1.0625rem;
  color:var(--c-slate-600);
  line-height:1.75;
  margin-bottom:var(--s6);
}

/* Process Meta Group */
.process-meta-group {
  display:flex;
  gap:var(--s4);
  flex-wrap:wrap;
}

.process-meta {
  display:inline-flex;
  align-items:center;
  gap:var(--s2);
  padding:var(--s2) var(--s4);
  background:var(--c-slate-50);
  border-radius:var(--radius-full);
  font-size:.875rem;
  color:var(--c-slate-600);
  font-weight:500;
  border:1px solid var(--c-slate-200);
  transition:all .3s var(--ease);
}

.process-meta svg {
  color:var(--c-blue);
  flex-shrink:0;
}

.process-card:hover .process-meta {
  background:var(--c-white);
  border-color:rgba(59,130,246,.3);
  color:var(--c-primary);
  transform:translateY(-2px);
}

/* Card Glow Effect */
.process-card-glow {
  position:absolute;
  inset:-100px;
  background:radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(59,130,246,.08) 0%,
    transparent 50%
  );
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none;
  z-index:0;
}

.process-card:hover .process-card-glow {
  opacity:1;
}

.process-card-glow--featured {
  background:radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(245,158,11,.12) 0%,
    transparent 50%
  );
}

/* Progress Connector - Decorative */
.process-connector {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:80%;
  max-width:900px;
  height:auto;
  pointer-events:none;
  opacity:.3;
  z-index:0;
}

.process-connector svg {
  width:100%;
  height:auto;
}

@media(max-width:899px) {
  .process-connector {
    display:none;
  }
}

/* Mobile Optimizations */
@media(max-width:899px) {
  .process { padding:var(--s16) 0; }
  
  .process-card {
    padding:var(--s6);
  }
  
  .process-icon {
    width:56px;
    height:56px;
  }
  
  .process-icon svg {
    width:28px;
    height:28px;
  }
  
  .process-number {
    font-size:2rem;
  }
  
  .process-title {
    font-size:1.5rem;
  }
  
  .process-card--featured .process-title {
    font-size:1.625rem;
  }
  
  .process-desc {
    font-size:1rem;
  }
  
  .process-meta {
    font-size:.8125rem;
  }
}

@media(max-width:480px) {
  .process-card {
    padding:var(--s5);
  }
  
  .process-icon {
    width:48px;
    height:48px;
  }
  
  .process-icon svg {
    width:24px;
    height:24px;
  }
  
  .process-number {
    font-size:1.75rem;
  }
  
  .process-title {
    font-size:1.25rem;
  }
  
  .process-card--featured .process-title {
    font-size:1.375rem;
  }
  
  .process-desc {
    font-size:.9375rem;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce) {
  .process-card,
  .process-icon,
  .process-badge,
  .process-meta,
  .process-card-glow {
    transition:none;
    animation:none;
  }
  
  .process-card::before {
    transition:none;
  }
}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials { 
  padding:var(--s20) 0; 
  background:linear-gradient(180deg, var(--c-slate-50) 0%, var(--c-white) 100%);
  position:relative;
}
@media(max-width:768px){ .testimonials { padding:var(--s16) 0; } }
@media(max-width:480px){ .testimonials { padding:var(--s12) 0; } }

.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s6); }
@media(max-width:768px){ .testimonials-grid { grid-template-columns:1fr; gap:var(--s5); } }
@media(max-width:640px){ .testimonials-grid { gap:var(--s4); } }

.testimonial {
  padding:var(--s8); background:var(--c-white);
  border:1px solid var(--c-slate-200); border-radius:var(--radius-lg);
  transition:all .3s var(--ease); position:relative;
  cursor:default;
  will-change:transform;
}
@media(max-width:640px){
  .testimonial { padding:var(--s6); }
}
/* Quote icon background */
.testimonial::before {
  content:'"';
  position:absolute;
  top:var(--s6);
  right:var(--s6);
  font-size:4rem;
  font-family:Georgia, serif;
  color:rgba(59,130,246,.06);
  line-height:1;
  pointer-events:none;
  transition:all .3s var(--ease);
}
.testimonial::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg, var(--c-blue), var(--c-indigo));
  transform:scaleX(0);
  transition:transform .4s var(--ease);
}
.testimonial:hover::before {
  color:rgba(59,130,246,.12);
  transform:scale(1.1);
}
.testimonial:hover::after { transform:scaleX(1); }
.testimonial:hover { 
  border-color:rgba(59,130,246,.3); 
  transform:translateY(-6px) scale(1.01); 
  box-shadow:0 12px 32px rgba(59,130,246,.15), 0 0 0 1px rgba(59,130,246,.08); 
}

.testimonial-stars { 
  color:var(--c-orange); 
  font-size:1.125rem; 
  letter-spacing:2px; 
  margin-bottom:var(--s4);
  display:inline-block;
  position:relative;
  z-index:1;
}
/* Animated star glow */
.testimonial:hover .testimonial-stars {
  animation:star-glow .5s ease;
}
@keyframes star-glow {
  0%, 100% { filter:drop-shadow(0 0 0 transparent); }
  50% { filter:drop-shadow(0 0 4px rgba(251,191,36,.5)); }
}

.testimonial blockquote {
  font-size:1rem; line-height:1.8; color:var(--c-slate-700);
  margin-bottom:var(--s6); font-style:italic;
  position:relative;
  z-index:1;
}

.testimonial-author {
  display:flex; align-items:center; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--c-slate-200);
  position:relative;
  z-index:1;
}
.author-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  color:var(--c-white); display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-weight:700; font-size:.875rem;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 2px 8px rgba(59,130,246,.2);
}
.testimonial:hover .author-avatar {
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.testimonial-author strong { display:block; font-size:.9375rem; color:var(--c-primary); }
.testimonial-author span { font-size:.8125rem; color:var(--c-slate-500); }

/* ================================================================
   FAQ
   ================================================================ */
.faq { padding:var(--s20) 0; }
@media(max-width:768px){ .faq { padding:var(--s16) 0; } }
@media(max-width:480px){ .faq { padding:var(--s12) 0; } }

.faq-list { max-width:720px; margin:0 auto; }

.faq-item {
  border:1px solid var(--c-slate-200); border-radius:var(--radius);
  margin-bottom:var(--s3); transition:all .25s var(--ease);
  overflow:hidden; background:var(--c-white);
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
}
.faq-item:hover {
  border-color:rgba(59,130,246,.3);
  box-shadow:0 4px 16px rgba(59,130,246,.08);
  transform:translateX(4px);
}
.faq-item:focus-within {
  border-color:var(--c-indigo);
  box-shadow:var(--focus-ring), 0 4px 16px rgba(99,102,241,.12);
}
.faq-item[open] { 
  border-color:var(--c-blue); 
  box-shadow:0 8px 24px rgba(59,130,246,.12);
  transform:translateX(8px);
}

.faq-item summary {
  padding:var(--s5) var(--s6); font-size:1.0625rem; font-weight:600;
  color:var(--c-primary); 
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewport="0 0 28 28"><circle cx="14" cy="14" r="6" fill="%233B82F6"/><circle cx="14" cy="14" r="3" fill="white"/><circle cx="14" cy="14" r="9" fill="none" stroke="%233B82F6" stroke-width="2" opacity="0.4"/><path d="M 14 5 L 14 10" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>') 14 14, pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  transition:color var(--dur) var(--ease);
}
@media(max-width:640px){
  .faq-item summary { padding:var(--s4) var(--s5); font-size:1rem; }
}
.faq-item summary:hover { color:var(--c-blue); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; font-size:1.25rem; font-weight:400; color:var(--c-slate-400);
  transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { content:'−'; color:var(--c-blue); }

.faq-item p {
  padding:0 var(--s6) var(--s5); font-size:.9375rem;
  color:var(--c-slate-600); line-height:1.75;
}
@media(max-width:640px){
  .faq-item p { padding:0 var(--s5) var(--s4); font-size:.875rem; }
}

/* ================================================================
   FINAL CTA
   ================================================================ */
.final-cta { padding:var(--s20) 0; }
@media(max-width:768px){ .final-cta { padding:var(--s16) 0; } }
@media(max-width:480px){ .final-cta { padding:var(--s12) 0; } }
.cta-card {
  text-align:center; padding:var(--s16) var(--s8);
  background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-slate-800) 50%, var(--c-primary) 100%);
  background-size:200% 200%;
  animation:gradient-shift 8s ease infinite;
  border-radius:var(--radius-lg); position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
}
@media(max-width:768px){
  .cta-card { padding:var(--s12) var(--s6); }
}
@media(max-width:480px){
  .cta-card { padding:var(--s10) var(--s5); }
}
@keyframes gradient-shift {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.cta-card::before {
  content:''; position:absolute; top:-40%; right:-20%; width:500px; height:500px;
  background:radial-gradient(circle, rgba(59,130,246,.24), transparent 70%);
  border-radius:50%; animation:glow-rotate 10s linear infinite;
}
@keyframes glow-rotate {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.cta-card::after {
  content:''; position:absolute; bottom:-30%; left:-10%; width:400px; height:400px;
  background:radial-gradient(circle, rgba(99,102,241,.18), transparent 70%);
  border-radius:50%; animation:glow-rotate 12s linear infinite reverse;
}
.cta-card > * { position:relative; z-index:1; }
.cta-card h2 { color:var(--c-white); font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:var(--s4); }
.cta-card > p { color:rgba(255,255,255,.8); font-size:1.0625rem; margin-bottom:var(--s8); max-width:520px; margin-left:auto; margin-right:auto; }
@media(max-width:640px){
  .cta-card h2 { font-size:1.5rem; }
  .cta-card > p { font-size:1rem; margin-bottom:var(--s6); }
}

.cta-actions { display:flex; align-items:center; justify-content:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s6); }
@media(max-width:640px){
  .cta-actions { flex-direction:column; gap:var(--s3); width:100%; }
  .cta-actions .btn { width:100%; }
}

.cta-or { color:rgba(255,255,255,.6); font-size:.875rem; }
@media(max-width:640px){
  .cta-or { text-align:center; }
}
.cta-or a { color:var(--c-blue); font-weight:500; }
.cta-or a:hover { text-decoration:underline; }

.cta-checks { display:flex; gap:var(--s6); justify-content:center; flex-wrap:wrap; }
@media(max-width:640px){
  .cta-checks { gap:var(--s4); }
}
@media(max-width:480px){
  .cta-checks { flex-direction:column; gap:var(--s2); text-align:center; }
}
.cta-checks span { font-size:.8125rem; color:rgba(255,255,255,.7); }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { 
  background:linear-gradient(180deg, var(--c-primary) 0%, #0a0f1a 100%); 
  color:rgba(255,255,255,.75); 
  padding:var(--s16) 0 var(--s6);
  position:relative;
}
@media(max-width:768px){
  .footer { padding:var(--s12) 0 var(--s5); }
}
.footer::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, 
    transparent 0%, 
    rgba(59,130,246,.3) 20%, 
    rgba(99,102,241,.3) 50%,
    rgba(59,130,246,.3) 80%, 
    transparent 100%);
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s10); padding-bottom:var(--s10); border-bottom:1px solid rgba(255,255,255,.1); }
@media(max-width:960px){ .footer-grid { grid-template-columns:1fr 1fr; gap:var(--s8); } }
@media(max-width:768px){ .footer-grid { grid-template-columns:1fr 1fr; gap:var(--s6); } }
@media(max-width:480px){ .footer-grid { grid-template-columns:1fr; gap:var(--s8); } }

.footer-brand .logo { margin-bottom:var(--s4); }
.footer-brand .logo-text { color:var(--c-white); }
.footer-brand > p { font-size:.875rem; line-height:1.65; margin-bottom:var(--s4); }

.social-row { display:flex; gap:var(--s3); }
.social-row a {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  transition:all var(--dur) var(--ease); position:relative; overflow:hidden;
}
.social-row a::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  opacity:0;
  transition:opacity var(--dur) var(--ease);
  border-radius:50%;
}
.social-row a:hover::before { opacity:1; }
.social-row a:hover { color:var(--c-white); transform:translateY(-3px) scale(1.1); }
.social-row a svg { position:relative; z-index:1; }

.footer-col h4 { font-size:.875rem; font-weight:700; color:var(--c-white); margin-bottom:var(--s4); text-transform:uppercase; letter-spacing:.05em; }
.footer-col ul { display:flex; flex-direction:column; gap:var(--s3); }
.footer-col a { font-size:.875rem; color:rgba(255,255,255,.65); transition:color var(--dur) var(--ease); }
.footer-col a:hover { color:var(--c-blue); }

.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:var(--s6); font-size:.8125rem; color:rgba(255,255,255,.5); }
.footer-legal { display:flex; gap:var(--s6); }
@media(max-width:640px){
  .footer-legal { gap:var(--s4); }
}
.footer-legal a { color:rgba(255,255,255,.5); }
.footer-legal a:hover { color:var(--c-blue); }
@media(max-width:480px){ .footer-bottom { flex-direction:column; gap:var(--s3); text-align:center; } }

/* ================================================================
   STICKY MOBILE CTA (always-accessible, per mobile optimization)
   ================================================================ */
.sticky-cta {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:90;
  padding:var(--s3) var(--s4); background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px); border-top:1px solid var(--c-slate-200);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  transform:translateY(100%); transition:transform var(--dur) var(--ease);
}
.sticky-cta.visible { transform:translateY(0); }

@media(max-width:768px){ 
  .sticky-cta { display:block; }
  .sticky-cta .btn { min-height:48px; } /* Ensure touch target size */
}

/* ================================================================
   CAREERS PAGE
   ================================================================ */

/* Careers Hero */
.careers-hero { 
  position:relative; padding:calc(var(--s16) + 80px) 0 var(--s16); 
  min-height:70vh; display:flex; align-items:center;
  background:var(--c-slate-50); overflow:hidden;
}
.careers-hero-bg { 
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 30% 20%, rgba(59,130,246,.08), transparent 60%),
             radial-gradient(circle at 70% 80%, rgba(99,102,241,.06), transparent 60%);
}
.careers-hero-inner { position:relative; z-index:1; }
.careers-hero-content { max-width:800px; }

.careers-hero-title { 
  font-size:clamp(2rem,5vw,3.5rem); 
  line-height:1.1; 
  margin-bottom:var(--s6); 
}

.careers-hero-sub { 
  font-size:1.1875rem; 
  color:var(--c-slate-600); 
  line-height:1.65; 
  margin-bottom:var(--s10);
  max-width:680px;
}

.careers-stats { 
  display:flex; 
  gap:var(--s8); 
  flex-wrap:wrap;
}

.careers-stat {
  text-align:left;
}

.careers-stat-value { 
  font-family:var(--ff-display); 
  font-size:2.25rem; 
  font-weight:700;
  color:var(--c-blue);
  line-height:1;
}

.careers-stat-label { 
  font-size:.9375rem;
  color:var(--c-slate-600);
  margin-top:var(--s2);
}

@media(max-width:768px) {
  .careers-hero { padding:calc(var(--s12) + 80px) 0 var(--s12); min-height:auto; }
  .careers-hero-title { font-size:clamp(1.75rem,6vw,2.5rem); }
  .careers-hero-sub { font-size:1.0625rem; }
  .careers-stats { gap:var(--s6); }
  .careers-stat-value { font-size:1.875rem; }
}

/* Careers Values */
.careers-values { padding:var(--s20) 0; background:var(--c-white); }
@media(max-width:768px){ .careers-values { padding:var(--s16) 0; } }
@media(max-width:480px){ .careers-values { padding:var(--s12) 0; } }

.careers-values-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); 
  gap:var(--s6);
}
@media(max-width:768px){ .careers-values-grid { gap:var(--s5); } }

.careers-value-card {
  padding:var(--s8);
  background:var(--c-white);
  border:1px solid var(--c-slate-200); 
  border-radius:var(--radius);
  transition:all var(--dur) var(--ease);
  cursor:default;
}
@media(max-width:640px){
  .careers-value-card { padding:var(--s6); }
}

.careers-value-card:hover {
  border-color:var(--c-blue);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}

.careers-value-icon {
  width:56px; 
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(99,102,241,.1));
  border-radius:var(--radius);
  color:var(--c-blue);
  margin-bottom:var(--s4);
}

.careers-value-title {
  font-size:1.25rem;
  font-weight:600;
  color:var(--c-primary);
  margin-bottom:var(--s3);
}

.careers-value-desc {
  font-size:.9375rem;
  color:var(--c-slate-600);
  line-height:1.7;
}

@media(max-width:640px) {
  .careers-values-grid { grid-template-columns:1fr; }
}

/* Careers Positions */
.careers-positions { 
  padding:var(--s20) 0; 
  background:var(--c-slate-50);
}
@media(max-width:768px){ .careers-positions { padding:var(--s16) 0; } }
@media(max-width:480px){ .careers-positions { padding:var(--s12) 0; } }

.careers-positions-list {
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:var(--s6);
}

.careers-position-card {
  padding:var(--s8);
  background:var(--c-white);
  border:1px solid var(--c-slate-200);
  border-radius:var(--radius-lg);
  transition:all var(--dur) var(--ease);
}
@media(max-width:640px){
  .careers-position-card { padding:var(--s6); }
}

.careers-position-card:hover {
  border-color:var(--c-blue);
  box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.careers-position-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--s6);
  margin-bottom:var(--s5);
}

.careers-position-title {
  font-size:1.5rem;
  font-weight:600;
  color:var(--c-primary);
  margin-bottom:var(--s3);
}

.careers-position-meta {
  display:flex;
  gap:var(--s3);
  flex-wrap:wrap;
  align-items:center;
}

.careers-position-tag {
  padding:var(--s1) var(--s3);
  background:var(--c-slate-100);
  color:var(--c-slate-700);
  font-size:.8125rem;
  font-weight:500;
  border-radius:var(--radius);
}

.careers-position-location {
  color:var(--c-slate-500);
  font-size:.875rem;
}

.careers-position-desc {
  font-size:1rem;
  color:var(--c-slate-600);
  line-height:1.7;
  margin-bottom:var(--s5);
}

.careers-position-skills {
  display:flex;
  gap:var(--s2);
  flex-wrap:wrap;
}

.skill-badge {
  padding:var(--s2) var(--s3);
  background:rgba(59,130,246,.08);
  color:var(--c-blue);
  font-size:.8125rem;
  font-weight:500;
  border-radius:var(--radius);
}

@media(max-width:768px) {
  .careers-position-header {
    flex-direction:column;
    align-items:flex-start;
  }
  
  .careers-position-header .btn {
    width:100%;
    justify-content:center;
  }
}

/* Open Application */
.careers-open-application {
  max-width:700px;
  margin:var(--s12) auto 0;
  padding:var(--s10);
  background:linear-gradient(135deg, var(--c-blue), var(--c-indigo));
  border-radius:var(--radius-lg);
  text-align:center;
}
@media(max-width:768px){
  .careers-open-application { padding:var(--s8) var(--s6); margin:var(--s10) auto 0; }
}
@media(max-width:480px){
  .careers-open-application { padding:var(--s6) var(--s5); margin:var(--s8) auto 0; }
}

.careers-open-title {
  font-size:1.75rem;
  color:var(--c-white);
  margin-bottom:var(--s4);
}

.careers-open-desc {
  font-size:1.0625rem;
  color:rgba(255,255,255,.9);
  line-height:1.7;
  margin-bottom:var(--s8);
}

.careers-open-application .btn-ghost {
  background:var(--c-white);
  color:var(--c-blue);
}

.careers-open-application .btn-ghost:hover {
  background:rgba(255,255,255,.9);
  transform:translateY(-2px);
}

/* Careers Benefits */
.careers-benefits {
  padding:var(--s20) 0;
  background:var(--c-white);
}
@media(max-width:768px){ .careers-benefits { padding:var(--s16) 0; } }
@media(max-width:480px){ .careers-benefits { padding:var(--s12) 0; } }

.careers-benefits-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--s6);
}
@media(max-width:768px){ .careers-benefits-grid { gap:var(--s5); } }

.careers-benefit-card {
  padding:var(--s6);
  background:var(--c-slate-50);
  border-radius:var(--radius);
  transition:all var(--dur) var(--ease);
  text-align:center;
  cursor:default;
}
@media(max-width:640px){
  .careers-benefit-card { padding:var(--s5); }
}

.careers-benefit-card:hover {
  background:var(--c-white);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}

.careers-benefit-icon {
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(99,102,241,.1));
  border-radius:var(--radius);
  color:var(--c-blue);
  margin:0 auto var(--s4);
}

.careers-benefit-title {
  font-size:1.125rem;
  font-weight:600;
  color:var(--c-primary);
  margin-bottom:var(--s3);
}

.careers-benefit-desc {
  font-size:.9375rem;
  color:var(--c-slate-600);
  line-height:1.7;
}

@media(max-width:640px) {
  .careers-benefits-grid { grid-template-columns:1fr; }
}

/* Careers CTA */
.careers-cta {
  padding:var(--s20) 0;
  background:var(--c-slate-50);
}

.careers-cta-card {
  max-width:800px;
  margin:0 auto;
  padding:var(--s16) var(--s10);
  background:var(--c-white);
  border:2px solid var(--c-slate-200);
  border-radius:var(--radius-lg);
  text-align:center;
}

.careers-cta-title {
  font-size:2.25rem;
  color:var(--c-primary);
  margin-bottom:var(--s4);
}

.careers-cta-desc {
  font-size:1.125rem;
  color:var(--c-slate-600);
  line-height:1.7;
  margin-bottom:var(--s10);
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

.careers-cta-buttons {
  display:flex;
  gap:var(--s4);
  justify-content:center;
  flex-wrap:wrap;
}

@media(max-width:768px) {
  .careers-cta-card { padding:var(--s10) var(--s6); }
  .careers-cta-title { font-size:1.875rem; }
  .careers-cta-desc { font-size:1rem; }
  .careers-cta-buttons { flex-direction:column; }
  .careers-cta-buttons .btn { width:100%; justify-content:center; }
}

/* Navigation Active State for Careers Link */
.nav-link-active {
  color:var(--c-blue) !important;
  position:relative;
}

.nav-link-active::after {
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  right:0;
  height:2px;
  background:var(--c-blue);
}

/* Footer Layout Override for Careers Page */
.footer-inner { 
  display:flex; 
  flex-direction:column;
  gap:var(--s8);
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:var(--s10);
  padding-bottom:var(--s8);
  border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-brand {
  flex:1;
  max-width:400px;
}

.footer-tagline {
  font-size:.9375rem;
  color:rgba(255,255,255,.65);
  line-height:1.7;
  margin-top:var(--s4);
}

.footer-links {
  display:flex;
  gap:var(--s12);
}

.footer-col-title {
  font-size:.875rem;
  font-weight:700;
  color:var(--c-white);
  margin-bottom:var(--s4);
  text-transform:uppercase;
  letter-spacing:.05em;
}

.footer-list {
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}

.footer-list a {
  font-size:.875rem;
  color:rgba(255,255,255,.65);
  transition:color var(--dur) var(--ease);
}

.footer-list a:hover {
  color:var(--c-blue);
}

.footer-bottom {
  text-align:center;
}

.footer-copy {
  font-size:.8125rem;
  color:rgba(255,255,255,.5);
}

/* ================================================================
   COMPREHENSIVE MOBILE OPTIMIZATIONS
   ================================================================ */

/* Tablet (768px and below) */
@media(max-width:768px) {
  /* Reduce section padding */
  section { scroll-margin-top:64px; }
  
  /* Better spacing for cards and grids */
  .feature-card h3,
  .timeline-title,
  .careers-value-title,
  .careers-position-title { 
    font-size:1.25rem; 
  }
  
  /* Hero adjustments */
  .hero-badge { font-size:.75rem; padding:var(--s2) var(--s3); }
  
  /* Ensure proper spacing */
  .timeline-content { padding:var(--s6); }
  
  /* Footer brand */
  .footer-brand { max-width:100%; }
}

/* Mobile landscape and small tablets (640px and below) */
@media(max-width:640px) {
  /* Typography scaling */
  .section-title { font-size:1.875rem; }
  .section-lead { font-size:1rem; }
  .section-tag { font-size:.75rem; padding:var(--s1) var(--s3); }
  
  /* Card spacing improvements */
  .feature-card h3,
  .careers-value-title { font-size:1.125rem; }
  
  .feature-card p,
  .careers-value-desc,
  .careers-benefit-desc,
  .testimonial blockquote { font-size:.875rem; }
  
  /* Timeline improvements */
  .timeline-badge { font-size:.6875rem; padding:var(--s1) var(--s3); }
  .timeline-meta { font-size:.8125rem; padding:var(--s2) var(--s3); }
  
  /* Position cards */
  .careers-position-title { font-size:1.25rem; }
  .careers-position-desc { font-size:.9375rem; }
  
  /* Open application */
  .careers-open-title { font-size:1.5rem; }
  .careers-open-desc { font-size:1rem; }
}

/* Mobile portrait (480px and below) */
@media(max-width:480px) {
  /* Further reduce typography */
  .section-title { font-size:1.625rem; }
  .section-lead { font-size:.9375rem; }
  
  /* Button adjustments */
  .btn { 
    font-size:.8125rem; 
    padding:var(--s2) var(--s4);
    justify-content:center;
  }
  .btn-lg { 
    font-size:.9375rem; 
    padding:var(--s3) var(--s5); 
  }
  
  /* Hero improvements */
  .hero { padding:calc(64px + var(--s10)) 0 var(--s10); }
  .hero-sub { font-size:1rem; margin-bottom:var(--s6); }
  .hero-ctas { margin-bottom:var(--s8); gap:var(--s3); }
  
  /* Card icons */
  .feature-icon-wrap,
  .careers-value-icon,
  .careers-benefit-icon { 
    width:48px; 
    height:48px; 
  }
  .feature-icon-wrap svg,
  .careers-value-icon svg,
  .careers-benefit-icon svg {
    width:22px;
    height:22px;
  }
  
  /* Author avatar */
  .author-avatar { width:40px; height:40px; font-size:.8125rem; }
  
  /* Social icons */
  .social-row a { width:32px; height:32px; }
  
  /* Testimonial stars */
  .testimonial-stars { font-size:1rem; }
  
  /* Footer improvements */
  .footer-brand > p { font-size:.8125rem; }
  .footer-col h4 { font-size:.8125rem; }
  .footer-col a { font-size:.8125rem; }
  
  /* Careers stats */
  .careers-stat-value { font-size:1.625rem; }
  .careers-stat-label { font-size:.875rem; }
  
  /* Careers titles */
  .careers-hero-title { font-size:1.75rem; }
  .careers-hero-sub { font-size:1rem; }
  .careers-cta-title { font-size:1.625rem; }
  .careers-cta-desc { font-size:.9375rem; }
}

/* Extra small mobile (360px and below) */
@media(max-width:360px) {
  /* Container padding */
  .container { padding:0 var(--s3); }
  
  /* Further reduce font sizes */
  .section-title { font-size:1.5rem; }
  .hero-title { font-size:2rem; }
  
  /* Tighter spacing */
  .hero-ctas { gap:var(--s2); }
  .features-grid,
  .testimonials-grid,
  .pain-grid { gap:var(--s3); }
  
  /* Stack everything tightly */
  .proof-num { font-size:1.375rem; }
  .proof-stat span { font-size:.75rem; }
  
  /* Button full width on very small screens */
  .btn { width:100%; }
}

/* Landscape orientation for mobile devices */
@media(max-height:500px) and (orientation:landscape) {
  .hero { min-height:auto; padding:calc(64px + var(--s8)) 0 var(--s8); }
  .careers-hero { min-height:auto; padding:calc(64px + var(--s8)) 0 var(--s8); }
  section { padding:var(--s12) 0; }
}

/* ================================================================
   HALO EFFECTS - Advanced Visual Effects
   Inspired by shader-effects, postfx-bloom, and ui-ux-pro-max
   ================================================================ */

/* Interactive Mouse Halo Cursor Effect */
.halo-cursor {
  position:fixed;
  width:400px;
  height:400px;
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at center, rgba(59,130,246,.15) 0%, rgba(99,102,241,.08) 30%, transparent 70%);
  filter:blur(80px);
  opacity:0;
  transition:opacity 0.5s var(--ease);
  mix-blend-mode:screen;
}
.halo-cursor.active {
  opacity:1;
}

/* Halo Button Enhancement - Add to primary buttons */
.btn-primary-halo {
  position:relative;
  overflow:visible;
}
.btn-primary-halo::after {
  content:'';
  position:absolute;
  inset:-20px;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg, rgba(59,130,246,.3), rgba(99,102,241,.3));
  filter:blur(30px);
  opacity:0;
  z-index:-1;
  transition:opacity .4s var(--ease);
}
.btn-primary-halo:hover::after {
  opacity:1;
  animation:halo-pulse 1.5s ease-in-out infinite;
}

@keyframes halo-pulse {
  0%, 100% { transform:scale(1); opacity:.6; }
  50% { transform:scale(1.15); opacity:1; }
}

/* Card Halo Effect - Add to cards on hover */
.card-halo {
  position:relative;
  transition:transform .3s var(--ease);
}
.card-halo::before {
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(59,130,246,.4), rgba(99,102,241,.4));
  filter:blur(40px);
  opacity:0;
  z-index:-1;
  transition:opacity .4s var(--ease);
}
.card-halo:hover::before {
  opacity:1;
}
.card-halo:hover {
  transform:translateY(-4px) scale(1.02);
}

/* Floating Orb Halo Effect */
.halo-orb {
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  animation:halo-orb-float 10s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
.halo-orb-1 {
  width:300px;
  height:300px;
  background:radial-gradient(circle, rgba(59,130,246,.25) 0%, transparent 70%);
  animation-delay:0s;
}
.halo-orb-2 {
  width:250px;
  height:250px;
  background:radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
  animation-delay:2s;
}
.halo-orb-3 {
  width:200px;
  height:200px;
  background:radial-gradient(circle, rgba(139,92,246,.18) 0%, transparent 70%);
  animation-delay:4s;
}

@keyframes halo-orb-float {
  0%, 100% { transform:translate(0, 0) scale(1); opacity:.8; }
  25% { transform:translate(50px, -30px) scale(1.1); opacity:1; }
  50% { transform:translate(-30px, 40px) scale(.9); opacity:.6; }
  75% { transform:translate(40px, 30px) scale(1.05); opacity:.9; }
}

/* Text Glow Halo Effect */
.text-halo {
  text-shadow:
    0 0 10px rgba(59,130,246,.6),
    0 0 20px rgba(59,130,246,.4),
    0 0 30px rgba(99,102,241,.3),
    0 0 40px rgba(99,102,241,.2);
  animation:text-halo-pulse 3s ease-in-out infinite;
}

@keyframes text-halo-pulse {
  0%, 100% { 
    text-shadow:
      0 0 10px rgba(59,130,246,.6),
      0 0 20px rgba(59,130,246,.4),
      0 0 30px rgba(99,102,241,.3),
      0 0 40px rgba(99,102,241,.2);
  }
  50% { 
    text-shadow:
      0 0 15px rgba(59,130,246,.8),
      0 0 30px rgba(59,130,246,.6),
      0 0 45px rgba(99,102,241,.4),
      0 0 60px rgba(99,102,241,.3);
  }
}

/* Neon Halo Effect - For accent elements */
.halo-neon {
  box-shadow:
    inset 0 0 20px rgba(59,130,246,.3),
    0 0 20px rgba(59,130,246,.4),
    0 0 40px rgba(99,102,241,.3),
    0 0 80px rgba(99,102,241,.2);
  animation:halo-neon-flicker 4s ease-in-out infinite;
}

@keyframes halo-neon-flicker {
  0%, 100% { 
    box-shadow:
      inset 0 0 20px rgba(59,130,246,.3),
      0 0 20px rgba(59,130,246,.4),
      0 0 40px rgba(99,102,241,.3),
      0 0 80px rgba(99,102,241,.2);
  }
  50% { 
    box-shadow:
      inset 0 0 25px rgba(59,130,246,.5),
      0 0 30px rgba(59,130,246,.6),
      0 0 60px rgba(99,102,241,.4),
      0 0 120px rgba(99,102,241,.3);
  }
}

/* Chromatic Aberration Halo - Subtle RGB split effect */
.halo-chromatic {
  position:relative;
}
.halo-chromatic::before,
.halo-chromatic::after {
  content:attr(data-text);
  position:absolute;
  inset:0;
  opacity:.3;
  pointer-events:none;
}
.halo-chromatic::before {
  color:#ff0000;
  transform:translate(-1px, -1px);
  filter:blur(1px);
}
.halo-chromatic::after {
  color:#00ffff;
  transform:translate(1px, 1px);
  filter:blur(1px);
}

/* Vignette Halo - For containers */
.halo-vignette {
  position:relative;
}
.halo-vignette::after {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, transparent 0%, rgba(15,23,42,.2) 80%, rgba(15,23,42,.4) 100%);
  pointer-events:none;
  border-radius:inherit;
}

/* Bloom Effect - High-intensity glow */
.halo-bloom {
  filter:brightness(1.2) contrast(1.1);
  box-shadow:
    0 0 30px rgba(59,130,246,.5),
    0 0 60px rgba(99,102,241,.3),
    0 0 100px rgba(139,92,246,.2),
    inset 0 0 20px rgba(255,255,255,.1);
  animation:halo-bloom-pulse 2s ease-in-out infinite;
}

@keyframes halo-bloom-pulse {
  0%, 100% { 
    filter:brightness(1.2) contrast(1.1);
    box-shadow:
      0 0 30px rgba(59,130,246,.5),
      0 0 60px rgba(99,102,241,.3),
      0 0 100px rgba(139,92,246,.2),
      inset 0 0 20px rgba(255,255,255,.1);
  }
  50% { 
    filter:brightness(1.4) contrast(1.2);
    box-shadow:
      0 0 50px rgba(59,130,246,.7),
      0 0 90px rgba(99,102,241,.5),
      0 0 150px rgba(139,92,246,.3),
      inset 0 0 30px rgba(255,255,255,.2);
  }
}

/* Utility Classes for Quick Application */
.halo-sm { filter:drop-shadow(0 0 10px rgba(59,130,246,.4)); }
.halo-md { filter:drop-shadow(0 0 20px rgba(59,130,246,.5)); }
.halo-lg { filter:drop-shadow(0 0 40px rgba(59,130,246,.6)); }
.halo-xl { filter:drop-shadow(0 0 80px rgba(59,130,246,.7)); }

/* Color Variants */
.halo-blue { filter:drop-shadow(0 0 30px rgba(59,130,246,.6)); }
.halo-indigo { filter:drop-shadow(0 0 30px rgba(99,102,241,.6)); }
.halo-purple { filter:drop-shadow(0 0 30px rgba(139,92,246,.6)); }
.halo-cyan { filter:drop-shadow(0 0 30px rgba(6,182,212,.6)); }

/* Disable halo effects for reduced motion */
@media(prefers-reduced-motion:reduce) {
  .halo-cursor,
  .btn-primary-halo::after,
  .card-halo::before,
  .halo-orb,
  .text-halo,
  .halo-neon,
  .halo-bloom {
    animation:none !important;
    filter:none !important;
  }
  
  /* Also disable all other animations */
  .anim-fade,
  .anim-word,
  .reveal,
  .hero-glow,
  .float-badge,
  .feature-card::before,
  .testimonial::before,
  .pain-card::before {
    animation:none !important;
    transition:none !important;
  }
}

/* ================================================================
   UI/UX PRO MAX ENHANCEMENTS
   Final polish and micro-interactions
   ================================================================ */

/* Smooth Scrolling with offset for fixed header */
html {
  scroll-padding-top:80px;
}

/* Selection styling */
::selection {
  background:rgba(99,102,241,.25);
  color:var(--c-primary);
}

/* Image lazy-loading optimization */
img[loading="lazy"] {
  opacity:0;
  transition:opacity .3s var(--ease);
}
img[loading="lazy"].loaded {
  opacity:1;
}

/* Loading state for async buttons */
.btn.loading {
  position:relative;
  pointer-events:none;
  opacity:.7;
}
.btn.loading::after {
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform:rotate(360deg); }
}

/* Tooltip base styling */
[data-tooltip] {
  position:relative;
  cursor:help;
}
[data-tooltip]::after {
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) scale(0.95);
  padding:var(--s2) var(--s3);
  background:var(--c-slate-900);
  color:var(--c-white);
  font-size:.75rem;
  white-space:nowrap;
  border-radius:var(--radius);
  opacity:0;
  pointer-events:none;
  transition:all .2s var(--ease);
  z-index:1000;
}
[data-tooltip]:hover::after {
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* Skip to content link for accessibility */
.skip-to-content {
  position:fixed;
  top:-100px;
  left:var(--s4);
  z-index:10000;
  padding:var(--s3) var(--s5);
  background:var(--c-indigo);
  color:var(--c-white);
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  transition:top .3s var(--ease);
}
.skip-to-content:focus {
  top:var(--s4);
  outline:none;
  box-shadow:var(--focus-ring-offset), var(--focus-ring);
}

/* Enhanced link underlines */
a[href]:not(.btn):not(.logo):not(.nav-link) {
  text-decoration:underline;
  text-decoration-color:rgba(59,130,246,.3);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  transition:text-decoration-color .2s var(--ease);
}
a[href]:not(.btn):not(.logo):not(.nav-link):hover {
  text-decoration-color:var(--c-blue);
}

/* Card stacking effect */
.card-stack {
  position:relative;
}
.card-stack::before,
.card-stack::after {
  content:'';
  position:absolute;
  inset:8px -4px -4px -4px;
  background:var(--c-white);
  border:1px solid var(--c-slate-200);
  border-radius:var(--radius-lg);
  z-index:-1;
}
.card-stack::after {
  inset:16px -8px -8px -8px;
  opacity:.5;
}


/* High-DPI displays (Retina) */
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-icon,
  img {
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
  }
}

@media(max-width:768px) {
  .footer-top {
    flex-direction:column;
    gap:var(--s8);
  }
  
  .footer-brand {
    max-width:100%;
  }
  
  .footer-links {
    flex-direction:column;
    gap:var(--s6);
  }
}