/* =========================================================
   ANALI-Z — apresentação comercial horizontal
   Scroll vertical nativo traduzido em X.
   ========================================================= */

/* ---------- TOKENS · paleta ANALI-Z ---------- */
:root{
  /* superfícies */
  --bg:            #f2f3f4;   /* off-white — fundo principal */
  --sage:          #ceddd7;
  --green-deep:    #22312d;
  --ink:           #131414;

  /* tinta */
  --ink-soft:      #56635f;   /* corpo — 5.6:1 */
  --ink-faint:     #67736f;   /* labels — 4.4:1 */
  --line:          rgba(34,49,45,.16);
  --line-strong:   rgba(34,49,45,.3);

  /* acentos */
  --accent:        #0ad6b5;   /* turquesa — preenchimento */
  --green:         #3d927b;
  --red:           #c8433a;   /* dores — 5.7:1 no off-white */
  --red-light:     #ff6b5e;   /* vermelho sobre fundo escuro — 6.7:1 */

  /* sobre fundo escuro */
  --on-dark:       #f2f3f4;
  --on-dark-soft:  rgba(242,243,244,.62);

  --font-display:  'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --pad-x:         clamp(24px, 4.1vw, 78px);
  --gap:           clamp(56px, 7vw, 132px);
  --band:          min(640px, 70vh);

  --ease:          cubic-bezier(.22,.61,.36,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; }
svg{ display:block; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:var(--ink); }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; top:0; left:0; right:0;
  z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad-x) 0;
}

.brand{ display:flex; align-items:baseline; gap:12px; }
.brand__word{
  font-family:var(--font-display);
  font-size:23px; font-weight:700;
  letter-spacing:.06em;
  line-height:1;
}
.brand__z{ color:var(--green); }
.brand__tag{
  font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint);
}
@media (max-width:720px){ .brand__tag{ display:none; } }

.nav{ display:flex; gap:clamp(18px,2.4vw,38px); }

.nav__link{
  font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.nav__link span{ position:relative; display:inline-block; padding-bottom:3px; }
.nav__link span::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:var(--accent);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--ease-out);
}
.nav__link:hover span::after{ transform:scaleX(1); transform-origin:0 50%; }

/* =========================================================
   SHELL / VIEWPORT / TRACK
   ========================================================= */
.shell{ position:relative; }

.viewport{ position:sticky; top:0; height:100vh; overflow:hidden; }

.track{
  position:absolute; top:0; left:0;
  width:max-content; height:100%;
  display:flex; align-items:center;
  gap:var(--gap);
  padding:0 var(--pad-x);
  will-change:transform;
}

.panel{ flex:0 0 auto; }

body.is-dragging, body.is-dragging *{ cursor:grabbing !important; user-select:none; }

/* =========================================================
   TIPOGRAFIA BASE
   ========================================================= */
.eyebrow{
  font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:clamp(16px,1.7vw,28px);
}
.eyebrow--light{ color:var(--on-dark-soft); }

.kicker{
  font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* =========================================================
   HERO / CAPA
   ========================================================= */
.hero{
  width:calc(100vw - var(--pad-x) * 2);
  display:grid;
  grid-template-columns:minmax(320px, 660px) minmax(0,1fr);
  gap:clamp(48px, 12vw, 240px);
  align-items:center;
}
.hero__col{ max-width:660px; }

.hero__col > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease-out), transform 1.05s var(--ease-out);
}
body.is-loaded .hero__col > *{ opacity:1; transform:none; }
.hero__col > *:nth-child(1){ transition-delay:.14s; }
.hero__col > *:nth-child(2){ transition-delay:.22s; }
.hero__col > *:nth-child(3){ transition-delay:.40s; }
.hero__col > *:nth-child(4){ transition-delay:.52s; }
.hero__col > *:nth-child(5){ transition-delay:.64s; }

.hero__title{
  margin-top:26px;
  font-family:var(--font-display);
  font-size:100px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:.92;
  text-transform:uppercase;
  overflow:hidden;
  padding-bottom:.06em;
}
.hero__title > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1.2s var(--ease-out) .3s;
}
body.is-loaded .hero__title > span{ transform:translateY(0); }

.hero__accent{ color:var(--green); font-weight:inherit; }

.hero__lead{
  margin-top:30px;
  max-width:46ch;
  font-size:clamp(17px,1.35vw,24px);
  font-weight:300;
  line-height:1.7;
  color:var(--ink-soft);
}
.hero__lead b{ font-weight:600; color:var(--ink); }

.meta{ margin-top:42px; display:flex; gap:clamp(40px,4.4vw,80px); }
.meta dt{
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px;
}
.meta dd{
  font-family:var(--font-display);
  font-size:clamp(15px,1.15vw,19px);
  font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}

.scroll-hint{
  margin-top:clamp(38px,4.6vw,66px);
  display:flex; align-items:center; gap:18px;
  color:var(--ink-faint);
  transition:opacity .9s var(--ease-out) .64s, transform 1.05s var(--ease-out) .64s;
}
body .scroll-hint.is-hidden{ opacity:0; transition:opacity .5s var(--ease); }
.scroll-hint__label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.scroll-hint__line{
  width:66px; height:1px; background:currentColor; opacity:.55;
  transform-origin:0 50%;
  animation:hintLine 2.6s var(--ease) infinite;
}
.scroll-hint__arrow{ font-size:14px; animation:hintArrow 2.6s var(--ease) infinite; }
@keyframes hintLine{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.55)} }
@keyframes hintArrow{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-14px)} }

/* placa da capa — recebe a foto */
.hero__plate{
  position:relative;
  height:var(--band);
  background:var(--accent);
  overflow:hidden;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease-out) .25s;
}
body.is-loaded .hero__plate{ clip-path:inset(0 0 0 0); }

.lockup{
  text-align:center;
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--ease-out) .85s, transform 1.1s var(--ease-out) .85s;
}
body.is-loaded .lockup{ opacity:1; transform:none; }
.lockup__word{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(44px,6vw,108px);
  font-weight:800; letter-spacing:.02em; line-height:1;
  text-transform:uppercase;
}
.lockup__rule{
  display:block; width:64px; height:3px; margin:24px auto;
  background:var(--ink);
}
.lockup__sub{
  display:block;
  font-size:clamp(11px,.95vw,14px); font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
}

/* =========================================================
   BLOCO DE TEXTO
   ========================================================= */
