/* APOLO LED — links.apololed.com.br
   Identidade: Preto (Pantone Black 6 C) · Roxo Pantone 266 C #853BD9 · Stage Grotesk
   Conceito: "uma sala escura iluminada por um painel de LED roxo" — minimalista. */

@font-face{font-family:'Stage Grotesk';src:url(fonts/StageGrotesk-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Stage Grotesk';src:url(fonts/StageGrotesk-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Stage Grotesk';src:url(fonts/StageGrotesk-Bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --black:#000000;
  --bg:#050408;
  --bg-2:#0B0912;
  --card:rgba(16,13,26,.72);
  --card-hover:rgba(22,17,36,.86);
  --purple:#853BD9;          /* Pantone 266 C */
  --purple-soft:#A66BE8;
  --purple-deep:#3A1866;
  --ink:#F3F3F3;
  --mut:#9FA1AE;
  --mut-2:#6E7080;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --glow:133,59,217;
  --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  min-height:100%;
  background:var(--black);
  color:var(--ink);
  font-family:'Stage Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* ---------- LUZ DE FUNDO (a "sala escura") ---------- */
.stage{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, #17102A 0%, var(--bg-2) 45%, var(--bg) 100%);
  pointer-events:none;
}
/* Fonte de luz principal — o "painel" atrás da logo */
.stage .light{
  position:absolute;left:50%;top:-16vh;width:min(120vw,820px);aspect-ratio:1/0.62;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%, rgba(var(--glow),.42) 0%, rgba(var(--glow),.16) 32%, rgba(var(--glow),0) 68%);
  filter:blur(28px);
  opacity:.85;
  animation:breathe 14s var(--ease) infinite alternate;
  will-change:transform,opacity;
}
/* Reflexo difuso baixo — luz "quicando" no chão da sala */
.stage .light-2{
  position:absolute;left:50%;bottom:-22vh;width:min(140vw,980px);aspect-ratio:1/0.5;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 60%, rgba(var(--glow),.16) 0%, rgba(var(--glow),0) 62%);
  filter:blur(40px);
  animation:drift 22s var(--ease) infinite alternate;
  will-change:transform;
}
/* Malha de pixels — referência discreta ao módulo de LED */
.stage .grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  opacity:.9;
}
/* Grão fino — tira o aspecto "digital chapado" */
.stage .grain{
  position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.055;mix-blend-mode:overlay;
}

@keyframes breathe{
  0%{transform:translateX(-50%) scale(1);opacity:.78}
  100%{transform:translateX(-48%) scale(1.08);opacity:.95}
}
@keyframes drift{
  0%{transform:translateX(-52%) translateY(0)}
  100%{transform:translateX(-46%) translateY(-3vh)}
}

/* ---------- LAYOUT ---------- */
.page{
  position:relative;z-index:1;
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + clamp(56px,11vh,104px)) 20px calc(env(safe-area-inset-bottom,0px) + 28px);
}
.column{width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;flex:1}

/* ---------- HERO ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.logo{
  width:clamp(196px,58vw,248px);height:auto;
  filter:drop-shadow(0 0 28px rgba(var(--glow),.28));
}
.kicker{
  margin-top:clamp(28px,5vh,40px);
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:0 8px;
  color:var(--purple-soft);opacity:.9;
}
.kicker:empty{display:none}
.tagline{
  margin-top:10px;
  font-size:clamp(19px,5.2vw,23px);font-weight:500;line-height:1.3;letter-spacing:-.005em;
  color:var(--ink);
  text-wrap:balance;
}
.tagline em{font-style:normal;color:var(--purple-soft)}

/* divisor luminoso */
.divider{
  position:relative;width:100%;height:1px;margin:clamp(30px,5.5vh,46px) 0 clamp(22px,4vh,30px);
  background:linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.divider::after{
  content:"";position:absolute;left:50%;top:-1px;width:120px;height:3px;transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(var(--glow),0), var(--purple) 40%, #D9C2FF 50%, var(--purple) 60%, rgba(var(--glow),0));
  filter:blur(.6px);
  box-shadow:0 0 18px 2px rgba(var(--glow),.45);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.75;width:120px}50%{opacity:1;width:160px}}

