:root{
  --ink:#000000;
  --ink-soft:#141414;
  --paper:#fafafa;
  --paper-dim:#9a9a9a;
  --accent:#ffffff;
  --line:rgba(255,255,255,0.12);
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --sans:'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --title:'Caladea', Georgia, 'Times New Roman', serif;
  --numeric:'Signika', var(--sans);
}

*{ box-sizing:border-box; }
html{ background:var(--ink); }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:20px clamp(20px,4vw,56px);
  background:transparent;
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.wordmark{
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.8), 0 1px 12px rgba(0,0,0,.5);
}
.wordmark span{ color:var(--paper-dim); }

/* StaggeredMenu (React Bits) — ported to plain JS/CSS transitions, no GSAP
   dependency. The toggle button morphs a "+" into an "×" and stutters its
   own label through a couple of Menu/Fechar flips before settling (see
   js/main.js); the panel itself is preceded by two dark layers that wipe in
   staggered just ahead of it, then reveals its big serif nav items one by
   one with a slight rotate-and-rise. Kept fully monochrome — the original's
   colored mesh layers/accent become shades of near-black, and the accent
   used for hover/numbering is plain white. */
.menu-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 16px;
  background:rgba(0,0,0,.3);
  border:1px solid var(--line);
  border-radius:19px;
  color:var(--paper);
  font-family:var(--sans);
  font-weight:600;
  font-size:13px;
  letter-spacing:.03em;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .2s ease;
}
.menu-toggle:hover{ border-color:var(--accent); }
.menu-toggle-textwrap{
  position:relative;
  display:inline-block;
  height:1em;
  overflow:hidden;
  white-space:nowrap;
}
.menu-toggle-textinner{
  display:flex;
  flex-direction:column;
  line-height:1;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.menu-toggle-line{ display:block; height:1em; line-height:1; }
.menu-toggle-icon{
  position:relative;
  width:12px; height:12px;
  flex:0 0 12px;
  display:inline-flex;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.menu-toggle-icon-line{
  position:absolute;
  left:0; top:50%;
  width:100%; height:1.5px;
  background:currentColor;
  border-radius:2px;
  transform:translateY(-50%);
}
.menu-toggle-icon-line-v{ transform:translateY(-50%) rotate(90deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon{ transform:rotate(225deg); }

/* ---------- side menu panel ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
body.nav-open .nav-overlay{
  opacity:1; visibility:visible;
  transition:opacity .3s ease;
}
body.nav-open{ overflow:hidden; }

.sm-prelayers{
  position:fixed; top:0; right:0; z-index:85;
  height:100vh; height:100svh;
  width:clamp(320px,34vw,440px);
  pointer-events:none;
}
.sm-prelayer{
  position:absolute; inset:0;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.sm-prelayer:nth-child(1){ background:linear-gradient(160deg,#050505,#000000); }
.sm-prelayer:nth-child(2){ background:linear-gradient(160deg,#1c1c1c,#0a0a0a); }
body.nav-open .sm-prelayer{ transform:translateX(0); }
body.nav-open .sm-prelayer:nth-child(1){ transition-delay:0s; }
body.nav-open .sm-prelayer:nth-child(2){ transition-delay:.07s; }

.staggered-menu-panel{
  position:fixed; top:0; right:0; z-index:90;
  height:100vh; height:100svh;
  width:clamp(320px,34vw,440px);
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,var(--ink-soft) 0%,#0a0a0a 100%);
  border-left:1px solid var(--line);
  padding:clamp(88px,10vw,110px) clamp(28px,3vw,40px) 32px;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
  overflow-x:hidden;
}
body.nav-open .staggered-menu-panel{ transform:translateX(0); transition-delay:.16s; }

.sm-panel-inner{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.sm-panel-list{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:flex;
  flex-direction:column;
}
.sm-panel-itemwrap{ overflow:hidden; line-height:1; }
.sm-panel-item{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:9px 0;
  text-decoration:none;
  color:var(--paper);
}
.sm-panel-index{
  font-family:var(--numeric);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--paper-dim);
  transition:color .25s ease;
}
.sm-panel-itemlabel{
  display:inline-block;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(2.1rem,7vw,3rem);
  line-height:1.05;
  transform-origin:0% 100%;
  transform:translateY(140%) rotate(8deg);
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
body.nav-open .sm-panel-itemlabel{ transform:translateY(0) rotate(0); }
.sm-panel-itemwrap:nth-child(1) .sm-panel-itemlabel{ transition-delay:.26s; }
.sm-panel-itemwrap:nth-child(2) .sm-panel-itemlabel{ transition-delay:.32s; }
.sm-panel-itemwrap:nth-child(3) .sm-panel-itemlabel{ transition-delay:.38s; }
.sm-panel-itemwrap:nth-child(4) .sm-panel-itemlabel{ transition-delay:.44s; }
.sm-panel-item:hover .sm-panel-index{ color:var(--paper); }
.sm-panel-item:hover .sm-panel-itemlabel{ transform:translateY(0) rotate(0) translateX(10px); }

.sm-panel-cta.specular-button{
  margin-top:auto;
  width:100%;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
body.nav-open .sm-panel-cta.specular-button{
  opacity:1; transform:translateY(0);
  transition-delay:.6s;
}

@media (max-width:720px){
  .staggered-menu-panel, .sm-prelayers{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .menu-toggle-textinner,
  .menu-toggle-icon,
  .sm-prelayer,
  .staggered-menu-panel,
  .sm-panel-itemlabel,
  .sm-panel-cta.specular-button{ transition:none; }
}

/* ---------- hero (Take 01) ---------- */
.hero{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--ink);
}
.hero-waves{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
  opacity:.6;
}
.hero-particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
}

.hero-grain{
  position:absolute; inset:0;
  z-index:5;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  background-size:180px 180px;
  animation:grain-flicker 1s steps(10) infinite;
}
@keyframes grain-flicker{
  0%{ background-position:0 0; }
  10%{ background-position:-8% -3%; }
  20%{ background-position:5% 10%; }
  30%{ background-position:-12% 4%; }
  40%{ background-position:9% -8%; }
  50%{ background-position:-4% 12%; }
  60%{ background-position:14% -2%; }
  70%{ background-position:-9% -11%; }
  80%{ background-position:6% 6%; }
  90%{ background-position:-3% -6%; }
  100%{ background-position:0 0; }
}
@media (prefers-reduced-motion:reduce){
  .hero-grain{ animation:none; }
}

.reg{ position:absolute; width:16px; height:16px; opacity:.4; z-index:2; }
.reg::before, .reg::after{ content:''; position:absolute; background:var(--paper-dim); }
.reg::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.reg::after{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.reg-tl{ top:24px; left:20px; }
.reg-tr{ top:24px; right:20px; }
.reg-bl{ bottom:24px; left:20px; }
.reg-br{ bottom:24px; right:20px; }
@media (max-width:760px){ .reg{ display:none; } }

.eyebrow{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper);
  margin:0 0 22px;
}
.rec-dot{
  width:6px; height:6px; border-radius:50%; background:var(--paper);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.hero-stage{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(56px,9vw,96px) clamp(64px,10vw,140px) clamp(40px,6vw,64px);
}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line);
  background:transparent; color:var(--paper-dim);
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.hero-arrow:hover{ border-color:var(--accent); color:var(--paper); }
.hero-arrow-prev{ left:clamp(8px,2vw,28px); }
.hero-arrow-next{ right:clamp(8px,2vw,28px); }
@media (max-width:640px){ .hero-arrow{ display:none; } }

.eyebrow-center{ justify-content:center; margin:0 0 clamp(28px,5vw,40px); opacity:0; transform:translateY(10px); }

.hero-title{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.2em;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(2.2rem,6.6vw,4.8rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.05;
  margin:0;
  opacity:0; transform:translateY(16px);
}

/* TrueFocus (React Bits) — ported to plain JS/CSS, no React/motion dependency */
.hero-title .focus-word{
  position:relative;
  /* em, não px: a blur fixa em px ficava desproporcionalmente mais forte
     no celular, onde o título renderiza bem menor (clamp() reduz o
     font-size) — a mesma blur(5px) que é uma "leve saída de foco" elegante
     no desktop virava uma mancha ilegível no celular. Em unidade relativa
     à fonte, a intensidade do efeito fica igual em qualquer tamanho. */
  filter:blur(0.065em);
  transition:filter 2s ease;
}
.hero-title .focus-word.active{ filter:blur(0); }
.hero-title .focus-frame{
  position:absolute; top:0; left:0;
  width:0; height:0;
  opacity:0;
  pointer-events:none;
  transition:transform 2s ease, width 2s ease, height 2s ease, opacity .3s ease;
}
.hero-title .focus-frame.visible{ opacity:1; }
.hero-title .corner{
  position:absolute; width:.35em; height:.35em;
  border:3px solid var(--accent);
  filter:drop-shadow(0 0 4px rgba(255,255,255,.5));
  border-radius:3px;
}
.hero-title .top-left{ top:-.3em; left:-.3em; border-right:none; border-bottom:none; }
.hero-title .top-right{ top:-.3em; right:-.3em; border-left:none; border-bottom:none; }
.hero-title .bottom-left{ bottom:-.3em; left:-.3em; border-right:none; border-top:none; }
.hero-title .bottom-right{ bottom:-.3em; right:-.3em; border-left:none; border-top:none; }

.hero-divider{
  width:64px; height:1px; background:var(--line);
  margin:clamp(28px,5vw,40px) 0 22px; opacity:0;
}

.sub-center{
  max-width:40ch; margin:0 0 34px;
  font-family:var(--mono); font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--paper-dim);
  opacity:0; transform:translateY(10px);
}

.hero-stage .specular-button{ opacity:0; transform:translateY(10px); }

.hero-dots{
  display:flex; gap:10px; margin-top:38px;
  opacity:0;
}
.hero-dot{
  width:7px; height:7px; border-radius:50%;
  border:1px solid var(--paper-dim); background:transparent;
  padding:0; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-dot.is-active{ background:var(--accent); border-color:var(--accent); transform:scale(1.2); }

/* SpecularButton (React Bits) — ported to plain JS/CSS + vanilla WebGL2, no React/OGL dependency */
.specular-button{
  --sb-radius:18px;
  --sb-tint:#ffffff;
  --sb-tint-opacity:0;
  --sb-blur:0px;
  --sb-text-color:#f5f5f5;

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  border:1px solid rgba(255,255,255,.18);
  margin:0;
  font-family:inherit;
  font-weight:500;
  letter-spacing:.01em;
  line-height:1;
  color:var(--sb-text-color);
  background:color-mix(in srgb, var(--sb-tint) calc(var(--sb-tint-opacity) * 100%), transparent);
  border-radius:var(--sb-radius);
  backdrop-filter:blur(var(--sb-blur));
  -webkit-backdrop-filter:blur(var(--sb-blur));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 24px rgba(0,0,0,.25);
  cursor:pointer;
  outline:none;
  transition:transform .15s ease, border-color .2s ease;
  text-decoration:none;
}
.specular-button:hover{ border-color:rgba(255,255,255,.32); }
.specular-button:active{ transform:scale(0.97); }
.specular-button:focus-visible{
  outline:2px solid color-mix(in srgb, var(--sb-text-color) 60%, transparent);
  outline-offset:3px;
}
.specular-button--sm{ font-size:.85rem; padding:10px 22px; }
.specular-button--md{ font-size:1rem; padding:14px 30px; }
.specular-button--lg{ font-size:1.15rem; padding:18px 40px; }

.specular-button__fx{
  position:absolute; inset:-20px;
  pointer-events:none;
  z-index:1;
}
.specular-button__fx canvas{ display:block; width:100%; height:100%; }
.specular-button__label{ position:relative; z-index:2; }

.hero-foot{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:10px 24px;
  align-items:center; justify-content:space-between;
  padding:26px clamp(20px,4vw,56px) clamp(30px,5vw,40px);
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-dim);
  opacity:0;
}
.hero-foot .credit,
.hero-foot .timecode,
.hero-foot .next-scene{ opacity:.65; }
.timecode{ font-family:var(--numeric); font-weight:600; font-variant-numeric:tabular-nums; }
.next-scene{ display:flex; align-items:center; gap:8px; }

@media (prefers-reduced-motion:reduce){
  .rec-dot{ animation:none; }
  .eyebrow-center, .hero-title, .hero-divider, .sub-center, .hero-stage .specular-button, .hero-dots, .hero-foot{ opacity:1; transform:none; }
  .hero-title .focus-word{ filter:none; transition:none; }
}

/* ---------- faixa de destaque / marquee (Take 02) ---------- */
.marquee{
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, var(--ink) 0%, var(--ink-soft) 50%, var(--ink) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  display:flex;
}
.marquee-grain{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:screen;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  background-size:160px 160px;
  animation:grain-flicker 1s steps(10) infinite;
}
.marquee-track{
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:clamp(24px,3.5vw,48px);
  padding-right:clamp(24px,3.5vw,48px);
  animation:marquee-scroll 26s linear infinite;
  will-change:transform;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
.marquee-item{
  font-family:var(--mono);
  font-size:clamp(13px,1.7vw,16px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--paper-dim);
  white-space:nowrap;
}
.marquee-sep{
  color:var(--paper);
  font-size:8px;
  line-height:1;
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .marquee-grain{ animation:none; }
}

/* ---------- Sobre (Take 03) ---------- */
.about{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  padding:clamp(72px,12vw,140px) clamp(20px,4vw,56px);
}
.about-stars-canvas{
  position:absolute; inset:0;
  z-index:0;
  display:block;
  width:100%; height:100%;
  pointer-events:none;
}
.about-spark-canvas{
  position:absolute; inset:0;
  z-index:2;
  display:block;
  width:100%; height:100%;
  pointer-events:none;
  user-select:none;
}
.about-inner{
  position:relative;
  z-index:1;
  max-width:920px;
  margin:0 auto;
}
.about-eyebrow{ margin:0 0 20px; }
.about-heading{
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(1.8rem,4.4vw,3.2rem);
  letter-spacing:.01em;
  line-height:1.1;
  margin:0 0 24px;
  max-width:14ch;
}

/* ShinyText (React Bits) — ported to a plain CSS background-clip animation,
   no motion/react dependency. A metallic sheen sweeps across the heading. */
.shiny-text{
  background-image:linear-gradient(120deg, #b5b5b5 0%, #b5b5b5 35%, #ffffff 50%, #b5b5b5 65%, #b5b5b5 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shiny-sweep 2s linear infinite;
}
@keyframes shiny-sweep{
  from{ background-position:150% center; }
  to{ background-position:-50% center; }
}
@media (prefers-reduced-motion:reduce){
  .shiny-text{
    animation:none;
    background-image:none;
    -webkit-text-fill-color:currentColor;
    color:var(--paper);
  }
}
.about-lead{
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.6;
  color:var(--paper-dim);
  max-width:56ch;
  margin:0 0 clamp(48px,7vw,72px);
}

.about-people{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,4vw,40px);
}
@media (max-width:720px){
  .about-people{ grid-template-columns:1fr; }
}
/* BorderGlow (React Bits) — ported to plain HTML/CSS + a small pointer-tracking script */
.person{
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:30;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  --card-bg:var(--ink-soft);
  --border-radius:12px;
  --glow-padding:40px;
  --cone-spread:25;
  --fill-opacity:.5;
  --glow-color:hsl(0deg 0% 95% / 100%);
  --glow-color-60:hsl(0deg 0% 95% / 60%);
  --glow-color-50:hsl(0deg 0% 95% / 50%);
  --glow-color-40:hsl(0deg 0% 95% / 40%);
  --glow-color-30:hsl(0deg 0% 95% / 30%);
  --glow-color-20:hsl(0deg 0% 95% / 20%);
  --glow-color-10:hsl(0deg 0% 95% / 10%);
  --gradient-one:radial-gradient(at 80% 55%, hsla(0,0%,100%,1) 0px, transparent 50%);
  --gradient-two:radial-gradient(at 69% 34%, hsla(0,0%,82%,1) 0px, transparent 50%);
  --gradient-three:radial-gradient(at 8% 6%, hsla(0,0%,100%,1) 0px, transparent 50%);
  --gradient-four:radial-gradient(at 41% 38%, hsla(0,0%,82%,1) 0px, transparent 50%);
  --gradient-five:radial-gradient(at 86% 85%, hsla(0,0%,100%,1) 0px, transparent 50%);
  --gradient-six:radial-gradient(at 82% 18%, hsla(0,0%,82%,1) 0px, transparent 50%);
  --gradient-seven:radial-gradient(at 51% 4%, hsla(0,0%,82%,1) 0px, transparent 50%);
  --gradient-base:linear-gradient(#ffffff 0 100%);

  position:relative;
  isolation:isolate;
  transform:translate3d(0,0,.01px);
  border:1px solid var(--line);
  border-radius:var(--border-radius);
  background:var(--card-bg);
  padding:clamp(28px,4vw,36px);
}
.about-people .person:nth-child(2){ transition-delay:.12s; }

.person::before,
.person::after,
.person > .edge-light{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  transition:opacity .25s ease-out;
  z-index:-1;
}
.person:not(:hover)::before,
.person:not(:hover)::after,
.person:not(:hover) > .edge-light{
  opacity:0;
  transition:opacity .75s ease-in-out;
}
.person::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box, var(--gradient-two) border-box,
    var(--gradient-three) border-box, var(--gradient-four) border-box,
    var(--gradient-five) border-box, var(--gradient-six) border-box,
    var(--gradient-seven) border-box, var(--gradient-base) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(
    from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%)
  );
}
.person::after{
  border:1px solid transparent;
  background:
    var(--gradient-one) padding-box, var(--gradient-two) padding-box,
    var(--gradient-three) padding-box, var(--gradient-four) padding-box,
    var(--gradient-five) padding-box, var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box, var(--gradient-base) padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite:subtract, add, add, add, add, add;
  opacity:calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode:soft-light;
}
.person > .edge-light{
  inset:calc(var(--glow-padding) * -1);
  pointer-events:none;
  z-index:1;
  mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;
}
.person > .edge-light::before{
  content:'';
  position:absolute;
  inset:var(--glow-padding);
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
@media (prefers-reduced-motion:reduce){
  .person::before, .person::after, .person > .edge-light{ transition:none; }
}

.person-content{ position:relative; z-index:1; }
.person-index{
  position:absolute; top:20px; right:24px;
  font-family:var(--numeric); font-weight:600; font-size:12px; letter-spacing:.1em;
  color:var(--paper-dim);
}
.person-avatar{
  width:64px; height:64px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--title); font-size:1.6rem; font-weight:700;
  color:var(--paper);
  margin-bottom:20px;
}
.person-name{
  font-family:var(--sans); font-weight:600; font-size:1.15rem;
  margin:0 0 4px;
}
.person-role{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-dim);
  margin:0 0 14px;
}
.person-bio{
  font-size:.95rem; line-height:1.55; color:var(--paper-dim);
  margin:0;
}

/* ---------- scroll reveal (shared utility for Take 03+) ---------- */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Serviços (Take 04) ---------- */
.services{
  --services-pad:clamp(20px,4vw,56px);
  position:relative;
  overflow:hidden;
  background:var(--ink-soft);
  border-top:1px solid var(--line);
  padding:clamp(72px,12vw,140px) var(--services-pad);
}
/* Particles (React Bits) — ported to vanilla WebGL2, no OGL dependency. A
   drifting field of soft white points with subtle depth (perspective size
   falloff), gentle auto-rotation and a light parallax pull toward the
   cursor — kept faint so it reads as ambient texture behind the copy. */
.services-particles{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
  opacity:.5;
}
.services-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:920px;
  margin:0 auto;
}
.services-eyebrow{ margin:0 0 20px; }
.services-heading{
  display:flex;
  flex-wrap:wrap;
  column-gap:.3em;
  row-gap:.05em;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(2.2rem,5.6vw,4.2rem);
  letter-spacing:.01em;
  line-height:1.08;
  margin:0 0 clamp(24px,3.5vw,36px);
  max-width:min(18ch, 640px);
}