.blk{ width:clamp(300px, 33vw, 620px); }

.blk__title{
  font-family:var(--font-display);
  font-size:clamp(32px,3.9vw,62px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.06;
  overflow:hidden;
  padding-bottom:.06em;
}
.blk__title span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out) .12s;
}
[data-reveal].is-in .blk__title span{ transform:translateY(0); }

.blk__body{
  margin-top:clamp(18px,1.8vw,30px);
  font-size:clamp(14.5px,1.05vw,17.5px);
  font-weight:300;
  line-height:1.95;
  color:var(--ink-soft);
}

/* lista com check dentro de bloco */
.check{ margin-top:clamp(22px,2.2vw,36px); display:grid; gap:14px; }
.check li{
  position:relative; padding-left:30px;
  font-size:clamp(14px,1vw,16.5px); font-weight:400;
  color:var(--ink-soft);
}
.check li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:12px; height:12px;
  background:var(--accent);
  clip-path:polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  height:var(--band);
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(180px,15vw,272px);
  align-content:center;   /* o grupo fica no meio da faixa... */
  align-items:start;      /* ...mas os traços do topo alinham entre si */
  gap:clamp(40px,4.5vw,88px);
}
.stat{
  width:100%;
  padding-top:26px;
  border-top:2px solid var(--ink);
}
.stat__num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(46px,5.6vw,92px);
  font-weight:800; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block; margin-top:16px;
  font-size:12px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  line-height:1.6;
  color:var(--ink-soft);
}

/* =========================================================
   COMPARATIVO
   ========================================================= */
.compare{
  height:var(--band);
  display:grid; grid-template-columns:repeat(2, clamp(240px,21vw,392px));
  gap:clamp(24px,2.6vw,48px);
  align-items:stretch;
}
.compare__col{
  padding:clamp(28px,2.6vw,44px);
  display:flex; flex-direction:column;
}
.compare__col--us{ background:var(--accent); }
.compare__col--us .eyebrow{ color:rgba(19,20,20,.6); }
.compare__col--them{ background:transparent; border:1px solid var(--line); }

.compare__list{ display:grid; gap:20px; align-content:center; flex:1; }
.compare__list li{
  position:relative; padding-left:28px;
  font-size:clamp(14px,1.05vw,17px); font-weight:400; line-height:1.55;
}
.compare__col--us li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:13px; height:13px; background:var(--ink);
  clip-path:polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.compare__col--them{ color:var(--ink-soft); }
.compare__col--them li::before{
  content:""; position:absolute; left:1px; top:.5em;
  width:11px; height:11px;
  border:1.5px solid var(--ink-faint);
}

/* =========================================================
   STATEMENT (painel escuro)
   ========================================================= */
.statement{
  width:clamp(320px, 52vw, 1000px);
  height:var(--band);
  background:var(--ink);
  color:var(--on-dark);
  padding:clamp(36px,3.6vw,68px);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
}
.statement__mark{
  display:block;
  font-family:'Tinos', Georgia, 'Times New Roman', serif;
  font-size:clamp(58px,6vw,112px);
  font-weight:700;
  line-height:.7;
  color:var(--accent);
  margin-bottom:clamp(14px,1.6vw,28px);
}
.statement__text{
  font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,46px);
  font-weight:500; line-height:1.3; letter-spacing:-.005em;
  overflow:hidden;
}
.statement__text span{
  display:block;
  transform:translateY(103%);
  transition:transform 1.05s var(--ease-out) .12s;
}
[data-reveal].is-in .statement__text span{ transform:translateY(0); }
.statement__text em{ font-style:normal; color:var(--accent); }
.statement__text s{ color:var(--on-dark-soft); text-decoration-thickness:2px; }
.statement__foot{
  margin:clamp(24px,2.4vw,40px) auto 0;
  max-width:52ch;
  font-size:clamp(13.5px,.98vw,16px); font-weight:300; line-height:1.85;
  color:var(--on-dark-soft);
}

/* =========================================================
   DORES / CHECKLIST EM DUAS COLUNAS
   ========================================================= */
.pains{ height:var(--band); display:flex; align-items:center; }
.pains__list{
  display:grid;
  grid-template-columns:repeat(2, clamp(230px,19vw,340px));
  grid-auto-flow:column;
  grid-template-rows:repeat(6, auto);
  gap:clamp(14px,1.4vw,22px) clamp(28px,3vw,56px);
}
.pains__list li{
  position:relative; padding-left:26px;
  font-size:clamp(13.5px,.98vw,16px); font-weight:400; line-height:1.5;
  color:var(--ink-soft);
}
.pains__list li::before{
  content:""; position:absolute; left:1px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:var(--green);
}
.pains--check .pains__list{ grid-template-rows:repeat(5, auto); }
.pains--check li{ color:var(--ink); }
.pains--check li::before{
  width:12px; height:12px; background:var(--accent); transform:none;
  clip-path:polygon(14% 44%, 0 58%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}

/* =========================================================
   DIVIDER (abertura de seção, escuro)
   ========================================================= */
.divider{
  width:clamp(300px, 38vw, 700px);
  height:var(--band);
  background:var(--green-deep);
  color:var(--on-dark);
  padding:clamp(36px,3.6vw,68px);
  display:flex; flex-direction:column; justify-content:center;
}
.divider__eyebrow{
  font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:clamp(18px,1.8vw,30px);
}
.divider__title{
  font-family:var(--font-display);
  font-size:clamp(34px,4.2vw,68px);
  font-weight:700; line-height:1.05; letter-spacing:-.01em;
  text-transform:uppercase;
  overflow:hidden; padding-bottom:.05em;
}
.divider__title span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--ease-out) .12s;
}
[data-reveal].is-in .divider__title span{ transform:translateY(0); }
.divider__body{
  margin-top:clamp(18px,1.8vw,30px);
  max-width:44ch;
  font-size:clamp(13.5px,.98vw,16.5px); font-weight:300; line-height:1.9;
  color:var(--on-dark-soft);
}

/* =========================================================
   CASES
   ========================================================= */
.cases{
  height:var(--band);
  display:flex; align-items:stretch;
  gap:clamp(16px,1.6vw,28px);
}
.case{
  width:clamp(230px,18vw,318px);
  padding:clamp(24px,2.2vw,36px);
  background:#fff;
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease-out) calc(var(--i) * 70ms),
             transform .9s var(--ease-out) calc(var(--i) * 70ms);
}
[data-reveal].is-in .case{ opacity:1; transform:none; }

