/* =====================================================================
   SolarMarket 2.0 — Landing V3 (versão da agência, reconstruída)
   Página de scroll longo, responsiva. Fiel ao layout entregue pela
   agência, mas: (1) responsivo de verdade (mobile-first com clamp());
   (2) os "prints" da v2 (grade de 12 sistemas + dashboards no celular)
   foram RECONSTRUÍDOS como HTML/CSS vivo, nítido e adaptável.
   ===================================================================== */

:root{
  /* Paleta da marca (extraída do design da agência) */
  --teal:        #006173;   /* PRIMARY — wordmark, títulos claros */
  --teal-2:      #0B7689;
  --teal-deep:   #041E23;   /* fundo escuro da seção de IA */
  --teal-ink:    #0A2A30;
  --cyan:        #54E0EF;   /* Alfredo / detalhes */
  --cyan-soft:   #A9F8E9;   /* "Estúdio IA & Alfredo" */
  --orange:      #F39A2B;   /* sol / faixa CTA */
  --orange-2:    #E8821A;

  --ink:         #0E1A1D;   /* texto sobre claro */
  --ink-2:       #3A4A4F;
  --ink-3:       #6B7A80;
  --paper:       #FFFFFF;
  --paper-2:     #F4F8F9;   /* seção clara alternada */
  --paper-3:     #E7F0F2;
  --line:        rgba(0,97,115,.14);
  --line-soft:   rgba(0,0,0,.08);

  /* Dark surfaces (seções escuras: IA e App Mobile) */
  --d-bg:        #04181C;
  --d-bg-2:      #07262C;
  --d-surface:   rgba(255,255,255,.04);
  --d-surface-2: rgba(255,255,255,.06);
  --d-border:    rgba(169,248,233,.14);
  --d-fg:        #EAF7F8;
  --d-fg-2:      #A9C4C9;
  --d-fg-3:      #7C969B;

  --radius:      18px;
  --radius-sm:   12px;
  --maxw:        1180px;
  --shadow:      0 24px 60px -28px rgba(0,40,48,.45);
  --shadow-card: 0 12px 30px -16px rgba(0,40,48,.35);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--cyan); color:var(--teal-deep); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(64px,9vw,120px); position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:clamp(.68rem,1.6vw,.78rem); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:99px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

h1,h2,h3{ margin:0; line-height:1.08; letter-spacing:-.02em; font-weight:800; }
.h-xl{ font-size:clamp(2.3rem,7vw,4.6rem); }
.h-lg{ font-size:clamp(1.9rem,5.2vw,3.4rem); }
.h-md{ font-size:clamp(1.5rem,3.8vw,2.4rem); }
.lede{ font-size:clamp(1.08rem,2.3vw,1.45rem); color:var(--ink-2); font-weight:500; line-height:1.5; }
.muted{ color:var(--ink-3); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   HERO — foto do integrador (sol + painéis) + formulário à direita
   Fiel à referência da agência: sem topbar, form direto na primeira dobra.
   ===================================================================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(48px,7vw,72px); padding-bottom:48px; overflow:hidden;
  color:#fff;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
/* A pessoa fica no centro-direita da foto; em telas largas mantemos o rosto
   visível, mas o card do form cobre a direita — então puxamos o foco p/ centro. */
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center center; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,20,24,.18) 0%, rgba(2,20,24,0) 30%, rgba(2,20,24,.40) 100%),
    linear-gradient(95deg, rgba(2,20,24,.74) 0%, rgba(2,20,24,.34) 38%, rgba(2,20,24,0) 64%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center; }