/* BlurText (React Bits) — ported to plain CSS transitions, no motion/react
   dependency. Each word drops in from above, resolving out of a blur; uses
   a transition (not a keyframe animation) so it replays cleanly both ways
   as the heading enters/leaves the viewport, same as the .reveal utility. */
.blur-word{
  display:inline-block;
  filter:blur(10px);
  opacity:0;
  transform:translateY(-50px);
  transition:filter .5s ease, opacity .5s ease, transform .5s ease;
}
.services-heading.is-visible .blur-word{
  filter:blur(0);
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .blur-word{ filter:none; opacity:1; transform:none; transition:none; }
}

/* CardNav (React Bits) — ported to plain JS/CSS, no GSAP dependency. A
   calm toggle bar: click it and the panel eases open (plain JS-measured
   height transition) to reveal the 4 services as cards, each fading/rising
   in with a short stagger. No cursor-tracking, no drag — just a click.
   The toggle itself is a SpecularButton (React Bits, ported to vanilla
   WebGL2 — see js/main.js) so it reads as a bright, "lit" call to action
   instead of a flat bar; the revealed panel keeps its own darker card. */
.card-nav{ position:relative; }
.card-nav-top{ position:relative; }
.card-nav-toggle.specular-button{
  width:100%;
  height:64px;
  padding:0 clamp(18px,3vw,28px);
  font-size:1rem;
}
.card-nav-toggle .specular-button__label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:12px;
}
.card-nav-panel{
  overflow:hidden;
  height:0;
  transition:height .45s ease;
}
.card-nav-toggle-label{
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
}
.hamburger-menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:20px;
  flex-shrink:0;
}
.hamburger-line{
  width:20px; height:1px;
  background:currentColor;
  transition:transform .3s ease;
}
.card-nav-toggle[aria-expanded="true"] .hamburger-line:first-child{ transform:translateY(3.5px) rotate(45deg); }
.card-nav-toggle[aria-expanded="true"] .hamburger-line:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.card-nav-content{
  padding:16px 0 24px;
}