.case__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;
  padding-bottom:18px; margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.case__name{
  font-family:var(--font-display);
  font-size:clamp(18px,1.5vw,25px);
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.case__time{
  font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}

.case__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.case__row + .case__bar{ margin:8px 0 20px; }
.case__lbl{
  font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint);
}
.case__val{
  font-family:var(--font-display);
  font-size:clamp(14px,1.1vw,18px); font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.case__row--after .case__val{ color:var(--ink); font-size:clamp(15px,1.2vw,20px); }

.case__bar{ height:6px; background:var(--sage); }
.case__bar span{
  display:block; height:100%;
  width:var(--w); background:var(--line-strong);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease-out) calc(var(--i) * 70ms + .3s);
}
.case__bar--after span{ background:var(--accent); }
[data-reveal].is-in .case__bar span{ transform:scaleX(1); }

.case__delta{
  margin-top:auto; padding-top:22px;
  font-family:var(--font-display);
  font-size:clamp(26px,2.4vw,42px);
  font-weight:800; letter-spacing:-.02em; line-height:1;
  color:var(--green);
}

/* =========================================================
   BIG NUMBER
   ========================================================= */
.bignum{
  width:clamp(300px, 34vw, 620px);
  height:var(--band);
  background:var(--accent);
  padding:clamp(36px,3.6vw,68px);
  display:flex; flex-direction:column; justify-content:center;
}
.bignum__num{
  font-family:var(--font-display);
  font-size:clamp(86px,11vw,210px);
  font-weight:800; letter-spacing:-.035em; line-height:.85;
  font-variant-numeric:tabular-nums;
}
.bignum__label{
  margin-top:clamp(20px,2vw,34px);
  max-width:20ch;
  font-family:var(--font-display);
  font-size:clamp(19px,1.8vw,32px);
  font-weight:500; line-height:1.25;
}
.bignum__foot{
  margin-top:18px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(19,20,20,.62);
}

/* =========================================================
   ETAPAS
   ========================================================= */
.stage{
  width:clamp(280px, 27vw, 500px);
  height:var(--band);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-left:clamp(20px,1.8vw,32px);
  padding-top:calc(var(--band) * .13);   /* todas as etapas começam na mesma altura */
  border-left:2px solid var(--accent);
}
.stage__num{
  font-family:var(--font-display);
  font-size:clamp(52px,5.4vw,94px);
  font-weight:800; letter-spacing:-.03em; line-height:.85;
  color:var(--ink);
}
.stage__title{
  margin-top:14px;
  font-family:var(--font-display);
  font-size:clamp(24px,2.5vw,42px);
  font-weight:700; line-height:1.1; text-transform:uppercase;
}
.stage__list{ margin-top:clamp(22px,2.2vw,34px); display:grid; gap:14px; }
.stage__list li{
  position:relative; padding-left:24px;
  font-size:clamp(13.5px,.98vw,16.5px); font-weight:400; line-height:1.6;
  color:var(--ink-soft);
}
.stage__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; background:var(--accent);
}
.stage__sub{ margin-top:14px; margin-left:24px; display:grid; gap:9px; }
.stage__sub li{
  position:relative; padding-left:20px;
  font-size:clamp(12.5px,.9vw,15px); font-weight:400;
  color:var(--ink-faint);
}
.stage__sub li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:5px; height:5px; border-radius:50%;
  background:var(--line-strong);
}

/* =========================================================
   KPIs
   ========================================================= */
.kpis{
  width:clamp(300px, 32vw, 580px);
  height:var(--band);
  display:flex; flex-direction:column; justify-content:center;
}
.kpis__grid{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.kpi{
  padding:clamp(22px,2.2vw,34px);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.kpi--hi{ background:var(--accent); border-color:var(--accent); }
.kpi__label{
  display:block;
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.kpi--hi .kpi__label{ color:rgba(19,20,20,.62); }
.kpi__value{
  display:block; margin-top:12px;
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,38px);
  font-weight:700; letter-spacing:-.01em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.kpi__value i{
  font-style:normal; font-size:.5em; font-weight:600;
  color:var(--ink-faint); margin-right:.28em;
}
.kpi--hi .kpi__value i{ color:rgba(19,20,20,.55); }

/* =========================================================
   SUPORTE
   ========================================================= */
.support{ width:clamp(320px, 42vw, 800px); }
.support__title{
  font-family:var(--font-display);
  font-size:clamp(32px,3.9vw,62px);
  font-weight:600; line-height:1.06;
  overflow:hidden; padding-bottom:.05em;
}
.support__title span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--ease-out) .12s;
}
[data-reveal].is-in .support__title span{ transform:translateY(0); }
.support__lead{
  margin-top:16px;
  font-size:clamp(14.5px,1.05vw,17.5px); font-weight:300;
  color:var(--ink-soft);
}
.support__grid{
  margin-top:clamp(30px,3vw,52px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,1.8vw,32px);
}
.support__item{ padding-top:20px; border-top:2px solid var(--accent); }
.support__num{
  font-family:var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:.1em;
  color:var(--green);
}
.support__item h4{
  margin-top:12px;
  font-family:var(--font-display);
  font-size:clamp(16px,1.35vw,23px);
  font-weight:700; line-height:1.15; text-transform:uppercase;
}
.support__item p{
  margin-top:8px;
  font-size:13px; font-weight:300; line-height:1.6;
  color:var(--ink-soft);
}

/* =========================================================
   DUO — serviço + educação
   ========================================================= */
.duo{
  height:var(--band);
  display:grid; grid-template-columns:repeat(2, clamp(250px,22vw,410px));
  gap:clamp(20px,2vw,36px);
}
.duo__col{
  padding:clamp(28px,2.6vw,44px);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.duo__col--hi{ background:var(--green-deep); border-color:var(--green-deep); color:var(--on-dark); }
.duo__tag{
  font-family:var(--font-display);
  font-size:clamp(22px,2.1vw,36px);
  font-weight:800; letter-spacing:.02em; text-transform:uppercase; line-height:1;
}
.duo__col--hi .duo__tag{ color:var(--accent); }
.duo__sub{
  margin-top:8px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.duo__col--hi .duo__sub{ color:var(--on-dark-soft); }
.duo__list{ margin-top:clamp(24px,2.4vw,38px); display:grid; gap:16px; }
.duo__list li{
  position:relative; padding-left:24px;
  font-size:clamp(13.5px,.98vw,16.5px); font-weight:400; line-height:1.55;
  color:var(--ink-soft);
}
.duo__col--hi .duo__list li{ color:var(--on-dark); }
.duo__list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; background:var(--accent);
}
.duo__note{
  margin-top:auto; padding-top:26px;
  font-size:12px; font-weight:600;
  letter-spacing:.06em;
  color:var(--accent);
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{
  width:clamp(320px, 52vw, 1000px);
  height:var(--band);
  display:flex; align-items:center;
}
.pricing__list{
  width:100%;
  display:grid; gap:0;
  border-top:1px solid var(--line);
}
.pricing__row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:clamp(14px,1.4vw,28px);
  align-items:start;
  padding:clamp(13px,1.25vw,20px) 0;
  border-bottom:1px solid var(--line);
}
.pricing__n{
  font-family:var(--font-display);
  font-size:14px; font-weight:700;
  color:var(--green);
  padding-top:2px;
}
.pricing__body h4{
  font-family:var(--font-display);
  font-size:clamp(15px,1.2vw,20px);
  font-weight:700; line-height:1.2;
}
.pricing__body h4 em{ font-style:normal; font-weight:400; color:var(--ink-faint); }
.pricing__body p{
  margin-top:7px;
  font-size:clamp(11.5px,.82vw,13.5px); font-weight:300; line-height:1.65;
  color:var(--ink-soft);
  max-width:78ch;
}
.pricing__val{
  font-family:var(--font-display);
  font-size:clamp(17px,1.45vw,25px);
  font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pricing__row--bonus{ background:var(--sage); padding-left:14px; padding-right:14px; }
.pricing__val--tag{
  max-width:150px; white-space:normal; text-align:right;
  font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  line-height:1.5; color:var(--green);
}

/* =========================================================
   OFERTA
   ========================================================= */
.offer{
  width:clamp(320px, 44vw, 840px);
  height:var(--band);
  background:var(--ink);
  color:var(--on-dark);
  padding:clamp(36px,3.6vw,68px);
  display:flex; flex-direction:column; justify-content:center;
}
.offer__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,2.6vw,48px);
}
.offer__block{ padding-top:22px; border-top:2px solid var(--on-dark-soft); }
.offer__block--total{ border-top-color:var(--accent); }
.offer__label{
  display:block;
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-soft);
}
.offer__value{
  display:block; margin-top:16px;
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,60px);
  font-weight:800; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.offer__block--total .offer__value{ color:var(--accent); }
