:root{
  --black:#030508;
  --void:#060B14;
  --panel:#0A1122;
  --panel-hover:#101B3A;
  --border:rgba(56,189,248,0.10);
  --border-active:rgba(56,189,248,0.28);
  --primary:#2563EB;
  --phosphor:#38BDF8;
  --wa:#25D366;
  --electric:#38BDF8;
  --violet:#B98CFF;
  --amber:#F2B84B;
  --text-1:#F0F4F8;
  --text-2:#8FA0B6;
  --text-3:#5A6B82;
  --font-head:'Plus Jakarta Sans', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--text-1);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.page{ position:relative; }

.topbar{
  position:absolute;
  top:24px; left:24px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar img{ border-radius:7px; }
.topbar span{
  font-family:var(--font-head);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

img{ max-width:100%; display:block; }

/* ---------- HERO (full-bleed) ---------- */

.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:90px 24px 56px;
}

.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:var(--black);
}

.hero__bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 17%;
  animation:kenBurns 30s ease-in-out infinite;
}

.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      var(--black) 0%,
      rgba(3,5,8,.96) 38%,
      rgba(3,5,8,.68) 54%,
      rgba(3,5,8,.2) 70%,
      rgba(3,5,8,.35) 100%),
    linear-gradient(0deg, var(--black) 0%, transparent 22%, transparent 78%, rgba(3,5,8,.5) 100%);
}

@keyframes kenBurns{
  0%{ transform:scale(1) translate(0,0); }
  50%{ transform:scale(1.045) translate(-.6%,-.4%); }
  100%{ transform:scale(1) translate(0,0); }
}

.hero__inner{
  position:relative; z-index:1;
  max-width:1160px;
  margin:0 auto;
  width:100%;
}

.hero__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--phosphor);
  background:rgba(56,189,248,0.08);
  border:1px solid var(--border-active);
  padding:7px 14px 7px 11px;
  border-radius:999px;
}

.hero__tag .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--phosphor);
  animation:pulseDot 2.4s ease-in-out infinite;
}

@keyframes pulseDot{
  0%,100%{ opacity:1; box-shadow:0 0 10px var(--phosphor), 0 0 0 0 rgba(56,189,248,.4); }
  50%{ opacity:.6; box-shadow:0 0 14px var(--phosphor), 0 0 0 7px rgba(56,189,248,0); }
}

.hero__inner h1{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(34px, 6vw, 60px);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin-top:16px;
  max-width:820px;
  color:#fff;
  text-shadow:0 4px 28px rgba(0,0,0,.55);
}

.hero__inner h1 .accent{ color:var(--phosphor); }

.word-reveal > span{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em) rotate(2deg);
  filter:blur(8px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s cubic-bezier(.22,.61,.36,1);
}
.word-reveal.is-visible > span{ opacity:1; transform:none; filter:none; }
.word-reveal.is-visible > span:nth-child(1){transition-delay:.05s}
.word-reveal.is-visible > span:nth-child(2){transition-delay:.12s}
.word-reveal.is-visible > span:nth-child(3){transition-delay:.19s}
.word-reveal.is-visible > span:nth-child(4){transition-delay:.26s}
.word-reveal.is-visible > span:nth-child(5){transition-delay:.33s}
.word-reveal.is-visible > span:nth-child(6){transition-delay:.40s}

.hero__bio{
  margin-top:14px;
  max-width:420px;
  font-size:16.5px;
  line-height:1.55;
  color:var(--text-2);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}

/* ---------- WHATSAPP FLOATING BUTTON ---------- */

.wa-float{
  position:fixed;
  right:20px; bottom:20px;
  z-index:40;
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wa);
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.55);
  transition:transform .3s ease, box-shadow .3s ease;
}
.wa-float svg{ width:26px; height:26px; }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 30px -6px rgba(37,211,102,.7); }

/* ---------- FOOTER SOCIAL ---------- */

.footer__social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:9px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.03);
  color:var(--text-1);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  transition:all .3s ease;
}
.footer__social svg{ width:15px; height:15px; }
.footer__social:hover{
  border-color:var(--border-active);
  background:rgba(56,189,248,0.1);
  transform:translateY(-2px);
}

/* ---------- LINKS ---------- */

.links{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:64px 24px 40px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.sec__label{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:4px;
}
.sec__label::before{
  content:"";
  width:32px; height:1px;
  background:var(--phosphor);
  transform-origin:left center;
}

.card{
  position:relative;
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:220px;
  border-radius:18px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text-1);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .45s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:var(--card-accent, var(--border-active));
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6), 0 0 0 1px var(--card-accent-dim, rgba(37,210,114,.15));
}

