/* ============================================================
   BGx Polaris — folha de estilo
   Identidade herdada do deck BGx: fundo escuro, cartões,
   chips de acento, tipografia Poppins + Inter + JetBrains Mono.
   ============================================================ */

:root{
  --bg:#0A0E16;
  --bg-soft:#0D131E;
  --card:#131A26;
  --card-deep:#101724;
  --line:#232C3C;
  --line-soft:#1A2231;

  --txt:#E9EEF7;
  --mut:#97A2B4;
  --dim:#6B7688;
  --faint:#3A4658;

  --vio:#7C6CF5;
  --cya:#60B4F9;
  --tea:#2DD4BF;
  --grn:#34D399;
  --amb:#F5B841;
  --bluegas:#4E87FE;
  --bluegas-deep:#3151EF;

  --display:"Poppins","Plus Jakarta Sans",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;


  /* superfícies e efeitos — sobrescritos pelo tema claro */
  --nav-bg:rgba(10,14,22,.78);
  --nav-bg-stuck:rgba(10,14,22,.94);
  --nav-bg-open:rgba(10,14,22,.98);
  --hover-tint:rgba(255,255,255,.03);
  --line-h1:#2E3A52; --line-h2:#33405A; --line-h3:#3A5480;
  --card-hover:#151D2B;
  --tag-bg:rgba(19,26,38,.6);
  --hero-wash:rgba(91,140,255,.10);
  --panel-grad:linear-gradient(180deg,#131A26,#0F1521);
  --panel-bg:#0E1520;
  --band-grad:linear-gradient(120deg,#101724,#131C2B);
  --cta-grad:radial-gradient(90% 140% at 82% 0%,rgba(124,108,245,.14),transparent 62%),linear-gradient(160deg,#111926,#0C1220);
  --portal-grad:radial-gradient(80% 130% at 88% 20%,rgba(96,180,249,.13),transparent 62%),linear-gradient(150deg,#111A28,#0C1220);
  --aside-grad:linear-gradient(165deg,#0C1220,#0A0E16);
  --float-bg:rgba(14,21,32,.95);
  --map-bg:#0B1119;
  --grid-line:rgba(43,56,78,.42);
  --dot:#2A3547; --track:#1E2836; --knob:#48566B;
  --accent-tint:rgba(96,180,249,.08);
  --accent-tint-2:rgba(96,180,249,.3);
  --accent-knob:#8FD8FF;
  --input-bg:#101724; --input-bg-focus:#121A28;
  --grad-1:#8FD8FF; --grad-2:#60B4F9; --grad-3:#7C6CF5;
  --btn-grad:linear-gradient(135deg,#5B8CFF,#7C6CF5);
  --btn-shadow:0 8px 26px -12px rgba(124,108,245,.9);
  --btn-shadow-h:0 12px 32px -12px rgba(124,108,245,1);
  --shadow-xl:0 40px 90px -50px rgba(0,0,0,.95);
  --alert-bg:rgba(245,184,65,.07); --alert-line:rgba(245,184,65,.3); --alert-txt:#F5D9A0;
  --sky-star:180,203,255; --sky-link:91,140,255; --sky-pole:143,216,255;

  --wrap:1180px;
  --r:14px;
  --r-sm:9px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

:focus-visible{
  outline:2px solid var(--cya);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--line);
  flex:none;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0}

.sec-title{font-size:clamp(28px,3.6vw,42px);margin:0 0 16px}
.sec-title em{font-style:normal;color:var(--cya)}
.sec-title .aside{color:var(--dim);font-weight:500;font-size:.72em;letter-spacing:-.01em}
.sec-lead{color:var(--mut);font-size:clamp(15px,1.5vw,17px);max-width:64ch;margin:0}

.section{padding:104px 0;position:relative}
.section + .section{border-top:1px solid var(--line-soft)}
.section-head{margin-bottom:52px;max-width:820px}

/* ---------- navegação ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.nav.is-stuck{border-bottom-color:var(--line-soft);background:var(--nav-bg-stuck)}
.nav-inner{display:flex;align-items:center;gap:34px;height:70px}
.nav-inner .lockup{--lk:25px;flex:none}
.nav-links{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav-links a{
  font-size:14px;color:var(--mut);
  transition:color .18s ease;
  position:relative;padding:4px 0;
}
.nav-links a:hover{color:var(--txt)}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  border-radius:999px;
  padding:11px 22px;
  font-size:14px;font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .16s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--btn-grad);
  color:#fff;
  box-shadow:var(--btn-shadow);
}
.btn-primary:hover{box-shadow:var(--btn-shadow-h)}
.btn-ghost{border-color:var(--line);color:var(--txt);background:transparent}
.btn-ghost:hover{border-color:var(--line-h2);background:var(--hover-tint)}
.btn-lg{padding:14px 28px;font-size:15px}

.nav-burger{
  display:none;background:none;border:1px solid var(--line);
  border-radius:10px;width:40px;height:38px;color:var(--txt);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
}
.nav-burger span::before{top:-5px}
.nav-burger span::after{top:5px}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 96px;overflow:hidden}
#sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 78% 8%,var(--hero-wash),transparent 58%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:60px;align-items:center}

.hero-tag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 15px;margin-bottom:26px;
  background:var(--tag-bg);
}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--grn);flex:none}

.hero h1{font-size:clamp(34px,4.4vw,53px);line-height:1.06;margin:0 0 20px}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--grad-1),var(--grad-2) 38%,var(--grad-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{font-size:clamp(16px,1.7vw,19px);color:var(--mut);max-width:52ch;margin:0 0 34px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:38px}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  border-top:1px solid var(--line-soft);padding-top:24px;
}
.hero-stats div span{
  display:block;font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.025em;
  line-height:1.2;margin-bottom:2px;
}
.hero-stats div small{
  font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
}

/* ---------- painel de resposta (elemento-assinatura) ---------- */
.answer{
  background:var(--panel-grad);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.answer-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);
  background:var(--card-deep);
}
.answer-bar i{width:9px;height:9px;border-radius:50%;background:var(--dot);display:block}
.answer-bar b{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-left:8px;
}
.answer-body{padding:22px 20px 20px}
.ask{
  display:flex;gap:11px;align-items:flex-start;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed var(--line-soft);
}
.ask .who{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);flex:none;padding-top:4px;width:34px;
}
.ask p{margin:0;font-size:15px;color:var(--txt)}
.reply p{margin:0 0 14px;font-size:14.5px;color:var(--mut);min-height:1.6em}
.reply p strong{color:var(--txt);font-weight:600}
.reply .num{font-family:var(--mono);color:var(--cya);font-weight:500}
.cursor{
  display:inline-block;width:7px;height:16px;vertical-align:-3px;
  background:var(--cya);margin-left:2px;animation:blink 1.05s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

.prov[hidden]{display:none}
.prov{display:flex;flex-wrap:wrap;gap:7px;padding-top:14px;border-top:1px solid var(--line-soft)}
.prov span{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--mut);
  display:inline-flex;align-items:center;gap:6px;
}
.prov span::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.prov .live{color:var(--grn);border-color:rgba(52,211,153,.32)}
.prov .ref{color:var(--cya);border-color:rgba(56,189,248,.32)}
.prov .est{color:var(--amb);border-color:rgba(245,184,65,.32)}


/* ---------- lockup da marca: BGx Polaris + powered by BlueGas ---------- */
.lockup{
  --lk:28px;
  display:inline-flex;flex-direction:column;align-items:flex-end;
  gap:.30em;line-height:1;
}
.lockup-word{display:block;height:var(--lk);width:auto}
.lockup-by{
  display:flex;align-items:center;gap:.38em;white-space:nowrap;
  font-family:var(--display);
  font-size:calc(var(--lk) * .315);
  line-height:1;margin-right:.06em;
}
.lockup-by em{font-style:normal;font-weight:400;color:var(--mut)}
.lockup-by img{height:calc(var(--lk) * .40);width:auto;flex:none}
.lockup-by b{font-weight:700;color:#fff;letter-spacing:-.01em}

/* ---------- cartões genéricos ---------- */
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:26px 22px;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
.card:hover{border-color:var(--line-h1);transform:translateY(-2px)}
.chip{width:9px;height:9px;border-radius:3px;display:block;margin-bottom:16px}
.card h3{font-size:12px;font-family:var(--mono);font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;margin:0 0 10px}
.card p{margin:0;font-size:14px;color:var(--mut);line-height:1.6}


/* ---------- bloco das inteligências ---------- */
.intel{
  margin-top:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--band-grad);
  padding:30px 28px;
}
.intel-head{display:flex;align-items:baseline;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.intel-n{
  font-family:var(--display);font-size:44px;font-weight:600;letter-spacing:-.04em;
  line-height:1;color:var(--vio);flex:none;
}
.intel-head h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.intel-head p{margin:0;font-size:14px;color:var(--mut)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{
  font-size:13.5px;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;transition:border-color .2s ease,color .2s ease;
}
.pills span:hover{border-color:var(--line-h1)}
.intel-foot{
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:14px;color:var(--mut);max-width:72ch;
}
.intel-foot b{color:var(--txt);font-weight:600}

/* ---------- apps ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.app-group{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px}
.app-group header{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.app-group header h3{font-family:var(--display);font-size:15px;letter-spacing:-.01em;text-transform:none;margin:0}
.app-group header b{
  margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;
}
.app-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.app-list li{
  padding:9px 0;border-top:1px solid var(--line-soft);
  transition:padding-left .2s ease;
}
.app-list li:first-child{border-top:0;padding-top:0}
.app-list li:hover{padding-left:6px}
.app-list b{display:block;font-size:13.5px;font-weight:500;color:var(--txt)}
.app-list span{display:block;font-size:11.5px;color:var(--dim);line-height:1.45}

/* ---------- camadas ---------- */
.layers{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.layer{
  display:grid;grid-template-columns:52px 210px 1fr;align-items:center;gap:18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 22px;
  transition:border-color .2s ease,background .2s ease;
}
.layer:hover{border-color:var(--line-h1);background:var(--card-hover)}
.layer .n{font-family:var(--mono);font-size:13px;font-weight:600}
.layer .t{font-family:var(--display);font-size:15px;font-weight:600}
.layer .d{font-size:13.5px;color:var(--mut)}

.cross{background:var(--card-deep)}
.cross h3{color:var(--txt);font-family:var(--display);font-size:15px;letter-spacing:-.01em;text-transform:none;line-height:1.25}

/* ---------- faixa de números ---------- */
.band{
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--band-grad);
  padding:34px 30px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
}
.band div span{display:block;font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.03em}
.band div small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ---------- dados ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kv{list-style:none;margin:0;padding:0}
.kv li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line-soft);align-items:flex-start}
.kv li:first-child{border-top:0}
.kv i{width:8px;height:8px;border-radius:2px;flex:none;margin-top:7px}
.kv b{font-size:13.5px;font-weight:600;color:var(--txt);display:block}
.kv span{font-size:13px;color:var(--mut)}

/* ---------- CTA ---------- */
.cta{
  border:1px solid var(--line);border-radius:var(--r);
  background:
    var(--cta-grad);
  padding:64px 48px;text-align:center;
}
.cta h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 14px}
.cta p{color:var(--mut);max-width:52ch;margin:0 auto 30px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- rodapé ---------- */
.foot{border-top:1px solid var(--line-soft);padding:56px 0 40px;background:var(--bg-soft)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.foot .lockup{--lk:38px;margin-bottom:18px}
.foot p{font-size:13.5px;color:var(--dim);max-width:34ch;margin:0}
.foot h4{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot ul a{font-size:13.5px;color:var(--mut);transition:color .18s ease}
.foot ul a:hover{color:var(--txt)}

.powered{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.powered small{font-size:12px;color:var(--faint)}

/* ---------- página de login ---------- */
.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-aside{
  position:relative;overflow:hidden;
  padding:56px 52px;display:flex;flex-direction:column;justify-content:space-between;
  border-right:1px solid var(--line-soft);
  background:var(--aside-grad);
}
.login-aside #sky{opacity:.7}
.login-aside > *{position:relative;z-index:2}
.login-aside .quote{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);font-weight:500;line-height:1.2;max-width:16ch}
.login-aside .quote em{font-style:normal;color:var(--cya)}
.login-aside .note{font-size:14px;color:var(--mut);max-width:40ch;margin:18px 0 0}

.login-main{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.login-box{width:100%;max-width:400px}
.login-box .brand{height:28px;margin-bottom:38px}
.login-box h1{font-size:26px;margin:0 0 8px}
.login-box .sub{color:var(--mut);font-size:14.5px;margin:0 0 30px}

.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px;
}
.field input{
  width:100%;padding:13px 15px;
  background:var(--input-bg);border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-size:15px;font-family:var(--body);
  transition:border-color .18s ease,background .18s ease;
}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none;border-color:var(--line-h3);background:var(--input-bg-focus)}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 22px}
.field-row label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut);cursor:pointer}
.field-row a{font-size:13px;color:var(--cya)}
.field-row a:hover{text-decoration:underline}
.btn-block{width:100%;justify-content:center}

.divider{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--faint)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.divider span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase}

.sso{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px;background:transparent;border:1px solid var(--line);border-radius:10px;
  color:var(--txt);font-size:14px;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.sso:hover{border-color:var(--line-h2);background:var(--hover-tint)}
.login-foot{margin-top:30px;font-size:12.5px;color:var(--dim);text-align:center}
.login-foot a{color:var(--mut)}
.login-foot a:hover{color:var(--txt)}

.alert{
  display:none;gap:10px;align-items:flex-start;
  background:var(--alert-bg);border:1px solid var(--alert-line);
  border-radius:10px;padding:12px 14px;margin-bottom:18px;
  font-size:13px;color:var(--alert-txt);
}
.alert.show{display:flex}

/* ---------- revelação no scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .apps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .login-page{grid-template-columns:1fr}
  .login-aside{display:none}
  .nav-links{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--bg-soft);border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px -26px rgba(0,0,0,.5);
    padding:8px 24px 18px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-top:1px solid var(--line-soft)}
  .nav-burger{display:flex}
  .nav-inner{gap:14px}
}
@media (max-width:720px){
  .section{padding:72px 0}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .g-3,.g-4,.g-5,.split,.band{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
  .apps-grid{grid-template-columns:1fr}
  .layer{grid-template-columns:38px 1fr;row-gap:6px}
  .layer .d{grid-column:2}
  .cta{padding:44px 24px}
  .foot-grid{grid-template-columns:1fr}
  .band{gap:22px}
  .powered{flex-direction:column;align-items:flex-start}
}

@media (max-width:480px){
  .nav-inner .lockup{--lk:21px}
  .nav-cta .btn-primary{padding:9px 15px;font-size:13px}
  .hero{padding:52px 0 72px}
  .answer-body{padding:18px 16px}
}

/* ============================================================
   PORTAL DE DADOS E INTELIGÊNCIA
   ============================================================ */

/* ---------- faixa de destaque no site principal ---------- */
.portal-band{
  display:grid;grid-template-columns:1fr 240px;gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);
  background:
    var(--portal-grad);
  padding:34px 34px 34px 38px;position:relative;overflow:hidden;
  transition:border-color .22s ease,transform .22s ease;
}
.portal-band:hover{border-color:var(--line-h3);transform:translateY(-2px)}
.portal-band .tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--grn);margin-bottom:14px;
}
.portal-band .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grn)}
.portal-band h3{font-family:var(--display);font-size:clamp(21px,2.4vw,27px);margin:0 0 10px;letter-spacing:-.025em}
.portal-band p{margin:0 0 20px;color:var(--mut);font-size:14.5px;max-width:56ch}
.portal-band .go{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:500;color:var(--txt);
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;
  transition:border-color .2s ease,background .2s ease;
}
.portal-band:hover .go{border-color:var(--line-h3);background:var(--accent-tint)}
.portal-band figure{margin:0;opacity:.9}
.portal-band figure img{width:100%;height:auto}

