/* ============================================================
   LUMINOLABS — escuro, polido, explicativo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesque:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0B0B0D;
  --bg-2:#101013;
  --card:#141418;
  --card-hover:#1A1A20;
  --fg:#F6F6F3;
  --muted:#9A998F;
  --soft:#C8C7BF;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --band:#46C24D; --event:#FF6A38; --artist:#F22C9C;
  --tour:#9A5CF2; --booking:#F2AC22; --marketing:#3D86F5;
  --signal:#1ED6D6;

  --maxw:1140px;
  --pad:clamp(20px,5vw,44px);
  --f:'Hanken Grotesque',system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--f); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
::selection{ background:var(--signal); color:#001312 }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad) }

h1,h2,h3{ font-weight:700; letter-spacing:-.025em; line-height:1.08 }
h1{ font-size:clamp(2.2rem,5.4vw,4rem); font-weight:800 }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem) }
h3{ font-size:1.18rem; letter-spacing:-.015em }
p{ color:var(--soft) }
.eyebrow{
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--soft); line-height:1.6 }

/* ---------- header ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:-.02em }
.logo i{ width:11px; height:11px; border-radius:50%; display:block;
  background:conic-gradient(from 90deg,var(--band),var(--booking),var(--event),var(--artist),var(--marketing),var(--tour),var(--band)) }
nav.menu{ display:flex; align-items:center; gap:clamp(18px,3vw,34px) }
nav.menu a{ font-size:.95rem; color:var(--muted); transition:color .2s }
nav.menu a:hover,nav.menu a[aria-current]{ color:var(--fg) }
nav.menu a.cta{ color:var(--fg); border:1px solid var(--line-strong); padding:8px 16px; border-radius:99px }
nav.menu a.cta:hover{ background:var(--fg); color:var(--bg) }

/* ---------- hero ---------- */
.hero{ padding:clamp(64px,12vw,140px) 0 clamp(48px,8vw,90px); border-bottom:1px solid var(--line) }
.hero .eyebrow{ margin-bottom:22px }
.hero h1{ max-width:15ch; background:linear-gradient(180deg,#fff,#cfcec6); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero .lead{ margin-top:24px; max-width:54ch }
.hero .actions{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:99px; font-weight:600; font-size:.98rem; transition:.2s }
.btn.primary{ background:var(--fg); color:var(--bg) }
.btn.primary:hover{ transform:translateY(-2px) }
.btn.ghost{ border:1px solid var(--line-strong); color:var(--fg) }
.btn.ghost:hover{ border-color:var(--fg) }

/* ---------- secção ---------- */
section.block{ padding-block:clamp(56px,9vw,110px); border-bottom:1px solid var(--line) }
.block .head{ max-width:62ch; margin-bottom:clamp(36px,6vw,60px) }
.block .head .eyebrow{ margin-bottom:14px }
.block .head p{ margin-top:16px; font-size:1.08rem }

/* ---------- Central Hub: destaque ---------- */
.central{
  display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,5vw,60px);
  align-items:center;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border:1px solid var(--line); border-radius:24px;
  padding:clamp(28px,4.5vw,52px);
}
.central .ico{ width:100% }
.central h3{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:12px }
.central p{ font-size:1.06rem; max-width:54ch }
.central .pills{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px }
.central .pills span{ font-size:.86rem; color:var(--soft); border:1px solid var(--line-strong); padding:7px 14px; border-radius:99px }

/* ---------- ícone (cor cheia, cantos arredondados) ---------- */
.ico{ aspect-ratio:1; display:grid; place-items:center }
.ico img{
  width:100%; height:100%; object-fit:contain;
  border-radius:21%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45)) drop-shadow(0 22px 40px rgba(0,0,0,.55));
}