/* Service stepper — a "stories"-style, one-at-a-time reveal: four segmented
   progress bars (one per service) auto-fill in sequence via CSS animation
   (paused on hover/focus, and replaced by a static full bar when
   prefers-reduced-motion is set) and advance the panel below. Clicking a
   segment or the arrows jumps straight to that service. */
.service-stepper{
  display:flex;
  flex-direction:column;
  gap:20px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .35s ease, transform .35s ease;
}
.card-nav.is-open .service-stepper{ opacity:1; transform:translateY(0); transition-delay:.05s; }

.service-tabs{
  display:flex;
  gap:18px;
}
.service-tab{
  all:unset;
  box-sizing:border-box;
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  cursor:pointer;
}
.service-tab-track{
  display:block;
  height:3px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
}
.service-tab-fill{
  display:block;
  height:100%;
  width:0;
  background:var(--paper);
  border-radius:2px;
}
.service-tab.is-active .service-tab-fill{
  animation:serviceFill 6s linear forwards;
}
.service-tab.is-active.is-paused .service-tab-fill{ animation-play-state:paused; }
@keyframes serviceFill{ from{ width:0; } to{ width:100%; } }

.service-tab-label{
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.service-tab-index{
  font-family:var(--numeric);
  font-weight:600;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--paper-dim);
  transition:color .25s ease;
  flex-shrink:0;
}
.service-tab-name{
  font-family:var(--sans);
  font-weight:600;
  font-size:.8rem;
  color:var(--paper-dim);
  transition:color .25s ease;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.service-tab.is-active .service-tab-index,
.service-tab.is-active .service-tab-name,
.service-tab:hover .service-tab-name{ color:var(--paper); }

.service-panel-wrap{
  --edge-proximity:0;
  --cursor-angle:45deg;
  --edge-sensitivity:30;
  position:relative;
  isolation:isolate;
  background:linear-gradient(160deg,var(--ink-soft) 0%,#0a0a0a 100%);
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px 24px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.3);
  overflow:hidden;
}
.service-panel-wrap::before{
  content:'';
  position:absolute;
  top:0; left:20px; right:20px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  opacity:.5;
  z-index:1;
}
/* BorderGlow (React Bits) — ported to plain JS/CSS (see js/main.js for the
   pointermove tracking). Just the glow ring is kept for this monochrome
   palette: a white border-light that brightens and points toward the
   cursor as it nears an edge, masked into a cone by --cursor-angle. */
.service-panel-wrap > .edge-light{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  mix-blend-mode:plus-lighter;
  transition:opacity .25s ease-out;
  mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  -webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,1),
    inset 0 0 2px 0 rgba(255,255,255,.6),
    inset 0 0 6px 0 rgba(255,255,255,.4),
    inset 0 0 14px 0 rgba(255,255,255,.25),
    inset 0 0 28px 2px rgba(255,255,255,.15);
}
.service-panel-wrap:not(:hover) > .edge-light{
  opacity:0;
  transition:opacity .75s ease-in-out;
}
.service-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:opacity .2s ease, transform .2s ease;
}
.service-panel.is-switching{ opacity:0; transform:translateY(6px); }

