/* ============================================================
   Effects Lab — recriação dos efeitos do template TD_Mike
   ============================================================ */

:root{
  --bg:#000;
  --bg-elevated:#0a0a0a;
  --bg-card:#050505;
  --fg:#fff;
  --muted:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.14);
  --content: min(80vw, 1340px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
  /* Hero — espaços fixos independentes de viewport height */
  --hero-topo: clamp(80px, 10.7vw, 205px);  /* nav → topo "GAVERT" (desktop) */
  --hero-gap: clamp(48px, 6.2vw, 118px);    /* base "SITES" → linha meta (desktop) */
  /* Desktop — font-size do título (usado para posicionar botão/indicador) */
  --hero-title-fs: min(17.75vw, 255.66px);
  /* Desktop — espaço visível acima E abaixo da frase (simétrico) */
  --espaco-frase: clamp(200px, 14.6vw, 300px);
  /* Desktop — padding-bottom da Hero (mantém a Hero idêntica; conta no espaço de cima) */
  --hero-bottom: 130px;
  /* Mobile — espaço visível entre a base da estrela e o topo de "GAVERT" */
  --gap-estrela-titulo: clamp(40px, 12vw, 56px);
  /* Mobile — canvas da estrela e largura visível alvo (~46% da tela) */
  --orb-size-mobile: 70vw;
  --estrela-mobile: 46vw;
  /* Mobile — padding-bottom da Hero (espaço rodapé, ref: 32–40px) */
  --hero-bottom-mobile: clamp(32px, 8vw, 40px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,255,255,.02) 0%, transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; }
h1,h2,h3,p,blockquote{ margin:0; }

::selection{ background:#fff; color:#000; }

/* ---------- grão ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

/* ============================================================
   HEADER — pílula flutuante que se esconde no scroll
   ============================================================ */
.header{
  position:fixed;
  top:24px; left:50%;
  z-index:50;
  transform:translateX(-50%);
  will-change:transform;
  transition:transform .55s var(--ease-io);
}
.header.is-hidden{ transform:translate(-50%, -110px); }

.pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:320px;
  height:52px;
  padding:0 4px 0 26px;
  border-radius:12px;
  background:#fff;
  color:#050505;
  overflow:hidden;
  transition:width .55s var(--ease), background .3s;
}
@media (prefers-reduced-motion: reduce){
  .pill{ transition-duration:.01ms; }
}

.brand{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  display:flex;
  align-items:center;
}
.brand-logo{
  height:28px;
  width:auto;
  display:block;
}

.menu{
  display:grid;
  grid-template-columns:0fr;
  opacity:0;
  transition:grid-template-columns .55s var(--ease), opacity .3s ease;
}
.menu__inner{
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:22px;
  white-space:nowrap;
  font-size:12px;
  font-weight:500;
}
.menu__inner a{ position:relative; }
.menu__inner a::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
@media (hover:hover){
  .menu__inner a:hover::after{ transform:scaleX(1); transform-origin:left; }
}

.pill.is-open{
  width:var(--pill-open-width, max-content);
  max-width:calc(100vw - 32px);
}
.pill.is-open .menu{ grid-template-columns:1fr; opacity:1; }

.dots{
  position:relative;
  width:44px; height:44px;
  flex:0 0 44px;
  border-radius:8px;
  background:#050505;
  display:flex; align-items:center; justify-content:center; gap:3px;
  transition:transform .4s var(--ease), background .3s;
}
.dots span{
  width:3px; height:3px; border-radius:50%;
  background:#fff;
  transition:transform .4s var(--ease);
}
@media (hover:hover){
  .dots:hover{ transform:scale(1.04); }
}
.dots[aria-expanded="true"]{ transform:rotate(90deg); }

