:root{
  /* Base escura com acentos em azul (Avi) */
  --bg: #0f1730;
  --panel: rgba(255,255,255,.18);
  --panel2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.24);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);
  --shadow: 0 22px 70px rgba(8,12,24,.38);
  --r: 18px;

  /* Paleta mais vibrante (tecnológica) alinhada com o avatar Avi */
  --g1:#3b82f6; /* azul */
  --g2:#22d3ee; /* ciano */
  --g3:#a855f7; /* roxo */
  --g4:#f472b6; /* rosa */

  --glow: 0 0 42px rgba(34,211,238,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 720px at 10% 8%, rgba(94,197,255,.62), transparent 58%),
    radial-gradient(980px 700px at 88% 12%, rgba(195,95,255,.46), transparent 60%),
    radial-gradient(920px 680px at 76% 88%, rgba(255,184,107,.34), transparent 58%),
    radial-gradient(760px 560px at 24% 72%, rgba(45,212,191,.26), transparent 56%),
    linear-gradient(180deg, #121b3a 0%, #0f1630 48%, #0b1124 100%);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
body::before, body::after{
  content:"";
  position:fixed;
  inset:auto;
  pointer-events:none;
  z-index:-1;
  filter:blur(44px);
  opacity:.82;
}
body::before{
  width:36vw; height:36vw;
  top:8vh; right:-10vw;
  background:radial-gradient(circle, rgba(34,211,238,.22) 0%, rgba(34,211,238,0) 68%);
}
body::after{
  width:42vw; height:42vw;
  bottom:-14vh; left:-12vw;
  background:radial-gradient(circle, rgba(168,85,247,.20) 0%, rgba(168,85,247,0) 68%);
}

a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}

.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border:1px solid var(--stroke);
  backdrop-filter: blur(12px);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.topbar{
  position:fixed; top:12px; left:0; right:0;
  z-index:50;
  width:min(1180px, 96vw);
  margin:0 auto;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(24,34,70,.76), rgba(19,27,55,.58));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 55px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.03), 0 0 40px rgba(34,211,238,.08);
}
.topbar__inner{display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.01em}
.brand__avatar{
  width:44px; height:44px;
  border-radius:16px;
  object-fit:cover;
  box-shadow: 0 14px 38px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10), var(--glow);
  border:1px solid rgba(255,255,255,.22);
}
.brand__dot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 0 28px rgba(86,204,242,.35);
}
.nav{display:flex; gap:12px; margin-left:8px}
.nav a{
  padding:9px 9px; border-radius:12px;
  color:var(--muted);
  transition: .2s ease;
}
.nav a:hover{color:var(--text); background: rgba(255,255,255,.06)}
.topbar__right{margin-left:auto; display:flex; gap:10px; align-items:center}


/* Language dropdown */
.lang-dd{position:relative; padding:6px;}
.lang-dd__btn{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid transparent;
  color:var(--text); cursor:pointer;
  padding:8px 12px; border-radius:14px;
  transition:.2s ease;
}
.lang-dd__btn:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);}
.lang-dd__current{font-weight:700; letter-spacing:.02em;}
.lang-dd__chev{opacity:.8; transform: translateY(1px);}
.lang-dd__menu{
  position:absolute; right:6px; top: calc(100% + 8px);
  min-width: 86px;
  background: rgba(15,18,26,.88);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  display:none;
  z-index: 50;
}
.lang-dd.open .lang-dd__menu{display:block;}
.lang-option{
  width:100%;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  color:var(--muted);
  padding:10px 10px;
  border-radius: 12px;
  cursor:pointer;
  transition:.18s ease;
}
.lang-option:hover{background: rgba(255,255,255,.08); color:var(--text);}
.lang-option.active{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); color:var(--text);}

.lang-toggle{display:flex; gap:6px; padding:6px}
.lang-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:.2s ease;
}
.lang-btn.active{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color:var(--text);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition:.2s ease;
  gap:8px;
  font-weight:650;
}
.btn--primary{
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, var(--g1), var(--g3));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(34,211,238,.14);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: translateX(-140%);
  transition: transform .65s ease;
  opacity:.35;
  pointer-events:none;
}
.btn--primary:hover::after{transform: translateX(140%);}
.btn--primary:hover{transform: translateY(-2px) scale(1.01); filter:brightness(1.08); box-shadow:0 24px 50px rgba(59,130,246,.28), 0 0 36px rgba(168,85,247,.22)}
.btn--ghost{
  background: transparent;
}
.btn--ghost:hover{background: rgba(255,255,255,.06)}
.btn--soft{
  background: rgba(255,255,255,.08);
}
.btn--soft:hover{background: rgba(255,255,255,.11)}
.w100{width:100%}

.burger{display:none; margin-left:auto; background:transparent; border:0; cursor:pointer}
.burger span{display:block; width:24px; height:2px; background:rgba(255,255,255,.7); margin:6px 0}
.mobile-nav{
  display:none; margin-top:10px; padding:10px; border-radius:16px;
  background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10);
}
.mobile-nav a{display:block; padding:10px 8px; border-radius:12px; color:var(--muted)}
.mobile-nav a:hover{background: rgba(255,255,255,.06); color:var(--text)}

