/* ==========================================================================
   INVEE HUB — home.css · página inicial (Figma "Invee hub" v2, id 275:2111, 1920×10839)
   Só o que é específico da home; tokens/componentes em base.css.
   Medidas em px do Figma @1920 → fluidas por var(--u) (1 px = 0.0520833vw).
   Atenção: este arquivo carrega DEPOIS de base.css — toda regra daqui que toque em
   grid/altura/posição precisa de contraparte nas media queries (senão anula as do base).
   ========================================================================== */

main{position:relative;overflow:hidden;isolation:isolate}
main > section,main > .lines-wrap{position:relative;z-index:1}

/* ---------- brilhos de fundo (Ellipse 27/28/29 #3B3B3B blur 500 · Ellipse 26 radial lighten) ---------- */
.glows{position:absolute;inset:0;z-index:0;pointer-events:none}
.glow{position:absolute;display:block;width:calc(1300*var(--u));height:calc(1300*var(--u));border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,rgba(59,59,59,.78) 0%,rgba(59,59,59,.5) 24%,rgba(59,59,59,.22) 50%,rgba(59,59,59,.06) 76%,rgba(59,59,59,0) 100%)}
.glow-a{left:calc(1849*var(--u));top:calc(1173*var(--u))}
.glow-b{left:calc(217*var(--u));top:calc(2380*var(--u));width:calc(1150*var(--u));height:calc(1150*var(--u));
  background:radial-gradient(circle closest-side,rgba(59,59,59,.72) 0%,rgba(59,59,59,.45) 30%,rgba(59,59,59,.2) 55%,rgba(59,59,59,.05) 80%,rgba(59,59,59,0) 100%)}
.glow-c{left:calc(1848*var(--u));top:calc(3094*var(--u))}
.glow-d{left:calc(1646*var(--u));top:calc(2571*var(--u));width:calc(2300*var(--u));height:calc(2300*var(--u));
  background:radial-gradient(circle closest-side,rgba(47,47,47,.55) 0%,rgba(47,47,47,.25) 40%,rgba(47,47,47,0) 100%)}

/* ---------- header: CTA glass 357×66 (texto x+38 · seta até x−37) ---------- */
.brand-invee .hdr .nav .btn{padding:0 37px 0 38px;min-width:clamp(0px,calc(357*var(--u)),357px)}

/* ---------- hero (foto 825×1080 @x=1095 op .92 · botão 357×66 · link +52 · glass rows 701×85 @x=1136 y=836/935) ---------- */
.hero{background:var(--carbon)}
.hero-copy{max-width:min(734px,calc(1095*var(--u) - var(--gutter) - 40px))}   /* abaixo de 1920 o texto nunca entra por baixo da foto */
.hero-media{height:100%;opacity:.92;object-position:50% 50%}
.hero-copy .btn-row{margin-top:clamp(20px,calc(27*var(--u)),27px);align-items:flex-start}
.hero-btn{min-width:clamp(0px,calc(357*var(--u)),357px);padding:0 40px 0 35px}
.hero-link{margin-top:clamp(10px,calc(19*var(--u)),19px)}
.hero-stats{position:absolute;z-index:3;right:calc(83*var(--u));top:calc(836*var(--u));width:calc(701*var(--u));gap:clamp(10px,calc(14*var(--u)),14px)}
.hero-stats .stat-row{min-height:clamp(60px,calc(85*var(--u)),85px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:0 clamp(16px,calc(28*var(--u)),28px) 0 clamp(18px,calc(34*var(--u)),34px)}
.hero-stats .stat-row .value small{margin-left:2px}

/* ---------- faixa de logos (image 25: 1666×108 @x=127 y=1123 → 5 logos @x=133/508/877/1216/1587, gaps ~135) ---------- */
.logos{padding-top:clamp(28px,calc(43*var(--u)),43px)}
.logos-row{display:flex;align-items:center;justify-content:space-between;width:calc(1654*var(--u));max-width:100%;margin-left:calc(33*var(--u))}
.logos-row li{flex:0 0 auto;display:flex}
.logos-row img{width:auto;height:calc(108*var(--u))}

/* ---------- O ECOSSISTEMA (eyebrow y=1409 · grade 2×2 @x=970 col 318 gap 46/48) ---------- */
.section-eco{padding-top:clamp(72px,calc(178*var(--u)),178px)}
.eco{display:grid;grid-template-columns:716fr 154fr 682fr 168fr;align-items:start}
.eco-copy{grid-column:1}
.eco-copy .eyebrow{margin-bottom:clamp(12px,calc(19*var(--u)),19px)}
.eco-copy .lead-15{margin-top:clamp(14px,calc(18*var(--u)),18px);max-width:716px}
.eco-copy .link-arrow{margin-top:clamp(28px,calc(57*var(--u)),57px)}
.eco-grid{grid-column:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,calc(48*var(--u)),48px) clamp(24px,calc(46*var(--u)),46px);margin-top:clamp(24px,calc(40*var(--u)),40px)}
.eco-grid .eyebrow{margin-bottom:clamp(14px,calc(24*var(--u)),24px)}
.eco-grid .h4{margin-bottom:10px}
.eco-grid .lead{max-width:318px}