/* WhatsApp CTA na pílula */
.pill__cta{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  height:36px;
  border-radius:10px;
  background:#050505;
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  flex:0 0 auto;
  transition:background .3s, transform .3s var(--ease);
}
.pill__cta svg{ flex:0 0 16px; height:16px; }
@media (hover:hover){
  .pill__cta:hover{ background:#1a1a1a; transform:scale(1.04); }
}
@media (max-width: 720px){
  .pill__cta{ display:none; }
}

/* ============================================================
   OBJETO 3D — DESKTOP (min-width: 721px)
   Dentro do .hero__title, centralizado na junção das duas linhas.
   ============================================================ */
@media (min-width: 721px){
  .orb{
    position:absolute;
    /* Centralizado na junção entre "Gavert" e "Sites":
       título tem duas linhas de ~0.82em cada (line-height .8 + padding .02);
       junção = fim da 1ª linha = 0.82em do topo;
       altura total do título (sem padding-bottom) = 1.64em → junção em 50%;
       com padding-bottom .32em, altura total = 1.96em → junção em ~42%;
       top: calc(50% - 0.16em) compensa o padding-bottom e centraliza na junção */
    top:calc(50% - 0.16em);
    left:50%;
    width:min(24vw, 340px);
    aspect-ratio:1;
    transform:translate(-50%, -50%);
    z-index:1; /* acima do texto (z-index auto = 0), abaixo do meta se necessário */
    pointer-events:none;
    will-change:transform;
  }

  /* Hero actions no desktop — botão centralizado no gap SITES→meta; scroll com estilo mobile */
  .hero__actions{
    display:contents;
  }
  .hero__cta{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    /* Centro entre base de "SITES" (≈ hero-topo + 1.62*title-fs) e topo da meta (≈ hero-topo + 1.96*title-fs + hero-gap) */
    top:calc(var(--hero-topo) + 1.79 * var(--hero-title-fs) + var(--hero-gap) / 2 - 18px);
    border:1px solid rgba(255,255,255,.3);
  }
  .hero__meta{
    margin-top:var(--hero-gap);
    text-align:center;
    justify-content:center;
    gap:8px;
  }
  .hero__scroll{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:calc(var(--hero-topo) + 1.96 * var(--hero-title-fs) + var(--hero-gap) + 46px);
    /* Estilo idêntico ao mobile */
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.02em;
    color:rgba(255,255,255,.42);
    text-align:center;
  }
  .hero__scroll svg{
    width:16px;
    height:16px;
    animation:heroScroll 2.6s ease-in-out infinite;
  }
}
.hero__scroll svg{
  width:16px;
  height:16px;
  animation:heroScroll 2.6s ease-in-out infinite;
}
@keyframes heroScroll{
  0%,100%{ opacity:.35; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll svg{ animation:none; opacity:.6; }
}
.orb canvas{ width:100%; height:100%; display:block; }
.orb.is-fallback::after{
  content:"";
  position:absolute; inset:22%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2a2a2a, #000 65%);
  box-shadow:0 0 120px 40px rgba(255,255,255,.06);
}

/* ============================================================
   HERO
   ============================================================ */
main{ position:relative; }

/* Grid pattern sutil no hero */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.hero__title,
.hero__meta{ position:relative; z-index:2; }

.hero{
  position:relative;
  /* altura ditada pelo conteúdo — sem min-height 100vh/svh */
  display:flex;
  flex-direction:column;
  align-items:center;
  /* sem justify-content — empilhamento natural */
  padding:var(--hero-topo) 10vw var(--hero-bottom);
  z-index:2;
}

.hero__title{
  position:relative;           /* wrapper do título + orb */
  width:var(--content);
  font-size:min(17.75vw, 255.66px);
  line-height:.8;
  letter-spacing:-.08em;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:.32em;
  z-index:2;
}
.hero__title .line{
  display:block;
  overflow:hidden;
  width:100%;
  padding-bottom:.02em;
}
.hero__title .line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1.15s var(--ease);
}
body.is-ready .hero__title .line:nth-child(1) > span{ transition-delay:.15s; }
body.is-ready .hero__title .line:nth-child(2) > span{ transition-delay:.27s; }
body.is-ready .hero__title .line > span{ transform:translateY(0); }

.hero__meta{
  width:var(--content);
  display:flex;
  justify-content:space-between;
  font-size:14px;
  line-height:1.2;
  color:var(--fg);
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s ease .55s, transform .9s var(--ease) .55s;
}
body.is-ready .hero__meta{ opacity:1; transform:none; }

/* ações extras da Hero (desktop + mobile) */
.hero__actions{
  width:var(--content);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* ============================================================
   STATEMENT
   ============================================================ */
.statement{
  position:relative;
  z-index:2;
  /* espaço visível acima = padding-bottom da Hero + este padding-top = --espaco-frase */
  padding:calc(var(--espaco-frase) - var(--hero-bottom)) 10vw var(--espaco-frase);
}
.statement__text{
  width:var(--content);
  margin:0 auto;
  font-size:min(4.44vw, 64px);
  line-height:.95;
  letter-spacing:-.04em;
  font-weight:500;
  text-transform:uppercase;
  text-align:center;
}
.statement__text .w{
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) rotate(2deg);
  transition:opacity .7s ease, transform .9s var(--ease);
}
.statement.is-in .statement__text .w{
  opacity:1;
  transform:none;
}

/* destaque igual ao "padrão" do título de projetos */
.statement__text .w.is-em{
  font-style:normal;
  color:rgba(255,255,255,.34);
}

/* ============================================================
   PROJETOS
   ============================================================ */
.work{
  position:relative;
  z-index:2;
  padding:0 10vw 0;  /* sem padding-top; gap vem do padding-bottom da statement */
}


.work__intro{
  width:var(--content);
  margin:0 auto;
}

.work__tag{
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:0;  /* gap controlado por --espaco-frase via statement */
}

.work__title{
  margin-top:18px;
  font-size:min(4.3vw, 62px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:700;
  max-width:18ch;
}
.work__title em{
  font-style:normal;
  color:rgba(255,255,255,.34);
}

.work__sub{
  margin-top:20px;
  max-width:56ch;
  font-size:clamp(15px, .65vw + 6px, 17px);
  line-height:1.65;
  color:var(--muted);
}

/* ---------- grade de modelos ---------- */
.models-grid{
  width:var(--content);
  margin:min(4.2vw, 60px) auto 0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.model-card{
  position:relative;
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  overflow:hidden;
  opacity:0;
  transition:
    opacity .85s ease var(--d, 0s),
    transform .5s var(--ease),
    border-color .4s ease,
    box-shadow .5s ease;
}
.model-card.is-in{ opacity:1; }

@media (hover:hover){
  .model-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.34);
    box-shadow:0 24px 48px rgba(0,0,0,.55);
  }
}

.model-img{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#111;
}
.model-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 32%;
  transform:scale(1.001);
  transition:transform 1s var(--ease), filter .6s ease;
  filter:grayscale(.12) contrast(1.02);
}
@media (hover:hover){
  .model-card:hover .model-img img{
    transform:scale(1.05);
    filter:grayscale(0) contrast(1.04);
  }
}