.service-hook{
  margin:0;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.3;
  color:var(--paper);
}
.service-body{
  margin:0;
  font-family:var(--sans);
  font-size:.9rem;
  line-height:1.65;
  color:var(--paper-dim);
}

.service-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.service-counter{
  font-family:var(--numeric);
  font-weight:600;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--paper-dim);
}
.service-nav{
  display:flex;
  gap:8px;
}
.service-nav-btn{
  all:unset;
  box-sizing:border-box;
  width:32px;
  height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--paper);
  cursor:pointer;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1;
  transition:border-color .25s ease, background .25s ease;
}
.service-nav-btn:hover{ border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.05); }

@media (max-width:720px){
  .service-tabs{ flex-wrap:wrap; row-gap:14px; }
  .service-tab{ flex:1 1 42%; min-width:120px; }
  .service-panel-wrap{ padding:20px 18px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .card-nav-panel{ transition:none; }
  .card-nav-toggle.specular-button{ transition:none; }
  .hamburger-line{ transition:none; }
  .service-stepper{ transition:none; }
  .service-tab-fill{ transition:none; }
  .service-tab.is-active .service-tab-fill{ animation:none; width:100%; }
  .service-panel{ transition:none; }
  .service-nav-btn{ transition:none; }
  .service-panel-wrap > .edge-light{ transition:none; }
}

/* ---------- Como trabalhamos (Take 05) ---------- */
.process{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(72px,12vw,140px) clamp(20px,4vw,56px);
}
/* MoltenMetal (React Bits) — ported to vanilla WebGL2, no OGL dependency.
   Swirling caustic filaments; since all 3 config colors are white, the color
   mixing/lightMode branches from the original shader collapse away and this
   just renders a glowing white plasma alpha-blended over the section's
   black background — kept faint (see .process-molten opacity) so it reads
   as ambient texture rather than competing with the copy. */
.process-molten{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
  opacity:.45;
}
.process-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:920px;
  margin:0 auto;
}
.process-eyebrow{ margin:0 0 20px; }
/* GradientText (React Bits) — pure CSS, no JS/motion lib needed. The
   original drives background-position with a JS rAF loop that pings 0%→
   100%→0% (yoyo:true) at a constant linear rate; a CSS `animation` with
   `alternate` does the exact same thing with no JS. colors[0] repeats as
   colors[1] in this config ("start and end with the same color" per the
   request), so the 4-stop gradient (colors + colors[0] for seamless
   looping, same as the original) is grey→grey→white→grey — a soft white
   highlight sweeping through otherwise-grey text. Shared between the
   Como trabalhamos and Contato headings — the two most recently built
   sections. */
