/* ============================================================
   UMTS Labs — "Liquid Intelligence" redesign
   Design tokens + base + components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&display=swap');

:root{
  /* surface */
  --bg:           #0E0805;
  --bg-2:         #170D08;
  --bg-3:         #1F120C;
  --ink:          #FFFFFF;
  --muted:        #C9B7AC;
  --muted-2:      #8C7A70;
  --line:         rgba(255,255,255,0.10);
  --line-2:       rgba(255,255,255,0.06);
  --glass:        rgba(255,255,255,0.045);
  --glass-2:      rgba(255,255,255,0.07);

  /* splash palette (from logo) */
  --orange:  #FF6A13;
  --amber:   #FFB300;
  --magenta: #FF1F8E;
  --pink:    #FF4D6D;
  --lime:    #A8E81C;
  --green:   #36D672;
  --blue:    #2E7DF6;
  --cyan:    #36BFFA;
  --violet:  #A855F7;

  /* signature gradients */
  --grad-splash: linear-gradient(100deg,#FF6A13 0%,#FF1F8E 38%,#A855F7 70%,#2E7DF6 100%);
  --grad-warm:   linear-gradient(100deg,#FFB300 0%,#FF6A13 50%,#FF1F8E 100%);
  --grad-cool:   linear-gradient(120deg,#A8E81C 0%,#36BFFA 55%,#A855F7 100%);

  --maxw: 1240px;
  --radius: 22px;
  --radius-lg: 30px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* tweakable */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --sec-pad: 120px;
}

/* ---- tweak: background themes ---- */
:root[data-bg="midnight"]{ --bg:#06070E; --bg-2:#0A0C16; --bg-3:#12152400; }
:root[data-bg="midnight"] .bg-field::before{
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(46,125,246,.20), transparent 60%),
    radial-gradient(55% 45% at 10% 12%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(54,191,250,.12), transparent 60%),
    linear-gradient(180deg,#06070E 0%, #0A0C16 45%, #06070E 100%);
}
:root[data-bg="plum"]{ --bg:#0C0612; --bg-2:#140A1F; --bg-3:#1C0E2B; }
:root[data-bg="plum"] .bg-field::before{
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(255,31,142,.18), transparent 60%),
    radial-gradient(55% 45% at 10% 12%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(124,47,224,.16), transparent 60%),
    linear-gradient(180deg,#0C0612 0%, #140A1F 45%, #0C0612 100%);
}

/* ---- tweak: accent remap ---- */
:root[data-accent="cool"]{ --grad-warm: linear-gradient(120deg,#A8E81C 0%,#36BFFA 55%,#A855F7 100%); }
:root[data-accent="cool"] .price-pill{ background:rgba(54,191,250,.12); color:var(--cyan); border-color:rgba(54,191,250,.28); }
:root[data-accent="violet"]{ --grad-warm: linear-gradient(110deg,#FF1F8E 0%,#A855F7 52%,#2E7DF6 100%); }
:root[data-accent="violet"] .price-pill{ background:rgba(168,85,247,.14); color:#C77DFF; border-color:rgba(168,85,247,.3); }

/* ---- tweak: particles off ---- */
:root[data-particles="off"] .neural{ display:none !important; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.lock{ overflow:hidden; }

/* ambient warm background field that scrolls under everything */
.bg-field{ position:fixed; inset:0; z-index:-2; pointer-events:none; }
.bg-field::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 78% 0%, rgba(255,106,19,.16), transparent 60%),
    radial-gradient(55% 45% at 10% 12%, rgba(168,85,247,.13), transparent 60%),
    radial-gradient(70% 60% at 50% 110%, rgba(46,125,246,.12), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ position:relative; padding:var(--sec-pad) 0; }
.section-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}
.section-tag::before{
  content:''; width:26px; height:2px; border-radius:2px; background:var(--grad-warm);
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.02em; }
h2.title{ font-size:clamp(34px,4.6vw,60px); margin-bottom:20px; text-wrap:balance; }
.lead{ font-size:clamp(16px,1.3vw,19px); color:var(--muted); max-width:620px; text-wrap:pretty; }

.grad-text{ background:var(--grad-splash); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-text.warm{ background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; }
.grad-text.cool{ background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 28px; transition:all .35s var(--ease);
}
.nav.scrolled{
  background:rgba(14,8,5,.72); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-2); padding-top:12px; padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; text-decoration:none; }
.brand .mark{
  width:34px; height:34px; border-radius:10px; background:var(--grad-splash);
  box-shadow:0 6px 20px rgba(255,31,142,.35); flex:none; position:relative; overflow:hidden;
}
.brand .mark::after{
  content:''; position:absolute; inset:3px; border-radius:7px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%);
}
.brand-logo{ height:36px; width:auto; display:block; flex:none; }
.brand .name{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.01em; }
.brand .name b{ color:var(--orange); font-weight:800; }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;
  padding:9px 13px; border-radius:10px; transition:.2s;
}
.nav-links a:hover{ color:var(--ink); background:var(--glass); }

.nav-right{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  background:var(--glass); font-size:12.5px; font-weight:700;
}
.lang-toggle button{
  background:none; border:none; color:var(--muted); padding:7px 12px; cursor:pointer; transition:.2s;
}
.lang-toggle button.active{ background:var(--grad-warm); color:#1a0e08; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-warm); color:#1a0e08; box-shadow:0 10px 30px rgba(255,106,19,.32); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,106,19,.45); }
.btn-ghost{ background:var(--glass); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--glass-2); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:14px; }

.nav-burger{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:42px; height:42px; cursor:pointer; color:var(--ink); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-burger span{ width:18px; height:2px; background:currentColor; border-radius:2px; transition:.3s; }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:rgba(14,8,5,.96); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:40px;
  transform:translateY(-100%); transition:transform .4s var(--ease); opacity:0; pointer-events:none;
}
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ color:var(--ink); text-decoration:none; font-family:var(--font-display); font-size:28px; font-weight:700; padding:8px 0; }

/* ---------- hero ---------- */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:120px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; width:100%; }
.pill{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--muted);
}
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(.7);} }

.hero h1{ font-size:clamp(42px,6vw,82px); margin:24px 0 22px; font-weight:800; }
.hero .lead{ font-size:clamp(17px,1.4vw,21px); max-width:540px; }
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:38px; margin-top:46px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3vw,42px); line-height:1; }
.stat .lbl{ font-size:13px; color:var(--muted); margin-top:6px; font-weight:600; }