/* ---------- LINKS ---------- */
.links{list-style:none;width:100%;display:flex;flex-direction:column;gap:14px}
.link{
  --lift:0px;
  position:relative;display:grid;grid-template-columns:48px 1fr 24px;align-items:center;gap:16px;
  min-height:76px;padding:16px 18px 16px 16px;
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 30px -18px rgba(0,0,0,.8);
  transform:translateY(var(--lift));
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  outline:none;
  overflow:hidden;
}
/* halo roxo que "acende" no hover */
.link::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 140% at 50% 120%, rgba(var(--glow),.18), transparent 60%);
  opacity:0;transition:opacity .45s var(--ease);
}
.link:hover,.link:focus-visible{
  --lift:-3px;
  background:var(--card-hover);
  border-color:rgba(var(--glow),.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(var(--glow),.12),
    0 18px 44px -20px rgba(var(--glow),.55);
}
.link:hover::before,.link:focus-visible::before{opacity:1}
.link:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--purple-soft)}
.link:active{--lift:-1px;transition-duration:.08s;filter:brightness(1.08)}

.link .icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--ink);
  transition:transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.link .icon svg{width:22px;height:22px}
.link:hover .icon{transform:translateY(-1px) scale(1.04);border-color:rgba(var(--glow),.45);color:#fff}

.link .text{min-width:0}
.link .title{display:block;font-size:17px;font-weight:700;letter-spacing:-.005em;line-height:1.2;color:var(--ink)}
.link .subtitle{display:block;margin-top:3px;font-size:13.5px;color:var(--mut);line-height:1.3}

.link .arrow{
  width:24px;height:24px;color:var(--mut-2);
  transition:transform .4s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.link:hover .arrow,.link:focus-visible .arrow{transform:translateX(4px);color:var(--purple-soft)}

/* Estilo dos botões — todos no mesmo padrão (roxo Apolo) */
.link{
  background:linear-gradient(180deg, rgba(133,59,217,.20) 0%, rgba(133,59,217,.08) 100%), var(--card);
  border-color:rgba(var(--glow),.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(var(--glow),.18),
    0 16px 48px -18px rgba(var(--glow),.70),
    0 0 60px -20px rgba(var(--glow),.45);
}
.link .icon{background:var(--purple);border-color:transparent;color:#fff;box-shadow:0 6px 22px -8px rgba(var(--glow),.9)}
.link .subtitle{color:#CDB6F2}
.link .arrow{color:var(--purple-soft)}
.link:hover,.link:focus-visible{
  border-color:rgba(var(--glow),.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(var(--glow),.28),
    0 22px 56px -18px rgba(var(--glow),.85),
    0 0 80px -16px rgba(var(--glow),.55);
}
.link:hover .icon{background:#9450E6}
/* brilho que percorre o CTA principal, bem lento */
.link.primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 48%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.07) 52%, transparent 70%);
  background-size:280% 100%;background-position:120% 0;
  animation:sheen 9s var(--ease) infinite;
}
@keyframes sheen{0%,60%{background-position:120% 0}100%{background-position:-60% 0}}

/* ripple discreto no clique */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(var(--glow),.28);
  transform:scale(0);opacity:.8;
  animation:ripple .6s var(--ease) forwards;
}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---------- RODAPÉ ---------- */
.footer{
  margin-top:auto;padding-top:clamp(40px,7vh,64px);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  color:var(--mut-2);font-size:12.5px;letter-spacing:.02em;
}
.footer .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.footer .meta a{color:var(--mut);transition:color .3s}
.footer .meta a:hover{color:var(--purple-soft)}
.footer .dot{width:3px;height:3px;border-radius:50%;background:var(--mut-2);display:inline-block}
.footer .copy{opacity:.7}

/* ---------- ENTRADA (staggered) ---------- */
.reveal{opacity:0;transform:translateY(10px);animation:reveal .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes reveal{to{opacity:1;transform:none}}

/* ---------- DESKTOP ---------- */
@media (min-width:760px){
  .page{padding-top:clamp(88px,14vh,140px)}
  .column{max-width:480px}
  .logo{width:264px}
  .link{min-height:80px}
}
@media (hover:none){
  .link:hover{--lift:0px}  /* sem "hover preso" no toque */
}

/* ---------- ACESSIBILIDADE / MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .stage .light{opacity:.85}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}