:root{
  --bg:#04101c;
  --panel:#07182a;
  --text:#f6fbff;
  --muted:#a7b6c8;
  --line:rgba(255,255,255,.10);
  --blue:#19a9ff;
  --green:#66db37;
  --purple:#9a47ff;
  --orange:#ff9a19;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -10%,rgba(24,123,255,.14),transparent 28%),
    #030b14;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

.top-progress{
  position:fixed;top:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.05);z-index:200;
}
.top-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--green),var(--purple),var(--orange));
}

.nav{
  position:fixed;top:3px;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 6vw;background:rgba(3,11,20,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{font-weight:800;font-size:22px;letter-spacing:.05em}
.logo span{color:#b05cff}
.nav-links{display:flex;gap:26px;color:var(--muted);font-size:14px}
.nav-links a:hover{color:white}
.nav-cta{
  padding:10px 15px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.05);font-weight:700;
}

.section{padding:120px 7vw;position:relative}

.hero{
  min-height:100vh;display:grid;
  grid-template-columns:1.02fr .98fr;gap:6vw;align-items:center;
  padding:140px 7vw 90px;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 70% 35%,rgba(23,130,255,.16),transparent 30%);
  pointer-events:none;
}
.kicker,.eyebrow,.section-title>span{
  font-size:12px;letter-spacing:.16em;font-weight:800;color:#7bc8ff;
}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;letter-spacing:-.04em;margin:0}
h1{font-size:clamp(54px,7vw,100px);line-height:.98;margin-top:18px}
h1 span{color:#7f55ff}
.hero-copy p,.copy p,.section-title p{
  color:var(--muted);font-size:clamp(17px,1.3vw,21px);line-height:1.7;max-width:760px;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;padding:14px 20px;border-radius:12px;font-weight:800}
.btn.primary{
  background:linear-gradient(135deg,#15a4ff,#7b5cff);
  box-shadow:0 16px 40px rgba(21,164,255,.18);
}
.btn.ghost{border:1px solid var(--line);background:rgba(255,255,255,.04)}

.hero-features{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:44px;
}
.hero-features div{padding:15px 0;border-top:1px solid var(--line)}
.hero-features b{display:block}
.hero-features span{font-size:12px;color:var(--muted)}

.hero-visual{
  display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center;
}
.phone{
  max-width:340px;margin:auto;padding:10px;border-radius:45px;
  background:linear-gradient(180deg,#222,#070707);
  box-shadow:0 35px 80px rgba(0,0,0,.45);
}
.phone-screen{
  background:linear-gradient(180deg,#06111f,#0a1829);
  border-radius:36px;padding:28px 18px 22px;min-height:640px;
}
.phone-top{
  width:34%;height:20px;border-radius:0 0 16px 16px;background:#000;
  margin:0 auto -10px;position:relative;z-index:2;
}
.appbar{display:flex;justify-content:space-between;font-size:14px}
.hello{margin:22px 0}
.hello small{display:block;color:var(--muted);margin-top:5px}
.benefit-card{
  padding:18px;border-radius:18px;
  background:linear-gradient(135deg,#32134d,#0d3162);
  border:1px solid rgba(255,255,255,.1);
}
.benefit-card small,.benefit-card strong{display:block}
.benefit-card strong{font-size:21px;margin:8px 0 14px}
.benefit-card button{border:0;border-radius:10px;padding:9px 12px;font-weight:700}
.app-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px;
}
.app-grid div{
  background:rgba(255,255,255,.05);border-radius:13px;
  padding:14px 8px;text-align:center;
}
.app-grid span{display:block;font-size:10px;color:var(--muted);margin-top:5px}

.pillar-tubes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tube{
  height:210px;border:1px solid rgba(255,255,255,.16);border-radius:20px;
  padding:18px 14px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:inset 0 0 35px rgba(255,255,255,.06);
}
.tube i{font-style:normal;font-weight:800;font-size:28px;margin-bottom:auto}
.tube b{font-size:15px}
.tube span{font-size:11px;color:#d7e4ef}
.blue{background:linear-gradient(180deg,rgba(25,169,255,.35),rgba(25,169,255,.08))}
.green{background:linear-gradient(180deg,rgba(102,219,55,.35),rgba(102,219,55,.08))}
.purple{background:linear-gradient(180deg,rgba(154,71,255,.35),rgba(154,71,255,.08))}
.orange{background:linear-gradient(180deg,rgba(255,154,25,.35),rgba(255,154,25,.08))}

.intro{min-height:75vh}
.section-title{max-width:980px;margin-bottom:50px}
.section-title h2,.copy h2{
  font-size:clamp(42px,5vw,74px);line-height:1.03;margin-top:12px;
}
.section-title em,.copy em{font-style:normal}

.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mini-card{
  padding:28px;border-radius:24px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);min-height:220px;
}
.mini-card b{font-size:12px}
.mini-card h3{font-size:28px;margin:50px 0 10px}
.mini-card p{color:var(--muted);line-height:1.5}
.c1{box-shadow:inset 0 -3px var(--blue)}
.c2{box-shadow:inset 0 -3px var(--green)}
.c3{box-shadow:inset 0 -3px var(--purple)}
.c4{box-shadow:inset 0 -3px var(--orange)}

.pillar{border-top:1px solid var(--line)}
.blue-section{background:linear-gradient(180deg,rgba(0,119,255,.08),transparent)}
.green-section{background:linear-gradient(180deg,rgba(74,193,35,.08),transparent)}
.purple-section{background:linear-gradient(180deg,rgba(146,44,255,.08),transparent)}
.orange-section{background:linear-gradient(180deg,rgba(255,139,0,.08),transparent)}

.blue-section .eyebrow,.blue-section em{color:var(--blue)}
.green-section .eyebrow,.green-section em{color:var(--green)}
.purple-section .section-title>span,.purple-section em{color:var(--purple)}
.orange-section .eyebrow,.orange-section em{color:var(--orange)}

.section-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;
}
.section-grid.reverse .copy{order:2}
.section-grid.reverse>div:last-child{order:1}
.copy p{margin:24px 0}
.checks{display:grid;gap:12px;margin-top:28px}
.checks div{
  padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:13px;
}

/* PILAR 1 - MIDIAS */
.media-board{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.78fr);
  grid-template-areas:
    "out gift"
    "small gift";
  gap:16px;
  align-items:stretch;
}
.media-card{
  margin:0;position:relative;overflow:hidden;border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:#07182a;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.outdoor-card{grid-area:out;min-height:330px}
.media-small{
  grid-area:small;display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.media-small .media-card{min-height:260px}
.media-card img{
  width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .45s ease,filter .45s ease;
}
.media-card:hover img{transform:scale(1.025);filter:brightness(1.05)}
.media-card figcaption{
  position:absolute;left:14px;bottom:14px;padding:8px 11px;
  border-radius:999px;background:rgba(3,11,20,.72);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;
}
.gift{
  grid-area:gift;padding:28px;border-radius:24px;
  border:1px solid rgba(25,169,255,.24);
  background:
    radial-gradient(circle at top right,rgba(154,71,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(16,42,69,.82),rgba(7,20,35,.95));
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 22px 60px rgba(0,0,0,.28);
}
.gift-label{
  font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--blue);
}
.gift strong{font-size:34px;margin:10px 0}
.gift p{font-size:18px;color:#dfe9f6;margin:0 0 20px}
.gift button{
  border:0;border-radius:12px;padding:13px 15px;font-weight:800;
  background:linear-gradient(135deg,#19a9ff,#7b5cff);color:#fff;
}
.gift-features{
  display:grid;gap:10px;margin-top:26px;color:#cdd9e6;font-size:13px;
}

.journey{
  display:flex;align-items:stretch;gap:10px;margin-top:50px;flex-wrap:wrap;
}
.journey div{
  flex:1;min-width:120px;padding:18px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.035);
}
.journey b{display:block;color:var(--blue);margin-bottom:18px}
.journey i{display:grid;place-items:center;color:var(--muted)}
.journey .highlight{background:rgba(25,169,255,.13)}

.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tags span{
  padding:10px 13px;border-radius:999px;
  border:1px solid rgba(102,219,55,.25);background:rgba(102,219,55,.07);
}

.wellness-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:14px}
.wellness-card,.ranking-card,.benefits-card,.ai-card{
  border:1px solid rgba(102,219,55,.24);border-radius:18px;
  padding:22px;background:rgba(12,38,16,.5);
}
.wellness-card h3{font-size:44px;margin:38px 0 4px}
.ranking-card{grid-row:span 2}
.rank-head{display:flex;justify-content:space-between}
.ranking-card ol{list-style:none;padding:0;margin:18px 0 0}
.ranking-card li{
  display:flex;justify-content:space-between;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.benefits-card div{padding:9px 0}
.ai-card p{font-size:14px;color:#dbe7df}

.content-ecosystem{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.eco-card{
  padding:30px;border-radius:20px;border:1px solid rgba(154,71,255,.25);
  background:rgba(45,14,81,.34);text-align:center;
}
.eco-card span{font-size:36px;display:block}
.eco-card b{display:block;font-size:22px;margin:16px 0 6px}
.eco-card small{color:var(--muted)}

.tax-note{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;
}
.tax-note>div{
  padding:24px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);
}
.tax-note strong{font-size:22px}
.tax-note p{color:var(--muted);line-height:1.6}

.offers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.offer-card{
  padding:24px;border-radius:20px;border:1px solid rgba(255,154,25,.28);
  background:rgba(70,38,6,.38);
}
.offer-card h3{font-size:28px;margin:14px 0}
.offer-card p{color:var(--muted)}
.offer-card button{border:0;border-radius:10px;padding:11px 13px;font-weight:800}
.offer-icons{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.offer-icons span{
  padding:14px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);font-size:13px;
}

.result{background:linear-gradient(180deg,#04111e,#071421)}
.result-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;
}
.cycle{
  position:relative;aspect-ratio:1;max-width:430px;margin:auto;
  border:2px dashed rgba(255,255,255,.16);border-radius:50%;
}
.cycle-center{
  position:absolute;inset:34%;display:grid;place-items:center;
  border-radius:50%;background:linear-gradient(135deg,#0d2741,#151136);font-weight:800;
}
.node{
  position:absolute;width:90px;height:90px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  border:1px solid var(--line);background:#08192b;font-weight:800;
}
.node span{font-size:10px;font-weight:500;color:var(--muted)}
.n1{left:50%;top:-20px;transform:translateX(-50%)}
.n2{right:-20px;top:50%;transform:translateY(-50%)}
.n3{left:50%;bottom:-20px;transform:translateX(-50%)}
.n4{left:-20px;top:50%;transform:translateY(-50%)}

.comparison{
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
}
.comp-head,.comparison>div{display:grid;grid-template-columns:1fr 1fr}
.comp-head span{
  padding:14px;font-weight:800;background:rgba(255,255,255,.06);
}
.comparison>div:not(.comp-head) span,
.comparison>div:not(.comp-head) b{
  padding:15px;border-top:1px solid var(--line);
}
.comparison b{background:rgba(27,142,79,.12);color:#d8ffe3}

.final{min-height:78vh;display:grid;place-items:center}
.final-box{
  max-width:1000px;text-align:center;padding:60px;border:1px solid var(--line);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 0,rgba(91,68,255,.18),transparent 35%),
    rgba(255,255,255,.035);
}
.final-box span{
  color:#8aa4c2;font-size:12px;letter-spacing:.16em;font-weight:800;
}
.final-box h2{font-size:clamp(46px,6vw,86px);margin:14px 0}
.final-box p{
  color:var(--muted);font-size:20px;line-height:1.7;
  max-width:760px;margin:0 auto 30px;
}

.reveal{
  opacity:0;transform:translateY(22px);
  transition:.7s ease;
}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
.delay-3{transition-delay:.32s}

@media(max-width:1100px){
  .media-board{
    grid-template-columns:1fr;
    grid-template-areas:"out" "small" "gift";
  }
}

@media(max-width:980px){
  .nav-links{display:none}
  .hero,.section-grid,.result-grid{grid-template-columns:1fr}
  .hero-visual{margin-top:30px}
  .cards4,.content-ecosystem{grid-template-columns:1fr 1fr}
  .section-grid.reverse .copy,.section-grid.reverse>div:last-child{order:initial}
  .hero-features{grid-template-columns:1fr 1fr}
}

@media(max-width:650px){
  .section,.hero{padding-left:20px;padding-right:20px}
  .nav{padding-left:20px;padding-right:20px}
  .nav-cta{display:none}
  .hero-visual{grid-template-columns:1fr}
  .pillar-tubes{grid-template-columns:1fr 1fr}
  .cards4,.content-ecosystem,.tax-note{grid-template-columns:1fr}
  .media-small{grid-template-columns:1fr}
  .wellness-grid,.offers{grid-template-columns:1fr}
  .offer-icons{grid-template-columns:1fr 1fr}
  .journey{flex-direction:column}
  .journey i{transform:rotate(90deg);height:14px}
  .hero-features{grid-template-columns:1fr 1fr}
  .result-grid{gap:70px}
}


/* WHITE-LABEL */
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
}
.hubux-logo{
  font-weight:800;
  font-size:22px;
  letter-spacing:.05em;
}
.hubux-logo span{
  color:var(--purple);
}
.brand-divider{
  color:var(--muted);
  font-weight:800;
}
.provider-name{
  font-size:14px;
  font-weight:800;
  color:#dfe8f2;
}

h1 .highlight{
  color:var(--brand-primary, var(--blue));
}

.btn.primary,
.gift button{
  background:linear-gradient(
    135deg,
    var(--brand-primary, var(--blue)),
    var(--brand-secondary, var(--purple))
  );
}

.gift{
  border-color:color-mix(in srgb, var(--brand-primary, var(--blue)) 30%, transparent);
}

.gift-label{
  color:var(--brand-primary, var(--blue));
}

@media(max-width:650px){
  .provider-name,
  .brand-divider{
    display:none;
  }
}


/* =========================================================
   WHITE-LABEL PREMIUM V2 — PILAR 1
   Refinos visuais para outdoor, banner, totem e gift
   ========================================================= */

#pilar1 .section-grid{
  grid-template-columns:minmax(0,.92fr) minmax(620px,1.08fr);
  gap:5vw;
  align-items:start;
}

#pilar1 .copy{
  position:sticky;
  top:110px;
}

#pilar1 .media-board{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(230px,.72fr);
  grid-template-areas:
    "out gift"
    "small gift";
  gap:18px;
  align-items:stretch;
}

#pilar1 .outdoor-card{
  grid-area:out;
  min-height:0;
  aspect-ratio:16 / 9;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 20%,rgba(25,169,255,.12),transparent 42%),
    #07182a;
  padding:14px;
}

#pilar1 .outdoor-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  border-radius:20px;
  background:#04101c;
}

#pilar1 .media-small{
  grid-area:small;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

#pilar1 .media-small .media-card{
  min-height:0;
  aspect-ratio:4 / 5;
  border-radius:26px;
  padding:10px;
  background:
    radial-gradient(circle at 50% 15%,rgba(25,169,255,.10),transparent 45%),
    #07182a;
}