/* hero visual */
.hero-visual{ position:relative; height:540px; display:flex; align-items:center; justify-content:center; }
.hero-logo{ width:min(118%,640px); filter:drop-shadow(0 30px 80px rgba(255,31,142,.3)); animation:floaty 8s ease-in-out infinite; position:relative; z-index:3;
  -webkit-mask-image:radial-gradient(ellipse 80% 64% at 50% 55%, #000 52%, rgba(0,0,0,.45) 72%, transparent 85%);
  mask-image:radial-gradient(ellipse 80% 64% at 50% 55%, #000 52%, rgba(0,0,0,.45) 72%, transparent 85%);
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-18px) rotate(-1deg);} }

.orb{ position:absolute; border-radius:50%; filter:blur(2px); z-index:2; box-shadow:inset -8px -8px 24px rgba(0,0,0,.25); }
.orb::after{ content:''; position:absolute; top:14%; left:16%; width:34%; height:34%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.85), transparent 70%); }
.orb.o1{ width:66px; height:66px; background:radial-gradient(circle at 35% 30%,#FF8A3D,#FF1F8E); top:6%; right:14%; animation:floaty 6s ease-in-out infinite; }
.orb.o2{ width:42px; height:42px; background:radial-gradient(circle at 35% 30%,#5BC8FF,#2E7DF6); top:30%; right:4%; animation:floaty 7s ease-in-out infinite .6s; }
.orb.o3{ width:52px; height:52px; background:radial-gradient(circle at 35% 30%,#C77DFF,#7C2FE0); bottom:10%; left:6%; animation:floaty 9s ease-in-out infinite .3s; }
.orb.o4{ width:30px; height:30px; background:radial-gradient(circle at 35% 30%,#C6F86B,#7FB800); bottom:24%; right:18%; animation:floaty 5.5s ease-in-out infinite .9s; }

.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted-2); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.scroll-cue .mouse{ width:22px; height:34px; border:2px solid var(--line); border-radius:12px; position:relative; }
.scroll-cue .mouse::after{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:7px; background:var(--orange); border-radius:2px; animation:scrolldot 1.6s infinite; }
@keyframes scrolldot{ 0%{ opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{ opacity:0; transform:translate(-50%,12px);} }

/* ---------- hero variants (tweakable) ---------- */
.hv{ display:none; width:100%; position:relative; }
.hero[data-hero="v1"] .hv-1,
.hero[data-hero="v2"] .hv-2,
.hero[data-hero="v3"] .hv-3{ display:flex; align-items:center; min-height:100vh; }
.hv canvas.neural{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }

/* V2 — Centered Spotlight */
.hv-2{ flex-direction:column; justify-content:center; text-align:center; padding-top:120px; }
.hero-center{ position:relative; z-index:2; max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.halo-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  width:min(150%,860px); z-index:0; pointer-events:none; opacity:.62; filter:blur(1px) saturate(1.1);
  -webkit-mask-image:radial-gradient(ellipse 62% 56% at 50% 50%, #000 38%, transparent 70%);
  mask-image:radial-gradient(ellipse 62% 56% at 50% 50%, #000 38%, transparent 70%);
  animation:floaty 9s ease-in-out infinite;
}
.hero-center h1{ font-size:clamp(44px,7vw,92px); margin:22px 0; }
.hero-center .lead{ margin:0 auto; }
.hero-center .hero-cta{ justify-content:center; }
.hero-center .hero-stats{ justify-content:center; }

/* V3 — Bold Typographic */
.hv-3{ padding-top:140px; }
.hero-bold{ position:relative; z-index:2; width:100%; display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:center; }
.hero-bold h1{ font-size:clamp(52px,9.2vw,150px); line-height:.92; margin:18px 0 10px; letter-spacing:-.03em; font-weight:800; }
.hero-bold h1 .ln{ display:block; }
.hero-bold .lead{ max-width:520px; }
.hero-bold .hero-cta{ margin-top:30px; }
.hero-bold-visual{ position:relative; height:440px; display:flex; align-items:center; justify-content:center; }
.hero-bold-visual .hero-logo{ width:min(130%,520px); }
.hero-bold-strip{
  position:absolute; left:0; right:0; bottom:46px; z-index:2;
  display:flex; gap:54px; padding:24px 0; border-top:1px solid var(--line-2); margin-top:40px;
}
.hero-bold-wrap{ position:relative; }

@media (max-width:1000px){
  .hero-bold{ grid-template-columns:1fr; }
  .hero-bold-visual{ order:-1; height:300px; }
  .hero-bold-strip{ position:static; flex-wrap:wrap; gap:28px; }
}

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.feature-list{ display:grid; gap:18px; }
.feature{
  display:flex; gap:18px; padding:22px; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--line-2); transition:.3s var(--ease);
}
.feature:hover{ background:var(--glass-2); transform:translateX(6px); border-color:var(--line); }
.feature .ico{ width:50px; height:50px; flex:none; border-radius:14px; display:grid; place-items:center; }
.feature h4{ font-size:18px; margin-bottom:5px; }
.feature p{ color:var(--muted); font-size:14.5px; }

/* ---------- solutions grid ---------- */
.sol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sol-card{
  position:relative; padding:28px; border-radius:var(--radius); background:var(--glass);
  border:1px solid var(--line-2); text-decoration:none; color:var(--ink); overflow:hidden;
  transition:.35s var(--ease); display:flex; flex-direction:column; min-height:220px;
}
.sol-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:.35s; z-index:0;
  background:radial-gradient(120% 90% at 100% 0%, var(--c1,#FF6A13)22, transparent 60%);
}
.sol-card:hover{ transform:translateY(-6px); border-color:var(--line); }
.sol-card:hover::before{ opacity:.5; }
.sol-card > *{ position:relative; z-index:1; }
.sol-card .ico{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px; }
.sol-card h4{ font-size:21px; margin-bottom:8px; }
.sol-card p{ color:var(--muted); font-size:14px; flex:1; }
.sol-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.tag{ font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); border:1px solid var(--line-2); }
.sol-card .go{ position:absolute; top:26px; right:26px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:.3s; }
.sol-card:hover .go{ background:var(--grad-warm); color:#1a0e08; border-color:transparent; transform:rotate(-45deg); }

/* ---------- product section ---------- */
.product{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.product.rev .prod-copy{ order:2; }
.price-pill{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 20px; padding:8px 16px; border-radius:999px; font-weight:700; font-size:14px; background:rgba(255,179,0,.12); color:var(--amber); border:1px solid rgba(255,179,0,.25); white-space:nowrap; }
.checks{ display:grid; gap:13px; margin:26px 0 30px; }
.checks li{ list-style:none; display:flex; gap:13px; align-items:flex-start; color:var(--muted); font-size:15px; }
.checks .ck{ width:22px; height:22px; flex:none; border-radius:7px; background:var(--grad-warm); display:grid; place-items:center; margin-top:1px; position:relative; }
.checks .ck::after{ content:''; width:11px; height:7px; border-left:2.4px solid #1a0e08; border-bottom:2.4px solid #1a0e08; transform:translateY(-1px) rotate(-45deg); }

.ideal{ margin-top:34px; }
.ideal h4{ font-size:15px; color:var(--muted); margin-bottom:14px; font-family:'Manrope'; font-weight:700; }
.ideal-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.ideal-tags span{ padding:9px 16px; border-radius:12px; background:var(--glass); border:1px solid var(--line-2); font-size:14px; font-weight:600; transition:.25s; }
.ideal-tags span:hover{ background:var(--grad-warm); color:#1a0e08; border-color:transparent; transform:translateY(-2px); }

/* mock shell */
.mock{
  position:relative; border-radius:var(--radius-lg); padding:24px;
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:0 40px 100px rgba(0,0,0,.5);
  backdrop-filter:blur(6px);
}
.mock-glow{ position:absolute; inset:-1px; border-radius:var(--radius-lg); padding:1px; background:var(--grad-splash); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.4; pointer-events:none; }

/* whatsapp chat */
.chat-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line-2); margin-bottom:18px; }
.chat-head .av{ width:42px; height:42px; border-radius:50%; background:var(--grad-splash); display:grid; place-items:center; font-weight:800; color:#fff; font-size:15px; }
.chat-head .meta b{ display:block; font-size:15px; }
.chat-head .meta span{ font-size:12px; color:var(--green); display:flex; align-items:center; gap:5px; }
.chat-head .meta span::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); }
.chat-body{ display:flex; flex-direction:column; gap:11px; min-height:340px; }
.bubble{ max-width:78%; padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.45; opacity:0; transform:translateY(12px); }
.bubble.in{ align-self:flex-start; background:var(--glass-2); border-bottom-left-radius:5px; }
.bubble.out{ align-self:flex-end; background:linear-gradient(120deg,#1f8f4d,#36D672); color:#04240f; border-bottom-right-radius:5px; font-weight:600; }
.bubble .time{ display:block; font-size:10px; opacity:.6; margin-top:4px; }
.bubble.show{ animation:bubbleIn .5s var(--ease) forwards; }
@keyframes bubbleIn{ to{ opacity:1; transform:translateY(0);} }
.chip-row{ display:flex; gap:7px; flex-wrap:wrap; margin-top:4px; }
.chip-row span{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; background:rgba(54,214,114,.15); color:var(--green); border:1px solid rgba(54,214,114,.3); white-space:nowrap; }
.typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 16px; background:var(--glass-2); border-radius:16px; border-bottom-left-radius:5px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:typing 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes typing{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-4px);} }

/* voice */
.voice-mock{ text-align:center; padding:40px 24px; }
.voice-orb{ width:140px; height:140px; border-radius:50%; margin:0 auto 26px; background:var(--grad-cool); position:relative; display:grid; place-items:center; box-shadow:0 0 60px rgba(54,191,250,.4); }
.voice-orb::before,.voice-orb::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--cyan); animation:ring 2.4s ease-out infinite; }
.voice-orb::after{ animation-delay:1.2s; }
@keyframes ring{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.8); opacity:0;} }
.voice-orb svg{ width:54px; height:54px; color:#04240f; z-index:1; }
.wave{ display:flex; align-items:center; justify-content:center; gap:4px; height:48px; margin:18px 0; }
.wave i{ width:4px; border-radius:3px; background:var(--grad-cool); animation:wave 1s ease-in-out infinite; }
@keyframes wave{ 0%,100%{ height:8px;} 50%{ height:42px;} }
.voice-line{ background:var(--glass); border:1px solid var(--line-2); border-radius:14px; padding:14px 18px; margin:10px 0; text-align:left; font-size:14px; }
.voice-line .who{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.voice-cmds{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.voice-cmds span{ font-size:12px; padding:7px 13px; border-radius:999px; background:rgba(54,191,250,.12); color:var(--cyan); border:1px solid rgba(54,191,250,.25); font-weight:600; }

/* phone sms */
.phone{ width:300px; margin:0 auto; border-radius:38px; background:#0b0805; border:8px solid #2a1a12; padding:18px 14px 26px; box-shadow:0 40px 90px rgba(0,0,0,.6); position:relative; }
.phone::before{ content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:90px; height:6px; border-radius:6px; background:#2a1a12; }
.sms{ background:var(--glass-2); border-radius:16px; padding:14px; margin-top:24px; font-size:13.5px; line-height:1.5; opacity:0; transform:translateY(10px); }
.sms.show{ animation:bubbleIn .5s var(--ease) forwards; }
.sms .from{ font-weight:800; font-size:13px; display:flex; justify-content:space-between; color:var(--amber); margin-bottom:7px; }
.stat-row{ display:flex; gap:10px; margin-top:18px; }
.stat-box{ flex:1; background:var(--glass); border:1px solid var(--line-2); border-radius:14px; padding:14px 10px; text-align:center; }
.stat-box .n{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:22px; }
.stat-box .l{ font-size:11px; color:var(--muted); margin-top:3px; }

/* dashboard */
.dash{ }
.dash-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dash-head b{ font-size:16px; font-family:'Bricolage Grotesque'; }
.live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--pink); padding:5px 11px; border-radius:999px; background:rgba(255,77,109,.12); border:1px solid rgba(255,77,109,.3); }
.live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--pink); animation:pulse 1.4s infinite; }
.dash-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
.dash-stats .cell{ background:var(--glass); border:1px solid var(--line-2); border-radius:14px; padding:16px; }
.dash-stats .cell .n{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:26px; }
.dash-stats .cell .l{ font-size:12px; color:var(--muted); margin-top:3px; }
.chart{ background:var(--glass); border:1px solid var(--line-2); border-radius:16px; padding:18px; }
.chart .ttl{ font-size:12px; color:var(--muted); font-weight:700; margin-bottom:14px; }
.bars{ display:flex; align-items:flex-end; gap:9px; height:120px; }
.bars .bar{ flex:1; border-radius:6px 6px 0 0; background:var(--grad-warm); height:0; transition:height 1s var(--ease); position:relative; }
.bars .bar span{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:10px; color:var(--muted); }

/* ivr flow */
.flow{ display:flex; flex-direction:column; gap:12px; }
.flow-node{ display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:16px; background:var(--glass); border:1px solid var(--line-2); position:relative; }
.flow-node .key{ width:38px; height:38px; flex:none; border-radius:11px; background:var(--grad-cool); display:grid; place-items:center; font-weight:800; color:#04240f; font-size:16px; }
.flow-node.entry .key{ background:var(--grad-warm); color:#1a0e08; }
.flow-node b{ font-size:14.5px; display:block; }
.flow-node p{ font-size:12.5px; color:var(--muted); }
.flow-node::after{ content:''; position:absolute; left:34px; bottom:-12px; width:2px; height:12px; background:var(--line); }
.flow-node:last-child::after{ display:none; }
.ivr-stats{ display:flex; gap:12px; margin-top:18px; }
.ivr-stats .s{ flex:1; text-align:center; padding:14px 8px; border-radius:14px; background:var(--glass); border:1px solid var(--line-2); }
.ivr-stats .s .n{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:22px; }
.ivr-stats .s .l{ font-size:11px; color:var(--muted); margin-top:3px; }

/* phone-ai call */
.call-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line-2); margin-bottom:16px; }
.call-head .who{ display:flex; align-items:center; gap:11px; }
.call-head .av{ width:40px; height:40px; border-radius:50%; background:var(--grad-splash); display:grid; place-items:center; }
.call-timer{ font-family:'Bricolage Grotesque'; font-weight:700; color:var(--green); font-size:15px; }
.transcript{ display:flex; flex-direction:column; gap:12px; min-height:260px; }
.t-line{ padding:11px 15px; border-radius:14px; font-size:13.5px; max-width:88%; opacity:0; transform:translateY(10px); }
.t-line.show{ animation:bubbleIn .5s var(--ease) forwards; }
.t-line.ai{ align-self:flex-start; background:linear-gradient(120deg,rgba(168,85,247,.18),rgba(46,125,246,.18)); border:1px solid rgba(168,85,247,.25); }
.t-line.cust{ align-self:flex-end; background:var(--glass-2); }
.t-line .who{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; opacity:.7; }
.call-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); }
.toggle-2{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:12px; font-weight:700; }
.toggle-2 button{ background:none; border:none; color:var(--muted); padding:8px 16px; cursor:pointer; }
.toggle-2 button.active{ background:var(--grad-cool); color:#04240f; }
.sentiment{ font-size:12px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:6px; }
.sentiment::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--green); }

/* automation flow */
.auto-canvas{ position:relative; min-height:380px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:18px; }
.auto-col{ display:flex; flex-direction:column; gap:12px; }
.auto-node{ padding:13px 14px; border-radius:13px; background:var(--glass); border:1px solid var(--line-2); font-size:13px; font-weight:600; display:flex; align-items:center; gap:9px; }
.auto-node .d{ width:9px; height:9px; border-radius:50%; flex:none; }
.auto-mid{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.auto-core{ width:96px; height:96px; border-radius:24px; background:var(--grad-splash); display:grid; place-items:center; box-shadow:0 0 50px rgba(255,31,142,.4); animation:floaty 5s ease-in-out infinite; }
.auto-core svg{ width:44px; height:44px; color:#fff; }
.auto-badge{ font-size:12px; font-weight:700; color:var(--muted); padding:6px 13px; border-radius:999px; background:var(--glass); border:1px solid var(--line-2); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; }
.contact-info{ display:grid; gap:18px; align-content:start; }
.ci-item{ display:flex; gap:15px; align-items:flex-start; padding:18px; border-radius:16px; background:var(--glass); border:1px solid var(--line-2); }
.ci-item .ico{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--grad-warm); display:grid; place-items:center; }
.ci-item h4{ font-size:13px; color:var(--muted); font-family:'Manrope'; font-weight:700; margin-bottom:3px; }
.ci-item a, .ci-item p{ color:var(--ink); font-size:15px; text-decoration:none; font-weight:600; }
.ci-item a:hover{ color:var(--orange); }

.form{ padding:32px; border-radius:var(--radius-lg); background:var(--glass); border:1px solid var(--line); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; color:var(--ink); font-family:'Manrope'; font-size:15px; transition:.25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,106,19,.15); }
.field textarea{ resize:vertical; min-height:110px; }
.field select{ appearance:none; cursor:pointer; }
.form .btn{ width:100%; margin-top:6px; }
.form-note{ font-size:13px; color:var(--green); margin-top:14px; text-align:center; display:none; }
.form-note.show{ display:block; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line-2); padding:70px 0 36px; background:var(--bg-2); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer .blurb{ color:var(--muted); font-size:14px; max-width:300px; margin:16px 0 20px; }
.footer h5{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); margin-bottom:16px; font-family:'Manrope'; font-weight:800; }
.footer ul{ list-style:none; display:grid; gap:10px; }
.footer a{ color:var(--muted); text-decoration:none; font-size:14px; transition:.2s; }
.footer a:hover{ color:var(--orange); }
.socials{ display:flex; gap:10px; }
.socials a{ width:40px; height:40px; border-radius:11px; background:var(--glass); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--muted); transition:.25s; }
.socials a:hover{ background:var(--grad-warm); color:#1a0e08; transform:translateY(-3px); }
.footer-bottom{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line-2); text-align:center; color:var(--muted-2); font-size:13px; }

/* ---------- scroll reveal ----------
   Opacity is driven by the plain class only (no transition/animation on opacity —
   some preview hosts get stuck at the start value). The entrance motion is a
   transform-only keyframe, which renders reliably. */
.reveal{ opacity:0; }
.reveal.in{ opacity:1; animation:revealSlide .6s var(--ease) both; }
@keyframes revealSlide{ from{ transform:translateY(32px);} to{ transform:none;} }
.reveal.d1{ animation-delay:.07s; } .reveal.d2{ animation-delay:.14s; } .reveal.d3{ animation-delay:.21s; } .reveal.d4{ animation-delay:.28s; } .reveal.d5{ animation-delay:.35s; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .hero-grid, .about-grid, .product, .product.rev .prod-copy, .contact-grid{ grid-template-columns:1fr; }
  .product.rev .prod-copy{ order:0; }
  .hero-visual{ height:380px; order:-1; }
  .sol-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  section{ padding:80px 0; }
  .wrap{ padding:0 20px; }
  .sol-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:24px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .nav{ padding:14px 20px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ================= ConectZone additions (2026-08) ================= */
.hero{ position:relative; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.9; filter:saturate(1.12) contrast(1.02); }
.hero-video-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,8,5,.42) 0%, rgba(14,8,5,.12) 30%, rgba(14,8,5,.55) 78%, var(--bg) 100%); }
.hero .hv{ position:relative; z-index:2; }
:root[data-particles="off"] .hero-video{ opacity:.95; }

.nav-client{ font-size:13.5px; font-weight:700; color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:999px; border:1px solid var(--line); transition:.25s var(--ease); }
.nav-client:hover{ color:var(--ink); background:var(--glass); }
@media (max-width:1100px){ .nav-client{ display:none; } }

/* ---- ConectZone portal section ---- */
.cz{ overflow:hidden; }
.cz-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.18; }
.cz-veil{ position:absolute; inset:0; z-index:1; background:radial-gradient(80% 60% at 15% 0%, rgba(255,31,142,.10), transparent 60%), radial-gradient(70% 60% at 90% 40%, rgba(46,125,246,.10), transparent 62%), var(--bg-2); }
.cz-head{ max-width:760px; margin-bottom:52px; }
.cz-head .lead{ max-width:720px; }
.cz-head .lead b{ color:var(--ink); font-weight:700; }
.cz-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:36px; align-items:start; }
.cz-portal{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:linear-gradient(180deg,#170D08,#0E0805); box-shadow:0 40px 90px -40px rgba(0,0,0,.9); }
.cz-chrome{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--line-2); }
.cz-chrome .d{ width:10px; height:10px; border-radius:50%; }
.cz-chrome .r{ background:#FF4D6D; } .cz-chrome .y{ background:#FFB300; } .cz-chrome .g{ background:#36D672; }
.cz-url{ margin-left:10px; font-family:'Space Grotesk',monospace; font-size:12.5px; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line-2); padding:5px 12px; border-radius:999px; }
.cz-body{ display:grid; grid-template-columns:216px 1fr; min-height:430px; }
.cz-side{ border-right:1px solid var(--line-2); padding:16px 12px; background:rgba(255,255,255,.02); }
.cz-brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 14px; border-bottom:1px solid var(--line-2); margin-bottom:12px; }
.cz-brand img{ width:26px; height:26px; border-radius:8px; object-fit:cover; }
.cz-brand span{ font-size:13px; font-weight:700; }
.cz-menu{ display:flex; flex-direction:column; gap:2px; }
.cz-menu .mi{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--muted); padding:7px 10px; border-radius:9px; }
.cz-menu .mi.on{ background:var(--grad-warm); color:#1a0e08; font-weight:800; }
.cz-menu .mi.off{ color:var(--muted-2); }
.cz-menu .mi.off::after{ content:'+'; font-size:14px; font-weight:800; color:var(--muted-2); }
.cz-menu .bdg{ font-style:normal; font-size:11px; font-weight:800; background:var(--magenta); color:#fff; border-radius:999px; padding:1px 7px; }
.cz-main{ padding:20px 22px; display:flex; flex-direction:column; gap:16px; }
.cz-main-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cz-main-top h4{ font-size:20px; }
.cz-live{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--lime); background:rgba(168,232,28,.1); border:1px solid rgba(168,232,28,.24); padding:5px 12px; border-radius:999px; }
.cz-live i{ width:7px; height:7px; border-radius:50%; background:var(--lime); animation:czPulse 1.6s infinite; }
@keyframes czPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.5);} }
.cz-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.cz-tile{ position:relative; padding:14px 16px; border-radius:16px; border:1px solid var(--line-2); background:rgba(255,255,255,.035); display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cz-tile::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.cz-tile .t{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); }
.cz-tile .v{ font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.02em; }
.cz-tile .s{ font-size:12px; color:var(--muted); }
.cz-rows{ display:flex; flex-direction:column; gap:8px; }
.cz-row{ display:grid; grid-template-columns:70px 1fr auto; gap:12px; align-items:center; padding:11px 14px; border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.025); font-size:13px; }
.cz-row .ph{ font-weight:800; font-size:12px; color:var(--muted-2); }
.cz-row .nm{ font-family:'Space Grotesk',monospace; color:var(--muted); }
.cz-row .st{ font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:999px; }
.cz-row .st.live{ background:rgba(54,214,114,.12); color:var(--green); }
.cz-row .st.ring{ background:rgba(255,179,0,.14); color:var(--amber); }
.cz-row .st.miss{ background:rgba(255,31,142,.14); color:var(--magenta); }
.cz-feats{ display:flex; flex-direction:column; gap:14px; }
.cz-feat{ padding:18px 20px; border-radius:16px; border:1px solid var(--line-2); background:var(--glass); }
.cz-feat h4{ font-size:17px; margin-bottom:6px; }
.cz-feat p{ font-size:13.5px; color:var(--muted); text-wrap:pretty; }

