@font-face {
  font-family: 'Garet';
  src:  url('fonts/Garet-Book.ttf') format('truetype');
}

@font-face {
  font-family: 'Telegraf';
  src:  url('fonts/TelegrafRegular_272984568a25d8528fe2de8b20b29011.otf') format('opentype');
}

@font-face {
  font-family: 'TelegrafBold';
  src:  url('fonts/Telegraf _bold.otf') format('opentype');
}

@font-face {
  font-family: 'SpacemonoRegular';
  src:  url('fonts/SpaceMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'CooperHewitt';
  src:  url('fonts/CooperHewitt-Book.otf') format('opentype');
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Spacemonoregular';
  
  
}


* {
  box-sizing: border-box;
  
  /*border: 1px solid red;*/

}

/* Estado inicial */
.animated-logo,
.animated-left,
.animated-right {
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
}

/* Animações */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animações aplicadas */
.animated-logo {
  animation: fadeIn 0.6s ease-out 0.2s forwards;
}

.animated-left {
  transform: translateX(-50px);
  animation: slideInLeft 0.8s ease-out 0.6s forwards;
}

.animated-right {
  transform: translateX(50px);
  animation: slideInRight 0.8s ease-out 0.8s forwards;
}

.fade-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Quando a seção entra em tela */
.observe-fade.in-view .fade-left,
.observe-fade.in-view .fade-right {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-logo,
.fade-in-box,
.fade-in-title,
.fade-in-paragraph {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Delays para ordem visual */
.fade-in-logo {
  animation-delay: 0.2s;
}

.fade-in-box {
  animation-delay: 0.5s;
}

.fade-in-title {
  animation-delay: 0.8s;
}

.fade-in-paragraph {
  animation-delay: 1.1s;
}

/* Keyframe padrão */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.observe-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1s ease-out;
  animation-delay: 0.3s; transition-delay: 0.3s;
}

/* Quando entra na tela */
.observe-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

.fade-delayed {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1s ease-out;
  animation-delay: 0.6s; transition-delay: 0.6s;
}

.fade {
  opacity: 0;
  transform: translateX(0px);
  transition: opacity 0.9s ease-out, transform 1s ease-out;
  animation-delay: 0.3s; transition-delay: 0.3s;
}

.observe-fade.in-view .fade {
  opacity: 1;
  transform: translateX(0);
}

.fade2 {
  opacity: 0;
  transform: translateX(0px);
  transition: opacity 0.9s ease-out, transform 1s ease-out;
  animation-delay: 1.2s; transition-delay: 1.2s;
}

.observe-fade.in-view .fade2 {
  opacity: 1;
  transform: translateX(0);
}

.left-fade1 {
  opacity: 0;
  transform: translateX(-100px);
  transition: opacity 1.2s ease-out, transform 1s ease-out;
  animation-delay: 0.3s; transition-delay: 0.3s;
}

.observe-fade.in-view .left-fade1 {
  opacity: 1;
  transform: translateX(0);
}

.left-fade2 {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 1.2s ease-out, transform 1s ease-out;
  animation-delay: 0.9s; transition-delay: 0.9s;
}

.observe-fade.in-view .left-fade2 {
  opacity: 1;
  transform: translateX(0);
}



.fade-delayed.in-view {
  opacity: 1;
  transform: translateY(0);
}

.observe-fade.in-view .fade-delayed {
  opacity: 1;
  transform: translateY(0);
}

html {
  scroll-behavior: smooth;
}

.volumap {
  position: relative;
  width: 100%;
  min-height: clamp(520px, 90vh, 900px);
  background: #fff;
  color: #0a0a0a;
  overflow: hidden;
  display: flex;
 
}

.volumap__deco {
  position: absolute;
  inset: 0 auto 0 0;
 
  display: flex;
  align-items: center;
  z-index: 0;
  pointer-events: none;
}

.volumap__deco img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: left center;
  transform: translateX(-2%);
}

/* Conteúdo principal */
.volumap__inner {
  position: relative;
  z-index: 1;
  margin-left: auto;
  margin-right: clamp(8vw, 10vw, 14vw);
  display: flex;
  flex-direction: column;
  
  align-items: flex-start;
  gap: clamp(16px, 10vh, 28px);
 
}

/* HEADER (good afternoon + stick verde) */
.volumap__header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20%;
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
}

