/* ============================================================
   FSA Cloud Tech — style.css
   Fontes self-hosted (assets/fonts), tokens da marca, hero de
   tela cheia com canvas, seção "O que estamos preparando",
   contato e rodapé. Sem framework.
   ============================================================ */

/* ---------- Fontes (self-hosted, subset latin) ---------- */
@font-face{
  font-family:'Audiowide'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/audiowide-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/sora-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/sora-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Sora'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/sora-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}
/* Fallbacks com métricas ajustadas (evita salto de layout enquanto a fonte carrega).
   Valores calculados a partir das métricas reais dos .woff2 (hhea/hmtx). */
@font-face{
  font-family:'Sora Fallback';
  src:local('Arial'), local('Liberation Sans'), local('Helvetica');
  size-adjust:115.6%; ascent-override:84%; descent-override:25%; line-gap-override:0%;
}
@font-face{
  font-family:'JetBrains Mono Fallback';
  src:local('Courier New'), local('Liberation Mono'), local('Menlo');
  size-adjust:100%; ascent-override:102%; descent-override:30%; line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  --c-void:#06060d;
  --c-abyss:#0b0a17;
  --c-deep:#100d1f;
  --c-signal:#f2b134;
  --c-signal-soft:#f8cf76;
  --c-glow:#fff3d6;
  --c-text:#f4f1e8;
  --c-muted:#b9b3a6;
  --c-line:rgba(248,207,118,.18);
  --font-brand:'Audiowide', 'Sora', 'Sora Fallback', sans-serif;
  --font-display:'Sora', 'Sora Fallback', sans-serif;
  --font-data:'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:48px;
  --header-height:108px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  background:var(--c-void);
  color:var(--c-text);
  font-family:var(--font-display);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{ color:inherit; }
img,svg{ max-width:100%; }
[hidden]{ display:none !important; }
.container{ width:min(1120px, 100% - 2 * var(--gutter)); margin-inline:auto; }

.skip-link{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--c-signal); color:var(--c-void);
  font-family:var(--font-data); font-size:12px; letter-spacing:.12em;
  padding:10px 14px; border-radius:3px; text-decoration:none;
}
.skip-link:focus{ top:16px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; width:100%;
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
  isolation:isolate;
}
.hero canvas{ position:absolute; inset:0; width:100%; height:100%; }

.ui-layer{ position:absolute; inset:0; pointer-events:none; z-index:10; }
.ui-layer a, .ui-layer button{ pointer-events:auto; }

/* NAV */
.nav{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:34px var(--gutter);
}
.brand{
  font-family:var(--font-brand);
  font-size:15px;
  letter-spacing:.3em;
  color:var(--c-text);
  text-decoration:none;
  white-space:nowrap;
  /* Área de toque de 44px sem mudar nenhuma medida: o padding cria o alvo e a
     margem negativa equivalente devolve o espaço (ver regra de área de toque no
     CLAUDE.md raiz). Conferir a altura do header antes/depois ao mexer aqui. */
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-block:-13px;
}
.brand b, .loader-brand b, .footer-brand b{
  font-weight:400;
  color:var(--c-signal);
  text-shadow:0 0 18px rgba(242,177,52,.9);
}
.nav-cta{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--c-glow);
  background:rgba(242,177,52,.06);
  border:1px solid rgba(248,207,118,.45);
  border-radius:3px;
  padding:12px 20px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-cta:hover, .nav-cta:focus-visible{
  border-color:var(--c-signal-soft);
  background:rgba(242,177,52,.14);
  box-shadow:0 0 26px rgba(242,177,52,.35);
  outline:none;
}

/* TÍTULO */
.title-wrap{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center;
  padding:calc(var(--header-height) + 3vh) 6vw 0;
}
.eyebrow{
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.4em;
  color:rgba(248,207,118,.72);
  text-transform:uppercase;
  margin-bottom:22px;
  opacity:0;
  animation:fade-up .9s var(--ease) .3s forwards;
}
.title{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(28px, 4.2vw, 56px);
  line-height:1.18;
  max-width:19ch;
  color:var(--c-text);
  text-shadow:0 0 40px rgba(2,2,10,.9);
  /* A transição de saída/entrada usa só opacity, filter e transform: nenhuma
     dessas propriedades afeta o layout. Não animar letter-spacing (nem
     font-size, padding, margin) aqui — com o espaçamento maior a frase mais
     longa ganhava uma terceira linha e empurrava o subtítulo para cima do
     planeta durante a troca (bug de 03/09). */
  transition:opacity .6s var(--ease), filter .6s var(--ease), transform .9s var(--ease);
}
.title .accent{ color:var(--c-signal); text-shadow:0 0 30px rgba(242,177,52,.75); }
.title.is-leaving{ opacity:0; filter:blur(10px); transform:translateY(-6px) scale(1.015); }
.title.is-entering{ opacity:0; filter:blur(10px); transform:translateY(8px) scale(.99); }

.lead{
  margin-top:16px;
  max-width:64ch;
  font-size:clamp(14px, 1.15vw, 17px);
  font-weight:300;
  line-height:1.6;
  color:var(--c-muted);
  text-shadow:0 0 24px rgba(2,2,10,.9);
  opacity:0;
  animation:fade-up .9s var(--ease) .5s forwards;
}
.title-rule{
  margin-top:28px; width:200px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(248,207,118,0) 20%,rgba(255,243,214,.9) 50%,rgba(248,207,118,0) 80%,transparent);
  position:relative;
  opacity:0;
  animation:fade-up .9s var(--ease) .7s forwards;
}
.title-rule:after{
  content:""; position:absolute; left:50%; top:-1px; width:32px; height:3px;
  transform:translateX(-50%);
  background:var(--c-glow); box-shadow:0 0 16px rgba(255,243,214,.9);
}
@keyframes fade-up{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

/* HUD (dados laterais). Ancorados nas bordas, nunca saem da tela. */
.hud{
  position:absolute; top:34%;
  font-family:var(--font-data);
  white-space:nowrap;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:rgba(6,6,13,.72);
  border:1px solid rgba(242,177,52,.35);
  border-radius:2px;
  padding:10px 16px;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.hud.is-on{ opacity:1; }
.hud--left{ left:var(--gutter); border-left:2px solid var(--c-signal); }
.hud--right{ right:var(--gutter); top:44%; border-right:2px solid var(--c-signal); text-align:right; }
.hud:before{
  content:""; position:absolute; top:50%; width:26px; height:1px;
}
.hud--left:before{ right:-27px; background:linear-gradient(90deg,var(--c-signal),rgba(248,207,118,.1)); }
.hud--right:before{ left:-27px; background:linear-gradient(90deg,rgba(248,207,118,.1),var(--c-signal)); }
.hud .line1{
  font-size:13px; letter-spacing:.3em; color:#fff;
  text-shadow:0 0 10px rgba(242,177,52,.9),0 1px 2px rgba(0,0,0,.9);
  min-height:16px;
}
.hud-caret{
  display:inline-block; width:7px; height:12px; margin-left:5px; vertical-align:-1px;
  background:var(--c-signal); box-shadow:0 0 10px rgba(242,177,52,.9);
  animation:cursor-blink .7s steps(1) infinite;
}
.hud .line2{
  margin-top:5px; font-size:9px; letter-spacing:.34em; color:var(--c-signal-soft);
  opacity:0; transition:opacity .4s var(--ease);
}
.hud .line2.is-on{ opacity:1; }
@keyframes cursor-blink{ 50%{ opacity:0; } }

/* CANTOS + STATUS */
.corner{
  position:absolute; font-family:var(--font-data); font-size:10px;
  letter-spacing:.3em; color:rgba(248,207,118,.7); line-height:2;
}
.corner.bl{ left:var(--gutter); bottom:40px; display:flex; align-items:center; white-space:nowrap; }
.corner.br{
  right:var(--gutter); bottom:32px;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.corner .strong{ color:rgba(255,243,214,.85); }

.reticle{
  display:inline-block; width:26px; height:26px; margin-right:14px; vertical-align:middle;
  border:1px solid rgba(248,207,118,.4); border-radius:50%; position:relative;
}
.reticle:after{
  content:""; position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%;
  background:var(--c-glow); box-shadow:0 0 10px rgba(255,243,214,.9);
  animation:reticle-pulse 3.2s ease-in-out infinite;
}
@keyframes reticle-pulse{ 0%,100%{ opacity:.55; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }

.corner .sep{
  display:inline-block; font-size:7px; color:var(--c-signal); margin:0 14px; vertical-align:2px;
  animation:reticle-pulse 2.4s ease-in-out infinite;
}

/* SOM + "saiba mais" (área de toque de 44px sem mudar o visual) */
.sound-toggle, .scroll-hint{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px; padding:0 4px; margin-right:-4px;
  font-family:var(--font-data); font-size:10px; letter-spacing:.3em; line-height:1;
  color:rgba(248,207,118,.7); background:none; border:none; cursor:pointer;
  text-decoration:none;
  transition:color .3s var(--ease), text-shadow .3s;
}
.sound-toggle:hover, .sound-toggle:focus-visible,
.scroll-hint:hover, .scroll-hint:focus-visible{ color:var(--c-glow); outline:none; }
.sound-toggle:focus-visible, .scroll-hint:focus-visible, .btn:focus-visible{
  outline:2px solid var(--c-signal-soft); outline-offset:3px;
}
.sound-toggle.is-on{ color:rgba(255,243,214,.9); text-shadow:0 0 12px rgba(242,177,52,.6); }
.bars{ display:flex; align-items:flex-end; gap:3px; height:12px; }
.bars i{
  display:block; width:2px; height:4px; background:currentColor; border-radius:1px;
  transform-origin:bottom;
}
.sound-toggle.is-on .bars i{ animation:bar-bounce 1.1s ease-in-out infinite; }
.bars i:nth-child(2){ animation-delay:.18s; }
.bars i:nth-child(3){ animation-delay:.36s; }
@keyframes bar-bounce{ 0%,100%{ height:4px; } 50%{ height:12px; } }

.scroll-hint .chev{
  display:block; width:8px; height:8px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  animation:chev-nudge 2.2s ease-in-out infinite;
}
@keyframes chev-nudge{ 0%,100%{ transform:rotate(45deg) translateY(-2px); opacity:.6; } 50%{ transform:rotate(45deg) translateY(2px); opacity:1; } }

/* LOADER (curto; pulado em visitas repetidas na mesma sessão) */
.loader{
  position:fixed; inset:0; z-index:100; background:var(--c-void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader-brand{
  font-family:var(--font-brand); font-size:18px; letter-spacing:.45em; color:var(--c-text);
  margin-bottom:60px; animation:loader-breathe 4s ease-in-out infinite;
}
@keyframes loader-breathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }
.loader-log{
  font-family:var(--font-data); font-size:11px; letter-spacing:.28em; color:rgba(248,207,118,.85);
  height:16px; margin-bottom:40px;
}
.loader-log .cursor{
  display:inline-block; width:6px; height:11px; margin-left:7px; background:var(--c-signal-soft);
  vertical-align:-1px; animation:cursor-blink .9s steps(1) infinite;
}
.loader-track{ width:min(320px,60vw); height:1px; background:rgba(248,207,118,.16); position:relative; }
.loader-bar{
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg,rgba(242,177,52,.2),var(--c-glow));
  box-shadow:0 0 14px rgba(248,207,118,.8); width:0%; transition:width .3s var(--ease);
}
.loader-pct{ margin-top:20px; font-family:var(--font-data); font-size:10px; letter-spacing:.36em; color:rgba(248,207,118,.7); }

/* ============================================================
   SEÇÕES ABAIXO DO HERO
   ============================================================ */
.kicker{
  font-family:var(--font-data); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(248,207,118,.8); margin-bottom:18px;
}
.kicker:before{
  content:""; display:inline-block; width:22px; height:1px; margin-right:12px; vertical-align:middle;
  background:var(--c-signal);
}
h2{
  font-weight:300; font-size:clamp(24px, 3vw, 38px); line-height:1.2; max-width:24ch;
  letter-spacing:-.01em;
}
h3{ font-weight:400; font-size:19px; line-height:1.3; margin-bottom:10px; }

.about{
  position:relative;
  background:linear-gradient(180deg, var(--c-void) 0%, var(--c-abyss) 30%, var(--c-abyss) 100%);
  padding:clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px);
}
.about:before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-line) 30%, rgba(248,207,118,.45) 50%, var(--c-line) 70%, transparent);
}
.about-intro{
  max-width:58ch; margin-top:18px; color:var(--c-muted); font-weight:300; font-size:17px;
}
.services{
  list-style:none; margin-top:56px;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--c-line);
  border:1px solid var(--c-line);
}
.service{
  position:relative; background:var(--c-abyss);
  padding:32px 28px 30px;
  transition:background .4s var(--ease);
}
.service:hover{ background:var(--c-deep); }
.service-index{
  display:block; font-family:var(--font-data); font-size:11px; letter-spacing:.3em;
  color:var(--c-signal); margin-bottom:26px;
}
.service p{ color:var(--c-muted); font-weight:300; font-size:15px; }