/* ---- setores ---- */
.sec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sec-card{ position:relative; padding:26px 24px 28px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--glass); overflow:hidden; transition:.35s var(--ease); }
.sec-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c); }
.sec-card:hover{ transform:translateY(-6px); border-color:var(--line); }
.sec-card .k{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--c); margin-bottom:14px; }
.sec-card h4{ font-size:20px; margin-bottom:10px; text-wrap:balance; }
.sec-card p{ font-size:13.5px; color:var(--muted); text-wrap:pretty; }

/* ---- catalogo ---- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-card{ position:relative; padding:22px; border-radius:18px; border:1px solid var(--line-2); background:var(--glass); transition:.3s var(--ease); }
.cat-card:hover{ transform:translateY(-4px); border-color:var(--line); background:var(--glass-2); }
.cat-card h4{ font-size:17.5px; margin:12px 0 8px; padding-left:12px; border-left:3px solid var(--c); }
.cat-card p{ font-size:13.5px; color:var(--muted); text-wrap:pretty; }
.cat-card .bd{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--line-2); }
.cat-card .bd.inc{ background:rgba(168,232,28,.1); color:var(--lime); border-color:rgba(168,232,28,.24); }
.cat-card .bd.pr{ background:rgba(54,191,250,.1); color:var(--cyan); border-color:rgba(54,191,250,.24); }
.cat-card .bd.nw{ background:rgba(255,31,142,.12); color:#FF7AB6; border-color:rgba(255,31,142,.26); }
.cat-card .bd.sc{ background:rgba(255,255,255,.05); color:var(--muted); }

/* ---- operadores ---- */
.ops{ margin-top:44px; padding:32px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--glass); text-align:center; }
.ops-t{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:20px; }
.ops-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px; }
.op{ font-size:13.5px; font-weight:700; color:var(--muted); padding:9px 16px; border-radius:999px; border:1px dashed var(--line); }
.op.on{ color:var(--ink); border-style:solid; border-color:transparent; background:var(--grad-warm); color:#1a0e08; }
.ops-n{ font-size:13.5px; color:var(--muted-2); max-width:560px; margin:0 auto; }

/* ---- faq ---- */
.faq-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start; }
.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ border:1px solid var(--line-2); border-radius:16px; background:var(--glass); padding:2px 20px; }
.faq-item summary{ list-style:none; cursor:pointer; font-family:var(--font-display); font-size:17px; font-weight:700; padding:18px 34px 18px 0; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; position:absolute; right:0; top:16px; font-size:22px; font-weight:400; color:var(--muted-2); }
.faq-item[open] summary::after{ content:'\2013'; }
.faq-item[open]{ border-color:var(--line); background:var(--glass-2); }
.faq-item p{ font-size:14.5px; color:var(--muted); padding:0 0 20px; text-wrap:pretty; }