.offer__blank{
  display:inline-block; min-width:2ch;
  border-bottom:2px dashed rgba(242,243,244,.35);
  outline:none;
}
.offer__blank:focus{ border-bottom-style:solid; border-bottom-color:var(--accent); }
.offer__kicker{
  margin-top:clamp(30px,3vw,52px);
  font-family:var(--font-display);
  font-size:clamp(17px,1.6vw,28px);
  font-weight:500; line-height:1.35;
  color:var(--on-dark);
}

/* =========================================================
   FECHAMENTO
   ========================================================= */
.closing{
  width:clamp(320px, 50vw, 960px);
  height:var(--band);
  background:var(--accent);
  padding:clamp(36px,3.6vw,68px);
  display:flex; flex-direction:column; justify-content:center;
}
.closing__word{
  font-family:var(--font-display);
  font-size:clamp(52px,7vw,132px);
  font-weight:800; letter-spacing:.01em; line-height:.9;
  text-transform:uppercase;
}
.closing__title{
  margin-top:clamp(22px,2.2vw,36px);
  font-family:var(--font-display);
  font-size:clamp(19px,2vw,36px);
  font-weight:500; line-height:1.25;
}
.closing__place{
  margin-top:18px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(19,20,20,.62);
}
.closing__cta{
  margin-top:clamp(30px,3vw,52px);
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 32px;
  background:var(--ink); color:var(--accent);
  font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transition:transform .5s var(--ease-out);
}
.closing__cta:hover{ transform:translateY(-3px); }
.closing__arrow{ transition:transform .5s var(--ease-out); }
.closing__cta:hover .closing__arrow{ transform:translate(4px,-4px); }

/* =========================================================
   MÍDIA
   ========================================================= */
.media{ height:var(--band); position:relative; }
.media--portrait{ width:clamp(220px, 22vw, 420px); }
.media--wide    { width:clamp(300px, 40vw, 760px); }

.media__frame{
  position:relative; width:100%; height:100%;
  overflow:hidden; background:var(--green-deep);
}
.media__frame--light{ background:var(--sage); }

.media__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.1);
  will-change:transform;
}

.media__slot{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; padding:24px; text-align:center;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(242,243,244,.45);
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.03) 0 1px, transparent 1px 11px);
}
.media__slot b{
  font-family:var(--font-display);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--accent); text-transform:none;
}
.media__frame--light .media__slot{
  color:rgba(34,49,45,.5);
  background:repeating-linear-gradient(135deg,
    rgba(34,49,45,.05) 0 1px, transparent 1px 11px);
}
.media__frame--light .media__slot b{ color:var(--ink); }
.media__frame.is-empty .media__img{ display:none; }
.media__frame.is-empty .media__slot{ display:flex; }