.hero{padding:120px 0 40px; position:relative}
.bg-blobs{
  position:absolute; inset:-200px -200px auto -200px;
  height:700px;
  background:
    radial-gradient(280px 280px at 18% 40%, rgba(168,85,247,.48), transparent 70%),
    radial-gradient(320px 320px at 52% 18%, rgba(244,114,182,.34), transparent 70%),
    radial-gradient(280px 280px at 82% 52%, rgba(34,211,238,.22), transparent 70%);
  filter: blur(24px);
  opacity:.9;
  pointer-events:none;
  animation: blobsMove 18s ease-in-out infinite alternate;
}

@keyframes blobsMove{
  0%{transform: translate3d(0,0,0) scale(1)}
  50%{transform: translate3d(44px,-18px,0) scale(1.05)}
  100%{transform: translate3d(-34px,26px,0) scale(1.02)}
}

/* --- WOW: Avi em destaque no hero --- */
.hero__card{position:relative}
.hero-avi{
  position:absolute;
  top:-22px;
  left:-22px;
  width:110px;
  height:110px;
  padding:6px;
  border-radius:30px;
  background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(168,85,247,.55));
  box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12), 0 0 60px rgba(34,211,238,.18);
  backdrop-filter: blur(10px);
  z-index: 6;
  transform: translateZ(0);
  animation: aviFloat 4.8s ease-in-out infinite;
}
.hero-avi img{width:100%; height:100%; border-radius:24px; object-fit:cover; display:block}
@keyframes aviFloat{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(-6px)}
}

.hero__grid{display:grid; grid-template-columns: 1.2fr .9fr; gap:26px; align-items:center}
.pill{display:inline-flex; padding:10px 12px; border-radius:999px; font-size:13px; color:var(--muted)}
.h1{font-size:54px; line-height:1.02; margin:14px 0 12px}
.sub{font-size:18px; color:var(--muted); margin:0 0 8px}
.lead{font-size:16px; color:var(--muted2); margin:0 0 18px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}

.trust{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.trust__item{padding:12px 14px; border-radius:16px; background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); box-shadow:none}
.trust__item{
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.trust__item::after{
  content:"";
  position:absolute; inset:-60% -60% auto auto;
  width:180px; height:180px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.35), transparent 62%);
  opacity:.35;
  pointer-events:none;
}
.trust__item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08), var(--glow);
  filter: brightness(1.05);
}
.trust__big{font-weight:800}
.trust__small{display:block; color:var(--muted2); font-size:12px; margin-top:4px}

.hero__mini{
  padding:14px;
  border-radius:22px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
  /* desce a pré-visualização para não tapar o avatar */
  margin-top: 56px;
}
.mini-top{display:flex; align-items:center; gap:6px; margin-bottom:10px}
.mini-dot{width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.20)}
.mini-title{margin-left:8px; color:var(--muted); font-size:13px}
.mini-body{padding:8px 4px}
.mini-line{height:10px; background: rgba(255,255,255,.10); border-radius:999px; margin:10px 0}
.mini-line.w80{width:80%}
.mini-line.w60{width:60%}
.mini-chat{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:80%; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color:var(--text); font-size:13px}
.bubble--me{align-self:flex-end; background: rgba(255,255,255,.08)}
.bubble--bot{align-self:flex-start; background: rgba(255,255,255,.06)}
.hero__note{margin-top:10px; color:var(--muted); text-align:center}

.section{padding:76px 0; position:relative}
.section::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 28%, rgba(255,255,255,.02) 100%);} 
.section-head{margin:0 auto 28px; text-align:center; max-width:940px}
.section-head .muted{max-width: 880px; margin: 0 auto; font-size:17px; line-height:1.7}
.h2{font-size:38px; margin:0 0 10px; line-height:1.08}
.section-head .h2{background:linear-gradient(135deg, #ffffff 0%, #d8ccff 34%, #7ef3ff 66%, #ffd29f 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 10px 30px rgba(14,18,35,.20)}
.muted{color:var(--muted)}
.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(3, 1fr)}
.card{
  box-shadow: 0 18px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06), 0 0 42px rgba(86,204,242,.14);
  padding:18px;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(168,85,247,.10), rgba(244,114,182,.10));
  opacity:.0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.card:hover{
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow: 0 22px 65px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(168,85,247,.14);
}
.card:hover::before{opacity:1}
.icon{font-size:22px; margin-bottom:8px}
.card h3{margin:8px 0 6px}
.card p{margin:0; color:var(--muted2); line-height:1.5}

.demo .demo-panel{display:grid; grid-template-columns: 320px 1fr; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.14); background:linear-gradient(135deg, rgba(28,40,82,.88), rgba(52,33,92,.84)); box-shadow:0 28px 78px rgba(10,12,22,.30), 0 0 0 1px rgba(255,255,255,.04), 0 0 110px rgba(34,211,238,.15)}
.demo .demo-panel::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--avi-accent, var(--g1)) 22%, transparent), transparent 36%), radial-gradient(circle at 86% 88%, color-mix(in srgb, var(--avi-accent2, var(--g3)) 18%, transparent), transparent 32%); pointer-events:none; opacity:.95}
.demo-side{padding:20px; border-right:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.demo-side__title{font-weight:750; margin-bottom:12px}
.quick{display:flex; flex-direction:column; gap:10px; max-height:360px; overflow:auto; padding-right:2px}
.qbtn{
  text-align:left; padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  color:var(--text);
  cursor:pointer;
  transition:.22s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.qbtn:hover{background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent, var(--g1)) 18%, rgba(255,255,255,.08)), rgba(255,255,255,.07)); transform: translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.06), 0 0 24px color-mix(in srgb, var(--avi-accent, var(--g1)) 20%, transparent)}