.card__media{
  position:relative;
  overflow:hidden;
  background:var(--void);
}
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__media img{ transform:scale(1.06); }

/* chat: imagem sem padding preto (recortada no conteudo real), cover centralizado */
.card--chat .card__media img{ object-position:50% 0%; }
@media (min-width:769px){
  .card--chat .card__media{ aspect-ratio:280/218; }
}

.card__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 55%, var(--panel) 100%);
}

.card__content{
  position:relative;
  padding:26px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}

.card__eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--card-accent, var(--phosphor));
}

.card__content h3{
  font-family:var(--font-head);
  font-weight:700;
  font-size:21px;
  color:#fff;
  margin-top:2px;
}

.card__content p{
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
  color:var(--text-2);
  max-width:38ch;
}

.card__cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:16px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  font-family:var(--font-head);
  color:var(--black);
  background:var(--card-accent, var(--phosphor));
}
.card__cta svg{ width:14px; height:14px; transition:transform .3s ease; }
.card:hover .card__cta svg{ transform:translateX(3px); }

.card__cta::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.card:hover .card__cta::before{ transform:translateX(120%); }

.card__badge{
  position:absolute;
  top:16px; right:16px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--electric);
  background:rgba(3,5,8,.75);
  border:1px solid rgba(56,189,248,.35);
  padding:5px 11px;
  border-radius:999px;
  backdrop-filter:blur(4px);
}

/* card color variants */
.card--whatsapp{ --card-accent:var(--wa); --card-accent-dim:rgba(37,211,102,.18); }
.card--chat{ --card-accent:var(--primary); --card-accent-dim:rgba(37,99,235,.22); }
.card--fabrica{ --card-accent:var(--violet); --card-accent-dim:rgba(185,140,255,.18); }
.card--ia{ --card-accent:var(--electric); --card-accent-dim:rgba(56,189,248,.18); }

/* ---------- FOOTER ---------- */

.footer{
  padding:48px 24px 64px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.footer p{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--text-3);
}

/* ---------- REVEAL SYSTEM (default-visible, fx-in opt-in) ---------- */

.reveal.fx-in{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.fx-in.is-visible{ opacity:1; transform:translateY(0); }
.reveal.fx-in.delay-1{ transition-delay:.08s; }
.reveal.fx-in.delay-2{ transition-delay:.16s; }
.reveal.fx-in.delay-3{ transition-delay:.24s; }
.reveal.fx-in.delay-4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal, .word-reveal > span{ opacity:1; transform:none; filter:none; }
}

/* Mobile: force everything visible regardless of JS state */
@media (max-width:900px){
  .reveal, .reveal.fx-in{ opacity:1 !important; transform:none !important; filter:none !important; }
  .word-reveal > span{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__bg img{ animation:none; }
}

:focus-visible{ outline:2px solid var(--phosphor); outline-offset:3px; border-radius:4px; }

/* ---------- RESPONSIVE ---------- */

@media (max-width:768px){
  /* Mobile: foto vira bloco proprio no topo, texto compacto abaixo (nada sobrepoe o rosto) */
  .hero{ min-height:auto; padding:0 0 28px; display:block; }
  .hero__bg{ position:relative; height:300px; }
  .hero__bg img{ object-position:50% 12%; }
  .hero__bg::after{
    background:linear-gradient(180deg, transparent 0%, transparent 55%, var(--black) 100%);
  }
  .hero__inner{ padding:10px 20px 0; margin-top:-90px; position:relative; z-index:2; }
  .hero__inner h1{ font-size:clamp(28px, 9vw, 38px); margin-top:10px; }
  .hero__bio{ max-width:100%; margin-top:8px; font-size:15px; }

  .wa-float{ right:16px; bottom:16px; width:48px; height:48px; }

  .links{ padding:28px 18px 24px; gap:16px; }

  .card{
    grid-template-columns:1fr;
    grid-template-rows:180px auto;
  }
  .card__media::after{
    background:linear-gradient(0deg, var(--panel) 5%, transparent 55%);
  }
  .card__content{ padding:20px 20px 24px; }
  .card__content p{ max-width:none; }
}

@media (max-width:440px){
  .hero__inner h1{ font-size:clamp(28px, 9.5vw, 36px); }
}