#pilar1 .media-small .media-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  border-radius:18px;
  background:#04101c;
}

#pilar1 .media-card{
  box-shadow:
    0 22px 60px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.03);
}

#pilar1 .media-card figcaption{
  left:18px;
  bottom:18px;
  padding:9px 14px;
  font-size:12px;
  border-radius:999px;
  background:rgba(3,11,20,.84);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

#pilar1 .gift{
  grid-area:gift;
  min-height:100%;
  padding:32px 28px;
  justify-content:center;
  border-radius:28px;
  background:
    radial-gradient(circle at 70% 0%,rgba(123,92,255,.26),transparent 38%),
    linear-gradient(180deg,rgba(18,43,74,.96),rgba(5,19,34,.98));
  border:1px solid color-mix(in srgb,var(--brand-primary,var(--blue)) 32%,transparent);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}

#pilar1 .gift-label{
  font-size:11px;
  letter-spacing:.16em;
  margin-bottom:8px;
}

#pilar1 .gift strong{
  font-size:clamp(34px,3vw,52px);
  line-height:1;
  margin:10px 0 16px;
}

#pilar1 .gift p{
  font-size:20px;
  line-height:1.35;
  margin-bottom:24px;
}

#pilar1 .gift button{
  width:100%;
  min-height:72px;
  border-radius:18px;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 16px 34px color-mix(in srgb,var(--brand-primary,var(--blue)) 20%,transparent);
}