.demo-side__hint{margin-top:16px; color:var(--muted2); font-size:13px}

.demo-chat{display:flex; flex-direction:column; height:520px; min-height:0}
.demo-chat__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  position:relative; z-index:1;
}
.agent{display:flex; align-items:center; gap:10px}
.agent__avatar{
  width:58px; height:58px; border-radius:18px;
  background-image: url("../img/avi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,.06);
  box-shadow: 0 14px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.12), 0 0 28px color-mix(in srgb, var(--avi-accent, var(--g2)) 34%, transparent);
  border: 1px solid rgba(255,255,255,.14);
}
.agent__name{font-weight:800}
.agent__status{font-size:12px; color:var(--muted2)}
.demo-badge{font-size:12px; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--text); background:linear-gradient(135deg, color-mix(in srgb, var(--avi-accent, var(--g1)) 20%, rgba(255,255,255,.08)), color-mix(in srgb, var(--avi-accent2, var(--g3)) 12%, rgba(255,255,255,.05))); box-shadow:0 10px 24px rgba(0,0,0,.18)}
.demo-chat__msgs{padding:18px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.msg{max-width:78%; padding:14px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); line-height:1.55; box-shadow:0 10px 22px rgba(0,0,0,.14)}
.msg.me{align-self:flex-end; background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent, var(--g1)) 24%, rgba(255,255,255,.09)), color-mix(in srgb, var(--avi-accent2, var(--g3)) 16%, rgba(255,255,255,.06)))}
.msg.bot{align-self:flex-start; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05))}
.typing{font-size:12px; color:var(--muted2)}
.demo-chat__composer{background:rgba(255,255,255,.03);
  display:flex; gap:10px; padding:12px; border-top:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.16));
  position:relative; z-index:1;
}
.demo-chat__composer input{background:rgba(255,255,255,.08);
  flex:1; padding:13px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  color:var(--text);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.demo-chat__composer input:focus{border-color:color-mix(in srgb, var(--avi-accent, var(--g1)) 70%, white); box-shadow:0 0 0 4px color-mix(in srgb, var(--avi-accent, var(--g1)) 18%, transparent); transform:translateY(-1px)}
.demo-ctas{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap}

.before-after{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.ba{
  padding:18px;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.ba::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 50%, transparent 100%);
  transform: translateX(-120%);
  opacity:0;
  pointer-events:none;
  transition: transform .65s ease, opacity .25s ease;
}
.ba::after{
  content:"";
  position:absolute; inset:-60% -60% auto auto;
  width:220px; height:220px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.32), transparent 62%);
  opacity:.22;
  pointer-events:none;
}
.ba:hover{
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 70px rgba(34,211,238,.10);
}
.ba:hover::before{transform: translateX(120%); opacity:.55}
.ba--after{border-color: rgba(255,42,163,.25)}
.ba--after::after{
  background: radial-gradient(circle at 30% 30%, rgba(168,85,247,.30), transparent 62%);
}
.ba h3{margin:0 0 10px}
.ba ul{margin:0; padding-left:18px; color:var(--muted2)}
.ba li{margin:8px 0}

.pricing{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.price-card{padding:18px; position:relative; display:flex; flex-direction:column}
.price-card{
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow:hidden;
}
.price-card:hover{
  transform: translateY(-4px);
  filter: brightness(1.05);
  box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 70px rgba(34,211,238,.12);
}
.price-top{margin-bottom:12px}
.price{font-size:38px; font-weight:900; margin:6px 0 0}
.price-sub{color:var(--muted2); font-size:13px}
.price-tax{margin-top:4px; font-size:12px; color:var(--muted2)}
.plan-for{margin-top:6px; color:var(--muted2); font-size:13px; line-height:1.25}
.price-list{margin:14px 0; padding-left:18px; color:var(--muted2); flex:1}
.price-footer{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.price-footer{margin-top:auto; display:flex; flex-direction:column; gap:10px}
.maintenance{padding:10px 12px; border-radius:14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:var(--muted)}
.maintenance .maint-price{font-weight:900; color:var(--text)}
.maintenance .maint-sub{font-size:12px; color:var(--muted2)}
.popular{border-color: rgba(124,58,237,.35); transform: translateY(0); box-shadow: 0 22px 70px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.08)}
.price-card.popular::after{content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(circle at 30% 10%, rgba(168,85,247,.18), transparent 45%);}
.price-card.popular{transform: translateY(0); box-shadow: 0 28px 80px rgba(0,0,0,.48); border-color: rgba(255,255,255,.18);}
.price-card.popular:hover{transform: translateY(-4px);}
.tag{
  position:absolute; top:14px; right:14px;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(135deg, rgba(124,58,237,.8), rgba(255,42,163,.8));
  border:1px solid rgba(255,255,255,.12);
  font-size:12px; font-weight:800;
}
.note{margin-top:14px}

.faq details{padding:14px 16px; margin:10px 0}
.faq summary{cursor:pointer; font-weight:800}
.faq p{margin:10px 0 0; color:var(--muted2); line-height:1.5}

.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
.form{padding:18px; display:grid; gap:12px}
.form label span{display:block; color:var(--muted); font-size:13px; margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

/* Fix dropdown options visibility (Contact: Interesse) */
.form select option, .form select optgroup{
  background: #0b1220;
  color: #ffffff;
}
.form-status{margin-top:6px; color:var(--muted)}
.contact-side{padding:18px}
.contact-box{margin-top:14px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05)}
.contact-box .k{font-size:12px; color:var(--muted2); margin-top:10px}
.contact-box .v{font-weight:750}

.footer{padding:36px 0; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.20)}
.footer__grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:14px}
.footer h4{margin:0 0 10px}
.footer a{color:var(--muted); display:inline-block; padding:4px 0}
.footer a:hover{color:var(--text)}
.footer__bottom{margin-top:18px; display:flex; justify-content:space-between; color:var(--muted2); font-size:13px}