.contact{
  background:var(--c-abyss);
  padding:0 0 clamp(72px, 9vw, 120px);
}
.contact-inner{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:center;
  padding:clamp(36px, 5vw, 56px) clamp(28px, 4vw, 56px);
  border:1px solid rgba(248,207,118,.28);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(242,177,52,.10), transparent 60%),
    var(--c-void);
}
.contact p{ color:var(--c-muted); font-weight:300; margin-top:14px; max-width:44ch; }
.contact-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:flex-end; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  font-family:var(--font-data); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; border-radius:3px; text-align:center;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn .ico{ width:18px; height:18px; flex:none; }
.btn--primary{
  background:var(--c-signal); color:var(--c-void); font-weight:500;
  box-shadow:0 0 0 rgba(242,177,52,0);
}
.btn--primary:hover, .btn--primary:focus-visible{
  background:var(--c-signal-soft); box-shadow:0 0 34px rgba(242,177,52,.45); transform:translateY(-1px);
}
.btn--ghost{
  color:var(--c-glow); border:1px solid rgba(248,207,118,.45); background:rgba(242,177,52,.05);
}
.btn--ghost:hover, .btn--ghost:focus-visible{ border-color:var(--c-signal-soft); background:rgba(242,177,52,.14); }

.footer{
  background:var(--c-void);
  border-top:1px solid var(--c-line);
  padding:28px 0;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-brand{ font-family:var(--font-brand); font-size:12px; letter-spacing:.3em; }
.footer-copy{ font-family:var(--font-data); font-size:11px; letter-spacing:.06em; color:var(--c-muted); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1100px){
  .hud{ display:none; }
}
@media (max-width:900px){
  :root{ --gutter:24px; --header-height:84px; }
  .nav{ padding:24px var(--gutter); }
  .corner.bl{ bottom:28px; }
  .title-rule{ margin-top:22px; width:150px; }
  .title-wrap{ padding-top:calc(var(--header-height) + 2vh); }
  .services{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .contact-inner{ grid-template-columns:1fr; gap:28px; }
  .contact-actions{ justify-content:flex-start; }
}
@media (max-width:640px){
  :root{ --gutter:18px; --header-height:70px; }
  .nav{ padding:16px var(--gutter); gap:12px; }
  .brand{ font-size:11px; letter-spacing:.18em; margin-block:-15px; }
  .nav-cta{ font-size:9px; letter-spacing:.14em; padding:9px 12px; margin-block:-5px; }
  .title{ font-size:clamp(26px, 7.6vw, 34px); max-width:16ch; }
  .lead{ font-size:14px; max-width:38ch; margin-top:14px; }
  .eyebrow{ font-size:10px; letter-spacing:.3em; margin-bottom:16px; }
  /* no celular sobra pouca margem embaixo: fica só "lançamento em breve" e o "saiba mais" */
  .corner-desk{ display:none; }
  .corner.bl{ bottom:24px; font-size:9px; letter-spacing:.22em; }
  .reticle{ width:20px; height:20px; margin-right:10px; }
  .corner.br{ bottom:14px; gap:0; }
  /* Regra "Cards lado a lado no mobile" (seção 18 do CLAUDE.md raiz): 2 colunas
     a partir de 360px, com fonte e padding menores; 1 coluna só abaixo disso.
     Sempre minmax(0,1fr), nunca 1fr puro, para não estourar a largura. */
  .services{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; margin-top:40px; }
  .service{ padding:20px 16px; }
  .service-index{ margin-bottom:16px; }
  .service h3{ font-size:16px; margin-bottom:8px; }
  .service p{ font-size:13px; }
  /* São 3 cards: o terceiro ocupa a linha inteira em vez de ficar órfão. */
  .service:last-child{ grid-column:1 / -1; }
  .btn{ width:100%; }
  .footer-inner{ flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (max-width:359px){
  /* Telas muito estreitas: 2 colunas apertariam demais o parágrafo do card. */
  .services{ grid-template-columns:minmax(0,1fr); }
  .service:last-child{ grid-column:auto; }
}

@media (max-width:360px){
  .corner.bl{ font-size:8px; letter-spacing:.16em; }
  .sound-toggle, .scroll-hint{ font-size:9px; letter-spacing:.2em; }
  .nav-cta{ font-size:8px; letter-spacing:.1em; padding:9px 10px; margin-block:-6px; }
  .brand{ font-size:10px; letter-spacing:.14em; margin-block:-16px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reticle:after, .corner .sep, .loader-brand, .scroll-hint .chev, .hud-caret, .loader-log .cursor{ animation:none; }
  .eyebrow, .lead, .title-rule{ animation-duration:.01s; animation-delay:0s; }
  .title, .btn, .service, .nav-cta{ transition-duration:.2s; }
}