/* ---------- palco animado: hub + apps em órbita ---------- */
.stage{
  --R:clamp(116px,30vw,196px);
  --orb:clamp(54px,12vw,80px);
  --core:clamp(88px,18vw,124px);
  position:relative; margin:clamp(20px,4vw,40px) auto clamp(28px,5vw,46px);
  width:calc(var(--R) * 2 + var(--orb) + 40px);
  height:calc(var(--R) * 2 + var(--orb) + 40px);
  max-width:100%;
}
.stage .ring{ position:absolute; inset:0; animation:spin 52s linear infinite }
.stage .spoke{
  position:absolute; top:50%; left:50%; height:2px; width:var(--R);
  transform-origin:0 50%; transform:rotate(var(--a));
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,transparent),transparent);
  opacity:.45;
}
.stage .spoke::after{
  content:""; position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c);
  animation:flow 3.4s ease-in-out infinite; animation-delay:var(--d);
}
@keyframes flow{ 0%,100%{ left:6%; opacity:0 } 15%{ opacity:1 } 70%{ opacity:1 } 85%{ left:96%; opacity:0 } }
.stage .orb{
  position:absolute; top:50%; left:50%; width:var(--orb); height:var(--orb);
  margin:calc(var(--orb) / -2);
  transform:rotate(var(--a)) translateX(var(--R)) rotate(calc(var(--a) * -1));
}
.stage .orb .orb-in{ display:block; width:100%; height:100%; animation:spin-r 52s linear infinite;
  transition:transform .25s ease }
.stage .orb img{ width:100%; height:100%; object-fit:contain; border-radius:22%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) }
.stage .orb:hover .orb-in{ transform:scale(1.16) }
.stage .orb .lbl{
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  font-size:.72rem; font-weight:600; white-space:nowrap; color:var(--c);
  opacity:0; transition:opacity .2s;
}
.stage .orb:hover .lbl{ opacity:1 }
.stage .core{
  position:absolute; top:50%; left:50%; width:var(--core); height:var(--core);
  margin:calc(var(--core) / -2); z-index:2;
  border-radius:24%;
  animation:breathe 4.6s ease-in-out infinite;
}
.stage .core img{ width:100%; height:100%; object-fit:contain; border-radius:24%;
  filter:drop-shadow(0 0 26px rgba(255,255,255,.18)) drop-shadow(0 10px 22px rgba(0,0,0,.7)) }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes spin-r{ to{ transform:rotate(-360deg) } }
@keyframes breathe{ 50%{ transform:scale(1.05) } }
@media (prefers-reduced-motion:reduce){
  .stage .ring,.stage .orb .orb-in,.stage .core{ animation:none }
  .stage .spoke::after{ animation:none; opacity:0 }
}

/* ---------- vídeo em destaque ---------- */
.video-frame{
  position:relative; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--card),var(--bg-2));
}
.video-frame video,.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0 }
.video-frame .ph{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; text-align:center; padding:24px;
}
.video-frame .play{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background:var(--fg); color:var(--bg); transition:transform .2s;
}
.video-frame:hover .play{ transform:scale(1.08) }
.video-frame .ph small{ color:var(--muted); font-size:.92rem; letter-spacing:.04em }

/* ---------- grelha das apps ---------- */
.apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,24px); margin-top:clamp(28px,4vw,40px) }
.app-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:16px;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.app-card:hover{ transform:translateY(-6px); background:var(--card-hover); border-color:var(--ac) }
.app-card .ico{ width:72px }
.app-card .eyebrow{ color:var(--ac) }
.app-card h3{ font-size:1.32rem }
.app-card p{ font-size:.98rem; color:var(--muted); flex:1 }
.app-card .more{ font-size:.92rem; font-weight:600; color:var(--fg); display:inline-flex; gap:7px; align-items:center }
.app-card:hover .more{ color:var(--ac) }
.app-card .more svg{ transition:transform .2s }
.app-card:hover .more svg{ transform:translateX(4px) }