.model-badge{
  position:absolute;
  z-index:2;
  top:16px;
  left:16px;
  padding:6px 12px;
  border-radius:100px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.model-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:#0a0a0a;
  transform-origin:top;
  transition:transform 1s var(--ease-io);
  pointer-events:none;
}
.model-card.is-in .model-veil{ transform:translateY(-101%); }

.model-info{
  padding:22px 24px 26px;
}
.model-info h3{
  font-size:20px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.01em;
}
.model-info p{
  margin-top:8px;
  max-width:46ch;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}

/* ============================================================
   SEÇÕES 02 – 05 (recursos, processo, sobre, faq)
   ============================================================ */
.sec{
  position:relative;
  z-index:2;
  padding:min(11vw, 160px) 10vw 0;
}
.sec:nth-child(even){
  background:linear-gradient(180deg, transparent 0%, var(--bg-elevated) 50%, transparent 100%);
}
.sec__inner{
  width:var(--content);
  margin:0 auto;
}

.sec-tag{
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

.sec-title{
  margin-top:18px;
  font-size:min(4.3vw, 62px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:700;
  max-width:20ch;
}
.sec-title em{
  font-style:normal;
  color:rgba(255,255,255,.34);
}

.sec-sub{
  margin-top:20px;
  max-width:56ch;
  font-size:clamp(15px, .65vw + 6px, 17px);
  line-height:1.65;
  color:var(--muted);
}

/* revelação genérica */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

/* ---------- blur entrance (seções abaixo da Hero) ---------- */
.reveal-blur{
  /* estado inicial visível (sem JS) */
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}

/* JS adiciona .reveal-blur.init para esconder antes de revelar */
.reveal-blur.init{
  opacity:0;
  transform:translateY(16px);
  filter:blur(6px);
  will-change:opacity, transform, filter;
  transition:opacity 600ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease);
}

.reveal-blur.init.visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* limpa will-change após animação */
.reveal-blur.init.visible.animation-done{
  will-change:auto;
}

/* prefers-reduced-motion: desliga efeito completamente */
@media (prefers-reduced-motion: reduce){
  .reveal-blur.init{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
}

/* ---------- 02 · recursos ---------- */
.features{
  margin-top:min(4.2vw, 60px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.feature{
  padding:26px 24px 30px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  transition:border-color .4s ease, transform .5s var(--ease);
}
@media (hover:hover){
  .feature:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.3);
  }
}
.feature__num{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  color:rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums;
}
.feature h3{
  margin-top:44px;
  font-size:20px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.01em;
}
.feature p{
  margin-top:10px;
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- 03 · passos ---------- */
.steps{
  margin-top:min(4.2vw, 60px);
  border-bottom:1px solid var(--line);
}
.step{
  display:grid;
  grid-template-columns:min(9vw, 110px) 1fr;
  gap:24px;
  align-items:start;
  padding:30px 0;
  border-top:1px solid var(--line);
}
.step__num{
  font-size:min(2.4vw, 34px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.3);
  font-variant-numeric:tabular-nums;
}
.step h3{
  font-size:22px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.015em;
}
.step p{
  margin-top:10px;
  max-width:60ch;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}

/* ---------- 04 · quem faz ---------- */
.about{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:min(6vw, 80px);
  align-items:start;
}
.about__content > p:not(.sec-tag){
  margin-top:20px;
  max-width:56ch;
  font-size:clamp(15px, .6vw + 7px, 17px);
  line-height:1.7;
  color:var(--muted);
}
.about__quote{
  margin:34px 0 0;
  padding-left:22px;
  border-left:2px solid rgba(255,255,255,.3);
  max-width:46ch;
  font-size:clamp(16px, 1vw + 6px, 20px);
  line-height:1.5;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
}
.about__stats{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:var(--card);
}
.stat__num{
  font-size:min(3.6vw, 48px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
}
.stat__text{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

/* ---------- 05 · faq ---------- */
.faq{
  margin-top:min(4.2vw, 56px);
  border-bottom:1px solid var(--line);
}
.faq-item{
  border-top:1px solid var(--line);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  font-size:clamp(16px, 1.1vw + 8px, 20px);
  font-weight:500;
  letter-spacing:-.01em;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  font-size:18px;
  line-height:1;
  color:#fff;
  transition:transform .45s var(--ease), background .3s ease, color .3s ease;
}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);
  background:#fff;
  color:#050505;
}
.faq-content{ overflow:hidden; }
.faq-content p{
  padding:0 60px 26px 0;
  max-width:74ch;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}
.faq-item[open] .faq-content{
  animation:faqIn .5s var(--ease) both;
}
@keyframes faqIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  position:relative;
  z-index:2;
  padding:min(11vw, 160px) 10vw 0;
  text-align:center;
}
.cta-final__inner{
  width:var(--content);
  margin:0 auto;
  padding:min(8vw, 110px) 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.cta-final__title{
  font-size:min(4.6vw, 66px);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:700;
  max-width:18ch;
  margin:0 auto;
}
.cta-final__title em{
  font-style:normal;
  color:rgba(255,255,255,.34);
}
.cta-final__text{
  margin:20px auto 0;
  max-width:52ch;
  font-size:clamp(15px, .65vw + 6px, 17px);
  line-height:1.65;
  color:var(--muted);
}
.cta-final__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:36px;
  padding:16px 30px;
  border-radius:10px;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  transition:transform .3s var(--ease), background .3s;
}
.cta-final__btn svg{ flex:0 0 18px; height:18px; }
@media (hover:hover){
  .cta-final__btn:hover{ background:#e6e6e6; transform:translateY(-2px); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;
  z-index:2;
  padding:min(10vw, 150px) 10vw 24px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,.02) 0%, transparent 70%),
    var(--bg);
}
.footer__top{
  width:var(--content);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.footer__col{ display:flex; flex-direction:column; gap:8px; }
.footer__contact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  transition:color .3s;
}
.footer__contact svg{ flex:0 0 18px; height:18px; }
.footer__contact:hover{ color:#fff; }

.footer__nav{ display:flex; gap:26px; }
.footer__nav a{ color:var(--muted); transition:color .3s; }
.footer__nav a:hover{ color:#fff; }

.footer__big{
  width:var(--content);
  margin:min(6vw, 90px) auto 0;
  font-size:min(7.08vw, 102px);
  line-height:.8;
  letter-spacing:-.08em;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
  overflow:hidden;
  padding-bottom:.04em;
}
.footer__big span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
.footer__big.is-in span{ transform:none; }

.footer__bottom{
  width:var(--content);
  margin:min(6vw, 80px) auto 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px){
  :root{ --content: calc(100vw - 48px); }
  .hero, .statement, .work, .sec, .cta-final, .footer{ padding-left:24px; padding-right:24px; }
  .hero__title{ font-size:17.5vw; }
  .statement__text{ font-size:6.2vw; }
  .orb{ width:min(24vw, 340px); top:calc(50svh - 45px - min(12vw, 170px)); }
  .footer__big{ font-size:9vw; }
}

@media (max-width: 900px){
  .features{ grid-template-columns:1fr; gap:12px; }
  .feature h3{ margin-top:32px; }
  .about{ grid-template-columns:1fr; gap:44px; }
  .about__stats{ flex-direction:row; }
  .stat{ flex:1; }
}

@media (max-width: 720px){
  :root{
    --espaco-frase: clamp(112px, 33.33vw, 144px);
    --hero-bottom: var(--hero-bottom-mobile);
    /* gap título → botão (mesmo intervalo do gap estrela→título) */
    --hero-cta-gap: clamp(40px, 12vw, 56px);
    /* altura do bloco estrela + título (usada para manter a posição original) */
    --hero-title-h: calc(
      var(--orb-size-mobile)
      + (var(--gap-estrela-titulo) - (var(--orb-size-mobile) - var(--estrela-mobile)) / 2)
      + 32.8vw
      + 0.32 * min(17.75vw, 255.66px)
    );
    /* posição do título = 1/3 do espaço livre antigo (título + meta apenas) */
    --hero-title-offset: max(0px, calc((100svh - var(--hero-bottom-mobile) - var(--hero-title-h) - 34.8px) / 3));
  }
  .header{ top:16px; }
  .pill{ width:min(320px, calc(100vw - 70px)); padding-left:20px; }
  .pill.is-open{
    width:calc(100vw - 32px);
    height:auto;
    flex-wrap:wrap;
    padding:14px 4px 14px 20px;
    align-items:flex-start;
  }
  .menu{ display:none; }
  .pill.is-open .menu{
    display:grid;
    order:3;
    flex-basis:100%;
    grid-template-columns:1fr;
    margin-top:10px;
  }
  .menu__inner{ flex-direction:column; align-items:flex-start; gap:10px; font-size:14px; }
  .dots{ margin-left:auto; }

  /* ============================================================
     HERO MOBILE — reescrita limpa (max-width: 720px)
     Estrutura: Hero 100svh → flex coluna
       1. header (fixo, fora do fluxo)
       2. .hero__title (bloco central: orb + 2 linhas) → posição fixa via --hero-title-offset
       3. .hero__actions (botão → meta → indicador) → ocupa o espaço de baixo
       4. indicador no rodapé da Hero, acima do padding-bottom
     Variáveis: --espaco-frase, --gap-estrela-titulo, --orb-size-mobile,
                --estrela-mobile, --hero-bottom-mobile, --hero-cta-gap,
                --hero-title-offset
     ============================================================ */
  .hero{
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0 10vw var(--hero-bottom-mobile);
    overflow:hidden;
    overflow:clip;
  }
  .hero__title{
    margin:auto 0;
    margin:var(--hero-title-offset) 0 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .hero__actions{
    position:relative;
    z-index:2;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    width:var(--content);
    margin-top:var(--hero-cta-gap);
  }
  .hero__cta{
    display:flex;
    border:1px solid rgba(255,255,255,.3);
  }
  .hero__cta svg{ flex:0 0 16px; height:16px; }
  .hero__meta{
    /* Fica entre botão e indicador, centralizado */
    margin-top:32px;               /* folga mínima botão→meta */
    margin-bottom:24px;            /* garante folga mínima meta→scroll */
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:12px;
    line-height:1.2;
    text-align:center;
  }
  .hero__scroll{
    margin-top:auto;               /* empurra pro rodapé da Hero */
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:11px;
    line-height:1.2;
    letter-spacing:.02em;
    color:rgba(255,255,255,.42);
    text-align:center;
  }
  .hero__scroll svg{
    width:16px;
    height:16px;
    animation:heroScroll 2.6s ease-in-out infinite;
  }
  .orb{
    position:relative;              /* no fluxo do .hero__title */
    width:var(--orb-size-mobile);   /* canvas; estrela visível ~46vw */
    aspect-ratio:1;
    flex-shrink:0;
    /* auto = centro horizontal; bottom desconta a folga interna do canvas
       para o gap visível estrela→título ser exatamente --gap-estrela-titulo */
    margin:0 auto calc(var(--gap-estrela-titulo) - (var(--orb-size-mobile) - var(--estrela-mobile)) / 2);
    z-index:1;
    will-change:transform;          /* para parallax suave */
    /* RESET explícito dos estilos desktop que vazam no mobile */
    top:auto; left:auto; right:auto; bottom:auto;
    transform:none;
  }
  /* Título: duas linhas coladas (line-height .8 + padding .02em = ~7px gap) */
  .hero__title .line{
    font-size:20vw;
    line-height:.8;
    letter-spacing:-.07em;
    padding-bottom:.02em;           /* mantém gap apertado igual ao desktop */
  }

  .statement__text{ font-size:8.2vw; }

  /* seções institucionais no mobile */
  .sec{ padding-top:90px; }
  .sec-title{ margin-top:14px; font-size:9vw; max-width:100%; }
  .sec-sub{ margin-top:16px; font-size:15px; }
  .features{ margin-top:34px; }
  .feature{ padding:20px 18px 22px; }
  .feature h3{ margin-top:28px; font-size:18px; }
  .steps{ margin-top:34px; }
  .step{ grid-template-columns:52px 1fr; gap:16px; padding:22px 0; }
  .step__num{ font-size:20px; }
  .step h3{ font-size:18px; }
  .step p{ font-size:14px; }
  .about{ gap:36px; }
  .about__quote{ margin-top:26px; }
  .about__stats{ flex-direction:column; }
  .stat{ padding:20px; }
  .stat__num{ font-size:36px; }
  .faq{ margin-top:30px; }
  .faq-item summary{ padding:20px 0; font-size:16px; }
  .faq-content p{ padding-right:0; font-size:14px; }

  /* projetos no mobile: uma coluna */
  .work__tag{ font-size:11px; }
  .work__title{ margin-top:clamp(14px, 4vw, 18px); font-size:9vw; max-width:100%; }
  .work__sub{ margin-top:clamp(28px, 7.5vw, 32px); font-size:15px; }
  .models-grid{ grid-template-columns:1fr; gap:18px; margin-top:clamp(44px, 11.5vw, 52px); }
  .model-img{ aspect-ratio:4 / 3; }
  .model-info{ padding:18px 18px 22px; }
  .model-info h3{ font-size:18px; }
  .model-badge{ top:12px; left:12px; font-size:10px; padding:5px 10px; }

  .cta-final{ padding-top:90px; }
  .cta-final__inner{ padding:70px 0; }
  .cta-final__title{ font-size:9vw; max-width:100%; }
  .cta-final__text{ font-size:15px; }
  .cta-final__btn{ margin-top:30px; }

  .footer{ padding-top:90px; }
  .footer__top{ flex-direction:column; gap:28px; }
  .footer__nav{ flex-wrap:wrap; gap:16px; }
  .footer__big{ font-size:12vw; }
  .footer__bottom{ font-size:11px; }
}

/* Telas baixas: o botão fica, o indicador de rolagem sai */
@media (max-width: 720px) and (max-height: 700px){
  .hero__scroll{ display:none; }
}

/* ============================================================
   ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .hero__title .line > span,
  .hero__meta,
  .statement__text .w,
  .footer__big span{ transition-duration:.01ms !important; transform:none !important; opacity:1 !important; }
  .model-veil{ transform:translateY(-101%) !important; transition:none; }
  .model-card{ opacity:1 !important; }
  .model-card, .model-img img{ transition:none !important; }
}