/* ---------- números (+350 · +1,2 b · +10 · +8 — centros x=360/710/1112/1552, y=2042) ---------- */
.home-stats{margin-top:clamp(72px,calc(162*var(--u)),162px);grid-template-columns:minmax(0,520fr) minmax(0,180fr) minmax(0,624fr) minmax(0,224fr) minmax(0,172fr);gap:24px 0;justify-items:center;text-align:center}
.home-stats li{display:flex;flex-direction:column;align-items:center;white-space:nowrap}
.home-stats .value{font-size:var(--fs-48);font-weight:400;line-height:1.34;letter-spacing:.02em;margin-right:clamp(0px,calc(24*var(--u)),24px)}   /* nº alinhado à esquerda do rótulo, como no Figma */
.home-stats .label{margin-top:clamp(4px,calc(7*var(--u)),7px)}

/* ---------- UM SISTEMA. CINCO DIMENSÕES. (Rectangle 294: 1812×866 @x=53 y=2284 r37 · preto 20% + glass) ---------- */
.radar-panel{position:relative;margin-top:clamp(64px,calc(140*var(--u)),140px);margin-inline:clamp(-47px,calc(-47*var(--u)),0px);height:calc(866*var(--u));border-radius:clamp(20px,calc(37*var(--u)),37px);
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.008) 35%,rgba(0,0,0,0) 60%),rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.25);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);color:var(--gray-2)}
/* radar: pentágonos regulares inscritos em círculos R=329/248/171/103 centrados em (464,386) — Polygon 1–4 do Figma */
.radar{position:absolute;left:calc(60*var(--u));top:calc(60*var(--u));width:calc(950*var(--u));height:calc(700*var(--u));overflow:visible}
.radar-labels text{font-family:var(--ff);font-size:16px;font-weight:700;fill:#E8E8E8;letter-spacing:0}
.radar-labels .radar-hub{fill:#0D0D0F;letter-spacing:.13em}
.radar-labels a{cursor:pointer;outline-offset:6px}
.radar-labels a text{transition:fill .25s var(--ease)}
.radar-labels a:hover text,.radar-labels a:focus-visible text{fill:var(--gold);text-decoration:underline}
.radar-copy{position:absolute;left:calc(1022*var(--u));top:calc(266*var(--u));width:calc(625*var(--u));max-width:625px}
.radar-copy .h2{color:var(--gray-2)}
.radar-copy .lead{margin-top:clamp(20px,calc(39*var(--u)),39px);color:var(--gray-2)}

/* ---------- METODOLOGIA (eyebrow y=3319 · linha y=3529 · 01 y=3623) ---------- */
.section-met{padding-top:clamp(80px,calc(169*var(--u)),169px)}
.link-more{display:inline-flex;align-items:center;gap:clamp(14px,calc(19*var(--u)),19px);font-size:var(--fs-btn);font-weight:400;line-height:1.34;color:inherit;white-space:nowrap;margin-bottom:6px;transition:opacity .3s var(--ease)}
.link-more .ico{flex:0 0 auto;width:19px;height:10px;transition:transform .3s var(--ease)}
.link-more:hover{opacity:.78}
.link-more:hover .ico{transform:translateX(3px)}
.sec-head .link-more{margin-bottom:6px}
.numbered-list > li{gap:0;grid-template-columns:138fr 760fr 822fr}
.numbered-list .num{line-height:var(--lh);margin-top:0}   /* caixa 85 px (63.5 × 1.34) */
.numbered-list .body{max-width:822px}
.numbered-list .body p{margin-right:-12px}   /* Hanken no browser mede ~1% a mais que no Figma: evita a 3ª linha */
.numbered-list > li:not(.active) .eyebrow{color:var(--muted)}
.numbered-list > li:not(.active){padding-bottom:clamp(36px,calc(72*var(--u)),72px)}

/* ---------- SOLUÇÕES — cards (eyebrow y=4624 · cards y=4821, 560×396, gap 19/26) ---------- */
.section-sol{padding-top:clamp(80px,calc(163*var(--u)),163px)}   /* 170 no Figma − 7 de arredondamento das linhas acima */
.section-sol .cards{margin-top:clamp(48px,calc(100*var(--u)),100px)}
.card .link-arrow{padding-top:0;margin-top:auto}
.card .lead{margin-bottom:clamp(20px,calc(34*var(--u)),34px)}
.card.card-wide{padding-right:clamp(16px,calc(25*var(--u)),25px)}
.card.card-wide p{max-width:493px}
.card.light .link-arrow{color:var(--carbon)}
.card.light .card-stat b{color:var(--carbon)}
.card.dark .link-arrow{color:var(--white)}

/* ---------- CASES (eyebrow y=5953 · linhas 614 @y=6211 · foto 862 · copy 787) ---------- */
.section-cases{padding-top:clamp(120px,calc(311*var(--u)),311px)}   /* 314 no Figma − 3 (cards 397) */
.cases{margin-top:clamp(64px,calc(161*var(--u)),161px)}
.case{display:grid;grid-template-columns:858fr 862fr;align-items:stretch}
.case-photo{width:100%;height:calc(614*var(--u));object-fit:cover;object-position:50% 50%}
.case-copy{display:grid;grid-template-rows:auto 1fr auto auto;height:calc(614*var(--u));padding:calc(52*var(--u)) 0 calc(61*var(--u))}
.case-rev .case-copy{padding-left:calc(57*var(--u));padding-top:calc(61*var(--u))}   /* case 2: tag em y+61, métricas 132 acima do link */
.case-tag{display:flex;align-items:center;gap:clamp(20px,calc(46*var(--u)),46px);font-size:var(--fs-16);font-weight:400;line-height:1.34;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-4);white-space:nowrap}
.case-tag b{font-weight:700}
.case-tag .sep{font-weight:400}
.case-title{margin-top:clamp(14px,calc(26*var(--u)),26px);font-size:var(--fs-40);font-weight:700;line-height:1.34;letter-spacing:.03em;text-transform:uppercase;color:var(--white);max-width:787px;align-self:start}
.case-stats{display:grid;grid-template-columns:calc(280*var(--u)) calc(184*var(--u)) auto;align-items:start;align-self:end}
.case-stats li{display:flex;flex-direction:column;white-space:nowrap}
.case-stats b{font-size:var(--fs-36);font-weight:700;line-height:1.34;letter-spacing:.02em;color:var(--white)}
.case-stats span{margin-top:clamp(6px,calc(10*var(--u)),10px);font-size:var(--fs-16);font-weight:400;line-height:1.34;color:var(--gray-4)}
.case-copy .link-arrow{margin-top:clamp(36px,calc(69*var(--u)),69px);align-self:end;justify-self:start}
.case-rev .case-copy .link-arrow{margin-top:clamp(28px,calc(53*var(--u)),53px)}
@media (min-width:1025px){   /* colunas exatas do Figma só no layout lado a lado */
  .case:nth-child(3){grid-template-columns:870fr 850fr}
  .case:nth-child(2) .case-stats{grid-template-columns:calc(245*var(--u)) calc(254*var(--u)) auto}
  .case:nth-child(3) .case-stats{grid-template-columns:calc(280*var(--u)) calc(245*var(--u)) auto}
}

/* ---------- CONTEÚDOS + PRÓXIMO PASSO (fundo image 15: linhas, op .32, y=8491→10197) ---------- */
.lines-wrap{position:relative}
.lines-bg{position:absolute;left:0;top:calc(438*var(--u));width:100%;height:calc(100% - 438*var(--u));object-fit:cover;object-position:50% 50%;opacity:.32;pointer-events:none;z-index:0}
.lines-wrap > section{position:relative;z-index:1}
.section-ins{padding-top:clamp(96px,calc(237*var(--u)),237px)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,calc(20*var(--u)),20px);margin-top:clamp(40px,calc(86*var(--u)),86px)}
.post{display:flex;flex-direction:column}
.post-media{position:relative;display:block;overflow:hidden}
.post-img{width:100%;height:calc(613*var(--u));object-fit:cover;object-position:50% 50%;transition:transform .6s var(--ease)}
.post-img-left{object-position:0 50%}
.post-media:hover .post-img{transform:scale(1.03)}
.post-meta{position:absolute;left:clamp(16px,calc(35*var(--u)),35px);bottom:clamp(16px,calc(31*var(--u)),31px);display:flex;align-items:center;gap:clamp(14px,calc(22*var(--u)),22px);color:var(--white);font-size:var(--fs-16);line-height:1.34}
.post-meta .tag{min-width:clamp(100px,calc(142*var(--u)),142px);padding-inline:10px;color:var(--white)}
.post-meta b{font-weight:700}
.post-date{margin:clamp(18px,calc(28*var(--u)),28px) 0 clamp(12px,calc(17*var(--u)),17px);color:var(--gray-4)}
.post .h4{max-width:560px}
.post .h4 a{transition:color .25s}
.post .h4 a:hover{color:var(--gold)}