/* ---------- moldura do produto ---------- */
.frame{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card-deep);
  box-shadow:var(--shadow-xl);
}
.frame-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel-bg);
}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:var(--dot)}
.frame-bar b{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-left:8px;
}
.frame-bar .live{margin-left:auto;color:var(--grn);display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.frame-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grn)}

.frame-body{display:grid;grid-template-columns:236px 1fr;min-height:478px;position:relative}
.frame-panel{border-right:1px solid var(--line-soft);padding:18px 16px;background:var(--panel-bg)}
.frame-panel h4{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin:0 0 10px;
}
.frame-panel h4 + .vgroup{margin-bottom:16px}
.vgroup{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.vrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px;color:var(--mut)}
.vrow i{width:7px;height:7px;border-radius:2px;flex:none}
.vrow .sw{
  margin-left:auto;width:24px;height:13px;border-radius:999px;background:var(--track);
  border:1px solid var(--line);position:relative;flex:none;
}
.vrow .sw::after{
  content:"";position:absolute;top:1px;left:1px;width:9px;height:9px;border-radius:50%;background:var(--knob);
}
.vrow.on{color:var(--txt)}
.vrow.on .sw{background:var(--accent-tint-2);border-color:var(--line-h3)}
.vrow.on .sw::after{left:auto;right:1px;background:var(--accent-knob)}

