/* ==========================================================================
   All State AI — Futuristic Redesign (visual layer only)
   Loaded AFTER each page's own styles so it wins equal-specificity ties.
   Purely additive: no markup, script, or SEO changes live in this file.
   Tokens from the approved design brief (deep navy / electric blue-cyan).
   ========================================================================== */

:root{
  --navy-950:#040814; --navy-900:#060d20; --navy-800:#0a1530; --navy-700:#101f45;
  --blue-600:#1f5eff; --blue-500:#2e7cf6; --blue-400:#4da3ff; --blue-300:#8cc4ff;
  --cyan:#46d6ff; --ice:#eaf2ff; --muted:#93a5c8;
  --glass:rgba(255,255,255,.045); --stroke:rgba(120,170,255,.16);
  --grad:linear-gradient(120deg,#2e7cf6 0%,#46d6ff 100%);
  --glow:0 8px 30px rgba(46,124,246,.45);
  --glow-lg:0 14px 42px rgba(70,180,255,.55);

  /* Re-map the hand-built pages' legacy variables onto the new palette.
     Their component CSS consumes these, so this one block re-skins all of them. */
  --bg:#040814; --bg2:#060d20;
  --card:rgba(255,255,255,.045); --line:rgba(120,170,255,.16);
  --t1:#ffffff; --t2:#93a5c8; --t3:#6f83ad;
  --accent:#2e7cf6; --accent2:#46d6ff; --accent3:#46d6ff; --good:#34d399;
}

::selection{background:var(--blue-500);color:#fff}

/* ---------- typography ---------- */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
h1,h2,h3,h4,
.brand,.nav-cta,.btn,.price,.amount,.permo,.flag,.kicker,.eyebrow,
.step-num,.stat b,.stat-num{
  font-family:'Space Grotesk','Inter',sans-serif;
}

/* ---------- ambient background (re-tints existing orb layers) ---------- */
html{background:var(--navy-950)}
body{background:var(--navy-950)}
body::before{
  background:radial-gradient(circle,rgba(18,58,143,.5) 0%,transparent 70%)!important;
}
body::after{
  background:radial-gradient(circle,rgba(11,95,138,.42) 0%,transparent 70%)!important;
}

/* ---------- floating glass nav (hand-built pages) ---------- */
.nav{transition:background .35s ease}
.nav .nav-inner{
  border-radius:16px;border:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,padding .35s ease;
}
.nav.scrolled .nav-inner{
  background:rgba(6,13,32,.78);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-color:var(--stroke);
  box-shadow:0 12px 40px rgba(2,8,26,.5);
}
.brand span,
.nav .brand span{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--grad);border-radius:2px;transition:width .3s;
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}

/* ---------- buttons ---------- */
.btn{transition:transform .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease}
.btn-primary{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:var(--glow);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:var(--glow-lg);
}
.btn-secondary{
  background:var(--glass)!important;
  border:1px solid var(--stroke)!important;
  color:var(--ice)!important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-secondary:hover{
  border-color:rgba(140,196,255,.45)!important;
  background:rgba(255,255,255,.08)!important;
  transform:translateY(-2px);
}

/* ---------- glass cards (hand-built pages + blog) ---------- */
.card,.tier,.build,.roi-card,.proof-panel,.post,.cta-box,.note,
.contact-grid > *,.faq details,.faq-item,.step{
  background:var(--glass);
  border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.card,.tier,.build,.roi-card,.post{
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease,border-color .35s ease;
}
.card:hover,.tier:hover,.build:hover,.roi-card:hover,.post:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.07);
  border-color:rgba(140,196,255,.35);
  box-shadow:0 26px 60px rgba(2,8,26,.55);
}
.card .icon,.steps .step-num,.icon{
  background:linear-gradient(140deg,rgba(46,124,246,.28),rgba(70,214,255,.14));
  border:1px solid rgba(120,170,255,.3);
  box-shadow:inset 0 0 20px rgba(70,150,255,.15);
}

/* gradient text helpers already used by the pages */
.grad-text{
  background-image:var(--grad)!important;
  -webkit-background-clip:text!important;background-clip:text;color:transparent!important;
}

/* ---------- hero (hand-built pages) ---------- */
.hero{position:relative;overflow:hidden}
.hero .eyebrow{
  border:1px solid var(--stroke);
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.hero-sub{color:var(--muted)}
#asai-grid-canvas,.asai-grid-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.hero > .wrap,.hero > .hero-inner{position:relative;z-index:1}

/* ---------- pricing (hand-built pricing.html) ---------- */
.tier{position:relative}
.tier.featured{
  background:linear-gradient(170deg,rgba(46,124,246,.16),rgba(70,214,255,.06));
  border-color:rgba(70,160,255,.45);
  box-shadow:0 24px 60px rgba(2,8,26,.5);
}
.tier .flag{
  background:var(--grad);
  color:#fff;
  box-shadow:0 6px 20px rgba(46,124,246,.5);
  font-family:'Space Grotesk',sans-serif;
}
.price,.amount{
  background:none;color:#fff;
}
.tier.featured .price,.tier.featured .amount{color:#fff}

/* ---------- contact form ---------- */
input[type=text],input[type=email],input[type=tel],textarea,select{
  background:rgba(6,13,32,.55);
  border:1px solid var(--stroke);
  color:var(--ice);
  transition:border-color .25s,box-shadow .25s;
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(70,160,255,.55);
  box-shadow:0 0 0 3px rgba(46,124,246,.22);
}
input::placeholder,textarea::placeholder{color:var(--t3)}

/* ---------- footer (both families) ---------- */
.footer,.ghl-footer{
  border-top:1px solid var(--stroke);
  background:rgba(4,8,20,.6);
}

/* ==========================================================================
   GHL / Nuxt export pages — additive overrides.
   These selectors target template-owned hooks; names must not change.
   ========================================================================== */

/* base + typography */
.hl_page-preview--content,[class*="c-nav-menu"]{color:var(--ice)}
.hl_page-preview--content h1,
.hl_page-preview--content h2,
.hl_page-preview--content h3{
  font-family:'Space Grotesk','Inter',sans-serif!important;
  letter-spacing:-.01em;
}

/* nav: frosted pill after scroll (JS toggles .asai-scrolled) */
[class*="c-nav-menu"]{transition:background .35s ease,box-shadow .35s ease,border-radius .35s ease}
[class*="c-nav-menu"].asai-scrolled{
  background:rgba(6,13,32,.78)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(2,8,26,.5);
  border-radius:0 0 16px 16px;
}
[class*="c-nav-menu"].asai-scrolled *{border-color:transparent}

/* template gradient headline spans -> brand blue-cyan */
.hl_page-preview--content .gradient-text,
.hl_page-preview--content .text-gradient-cyber{
  background-image:var(--grad)!important;
}

/* template buttons -> glass / gradient */
.hl_page-preview--content a[class*="cbutton"],
.hl_page-preview--content button[class*="cbutton"]{
  border-radius:12px!important;
  transition:transform .28s ease,box-shadow .28s ease,background .28s ease,border-color .28s ease!important;
}
.hl_page-preview--content a[class*="cbutton"]:hover,
.hl_page-preview--content button[class*="cbutton"]:hover{
  transform:translateY(-2px);
}
/* primary conversion CTAs (tagged by asai-global.js rewrite) */
.hl_page-preview--content a[data-asai-cta]{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:var(--glow)!important;
}
.hl_page-preview--content a[data-asai-cta]:hover{box-shadow:var(--glow-lg)!important}

/* service cards grid (homepage template cards + injected clones) */
[data-asai-grid-fixed] > div{
  background:var(--glass)!important;
  border:1px solid var(--stroke)!important;
  border-radius:22px!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease!important;
}
[data-asai-grid-fixed] > div:hover{
  transform:translateY(-8px)!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(140,196,255,.4)!important;
  box-shadow:0 26px 60px rgba(2,8,26,.55)!important;
}
/* card "View Details" buttons -> on-palette glass */
[data-asai-grid-fixed] > div a[class*="cbutton"],
[data-asai-grid-fixed] > div button[class*="cbutton"]{
  background:var(--glass)!important;
  border:1px solid var(--stroke)!important;
  color:var(--ice)!important;
  box-shadow:none!important;
}
[data-asai-grid-fixed] > div a[class*="cbutton"]:hover{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:var(--glow)!important;
}

/* ---------- ROI calculator (index) ---------- */
#roi-calculator-container{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;
  border:1px solid var(--stroke)!important;
  border-radius:26px!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(2,8,26,.55);
}
#roi-calculator-container input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:6px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--blue-500) var(--fill,50%),rgba(120,170,255,.18) var(--fill,50%))!important;
}
#roi-calculator-container input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:5px solid var(--blue-500);
  box-shadow:0 0 18px rgba(70,150,255,.7);
  transition:transform .2s;
}
#roi-calculator-container input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
#roi-calculator-container input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:5px solid var(--blue-500);box-shadow:0 0 18px rgba(70,150,255,.7);
}
#total-annual-savings{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(70,180,255,.35));
}