#pilar1 .gift-features{
  gap:14px;
  margin-top:30px;
  font-size:14px;
}

#pilar1 .checks{
  gap:14px;
}

#pilar1 .checks div{
  min-height:62px;
  display:flex;
  align-items:center;
  font-size:17px;
  padding:16px 18px;
}

#pilar1 .journey{
  margin-top:56px;
}

@media(max-width:1250px){
  #pilar1 .section-grid{
    grid-template-columns:1fr;
  }
  #pilar1 .copy{
    position:static;
  }
  #pilar1 .media-board{
    grid-template-columns:1.4fr .8fr;
  }
}

@media(max-width:900px){
  #pilar1 .media-board{
    grid-template-columns:1fr;
    grid-template-areas:
      "out"
      "small"
      "gift";
  }
  #pilar1 .gift{
    min-height:auto;
  }
}

@media(max-width:650px){
  #pilar1 .media-small{
    grid-template-columns:1fr;
  }
  #pilar1 .outdoor-card{
    aspect-ratio:4 / 3;
  }
  #pilar1 .media-small .media-card{
    aspect-ratio:4 / 5;
  }
}


/* =========================================================
   WHITE-LABEL PREMIUM V3 — PILAR 2 / WELLNESS
   ========================================================= */

#pilar2 .section-grid{
  grid-template-columns:minmax(0,.82fr) minmax(650px,1.18fr);
  gap:5vw;
  align-items:start;
}

#pilar2 .copy{
  position:sticky;
  top:110px;
}

#pilar2 .copy em{
  color:var(--green);
}

.wellness-points{
  display:grid;
  gap:12px;
  margin-top:32px;
}

.wellness-points div{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border:1px solid rgba(102,219,55,.18);
  border-radius:16px;
  background:rgba(102,219,55,.045);
}

.wellness-points b{
  font-size:12px;
  color:var(--green);
}

.wellness-points span{
  font-size:14px;
  color:#d7e5dc;
}

.wellness-dashboard{
  border:1px solid rgba(102,219,55,.18);
  border-radius:30px;
  padding:22px;
  background:
    radial-gradient(circle at 15% 0%,rgba(102,219,55,.08),transparent 30%),
    radial-gradient(circle at 95% 100%,rgba(25,169,255,.08),transparent 35%),
    linear-gradient(180deg,rgba(7,25,19,.96),rgba(5,18,24,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.35);
}

.wellness-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:18px;
}

.dashboard-kicker{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
  color:var(--green);
  margin-bottom:8px;
}

.wellness-top h3{
  font-size:clamp(26px,2.4vw,40px);
  line-height:1.05;
  max-width:520px;
}

.live-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(102,219,55,.18);
  background:rgba(102,219,55,.06);
  color:#cbf7be;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}

.live-badge i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(102,219,55,.08);
}

.wellness-main{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:16px;
}

.challenge-card,
.premium-ranking,
.benefits-panel,
.ai-agent{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.035);
}

.challenge-card{
  padding:20px;
}

.challenge-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.challenge-head small,
.rank-head small,
.panel-title small,
.ai-head small{
  display:block;
  color:#91a5a0;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:800;
}

.challenge-head strong{
  display:block;
  margin-top:6px;
  font-size:24px;
}

.challenge-head>span{
  font-size:28px;
}

.progress-ring{
  width:154px;
  height:154px;
  margin:20px auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    conic-gradient(var(--green) 0 72%,rgba(255,255,255,.08) 72% 100%);
  position:relative;
}

.progress-ring::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:#071b17;
  border:1px solid rgba(255,255,255,.05);
}

.progress-ring-inner{
  position:relative;
  z-index:2;
  text-align:center;
}

.progress-ring-inner b{
  display:block;
  font-size:32px;
}

.progress-ring-inner small{
  color:#91a5a0;
}