.frame-map{
  position:relative;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;
  background-color:var(--map-bg);
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
}
.frame-map > img{height:448px;width:auto;max-width:100%}

.map-tip{
  position:absolute;left:14%;bottom:16%;
  background:var(--float-bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;min-width:186px;backdrop-filter:blur(8px);
}
.map-tip b{display:block;font-size:12.5px;color:var(--txt);margin-bottom:6px}
.map-tip dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;
  font-family:var(--mono);font-size:10px;color:var(--dim)}
.map-tip dd{margin:0;color:var(--mut);text-align:right}
.map-tip .prov{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.map-tip .prov span{font-size:9px;padding:3px 8px}

.metric-strip{
  position:absolute;right:16px;top:16px;
  background:var(--float-bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;display:flex;gap:20px;backdrop-filter:blur(8px);
}
.metric-strip div span{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.metric-strip div small{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ---------- selos de natureza ---------- */
.natures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nature{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.nature .badge{
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:600;margin-bottom:16px;
}
.nature h3{font-family:var(--display);font-size:16px;letter-spacing:-.015em;margin:0 0 8px;text-transform:none}
.nature p{margin:0;font-size:13.5px;color:var(--mut);line-height:1.6}

/* ---------- perfis ---------- */
.profiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.profile{display:grid;grid-template-columns:190px 1fr;gap:20px;
  padding:18px 0;border-top:1px solid var(--line-soft);align-items:start}
.profile b{font-size:14px;font-weight:600;color:var(--txt);font-family:var(--display);letter-spacing:-.01em}
.profile span{font-size:13.5px;color:var(--mut);line-height:1.6}

@media (max-width:1080px){
  .frame-body{grid-template-columns:200px 1fr}
  .natures{grid-template-columns:1fr}
  .profiles{grid-template-columns:1fr}
}
@media (max-width:820px){
  .portal-band{grid-template-columns:1fr}
  .portal-band figure{display:none}
  .frame-panel{display:none}
  .frame-body{grid-template-columns:1fr;min-height:0}
  .map-tip,.metric-strip,.frame-bar .live{display:none}
  .frame-map{padding:8px}
  .frame-map > img{height:auto;width:100%}
  .profile{grid-template-columns:1fr;gap:4px}
}

/* ============================================================
   TEMA CLARO
   Papel levemente azulado, cartões brancos, sombras difusas.
   Acentos escurecidos para manter contraste AA sobre branco.
   ============================================================ */
[data-theme="light"]{
  /* Fundo de papel azulado. Os cartões são brancos puros —
     é o degrau entre os dois que faz o conteúdo existir. */
  --bg:#E7EDF6;
  --bg-soft:#FFFFFF;
  --card:#FFFFFF;
  --card-deep:#FFFFFF;
  --line:#B9C9E2;
  --line-soft:#D2DDEE;

  --txt:#0B1524;
  --mut:#3E4D66;
  --dim:#59687F;
  --faint:#8B9BB3;

  --vio:#5236D8;
  --cya:#1266C7;
  --tea:#0A8578;
  --grn:#07804F;
  --amb:#9A6304;

  --nav-bg:rgba(231,237,246,.86);
  --nav-bg-stuck:rgba(255,255,255,.97);
  --nav-bg-open:#FFFFFF;
  --hover-tint:rgba(11,21,36,.05);
  --line-h1:#A2B7D6; --line-h2:#8AA5CC; --line-h3:#4E8AD6;
  --card-hover:#F6F9FE;
  --tag-bg:#FFFFFF;
  --hero-wash:rgba(18,102,199,.16);
  --panel-grad:linear-gradient(180deg,#FFFFFF,#F6FAFF);
  --panel-bg:#EBF1FA;
  --band-grad:linear-gradient(120deg,#FFFFFF,#E9F1FD);
  --cta-grad:radial-gradient(90% 140% at 82% 0%,rgba(82,54,216,.14),transparent 60%),linear-gradient(160deg,#FFFFFF,#E6EEFB);
  --portal-grad:radial-gradient(80% 130% at 88% 20%,rgba(18,102,199,.18),transparent 60%),linear-gradient(150deg,#FFFFFF,#E4EEFC);
  --aside-grad:linear-gradient(165deg,#D9E4F5,#EBF1FA);
  --float-bg:rgba(255,255,255,.97);
  --map-bg:#F3F7FD;
  --grid-line:rgba(18,102,199,.16);
  --dot:#B0C1D9; --track:#D3DEEE; --knob:#8496B0;
  --accent-tint:rgba(18,102,199,.10);
  --accent-tint-2:rgba(18,102,199,.26);
  --accent-knob:#1266C7;
  --input-bg:#FFFFFF; --input-bg-focus:#FFFFFF;
  --grad-1:#2E8FE0; --grad-2:#1266C7; --grad-3:#5236D8;
  --btn-grad:linear-gradient(135deg,#1F6FD4,#5236D8);
  --btn-shadow:0 10px 22px -10px rgba(82,54,216,.6);
  --btn-shadow-h:0 14px 28px -10px rgba(82,54,216,.75);
  --shadow-xl:0 30px 62px -30px rgba(14,34,68,.4);
  --alert-bg:#FDF4E3; --alert-line:#D8AE63; --alert-txt:#6E4B02;
  --sky-star:18,102,199; --sky-link:82,54,216; --sky-pole:18,102,199;
}

/* Cartões brancos com borda visível e sombra que assenta no papel */
[data-theme="light"] .card,
[data-theme="light"] .app-group,
[data-theme="light"] .layer,
[data-theme="light"] .nature,
[data-theme="light"] .pills span{
  box-shadow:0 1px 1px rgba(14,34,68,.05),0 10px 22px -14px rgba(14,34,68,.28);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .layer:hover{
  box-shadow:0 2px 3px rgba(14,34,68,.07),0 18px 34px -16px rgba(14,34,68,.34);
}
[data-theme="light"] .answer,
[data-theme="light"] .frame,
[data-theme="light"] .intel,
[data-theme="light"] .band,
[data-theme="light"] .cta,
[data-theme="light"] .portal-band{
  box-shadow:0 2px 4px rgba(14,34,68,.06),0 30px 64px -32px rgba(14,34,68,.42);
}
[data-theme="light"] .map-tip,
[data-theme="light"] .metric-strip{box-shadow:0 12px 30px -12px rgba(14,34,68,.4)}

/* Rodapé branco corta o papel e fecha a página */
[data-theme="light"] .foot{background:#FFFFFF;border-top:1px solid var(--line)}

/* Detalhes que sumiam no claro */
[data-theme="light"] .lockup-by b{color:var(--txt)}
[data-theme="light"] .frame-bar{background:var(--panel-bg)}
[data-theme="light"] .vrow .sw::after{background:var(--knob)}
[data-theme="light"] .vrow.on .sw{background:var(--cya);border-color:var(--cya)}
[data-theme="light"] .vrow.on .sw::after{background:#FFFFFF}
[data-theme="light"] .nature .badge{font-weight:700}
[data-theme="light"] .prov span{background:#fff}
[data-theme="light"] .eyebrow::before{background:var(--line-h1)}
[data-theme="light"] .ask{border-bottom-color:var(--line)}
[data-theme="light"] .hero-tag{box-shadow:0 1px 2px rgba(14,34,68,.06)}
[data-theme="light"] #sky{opacity:.32}

/* Números e rótulos precisam de peso a mais sobre branco */
[data-theme="light"] .hero-stats div span,
[data-theme="light"] .band div span,
[data-theme="light"] .intel-n{font-weight:700}
[data-theme="light"] .eyebrow,
[data-theme="light"] .card h3,
[data-theme="light"] .app-group header b{font-weight:700}

/* Troca de marca e mapa conforme o tema */
.only-light{display:none}
[data-theme="light"] .only-dark{display:none}
[data-theme="light"] .only-light{display:block}

/* ---------- botão de tema ---------- */
.theme-toggle{
  width:38px;height:38px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--mut);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.theme-toggle:hover{color:var(--txt);border-color:var(--line-h2);background:var(--hover-tint);transform:translateY(-1px)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:block}

/* ============================================================
   UX — transição de tema, orientação e retorno ao topo
   ============================================================ */

/* A troca de tema acontece com fade, não com corte seco */
html.theming *, html.theming *::before, html.theming *::after{
  transition:background-color .32s ease,color .32s ease,border-color .32s ease,
             box-shadow .32s ease,fill .32s ease !important;
}

/* Onde estou: o link da seção visível fica aceso */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--cya);transform:scaleX(0);transform-origin:center;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.nav-links a.active{color:var(--txt)}
.nav-links a.active::after{transform:scaleX(1)}

/* Voltar ao topo */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:44px;height:44px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--float-bg);border:1px solid var(--line);color:var(--mut);
  cursor:pointer;box-shadow:var(--shadow-xl);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,color .2s ease,border-color .2s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--txt);border-color:var(--line-h2)}
.to-top svg{width:17px;height:17px}

/* Alvos de toque maiores e rolagem que não esconde o título sob a nav */
:target{scroll-margin-top:92px}
section[id]{scroll-margin-top:82px}
@media (max-width:720px){
  .nav-links a{padding:14px 0}
  .to-top{right:16px;bottom:16px}
}

/* Tema claro: a constelação é um detalhe, não um ruído */
[data-theme="light"] #sky{opacity:.4}

/* ---------- seletor de idioma ---------- */
.lang{
  display:flex;align-items:center;gap:2px;flex:none;
  border:1px solid var(--line);border-radius:999px;padding:3px;
}
.lang a{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  padding:5px 9px;border-radius:999px;color:var(--dim);line-height:1;
  transition:color .2s ease,background .2s ease;
}
.lang a:hover{color:var(--txt)}
.lang a.on{background:var(--hover-tint);color:var(--txt)}
@media (max-width:480px){
  .lang a{padding:5px 7px;font-size:10px}
}

/* ---------- slogan ---------- */
.slogan{
  padding:96px 0;text-align:center;position:relative;
  border-top:1px solid var(--line-soft);
}
.slogan-star{
  width:26px;height:auto;margin:0 auto 26px;opacity:.9;
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.slogan-star{animation:none;opacity:.9}}
.slogan p{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(26px,4.2vw,46px);line-height:1.15;
  margin:0 auto;max-width:20ch;
}
.slogan em{font-style:normal;color:var(--cya);display:block}
.slogan span{
  display:block;margin-top:14px;
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(19px,2.7vw,30px);line-height:1.15;color:var(--mut);
}
@media (max-width:720px){.slogan{padding:68px 0}}

/* ---------- lista de variáveis com selo de natureza ---------- */
.src-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.src-list li{
  display:flex;align-items:center;gap:10px;
  padding:7px 0;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--txt);line-height:1.35;
}
.src-list li:first-child{border-top:0}
.src-list .dot{width:6px;height:6px;border-radius:50%;flex:none}
.seal{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:5px;
  font-family:var(--mono);font-size:9px;font-weight:600;
}
.seal-c{background:rgba(52,211,153,.14);color:var(--grn)}
.seal-d{background:rgba(96,180,249,.14);color:var(--cya)}
.seal-m{background:rgba(245,184,65,.14);color:var(--amb)}
[data-theme="light"] .seal-c{background:rgba(7,128,79,.11)}
[data-theme="light"] .seal-d{background:rgba(18,102,199,.11)}
[data-theme="light"] .seal-m{background:rgba(154,99,4,.11)}

.legend{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--mut);
}
.legend b{display:flex;align-items:center;gap:8px;font-weight:400}
.legend .seal{margin-left:0}

/* busca do painel no mockup */
.frame-search{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;margin-bottom:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;
  font-size:12px;color:var(--faint);
}
.frame-search svg{width:13px;height:13px;flex:none;opacity:.7}
.frame-search .count{
  margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--cya);
}

/* linha de fecho do hero, na mesma tipografia do título */
.hero-kicker{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(17px,2.1vw,25px);line-height:1.15;color:var(--mut);
  margin:14px 0 26px;
}

/* ---------- marca do Portal: BGx + Portal ---------- */
.wm{display:inline-flex;align-items:baseline;gap:.30em;line-height:1;padding-top:.26em}
.wm-bgx{height:calc(var(--lk) * .82);width:auto;align-self:center}
[data-theme="light"] img.wm-bgx.only-light{display:block}
[data-theme="light"] img.wm-star.only-light{display:block}
.wm-word{
  font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:var(--lk);line-height:1;color:#60B4F9;position:relative;
  display:inline-block;padding-right:.30em;
}
[data-theme="light"] .wm-word{color:#1266C7}
.wm-word .wm-star{
  position:absolute;top:-.22em;right:-.04em;
  width:.36em;height:auto;
}

.lockup-portal .lockup-by{margin-top:.34em}

/* faixa do portal usada como hero do próprio site */
.portal-band--hero{
  grid-template-columns:1fr 300px;
  padding:46px 46px 46px 50px;
}
.portal-band--hero:hover{transform:none;border-color:var(--line)}
.portal-band--hero:hover .go{border-color:var(--line);background:transparent}
.portal-band--hero h1{
  font-size:clamp(29px,3.9vw,47px);letter-spacing:-.03em;line-height:1.07;margin:0 0 16px;
}
.portal-band--hero p{font-size:16px;max-width:52ch;margin-bottom:28px}
.portal-band--hero .tag{margin-bottom:18px}
.nav-inner .lockup-portal{--lk:22px}
@media (max-width:820px){
  .portal-band--hero{grid-template-columns:1fr;padding:32px 24px}
  .portal-band--hero figure{display:block;max-width:220px;margin-top:8px}
}