.media__cap{
  position:absolute; left:0; bottom:-30px;
  font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:fixed; left:0; right:0; bottom:0;
  z-index:40;
  padding:0 var(--pad-x) 20px;
}
.progress{ position:relative; height:4px; background:var(--line); margin-bottom:18px; }
.progress__fill{
  position:absolute; inset:0;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
}
.footer__row{ display:flex; align-items:center; justify-content:space-between; }
.footer__copy{
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.footer__nav{ display:flex; align-items:center; gap:16px; }
.footer__btn{
  width:30px; height:30px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  font-size:13px;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.footer__btn:hover{ background:var(--ink); border-color:var(--ink); color:var(--accent); }
.footer__where{
  font-family:var(--font-display);
  font-size:12px; font-weight:700;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  min-width:58px; text-align:center;
}

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-out), transform 1.05s var(--ease-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }
.hero{ transition-delay:.05s; }

/* =========================================================
   CURSOR
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0;
  z-index:90; pointer-events:none;
  mix-blend-mode:difference;
  opacity:0; transition:opacity .3s var(--ease);
}
.cursor.is-on{ opacity:1; }
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor__dot{ width:7px; height:7px; background:#fff; transition:opacity .3s var(--ease); }
.cursor__ring{
  width:82px; height:82px; background:#fff;
  display:grid; place-items:center;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s var(--ease-out);
}
.cursor__label{
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:#000; mix-blend-mode:difference;
}
.cursor.is-drag .cursor__ring{ transform:translate(-50%,-50%) scale(1); }
.cursor.is-drag .cursor__dot{ opacity:0; }

/* =========================================================
   RESPONSIVO — abaixo de 1024px vira vertical
   ========================================================= */
@media (max-width:1024px){
  .viewport{ position:static; height:auto; overflow:visible; }
  .track{
    position:static; display:block; width:auto; height:auto;
    padding:120px var(--pad-x) 110px;
  }
  .panel{ width:100% !important; max-width:none; height:auto !important; }
  .panel + .panel{ margin-top:clamp(56px,10vw,96px); }

  .hero{ display:block; }
  .hero__plate{ margin-top:40px; height:min(400px,58vw); }
  .meta{ flex-wrap:wrap; }

  .stats{ grid-auto-flow:row; grid-auto-columns:auto; gap:34px; }
  .stat{ width:100%; }

  .compare,.duo{ grid-template-columns:1fr; }
  .cases{ display:grid; grid-template-columns:1fr; gap:18px; }
  .case{ width:100%; }

  .pains__list{ grid-auto-flow:row; grid-template-columns:1fr; grid-template-rows:none; }
  .kpis__grid{ grid-template-columns:1fr 1fr; }
  .support__grid{ grid-template-columns:1fr; }
  .offer__grid{ grid-template-columns:1fr; }

  .pricing__row{ grid-template-columns:24px minmax(0,1fr); }
  .pricing__val{ grid-column:2; margin-top:8px; }
  .pricing__val--tag{ text-align:left; max-width:none; }

  .media{ height:min(480px,86vw) !important; margin-bottom:34px; }
  .media--wide{ height:min(360px,60vw) !important; }
  .media__cap{ bottom:-26px; }

  .scroll-hint,.cursor,.footer__nav{ display:none; }
}

@media (max-width:560px){
  .header{ padding-top:16px; }
  .nav{ gap:14px; }
  .nav__link{ font-size:10px; letter-spacing:.07em; }
  .kpis__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   MOTION REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .blk__title span,.divider__title span,.statement__text span,
  .support__title span,.hero__title > span{ transform:none; }
  .hero__plate{ clip-path:none; }
  .lockup,.hero__col > *{ opacity:1; transform:none; }
  .case{ opacity:1; transform:none; }
  .case__bar span{ transform:scaleX(1); }
}

/* =========================================================
   IMPRESSÃO / PDF
   ========================================================= */
@media print{
  .header,.footer,.cursor,.scroll-hint{ display:none; }
  .viewport{ position:static; height:auto; overflow:visible; }
  .track{ position:static; display:block; width:auto; height:auto; padding:0; }
  .panel{ width:100% !important; height:auto !important; page-break-after:always; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   MAPA DA METODOLOGIA (diagrama clicável)
   Painel claro: funde com o fundo da página, estrutura em tinta escura.
   ========================================================= */
.mapa{
  --dia-bg:      transparent;
  --dia-line:    var(--ink);
  --dia-accent:  var(--green);
  --dia-venda-a: var(--accent);
  --dia-venda-b: var(--green);

  width:min(calc(100vw - var(--pad-x) * 2), 1560px);
  height:var(--band);
  position:relative;
  background:var(--dia-bg);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,2vw,38px);
}

.mapa__svg{ width:100%; height:100%; overflow:visible; }

.mapa__glow0{ stop-color:var(--dia-accent); stop-opacity:.09; }
.mapa__glow1{ stop-color:var(--dia-accent); stop-opacity:0; }
.mapa__venda0{ stop-color:var(--dia-venda-a); }
.mapa__venda1{ stop-color:var(--dia-venda-b); }

.mapa__lines path,
.mapa__brackets path{
  fill:none;
  stroke:var(--dia-line);
  stroke-width:2;
  stroke-linecap:square;
}
.mapa__brackets path{ stroke-width:1.6; }

.mapa__dots{
  fill:none;
  stroke:var(--dia-accent);
  stroke-width:4;
  stroke-linecap:round;
  stroke-dasharray:0 13;
}

/* traço da estrutura desenhando na entrada */
.mapa__lines path{
  stroke-dasharray:900;
  stroke-dashoffset:900;
  transition:stroke-dashoffset 1.4s var(--ease-out) .15s;
}
[data-reveal].is-in .mapa__lines path{ stroke-dashoffset:0; }

.mapa__brackets path,
.mapa__brk,
.mapa__dots{
  opacity:0;
  transition:opacity .9s var(--ease) 1.05s;
}
[data-reveal].is-in .mapa__brackets path,
[data-reveal].is-in .mapa__brk,
[data-reveal].is-in .mapa__dots{ opacity:1; }

/* tipografia do diagrama — serifada, como na referência */
.mapa__brk,
.seg__label,
.venda__label{
  font-family:'Tinos', 'Times New Roman', Times, serif;
  text-anchor:middle;
}
.mapa__brk{
  font-size:28px;
  fill:var(--dia-line);
}
.mapa__brk--start{ text-anchor:start; }
.mapa__brk .hl{ fill:var(--dia-accent); }

.seg__label{
  font-size:28px;
  fill:var(--dia-line);
  transition:fill .35s var(--ease);
}
.venda__label{
  font-size:32px; font-weight:700;
  fill:var(--ink);
}

/* caixa Venda */
.venda__outer{
  fill:none; stroke:var(--dia-line); stroke-width:2.5;
}
.venda__fill{ transition:filter .4s var(--ease); }

/* segmentos clicáveis */
.seg{ cursor:pointer; outline:none; }
.seg__hit{
  fill:var(--dia-accent);
  fill-opacity:0;
  transition:fill-opacity .4s var(--ease);
}
.seg:hover .seg__hit,
.seg:focus-visible .seg__hit{ fill-opacity:.1; }
.seg:hover .seg__label,
.seg:focus-visible .seg__label{ fill:var(--dia-accent); }
.seg:focus-visible .seg__hit{ stroke:var(--dia-accent); stroke-width:2; }

.seg--venda:hover .venda__fill,
.seg--venda:focus-visible .venda__fill{ filter:brightness(1.18); }
.seg--venda:hover .venda__outer,
.seg--venda:focus-visible .venda__outer{ stroke:var(--dia-accent); }

.mapa__hint{
  position:absolute; left:clamp(18px,2vw,38px); bottom:clamp(14px,1.5vw,26px);
  font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* =========================================================
   PRÉ-LOADER DE NAVEGAÇÃO
   ========================================================= */
.preloader{
  position:fixed; inset:0;
  z-index:80;
  background:#050706;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:22px;
  opacity:0; pointer-events:none;
  transition:opacity .42s var(--ease);
}
.preloader.is-on{ opacity:1; pointer-events:auto; }

.preloader__eyebrow{
  font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent);
}
.preloader__label{
  font-family:'Tinos', 'Times New Roman', Times, serif;
  font-size:clamp(30px,4vw,64px);
  color:#fff;
  text-align:center;
}
.preloader__bar{
  width:min(280px,42vw); height:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.preloader__bar i{
  display:block; width:100%; height:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
}
.preloader.is-on .preloader__bar i{
  animation:preFill .78s var(--ease-out) forwards;
}
@keyframes preFill{ to{ transform:scaleX(1); } }

/* =========================================================
   MAPA — responsivo e motion reduzido
   ========================================================= */
@media (max-width:1024px){
  .mapa{ width:100% !important; height:auto !important; padding:20px 0; }
  .mapa__svg{ height:auto; }
  .mapa__hint{ position:static; margin-top:14px; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .mapa__lines path{ stroke-dashoffset:0; }
  .mapa__brackets path,.mapa__brk,.mapa__dots{ opacity:1; }
  .preloader.is-on .preloader__bar i{ animation:none; transform:scaleX(1); }
}

/* =========================================================
   LOGOS (arquivos brancos do manual — invertidos no claro)
   ========================================================= */
.brand__logo{
  height:32px; width:auto;
  filter:brightness(0);
  transition:filter .9s var(--ease);
}

.lockup{ display:flex; flex-direction:column; align-items:center; }
.lockup__logo{
  width:clamp(180px, 24vw, 420px); height:auto;
  filter:brightness(0);
}

.closing__logo{
  width:clamp(220px, 30vw, 520px); height:auto;
  filter:brightness(0);
}

/* foto da capa */
.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 34%;   /* mantém o rosto no enquadramento */
  transform:scale(1.06);
  transition:transform 1.6s var(--ease-out) .35s;
}
body.is-loaded .hero__photo{ transform:scale(1); }

/* =========================================================
   TÍTULOS DE SEÇÃO EM VERDE
   ========================================================= */
.blk__title,
.support__title,
.stage__title{ color:var(--green); }

/* números dos indicadores */
.stat__num{ color:var(--green); white-space:nowrap; }
.stat__num i{
  font-style:normal;
  font-size:.42em;
  letter-spacing:0;
  margin-left:.14em;
}

/* título preto com trecho destacado em verde */
.blk__title--ink{ color:var(--ink); }
.blk__title .hl{ color:var(--green); font-weight:inherit; }

/* =========================================================
   LISTAS: dores em vermelho, ganhos em verde
   ========================================================= */
.pains        { --mark:var(--red);    --glow:200,67,58;   }
.pains--check { --mark:var(--accent); --glow:61,146,123;  }

.pains__list li::before{
  background:var(--mark);
  transition:transform .45s var(--ease-out), box-shadow .35s var(--ease);
}

/* hover: cresce, muda de cor e ganha brilho */
.pains__list li{
  transform-origin:left center;
  transition:color .35s var(--ease),
             transform .45s var(--ease-out),
             text-shadow .35s var(--ease);
}
.pains__list li:hover{
  color:rgb(var(--glow));
  transform:scale(1.035);
  text-shadow:0 0 16px rgba(var(--glow),.55), 0 0 34px rgba(var(--glow),.25);
}
.pains__list li:hover::before{
  transform:scale(1.3);
  box-shadow:0 0 12px rgba(var(--glow),.9), 0 0 24px rgba(var(--glow),.5);
}

/* =========================================================
   CARD DE FOTO COM PAINEL DE VIDRO
   ========================================================= */
.card{
  position:relative;
  width:clamp(300px, 44vw, 800px);
  height:var(--band);
  border-radius:22px;
  overflow:hidden;
  background:var(--green-deep);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(12px,1.3vw,20px);
  isolation:isolate;
}

.card__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 72%;   /* desce o recorte até os dois na mesa */
  transform:scale(1.07);
  transition:transform 1.6s var(--ease-out) .2s;
}
[data-reveal].is-in .card__img{ transform:scale(1); }

/* véu para o vidro e o texto sempre terem contraste */
.card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,
    rgba(10,16,14,.72) 0%,
    rgba(10,16,14,.28) 38%,
    rgba(10,16,14,.05) 62%);
}

