:root { --ink:#09051b; --blue:#4ea4ff; --violet:#9e71ff; --pink:#ff4dc8; --white:#fff; --rail:450px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:#fff; background:var(--ink); font-family:"Inter",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }

.site-header { position:fixed; z-index:30; inset:0 0 auto; height:82px; padding:0 clamp(22px,4vw,70px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(255,255,255,.14); background:linear-gradient(90deg,rgba(5,4,16,.68),rgba(5,4,16,.16),rgba(5,4,16,.86)); backdrop-filter:blur(6px); }
.logo { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.56); border-radius:50%; font:700 13px/1 "Montserrat",sans-serif; letter-spacing:.08em; }
.main-nav { display:flex; gap:clamp(20px,2.5vw,42px); }
.main-nav a { position:relative; padding:32px 0 30px; color:rgba(255,255,255,.68); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.main-nav a:hover,.main-nav .is-active { color:#fff; }
.main-nav .is-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--blue),var(--pink)); }
.header-button { justify-self:end; display:inline-grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.56); border-radius:50%!important; overflow:hidden; transition:.25s; }
.header-button:hover { color:var(--ink); background:#fff; }
.header-button svg { display:block; width:16px; height:16px; }

.party-page { height:100svh; overflow:hidden; }
.hero { position:fixed; inset:0 var(--rail) 0 0; display:flex; align-items:center; padding:112px 55px 70px clamp(30px,7vw,118px); isolation:isolate; overflow:hidden; background:#09051b url("bg-bailinho-completo.png") center/cover no-repeat; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,3,15,.9),rgba(3,3,15,.55) 42%,rgba(3,3,15,.05) 73%),linear-gradient(180deg,rgba(2,2,10,.38),transparent 30%,transparent 73%,rgba(2,2,10,.52)); }
.hero__glow { position:absolute; z-index:-1; width:42vw; height:42vw; right:-10vw; top:10%; border-radius:50%; background:rgba(185,52,255,.16); filter:blur(60px); }
.hero__content { position:relative; z-index:2; width:min(570px,48%); text-shadow:0 3px 26px rgba(0,0,0,.75); }
.kicker { display:flex; align-items:center; gap:13px; margin:0 0 17px; color:#91bfff; font-size:9px; font-weight:600; letter-spacing:.27em; text-transform:uppercase; }
.kicker span { width:38px; height:1px; background:linear-gradient(90deg,var(--blue),var(--pink)); }
.hero h1 { margin:0; font:500 clamp(43px,5.2vw,82px)/.98 "Montserrat",sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.hero h1 strong { color:#e7dcff; font-weight:800; text-shadow:0 0 34px rgba(137,81,255,.32); }
.hero__intro { max-width:510px; margin:24px 0 17px; color:rgba(255,255,255,.73); font-size:clamp(14px,1.1vw,17px); line-height:1.7; }
.hero__tags { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 0 28px; color:rgba(255,255,255,.72); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.hero__tags i { width:3px; height:3px; border-radius:50%; background:var(--pink); }
.button { display:inline-flex; align-items:center; gap:26px; padding:15px 19px; background:#fff; color:var(--ink); font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:.25s; }
.button:hover { color:#fff; background:linear-gradient(90deg,#7457ff,#e044c4); transform:translateY(-2px); }

.video-rail { position:fixed; z-index:10; top:82px; right:0; bottom:0; width:var(--rail); padding:28px 26px 0; overflow-y:auto; overscroll-behavior:contain; background:rgba(7,4,20,.92); border-left:1px solid rgba(255,255,255,.14); backdrop-filter:blur(13px); scrollbar-color:var(--violet) rgba(255,255,255,.08); scrollbar-width:thin; }
.video-rail::-webkit-scrollbar { width:6px; }
.video-rail::-webkit-scrollbar-track { background:rgba(255,255,255,.07); }
.video-rail::-webkit-scrollbar-thumb { background:linear-gradient(var(--blue),var(--pink)); border-radius:6px; }
.video-rail__header { padding:0 2px 25px; }
.video-rail__header p { margin:0 0 7px; color:#a889ff; font-size:8px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; }
.video-rail__header h2 { margin:0 0 8px; font:600 25px/1.2 "Montserrat",sans-serif; }
.video-rail__header>span { color:rgba(255,255,255,.42); font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.video-list { display:grid; gap:30px; }
.video-card { padding-bottom:27px; border-bottom:1px solid rgba(255,255,255,.13); }
.video-frame { position:relative; width:min(290px,100%); aspect-ratio:9/16; margin:0 auto; overflow:hidden; background:#03020a; border:1px solid rgba(255,255,255,.1); box-shadow:0 16px 36px rgba(0,0,0,.42); }
.video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-card__caption { display:grid; grid-template-columns:28px 1fr; align-items:center; max-width:290px; margin:13px auto 0; }
.video-card__caption span { color:#b28dff; font-size:8px; }
.video-card__caption h3 { margin:0; font:500 13px/1.35 "Montserrat",sans-serif; }
.video-rail__footer { margin:30px -26px 0; padding:28px; background:linear-gradient(135deg,rgba(73,89,255,.15),rgba(255,52,184,.12)); }
.video-rail__footer p { margin:0 0 12px; color:rgba(255,255,255,.62); font-size:11px; }
.video-rail__footer a { font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.video-rail__footer a span { margin-left:13px; color:#d05cff; }

@media (max-width:1050px) { :root{--rail:370px;} .hero{padding-right:25px;background-position:57% center;} .hero__content{width:53%;} }

@media (max-width:720px) {
  body { color:#fff; background:var(--ink); }
  .site-header { position:absolute; height:70px; padding:0 18px; }
  .main-nav { gap:16px; }
  .main-nav a { padding:27px 0 25px; font-size:8px; }
  .header-button { width:42px; height:42px; }
  .party-page { height:auto; overflow:visible; }
  .hero { position:relative; inset:auto; min-height:78svh; align-items:flex-end; padding:100px 22px 48px; color:#fff; background-position:64% center; }
  .hero::before { background:linear-gradient(0deg,rgba(4,2,17,.96),rgba(4,2,17,.6) 47%,rgba(4,2,17,.08) 78%),linear-gradient(90deg,rgba(3,2,15,.25),transparent); }
  .hero__content { width:100%; }
  .hero h1 { color:#fff; font-size:clamp(39px,12vw,58px); }
  .hero__intro { max-width:460px; font-size:13px; }
  .video-rail {
    position:relative; inset:auto; width:100%; padding:48px 20px 0; overflow:visible;
    color:#fff; background:rgba(7,4,20,.92); border:0; border-top:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(13px);
  }
  .video-rail__header { text-align:center; padding-bottom:30px; }
  .video-rail__header h2 { font-size:30px; }
  .video-rail__header>span { display:none; }
  .video-list { gap:34px; }
  .video-frame { width:min(340px,86vw); }
  .video-card__caption { max-width:min(340px,86vw); }
  .video-card__caption h3 { font-size:15px; }
  .video-rail__footer { margin:40px -20px 0; padding:38px 22px; }
}

@media (max-width:400px) { .hero{min-height:720px;} .hero__tags{margin-bottom:22px;} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;} *,*::before,*::after{transition:none!important;} }