.challenge-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.challenge-stats div{
  padding:11px 8px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  text-align:center;
}

.challenge-stats b{
  display:block;
  font-size:13px;
}

.challenge-stats span{
  display:block;
  margin-top:4px;
  color:#91a5a0;
  font-size:9px;
}

.premium-ranking{
  padding:20px;
}

.premium-ranking .rank-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}

.premium-ranking .rank-head b{
  display:block;
  margin-top:5px;
  font-size:20px;
}

.premium-ranking .rank-head>span{
  font-size:10px;
  color:#91a5a0;
}

.premium-ranking ol{
  list-style:none;
  padding:0;
  margin:0;
}

.premium-ranking li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  min-height:45px;
  padding:9px 10px;
  border-top:1px solid rgba(255,255,255,.055);
  border-radius:10px;
}

.premium-ranking li:first-child{
  border-top:0;
}

.premium-ranking li>span{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.premium-ranking li i{
  width:22px;
  font-style:normal;
  text-align:center;
}

.premium-ranking li b{
  font-size:12px;
}

.premium-ranking .podium{
  background:linear-gradient(90deg,rgba(102,219,55,.06),transparent);
}

.wellness-bottom{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:16px;
  margin-top:16px;
}

.benefits-panel,
.ai-agent{
  padding:18px;
}

.panel-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.panel-title b{
  display:block;
  margin-top:4px;
  font-size:17px;
}

.panel-title>span{
  color:var(--green);
}

.benefit-items{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.benefit-items>div{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
}

.benefit-items i{
  font-style:normal;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(102,219,55,.07);
}

.benefit-items b{
  display:block;
  font-size:12px;
}

.benefit-items small{
  display:block;
  margin-top:2px;
  color:#91a5a0;
  font-size:9px;
}

.ai-head{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
}

.ai-avatar{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,var(--green),#20a9ff);
  color:#03110e;
  font-weight:900;
}

.ai-head b{
  display:block;
  margin-top:4px;
  font-size:13px;
}

.online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(102,219,55,.08);
}

.ai-message{
  margin-top:14px;
  padding:13px 14px;
  border-radius:14px 14px 14px 4px;
  background:rgba(255,255,255,.055);
  color:#e5f0ec;
  font-size:12px;
  line-height:1.55;
}

.ai-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}

.ai-actions span{
  padding:8px 9px;
  border-radius:999px;
  border:1px solid rgba(102,219,55,.13);
  background:rgba(102,219,55,.04);
  color:#cfe4db;
  font-size:9px;
}

.community-strip{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:13px 15px;
  border-radius:16px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055);
}

.avatars{
  display:flex;
}

.avatars span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  margin-left:-6px;
  border:2px solid #071b17;
  background:linear-gradient(135deg,#143d31,#0c2532);
  font-size:8px;
  font-weight:800;
}

.avatars span:first-child{
  margin-left:0;
}

.community-strip p{
  margin:0;
  color:#9fb2ab;
  font-size:11px;
}

.community-strip b{
  color:#edf8f3;
}

@media(max-width:1250px){
  #pilar2 .section-grid{
    grid-template-columns:1fr;
  }

  #pilar2 .copy{
    position:static;
  }
}

@media(max-width:760px){
  .wellness-main,
  .wellness-bottom{
    grid-template-columns:1fr;
  }

  .benefit-items{
    grid-template-columns:1fr;
  }

  .wellness-top{
    flex-direction:column;
  }
}


/* =========================================================
   WHITE-LABEL PREMIUM V4 — PILAR 2 SEM SOBREPOSIÇÃO
   ========================================================= */

#pilar2{
  overflow:hidden;
}

#pilar2 .wellness-intro{
  max-width:1100px;
  margin-bottom:48px;
}

#pilar2 .wellness-intro h2{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(46px,5.4vw,82px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:12px 0 22px;
}

#pilar2 .wellness-intro em{
  color:var(--green);
  font-style:normal;
}

#pilar2 .wellness-intro p{
  max-width:880px;
  color:var(--muted);
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.7;
}

#pilar2 .wellness-intro .tags{
  max-width:1000px;
}

#pilar2 .wellness-dashboard{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  min-width:0;
  padding:24px;
}

#pilar2 .wellness-top h3{
  max-width:700px;
}

.wellness-grid-v4{
  display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(300px,1fr) minmax(280px,.95fr);
  gap:16px;
  align-items:stretch;
  min-width:0;
}

.wellness-grid-v4 > *{
  min-width:0;
}

.wellness-side{
  display:grid;
  gap:16px;
  min-width:0;
}

.wellness-grid-v4 .challenge-card,
.wellness-grid-v4 .premium-ranking,
.wellness-grid-v4 .benefits-panel,
.wellness-grid-v4 .ai-agent{
  height:100%;
}

.wellness-grid-v4 .premium-ranking li{
  min-width:0;
}

.wellness-grid-v4 .premium-ranking li span{
  min-width:0;
}

.wellness-grid-v4 .benefit-items{
  grid-template-columns:1fr;
}

.wellness-footer{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:16px;
  margin-top:16px;
  align-items:stretch;
}

#pilar2 .wellness-footer .wellness-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0;
}

#pilar2 .wellness-footer .wellness-points div{
  min-height:66px;
}

#pilar2 .community-strip{
  margin:0;
  height:100%;
}

@media(max-width:1100px){
  .wellness-grid-v4{
    grid-template-columns:1fr 1fr;
  }

  .wellness-side{
    grid-column:1 / -1;
    grid-template-columns:1fr 1fr;
  }

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

@media(max-width:760px){
  #pilar2 .wellness-dashboard{
    padding:16px;
  }

  .wellness-grid-v4{
    grid-template-columns:1fr;
  }

  .wellness-side{
    grid-column:auto;
    grid-template-columns:1fr;
  }

  #pilar2 .wellness-footer .wellness-points{
    grid-template-columns:1fr;
  }

  #pilar2 .wellness-intro h2{
    font-size:clamp(40px,12vw,58px);
  }
}


/* =========================================================
   WHITE-LABEL PREMIUM V5 — PILAR 2 COM PRODUTO REAL BITT+
   ========================================================= */

#pilar2.bitt-real{
  background:
    radial-gradient(circle at 10% 0%,rgba(102,219,55,.08),transparent 28%),
    linear-gradient(180deg,rgba(4,20,15,.94),rgba(3,11,20,1));
  overflow:hidden;
}

.bitt-intro{
  max-width:1180px;
  margin-bottom:46px;
}

.bitt-intro h2{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(48px,5.5vw,84px);
  line-height:1.01;
  letter-spacing:-.045em;
  margin:12px 0 22px;
}

.bitt-intro em{
  font-style:normal;
  color:var(--green);
}

.bitt-intro p{
  max-width:920px;
  color:var(--muted);
  font-size:clamp(17px,1.3vw,21px);
  line-height:1.75;
}