.volumap__greeting {
  font-size: clamp(24px, 2vw, 26px);
  letter-spacing: 0.08em;
  color: #111;
  margin-right: 12px;
  white-space: nowrap;
      margin-top: 12%;
}

/* Stick verde */
.volumap__stick {
  left: 50px;
  width: 60px;
  height: 140px;
  background: #7ED957;
  position: relative;
}

.volumap__stick::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 200px;
  background: #000;
  transform: translateX(-50%);
}

/* Marca e título */
.volumap__brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(40px, 6vh, 80px);
}

.volumap__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(60px, 8vw, 96px);
  letter-spacing: 0.01em;
}

.volumap__title .tm {
     font-family: 'Telegraf';
  
  vertical-align: super;
}

.tm {
  vertical-align: super;
  font-size: 0.2em;
  font-family: 'Telegraf';
}

.volumap__badge {
  width: clamp(70px, 5vw, 80px);
  height: auto;
}

/* Tagline */
.volumap__tagline {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Lista */
.volumap__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  color: #000000;
  font-size: clamp(17px, 1.6vw, 18px);
}

@media (max-width: 860px) {
 
  .volumap__stick {
    width: 35px;
    height: 100px;
  }
  .volumap__stick::after {
    height: 190px;
  }
  .volumap__inner {
    margin-right: 6vw;
  }
}

@media (max-width: 721px) { 
 .volumap__deco {
    left: -20%;
    
  }

  .v2__deco {
    left: -20% !important;
  }

  .v2__top-badge {
    left: 0px !important;
  }
}

@media (max-width: 561px) { 
 .volumap__deco {
    left: -30% ;
    
  }

  .v2__deco {
    left: -30% !important;
  }

.volumap__bullets {
  font-weight: 700;
}

.volumap__header {
  margin-bottom: 40%;
}

.v2__bottom-copy {
  font-weight: 700;
}

}






/* ---------- ANIMAÇÕES ---------- */

/* 1) DECO: “slide up” com continuidade (repeat-y), passa e assenta no 0 */
@keyframes deco-slide-up{
  0%   { background-position:left 110%; opacity:0 }  /* fora embaixo */
  10%  { opacity:1 }
  75%  { background-position:left -120% }           /* passa do topo (continuidade) */
  100% { background-position:left 0 }               /* volta e estabiliza normal */
}

/* 2) TÍTULO: entra da esquerda (slide + fade) */
.anim-title-left{ 
  transition: all 0.15s ease;
  opacity:0; transform:translateX(-70px);
  animation: title-in 1s cubic-bezier(.22,.61,.36,1) .25s both;
}

.anim-left{ 
  transition: all 0.5s ease;
  opacity:0; transform:translateX(-130px);
  animation: title-in .9s cubic-bezier(.22,.61,.36,1) .25s both;
}
@keyframes title-in{
  to{ opacity:1; transform:none }
}

/* 3) RESTO: fade-in suave no lugar */
.anim-fade{
  transition: all 1s ease;
  opacity:0; transform:none;
  animation: fade-in 1s ease .45s both;
}
@keyframes fade-in{
  to{ opacity:1 }
}

/* acessibilidade: se o user prefere menos movimento, só fade básico */
@media (prefers-reduced-motion: reduce){
  .volumap__deco,
  .anim-title-left,
  .anim-fade{ animation-duration:.01ms; animation-iteration-count:1; animation-delay:0s }
}

/* ===== base da seção ===== */
.volumap-v2{
  --ink:#0a0a0a;
  --muted:#222;
  --green:#7ceb63;
  --pill:#ff8a4b; /* cor do retângulo da borda direita; ajuste à sua */
  position:relative;
  background:#fff;
  color:var(--ink);
  min-height:clamp(560px,85vh,980px);
  overflow:hidden;
  
  display:flex;
  align-items:flex-start;
}

/* ===== png lateral grudado à esquerda ===== */
.v2__deco{
  position: absolute;
  inset: 0 auto 0 0;
 
  display: flex;
  align-items: center;
  z-index: 0;
  pointer-events: none;
}

/* ===== container central ===== */
.v2__inner{
  position:relative; z-index:1;
  margin:0 auto;
  width:min(1080px,92vw);
  padding:clamp(20px,3.2vw,40px) clamp(16px,4vw,24px);
  display:flex; flex-direction:column; gap:clamp(18px,4vh,36px);
}

