/* =============================================================
   HNR-Site V5 | Visual do conceito aprovado em todo o site público
   Fontes (Exo 2 + Inter), títulos com brilho metálico, botões
   arredondados com seta, cartões arredondados, divisória curva e
   as seções Impacto (globo), Transparência (celular) e Final.
   Só no site público (body.hnr-v5). O painel não usa este arquivo.
   ============================================================= */

/* ---------- fontes ---------- */
body.hnr-v5{--sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--head:'Exo 2','Inter',Arial,sans-serif;font-size:16.5px}
.hnr-v5 h1,.hnr-v5 h2,.hnr-v5 h3,.hnr-v5 .date,.hnr-v5 .wname,.hnr-v5 .logo b{font-family:var(--head)}
.hnr-v5 h2{text-transform:none;letter-spacing:-.012em;font-weight:800;line-height:1.05}
.hnr-v5 .hero h1,.hnr-v5.hnr-v3 .hero-v3 h1{text-transform:none;font-weight:800;letter-spacing:-.02em}
.hnr-v5 .page-hero h1{text-transform:none;font-weight:800;letter-spacing:-.02em;line-height:1;padding-bottom:.04em}
.hnr-v5 .card h3,.hnr-v5 .note h3,.hnr-v5 .devcard h3{font-family:var(--head);font-weight:700;letter-spacing:.01em}
.hnr-v5 .date{font-weight:800;letter-spacing:-.03em}