.bitt-story-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.bitt-story-card{
  border:1px solid rgba(102,219,55,.15);
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.025);
  box-shadow:0 28px 70px rgba(0,0,0,.30);
}

.bitt-story-image{
  position:relative;
  aspect-ratio:1.32 / 1;
  overflow:hidden;
  background:#08140f;
}

.bitt-story-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .5s ease;
}

.bitt-story-card:hover .bitt-story-image img{
  transform:scale(1.025);
}

.bitt-number{
  position:absolute;
  top:16px;
  left:16px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(3,11,20,.76);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  font-size:12px;
  font-weight:800;
  color:var(--green);
}

.bitt-story-copy{
  padding:24px 24px 28px;
}

.bitt-story-copy small{
  display:block;
  color:var(--green);
  font-size:10px;
  letter-spacing:.15em;
  font-weight:800;
  margin-bottom:10px;
}

.bitt-story-copy h3{
  font-size:28px;
  line-height:1.05;
  margin-bottom:12px;
}

.bitt-story-copy p{
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
  margin:0;
}

.bitt-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr;
  gap:12px;
  align-items:center;
  margin-top:34px;
}

.bitt-flow div{
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}

.bitt-flow b{
  display:block;
  color:#eaf7ee;
  font-size:12px;
  letter-spacing:.08em;
}

.bitt-flow span{
  display:block;
  color:#8ea39a;
  font-size:11px;
  margin-top:6px;
}

.bitt-flow i{
  color:#5d7269;
  font-style:normal;
}

.bitt-flow .active{
  border-color:rgba(102,219,55,.28);
  background:rgba(102,219,55,.07);
}

.bitt-flow .active b{
  color:var(--green);
}

.bitt-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:18px;
}

.bitt-benefit{
  display:flex;
  gap:12px;
  align-items:center;
  min-height:80px;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.022);
}

.bitt-benefit>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(102,219,55,.07);
  font-size:20px;
}

.bitt-benefit b{
  display:block;
  font-size:13px;
}

.bitt-benefit small{
  display:block;
  color:#84988f;
  font-size:10px;
  margin-top:4px;
}

@media(max-width:980px){
  .bitt-story-grid{
    grid-template-columns:1fr;
  }

  .bitt-story-image{
    aspect-ratio:16 / 8;
  }

  .bitt-flow{
    grid-template-columns:1fr;
  }

  .bitt-flow i{
    transform:rotate(90deg);
    text-align:center;
  }

  .bitt-benefits{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){
  .bitt-benefits{
    grid-template-columns:1fr;
  }

  .bitt-story-image{
    aspect-ratio:4 / 3;
  }

  .bitt-intro h2{
    font-size:clamp(40px,12vw,58px);
  }
}


/* =========================================================
   WHITE-LABEL PREMIUM V6 — PILAR 3 COM APPS REAIS
   ========================================================= */

#pilar3.p3-real{
  background:
    radial-gradient(circle at 80% 0%,rgba(154,71,255,.11),transparent 30%),
    linear-gradient(180deg,rgba(28,8,49,.42),rgba(3,11,20,1));
}

#pilar3 .section-title{max-width:1120px}

.p3-app-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.p3-app-card{
  min-width:0; overflow:hidden; border-radius:26px;
  border:1px solid rgba(154,71,255,.20);
  background:rgba(255,255,255,.025);
  box-shadow:0 26px 70px rgba(0,0,0,.30);
}

.p3-app-image{
  position:relative;
  aspect-ratio:4 / 5.2;
  overflow:hidden;
  background:#100b17;
}

.p3-app-image img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  transition:transform .5s ease;
}

.p3-app-card:hover .p3-app-image img{transform:scale(1.025)}

.p3-app-image>span{
  position:absolute; left:14px; bottom:14px;
  padding:8px 11px; border-radius:999px;
  background:rgba(10,5,17,.84);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  color:#eee6ff; font-size:9px; font-weight:800; letter-spacing:.11em;
}

.p3-app-copy{padding:20px 20px 24px}
.p3-app-copy small{
  display:block; color:#bb87ff; font-size:9px;
  font-weight:800; letter-spacing:.13em; margin-bottom:8px;
}
.p3-app-copy h3{font-size:25px;margin-bottom:10px}
.p3-app-copy p{
  margin:0;color:var(--muted);font-size:13px;line-height:1.58;
}

.p3-structure{
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px;margin-top:28px;
}

.p3-message,.p3-defense{
  min-height:240px;padding:30px;border-radius:24px;
  border:1px solid rgba(154,71,255,.18);
  background:rgba(255,255,255,.025);
}

.p3-label,.p3-defense small{
  display:block;color:#bb87ff;font-size:10px;
  font-weight:800;letter-spacing:.14em;margin-bottom:12px;
}

.p3-message h3,.p3-defense h3{font-size:30px;margin-bottom:14px}
.p3-message p,.p3-defense p{
  margin:0;color:var(--muted);font-size:15px;line-height:1.7;
}

.p3-defense{
  display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start;
}

.p3-shield{
  width:58px;height:58px;display:grid;place-items:center;
  border-radius:18px;background:linear-gradient(135deg,#7f3fff,#d26cff);
  box-shadow:0 15px 32px rgba(154,71,255,.22);font-size:24px;
}

.p3-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;align-items:center;margin-top:24px;
}

.p3-flow div{
  padding:18px;border:1px solid rgba(255,255,255,.08);
  border-radius:18px;background:rgba(255,255,255,.025);
}

.p3-flow b{
  display:block;color:#efe7ff;font-size:11px;letter-spacing:.09em;
}

.p3-flow span{
  display:block;color:#9d8cac;font-size:10px;margin-top:6px;
}

.p3-flow i{font-style:normal;color:#6d5a7e}

.p3-flow .active{
  border-color:rgba(154,71,255,.30);
  background:rgba(154,71,255,.08);
}

.p3-flow .active b{color:#c899ff}

@media(max-width:1100px){
  .p3-app-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .p3-app-grid,.p3-structure{grid-template-columns:1fr}
  .p3-app-image{aspect-ratio:4 / 4.5}
  .p3-flow{grid-template-columns:1fr}
  .p3-flow i{transform:rotate(90deg);text-align:center}
}


/* =========================================================
   FINAL DIRECTION V7 — HERO + ECOSSISTEMA + PILAR 4
   ========================================================= */

.brand-project{
  display:grid;
  line-height:1.05;
  padding-left:14px;
  border-left:1px solid rgba(255,255,255,.12);
}

.brand-project small{
  color:#70869b;
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
}

.brand-project strong{
  margin-top:4px;
  color:#e8f0f7;
  font-size:12px;
}

.hero-v7{
  grid-template-columns:.88fr 1.12fr;
  gap:3vw;
  min-height:100vh;
}

.hero-v7 .hero-copy{
  position:relative;
  z-index:2;
}

.project-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
}

.project-badge span{
  color:#7f94aa;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}

.project-badge b{
  color:#f2f7fb;
  font-size:11px;
}

.hero-v7 h1{
  font-size:clamp(56px,6.4vw,104px);
  max-width:760px;
}

.hero-v7 .hero-copy p{
  max-width:700px;
}

.hero-proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:42px;
}

.hero-proof div{
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.hero-proof b{
  display:block;
  font-size:25px;
}

.hero-proof span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
}

.hero-ecosystem{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
}

.hero-ecosystem img{
  position:relative;
  z-index:2;
  width:112%;
  max-width:980px;
  display:block;
  filter:drop-shadow(0 38px 90px rgba(0,0,0,.48));
}

.hero-glow,
.p4-glow{
  position:absolute;
  width:70%;
  height:55%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(215,0,117,.15),rgba(123,92,255,.08) 40%,transparent 72%);
  filter:blur(25px);
}