.reveal{opacity:0; transform: translateY(14px); transition: .6s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .before-after{grid-template-columns:1fr}
  .demo .demo-panel{grid-template-columns:1fr}
  .demo-side{border-right:0; border-bottom:1px solid rgba(255,255,255,.10)}
  .contact-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .burger{display:block}
}
@media (max-width: 520px){
  .h1{font-size:42px}
  .cards{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}


/* Parceiros */
.partner-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;margin-top:18px}
.partner-cta__text .h3{margin:0 0 6px 0}
.partner-cta__actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width: 760px){.partner-cta{flex-direction:column;align-items:flex-start}}

.partner-card{padding:22px}
.partner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width: 980px){.partner-grid{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:13px;color:rgba(255,255,255,.86)}
.field input{border-radius:14px;border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);color:#fff;padding:12px 12px;outline:none}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:12px;color:rgba(255,255,255,.6);text-align:left;font-weight:700;padding:0 10px}
.table td{background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:10px;border-left:0;border-right:0}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.1);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.1);border-top-right-radius:14px;border-bottom-right-radius:14px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background: rgba(255,255,255,.06);font-size:12px}


body::before{content:'';position:fixed;inset:-40%;background:conic-gradient(from 180deg at 50% 50%, rgba(124,58,237,.22), rgba(255,42,163,.22), rgba(56,189,248,.18), rgba(45,212,191,.18), rgba(124,58,237,.22));filter: blur(60px);opacity:.35;pointer-events:none;animation:bgspin 18s linear infinite;}
@keyframes bgspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}


/* Small button */
.btn--sm{padding:9px 11px; border-radius:12px; font-size:13px}

/* Demo actions (badge + expand button) */
.demo-actions{display:flex; align-items:center; gap:10px}

/* Demo fullscreen overlay */
body.no-scroll{overflow:hidden}
.demo-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center; justify-content:center;
  padding:14px;
  z-index: 1000000;
}
.demo-overlay.active{display:flex}
.demo-overlay__inner{width:100%; display:flex; justify-content:center}
.demo-overlay__inner{min-height:0}
.demo-overlay .demo-panel{
  display:grid;
  grid-template-columns: 340px 1fr;
  overflow:hidden;
  min-height:0;
  width:min(1180px, calc(100vw - 28px));
  height:min(820px, calc(100vh - 28px));
}
.demo-overlay .demo-chat{height:100%; min-height:0}

@media (max-width: 820px){
  .demo-overlay .demo-panel{grid-template-columns: 1fr; height: calc(100vh - 28px)}
  .demo-overlay .demo-side{display:none}
}


/* Destaque "Janela ampla" */
.btn--attention{
  position: relative;
  padding-right: 28px;
}
.btn--attention::after{
  content:" ⤢";
  opacity:.85;
}
.btn--attention::before{
  content:"";
  position:absolute;
  right:10px;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(255, 191, 0, .95);
  box-shadow: 0 0 0 0 rgba(255, 191, 0, .45);
  animation: demoPing 1.6s infinite;
}
@keyframes demoPing{
  0%{ box-shadow: 0 0 0 0 rgba(255,191,0,.55); transform: scale(1); opacity: .95;}
  70%{ box-shadow: 0 0 0 12px rgba(255,191,0,0); transform: scale(1); opacity: .9;}
  100%{ box-shadow: 0 0 0 0 rgba(255,191,0,0); transform: scale(1); opacity: .95;}
}


/* Demo quick separator */
.demo-quick__sep{
  margin: 10px 0 6px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}


/* FAQs -> ask Avi */
.faq-avi{
  padding: 18px;
}
.faq-avi__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px){
  .faq-avi__grid{ grid-template-columns: 1fr 1fr; }
}
.faqbtn{
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.faqbtn:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(600px 120px at 10% 20%, rgba(77,163,255,.18), transparent 60%),
              radial-gradient(600px 120px at 80% 60%, rgba(180,85,255,.18), transparent 60%);
  opacity:.0;
  transition: opacity .18s ease;
}
.faqbtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.38);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
}
.faqbtn:hover:before{ opacity:1; }
.faqbtn > *{ position: relative; }
.faq-avi__actions{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: center;
  margin-top: 14px;
}
.faq-avi__note{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.70);
}