/* ---------- títulos com brilho metálico (destaque em verde-limão) ---------- */
.hnr-v5 h2,.hnr-v5 .page-hero h1,
.hnr-v5 .hero-v3 h1 span:not(.l){background:linear-gradient(180deg,#ffffff 0%,#f1f4f5 36%,#aab4b8 64%,#e6ebec 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hnr-v5 h2 .l,.hnr-v5 .page-hero h1 .l,
.hnr-v5 .hero-v3 h1 .l{background:linear-gradient(180deg,#dcff72 0%,#bcf436 55%,#93c91c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hnr-v5 .hero-v3 h1 span{display:block;padding-bottom:.04em}
/* descendentes (j, p, y) dentro do destaque não pegam o degradê do título */
.hnr-v5 h2 .l,.hnr-v5 .page-hero h1 .l{padding-bottom:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- rótulos acima dos títulos (HOW IT WORKS) ---------- */
.hnr-v5 .chip{border:0;background:none;padding:0;color:var(--accent);font-size:11.5px;letter-spacing:.3em;gap:10px}
.hnr-v5 .chip::before{display:none}
.hnr-v5 .chip.red::before,.hnr-v5 .chip.live::before{display:block;width:8px;height:8px}
.hnr-v5 .hnr-v3 .hero-eyebrow,.hnr-v5.hnr-v3 .hero-eyebrow{background:none;padding:0;max-width:min(560px,100%);font-size:10.5px;letter-spacing:.24em;line-height:1.7;color:var(--accent)}

/* ---------- botões arredondados com seta ---------- */
.hnr-v5 .btn{clip-path:none;border-radius:10px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;min-height:50px;padding:0 24px;gap:10px}
.hnr-v5 .btn-sm{min-height:38px;padding:0 14px;font-size:13px;border-radius:8px}
.hnr-v5 .btn > span[aria-hidden="true"]{display:none}
.hnr-v5 .btn-lime:not(.btn-sm)::after,.hnr-v5 .btn-line:not(.btn-sm)::after,.hnr-v5 .btn-ghost:not(.btn-sm)::after{content:"\2192";font-size:18px;line-height:1;transition:transform .18s}
.hnr-v5 .btn:hover::after{transform:translateX(3px)}
.hnr-v5 .btn-lime{background:linear-gradient(180deg,#cbff4f,#b4ec2d);color:#0b1408;border:0;box-shadow:0 8px 26px rgba(188,244,54,.16)}
.hnr-v5 .btn-lime:hover{box-shadow:0 10px 34px rgba(188,244,54,.32)}
.hnr-v5 .btn-line,.hnr-v5 .btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border:1.5px solid rgba(255,255,255,.55)}
.hnr-v5 .btn-line:hover,.hnr-v5 .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.hnr-v5 .btn[aria-disabled="true"]{border:1.5px dashed var(--line-strong)}
/* topo: botões compactos, sem seta */
.hnr-v5 header.site .btn{min-height:42px;padding:0 16px;font-size:13.5px}
.hnr-v5 header.site .btn::after{content:none}

/* ---------- menu ---------- */
.hnr-v5 .menu{gap:18px}
.hnr-v5 .menu a{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text);opacity:.85;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s,opacity .15s}
.hnr-v5 .menu a:hover{color:var(--accent);opacity:1;border-color:var(--accent)}

/* ---------- cartões arredondados com brilho leve ---------- */
.hnr-v5 .card,.hnr-v5 .mintbox,.hnr-v5 details.w,.hnr-v5 .note,.hnr-v5 .devcard,.hnr-v5 .closing-box,.hnr-v5 .intended,
.hnr-v5 .tier,.hnr-v5 .seed,.hnr-v5 .wp,.hnr-v5 .flow li span,.hnr-v5 .states span,.hnr-v5 .status{border-radius:14px}
.hnr-v5 .card{transition:transform .2s,box-shadow .2s,border-color .2s}
.hnr-v5 .card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.28),0 0 0 1px rgba(188,244,54,.22)}

/* ---------- divisória curva entre seções ---------- */
.hnr-v5 .v5-curve{--cv:72px;z-index:2;margin-bottom:calc(var(--cv) * -1);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - var(--cv) + 1px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V72H800C650 72 610 16 470 16H0Z'/%3E%3C/svg%3E") bottom/100% var(--cv) no-repeat;
          mask:linear-gradient(#000,#000) top/100% calc(100% - var(--cv) + 1px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V72H800C650 72 610 16 470 16H0Z'/%3E%3C/svg%3E") bottom/100% var(--cv) no-repeat}
.hnr-v5 #whitepaper.v5-curve{background:var(--bg)}
.hnr-v5 .v5-curve + section{padding-top:calc(120px + 72px)}
.hnr-v5 .v5-curve + .final{padding-top:calc(130px + 72px)}

/* ---------- seções escuras (iguais nos dois temas) ---------- */
:root[data-theme="light"] .hnr-v5 .v5-impact,:root[data-theme="light"] .hnr-v5 .v5-transp,:root[data-theme="light"] .hnr-v5 .v5-final,:root[data-theme="light"] .hnr-v5 .hero-v3{
  --text:#f4f6f1;--muted:#c3cfca;--dim:#8fa29c;--accent:#bcf436;--olive:#aab77b;--line:rgba(160,208,195,.18);--line-soft:rgba(212,238,235,.08);--line-strong:rgba(188,244,54,.42);--panel:rgba(10,23,26,.72);color:var(--text)}
:root[data-theme="light"] .hnr-v5 .page-hero h1,
:root[data-theme="light"] .hnr-v5 section:not(.v5-impact):not(.v5-transp):not(.v5-final):not(.hero) h2{background:linear-gradient(180deg,#16241e 0%,#33433c 60%,#1c2a24 100%);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .hnr-v5 .page-hero h1 .l,
:root[data-theme="light"] .hnr-v5 section:not(.v5-impact):not(.v5-transp):not(.v5-final):not(.hero) h2 .l{background:linear-gradient(180deg,#5a9a00,#3f6a00);-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .hnr-v5 section:not(.v5-impact):not(.v5-transp):not(.v5-final):not(.hero) .btn-line,
:root[data-theme="light"] .hnr-v5 section:not(.v5-impact):not(.v5-transp):not(.v5-final):not(.hero) .btn-ghost,
:root[data-theme="light"] .hnr-v5 header.site .btn-line{border-color:rgba(10,30,20,.45);background:rgba(0,0,0,.02)}

/* ---------- IMPACTO: igual ao conceito (texto · 4 itens · globo grande à direita) ---------- */
.hnr-v5 #impact.v5-impact{text-align:left;padding:110px 0 150px;min-height:calc(min(35vw,540px) + 40px)}
.hnr-v5 #impact.v5-impact .cine-bg{background-position:left center;transform:none}
.hnr-v5 #impact.v5-impact .cine-bg::after,
:root[data-theme="light"] .hnr-v5 #impact.v5-impact .cine-bg::after{background:linear-gradient(90deg,rgba(4,11,14,.6),rgba(4,11,14,.32) 45%,rgba(4,11,14,0) 72%)}
.v5-globe{position:absolute;right:0;bottom:0;z-index:0;height:min(35vw,540px);width:auto;max-width:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 24%),linear-gradient(180deg,transparent 0,#000 12%);mask-composite:intersect}
.v5-impact-grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,390px);gap:48px;align-items:center}
.v5-impact-copy .chip{margin-bottom:16px}
.hnr-v5 .v5-impact-copy h2{font-size:clamp(34px,3.1vw,46px);margin:0 0 18px;line-height:1.04}
.hnr-v5 .v5-impact-copy h2 .l{display:block}
.hnr-v5 .v5-impact-copy .lead{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 16px;max-width:none}
.v5-closing{margin:0 0 26px;padding-left:14px;border-left:2px solid var(--accent);font-size:15.5px;line-height:1.55;color:var(--text)}
.v5-impact-side{border-left:1px solid var(--line);padding-left:36px}
.v5-intended{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);line-height:1.7;margin:0 0 24px}
.v5-impact-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 30px}
.v5-impact-items svg{width:38px;height:38px;color:var(--accent);margin-bottom:12px;display:block;filter:drop-shadow(0 0 10px rgba(188,244,54,.22))}
.hnr-v5 .v5-impact-items h3{font-family:var(--head);font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 6px;color:#fff}
.v5-impact-items p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}

/* ---------- TRANSPARÊNCIA: igual ao conceito (texto deslocado + celular grande inclinado) ---------- */
.hnr-v5 #transparency.v5-transp{text-align:left;padding:120px 0 170px}
.hnr-v5 .v5-transp .cine-bg{transform:none;background-position:center}
.hnr-v5 .v5-transp .cine-bg::after,
:root[data-theme="light"] .hnr-v5 .v5-transp .cine-bg::after{background:linear-gradient(90deg,rgba(4,11,14,.95),rgba(4,11,14,.84) 42%,rgba(4,11,14,.5) 72%,rgba(4,11,14,.38)),linear-gradient(0deg,rgba(4,11,14,.55),transparent 35%)}
.v5-transp-copy{max-width:680px}
.v5-transp-copy .chip{margin-bottom:16px}
.hnr-v5 .v5-transp-copy h2{font-size:clamp(40px,4vw,58px);line-height:1.02;margin:0}
.hnr-v5 .v5-transp-copy h2 .l{display:block}
.v5-transp-body{margin:26px 0 0 200px;max-width:460px}
.hnr-v5 .v5-transp-body .lead{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0 0 22px;max-width:none}
.v5-transp-body .btn{margin-top:28px}
.v5-status{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.v5-status li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.v5-status b{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.v5-status b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}

/* celular desenhado em código */
.v5-phone-wrap{position:absolute;z-index:1;top:140px;right:max(40px,calc((100vw - 1280px) / 2 + 80px));width:360px;perspective:1300px;perspective-origin:40% 115%}
.v5-phone{position:relative;width:100%;aspect-ratio:9/19.5;border-radius:56px;padding:12px;
  background:linear-gradient(135deg,#6b777c 0%,#1b2326 16%,#0a0e10 50%,#232c30 84%,#56636a 100%);
  box-shadow:-34px 46px 90px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.7);
  transform:rotateY(-22deg) rotateX(4deg) rotateZ(5deg);transform-origin:50% 50%}
.v5-phone::before{content:"";position:absolute;right:-4px;top:170px;width:4px;height:78px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#1c2326,#4b575c)}
.v5-phone-screen{height:100%;border-radius:45px;background:radial-gradient(ellipse at 50% 0%,rgba(188,244,54,.1),transparent 52%),#050a0b;padding:12px 20px 22px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;color:#eef3f0}
.v5-phone-screen::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:98px;height:29px;border-radius:16px;background:#000}
.v5-ph-status{display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 12px 0 14px;font:600 13.5px/1 var(--sans);color:#fff}
.v5-ph-status i{display:flex;gap:5px;align-items:center}
.v5-ph-status svg{height:11px;width:auto;fill:#fff;color:#fff}
.v5-ph-top{display:flex;align-items:center;gap:10px;margin-top:6px}
.v5-ph-top img{width:36px;height:36px;border-radius:9px}
.v5-ph-top b{font-family:var(--head);font-style:italic;font-weight:800;font-size:23px;color:#fff;letter-spacing:-.01em}
.v5-ph-top span{margin-left:auto;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0b1408;background:#bcf436;padding:5px 9px;border-radius:20px;white-space:nowrap}
.v5-ph-chart{border-radius:16px;background:linear-gradient(180deg,rgba(188,244,54,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);padding:12px 12px 8px}
.v5-ph-chart-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.v5-ph-chart-h small{font-size:11.5px;color:#9fb0ab}
.v5-ph-chart-h em{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bcf436;border:1px solid rgba(188,244,54,.45);border-radius:20px;padding:3px 8px}
.v5-ph-chart svg{display:block;width:100%;height:118px}
.v5-ph-axis{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#7f8f8a;text-transform:uppercase}
.v5-ph-rows{margin:0}
.v5-ph-rows div{display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
.v5-ph-rows dt{font-size:12.5px;color:#9fb0ab}
.v5-ph-rows dd{margin:0;font-family:var(--mono);font-size:12px;color:#f1f5f2;text-align:right}

/* ---------- FINAL: mascotes no pôr do sol, texto à esquerda ---------- */
.hnr-v5 .v5-final{text-align:left;min-height:640px;display:flex;align-items:center}
.hnr-v5 .v5-final .wrap{width:100%}
.hnr-v5 .v5-final .wrap > *{max-width:560px}
.hnr-v5 .v5-final .cine-bg{background-position:68% center}
.hnr-v5 .v5-final .cine-bg::after,
:root[data-theme="light"] .hnr-v5 .v5-final .cine-bg::after{background:linear-gradient(90deg,rgba(4,11,14,.9) 0%,rgba(4,11,14,.62) 36%,rgba(4,11,14,.05) 68%),linear-gradient(0deg,rgba(4,11,14,.8),transparent 32%)}
.hnr-v5 .v5-final h2,.hnr-v5.hnr-v3 .v5-final h2{font-size:clamp(36px,4.8vw,66px);text-align:left;margin:0 0 16px;letter-spacing:-.015em}
.hnr-v5 .v5-final .tag{margin:0 0 30px;max-width:36ch}
.hnr-v5 .v5-final .btns{justify-content:flex-start}

/* ---------- tablet ---------- */
@media (max-width:1439px){
  .v5-impact-grid{grid-template-columns:minmax(0,400px) minmax(0,350px);gap:36px}
}
@media (max-width:1199px){
  .hnr-v5 #impact.v5-impact{padding:100px 0 140px;min-height:0}
  .v5-impact-grid{grid-template-columns:1fr;gap:40px}
  .v5-impact-copy{max-width:620px}
  .v5-impact-side{max-width:min(58%,520px)}
  .v5-globe{height:min(46vw,440px);right:-4vw}
}
@media (max-width:1199px){
  .v5-transp-body{margin-left:110px;max-width:420px}
  .v5-phone-wrap{width:320px;right:40px;top:175px}
}
@media (max-width:960px){
  .hnr-v5 #transparency.v5-transp{padding:100px 0 0}
  .v5-transp-body{margin-left:0;max-width:560px}
  .v5-phone-wrap{position:relative;top:auto;right:auto;width:min(310px,76%);height:540px;margin:60px 9% 0 auto}
}
@media (max-width:900px){
  /* imagem em cima (mascotes visíveis), texto embaixo sobre fundo escuro */
  .hnr-v5 .v5-final{min-height:740px;align-items:flex-end}
  .hnr-v5 .v5-final .cine-bg{background-size:auto 64%;background-position:74% 0;background-repeat:no-repeat;background-color:#050c0e}
  .hnr-v5 .v5-final .cine-bg::after,
  :root[data-theme="light"] .hnr-v5 .v5-final .cine-bg::after{background:linear-gradient(0deg,#050c0e 0%,#050c0e 36%,rgba(5,12,14,.6) 48%,rgba(5,12,14,0) 66%)}
}
/* ---------- celular ---------- */
@media (max-width:640px){
  .hnr-v5 .v5-curve{--cv:42px}
  .hnr-v5 .v5-curve + section{padding-top:calc(80px + 42px)}
  .hnr-v5 .v5-curve + .final{padding-top:calc(90px + 42px)}
  .hnr-v5 .v5-final{min-height:690px}
  .hnr-v5 .v5-final .cine-bg{background-size:auto 62%;background-position:77% 0}
  .hnr-v5 #impact.v5-impact{padding:80px 0 0}
  .v5-impact-grid{gap:34px}
  .v5-impact-side{max-width:none;border-left:0;padding-left:0}
  .v5-impact-items{gap:26px 18px}
  .v5-globe{position:relative;right:auto;bottom:auto;display:block;height:auto;width:118%;max-width:540px;margin:10px -18% 0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 30%);
    mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 30%)}
  .hnr-v5 .btn,.hnr-v5.hnr-v3 .hero-v3 .btns .btn{font-size:14.5px;padding:0 20px}
  .v5-status li{font-size:14px}
  .v5-phone-wrap{width:min(270px,72%);height:450px;margin:50px 9% 0 auto}
  .v5-phone{border-radius:46px;padding:10px}
  .v5-phone-screen{border-radius:37px;padding:10px 16px 18px;gap:13px}
  .v5-ph-chart svg{height:96px}
}
@media (max-width:420px){
  .v5-impact-items{gap:24px 16px}
  .v5-impact-items svg{width:32px;height:32px;margin-bottom:10px}
  .hnr-v5 .v5-impact-items h3{font-size:12.5px;letter-spacing:.05em}
  .v5-impact-items p{font-size:13px}
}