.hero__copy .eyebrow{ color:var(--cyan-soft); }
.hero h1{ margin-top:18px; color:#fff; text-shadow:0 2px 24px rgba(0,20,24,.35); }
.hero h1 .teal{ color:var(--cyan-soft); }
.hero__sub{ margin-top:18px; max-width:34ch; font-size:clamp(1.12rem,2.5vw,1.55rem); font-weight:500; color:rgba(255,255,255,.94); text-shadow:0 1px 12px rgba(0,20,24,.4); }
.hero__sub b{ font-weight:800; }
.hero__bullets{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.hero__bullets li{ display:flex; gap:11px; align-items:flex-start; font-weight:600; font-size:clamp(.98rem,1.9vw,1.14rem); line-height:1.4; color:rgba(255,255,255,.95); text-shadow:0 1px 10px rgba(0,20,24,.45); }
.hero__bullets li > span:not(.tk){ min-width:0; }
.hero__bullets b{ font-weight:800; color:var(--cyan-soft); }
.hero__bullets .tk{ flex:0 0 auto; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; color:var(--teal-deep); background:var(--cyan); }
.hero__bullets .tk svg{ width:14px; height:14px; }
.hero__note{ margin-top:20px; font-size:.84rem; color:rgba(255,255,255,.82); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hero__note .pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.68rem; }

/* Card do formulário na hero */
.hero__form-card{
  position:relative; background:#fff; color:var(--ink);
  border-radius:var(--radius); padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.6);
  max-width:460px; width:100%; margin-left:auto;
}
.hero__form-card h3{ margin-top:10px; font-size:clamp(1.3rem,2.8vw,1.7rem); color:var(--teal); }
.hero__form-card .sub{ margin-top:8px; font-size:.9rem; color:var(--ink-3); line-height:1.5; }

/* Botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; letter-spacing:.01em; border:0; border-radius:99px;
  padding:15px 26px; font-size:clamp(.9rem,2vw,1rem);
  transition:transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn--accent{ background:var(--orange); color:#fff; box-shadow:0 14px 30px -12px rgba(243,154,43,.8); }
.btn--accent:hover{ background:var(--orange-2); transform:translateY(-2px); }
.btn--teal{ background:var(--teal); color:#fff; box-shadow:0 14px 30px -12px rgba(0,97,115,.8); }
.btn--teal:hover{ background:var(--teal-2); transform:translateY(-2px); }
.btn--ghost{ background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn--ghost:hover{ background:rgba(255,255,255,.18); }
.btn--block{ width:100%; }
.btn svg{ width:18px; height:18px; }

/* =====================================================================
   "12 sistemas" — grade de módulos (reconstruída, era um print)
   ===================================================================== */
.systems{ background:var(--paper-2); }
.systems__head{ text-align:center; max-width:760px; margin-inline:auto; }
.systems__head .eyebrow{ color:var(--teal); justify-content:center; }
.systems__head h2{ margin-top:14px; color:var(--teal); }
.systems__head .lede{ margin-top:14px; }

.mod-grid{
  margin-top:clamp(36px,5vw,56px);
  /* minmax(0,1fr): permite que as colunas ENCOLHAM abaixo do tamanho
     intrínseco do conteúdo — sem isso, no mobile a 2ª coluna estoura a
     viewport em vez de caber. */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px);
}
.mod{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px; display:flex; gap:14px; align-items:flex-start; min-width:0;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
/* o bloco de texto dentro do card também precisa poder encolher */
.mod > div{ min-width:0; }
.mod__name{ overflow-wrap:anywhere; }
.mod:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:rgba(0,97,115,.3); }
.mod__ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:11px;
  display:grid; place-items:center; color:var(--teal);
  background:linear-gradient(160deg, rgba(0,97,115,.12), rgba(84,224,239,.12));
  border:1px solid rgba(0,97,115,.15);
}
.mod__ic svg{ width:22px; height:22px; }
.mod__name{ font-weight:800; font-size:clamp(1rem,1.4vw,1.12rem); color:var(--ink); }
.mod__desc{ margin-top:3px; font-size:clamp(.86rem,1.2vw,.95rem); color:var(--ink-3); line-height:1.45; }