/* ---- cta final ---- */
.cta-final{ padding-top:0; }
.cta-box{ position:relative; padding:64px 48px; border-radius:var(--radius-lg); text-align:center; overflow:hidden; border:1px solid var(--line); background:radial-gradient(90% 140% at 50% 0%, rgba(255,106,19,.16), transparent 62%), var(--bg-2); }
.cta-box h2{ font-size:clamp(30px,4vw,52px); margin-bottom:16px; text-wrap:balance; }
.cta-box p{ color:var(--muted); max-width:560px; margin:0 auto 30px; text-wrap:pretty; }
.cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; }

@media (max-width:1100px){
  .cz-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .sec-grid{ grid-template-columns:repeat(2,1fr); }
  .faq-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .cz-body{ grid-template-columns:1fr; }
  .cz-side{ border-right:0; border-bottom:1px solid var(--line-2); }
  .cz-menu{ flex-direction:row; flex-wrap:wrap; }
  .cz-menu .mi.off{ display:none; }
  .cz-tiles{ grid-template-columns:1fr; }
  .cat-grid, .sec-grid{ grid-template-columns:1fr; }
  .cta-box{ padding:44px 24px; }
  .hero-video{ opacity:.85; }
}

/* ---- V2 as default: the hero video carries the logo, so the halo image steps back ---- */
.hero[data-hero="v2"] .halo-logo{ display:none; }
.hero[data-hero="v2"] .hero-video{ opacity:.9; object-position:50% 42%; }
.hero[data-hero="v2"] .hero-video-veil{ background:radial-gradient(60% 48% at 50% 44%, rgba(14,8,5,.34), rgba(14,8,5,.6) 74%), linear-gradient(180deg, rgba(14,8,5,.34) 0%, rgba(14,8,5,.1) 26%, rgba(14,8,5,.5) 76%, var(--bg) 100%); }
.hero[data-hero="v2"] .hero-center{ padding:0 8px; }