/* ---------- voice demo (index, #ai-demo assigned at runtime) ---------- */
#ai-demo .voice-demo-container,
.voice-demo-container.glass-card{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02))!important;
  border:1px solid var(--stroke)!important;
  border-radius:28px!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
#ai-demo .neon-button-alt{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:var(--glow)!important;
}
#ai-demo .neon-button-alt:hover{box-shadow:var(--glow-lg)!important;transform:translateY(-2px)}
#aiDemoBadge,#asaiDemoBadge{
  border:1px solid var(--stroke)!important;
  background:var(--glass)!important;
  color:var(--muted)!important;
}
/* decorative equalizer injected by asai-redesign.js */
.asai-eq{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;z-index:0;pointer-events:none;overflow:hidden}
.asai-eq i{width:4px;border-radius:4px;background:linear-gradient(180deg,var(--cyan),var(--blue-600));opacity:.45;animation:asaiEq 1.4s ease-in-out infinite}
@keyframes asaiEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ---------- homepage hero: two-column with robot stage ---------- */
.allstate-hero-transparent .hero-title,
.allstate-hero-transparent .hero-subtitle{
  font-family:'Space Grotesk','Inter',sans-serif!important;
}
.allstate-hero-transparent .hero-badge{
  background:rgba(46,124,246,.14)!important;
  color:var(--blue-300)!important;
  border:1px solid var(--stroke);
}
@media (min-width:1024px){
  .allstate-hero-transparent .hero-content{
    position:relative;
    max-width:1200px!important;
  }
  .allstate-hero-transparent .hero-content > :not(.asai-hero-stage){
    max-width:620px;
  }
  .allstate-hero-transparent .asai-hero-stage{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:min(42%,460px);
    z-index:1;
  }
}
@media (max-width:1023px){
  .allstate-hero-transparent .asai-hero-stage{margin:44px auto 0;position:relative}
}