/* Floating Avi widget (bottom-right) */
.avi-widget{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(135deg, rgba(77,163,255,.95), rgba(180,85,255,.95));
  box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 0 8px rgba(77,163,255,.12);
  display: grid;
  place-items: center;
  z-index: 9999;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.avi-widget:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 24px 70px rgba(0,0,0,.50), 0 0 0 10px rgba(180,85,255,.14);
}
.avi-widget img{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.avi-widget__pulse{
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.40);
  opacity: .0;
  animation: aviPulse 2.2s ease-out infinite;
}
@keyframes aviPulse{
  0%{ transform: scale(.82); opacity: .0; }
  15%{ opacity: .55; }
  100%{ transform: scale(1.12); opacity: 0; }
}
@media (max-width: 700px){
  .avi-widget{ right: 14px; bottom: 14px; width: 62px; height: 62px; }
  .avi-widget img{ width: 50px; height: 50px; }
}


/* --- Contact modal feedback --- */
.avi-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.avi-modal.is-open{ display:block; }
.avi-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.avi-modal__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px));
  background:rgba(20,24,40,.88);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:22px 22px 18px;
  color:#fff;
}
.avi-modal__close{
  position:absolute; right:14px; top:10px;
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff; font-size:20px; line-height:30px;
  cursor:pointer;
}
.avi-modal__icon{
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin:4px auto 10px;
  background:rgba(120,255,196,.14);
  border:1px solid rgba(120,255,196,.26);
  font-weight:800; font-size:28px;
}
.avi-modal__icon.is-error{
  background:rgba(255,120,120,.14);
  border:1px solid rgba(255,120,120,.26);
}
.avi-modal__title{ text-align:center; margin:0 0 8px; font-size:20px; }
.avi-modal__text{ text-align:center; margin:0 0 14px; opacity:.92; }
.avi-modal__actions{ display:flex; justify-content:center; }

/* Hero video demo (apenas no topo do site demo) */
.hero__video{
  padding:14px;
  border-radius:22px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
  margin-top: 56px; /* mantém alinhamento com o layout existente */
  overflow:hidden;
}
.hero-video__inner{
  border-radius: 16px;
  overflow:hidden;
}
.hero__video video{
  display:block;
  width:100%;
  height:auto;
  max-height: 320px;
  object-fit: cover;
}


/* =========================
   v30 Futuristic Enhancements
   (visual only, no logic)
   ========================= */

/* Animated aurora background + subtle noise */
body{
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(59,130,246,.18), transparent 55%),
    radial-gradient(900px 700px at 70% 95%, rgba(236,72,153,.12), transparent 55%),
    radial-gradient(1200px 800px at 20% 80%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #070b16 0%, #0b1020 55%, #060914 100%);
  background-attachment: fixed;
}

/* Subtle animated blobs already exist via .bg-blobs — upgrade them */
.bg-blobs{
  position:absolute; inset:-30px;
  filter: blur(46px) saturate(1.2);
  opacity:.95;
  pointer-events:none;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(168,85,247,.28), transparent 60%),
    radial-gradient(520px 420px at 70% 30%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(560px 460px at 55% 85%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(520px 420px at 90% 80%, rgba(34,211,238,.14), transparent 60%);
  animation: blobsMove 14s ease-in-out infinite alternate;
}
@keyframes blobsMove{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-12px,10px,0) scale(1.02); }
  100%{ transform: translate3d(14px,-10px,0) scale(1.03); }
}

/* Hero spotlight follows cursor (JS sets --mx/--my) */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background: radial-gradient(520px 420px at var(--mx,50%) var(--my,35%),
    rgba(255,255,255,.10), transparent 60%);
  mix-blend-mode: overlay;
  opacity:.65;
  transition: opacity .25s ease;
}
.hero:hover::before{ opacity:.85; }

/* Premium glass depth */
.glass{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}
.glass:hover{
  border-color: rgba(255,255,255,.26);
}

/* Buttons: glow + lift + animated gradient */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}
.btn--primary{
  position: relative;
  box-shadow: 0 18px 45px rgba(88, 101, 242, .22);
}
.btn--primary::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(168,85,247,.0), rgba(168,85,247,.35), rgba(59,130,246,.30), rgba(236,72,153,.28), rgba(168,85,247,.0));
  filter: blur(12px);
  opacity:.0;
  transition: opacity .18s ease;
  z-index:-1;
}
.btn--primary:hover{ transform: translateY(-2px) scale(1.02); filter: brightness(1.06); box-shadow: 0 22px 60px rgba(0,0,0,.55); }
.btn--primary:hover::after{ opacity:1; }

.btn--ghost:hover{ transform: translateY(-2px); box-shadow: 0 18px 45px rgba(0,0,0,.35); }

/* Cards: hover depth */
.trust__item, .card, .pricing__card, .faq__item{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.trust__item:hover, .card:hover, .pricing__card:hover, .faq__item:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.26);
}

/* Hero preview/video: float + glossy border */
.hero__video, .hero__mini{
  position: relative;
  animation: floaty 6.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes floaty{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-7px); }
  100%{ transform: translateY(0px); }
}
.hero__video::before, .hero__mini::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(168,85,247,.35), rgba(59,130,246,.22), rgba(236,72,153,.18));
  opacity:.35;
  filter: blur(18px);
}

/* Reveal: smoother + more cinematic */
.reveal{
  opacity: 0;
  transform: translateY(14px) scale(.995);
  filter: blur(3px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Optional: slightly nicer scrollbar (webkit) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(168,85,247,.35), rgba(59,130,246,.30));
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }

.price-card.popular .btn--primary{box-shadow: 0 14px 30px rgba(124,58,237,.25);}


/* AVI Platform */
.avis-section{padding-top:34px; position:relative}
.avis-section::before{content:""; position:absolute; inset:20px 0 auto; height:320px; background:radial-gradient(circle at 20% 30%, rgba(34,211,238,.24), transparent 42%), radial-gradient(circle at 82% 30%, rgba(168,85,247,.26), transparent 44%), radial-gradient(circle at 50% 10%, rgba(255,184,107,.14), transparent 38%); pointer-events:none}
.avi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.avi-card,.demo-panel{--avi-accent:var(--g1); --avi-accent2:var(--g3)}
.avi-card[data-avi="school"], .demo-panel[data-avi="school"]{--avi-accent:#60a5fa; --avi-accent2:#22d3ee}
.avi-card[data-avi="municipal"], .demo-panel[data-avi="municipal"]{--avi-accent:#2dd4bf; --avi-accent2:#60a5fa}
.avi-card[data-avi="hotel"], .demo-panel[data-avi="hotel"]{--avi-accent:#f59e0b; --avi-accent2:#f472b6}
.avi-card[data-avi="realestate"], .demo-panel[data-avi="realestate"]{--avi-accent:#a855f7; --avi-accent2:#60a5fa}
.avi-card[data-avi="business"], .demo-panel[data-avi="business"]{--avi-accent:#3b82f6; --avi-accent2:#8b5cf6}
.avi-card[data-avi="association"], .demo-panel[data-avi="association"]{--avi-accent:#ec4899; --avi-accent2:#22d3ee}
.avi-card{padding:22px;border-radius:24px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, filter .24s ease; background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10)); overflow:hidden; backdrop-filter: blur(14px)}
.avi-card::before{content:""; position:absolute; inset:-1px; background:linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 34%, transparent), transparent 38%, color-mix(in srgb, var(--avi-accent2) 28%, transparent)); opacity:.95; pointer-events:none}
.avi-card::after{content:""; position:absolute; width:240px; height:240px; right:-82px; top:-82px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--avi-accent) 34%, transparent), transparent 68%); pointer-events:none}
.avi-card.active,.avi-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 78px rgba(12,16,32,.30),0 0 0 1px rgba(255,255,255,.15),0 0 72px color-mix(in srgb, var(--avi-accent) 34%, transparent); filter:brightness(1.06)}
.avi-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.avi-card__tag,.avi-card__priority{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.10);color:rgba(255,255,255,.90);box-shadow:0 10px 26px rgba(12,16,32,.12)}
.avi-card__priority{background:linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 24%, rgba(255,255,255,.16)), color-mix(in srgb, var(--avi-accent2) 18%, rgba(255,255,255,.10))); color:#fff}
.avi-card__priority--soft{background:color-mix(in srgb, var(--avi-accent2) 15%, rgba(255,255,255,.04))}
.avi-card__name{margin:0;font-size:25px; position:relative; z-index:1}
.avi-card__desc{margin:0;color:rgba(255,255,255,.82);min-height:48px; position:relative; z-index:1}
.avi-card__points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px; position:relative; z-index:1}
.avi-card__points li{position:relative;padding-left:18px;color:rgba(255,255,255,.96);opacity:.98;line-height:1.45}
.avi-card__points li:before{content:"•";position:absolute;left:0;top:0;color:color-mix(in srgb, var(--avi-accent) 70%, white);font-weight:900}
.avi-card__actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap; position:relative; z-index:1}
.demo-current{padding:16px;border-radius:20px;margin-bottom:14px;background:linear-gradient(135deg, color-mix(in srgb, var(--avi-accent, var(--g1)) 16%, rgba(255,255,255,.07)), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.10); box-shadow:0 14px 30px rgba(0,0,0,.18)}
.demo-current__label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.demo-current__name{font-size:22px;font-weight:900;margin-bottom:6px}
.demo-current__desc{color:var(--muted2);line-height:1.45}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.how-step{padding:22px;border-radius:24px;position:relative;overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); box-shadow:0 18px 48px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.05)}
.how-step__num{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:14px;background:linear-gradient(135deg,var(--g1),var(--g3));box-shadow:var(--glow)}
.sector-cards{grid-template-columns:repeat(3,1fr)}
@media (max-width: 1024px){
  .avi-grid{grid-template-columns:repeat(2,1fr)}
  .how-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  .avi-grid,.how-grid,.sector-cards{grid-template-columns:1fr}
  .avi-card__desc{min-height:auto}
}