.hero-center h1, .hero-center .lead{ text-shadow:0 2px 26px rgba(8,4,2,.72), 0 1px 4px rgba(8,4,2,.5); }

/* ---- section background videos (2026-09) ---- */
.has-bgv{ overflow:hidden; }
.sec-video{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; z-index:0; opacity:0; pointer-events:none; will-change:transform,opacity; transition:opacity .6s ease; }
.sec-video.sv-dim{ filter:saturate(1.05) brightness(.85); }
.sec-veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, var(--bg) 0%, rgba(14,8,5,.55) 22%, rgba(14,8,5,.55) 78%, var(--bg) 100%); }
.sv-cta{ top:-10%; height:120%; border-radius:inherit; }
.sv-cta-veil{ background:radial-gradient(80% 120% at 50% 0%, rgba(14,8,5,.30), rgba(14,8,5,.72) 70%); border-radius:inherit; }
:root[data-particles="off"] .sec-video{ display:none; }
@media (prefers-reduced-motion:reduce){ .sec-video{ display:none; } }
.footer.has-bgv{ position:relative; }
.sv-foot-veil{ background:linear-gradient(180deg, var(--bg) 0%, rgba(14,8,5,.80) 30%, rgba(14,8,5,.72) 100%); }

/* ============================================================
   ASSISTENTE DE VOZ — Rita
   Um clique liga a chamada. Sem chat escrito.
   ============================================================ */