/* ===== topo: texto à direita + badge abaixo deslocado à esquerda ===== */
.v2__top{
  display:grid;
  grid-template-columns: 1fr;
  justify-items:end;           /* empurra o texto para a direita */
  row-gap:14px;
  margin-top:clamp(10px,3vh,24px);
  max-width: 600px;
}
.v2__top-copy{
   
  font-size: clamp(18px, 2vw, 18px);
  max-width:720px;
  color:var(--muted);
  line-height:1.25;
 
}
.v2__top-copy p{ margin:0 0 6px 0; }
.v2__top-copy strong{ font-weight:800; }

.v2__top-badge{
   position: relative;
  left: 15%;
  width:clamp(90px, 11vw, 150px);
  height:auto;
  justify-self:start;          /* fica “um pouco à esquerda” */
  transform:translateX(-10%);  /* ajuste fino do deslocamento */
}

/* ===== base: título + tagline mono espaçada + copy à direita ===== */
.v2__brand{ display:flex; align-items:center; gap:12px; }
.v2__title{
  margin:0; font-weight:800; line-height:.95;
  font-size:clamp(42px,8vw,92px);
  letter-spacing:.01em;
}
.v2__title .tm{ font-size:.32em; vertical-align:super; font-weight:700; }

.v2__tagline{
  margin:.15em 0 .3em 0;
  font-size:clamp(22px,2.6vw,36px);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}

.v2__bottom-copy{
  
  max-width:720px;
  color:var(--muted);
  line-height:1.25;
  margin-left:auto;            /* alinha o bloco à direita */
}
.v2__bottom-copy p{ margin:0 0 6px 0; }
.v2__bottom-copy strong{ font-weight:800; }

/* ===== ribbon direito colado + stick ===== */
.v2__ribbon{
  position:absolute;
  top:clamp(18px,29vh,300px);
  right:0px;
  display:flex; align-items:center; 
  z-index:2;
}
.v2__ribbon-text{
  text-align:right; white-space:nowrap;
}
.v2__made{
  font-size:clamp(16px,1.6vw,18px);
 
}
.v2__powered{
  font-weight:800;
  font-size:clamp(18px,2vw,26px);
  display:flex; align-items:center; gap:6px; justify-content:flex-end;
}
.v2__powered img{
  height:clamp(14px, 3vw, 32px); width:auto; display:block;
}