.ecosystem-transition{
  padding-top:80px;
  padding-bottom:100px;
  background:
    radial-gradient(circle at 50% 0%,rgba(123,92,255,.10),transparent 30%);
}

.ecosystem-transition .section-title em{
  color:#d841ad;
}

.ecosystem-categories{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

.ecosystem-categories div{
  min-height:150px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}

.ecosystem-categories span{
  display:block;
  font-size:26px;
  margin-bottom:28px;
}

.ecosystem-categories b{
  display:block;
  font-size:14px;
}

.ecosystem-categories small{
  display:block;
  margin-top:6px;
  color:#71869a;
  font-size:9px;
}

/* Pilar 4 */
#pilar4.p4-v7{
  background:
    radial-gradient(circle at 15% 40%,rgba(255,0,122,.08),transparent 30%),
    radial-gradient(circle at 90% 0%,rgba(255,154,25,.08),transparent 26%),
    #030b14;
}

.p4-intro{
  max-width:1100px;
  margin-bottom:46px;
}

.p4-intro h2{
  font-family:Manrope,Inter,sans-serif;
  font-size:clamp(48px,5.5vw,84px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:12px 0 22px;
}

.p4-intro em{
  color:#ff5ba7;
  font-style:normal;
}

.p4-intro p{
  max-width:900px;
  color:var(--muted);
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.7;
}

.p4-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:36px;
  align-items:center;
}

.p4-visual{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,0,122,.10);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,0,122,.08),transparent 46%),
    rgba(255,255,255,.015);
}

.p4-visual img{
  position:relative;
  z-index:2;
  width:108%;
  display:block;
}

.p4-revenue{
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}

.p4-kicker{
  display:block;
  color:#ff73b5;
  font-size:9px;
  font-weight:800;
  letter-spacing:.15em;
  margin-bottom:10px;
}

.p4-revenue h3{
  font-size:32px;
  line-height:1.08;
  margin-bottom:24px;
}

.revenue-stack{
  display:grid;
  gap:9px;
}

.revenue-stack>div{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:11px 13px;
  border-radius:15px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.055);
}

.revenue-stack>div>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,0,122,.07);
}

.revenue-stack p{
  margin:0;
}

.revenue-stack b{
  display:block;
  font-size:12px;
}

.revenue-stack small{
  display:block;
  margin-top:3px;
  color:#75889a;
  font-size:9px;
}

.revenue-stack strong{
  color:#ff73b5;
}

.revenue-stack .result-row{
  grid-template-columns:38px 1fr;
  margin-top:6px;
  border-color:rgba(255,0,122,.20);
  background:linear-gradient(90deg,rgba(255,0,122,.09),rgba(123,92,255,.05));
}

.revenue-stack .result-row b{
  color:#fff;
  font-size:14px;
}

.p4-principles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
}

.p4-principles div{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
}

.p4-principles b{
  display:block;
  color:#ff73b5;
  font-size:10px;
  margin-bottom:12px;
}

.p4-principles span{
  font-size:12px;
  color:#d8e1e9;
}

@media(max-width:1100px){
  .hero-v7,
  .p4-layout{
    grid-template-columns:1fr;
  }

  .hero-ecosystem{
    min-height:auto;
  }

  .hero-ecosystem img{
    width:100%;
  }

  .ecosystem-categories{
    grid-template-columns:repeat(3,1fr);
  }

  .p4-principles{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){
  .brand-project{
    display:none;
  }

  .hero-proof{
    grid-template-columns:1fr;
  }

  .ecosystem-categories{
    grid-template-columns:1fr 1fr;
  }

  .p4-principles{
    grid-template-columns:1fr;
  }

  .p4-visual{
    min-height:auto;
  }

  .p4-visual img{
    width:100%;
  }
}


/* =========================================================
   V8 PREMIUM — HERO FINAL
   Layout anterior + app HUBUX isolado
   ========================================================= */

.hero-v8{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(470px,.98fr);
  gap:5.5vw;
  align-items:center;
  padding:138px 7vw 90px;
  overflow:hidden;
}

.hero-v8 .hero-copy{
  position:relative;
  z-index:4;
  max-width:850px;
}

.hero-v8 .project-badge{
  margin-bottom:24px;
}

.hero-v8 .kicker{
  margin-bottom:14px;
  color:#b99cff;
}

.hero-v8 h1{
  max-width:850px;
  margin:0;
  font-size:clamp(54px,6.2vw,96px);
  line-height:.98;
  letter-spacing:-.052em;
}

.hero-v8 .hero-copy > p{
  max-width:760px;
  margin:26px 0 0;
  color:var(--muted);
  font-size:clamp(17px,1.32vw,21px);
  line-height:1.68;
}

.hero-v8 .hero-ctas{
  margin-top:30px;
}

.hero-v8 .btn{
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding-left:22px;
  padding-right:22px;
}

.hero-features-v8{
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:820px;
  margin-top:46px;
}

.hero-features-v8 div{
  min-width:0;
}

.hero-features-v8 b{
  font-size:13px;
}

.hero-features-v8 span{
  font-size:10px;
  line-height:1.35;
  margin-top:4px;
  display:block;
}

/* App HUBUX */
.hero-app{
  position:relative;
  min-height:690px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.hero-app-glow{
  position:absolute;
  width:72%;
  height:72%;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(221,0,122,.22) 0%,
      rgba(123,92,255,.13) 34%,
      rgba(25,169,255,.05) 54%,
      transparent 74%
    );
  filter:blur(34px);
  z-index:-2;
}

.hero-app-stage{
  position:relative;
  display:grid;
  place-items:center;
  width:min(100%,520px);
  min-height:610px;
}

.hero-app-stage::before{
  content:"";
  position:absolute;
  width:76%;
  height:82%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.045);
  box-shadow:
    0 0 100px rgba(220,0,122,.10),
    inset 0 0 80px rgba(123,92,255,.05);
  z-index:-1;
}