/* ---------- hero robot stage (index, injected by asai-redesign.js) ---------- */
.asai-hero-stage{position:relative;display:grid;place-items:center;z-index:1}
.asai-hero-stage .ring{
  position:absolute;width:min(30vw,430px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(46,124,246,.30) 0%,rgba(70,214,255,.08) 45%,transparent 70%);
  animation:asaiBreathe 5s ease-in-out infinite;
}
.asai-hero-stage .halo{
  position:absolute;width:min(26vw,370px);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(140,196,255,.35);
  animation:asaiSpin 26s linear infinite;
}
.asai-hero-stage .halo::before{
  content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 16px var(--cyan);
}
.asai-hero-stage img{
  position:relative;z-index:2;width:min(30vw,400px);height:auto;
  filter:drop-shadow(0 30px 60px rgba(10,40,120,.55));
  animation:asaiFloat 6s ease-in-out infinite;
}
.asai-hero-tag{
  position:absolute;z-index:3;display:flex;align-items:center;gap:10px;
  background:rgba(8,18,42,.82);border:1px solid var(--stroke);border-radius:14px;
  padding:11px 16px;font-size:12.5px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 14px 34px rgba(2,8,26,.5);
  animation:asaiFloat 7s ease-in-out infinite;
}
.asai-hero-tag .ico{
  width:28px;height:28px;border-radius:9px;background:var(--grad);
  display:grid;place-items:center;font-size:14px;flex:none;
}
.asai-hero-tag b{display:block;font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:#fff}
.asai-hero-tag span.sub{color:var(--muted);font-size:11.5px}
.asai-hero-tag.t1{top:10%;left:-6%}
.asai-hero-tag.t2{bottom:14%;right:-4%;animation-delay:-3s}
@keyframes asaiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes asaiSpin{to{transform:rotate(360deg)}}
@keyframes asaiBreathe{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:1}}

/* hero stat chips (index, injected) */
.asai-hero-chips{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.asai-chip{
  border:1px solid var(--stroke);background:var(--glass);border-radius:14px;
  padding:13px 20px;min-width:120px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.asai-chip b{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:22px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.asai-chip span{font-size:12px;color:var(--muted);letter-spacing:.04em}

/* ---------- scroll reveal ---------- */
[data-asai-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
[data-asai-reveal].asai-in{opacity:1;transform:none}

/* ---------- mobile ---------- */
@media (max-width:960px){
  .asai-hero-stage{margin-top:36px}
  .asai-hero-stage img{width:min(62vw,340px)}
  .asai-hero-stage .ring{width:min(70vw,360px)}
  .asai-hero-stage .halo{width:min(60vw,310px)}
  .asai-hero-tag.t1{left:0}
  .asai-hero-tag.t2{right:0}
}

/* ---------- reduced motion: disable every animation this layer adds ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-asai-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .asai-hero-stage img,.asai-hero-stage .ring,.asai-hero-stage .halo,.asai-hero-tag,
  .asai-eq i,.btn,.card,.tier,.build,.roi-card,.post{
    animation:none!important;transition:none!important;
  }
  #asai-grid-canvas{display:none}
}