.systems__strip{
  margin-top:clamp(30px,4vw,44px);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.chip-fact{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:99px; padding:11px 18px; font-weight:700; font-size:.92rem; color:var(--ink);
}
.chip-fact b{ color:var(--teal); }
.chip-fact .arr{ color:var(--orange); font-weight:900; }

/* =====================================================================
   IA / ALFREDO — seção escura
   ===================================================================== */
.ai{ background:radial-gradient(120% 90% at 80% 10%, var(--teal-deep) 0%, var(--d-bg) 60%, #02101380 100%); color:var(--d-fg); }
.ai__intro{ text-align:center; max-width:880px; margin-inline:auto; }
.ai__intro .eyebrow{ color:var(--cyan); justify-content:center; }
.ai__intro h2{ margin-top:16px; color:#fff; }
.ai__intro h2 .c{ color:var(--cyan-soft); }

.ai__grid{
  margin-top:clamp(40px,6vw,72px);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,4vw,56px); align-items:center;
}
.ai__bot{ position:relative; display:grid; place-items:center; }
.ai__bot .glow{ position:absolute; width:min(420px,90%); aspect-ratio:1; z-index:0; filter:blur(2px); opacity:.9; }
.ai__bot .alfredo{ position:relative; z-index:1; width:min(320px,72%); filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.ai__bot .badge{
  position:absolute; z-index:2; bottom:6%; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(4,24,28,.7); border:1px solid var(--d-border); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:99px; font-size:.78rem; font-weight:700; color:var(--cyan-soft);
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}
.ai__bot .badge .live{ width:7px; height:7px; border-radius:99px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.ai__study .eyebrow{ color:var(--cyan); }
.ai__study h3{ margin-top:12px; font-size:clamp(1.6rem,3.6vw,2.4rem); color:var(--cyan-soft); }
.ai__points{ margin:22px 0 0; padding:0; list-style:none; display:grid; gap:16px; }
.ai__points li{ display:flex; gap:13px; color:var(--d-fg-2); font-size:clamp(1.02rem,2vw,1.2rem); line-height:1.5; }
.ai__points .tk{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--teal-deep); background:var(--cyan); margin-top:2px; }
.ai__points .tk svg{ width:15px; height:15px; }
.ai__points b{ color:#fff; }

/* Mini-chat de demonstração do agente */
.ai__chat{
  margin-top:26px; background:var(--d-surface); border:1px solid var(--d-border);
  border-radius:var(--radius); padding:16px; display:grid; gap:10px;
}
.ai__chat .row{ display:flex; }
.ai__chat .row.me{ justify-content:flex-end; }
.bubble{ max-width:84%; padding:11px 14px; border-radius:14px; font-size:.92rem; line-height:1.45; }
.bubble.me{ background:rgba(84,224,239,.14); border:1px solid rgba(84,224,239,.3); color:#eafcff; border-bottom-right-radius:5px; }
.bubble.bot{ background:rgba(255,255,255,.05); border:1px solid var(--d-border); color:var(--d-fg); border-bottom-left-radius:5px; }
.bubble .who{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--d-fg-3); margin-bottom:4px; }
.bubble b{ color:var(--cyan-soft); }

/* =====================================================================
   BANCO SOLARMARKET — seção escura: conta digital + extrato vivo
   ===================================================================== */
.bank{ background:linear-gradient(180deg, #061f24 0%, var(--teal-deep) 100%); color:var(--d-fg); overflow:hidden; }
.bank__grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,5vw,64px); align-items:center; }
.bank__copy .eyebrow{ color:var(--cyan); }
.bank__copy h2{ margin-top:14px; color:#fff; }
.bank__copy h2 .c{ color:var(--cyan-soft); }
.bank__copy .lede{ margin-top:16px; color:var(--d-fg-2); }
.bank__copy .lede b{ color:#fff; font-weight:800; }
.bank__feats{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.bank__feats li{ display:flex; gap:12px; align-items:flex-start; color:var(--d-fg-2); font-weight:600; font-size:clamp(1.02rem,1.6vw,1.14rem); line-height:1.45; }
.bank__feats b{ color:#fff; }
.bank__feats .tk{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--cyan); background:rgba(84,224,239,.12); border:1px solid var(--d-border); margin-top:1px; }
.bank__feats .tk svg{ width:16px; height:16px; }

/* Coluna do mockup */
.bank__visual{ display:grid; gap:16px; max-width:440px; width:100%; margin-inline:auto; }

/* Cartão da conta digital (gradiente teal -> cyan) */
.bank-card{
  position:relative; border-radius:18px; padding:20px;
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-2) 45%, #0c8aa0 100%);
  box-shadow:var(--shadow); border:1px solid rgba(169,248,233,.28);
  color:#eafcff; overflow:hidden;
}
.bank-card::after{ content:""; position:absolute; right:-30px; top:-40px; width:180px; height:180px; border-radius:99px; background:radial-gradient(circle, rgba(84,224,239,.4), transparent 70%); }
.bank-card__top{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.bank-card__top .b-app{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:.82rem; letter-spacing:.02em; color:#fff; }
.bank-card__top .b-app img{ width:18px; height:18px; }
.bank-card__chip{ width:34px; height:24px; border-radius:6px; background:linear-gradient(135deg,#f3d27a,#e0a93b); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.bank-card__label{ display:block; margin-top:18px; font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,252,255,.7); position:relative; z-index:1; }
.bank-card__num{ display:block; margin-top:4px; font-size:1.18rem; font-weight:800; letter-spacing:.14em; position:relative; z-index:1; }
.bank-card__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:16px; position:relative; z-index:1; }
.bank-card__row .k{ display:block; font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:rgba(234,252,255,.7); }
.bank-card__row .v{ display:block; font-size:1.05rem; font-weight:800; color:#fff; }
.bank-card__methods{ display:flex; gap:6px; flex-wrap:wrap; }
.bank-card__methods span{ font-size:.64rem; font-weight:700; padding:4px 9px; border-radius:99px; background:rgba(2,20,24,.28); border:1px solid rgba(255,255,255,.35); }

/* Extrato vivo (recebimentos + conciliação) */
.bank-ext{ background:var(--d-surface); border:1px solid var(--d-border); border-radius:var(--radius); padding:16px; }
.bank-ext__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.78rem; font-weight:800; color:var(--d-fg); }
.bank-ext__tag{ display:inline-flex; align-items:center; gap:6px; font-size:.62rem; font-weight:700; letter-spacing:.02em; color:#7ef0c8; text-transform:none; }
.bank-ext__tag .live{ width:6px; height:6px; border-radius:99px; background:#7ef0c8; box-shadow:0 0 8px #7ef0c8; animation:pulse 1.6s infinite; }
.bank-ext .bars{ margin-top:12px; height:60px; }
.bank-ext__list{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.bank-ext__list li{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--d-fg-2); }
.bank-ext__list .d{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bank-ext__list .a{ font-weight:800; }
.bank-ext__list .a.up{ color:var(--cyan-soft); }
.bank-ext__list .ok{ flex:0 0 auto; width:18px; height:18px; border-radius:99px; display:grid; place-items:center; font-size:.62rem; font-weight:900; color:var(--teal-deep); background:var(--cyan); }

/* =====================================================================
   DIMENSIONAMENTO 3D + MONITORAMENTO — seção CLARA (contraste com as
   seções escuras Banco e App que a cercam). Desenho 3D do telhado +
   painel de monitoramento (geração x consumo + fatura cruzada) +
   faixa de portais/concessionárias.
   ===================================================================== */
.dim{ background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.dim__head{ text-align:center; max-width:820px; margin-inline:auto; }
.dim__head .eyebrow{ color:var(--teal); justify-content:center; }
.dim__head h2{ margin-top:14px; color:var(--teal); }
.dim__head h2 .c{ color:var(--teal-2); background:linear-gradient(100deg,var(--teal-2),#0c8aa0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dim__head .lede{ margin-top:14px; }
.dim__head .lede b{ color:var(--ink); font-weight:800; }

.dim__grid{
  margin-top:clamp(36px,5vw,56px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,26px); align-items:stretch;
}

/* Cards claros (compartilham moldura) */
.dim-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative;
}
.dim-card__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dim-card__eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.dim-card__title{ margin-top:8px; font-size:clamp(1.1rem,2.3vw,1.4rem); color:var(--ink); font-weight:800; line-height:1.18; }
.dim-badge{ font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); background:rgba(0,97,115,.09); border:1px solid rgba(0,97,115,.18); padding:5px 10px; border-radius:99px; }

/* ---- Desenho 3D: casa isométrica (SVG) com módulos no telhado ---- */
.house{
  margin-top:18px; flex:1; position:relative; min-height:clamp(220px,30vw,280px);
  border-radius:var(--radius-sm); overflow:hidden;
  background:radial-gradient(120% 90% at 70% 12%, #eafbff 0%, var(--paper-3) 55%, #dcebee 100%);
  border:1px solid var(--line);
  display:grid; place-items:center;
}
.house__sun{ position:absolute; top:16px; right:18px; width:48px; height:48px; border-radius:99px; background:radial-gradient(circle, #ffd279 0%, #f7a93a 58%, rgba(247,169,58,0) 72%); box-shadow:0 0 34px rgba(243,154,43,.55); z-index:1; }
.house__svg{ position:relative; z-index:2; width:88%; max-width:360px; height:auto; filter:drop-shadow(0 18px 26px rgba(0,40,48,.22)); }
/* módulos solares no telhado (quads gerados por app.js) */
.house__svg .pv{
  fill:#0f5363; stroke:rgba(84,224,239,.45); stroke-width:.8;
  animation:panelIn .5s backwards;
}

.dim-stats3d{ margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.dim-chip{ font-size:.78rem; font-weight:700; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:99px; padding:7px 13px; }
.dim-chip b{ color:var(--teal); font-weight:800; }
.dim-chip.ok{ color:var(--teal); background:rgba(0,97,115,.08); border-color:rgba(0,97,115,.2); }

/* ---- Monitoramento: stats + barras geração/consumo + fatura ---- */
.dim-mon__live{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:700; color:var(--teal-2); }
.dim-mon__live .live{ width:6px; height:6px; border-radius:99px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 1.6s infinite; }

.dim-stats{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dim-stat{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:11px 12px; min-width:0; }
.dim-stat .k{ display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.dim-stat .v{ display:block; margin-top:3px; font-size:1.18rem; font-weight:800; color:var(--ink); line-height:1; }
.dim-stat .v i{ font-style:normal; font-size:.7rem; font-weight:700; color:var(--ink-3); }
.dim-stat .v.up{ color:var(--teal); }

/* gráfico: barras de geração + linha-base de consumo (CSS) */
.dim-chart{ margin-top:16px; position:relative; }
.dim-chart__label{ position:absolute; top:-2px; font-size:.62rem; font-weight:800; letter-spacing:.02em; z-index:2; }
.dim-chart__label.gen{ left:0; color:var(--teal); }
.dim-chart__label.con{ right:0; color:var(--orange-2); }
.dim-bars{
  margin-top:16px; display:flex; align-items:flex-end; gap:3px; height:96px;
  padding:10px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  position:relative; overflow:hidden;
}
.dim-bars span{ flex:1; background:linear-gradient(180deg,var(--cyan),var(--teal)); border-radius:3px 3px 0 0; opacity:.92; }
/* linha tracejada de consumo médio, sobreposta às barras de geração */
.dim-bars::after{
  content:""; position:absolute; left:10px; right:10px; bottom:38px; height:0;
  border-top:2px dashed var(--orange); opacity:.85;
}
.dim-chart__axis{ margin-top:6px; display:flex; justify-content:space-between; font-size:.62rem; color:var(--ink-3); }

.dim-bill{ margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(0,97,115,.06); border:1px solid rgba(0,97,115,.16); border-radius:12px; padding:12px 14px; }
.dim-bill__k{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); }
.dim-bill__v{ display:flex; align-items:center; gap:8px; margin-top:3px; font-size:1.05rem; font-weight:800; color:var(--ink); }
.dim-bill__v s{ color:var(--ink-3); font-weight:600; }
.dim-bill__v svg{ width:16px; height:16px; color:var(--teal); }
.dim-bill__v b{ color:var(--teal); }
.dim-bill__tag{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:700; color:var(--teal-2); }
.dim-bill__tag .live{ width:6px; height:6px; border-radius:99px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:pulse 1.6s infinite; }

/* ---- Faixa: portais + concessionárias conectados ---- */
.dim__connect{ margin-top:clamp(30px,4vw,46px); text-align:center; }
.dim__connect-lead{ max-width:760px; margin:0 auto; font-size:clamp(1.08rem,2.1vw,1.32rem); color:var(--ink-2); font-weight:500; }
.dim__connect-lead b{ color:var(--teal); font-weight:800; }
.dim__connect-grid{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dim-pile{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; box-shadow:var(--shadow-card); }
.dim-pile__k{ display:block; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.dim-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.dim-chips span{ font-size:.82rem; font-weight:700; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line); border-radius:99px; padding:7px 14px; }
.dim-chips span:last-child{ color:var(--teal); background:rgba(0,97,115,.08); border-color:rgba(0,97,115,.22); }

/* =====================================================================
   APP MOBILE — dashboards reconstruídos em mockups vivos
   ===================================================================== */
.app{ background:linear-gradient(180deg, var(--d-bg) 0%, #061f24 100%); color:var(--d-fg); overflow:hidden; }
.app__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.app__copy .eyebrow{ color:var(--cyan); }
.app__copy h2{ margin-top:14px; color:#fff; }
.app__copy h2 .c{ color:var(--cyan-soft); }
.app__copy .lede{ margin-top:16px; color:var(--d-fg-2); }
.app__feats{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.app__feats li{ display:flex; gap:12px; align-items:center; color:var(--d-fg-2); font-weight:600; font-size:clamp(1.02rem,1.6vw,1.14rem); }
.app__feats .tk{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--cyan); background:rgba(84,224,239,.12); border:1px solid var(--d-border); }
.app__feats .tk svg{ width:16px; height:16px; }

/* Phones */
.phones{ position:relative; display:flex; justify-content:center; align-items:flex-end; gap:clamp(-40px,-2vw,0px); min-height:480px; perspective:1400px; }
.phone{
  --w: clamp(190px,22vw,250px);
  width:var(--w); aspect-ratio:9/19.2; flex:0 0 auto;
  background:linear-gradient(180deg,#0a2127,#06181d); border-radius:30px;
  border:1px solid rgba(169,248,233,.22);
  padding:9px; box-shadow:0 40px 70px -30px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.4);
  position:relative;
}
.phone__screen{
  width:100%; height:100%; border-radius:22px; overflow:hidden; position:relative;
  background:radial-gradient(120% 80% at 50% 0%, #0d2e35 0%, #05161a 70%);
  display:flex; flex-direction:column;
}
.phone__notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:38%; height:6px; border-radius:99px; background:rgba(0,0,0,.55); z-index:5; }
.phone--center{ z-index:3; transform:translateY(-26px) rotateY(0deg); }
.phone--left{ z-index:2; transform:translateY(8px) rotateY(16deg) scale(.94); transform-origin:right center; }
.phone--right{ z-index:2; transform:translateY(8px) rotateY(-16deg) scale(.94); transform-origin:left center; }
/* Desktop: o track é "invisível" no layout — os 3 telefones voltam a ser
   filhos diretos do flex .phones (com perspectiva). Os dots ficam escondidos. */
.phones__track{ display:contents; }
.phones__dots{ display:none; }

/* Conteúdo dos celulares (mini dashboards) */
.scr{ padding:14px 12px; display:flex; flex-direction:column; gap:10px; height:100%; color:var(--d-fg); }
.scr__bar{ display:flex; align-items:center; justify-content:space-between; font-size:.6rem; color:var(--d-fg-3); }
.scr__bar .b-app{ display:flex; align-items:center; gap:5px; font-weight:800; color:var(--cyan-soft); letter-spacing:.04em; }
.scr__bar .b-app img{ width:13px; height:13px; }
.scr__eyebrow{ font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); }
.scr__title{ font-size:.86rem; font-weight:800; line-height:1.2; color:#fff; }
.scr__title .c{ color:var(--cyan-soft); }

/* Painel 3D (telhado isométrico) */
.roof{ margin-top:6px; aspect-ratio:1.5; background:rgba(255,255,255,.03); border:1px solid var(--d-border); border-radius:12px; display:grid; place-items:center; overflow:hidden; position:relative; }
.roof__grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:3px; transform:rotateX(54deg) rotateZ(-42deg) scale(.92); }
.roof__grid span{ width:14px; height:14px; border-radius:2px; background:linear-gradient(160deg,#1b6f80,#0c3a44); box-shadow:0 0 6px rgba(84,224,239,.25); animation:panelIn .5s backwards; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; } }
.scr__foot{ display:flex; justify-content:space-between; font-size:.6rem; color:var(--d-fg-3); margin-top:auto; }
.scr__foot b{ color:var(--d-fg-2); }

/* Painel financeiro/monitor (barras) */
.bars{ margin-top:6px; display:flex; align-items:flex-end; gap:3px; height:74px; padding:8px; background:rgba(255,255,255,.03); border:1px solid var(--d-border); border-radius:12px; }
.bars span{ flex:1; background:linear-gradient(180deg,var(--cyan),#1b6f80); border-radius:3px 3px 0 0; opacity:.85; }
.stat-row{ display:flex; gap:8px; }
.stat{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--d-border); border-radius:10px; padding:8px; }
.stat .k{ font-size:.55rem; color:var(--d-fg-3); text-transform:uppercase; letter-spacing:.08em; }
.stat .v{ font-size:.95rem; font-weight:800; color:#fff; margin-top:2px; }
.stat .v.up{ color:var(--cyan-soft); }

/* Mini-chat dentro do phone */
.mini-chat{ display:flex; flex-direction:column; gap:6px; }
.mini-chat .mb{ font-size:.62rem; line-height:1.35; padding:7px 9px; border-radius:9px; max-width:88%; }
.mini-chat .mb.me{ align-self:flex-end; background:rgba(84,224,239,.14); border:1px solid rgba(84,224,239,.3); color:#eafcff; }
.mini-chat .mb.bot{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid var(--d-border); color:var(--d-fg); }
.mini-chat .mb b{ color:var(--cyan-soft); }
.mini-tag{ margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:5px; font-size:.55rem; font-weight:700; color:#7ef0c8; }
.mini-tag .live{ width:5px; height:5px; border-radius:99px; background:#7ef0c8; box-shadow:0 0 8px #7ef0c8; }

/* =====================================================================
   CTA FINAL — faixa laranja com foto de fundo (só copy + botão p/ a hero)
   ===================================================================== */
.cta{ position:relative; color:#fff; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; z-index:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; }
.cta__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(230,130,26,.95) 0%, rgba(243,154,43,.9) 55%, rgba(243,154,43,.82) 100%); }
.cta .wrap{ position:relative; z-index:1; }
.cta__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.cta__inner .eyebrow{ color:#fff; justify-content:center; }
.cta__inner h2{ margin-top:14px; color:#fff; }
.cta__inner .date{ display:inline; color:var(--teal-deep); }
.cta__inner p{ margin:16px auto 0; font-size:clamp(1.08rem,2.2vw,1.34rem); font-weight:500; max-width:48ch; }
.cta__inner p b{ font-weight:800; }
.cta__btn{ margin-top:26px; }
.cta__urgency{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cta__urgency .u{ display:inline-flex; align-items:center; gap:8px; background:rgba(4,30,35,.22); border:1px solid rgba(255,255,255,.45); border-radius:99px; padding:8px 14px; font-weight:800; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }

/* Campos do formulário (no card da hero) */
.field{ margin-top:16px; }
.field label{ display:block; font-size:.8rem; font-weight:700; color:var(--ink-2); margin-bottom:6px; }
.field label .req{ color:var(--orange-2); }
.field input[type=email],
.field input[type=tel],
.field input[type=text]{
  width:100%; padding:13px 14px; border-radius:11px; font-size:1rem;
  border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus{ outline:0; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px rgba(0,97,115,.12); }
.field.err input{ border-color:#e0566a; background:#fff4f5; }
.field .hint{ margin-top:5px; font-size:.74rem; color:#c0394d; display:none; }
.field.err .hint{ display:block; }

.consent{ margin-top:16px; display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--ink-2); }
.consent input{ margin-top:2px; width:17px; height:17px; accent-color:var(--teal); flex:0 0 auto; }
.hero__form-card .submit{ margin-top:20px; }
.form-meta{ margin-top:12px; font-size:.76rem; color:var(--ink-3); text-align:center; }
.form-meta.error{ color:#c0394d; font-weight:600; }

/* honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Sucesso */
.form-ok{ text-align:center; padding:10px 0; }
.form-ok .mark{ width:62px; height:62px; border-radius:99px; margin:0 auto 16px; display:grid; place-items:center; color:#fff; background:var(--teal); box-shadow:0 14px 30px -12px rgba(0,97,115,.7); }
.form-ok .mark svg{ width:32px; height:32px; }
.form-ok h3{ color:var(--teal); }
.form-ok p{ margin-top:10px; color:var(--ink-2); font-size:.95rem; }
.form-ok b{ color:var(--ink); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:980px){
  .hero{ min-height:0; padding-top:clamp(40px,9vw,64px); padding-bottom:clamp(40px,9vw,64px); }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__copy{ text-align:center; }
  .hero__copy .eyebrow{ justify-content:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__bullets{ max-width:420px; margin-inline:auto; text-align:left; }
  .hero__note{ justify-content:center; }
  .hero__form-card{ order:2; margin-inline:auto; }
  .ai__grid{ grid-template-columns:1fr; }
  .ai__bot{ order:2; }
  .app__grid{ grid-template-columns:1fr; }
  .bank__grid{ grid-template-columns:1fr; }
  .dim__grid{ grid-template-columns:1fr; }
  .dim__connect-grid{ grid-template-columns:1fr; }
  .mod-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* ---- App Mobile: vira CARROSSEL deslizável ---- */
  .phones{ min-height:auto; perspective:none; display:block; }
  .phones__track{
    display:flex; gap:14px; align-items:stretch;  /* todos os slides na mesma altura */
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                /* esconde a barra (Firefox) */
    /* padding lateral simétrico = (100% - largura do slide)/2, pra que o
       scroll-snap-align:center centralize TAMBÉM o 1º e o último slide. */
    padding:8px calc((100% - 84%) / 2) 6px;
  }
  .phones__track::-webkit-scrollbar{ display:none; }  /* esconde a barra (WebKit) */
  /* Cada telefone vira um slide: ocupa ~84% da largura, centralizado no snap.
     A "moldura" encolhe (padding/borda menores) pra dar sensação de celular
     sem desperdiçar largura. Sem perspectiva nem deslocamento vertical.
     aspect-ratio fixo mantém todos os slides com a MESMA altura (sem pulos). */
  .phone{
    --w: auto;
    flex:0 0 84%; max-width:360px; width:84%;
    aspect-ratio:10/17;
    scroll-snap-align:center;
    transform:none !important; padding:7px; border-radius:26px;
    box-shadow:0 24px 50px -26px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.4);
  }
  .phone__screen{ border-radius:20px; }
  .phone__notch{ width:32%; }
  /* o conteúdo da tela centraliza melhor o "miolo" e empurra o rodapé pro fim */
  .scr{ justify-content:flex-start; }
  .roof{ margin-top:10px; }

  /* Bolinhas de navegação */
  .phones__dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; }
  .phones__dots .dot{
    width:8px; height:8px; border-radius:99px; border:0; padding:0;
    background:rgba(169,248,233,.28); transition:background .2s, transform .2s;
  }
  .phones__dots .dot.active{ background:var(--cyan); transform:scale(1.3); box-shadow:0 0 10px var(--cyan); }
}
@media (max-width:680px){
  .mod-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__bg img{ object-position:62% center; }
  /* slides um pouco mais largos em telas estreitas */
  .phones__track{ padding-inline:calc((100% - 88%) / 2); }
  .phone{ flex-basis:88%; width:88%; }
}
@media (max-width:430px){
  .mod{ padding:14px; gap:11px; }
  .mod__ic{ width:38px; height:38px; }
}