.asst-launcher{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:64px; height:64px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:none; display:block;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.5));
  transition:transform .28s var(--ease);
}
.asst-launcher:hover{ transform:translateY(-3px) scale(1.04); }
.asst-launcher:active{ transform:translateY(-1px) scale(.99); }
.asst-launcher-face{
  display:block; width:64px; height:64px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.86);
  box-shadow:0 0 0 3px rgba(255,106,19,.4);
}
.asst-launcher-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.asst-launcher-badge{
  position:absolute; right:-2px; bottom:-2px;
  width:26px; height:26px; border-radius:50%;
  background:var(--grad-warm); color:#1a0e08;
  display:grid; place-items:center; border:2px solid var(--bg);
}
.asst-launcher-badge svg{ width:13px; height:13px; }
.asst-launcher::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,106,19,.42); animation:asst-ping 2.6s var(--ease) infinite;
  pointer-events:none;
}
@keyframes asst-ping{ 0%{ transform:scale(.9); opacity:.75 } 70%{ transform:scale(1.28); opacity:0 } 100%{ opacity:0 } }
.asst-open .asst-launcher::after{ display:none; }
.asst-open .asst-launcher-badge{ background:linear-gradient(135deg,#FF4D6D,#FF1F8E); color:#fff; }

.asst-panel{
  position:fixed; right:22px; bottom:98px; z-index:121;
  width:min(376px, calc(100vw - 32px)); height:min(540px, calc(100vh - 136px));
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 46%, var(--bg) 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.64), 0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.985);
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.asst-open .asst-panel{ opacity:1; visibility:visible; transform:none; }

.asst-head{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line-2); background:rgba(255,255,255,.03);
}
.asst-avatar{
  position:relative; flex:0 0 44px; width:44px; height:44px;
  border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.2);
}
.asst-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.asst-id{ flex:1; min-width:0; }
.asst-name{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.asst-state{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted-2); }
.asst-state i{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex:0 0 7px; transition:background .25s ease, box-shadow .25s ease; }
.asst-state[data-state="connecting"] i{ background:var(--amber); animation:asst-blink 1s var(--ease) infinite; }
.asst-state[data-state="live"] i{ background:var(--green); box-shadow:0 0 0 3px rgba(54,214,114,.18); }
.asst-state[data-state="error"] i{ background:var(--pink); }
.asst-state[data-speaking="1"] i{ background:var(--magenta); box-shadow:0 0 0 3px rgba(255,31,142,.2); animation:asst-blink .7s var(--ease) infinite; }
@keyframes asst-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.asst-hbtn{
  width:34px; height:34px; flex:0 0 34px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  display:grid; place-items:center; transition:all .2s var(--ease);
}
.asst-hbtn:hover{ background:var(--glass-2); border-color:rgba(255,255,255,.2); }
.asst-hbtn svg{ width:16px; height:16px; }