/* palavra fantasma sangrando na direita */
.card__ghost{
  position:absolute; top:clamp(6px,1vw,20px); right:-.09em;
  font-family:var(--font-display);
  font-size:clamp(96px,14vw,250px);
  font-weight:800; line-height:.78; letter-spacing:-.04em;
  color:rgba(255,255,255,.24);
  pointer-events:none;
}

/* painel de vidro */
.card__glass{
  position:relative;
  border-radius:15px;
  padding:clamp(18px,1.9vw,30px);
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  color:#fff;
}

.card__badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 16px 7px 11px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.card__badge svg{
  width:15px; height:15px;
  fill:none; stroke:var(--accent);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}

.card__row{
  margin-top:clamp(14px,1.5vw,24px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(16px,2vw,36px);
}
.card__title{
  font-family:var(--font-display);
  font-size:clamp(23px,2.7vw,46px);
  font-weight:600; line-height:1.08; letter-spacing:-.01em;
}
.card__sub{
  margin-top:10px;
  max-width:38ch;
  font-size:clamp(12px,.88vw,14.5px);
  font-weight:300; line-height:1.6;
  color:rgba(255,255,255,.66);
}
.card__more{
  display:inline-flex; align-items:center; gap:10px;
  flex:0 0 auto;
  padding-bottom:4px;
  font-size:13px; font-weight:500;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.3);
  transition:border-color .4s var(--ease);
}
.card__more span{ display:inline-block; transition:transform .45s var(--ease-out); }
.card__more:hover{ border-bottom-color:var(--accent); }
.card__more:hover span{ transform:translateX(5px); }