/* v32 Lighter premium refresh */
:root{
  --bg: #18244d;
  --panel: rgba(255,255,255,.24);
  --panel2: rgba(255,255,255,.16);
  --stroke: rgba(255,255,255,.30);
  --shadow: 0 24px 70px rgba(25,34,74,.22);
}
body{
  background:
    radial-gradient(1200px 760px at 8% 8%, rgba(136,188,255,.60), transparent 58%),
    radial-gradient(980px 720px at 88% 10%, rgba(204,132,255,.45), transparent 60%),
    radial-gradient(920px 680px at 80% 88%, rgba(255,196,128,.30), transparent 58%),
    radial-gradient(760px 560px at 22% 78%, rgba(101,240,229,.24), transparent 56%),
    linear-gradient(180deg, #223165 0%, #1a2856 45%, #162247 100%) !important;
}
body::before{
  background:radial-gradient(circle, rgba(104,211,255,.26) 0%, rgba(104,211,255,0) 68%);
}
body::after{
  background:radial-gradient(circle, rgba(191,127,255,.22) 0%, rgba(191,127,255,0) 68%);
}
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.13));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 20px 54px rgba(25,34,74,.18);
}
.topbar{
  background:linear-gradient(180deg, rgba(42,58,112,.80), rgba(34,48,96,.62));
  border-color: rgba(255,255,255,.18);
  box-shadow:0 18px 55px rgba(20,28,60,.16), 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(104,211,255,.10);
}
.bg-blobs{
  opacity:1;
  filter: blur(42px) saturate(1.18);
}
.pill{
  color:rgba(255,255,255,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
}
.sub{color:rgba(255,255,255,.88);}
.lead{color:rgba(255,255,255,.80);}
.btn--ghost{
  background: rgba(255,255,255,.09);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.14);
}
.trust__item{
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.18);
}
.avis-section::before{
  background:radial-gradient(circle at 20% 30%, rgba(68,220,255,.30), transparent 42%), radial-gradient(circle at 82% 30%, rgba(188,111,255,.30), transparent 44%), radial-gradient(circle at 50% 10%, rgba(255,196,128,.18), transparent 38%);
}
.avi-card{
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(24,34,72,.16);
}
.demo .demo-panel{
  background:linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.11));
  border-color: rgba(255,255,255,.18);
  box-shadow:0 28px 70px rgba(24,34,72,.18), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px rgba(104,211,255,.10);
}
.demo-side{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}
.qbtn, .demo-current, .how-step, .card, .pricing__card, .faq__item, .contact__card, .site-footer{
  border-color: rgba(255,255,255,.18);
}
.msg{
  background: rgba(255,255,255,.10);
}
.site-footer{
  background: rgba(28,40,82,.36);
}


/* === Light + brighter refinement (2026-03-14 b) === */
body{
  background:
    radial-gradient(1200px 760px at 8% 8%, rgba(121, 181, 255, .78), transparent 58%),
    radial-gradient(1060px 760px at 88% 10%, rgba(194, 124, 255, .58), transparent 60%),
    radial-gradient(980px 700px at 84% 84%, rgba(255, 187, 117, .42), transparent 58%),
    radial-gradient(820px 620px at 20% 76%, rgba(70, 224, 206, .34), transparent 56%),
    linear-gradient(180deg, #284aa1 0%, #213d87 36%, #1a3169 68%, #17295a 100%);
}
body::before{
  width:40vw; height:40vw;
  top:4vh; right:-8vw;
  background:radial-gradient(circle, rgba(86, 220, 255, .30) 0%, rgba(86, 220, 255, 0) 70%);
}
body::after{
  width:44vw; height:44vw;
  bottom:-10vh; left:-10vw;
  background:radial-gradient(circle, rgba(201, 126, 255, .24) 0%, rgba(201, 126, 255, 0) 72%);
}

.topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.09));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 22px 56px rgba(10,18,38,.20), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px rgba(110,181,255,.10);
}
.pill,
.lang select,
.hero__mini,
.trust__item,
.card,
.how-step,
.price-card,
.faq__item,
.contact__card,
.site-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border-color: rgba(255,255,255,.20);
}
.sub{color:rgba(255,255,255,.88)}
.lead{color:rgba(255,255,255,.78)}
.section::before{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(255,255,255,.04) 100%);
}

.trust__item{
  box-shadow: 0 16px 42px rgba(13, 21, 48, .16), 0 0 0 1px rgba(255,255,255,.05), 0 0 36px rgba(124, 168, 255, .10);
}
.trust__item:nth-child(1)::after{background: radial-gradient(circle at 30% 30%, rgba(79, 154, 255, .38), transparent 62%)}
.trust__item:nth-child(2)::after{background: radial-gradient(circle at 30% 30%, rgba(97, 225, 214, .35), transparent 62%)}
.trust__item:nth-child(3)::after{background: radial-gradient(circle at 30% 30%, rgba(221, 116, 255, .34), transparent 62%)}