.process-heading,
.contact-heading{
  background-image:linear-gradient(to right,#94a3b8,#94a3b8,#ffffff,#94a3b8);
  background-size:300% 100%;
  background-repeat:repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradient-text-shimmer 3s linear infinite alternate;
}
@keyframes gradient-text-shimmer{
  from{ background-position:0% 50%; }
  to{ background-position:100% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .process-heading,
  .contact-heading{
    animation:none;
    background-image:none;
    -webkit-background-clip:initial;
    background-clip:initial;
    color:var(--paper);
  }
}
.process-heading{
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(2.2rem,5vw,3.6rem);
  letter-spacing:.01em;
  line-height:1.1;
  margin:0 0 20px;
  max-width:17ch;
}
.process-lead{
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.6;
  color:var(--paper-dim);
  max-width:56ch;
  margin:0 0 clamp(48px,7vw,72px);
}

/* AccordionGallery (React Bits) — ported to plain JS/CSS, no GSAP dependency.
   Panels sit side by side at equal width; hovering (or focusing/tapping) one
   grows it via flex-grow while its neighbours tilt away in 3D and the image
   inside crops in from grayscale to full color. Height/parallax math is
   plain JS driven by a ResizeObserver instead of GSAP tweens. One panel per
   stage of "Como trabalhamos" (Briefing/Estratégia/Produção/Entrega). */
.process-gallery{
  --process-media-size:320px;
  display:flex;
  flex-direction:row;
  gap:12px;
  width:100%;
  height:clamp(320px,42vw,460px);
  margin:0 0 clamp(48px,7vw,72px);
  perspective:1400px;
  perspective-origin:50% 50%;
}
.process-panel{
  position:relative;
  flex:1 1 0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  border-radius:14px;
  cursor:pointer;
  display:block;
  outline:none;
  transform-style:preserve-3d;
  transform-origin:center center;
  background:var(--ink-soft);
  border:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8);
  transition:flex-grow .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.process-panel:focus-visible{
  box-shadow:0 0 0 2px var(--accent), 0 10px 30px -18px rgba(0,0,0,.8);
}
.process-panel-frame{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:inherit;
}
.process-panel-media{
  position:absolute;
  top:50%; left:50%;
  width:var(--process-media-size);
  height:100%;
  transform:translate(-50%,-50%);
  filter:grayscale(1);
  transition:filter .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.process-panel.is-active .process-panel-media{ filter:grayscale(0); }
.process-panel-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.process-panel-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78) 100%),
    rgba(0,0,0,.35);
  transition:background .6s ease;
}
.process-panel.is-active .process-panel-overlay{
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78) 100%),
    rgba(0,0,0,0);
}
.process-panel-label{
  position:absolute;
  left:20px; right:20px; bottom:20px;
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:none;
  z-index:2;
}
.process-panel-bar{
  flex:0 0 auto;
  width:3px; height:26px;
  border-radius:3px;
  background:var(--accent);
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .4s ease, transform .4s ease;
  box-shadow:0 0 12px rgba(255,255,255,.5);
}
.process-panel-text{
  color:var(--paper);
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(1rem,1.4vw,1.3rem);
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .4s ease, transform .4s ease;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.process-panel.is-active .process-panel-bar,
.process-panel.is-active .process-panel-text{
  opacity:1;
  transform:translateX(0);
}

@media (max-width:720px){
  /* Same expand/colorize/tilt/reveal animation as desktop, just turned 90°:
     the row becomes a column (tap instead of hover swaps the active item),
     so the "fixed window" that crops each image measures against height
     instead of width, and the tilt swings on rotateX instead of rotateY —
     see the orientation-aware layout()/measure() in js/main.js. */
  .process-gallery{ flex-direction:column; height:clamp(480px,150vw,640px); gap:14px; }
}
@media (prefers-reduced-motion:reduce){
  .process-panel,
  .process-panel-media,
  .process-panel-overlay,
  .process-panel-bar,
  .process-panel-text{ transition:none; }
}

.process-steps{
  list-style:none;
  margin:0;
  padding:0;
}
.process-step{
  --circle:64px;
  --step-gap:clamp(32px,5vw,52px);
  position:relative;
  display:flex;
  gap:28px;
  margin-bottom:var(--step-gap);
}
.process-step:last-child{ margin-bottom:0; }
.process-step:not(:last-child)::before{
  content:'';
  position:absolute;
  left:calc(var(--circle) / 2 - .5px);
  top:var(--circle);
  height:var(--step-gap);
  width:1px;
  background:var(--line);
}
.process-step-index{
  position:relative;
  flex-shrink:0;
  width:var(--circle);
  height:var(--circle);
  border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--ink-soft) 0%,#0a0a0a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--numeric);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--paper);
  z-index:1;
}
.process-step-body{ padding-top:10px; }
.process-step-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.2rem;
  margin:0 0 8px;
  color:var(--paper);
}
.process-step-desc{
  font-size:.95rem;
  line-height:1.6;
  color:var(--paper-dim);
  margin:0;
  max-width:52ch;
}
.process-steps .process-step:nth-child(2){ transition-delay:.08s; }
.process-steps .process-step:nth-child(3){ transition-delay:.16s; }
.process-steps .process-step:nth-child(4){ transition-delay:.24s; }