@media (max-width:1024px){
  .card{ height:min(560px,105vw) !important; }
  .card__row{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   BOTÃO "VER CASE COMPLETO" NO CARD
   ========================================================= */
.case__cta{
  margin-top:clamp(14px,1.4vw,22px);
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 16px;
  border:1px solid var(--line-strong);
  font-family:var(--font-display);
  font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.case__cta span{ display:inline-block; transition:transform .45s var(--ease-out); }
.case__cta:hover{ background:var(--ink); border-color:var(--ink); color:var(--accent); }
.case__cta:hover span{ transform:translateX(5px); }

/* =========================================================
   CASE COMPLETO — tela cheia
   ========================================================= */
.casefull{
  position:fixed; inset:0;
  z-index:85;
  background:
    radial-gradient(120% 90% at 78% 40%, rgba(10,214,181,.1), transparent 62%),
    linear-gradient(150deg, #1d2a26 0%, #131c19 55%, #0d1412 100%);
  color:var(--on-dark);
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
  overflow:auto;
}
.casefull.is-on{ opacity:1; pointer-events:auto; }

.casefull__close{
  position:fixed; top:24px; right:var(--pad-x);
  z-index:2;
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid rgba(242,243,244,.28);
  border-radius:50%;
  font-size:24px; line-height:1;
  color:var(--on-dark);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.casefull__close:hover{ background:var(--accent); border-color:var(--accent); color:#0d1412; }

.casefull__inner{
  min-height:100%;
  padding:clamp(48px,5vw,84px) var(--pad-x) clamp(24px,2.4vw,40px);
  display:flex; flex-direction:column;
}

.casefull__title{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,56px);
  font-weight:800; line-height:1.05;
  letter-spacing:-.01em; text-transform:uppercase;
}
.casefull__sub{
  margin-top:12px;
  font-size:clamp(13px,.95vw,15.5px); font-weight:300;
  color:var(--on-dark-soft);
}

.casefull__body{
  flex:1;
  margin-top:clamp(26px,3vw,52px);
  display:flex; align-items:center;
  gap:clamp(28px,3.6vw,72px);
}

/* cartão antes/depois */
.casefull__card{
  flex:0 0 auto;
  width:clamp(220px,19vw,300px);
  padding:clamp(22px,2.2vw,34px);
  border:1px solid rgba(242,243,244,.18);
  border-radius:4px;
  background:rgba(255,255,255,.03);
}
.casefull__name{
  font-family:var(--font-display);
  font-size:clamp(17px,1.5vw,25px);
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
}
.casefull__rule{
  display:block; width:38px; height:4px;
  margin:clamp(16px,1.6vw,26px) 0;
  background:var(--accent);
}
.casefull__lbl{
  font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft);
}
.casefull__before,
.casefull__after{
  margin:8px 0 clamp(16px,1.6vw,26px);
  font-family:var(--font-display);
  font-size:clamp(20px,1.9vw,32px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.casefull__after{ color:var(--accent); }
.casefull__pill{
  display:inline-block; width:100%;
  padding:11px 18px;
  border:1px solid rgba(242,243,244,.3);
  border-radius:999px;
  text-align:center;
  font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft);
}
.casefull__delta{
  margin-top:clamp(16px,1.6vw,26px);
  font-family:var(--font-display);
  font-size:clamp(28px,2.6vw,46px);
  font-weight:800; letter-spacing:-.02em; line-height:1;
  color:var(--accent);
}

/* mockups de celular */
.casefull__phones{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,2.4vw,48px);
  min-width:0;
}
.phone{
  position:relative;
  flex:0 0 auto;
  width:clamp(160px,14.5vw,255px);
  aspect-ratio:9 / 19;
  border-radius:clamp(22px,2vw,34px);
  background:#080c0b;
  border:5px solid #232f2c;
  box-shadow:0 34px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.phone__notch{
  position:absolute; top:9px; left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:34%; height:14px;
  border-radius:999px;
  background:#080c0b;
}
.phone__img,
.phone__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#080c0b;
}
.phone__slot{
  position:absolute; inset:0;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  gap:9px; padding:20px; text-align:center;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(242,243,244,.4);
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 11px);
}
.phone__slot b{
  font-family:var(--font-display);
  font-size:11px; font-weight:600; letter-spacing:.03em;
  color:var(--accent); text-transform:none;
  word-break:break-all;
}
.phone.is-empty .phone__img,
.phone.is-empty .phone__video{ display:none; }
.phone.is-empty .phone__slot{ display:flex; }

.phone__cap{
  position:absolute; left:0; right:0; bottom:-30px;
  text-align:center;
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-soft);
}

.casefull__foot{
  margin-top:clamp(28px,3vw,52px);
  padding-top:18px;
  border-top:1px solid rgba(242,243,244,.14);
  display:flex; align-items:center; justify-content:space-between;
  font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-dark-soft);
}

@media (max-width:1024px){
  .casefull__body{ flex-direction:column; align-items:stretch; }
  .casefull__card{ width:100%; }
  .casefull__phones{ flex-wrap:wrap; gap:52px 20px; padding-bottom:20px; }
}

/* slot do card enquanto a foto não existe */
.card__slot{
  position:absolute; inset:0; z-index:-1;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; padding:24px; text-align:center;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(242,243,244,.4);
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 11px);
}
.card__slot b{
  font-family:var(--font-display);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--accent); text-transform:none;
}
.card.is-empty .card__img{ display:none; }
.card.is-empty .card__slot{ display:flex; }

/* =========================================================
   BULLET: círculo + chevron (máscara SVG, cor pela variável)
   ========================================================= */
:root{
  --bullet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Ccircle cx='6' cy='8' r='6'/%3E%3Cpath d='M14 1L21 8L14 15L14 11.5L17.5 8L14 4.5Z'/%3E%3C/svg%3E");
}

.stage__list li::before,
.duo__list li::before,
.pains:not(.pains--check) .pains__list li::before{
  content:"";
  position:absolute; left:0; top:.4em;
  width:19px; height:12.7px;
  border-radius:0;
  transform:none;
  clip-path:none;
  box-shadow:none;
  background:var(--mark, var(--green));
  -webkit-mask:var(--bullet) no-repeat left center / contain;
          mask:var(--bullet) no-repeat left center / contain;
}