.avi-card,.demo-panel{
  transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease, filter .30s ease, background .35s ease;
}
.avi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 24px 70px rgba(11,20,44,.18), 0 0 0 1px rgba(255,255,255,.06), 0 0 54px rgba(131,189,255,.10);
}
.avi-card::before{
  inset:0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 30%, rgba(255,255,255,.10)), transparent 42%, color-mix(in srgb, var(--avi-accent2) 24%, rgba(255,255,255,.06))),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 28%);
}
.avi-card::after{
  width:280px; height:280px;
  right:-86px; top:-90px;
  background:radial-gradient(circle, color-mix(in srgb, var(--avi-accent) 42%, rgba(255,255,255,.08)), transparent 68%);
  opacity:.95;
}
.avi-card .btn--primary{
  box-shadow: 0 14px 34px color-mix(in srgb, var(--avi-accent) 20%, transparent);
}
.avi-card.active,
.avi-card:hover{
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 28px 86px rgba(11,20,44,.24), 0 0 0 1px rgba(255,255,255,.18), 0 0 90px color-mix(in srgb, var(--avi-accent) 30%, transparent);
  filter: brightness(1.09) saturate(1.06);
}
.avi-card.active .avi-card__name,
.avi-card:hover .avi-card__name{
  text-shadow: 0 8px 24px color-mix(in srgb, var(--avi-accent) 18%, transparent);
}
.avi-card__tag,
.avi-card__priority{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.avi-card[data-avi="school"]{
  background: linear-gradient(145deg, rgba(120,190,255,.24), rgba(255,255,255,.11) 42%, rgba(90,235,255,.11));
}
.avi-card[data-avi="municipal"]{
  background: linear-gradient(145deg, rgba(72,221,199,.24), rgba(255,255,255,.11) 42%, rgba(107,180,255,.10));
}
.avi-card[data-avi="hotel"]{
  background: linear-gradient(145deg, rgba(255,191,95,.24), rgba(255,255,255,.11) 42%, rgba(244,114,182,.10));
}
.avi-card[data-avi="realestate"]{
  background: linear-gradient(145deg, rgba(180,126,255,.24), rgba(255,255,255,.11) 42%, rgba(96,165,250,.10));
}
.avi-card[data-avi="business"]{
  background: linear-gradient(145deg, rgba(92,153,255,.24), rgba(255,255,255,.11) 42%, rgba(168,85,247,.10));
}
.avi-card[data-avi="association"]{
  background: linear-gradient(145deg, rgba(246,120,187,.22), rgba(255,255,255,.11) 42%, rgba(34,211,238,.10));
}

.demo .demo-panel{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(45,70,140,.84), rgba(76,52,134,.78));
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 30px 88px rgba(10,18,38,.22), 0 0 0 1px rgba(255,255,255,.07), 0 0 110px color-mix(in srgb, var(--avi-accent, var(--g1)) 18%, transparent);
}
.demo .demo-panel::before{
  background:
    radial-gradient(circle at 14% 14%, color-mix(in srgb, var(--avi-accent, var(--g1)) 28%, rgba(255,255,255,.05)), transparent 38%),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--avi-accent2, var(--g3)) 24%, rgba(255,255,255,.04)), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,.10), transparent 28%);
}
.demo-side,
.demo-chat__top,
.demo-chat__msgs,
.demo-chat__composer,
.demo-current,
.qbtn,
.msg,
.demo-badge,
.agent__avatar{
  transition: background .30s ease, box-shadow .30s ease, border-color .30s ease, filter .30s ease, transform .30s ease;
}
.demo-side{
  background: linear-gradient(180deg, color-mix(in srgb, var(--avi-accent) 12%, rgba(255,255,255,.14)), rgba(255,255,255,.05));
}
.demo-current{
  background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent, var(--g1)) 22%, rgba(255,255,255,.10)), color-mix(in srgb, var(--avi-accent2, var(--g3)) 15%, rgba(255,255,255,.06)));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--avi-accent) 14%, transparent);
}
.demo-chat__top{
  background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 14%, rgba(255,255,255,.10)), color-mix(in srgb, var(--avi-accent2) 10%, rgba(255,255,255,.04)));
}
.demo-chat__msgs{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--avi-accent2) 10%, transparent), transparent 28%);
}
.demo-chat__composer{
  background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 12%, rgba(255,255,255,.08)), rgba(10,16,34,.12));
}
.demo-chat__composer input{
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
.qbtn{
  background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 12%, rgba(255,255,255,.08)), rgba(255,255,255,.05));
}
.qbtn:hover{
  background: linear-gradient(135deg, color-mix(in srgb, var(--avi-accent) 22%, rgba(255,255,255,.10)), color-mix(in srgb, var(--avi-accent2) 12%, rgba(255,255,255,.06)));
}
.msg{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}
.msg.bot{
  border-color: color-mix(in srgb, var(--avi-accent) 18%, rgba(255,255,255,.14));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--avi-accent) 10%, transparent);
}
.msg.me{
  border-color: color-mix(in srgb, var(--avi-accent) 24%, rgba(255,255,255,.16));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--avi-accent2) 12%, transparent);
}
.agent__avatar{
  box-shadow: 0 16px 38px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.16), 0 0 38px color-mix(in srgb, var(--avi-accent) 34%, transparent);
}
.demo-badge{
  border-color: color-mix(in srgb, var(--avi-accent) 24%, rgba(255,255,255,.12));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--avi-accent) 14%, transparent);
}

.demo .demo-panel[data-avi="school"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(42,94,192,.86), rgba(39,132,212,.78));
}
.demo .demo-panel[data-avi="municipal"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(17,118,138,.84), rgba(45,123,181,.78));
}
.demo .demo-panel[data-avi="hotel"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(161,98,18,.84), rgba(168,85,247,.54) 100%);
}
.demo .demo-panel[data-avi="realestate"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(109,40,217,.84), rgba(59,130,246,.72));
}
.demo .demo-panel[data-avi="business"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(37,99,235,.84), rgba(91,33,182,.70));
}
.demo .demo-panel[data-avi="association"]{
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(219,39,119,.74), rgba(14,165,233,.70));
}

@media (min-width: 980px){
  .hero__grid{gap:32px}
}
@media (max-width: 768px){
  body{
    background:
      radial-gradient(900px 620px at 10% 6%, rgba(121,181,255,.54), transparent 56%),
      radial-gradient(820px 620px at 88% 12%, rgba(194,124,255,.40), transparent 58%),
      linear-gradient(180deg, #284aa1 0%, #203a80 46%, #162a5c 100%);
  }
}