.section-cta{padding-top:clamp(120px,calc(348*var(--u)),348px);padding-bottom:clamp(96px,calc(275*var(--u)),275px)}
.cta{display:flex;flex-direction:column;align-items:center}
.cta .h2{max-width:960px}
.cta .btn{margin-top:clamp(24px,calc(37*var(--u)),37px)}

/* ---------- responsivo ---------- */
@media (max-width:1280px){
  .brand-invee .hdr .nav .btn{padding:0 26px;min-width:0}
}
@media (max-width:1024px){
  .glow{width:900px;height:900px}
  .hero-copy{max-width:734px}
  .hero-media{height:auto;aspect-ratio:4/3;object-position:50% 40%;opacity:1;margin-top:40px}
  .hero-stats{position:relative;right:auto;top:auto;width:auto;max-width:calc(701px + 2*var(--gutter));margin:24px auto 0;padding-inline:var(--gutter);box-sizing:border-box}
  .hero-stats .stat-row{background:rgba(255,255,255,.06)}
  .eco{grid-template-columns:1fr;gap:40px}
  .eco-copy,.eco-grid{grid-column:1}
  .eco-grid{margin-top:0}
  .home-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .radar-panel{height:auto;margin-inline:0;padding:32px 24px 40px}
  .radar{position:static;width:100%;max-width:700px;height:auto;margin-inline:auto}
  .radar-copy{position:static;width:100%;max-width:625px;margin:32px auto 0}
  .numbered-list > li{grid-template-columns:72px 1fr;gap:0 16px}
  .numbered-list .body{grid-column:2;max-width:none;margin-top:16px}
  .numbered-list .body p{margin-right:0}
  .numbered-list > li:not(.active){padding-bottom:36px}
  .case,.case.case-rev{grid-template-columns:1fr}
  .case-copy,.case-rev .case-copy{height:auto;padding:40px 0 48px}
  .case-photo{height:auto;aspect-ratio:862/614;order:2}
  .case-stats{grid-template-columns:repeat(3,minmax(0,auto));gap:24px 40px;margin-top:40px;justify-content:start}
  .case-copy .link-arrow,.case-rev .case-copy .link-arrow{margin-top:36px}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .post-img{height:auto;aspect-ratio:560/613}
  .lines-bg{top:0;height:100%}
}
@media (max-width:640px){
  .hero-btn{min-width:0;width:100%;padding:0 24px}
  .hero-link{margin-top:4px}
  .hero-media{aspect-ratio:1/1;object-position:50% 35%}
  .hero-stats .stat-row{flex-wrap:wrap;padding-block:14px}
  .logos-row{flex-wrap:wrap;justify-content:center;gap:16px 28px;width:100%;margin:0}
  .logos-row img{height:44px}
  .eco-grid{grid-template-columns:1fr}
  .home-stats{grid-template-columns:1fr 1fr;gap:28px 12px}
  .home-stats li{white-space:normal}
  .radar-panel{padding:24px 16px 32px}
  .numbered-list > li{grid-template-columns:1fr;gap:0}
  .numbered-list .num{margin-bottom:6px}
  .numbered-list .body{grid-column:1;margin-top:12px}
  .case-tag{white-space:normal;flex-wrap:wrap;gap:10px 16px}
  .case-title{font-size:var(--fs-32)}
  .case-stats{grid-template-columns:1fr 1fr;gap:20px 16px}
  .posts{grid-template-columns:1fr}
  .cta .h2 br{display:none}
  .cta .btn{width:100%;max-width:357px}
}