/* espaço para o novo marcador */
.stage__list li,
.duo__list li{ padding-left:30px; }
.pains:not(.pains--check) .pains__list li{ padding-left:32px; }

/* sobre o painel verde-escuro o turquesa lê melhor que o verde */
.duo__col--hi{ --mark:var(--accent); }

/* sub-itens da Etapa 05 seguem discretos, só em verde */
.stage__sub li::before{ background:var(--green); }

/* o hover das dores continua crescendo o marcador */
.pains:not(.pains--check) .pains__list li:hover::before{
  transform:scale(1.18);
  box-shadow:none;
}

/* =========================================================
   MOCKUP DE NAVEGADOR — landing page rodando
   ========================================================= */
.browser{
  position:relative;
  width:clamp(300px, 42vw, 800px);
  height:var(--band);
  display:flex; flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background:#1a2320;
  box-shadow:0 30px 64px rgba(19,20,20,.22);
}

.browser__bar{
  flex:0 0 auto;
  height:38px;
  display:flex; align-items:center; gap:14px;
  padding:0 14px;
  background:#243029;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.browser__dots{ display:flex; gap:6px; }
.browser__dots i{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.22);
}
.browser__dots i:first-child{ background:var(--accent); opacity:.8; }
.browser__url{
  flex:1;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.28);
  font-size:10.5px; font-weight:500;
  letter-spacing:.06em;
  color:rgba(242,243,244,.55);
  text-align:center;
}

.browser__screen{
  position:relative;
  flex:1;
  overflow:hidden;
  background:#fff;
}

/* a landing é montada em largura de desktop e reduzida por escala */
.browser__page{
  position:absolute; top:0; left:0;
  width:1440px;
  transform-origin:top left;
  pointer-events:none;    /* vitrine: nenhum clique passa */
  user-select:none;
}

.browser .media__cap{ bottom:-30px; }

@media (max-width:1024px){
  .browser{ height:min(440px,74vw) !important; margin-bottom:34px; }
}

/* =========================================================
   KPIs COM PRINT AO LADO
   ========================================================= */
.kpis{ width:clamp(300px, 56vw, 1060px); }

.kpis__row{
  display:flex; align-items:stretch;
  gap:clamp(18px,2.2vw,40px);
}
.kpis__grid{ flex:0 0 clamp(280px,31vw,520px); }

.kpis__shot{
  flex:1; min-width:0;
  position:relative;
}
.kpis__shot .media__frame{ height:100%; min-height:260px; }

@media (max-width:1024px){
  .kpis__row{ flex-direction:column; }
  .kpis__grid{ flex:none; }
  .kpis__shot .media__frame{ height:min(300px,56vw); }
}

/* riscado do "post e relatório" em vermelho */
.statement__text s{ color:var(--red-light); }

/* =========================================================
   ENTREGÁVEIS EM COLUNAS
   ========================================================= */
.deliver{
  width:clamp(320px, 74vw, 1400px);
  height:var(--band);
  display:flex; flex-direction:column; justify-content:center;
}

.deliver__head{ max-width:64ch; }
.deliver__title{
  font-family:var(--font-display);
  font-size:clamp(24px,2.7vw,46px);
  font-weight:600; line-height:1.08;
  color:var(--green);
}
.deliver__note{
  margin-top:14px;
  font-size:clamp(12.5px,.92vw,15px); font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-faint);
}

.deliver__grid{
  margin-top:clamp(28px,3.2vw,58px);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(16px,1.8vw,32px);
  align-items:start;
}

.deliver__item{
  padding:clamp(20px,1.8vw,28px) 0 0;
  border-top:2px solid var(--line-strong);
  opacity:0; transform:translateY(20px);
  transition:opacity .8s var(--ease-out) calc(var(--i) * 90ms),
             transform .9s var(--ease-out) calc(var(--i) * 90ms),
             border-color .4s var(--ease);
}
[data-reveal].is-in .deliver__item{ opacity:1; transform:none; }
.deliver__item:hover{ border-top-color:var(--green); }

.deliver__num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(13px,1vw,15px); font-weight:700;
  letter-spacing:.14em;
  color:var(--green);
}
.deliver__name{
  margin-top:clamp(12px,1.2vw,18px);
  font-family:var(--font-display);
  font-size:clamp(16px,1.4vw,24px);
  font-weight:700; line-height:1.12;
  text-transform:uppercase;
}
.deliver__desc{
  margin-top:12px;
  font-size:clamp(12px,.88vw,14.5px);
  font-weight:300; line-height:1.75;
  color:var(--ink-soft);
}

@media (max-width:1024px){
  .deliver__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .deliver__grid{ grid-template-columns:1fr; }
}

/* =========================================================
   INVESTIMENTO — compactado para caber na faixa
   ========================================================= */
.pricing{ width:clamp(320px, 70vw, 1340px); }

.pricing__row{
  grid-template-columns:30px minmax(0,1fr) auto;
  gap:clamp(12px,1.1vw,24px);
  align-items:center;
  padding:clamp(8px,.8vw,13px) 0;
}
.pricing__n{ font-size:13px; padding-top:0; }

.pricing__body h4{
  font-size:clamp(14px,1.08vw,18.5px);
  line-height:1.18;
}
.pricing__body p{
  margin-top:5px;
  max-width:none;
  font-size:clamp(10.5px,.76vw,12.8px);
  line-height:1.55;
}

.pricing__val{ font-size:clamp(16px,1.32vw,24px); }

.pricing__row--bonus{
  padding:clamp(9px,.85vw,14px) 14px;
}
.pricing__val--tag{
  max-width:128px;
  font-size:9.5px; letter-spacing:.08em; line-height:1.45;
}

/* =========================================================
   INSTAGRAM DA AGÊNCIA
   ========================================================= */
.footer__left{ display:flex; align-items:center; gap:clamp(16px,1.8vw,30px); }

.footer__ig{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:lowercase;
  color:var(--ink-faint);
  transition:color .35s var(--ease);
}
.footer__ig svg{
  width:14px; height:14px;
  fill:currentColor;
  transition:transform .45s var(--ease-out);
}
.footer__ig:hover{ color:var(--green); }
.footer__ig:hover svg{ transform:translateY(-2px) scale(1.08); }

.closing__ig{
  position:relative;
  transition:color .35s var(--ease);
}
.closing__ig::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .5s var(--ease-out);
}
.closing__ig:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

@media (max-width:560px){
  .footer__copy{ display:none; }
}