:root{--bg:#0b0c10;--bg-alt:#0f1116;--panel:#12141c;--text:#e6e8ee;--muted:#a7adc0;--brand:#6d6afc;--brand-2:#65e6cf;--border:#1e2230;--success:#34d399;--touch-target:44px}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(1200px 600px at 20% -10%,#1a1e2e 0%,transparent 60%),radial-gradient(1000px 500px at 120% 10%,#0e1530 0%,transparent 60%),var(--bg);color:var(--text);line-height:1.6;font-size:16px}
a:focus-visible,button:focus-visible{outline:2px solid #65e6cf;outline-offset:2px}
/* Futuristic global background layers */
body{position:relative}
body::before{content:"";position:fixed;inset:-20%;z-index:-2;background:radial-gradient(40% 30% at 20% 10%,rgba(109,106,252,.25),transparent 60%),radial-gradient(35% 30% at 80% 0%,rgba(101,230,207,.22),transparent 60%);filter:blur(30px);animation:glowShift 14s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 80px),repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);mask:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.6) 20%,rgba(255,255,255,.6) 80%,transparent 100%);opacity:.08}
@keyframes glowShift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.06)}}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.no-scroll{overflow:hidden}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,var(--bg-alt),rgba(15,17,22,.85));backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .25s ease, box-shadow .25s ease, background .25s ease}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-img{display:flex;align-items:center}
.brand-logo{height:48px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:16px}
.nav-link{color:var(--muted);padding:8px 12px;min-height:var(--touch-target);display:flex;align-items:center}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,transparent,rgba(101,230,207,.7),transparent);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.nav-link:hover::after{transform:scaleX(1)}
.nav-item{position:relative}
.submenu-toggle{background:transparent;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center}
.submenu{position:absolute;top:110%;left:0;min-width:210px;background:rgba(15,17,22,.98);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:8px;display:none;z-index:1000}
.submenu-link{display:block;color:#e6e8ee;padding:10px 12px;border-radius:8px}
.submenu-link:hover{background:rgba(255,255,255,.06)}
.submenu-open .submenu{display:block}
.menu-toggle{display:none;position:relative;width:var(--touch-target);height:var(--touch-target);border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.04);align-items:center;justify-content:center;cursor:pointer}
.menu-toggle span{position:absolute;display:block;width:20px;height:2px;background:#e6e8ee;transition:.25s ease}
.menu-toggle span:nth-child(1){transform:translateY(-6px)}
.menu-toggle span:nth-child(2){opacity:1}
.menu-toggle span:nth-child(3){transform:translateY(6px)}
.menu-open .menu-toggle span:nth-child(1){transform:rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:rotate(-45deg)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);font-weight:600;transition:.2s ease;min-height:var(--touch-target);cursor:pointer}
.button:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(101,230,207,.25) inset,0 0 18px rgba(101,230,207,.18)}
.button:active{transform:translateY(0)}
.button-sm{padding:8px 12px;font-size:.9rem;min-height:36px}
.primary{background:linear-gradient(180deg,var(--brand),#4a46f0);border-color:transparent}
.primary:hover{filter:brightness(1.05)}
.secondary{background:#1a1f2e}
.ghost{background:transparent}

.hero{padding:80px 0;background:radial-gradient(800px 400px at 60% 0%,rgba(109,106,252,.15),transparent 70%)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 16px}
.hero h1{background:linear-gradient(90deg,#e6e8ee 0%,#65e6cf 40%,#6d6afc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 30px rgba(109,106,252,.14))}
.subheadline{color:var(--muted);max-width:52ch;margin:0 0 24px}
.cta-group{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:360px}
/* moving orbs */
.orb{position:absolute;border-radius:50%;filter:blur(12px);opacity:.5;will-change:transform}
.orb.orb-1{width:160px;height:160px;left:8%;top:12%;background:radial-gradient(circle at 30% 30%,rgba(109,106,252,.6),transparent 70%)}
.orb.orb-2{width:120px;height:120px;right:12%;top:18%;background:radial-gradient(circle at 60% 40%,rgba(101,230,207,.6),transparent 70%)}
.orb.orb-3{width:180px;height:180px;left:20%;bottom:6%;background:radial-gradient(circle at 40% 60%,rgba(109,106,252,.45),transparent 70%)}
/* Chat demo */
.chat{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;padding:16px}
.chat-row{display:flex}
.chat-row.ai{justify-content:flex-start}
.chat-row.lead{justify-content:flex-end}
.bubble{max-width:72%;padding:10px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(6px)}
.chat-row.ai .bubble{background:linear-gradient(180deg,#171c2b,#101524)}
.chat-row.lead .bubble{background:linear-gradient(180deg,#0f2a2a,#0d1f23);border-color:#12343b}
.bubble .link{color:#65e6cf;text-decoration:underline}
.chat-replay{align-self:center;margin-top:6px;background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--border);padding:6px 10px;border-radius:8px;cursor:pointer;opacity:0;transform:translateY(6px);min-height:var(--touch-target);display:flex;align-items:center}

.section{padding:72px 0;border-top:1px solid var(--border)}
.section.alt{background:linear-gradient(180deg,var(--bg-alt),rgba(15,17,22,.6))}
.solar-section{background:linear-gradient(135deg,#000000 0%,#1a1a1a 100%);color:#ffffff;border:1px solid #d4af37}
.solar-section h2{color:#d4af37}
.solar-section .lead{color:#f5e6a3}
.solar-section .result{background:linear-gradient(135deg,#2a2a2a 0%,#1a1a1a 100%);border:1px solid #d4af37}
.solar-section .checks li{color:#f5e6a3}
.solar-section .checks li strong{color:#d4af37}
.solar-cta{background:linear-gradient(135deg,#d4af37 0%,#b8860b 100%);color:#000000;border:1px solid #d4af37}
.solar-cta:hover{background:linear-gradient(135deg,#b8860b 0%,#d4af37 100%);transform:translateY(-2px);box-shadow:0 0 20px rgba(212,175,55,0.5)}
.lead{color:var(--muted);max-width:60ch}

.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0;padding-top:18px}
.steps::before{content:"";position:absolute;top:0;left:10%;right:10%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.35}
.step{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:12px;position:relative}
.step:hover{box-shadow:0 0 0 1px rgba(109,106,252,.25) inset,0 10px 30px rgba(0,0,0,.35)}
.step::before{content:"";position:absolute;top:-12px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px rgba(109,106,252,.18)}
.step-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(109,106,252,.2),rgba(101,230,207,.15));margin-bottom:10px}
.step-icon svg{width:22px;height:22px;opacity:.9}
.step-num{display:none}

.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0}
.price-card{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:12px}
.price-card:hover{box-shadow:0 0 0 1px rgba(109,106,252,.25) inset}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checks{padding-left:18px}
.checks li{margin:10px 0}
.result{background:rgba(109,106,252,.06);border:1px dashed rgba(109,106,252,.35);padding:16px;border-radius:12px}

.qual-list{list-style:none;margin:0;padding:0}
.qual-list li{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.qual-list svg{width:18px;height:18px;flex:0 0 18px;opacity:.9}
.callout-accent{background:linear-gradient(180deg,rgba(109,106,252,.10),rgba(101,230,207,.08));border:1px solid rgba(109,106,252,.35);box-shadow:0 0 0 1px rgba(101,230,207,.12) inset, 0 10px 30px rgba(0,0,0,.25);padding:20px;border-radius:14px}
.feature-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;transition:transform .2s ease, background .2s ease}
.feature-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.035)}
.feature-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(109,106,252,.25),rgba(101,230,207,.2));margin-bottom:8px}
.feature-icon svg{width:20px;height:20px;opacity:.95}

.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-weight:600;font-size:.9rem}
.trust-strip{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:.95rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.split-card{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.offer-list{list-style:none;margin:0;padding:0}
.offer-list li{display:flex;gap:10px;margin:10px 0}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,.04);color:var(--muted)}

.flow{margin:24px 0 6px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:12px}
.flow-svg{width:100%;height:160px;display:block}
.flow .node{fill:#101524;stroke:#2b2f45;stroke-width:4}
.flow .dot{fill:url(#flowGrad)}
.flow-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:-8px}
.kpi{background:rgba(255,255,255,.03);border:1px solid var(--border);padding:10px;border-radius:10px;text-align:center}
.kpi span{font-weight:800;color:#65e6cf}

/* Rebuilt pipeline styles */
.pipeline{margin:24px 0 6px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:16px}
.pipeline .stages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pipeline .stage{display:flex;flex-direction:column;gap:10px}
.pipeline .bar{position:relative;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(109,106,252,.25),rgba(101,230,207,.25))}
.pipeline .spark{position:absolute;left:0;top:-4px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#65e6cf,rgba(101,230,207,.2) 60%,transparent 70%);box-shadow:0 0 18px rgba(101,230,207,.6)}
.pipeline .stage:nth-child(1) .spark{animation:pulse-move 2.2s linear infinite}
.pipeline .stage:nth-child(2) .spark{animation:pulse-move 2.4s linear infinite .2s}
.pipeline .stage:nth-child(3) .spark{animation:pulse-move 2.6s linear infinite .4s}
@keyframes pulse-move{0%{left:0;opacity:.6}50%{opacity:1}100%{left:calc(100% - 9px);opacity:.6}}

.cta{text-align:center;background:radial-gradient(600px 300px at 50% 0%,rgba(109,106,252,.12),transparent 70%)}

.faq details{background:var(--panel);border:1px solid var(--border);padding:14px 16px;border-radius:12px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:600;min-height:var(--touch-target);display:flex;align-items:center;padding:4px 0}
.faq details:hover{box-shadow:0 0 0 1px rgba(101,230,207,.2) inset}

.site-footer{border-top:1px solid var(--border);padding:22px 0;background:var(--bg-alt)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-email{color:var(--muted)}

/* Mobile-first responsive design */
@media (max-width: 1200px) {
  .container { padding: 0 24px; }
  .hero-inner { gap: 24px; }
  .steps { gap: 20px; }
}

@media (max-width: 960px) {
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero h1{font-size:36px;line-height:1.2}
  .hero{padding:60px 0}
  .section{padding:60px 0}
  /* Declutter hero: hide decorative orbs and chat on mobile */
  .hero-art{display:none}
  /* Keep only one CTA in hero on mobile */
  .cta-group .button.secondary{display:none}
  .steps{grid-template-columns:1fr;gap:20px;margin:24px 0}
  .step{padding:20px}
  .pricing{grid-template-columns:1fr;gap:20px}
  .price-card{padding:20px}
  .grid-2{grid-template-columns:1fr;gap:20px}
  .split{grid-template-columns:1fr;gap:20px}
  .split-card{padding:20px}
  .grid-3{grid-template-columns:1fr;gap:20px}
  .header-inner{height:64px}
  .brand-logo{height:40px}
  .menu-toggle{display:inline-flex}
  .nav{position:fixed;inset:64px 0 auto 0;display:flex;flex-direction:column;gap:0;padding:0;background:rgba(11,12,16,.98);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transform:translateY(-120%);transition:transform .3s ease;box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .menu-open #primary-nav{transform:none}
  /* Mobile submenu becomes inline list */
  .has-submenu{width:100%}
  .has-submenu .submenu{position:static;display:none;box-shadow:none;border-radius:8px;margin:6px 12px;background:rgba(11,12,16,.9)}
  .has-submenu.submenu-open .submenu{display:block}
  /* Ensure submenu is visible when open on mobile */
  .has-submenu.submenu-open .submenu{display:block !important}
  .submenu-link{padding:12px 16px}
  .nav-link{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.05);min-height:56px;justify-content:flex-start}
  .nav-link:last-child{border-bottom:none}
  .hero-art{height:320px}
  .chat .bubble{max-width:88%;padding:12px 16px}
  .chat-replay{margin-top:12px;padding:10px 16px;min-height:44px}
  .orb{filter:blur(20px);opacity:.3}
  .cta-group{flex-direction:column;gap:16px}
  .button{width:100%;justify-content:center;padding:16px 24px;min-height:52px;font-size:16px}
  .button-sm{width:100%;min-height:44px}
  .subheadline{font-size:18px;line-height:1.5}
  .lead{font-size:18px;line-height:1.6}
  .callout-accent{padding:24px}
  .feature-card{padding:20px}
  .flow{padding:16px}
  .flow-svg{height:120px}
  .flow-labels{grid-template-columns:1fr;gap:12px;margin-top:0}
  .kpi{padding:16px}
  .badge-row{gap:12px}
  .badge{padding:8px 12px;font-size:14px}
  .trust-strip{flex-direction:column;gap:8px;text-align:center}
  .checks{padding-left:24px}
  .checks li{margin:12px 0}
  .result{padding:20px}
  .faq details{padding:20px}
  .faq summary{padding:8px 0}
  /* Ensure content flows naturally; no extra bottom padding since CTA is non-fixed */
  main{padding-bottom:0}
  /* Stack pipeline stages vertically */
  .pipeline .stages{grid-template-columns:1fr}
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero h1 { font-size: 32px; }
  .hero { padding: 48px 0; }
  .section { padding: 48px 0; }
  .step { padding: 16px; }
  .price-card { padding: 16px; }
  .split-card { padding: 16px; }
  .feature-card { padding: 16px; }
  .callout-accent { padding: 20px; }
  .flow { padding: 12px; }
  .flow-svg { height: 100px; }
  .kpi { padding: 12px; }
  .faq details { padding: 16px; }
  .result { padding: 16px; }
  .nav-link { padding: 14px 20px; min-height: 52px; }
  .button { padding: 14px 20px; min-height: 48px; }
  .chat .bubble { max-width: 92%; padding: 10px 14px; }
  .hero-art { height: 280px; }
  .orb { filter: blur(24px); opacity: .25; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 28px; }
  .subheadline { font-size: 16px; }
  .lead { font-size: 16px; }
  .step-icon { width: 36px; height: 36px; }
  .step-icon svg { width: 20px; height: 20px; }
  .feature-icon { width: 32px; height: 32px; }
  .feature-icon svg { width: 18px; height: 18px; }
  .hero-art { height: 240px; }
  .chat { padding: 12px; }
  .chat .bubble { max-width: 95%; padding: 8px 12px; font-size: 14px; }
  .chat-replay { font-size: 14px; padding: 8px 12px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  .orb{animation:none}
  .chat .bubble{transition:none}
  .step:hover{transform:none}
  .feature-card:hover{transform:none}
}

/* Mobile CTA (non-fixed) */
.mobile-cta{position:static;left:auto;right:auto;bottom:auto;z-index:60;display:none;gap:10px;justify-content:space-between;background:rgba(15,17,22,.95);border:1px solid var(--border);padding:12px;border-radius:12px;backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.4);margin:16px 12px 0}
.mobile-cta .button{flex:1;min-height:44px}
@media (max-width: 960px){.mobile-cta{display:flex}}

/* reveal utility */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* reveal with staggered children */
.reveal-stagger > *{opacity:0;transform:translateY(10px)}
.reveal-stagger.in > *{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}

/* sticky header scrolled state */
.site-header.scrolled{background:linear-gradient(180deg,rgba(15,17,22,.92),rgba(15,17,22,.86));box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* Mobile-specific enhancements */
@media (max-width: 960px) {
  /* Improve touch targets */
  .nav-link, .button, .chat-replay, .faq summary {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Better mobile spacing */
  .hero-copy { text-align: center; }
  .cta-group { align-items: stretch; }
  
  /* Mobile-optimized grid layouts */
  .steps::before { left: 5%; right: 5%; }
  
  /* Mobile-friendly pricing */
  .pricing .price-card:first-child { order: 2; }
  .pricing .price-card:last-child { order: 1; }
  
  /* Mobile-optimized flow visualization */
  .flow-labels .kpi { text-align: center; }
  
  /* Better mobile footer */
  .footer-inner { flex-direction: column; text-align: center; gap: 12px; }
}

/* Landscape mobile optimizations */
@media (max-width: 960px) and (orientation: landscape) {
  .hero { padding: 40px 0; }
  .section { padding: 40px 0; }
  .hero-art { height: 200px; }
  .nav { max-height: 60vh; overflow-y: auto; }
}

/* High-DPI mobile optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .orb { filter: blur(16px); }
  .site-header::before { filter: blur(20px); }
}

/* Mobile performance optimizations */
@media (max-width: 960px) {
  .orb { will-change: auto; }
  body::before, body::after { will-change: auto; }
}