@media (max-width:560px){
  .process-step{ gap:18px; }
  .process-step-index{ --circle:52px; font-size:.9rem; }
}

/* ---------- Contato (Take 07) ---------- */
.contact{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(72px,12vw,140px) clamp(20px,4vw,56px);
}
/* Aurora (React Bits) — ported to vanilla WebGL2, no OGL dependency. All 3
   colorStops are the same grey, so the shader's gradient ramp collapses to
   a flat color and was dropped, same treatment as .process-molten. The
   vertical falloff is tiled (see js/main.js) so the glow repeats down the
   whole section instead of fading to solid black after the first ~600px.
   Kept near-full opacity (the noise shape itself already fades to
   transparent at the edges) so the flowing bands read clearly behind the
   form. */
.contact-aurora{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  display:block;
  opacity:.35;
}
.contact-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:920px;
  margin:0 auto;
}
.contact-eyebrow{ margin:0 0 20px; }
.contact-heading{
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(2.2rem,5vw,3.6rem);
  letter-spacing:.01em;
  line-height:1.1;
  margin:0 0 20px;
  max-width:16ch;
}
.contact-lead{
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.6;
  color:var(--paper-dim);
  max-width:56ch;
  margin:0 0 clamp(48px,7vw,72px);
}

.contact-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:start;
}
/* GlareHover (React Bits) — pure CSS, no JS needed. A soft diagonal glare
   sweeps across each card on hover via an oversized ::before gradient
   layer that gets translated across it (see the transform note below for
   why this isn't the original's background-position approach). playOnce
   is false in this config, so the glare sweeps back out on mouse-leave
   too (the transition just stays on at all times, instead of the
   original's "snap back, then only transition forward" trick used for
   the play-once variant).
   ⚠️ Deviation from the original: the React Bits demo only ever wraps
   decorative content (a plain heading), so its ::before never needs
   pointer-events set — being position:absolute promotes it into a later
   paint/hit-test layer than the card's own in-flow children regardless of
   DOM order, so without pointer-events:none here it would sit on top of
   and block clicks/typing on the real form fields and the WhatsApp link
   these cards actually contain.
   ⚠️ Second deviation: animates `transform` instead of the original's
   `background-position`. Reason found in testing: in my automated test
   browser (headless Chromium, software-rendered via SwiftShader — no real
   GPU), with the Aurora canvas (see .contact-aurora above) animating via
   requestAnimationFrame nearby, the background-position version silently
   never got painted — computed styles showed it transitioning correctly
   frame by frame, but nothing reached the screen, and it rendered fine
   the instant Aurora stopped or with no WebGL canvas nearby. `transform`
   is handled by the compositor rather than requiring a main-thread
   repaint, so it's the more robust choice regardless of whether that was
   a real GPU/compositor bug or specific to the software renderer in CI —
   worth a quick check on a real device if the glare ever looks like it's
   not showing up. The pseudo-element itself is now the oversized (300%)
   gradient layer, translated between two corners instead of having its
   background panned. */