.asst-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
.asst-body::-webkit-scrollbar{ width:6px; }
.asst-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:3px; }

.asst-hint{ margin:auto 0; text-align:center; font-size:13px; line-height:1.6; color:var(--muted-2); padding:0 12px; }

.asst-line{ font-size:14.5px; line-height:1.6; padding:10px 13px; border-radius:14px; max-width:92%; overflow-wrap:anywhere; animation:asst-in .3s var(--ease) both; }
@keyframes asst-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.asst-line.bot{ align-self:flex-start; background:var(--glass); border:1px solid var(--line-2); border-bottom-left-radius:5px; }
.asst-line.user{ align-self:flex-end; background:rgba(255,106,19,.14); border:1px solid rgba(255,106,19,.28); border-bottom-right-radius:5px; }
.asst-who{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-bottom:3px; }
.asst-line.user .asst-who{ color:rgba(255,179,0,.85); }

.asst-note-line{ align-self:center; font-size:12px; color:var(--muted-2); background:rgba(255,255,255,.05); border:1px solid var(--line-2); border-radius:11px; padding:6px 12px; }
.asst-note-line.ok{ color:var(--green); border-color:rgba(54,214,114,.3); background:rgba(54,214,114,.08); }

.asst-foot{ padding:14px 16px 16px; border-top:1px solid var(--line-2); background:rgba(255,255,255,.02); }
.asst-call{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 18px; border-radius:14px; border:0; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700;
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.asst-call svg{ width:18px; height:18px; }
.asst-call:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.asst-call[data-mode="hangup"]{ background:linear-gradient(135deg,#FF4D6D,#FF1F8E); color:#fff; }
.asst-call[data-mode="call"]{ background:var(--grad-warm); color:#1a0e08; }

@media (max-width:520px){
  .asst-panel{ right:10px; left:10px; width:auto; bottom:92px; height:min(70vh, calc(100vh - 120px)); }
  .asst-launcher{ right:16px; bottom:16px; }
}
@media (prefers-reduced-motion:reduce){
  .asst-launcher::after, .asst-state i{ animation:none; }
  .asst-line{ animation:none; }
}

/* ---- QR codes das redes sociais (mostrados pela Rita no fecho) ---- */
.asst-qr{
  align-self:stretch; padding:14px; border-radius:16px;
  border:1px solid var(--line-2); background:var(--glass);
  animation:asst-in .3s var(--ease) both;
}
.asst-qr-title{
  margin:0 0 12px; text-align:center; font-size:12.5px; line-height:1.5;
  font-weight:600; color:var(--muted);
}
/* duas colunas: QR maiores e por isso mais fáceis de digitalizar do ecrã */
.asst-qr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; justify-items:center; }
.asst-qr-item{ margin:0; text-align:center; }
.asst-qr-item:only-child, .asst-qr-item:nth-child(3):last-child{ grid-column:1 / -1; }
.asst-qr-item img{
  display:block; width:100%; max-width:148px; height:auto; aspect-ratio:1; border-radius:10px;
  background:#fff; padding:7px;           /* fundo branco: essencial para ler no painel escuro */
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  /* sem image-rendering:pixelated — a redução por vizinho-mais-próximo comia módulos
     do QR e impedia a leitura; a suavização do browser preserva-os melhor */
}
.asst-qr-item figcaption{
  margin-top:7px; font-size:11.5px; font-weight:700; letter-spacing:.03em; color:var(--ink);
}
@media (max-width:520px){
  .asst-qr-item img{ max-width:132px; }
}