.hero-app-stage img{
  display:block;
  width:auto;
  height:min(70vh,690px);
  max-width:100%;
  object-fit:contain;
  object-position:center;
  filter:
    drop-shadow(0 42px 50px rgba(0,0,0,.48))
    drop-shadow(0 0 38px rgba(220,0,122,.11));
  transform:translateY(-4px);
}

.hero-app-caption{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:max-content;
  max-width:90%;
  padding:12px 18px;
  text-align:center;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(4,12,22,.64);
  backdrop-filter:blur(16px);
}

.hero-app-caption span{
  display:block;
  color:#ff5ba7;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:4px;
}

.hero-app-caption strong{
  font-size:12px;
  color:#eaf1f7;
}

/* Ajuste do fundo do Hero */
.hero-v8 .hero-bg{
  background:
    radial-gradient(circle at 75% 38%,rgba(219,0,118,.09),transparent 26%),
    radial-gradient(circle at 68% 44%,rgba(86,70,255,.08),transparent 36%);
}

/* Responsividade */
@media(max-width:1180px){
  .hero-v8{
    grid-template-columns:1fr 430px;
    gap:35px;
  }

  .hero-v8 h1{
    font-size:clamp(52px,6vw,82px);
  }
}

@media(max-width:980px){
  .hero-v8{
    grid-template-columns:1fr;
    padding-top:130px;
  }

  .hero-app{
    min-height:590px;
    margin-top:20px;
  }

  .hero-app-stage img{
    height:min(70vh,610px);
  }

  .hero-features-v8{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){
  .hero-v8{
    padding-left:20px;
    padding-right:20px;
  }

  .hero-v8 h1{
    font-size:clamp(45px,13vw,62px);
  }

  .hero-features-v8{
    grid-template-columns:1fr 1fr;
  }

  .hero-app{
    min-height:500px;
  }

  .hero-app-stage{
    min-height:470px;
  }

  .hero-app-stage img{
    height:min(66vh,520px);
  }

  .hero-app-caption{
    bottom:0;
  }
}


/* =========================================================
   V9 APROVADA — HERO + RESULTADO
   ========================================================= */

/* HERO */
.hero-v9{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.88fr);
  gap:5vw;
  align-items:center;
  padding:135px 5.3vw 72px;
  overflow:hidden;
}

.hero-v9 .hero-copy{
  position:relative;
  z-index:4;
  max-width:830px;
}

.project-hero{
  display:grid;
  gap:4px;
  margin-bottom:17px;
}

.project-hero span{
  color:#49c8ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.project-hero b{
  color:#f3f7fb;
  font-size:16px;
}

.hero-v9 h1{
  max-width:820px;
  margin:0;
  font-size:clamp(58px,5.75vw,96px);
  line-height:1.02;
  letter-spacing:-.052em;
}

.hero-v9 .hero-copy>p{
  max-width:680px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:clamp(16px,1.16vw,20px);
  line-height:1.65;
}

.hero-v9 .hero-ctas{
  margin-top:27px;
}

.hero-v9 .btn{
  min-height:50px;
  padding:14px 26px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:660px;
  margin-top:34px;
}

.hero-metric{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:0 20px;
  border-right:1px solid rgba(255,255,255,.10);
}

.hero-metric:first-child{padding-left:0}
.hero-metric:last-child{
  border-right:0;
  padding-right:0;
}

.metric-icon{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(69,190,255,.24);
  background:rgba(22,131,255,.08);
  font-size:19px;
}

.hero-metric:nth-child(2) .metric-icon{
  border-color:rgba(155,75,255,.28);
  background:rgba(155,75,255,.09);
}

.hero-metric:nth-child(3) .metric-icon{
  border-color:rgba(103,218,76,.28);
  background:rgba(103,218,76,.08);
}

.hero-metric b{
  display:block;
  font-size:22px;
  line-height:1;
}

.hero-metric small{
  display:block;
  margin-top:5px;
  color:#d1dae5;
  font-size:10px;
  line-height:1.25;
}

.hero-phone{
  position:relative;
  min-height:650px;
  display:grid;
  place-items:center;
  isolation:isolate;
}

.hero-phone img{
  position:relative;
  z-index:4;
  width:auto;
  height:min(74vh,690px);
  max-width:82%;
  display:block;
  object-fit:contain;
  filter:
    drop-shadow(0 38px 55px rgba(0,0,0,.52))
    drop-shadow(0 0 34px rgba(255,0,119,.10));
}

.phone-glow{
  position:absolute;
  z-index:0;
  width:72%;
  height:72%;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,0,125,.14) 0%,
      rgba(108,77,255,.11) 36%,
      rgba(15,133,255,.06) 55%,
      transparent 74%);
  filter:blur(28px);
}

.orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(59,146,255,.13);
  z-index:1;
}

.orbit-a{
  width:73%;
  aspect-ratio:1;
  border-color:rgba(58,141,255,.18);
}

.orbit-b{
  width:84%;
  aspect-ratio:1;
  border-color:rgba(136,74,255,.14);
}

.orbit-c{
  width:95%;
  aspect-ratio:1;
  border-color:rgba(255,31,137,.12);
}

/* Resultado: 4 motores SEM SOBREPOSIÇÃO */
.result .cycle{
  position:relative;
  width:min(100%,470px);
  aspect-ratio:1;
  margin:auto;
  padding:76px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
  border:1px dashed rgba(45,178,255,.28);
  border-radius:50%;
  align-items:center;
  justify-items:center;
}

.result .cycle-center{
  display:none;
}

.result .node,
.result .n1,
.result .n2,
.result .n3,
.result .n4{
  position:static;
  transform:none;
  width:116px;
  height:116px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-align:center;
  font-size:24px;
  line-height:1;
}

.result .node span{
  display:block;
  margin-top:7px;
  font-size:10px;
}

.result .n1{
  border-color:rgba(25,169,255,.38);
  background:linear-gradient(180deg,rgba(25,169,255,.20),rgba(25,169,255,.08));
}
.result .n2{
  border-color:rgba(102,219,55,.38);
  background:linear-gradient(180deg,rgba(102,219,55,.20),rgba(102,219,55,.08));
}
.result .n3{
  border-color:rgba(154,71,255,.38);
  background:linear-gradient(180deg,rgba(154,71,255,.20),rgba(154,71,255,.08));
}
.result .n4{
  border-color:rgba(255,154,25,.38);
  background:linear-gradient(180deg,rgba(255,154,25,.20),rgba(255,154,25,.08));
}

@media(max-width:1100px){
  .hero-v9{
    grid-template-columns:1fr 430px;
    gap:30px;
  }

  .hero-v9 h1{
    font-size:clamp(52px,6vw,78px);
  }
}