.contact-form,
.contact-aside{
  position:relative;
  overflow:hidden;
}
.contact-form::before,
.contact-aside::before{
  content:'';
  position:absolute;
  left:0; top:0;
  width:300%; height:300%;
  pointer-events:none;
  background:linear-gradient(-30deg,
    hsla(0,0%,0%,0) 60%,
    rgba(255,255,255,.3) 70%,
    hsla(0,0%,0%,0),
    hsla(0,0%,0%,0) 100%);
  transform:translate(-100%, -100%);
  transition:transform 800ms ease;
}
.contact-form:hover::before,
.contact-aside:hover::before{
  transform:translate(33.333%, 33.333%);
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:clamp(24px,3vw,32px);
  background:linear-gradient(160deg,var(--ink-soft) 0%,#0a0a0a 100%);
  border:1px solid var(--line);
  border-radius:16px;
}
.contact-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.contact-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.contact-field label{
  font-family:var(--sans);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  color:var(--paper-dim);
}
.contact-field input,
.contact-field textarea{
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--paper);
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  outline:none;
  transition:border-color .2s ease, background .2s ease;
  resize:vertical;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{ color:var(--paper-dim); opacity:.7; }
.contact-field input:focus,
.contact-field textarea:focus{
  border-color:var(--accent);
  background:rgba(0,0,0,.5);
}
.contact-field input:user-invalid,
.contact-field textarea:user-invalid{ border-color:rgba(255,120,120,.6); }

.contact-form-foot{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:4px;
}
.contact-submit.specular-button{ flex-shrink:0; }
.contact-form-note{
  margin:0;
  font-family:var(--mono);
  font-size:.8rem;
  letter-spacing:.03em;
  color:var(--paper-dim);
}
.contact-form-disclaimer{
  margin:0;
  font-size:.8rem;
  color:var(--paper-dim);
  opacity:.75;
}
.contact-form-fallback{
  margin:0;
  font-size:.8rem;
  color:var(--paper-dim);
}
.contact-form-fallback a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.contact-form-fallback a:hover{ color:var(--accent); }

.contact-aside{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:clamp(24px,3vw,32px);
  background:linear-gradient(160deg,var(--ink-soft) 0%,#0a0a0a 100%);
  border:1px solid var(--line);
  border-radius:16px;
}
.contact-whatsapp{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:var(--paper);
  padding:14px;
  margin:-14px;
  border-radius:12px;
  transition:background .2s ease;
}
.contact-whatsapp:hover{ background:rgba(255,255,255,.05); }
.contact-whatsapp-icon{
  flex-shrink:0;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.contact-whatsapp-icon svg{ width:20px; height:20px; }
.contact-whatsapp-text{ display:flex; flex-direction:column; gap:2px; }
.contact-whatsapp-label{ font-family:var(--sans); font-weight:600; font-size:1rem; }
.contact-whatsapp-sub{ font-family:var(--sans); font-size:.82rem; color:var(--paper-dim); }
.contact-email{
  margin:0;
  font-size:.85rem;
  line-height:1.5;
  color:var(--paper-dim);
  border-top:1px solid var(--line);
  padding-top:20px;
}
.contact-email a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.contact-email a:hover{ color:var(--accent); }

@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .contact-row{ grid-template-columns:1fr; }
}

/* ---------- Footer (Take 08) ---------- */
.site-footer{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(56px,8vw,80px) clamp(20px,4vw,56px) 0;
}
/* Mesma técnica de grão do hero/marquee — textura ambiente muito sutil,
   reforça a linguagem de "set de filmagem" também no encerramento. */
.footer-grain{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
  background-size:180px 180px;
}
.footer-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(32px,5vw,48px);
  padding-bottom:clamp(40px,6vw,56px);
}
.footer-brand{ max-width:44ch; }
.footer-wordmark{ font-size:15px; margin:0 0 14px; }
.footer-tagline{
  font-size:.92rem;
  line-height:1.6;
  color:var(--paper-dim);
  margin:0;
}
.footer-col-title{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin:0 0 16px;
}
.footer-nav ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-nav a,
.footer-contact a{
  display:inline-block;
  font-family:var(--sans);
  font-size:.92rem;
  color:var(--paper);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-nav a:hover,
.footer-contact a:hover{ color:var(--accent); }
.footer-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-contact a + a{ margin-top:12px; }

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  padding:22px 0;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.footer-legal{ margin:0; }
.footer-top-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--paper-dim);
  text-decoration:none;
  transition:color .2s ease;
}
.footer-top-link:hover{ color:var(--paper); }
.footer-top-link span{ transition:transform .2s ease; }
.footer-top-link:hover span{ transform:translateY(-2px); }

@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:480px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}