/* ================================================================
   FRC Pro — Em breve (hero única) — prompt do diretor de arte,
   2026-09-03. Página isolada, autocontida -- ela substitui o site
   inteiro temporariamente, então fica deliberadamente fora do
   sistema .nl2/.gk/.pp/.rc, sem nenhuma dependência cruzada.
   Reverter é só remover este arquivo + em-breve.html + a rota
   catch-all do staticwebapp.config.json.

   O gradiente (.hero__shade) é a mesma calibração validada
   visualmente nas rodadas anteriores para esconder por completo o
   "EM BREVE" e os badges que já vêm desenhados nos pixels do arquivo
   aprovado (FRC-HERO-EM-BREVE-APROVADO-v1.png) -- a foto não mudou,
   só o texto/elemento em HTML por cima dela, então o mesmo cuidado
   se aplica. Não reduzir a zona opaca sem revalidar nos 8
   breakpoints.
   ================================================================ */
:root{
  --ink:#030706;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink)}
body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
svg{display:block}

.hero{
  position:relative;
  height:100vh;height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#020504;
  display:flex;
  align-items:center;
}
.hero__photo{
  position:absolute;z-index:-3;inset:0;
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;
}
.hero__shade{
  position:absolute;z-index:-2;inset:0;
  background:linear-gradient(90deg,
    rgba(2,5,4,1) 0%,
    rgba(2,5,4,1) 48%,
    rgba(2,5,4,.97) 58%,
    rgba(2,5,4,.80) 68%,
    rgba(2,5,4,.40) 80%,
    rgba(2,5,4,0) 94%);
}
.hero__logo{
  position:absolute;z-index:2;
  top:max(34px,env(safe-area-inset-top));
  left:max(56px,env(safe-area-inset-left));
  width:88px;height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.28));
}

.hero__content{
  position:relative;z-index:2;
  max-width:min(920px,66vw);
  padding-left:max(7vw,56px);
  padding-right:24px;
}
.hero h1{
  margin:0;
  font-size:clamp(26px,3.4vw,52px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:800;
  text-wrap:balance;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.pill__label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--white);
}
.pill__divider{
  width:1px;height:16px;
  background:rgba(255,255,255,.28);
}
.pill__icons{display:flex;align-items:center;gap:10px}
.pill__icons svg{width:17px;height:17px;fill:#fff}

@media(max-width:920px){
  .hero__logo{left:28px;width:76px}
  .hero__content{padding-left:40px;padding-right:24px;max-width:72vw}
}

@media(max-width:720px){
  .hero__photo{object-position:73% center}
  .hero__shade{
    background:linear-gradient(180deg,
      rgba(2,5,4,.20) 0%,
      rgba(2,5,4,0) 35%,
      rgba(2,5,4,.12) 48%,
      rgba(2,5,4,.80) 70%,
      rgba(2,5,4,.99) 88%,
      #020504 100%);
  }
  .hero{align-items:flex-end}
  .hero__logo{top:max(22px,calc(env(safe-area-inset-top) + 10px));left:22px;width:68px}
  .hero__content{
    padding-inline:22px;
    max-width:none;
    width:100%;
    padding-bottom:max(54px,calc(env(safe-area-inset-bottom) + 42px));
  }
  .hero h1{font-size:clamp(30px,9vw,42px);letter-spacing:-.025em}
  .pill{margin-top:20px}
}

@media(max-width:380px){
  .hero__logo{left:18px}
  .hero__content{padding-inline:18px}
}

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