@media(max-width:900px){
  .hero-v9{
    grid-template-columns:1fr;
    padding-top:125px;
  }

  .hero-phone{
    min-height:540px;
  }

  .hero-phone img{
    height:min(67vh,560px);
  }

  .hero-metrics{
    max-width:none;
  }
}

@media(max-width:650px){
  .hero-v9{
    padding-left:20px;
    padding-right:20px;
  }

  .hero-v9 h1{
    font-size:clamp(44px,12vw,60px);
  }

  .hero-metrics{
    grid-template-columns:1fr;
    gap:10px;
  }

  .hero-metric,
  .hero-metric:first-child,
  .hero-metric:last-child{
    padding:10px 0;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .hero-metric:last-child{
    border-bottom:0;
  }

  .hero-phone{
    min-height:470px;
  }

  .result .cycle{
    padding:58px;
    gap:12px;
  }

  .result .node,
  .result .n1,
  .result .n2,
  .result .n3,
  .result .n4{
    width:96px;
    height:96px;
    font-size:20px;
  }
}


/* =========================================================
   V10 — HERO COM 4 PILARES + ECOSSISTEMA
   ========================================================= */

.hero-v10{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(760px,1.06fr);
  gap:4vw;
  align-items:center;
  padding:135px 3.2vw 76px;
  overflow:hidden;
}

.hero-v10 .hero-copy{
  position:relative;
  z-index:4;
  max-width:760px;
}

.hero-v10 .kicker{
  color:#67c7ff;
  font-size:11px;
  letter-spacing:.15em;
  margin-bottom:18px;
}

.hero-v10 h1{
  margin:0;
  max-width:760px;
  font-size:clamp(58px,5.4vw,90px);
  line-height:1.03;
  letter-spacing:-.05em;
}

.hero-v10 h1 .hero-blue{
  background:linear-gradient(90deg,#7c4dff 0%,#19a9ff 78%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-v10 .hero-copy>p{
  max-width:670px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:clamp(16px,1.08vw,19px);
  line-height:1.72;
}

.hero-v10 .hero-ctas{margin-top:28px}
.hero-v10 .btn{
  min-height:52px;
  padding:14px 24px;
  align-items:center;
  justify-content:center;
}

.hero-v10 .hero-metrics{
  max-width:620px;
  margin-top:34px;
}

.hero-product{
  display:grid;
  grid-template-columns:minmax(330px,.92fr) minmax(380px,1.08fr);
  gap:22px;
  align-items:center;
  min-width:0;
}

.hero-phone-v10{position:relative;min-width:0}
.hero-phone-v10 .phone{max-width:390px}
.hero-phone-v10 .phone-screen{min-height:650px}

.hero-pillar-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  min-width:0;
}

.pillar-card{
  min-height:285px;
  display:flex;
  flex-direction:column;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.025);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}

.pillar-card>b{font-size:36px;line-height:1;margin-bottom:20px}
.pillar-card .pillar-icon{font-size:28px;margin-bottom:auto}
.pillar-card h3{font-size:22px;margin:16px 0 7px}
.pillar-card p{margin:0;color:#c6d0da;font-size:12px;line-height:1.55}

.pillar-card.p1{
  border-color:rgba(25,169,255,.34);
  background:linear-gradient(180deg,rgba(25,169,255,.16),rgba(25,169,255,.045));
}
.pillar-card.p1>b{color:#19a9ff}
.pillar-card.p2{
  border-color:rgba(102,219,55,.34);
  background:linear-gradient(180deg,rgba(102,219,55,.16),rgba(102,219,55,.045));
}
.pillar-card.p2>b{color:#66db37}
.pillar-card.p3{
  border-color:rgba(154,71,255,.34);
  background:linear-gradient(180deg,rgba(154,71,255,.16),rgba(154,71,255,.045));
}
.pillar-card.p3>b{color:#9a47ff}
.pillar-card.p4{
  border-color:rgba(255,154,25,.34);
  background:linear-gradient(180deg,rgba(255,154,25,.15),rgba(255,154,25,.045));
}
.pillar-card.p4>b{color:#ff9a19}

/* Barra do ecossistema */
.ecosystem-strip{
  position:relative;
  padding:18px 3.2vw 20px;
  border-top:1px solid rgba(25,169,255,.10);
  border-bottom:1px solid rgba(25,169,255,.10);
  background:
    radial-gradient(circle at 50% 0%,rgba(23,130,255,.08),transparent 34%),
    #061423;
}

.ecosystem-strip-head{text-align:center;margin-bottom:17px}
.ecosystem-strip-head strong{
  display:block;color:#67c7ff;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
}
.ecosystem-strip-head p{
  margin:6px 0 0;color:#a8b7c5;font-size:11px;
}

.ecosystem-strip-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}

.ecosystem-strip-grid>div{
  min-width:0;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:11px;
  align-items:center;
  padding:6px 16px;
  border-right:1px solid rgba(255,255,255,.08);
}
.ecosystem-strip-grid>div:last-child{border-right:0}

.ecosystem-strip-grid span{
  grid-row:1 / 3;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.035);
  font-size:20px;
}
.ecosystem-strip-grid b{font-size:12px}
.ecosystem-strip-grid small{color:#8798aa;font-size:9px}

/* Resultado: sem sobreposição */
.result .cycle{
  width:min(100%,460px);
  aspect-ratio:1;
  margin:auto;
  padding:70px;
  display:grid;
  grid-template-columns:repeat(2,116px);
  grid-template-rows:repeat(2,116px);
  gap:18px;
  place-content:center;
  border:1px dashed rgba(49,178,255,.26);
  border-radius:50%;
}
.result .cycle-center{display:none}
.result .node,
.result .n1,
.result .n2,
.result .n3,
.result .n4{
  position:static;
  transform:none;
  width:116px;
  height:116px;
}

@media(max-width:1350px){
  .hero-v10{grid-template-columns:.92fr 1.08fr}
  .hero-product{grid-template-columns:320px 1fr}
  .hero-v10 h1{font-size:clamp(54px,5vw,78px)}
  .pillar-card{min-height:250px}
}

@media(max-width:1100px){
  .hero-v10{grid-template-columns:1fr}
  .hero-product{grid-template-columns:360px 1fr}
  .ecosystem-strip-grid{
    grid-template-columns:repeat(4,1fr);
    row-gap:12px;
  }
  .ecosystem-strip-grid>div{border-right:0}
}

@media(max-width:760px){
  .hero-v10{padding-left:20px;padding-right:20px}
  .hero-product{grid-template-columns:1fr}
  .hero-phone-v10 .phone{max-width:330px}
  .hero-pillar-cards{grid-template-columns:1fr 1fr}
  .pillar-card{min-height:230px}
  .ecosystem-strip-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:520px){
  .hero-pillar-cards{grid-template-columns:1fr}
  .ecosystem-strip-grid{grid-template-columns:1fr}
}