/* ---------- mecanismos ---------- */
.mechs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.2vw,22px) }
.mech{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:clamp(26px,3.6vw,40px); display:flex; flex-direction:column; gap:14px;
  transition:transform .25s ease, border-color .25s ease;
}
.mech:hover{ transform:translateY(-5px); border-color:var(--signal) }
.mech .eyebrow{ color:var(--signal) }
.mech h3{ font-size:1.5rem }
.mech p{ font-size:1rem; color:var(--muted) }
.mech ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.mech li{ font-size:.85rem; color:var(--soft); border:1px solid var(--line-strong); padding:6px 13px; border-radius:99px }

/* ---------- página interna: detalhe ---------- */
.detail{
  display:grid; grid-template-columns:180px 1fr; gap:clamp(26px,5vw,64px);
  align-items:center; padding-block:clamp(38px,6vw,64px);
}
.detail + .detail{ border-top:1px solid var(--line) }
.detail .ico{ width:100% }
.detail .eyebrow{ color:var(--ac); margin-bottom:12px }
.detail h2{ margin-bottom:14px }
.detail p{ font-size:1.08rem; max-width:56ch }
.detail ul{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin-top:22px }
.detail li{ font-size:.9rem; color:var(--soft); border:1px solid var(--line-strong); padding:8px 15px; border-radius:99px }

/* ---------- footer ---------- */
footer{ padding:clamp(40px,6vw,68px) 0 }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px }
footer .logo{ font-size:1.05rem }
footer .fmeta{ color:var(--muted); font-size:.92rem }
footer .fmeta a:hover{ color:var(--fg) }

/* ---------- seletor de idioma ---------- */
.langsel{ display:flex; gap:2px; margin-left:6px }
.langsel button{
  font:inherit; font-size:.74rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); background:none; border:0;
  padding:5px 7px; border-radius:6px; cursor:pointer; transition:color .2s, background .2s;
}
.langsel button:hover{ color:var(--fg) }
.langsel button.on{ color:var(--fg); background:color-mix(in srgb,var(--fg) 12%,transparent) }
@media (max-width:600px){ .langsel{ order:3 } }

/* ---------- abertura full-screen (reel) ---------- */
.opener{ position:relative; width:100%; height:clamp(700px,84svh,860px); min-height:700px; background:#060607 }
.opener iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block }
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:26px 0 34px; background:var(--bg); text-decoration:none;
  color:var(--fg); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:.6; transition:opacity .2s;
}
.scroll-cue:hover{ opacity:1 }
.scroll-cue svg{ width:18px; height:18px; animation:cue 2s ease-in-out infinite }
@keyframes cue{ 50%{ transform:translateY(6px) } }

/* ---------- botão de som ---------- */
.sound-btn{
  position:fixed; right:20px; bottom:20px; z-index:100;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--card); color:var(--fg);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(8px); transition:transform .2s, border-color .2s;
}
.sound-btn:hover{ transform:scale(1.07); border-color:var(--fg) }
.sound-btn .off{ display:none }
.sound-btn.muted .on{ display:none }
.sound-btn.muted .off{ display:block }
.sound-btn .eq{ display:flex; gap:2.5px; align-items:flex-end; height:16px }
.sound-btn .eq i{ width:3px; background:currentColor; border-radius:2px;
  animation:eq .9s ease-in-out infinite }
.sound-btn .eq i:nth-child(1){ animation-delay:0s }
.sound-btn .eq i:nth-child(2){ animation-delay:.2s }
.sound-btn .eq i:nth-child(3){ animation-delay:.35s }
.sound-btn .eq i:nth-child(4){ animation-delay:.15s }
@keyframes eq{ 0%,100%{ height:5px } 50%{ height:16px } }
.sound-btn.muted .eq i{ animation-play-state:paused; height:5px }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .apps{ grid-template-columns:repeat(2,1fr) }
  .central{ grid-template-columns:1fr; text-align:left }
  .central .ico{ width:130px }
  .mechs{ grid-template-columns:1fr }
  .detail{ grid-template-columns:1fr; gap:24px }
  .detail .ico{ width:140px }
}
@media (max-width:540px){
  .apps{ grid-template-columns:1fr }
  nav.menu a:not(.cta){ display:none }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important } }