/* linha do stick até a pílula na borda direita */
.v2__ribbon-line{
  display:inline-block;
  width:clamp(48px,8vw,120px);
  height:2px; background:#000;
}
.v2__ribbon-pill{
  display:inline-block;
  width:clamp(68px,9vw,140px);
  height:56px;
  background:linear-gradient(90deg, #FFA56E, #FF583C);
}

/* ===== responsivo ===== */
@media (max-width: 960px){
  .v2__deco{ width:min(48vw,520px); opacity:.9; }
  .v2__top-badge{ transform:translateX(-6%); }
}
@media (max-width: 720px){
  .v2__deco{ width:70vw; opacity:.2; }        /* mantém a vibe sem atrapalhar */
  
  .v2__ribbon-line{ width:12vw; }
  .v2__ribbon-pill{ height:28px; }
}

/* ---- SECTION WRAPPER ---- */
.vm-lines-cta{
  --ink:#0a0a0a;
  --line:#000;
  background:#fff;
  color:var(--ink);
  padding:clamp(28px,6vw,60px) 0 clamp(40px,8vw,80px);
}

/* container das linhas */
.vm-lines{
  width:100%;
  margin:0 auto clamp(40px,8vh,90px);
  display:grid;
  gap:clamp(26px,4vh,44px);
}

/* cada “linha + pill” é uma grid de 3 colunas: before | pill | after */
.line-row{
  display:grid;
  grid-template-columns: auto max-content auto;
  align-items:center;
  
}

/* controla o comprimento das linhas por variáveis */
.line-row .before{ width: 400px }
.line-row .after{  width:var(--after, 0px);   }

@media (max-width: 1700px){
.line-row .before{ width: 200px }

}
.line{
  height:2px;
  background:var(--line);
  display:block;
}

/* alinhamentos do conteúdo */
.align-left{ justify-content:flex-start; }
.align-right{
  justify-content:flex-end;
  grid-template-columns: auto max-content; /* só “before” + pill */
}

/* ---- PILLS ---- */
.pill{
  padding:16px 22px;
 
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 0 2px rgba(0,0,0,.06) inset;
  line-height:1.2;
  font-size:clamp(14px,1.4vw,20px);
}
.pill-orange{
  color:#111;
  background:linear-gradient(90deg,#FF3131 0%, #FF914D 100%);
}
.pill-pink{
  color:#111;
  background:linear-gradient(90deg,#FF914D 0%, #8D53FE 100%);
}
.pill-violet{
  color:#fff;
  background:linear-gradient(90deg,#8B00E2 0%, #8B00E2 100%);
  width: 1000px;
  padding: 16px 80px;
}

/* ---- DOWNLOAD BUTTONS ---- */
.vm-downloads{
  width:min(1100px,92vw);
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:clamp(24px,5vw,48px);
  flex-wrap:wrap;
}

.store-btn{
  --offset-x:10px;      /* deslocamento do “degrau” colorido */
  --offset-y:8px;
  --radius:26px;

  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:28px 64px;
  border-radius:var(--radius);
  background:#000;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:clamp(16px,2vw,26px);
  border:2px solid #000;
  
  transition: all 0.15s ease;

  /* ícone */
  /* use PNGs transparentes nos src */
}

.apple2{
  box-shadow: 3px 4px 0px #ff9900, 5px 6px 0px #000000;
}

.playstore {
  box-shadow: 3px 4px 0px #e300f8, 5px 6px 0px #000000;
}

.store-btn img{
  width:28px; height:28px; object-fit:contain; display:block;
}

/* “degrau” colorido atrás (offset) */
.store-btn::after{
  content:"";
  position:absolute;
  inset:auto;
  left:var(--offset-x);
  top:var(--offset-y);
  right:-var(--offset-x);
  bottom:-var(--offset-y);
  border-radius:calc(var(--radius) + 6px);
  z-index:-1;
  background:linear-gradient(90deg,#ff6b5a,#ff9a5a);
}

/* variações de gradiente do degrau */
.store-btn.play::after{
  background:linear-gradient(90deg,#ff5a7a,#8b5cf6);
}

/* hover/focus */
.store-btn:hover{ box-shadow: none;
  transform: translate(6px, 7px); }
.store-btn:active{ transform:translateY(0); }

.quebra {
  display: none;
}

@media (max-width: 1700px){
.pill-violet {
  width: 900px;
}
}

@media (max-width: 1500px){
.pill-violet {
  width: auto;
}
}

@media (max-width: 1000px){
.line-row .before {
  width: 100px;
}
}

@media (max-width: 780px){
.line-row .before {
  width: 50px;
}
}

/* ---- RESPONSIVO ---- */
@media (max-width: 860px){
  .line-row{ }
  .pill{ padding:14px 18px; }
  .store-btn{ padding:18px 28px; --offset-x:8px; --offset-y:6px; }
  .quebra {display: block;}
}
@media (max-width: 560px){
  .line-row .before {
  width: 20px;
}
  .pill{ padding:14px 10px; }
  .pill-violet {
    padding:14px 20px;
  }
  .align-left, .align-right{ justify-content:flex-start; }
  .line-row .after{ width: 10px;}
  .align-right{ justify-content: flex-end}
}


/* ===== base ===== */
.vm-connect{
  --ink:#0b0b0b;
  --line:#000;
  --purple:#7c1bff;
  background:#fff; color:var(--ink);
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:clamp(28px,5vw,64px) 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* cada linha é um “palco” relativo pra posicionar conectores */
.vm-row{
  position:relative;
  width:min(1160px,92vw);
  margin:0 auto;
}

.before2 {
  height: 4px;
  justify-self: flex-end;
  width: 210px;
}

.before3 {
  height: 0px;
  justify-self: flex-start;
  width: 30px;
}

.after2 {
   position: relative; /* importante */
  width: 480px;
  display: block;
  height: 4px;
  align-self: center;
}

.line.after2::after {
  content: "";
  position: absolute;
  right: 0;       /* fixa na direita */
  top: 50%;       /* centraliza verticalmente */
  transform: translateY(-50%); /* corrige o alinhamento vertical */
  width: min(420px, 32vw);
  height: 280px;   /* altura da imagem */
  background: url("images/chart.png") no-repeat center/contain;
}
/* espaçamentos verticais entre linhas */
.vm-row + .vm-row{ margin-top:clamp(48px,10vh,96px); }

/* ===== pills (frases coloridas) ===== */
.vm-pill{
  display:inline-block;
  padding:16px 28px;
  z-index: 5;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  white-space:nowrap;             /* mantém em uma linha no desktop */
  /* quebras seguras no mobile */
  overflow-wrap:break-word;
  word-break:break-word;
  font-size: clamp(10px, 1.4vw, 20px);
}
.pill-orange2{
  color:#ffffff;
  background:linear-gradient(90deg,#FF3131 0%, #FF914D 100%);
}
.pill-magenta{
  color:#ffffff;
  background:linear-gradient(90deg,#FF914D 0%, #8D53FE 100%);
}

/* ===== charts ===== */
.vm-chart{
  width:min(520px,40vw);
  height:auto;
  border-radius:18px;
  display:block;
 
}

/* ===== ROW 1 layout ===== */
.vm-row--top{
  /* duas colunas: texto (auto) | espaço flexível onde entra o chart */
  display:grid;
  grid-template-columns: auto max-content auto;
  align-items:center;
 
  /* variáveis de ajuste fino do conector */
  --top-conn-left-offset: 24px;   /* distância do centro do pill até início da imagem da linha */
  --top-conn-top-offset: -20px;   /* subir/descer o conector */
}
.vm-row--top .vm-pill{ justify-self:start; }
.chart-top{ justify-self:end; }

/* conector da linha 1 (imagem) */
.connector-top{
  position:absolute;
  left: calc(50% - var(--top-conn-left-offset));
  top: 50%;
  transform: translate(-50%, -50%);
  width:min(400px,28vw);          /* ajuste o tamanho da imagem da linha */
  height:auto;
  pointer-events:none;
}

/* ===== ROW 2 layout ===== */
.vm-row--mid{
  display:grid;
  grid-template-columns: 1fr;     /* texto ocupa linha, chart abaixo à esquerda */
  row-gap: clamp(18px,3vh,28px);
  --mid-conn-left: clamp(220px,28vw,420px);  /* onde começa a imagem da linha */
            /* quão abaixo do pill ela começa */
  --mid-conn-width: min(520px,40vw);
}
.vm-row--mid .vm-pill{ justify-self:start; }
.chart-bottom{
  justify-self:start;
  width:min(850px,52vw);          /* maior no print do meio */
  z-index: 1;
}

/* conector da linha 2 (imagem) — “liga” pill -> chart inferior */
.connector-mid{
  position:absolute;
  left: var(--mid-conn-left);
  top: calc(0% + var(--mid-conn-top));
  width: var(--mid-conn-width);
  height:auto;
  pointer-events:none;
}

/* ===== ROW 3: texto à direita + linha com retângulo no meio ===== */
.vm-row--rightline{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  column-gap:clamp(18px,4vw,36px);
  margin-top:clamp(72px,12vh,120px);
}
.vm-righttext{
  justify-self:end;
  margin:0;
  font-size:clamp(14px,2.2vw,28px);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
}
.vm-rightline{
  --bar-w:14px;                   /* largura do retângulo vertical */
  --bar-h:44px;                   /* altura do retângulo */
  position:relative;
  display:block;
  height:4px;
  width:min(620px,46vw);
  background:#000;
}
.vm-rightline::after{
  content:"";
  position:absolute;
  top:20px; left:50%;
  transform:translate(-50%, calc(-50% - var(--bar-h)/2));
  width:var(--bar-w); height:var(--bar-h);
  background:var(--purple);
  border-radius:2px;
}

/* ===== responsivo ===== */
@media (max-width: 980px){
  .vm-chart{ width:min(520px,58vw); }
  .chart-bottom{ width:min(620px,66vw); }
  .connector-top{ width:min(420px,42vw); }
  .vm-row--mid{ --mid-conn-left: clamp(180px,34vw,360px); }
  .connector-mid {top: 10px;}
  .before2 {
    width: 80px;
  }

  .after2 {
    width: 300px;
  }
}
@media (max-width: 720px){
  /* empilha tudo no mobile */
  .vm-row--top{ row-gap:18px; }
  .before2 {
    width: 40px;
  }

  .after2 {
    width: 230px;
  }
  .chart-top{ justify-self:center; width:min(560px,92vw); box-shadow:0 0 0 2px rgba(0,0,0,.9); }
  .connector-top{
    left: 50%; top: calc(100% - 28px);
    transform: translate(-50%, 0); width:min(360px,70vw);
  }

  .vm-row--mid{ --mid-conn-left: 18vw; --mid-conn-width: 64vw; }
  .chart-bottom{ justify-self:center; width:min(560px,92vw); }
  .connector-mid {top: 10px;}
  .vm-rightline{ width: 56vw; }
  .vm-righttext{ text-align:center; justify-self:center; }
  .vm-row--rightline{  row-gap:16px; }
}

@media (max-width: 560px){
  .before2 {
    width: 25px;
  }
  .after2 {
    width: 150px;
  }

      .connector-mid {
        top: 20px;
    }
 }

 /* ===== LIQUIDITY (full screen) ===== */
.sec-liquidity{
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: clamp(40px, 6vw, 80px) 0;
  background: #fff; /* mantém contraste com as seções anteriores */
  color: #0a0a0a;
}

.liquidity-wrap{
  width: min(1200px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/* Lista à esquerda com "linhas" finas */
.liquidity-list ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.5vw, 14px);
}
/* Lista à esquerda com linha que vem da borda da tela */
.liquidity-list li{
  --gap: clamp(80px, 8vw, 120px);   /* distância entre a linha e o texto */
  position: relative;
  padding-left: var(--gap);
  font-weight: 800;
  display: flex;
  align-items: center;
}

.liquidity-list li::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -100vw;                                /* começa fora da tela à esquerda */
  width: calc(100vw + var(--gap));             /* termina exatamente no início do texto */
  height: 2px;
  background: #0a0a0a;
}


/* Imagem circular à direita */
.liquidity-hero{
  display: grid;
  place-items: center;
}
.liquidity-hero img{
  width: min(462px, 66vw);
  aspect-ratio: 1/1;
  border-radius: 100%;
  object-fit: cover;     /* recorta a imagem quadrada dentro do círculo */
  overflow: hidden;      /* garante bordas limpas */
  display: block;
  rotate: -15deg;
  
}

/* CTA com linhas horizontais */
.liquidity-cta{
  width: min(1100px, 92vw);
  margin: clamp(24px, 3vw, 40px) auto 0;
  position: relative;
  display: grid;
  place-items: center;
}
.liquidity-cta::before,
.liquidity-cta::after{
  content:"";
  position:absolute;
  top:50%;
  width: 40%;
  height: 2px;
  background:#0a0a0a;
  transform: translateY(-50%);
}
.liquidity-cta::before{ left: 0; }
.liquidity-cta::after{ right: 0; }

/* Botão em pílula com leve 3D/gradiente */
.cta-pill{
  display:inline-block;
  padding: 14px 24px;
  border-radius: 15px;
  font-weight: 900;
  text-decoration: none;
  color: #fff;
  background:
    linear-gradient(0deg, rgba(0,0,0,.20), rgba(0,0,0,0)) ,
    linear-gradient(90deg, #f22274);
  box-shadow: 0 4px 0 #5b2fd6;
  border: 2px solid #0a0a0a;
  transition: transform .12s ease, box-shadow .12s ease;
  text-align: center;
}
.cta-pill:hover{ transform: translateY(-1px); box-shadow: 0 6px 0 #5b2fd6; }
.cta-pill:active{ transform: translateY(0); box-shadow: 0 2px 0 #5b2fd6; }

/* ===== Responsividade ===== */
@media (max-width: 980px){
  .liquidity-wrap{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .liquidity-hero img{
    width: min(420px, 72vw);
  }
  .liquidity-list li{
    grid-template-columns: 56px 1fr;
    gap: 12px;
  }
  .liquidity-cta::before,
  .liquidity-cta::after{
    width: 30%;
  }
}

@media (max-width: 560px){
  .sec-liquidity{ padding: 28px 0 36px; }
  .liquidity-list ul{ gap: 10px; }
  .liquidity-list li{ grid-template-columns: 40px 1fr; gap: 10px; }
  .cta-pill{ padding: 12px 18px; font-size: 14px; }
  .liquidity-cta::before,
  .liquidity-cta::after{ width: 24%; }
}

/* garante que as linhas fiquem atrás do botão */
.liquidity-cta {
  position: relative;
  z-index: 0;
}
.liquidity-cta::before,
.liquidity-cta::after {
  z-index: -1; /* manda as linhas para trás */
}

/* ===== VISIBILITY (full screen) ===== */
/* ===== VISIBILITY (full screen corrigido) ===== */
.sec-visibility{
  position: relative;
  width: 100vw;
  height: 100vh;             /* garante que ocupe a tela toda */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sec-visibility::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/back.png") center center / cover no-repeat;
  z-index: 0;
}

.vis-wrap{
  position: relative;
  z-index: 1; /* mantém o conteúdo acima do fundo */
  width: min(1200px, 92vw);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: clamp(20px, 5vw, 60px);
  padding: clamp(28px, 5vw, 60px) 0;
}


/* título no bloco preto “recortado” */
.vis-title{
  margin: 0;
  color: #fff;
  background: #0a0a0a;
  padding: clamp(18px, 2.8vw, 28px);
  line-height: 1.02;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: clamp(28px, 6vw, 74px);
  display: inline-block;
  box-shadow: 0 0 0 2px #0a0a0a; /* borda firme igual ao mock */
}

/* coluna direita com as pills empilhadas */
.vis-right{
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
  justify-items: end; /* alinha à direita no desktop */
}

/* pills pretas */
.vis-pill{
  color:#fff;
  background:#0a0a0a;
  display:inline-block;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: clamp(12px, 2vw, 20px);
  box-shadow: 0 0 0 2px #0a0a0a; /* borda sólida */
}

/* responsivo */
@media (max-width: 980px){
  .vis-wrap{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .vis-right{ justify-items: start; }  /* pills passam a alinhar à esquerda */
}

@media (max-width: 560px){
  .vis-title{ line-height: 1.05; }
  .vis-pill{ white-space: normal; }
}

/* ===== MAP TRADE (corrigido) ===== */
.sec-maptrade{
  position: relative;
  min-height: 100vh;
  background: #0a0a0a;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Conteúdo principal deslocado para a DIREITA */
.maptrade-wrap{
  position: relative;
  z-index: 3;                           /* acima da imagem e da linha */
  width: min(1040px, 92vw);
  margin-left: clamp(360px, 36vw, 520px); /* empurra tudo pra direita */
  display: grid;
  row-gap: clamp(10px, 2.8vh, 20px);
}

/* Cabeçalho (a linha visível passa a ser a da imagem; escondemos esta) */
.maptrade-head{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: clamp(12px, 2vw, 18px);
  max-width: 860px;
}
.maptrade-line{ display: none; }        /* usamos a linha da imagem (abaixo) */

/* Título */
.maptrade-title{
  margin: 0;
  margin-top: -150px;                  /* ajusta pra ficar alinhado com a linha */
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .95;
  font-weight: 10;
  font-family: 'TelegrafBold', ui-sans-serif, system-ui, Arial;
  font-size: clamp(34px, 6.2vw, 72px);
  max-width: 640px;
}

/* Texto em 2 colunas */
.maptrade-copy{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;   /* esquerda menor, direita maior */
  gap: clamp(16px, 3vw, 36px);
  max-width: 860px;
}
.maptrade-copy p{
  margin: 0;
  color: #d9d9d9;
  line-height: 1.34;
  font-size: clamp(14px, 1.4vw, 18px);
}
.maptrade-copy p strong{ color:#fff; font-weight:800; }

/* ===== Imagem à esquerda ===== */
.maptrade-art{
  position: absolute;
  left: 0;
  bottom: 8%;                           /* imagem mais baixa */
  display: grid;
  align-items: end;
  pointer-events: none;
  z-index: 1;
}

/* LINHA: nasce fora da tela à ESQUERDA e passa ACIMA da imagem */
.maptrade-art::before{
  content: "";
  position: absolute;
  left: -100vw;                         /* começa fora da tela */
  top: -14px;                           /* logo acima do topo da imagem */
  width: calc(100vw + 450px);           /* alcança até os títulos à direita */
  height: 2px;
  background: #e6e6e6;
  z-index: 2;                           /* acima da imagem, abaixo dos textos */
}

.maptrade-art img{
  width: clamp(220px, 34vw, 420px);
  height: auto;
  object-fit: cover;
  border-radius: 28px;
  transform: translateX(-28%);          /* sai um pouco para fora da tela */
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.35));
  z-index: 1;
}

/* ===== Responsivo ===== */
@media (max-width: 980px){
  .maptrade-wrap{
    margin-left: clamp(200px, 24vw, 320px); /* aproxima um pouco em telas médias */
    width: min(900px, 92vw);
  }
  .maptrade-copy{ grid-template-columns: 1fr; max-width: 720px; }
}

@media (max-width: 640px){
  .maptrade-wrap{ margin-left: clamp(90px, 12vw, 140px); }
  .maptrade-title{ line-height: 1; font-size: clamp(28px, 9vw, 42px); }
  .maptrade-art img{
    width: clamp(200px, 62vw, 360px);
    transform: translateX(-32%);
  }
  .maptrade-art::before{
    top: -10px;                         /* ajusta a linha mais próxima no mobile */
    width: calc(100vw + 220px);
  }
}

/* ===== QUOTES (full-screen) ===== */
.sec-quotes{
  position: relative;
  height: 100vh;                 /* tela cheia */
  overflow: hidden;              /* sem scroll lateral */
  display: grid;
  place-items: center;
  background: #000;              /* fallback */
  color: #fff;
  isolation: isolate;
}

/* fundo com cover usando a imagem do projeto */
.sec-quotes .quotes-bg{
  position: absolute; inset: 0;
  background: url("images/backgamb.png") center center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* palco para posicionar quotes */
.quotes-stage{
  position: relative;
  z-index: 1;
  width: min(1200px, 96vw);
  height: min(760px, 86vh);      /* altura de referência p/ % ficarem boas */
}

/* quote posicionável por variáveis */
.quote{
  position: absolute;
  left: var(--x);
  top: var(--y);
  max-width: var(--w, 32ch);
  margin: 0;
  font-family: 'SpacemonoRegular', ui-monospace, Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.35;
  letter-spacing: .02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.55); /* legibilidade sobre o fundo */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* preserva nitidez */
}

/* responsivo: empilha as frases quando a tela é estreita */
@media (max-width: 900px){
  .sec-quotes{ height: auto; min-height: 100vh; }
  .quotes-stage{
    width: min(720px, 92vw);
    height: auto;
    display: grid;
    gap: 16px;
    padding: clamp(24px, 6vw, 40px) 0;
  }
  .quote{
    position: static;            /* vira fluxo normal */
    max-width: 60ch;
  }
}

/* telas bem pequenas: um pouco mais de espaço */
@media (max-width: 560px){
  .quote{ font-size: clamp(12px, 3.8vw, 15px); }
}

/* ===== DOWNLOADS (full screen, atualizado) ===== */
.sec-downloads{
  position: relative;
  height: 100vh;
  background:#000;
  color:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;          /* centro vertical e horizontal */
  isolation:isolate;
  --bg: url("images/backgamb2.png");
}
.sec-downloads .dl-bg{
  position:absolute;
  inset:0;
  background: var(--bg) center/cover no-repeat;
  z-index:0;
  pointer-events:none;
}

/* palco central */
.dl-stage{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === Faixa branca (1 linha) === */
.dl-ribbon{
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 20%);
  transform: translate(-50%, -50%);  /* centraliza a partir das coords */
  background: #fff;
  color: #0a0a0a;
  padding: 14px 26px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.8vw, 16px);
  white-space: nowrap;
  
}

/* === Botões === */
.dl-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(24px,5vw,56px);
  flex-wrap:wrap;
}

.dl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px 56px;               /* maior */
  border-radius:22px;
  font-weight:900;
  font-size:clamp(18px,2.2vw,24px);
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(90deg,#000000,#000000); /* rosa preenchido */
  border:2px solid #ff6b5a;
  
  transition:transform .12s ease, box-shadow .12s ease;
}

.dl-btn:hover{
  transform:translateY(-2px);
  
}
.dl-btn:active{
  transform:translateY(0);
  
}

.dl-btn img{
  width:32px;
  height:auto;
  display:block;
}

/* remove estilos antigos de variações */


/* === Responsivo === */
@media (max-width:900px){
  .sec-downloads{height:auto;min-height:100vh;}
  .dl-stage{
    height:auto;
    align-content:center;
    gap:32px;
    padding:80px 0;
  }
  .dl-buttons{flex-direction:column;}
  .dl-btn{width:min(420px,88vw);}
}
@media (max-width:560px){
  .dl-ribbon{transform:scale(.92);}
}