:root{
    --bg:#0A0908;
    --bg2:#141210;
    --bg3:#1E1B18;
    --line:#2B2723;
    --text:#F5F1EA;
    --text-dim:#9C948A;
    --accent:#A78BFA;
    --accent-dim:#6D5A9E;
    --accent-ink:#1B1030;
    --font-display:'Fraunces', serif;
    --font-body:'Sora', sans-serif;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; background:var(--bg); }
  body{ background:var(--bg); color:var(--text); font-family:var(--font-body); overflow-x:hidden; }
  img,svg{ display:block; }
  a{ text-decoration:none; color:inherit; }
  ul{ list-style:none; }
  button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
  ::selection{ background:var(--accent); color:var(--accent-ink); }
  .container{ max-width:1280px; margin:0 auto; padding:0 24px; }
  @media(min-width:768px){ .container{ padding:0 40px; } }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  /* -------- utility -------- */
  .eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .eyebrow.center{ justify-content:center; }
  .eyebrow .rule{ width:28px; height:1px; background:var(--accent); }
  .eyebrow span{ color:var(--accent); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
  .section-title{ font-family:var(--font-display); font-weight:500; font-size:1.6rem; color:var(--text); margin-bottom:16px; }
  @media(min-width:768px){ .section-title{ font-size:1.9rem; } }
  .section-sub{ color:var(--text-dim); font-size:14px; max-width:520px; margin-bottom:32px; }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:14px; padding:14px 32px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:filter .2s ease; }
  .btn-primary:hover{ filter:brightness(1.1); }
  .btn-outline{ border:1px solid var(--line); color:var(--text); font-weight:500; font-size:14px; padding:14px 32px; border-radius:999px; transition:background .2s ease; }
  .btn-outline:hover{ background:rgba(255,255,255,.05); }

  /* -------- navbar (minimal, HBO-style: logo + entrar + assinar) -------- */
  header{ position:fixed; top:0; left:0; right:0; z-index:50; background:linear-gradient(to bottom, rgba(10,9,8,.85), transparent); transition:all .3s ease; border-bottom:1px solid transparent; }
  header.scrolled{ background:rgba(10,9,8,.9); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .nav-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }
  @media(min-width:768px){ .nav-inner{ height:76px; } }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand span{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; letter-spacing:.02em; }
  @media(min-width:768px){ .brand span{ font-size:1.55rem; } }
  .nav-right{ display:flex; align-items:center; gap:12px; }
  .nav-right a.login{ color:var(--text); font-size:14px; padding:10px 14px; }
  .nav-cta{ background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:600; padding:10px 20px; border-radius:999px; transition:filter .2s ease; }
  .nav-cta:hover{ filter:brightness(1.1); }

  /* -------- hero (HBO-style: brand lockup + price line + single CTA) -------- */
  .hero{ position:relative; min-height:92svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:96px 24px 64px; overflow:hidden; }
  .hero-slides{ position:absolute; inset:0; }
  .hero-slide{ position:absolute; inset:0; opacity:0; transform:scale(1.06); background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 9px); transition:opacity 1.4s ease; }
  .hero-slide.active{ opacity:1; animation:kenburns 7s ease-out forwards; }
  @keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
  .hero-fade{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,9,8,.25) 0%, rgba(10,9,8,.82) 80%, var(--bg) 100%), linear-gradient(to right, rgba(10,9,8,.55) 0%, rgba(10,9,8,.1) 45%, rgba(10,9,8,.1) 55%, rgba(10,9,8,.55) 100%); z-index:1; }
  .hero-caption{ position:absolute; left:0; right:0; bottom:104px; z-index:2; display:flex; justify-content:center; padding:0 24px; pointer-events:none; }
  .hero-caption-inner{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; text-align:left; max-width:280px; }
  .hero-caption-inner.active{ opacity:1; transform:translateY(0); }
  .hero-caption .kicker{ color:var(--accent); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; margin-bottom:4px; }
  .hero-caption .ttl{ font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--text); }
  @media(max-width:640px){ .hero-caption{ display:none; } }
  .hero-dots{ position:absolute; bottom:66px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:8px; }
  .hero-dot{ width:22px; height:3px; border-radius:2px; background:rgba(245,241,234,.25); padding:0; cursor:pointer; transition:background .3s ease; overflow:hidden; position:relative; }
  .hero-dot.active{ background:rgba(245,241,234,.3); }
  .hero-dot.active::after{ content:""; position:absolute; inset:0; background:var(--accent); animation:dotfill 6s linear forwards; transform-origin:left; }
  @keyframes dotfill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
  @media (prefers-reduced-motion: reduce){ .hero-slide.active{ animation:none; } .hero-dot.active::after{ animation:none; transform:scaleX(1); } }
  .aperture-wrap{ position:absolute; top:2%; width:min(78vw,680px); height:min(78vw,680px); opacity:.5; transform:scale(.7); transition:transform 1.8s cubic-bezier(.16,1,.3,1), opacity 1.8s ease; }
  .aperture-wrap.open{ transform:scale(1); }
  .aperture-wrap line{ transition:all 1.8s cubic-bezier(.16,1,.3,1); }
  .hero-inner{ position:relative; z-index:2; max-width:640px; }
  .hero-brand{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px; }
  .hero-brand span{ font-family:var(--font-display); font-weight:600; font-size:3.2rem; letter-spacing:.01em; }
  @media(min-width:768px){ .hero-brand span{ font-size:4.4rem; } }
  .hero-price{ color:var(--text-dim); font-size:1rem; margin-bottom:32px; }
  .hero-price strong{ color:var(--text); font-weight:600; }
  .scroll-hint{ position:absolute; bottom:28px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.6; animation:bounce 2.2s infinite; }
  .scroll-hint span{ color:var(--text-dim); font-size:12px; }
  @keyframes bounce{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .scroll-hint{ animation:none; } .aperture-wrap, .aperture-wrap line{ transition:none; } }

  /* -------- plans (HBO-style: toggle + 3 cards) -------- */
  .plans{ padding:72px 0 88px; border-top:1px solid var(--line); }
  .plans-head{ text-align:center; max-width:560px; margin:0 auto 32px; }
  .toggle-wrap{ display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 40px; background:var(--bg2); border:1px solid var(--line); border-radius:999px; padding:4px; width:fit-content; }
  .toggle-btn{ font-size:13px; font-weight:600; padding:9px 20px; border-radius:999px; color:var(--text-dim); transition:all .2s ease; display:flex; align-items:center; gap:6px; }
  .toggle-btn.active{ background:var(--accent); color:var(--accent-ink); }
  .toggle-badge{ font-size:10px; background:rgba(167,139,250,.18); color:var(--accent); padding:2px 7px; border-radius:999px; font-weight:600; }
  .toggle-btn.active .toggle-badge{ background:var(--accent-ink); color:var(--accent); }
  .plans-grid{ display:grid; grid-template-columns:1fr; gap:20px; align-items:start; max-width:1000px; margin:0 auto; }
  @media(min-width:768px){ .plans-grid{ grid-template-columns:repeat(3,1fr); } }
  .plan{ border-radius:20px; padding:28px; display:flex; flex-direction:column; background:var(--bg2); border:1px solid var(--line); }
  .plan.highlight{ background:var(--bg3); border:1px solid var(--accent); transform:translateY(-8px); }
  .plan-badge{ color:var(--accent-ink); background:var(--accent); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:4px 12px; border-radius:999px; align-self:flex-start; margin-bottom:14px; }
  .plan h3{ font-family:var(--font-display); font-size:1.2rem; font-weight:500; margin-bottom:10px; }
  .plan-price{ display:flex; align-items:baseline; gap:4px; }
  .plan-price .amount{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; }
  .plan-price .period{ color:var(--text-dim); font-size:13px; }
  .plan-annual-total{ color:var(--text-dim); font-size:12px; margin-top:2px; margin-bottom:18px; }
  .plan-price + .plan-annual-total{ margin-top:2px; }
  .plan-features{ display:flex; flex-direction:column; gap:11px; margin:16px 0 26px; flex:1; }
  .plan-features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-dim); }
  .plan-features svg{ margin-top:2px; flex-shrink:0; }
  .plan-cta{ text-align:center; padding:12px; border-radius:999px; font-size:14px; font-weight:600; transition:filter .2s ease; }
  .plan-cta:hover{ filter:brightness(1.1); }
  .plan-cta.filled{ background:var(--accent); color:var(--accent-ink); }
  .plan-cta.outline{ border:1px solid var(--line); color:var(--text); }
  .plans-note{ text-align:center; color:var(--text-dim); font-size:11.5px; max-width:640px; margin:28px auto 0; line-height:1.6; opacity:.75; }

  /* -------- genre showcase grid -------- */
  .genres{ padding:72px 0; }
  .genre-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
  @media(min-width:640px){ .genre-grid{ grid-template-columns:repeat(3,1fr); } }
  @media(min-width:1024px){ .genre-grid{ grid-template-columns:repeat(4,1fr); } }
  .genre-tile{ position:relative; border-radius:12px; height:140px; padding:16px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; cursor:pointer; transition:transform .3s ease; }
  .genre-tile:hover{ transform:scale(1.02); }
  .genre-tile .kicker{ font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:4px; }
  .genre-tile .tag{ font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px; }
  .genre-tile h3{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; }

  /* -------- horizontal scroller -------- */
  .row-wrap{ position:relative; }
  .row{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; scrollbar-width:none; }
  .row::-webkit-scrollbar{ display:none; }
  .row-btn{ position:absolute; top:40%; width:36px; height:36px; border-radius:999px; display:none; align-items:center; justify-content:center; background:rgba(10,9,8,.85); border:1px solid var(--line); opacity:0; transition:opacity .2s ease; z-index:2; }
  .row-wrap:hover .row-btn{ opacity:1; }
  .row-btn.prev{ left:-16px; }
  .row-btn.next{ right:-16px; }
  @media(min-width:768px){ .row-btn{ display:flex; } }

  .card-placeholder{ position:relative; overflow:hidden; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 8px); transition:transform .3s ease; }
  .card-placeholder:hover{ transform:scale(1.02); }

  .hl-card{ min-width:200px; cursor:pointer; }
  @media(min-width:640px){ .hl-card{ min-width:230px; } }
  .hl-thumb{ border-radius:10px; aspect-ratio:2/3; display:flex; align-items:flex-end; padding:14px; }
  .hl-overlay{ position:absolute; inset:0; background:rgba(10,9,8,.55); opacity:0; transition:opacity .3s ease; display:flex; align-items:center; justify-content:center; border-radius:10px; }
  .hl-card:hover .hl-overlay{ opacity:1; }
  .play-btn{ width:44px; height:44px; border-radius:999px; background:var(--accent); display:flex; align-items:center; justify-content:center; }
  .rating{ position:relative; z-index:1; font-size:11px; color:var(--text-dim); background:rgba(10,9,8,.55); padding:4px 8px; border-radius:6px; }
  .hl-meta{ padding-top:10px; }
  .hl-meta h3{ font-family:var(--font-display); font-size:.92rem; font-weight:500; }
  .hl-meta p{ color:var(--text-dim); font-size:11.5px; margin-top:3px; }

  /* -------- numbered collections carousel -------- */
  .numbered{ padding:72px 0; background:var(--bg2); }
  .numbered-row{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; scrollbar-width:none; }
  .numbered-row::-webkit-scrollbar{ display:none; }
  .num-card{ min-width:230px; cursor:pointer; }
  .num-thumb{ position:relative; border-radius:12px; height:150px; display:flex; align-items:flex-end; padding:0; }
  .num-thumb .num{ position:absolute; left:14px; bottom:10px; font-family:var(--font-display); font-size:3.4rem; font-weight:700; color:rgba(245,241,234,.14); line-height:1; }
  .num-thumb .label{ position:relative; z-index:1; padding:16px; font-family:var(--font-display); font-size:1rem; font-weight:500; }

  /* -------- devices -------- */
  .devices{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .devices-inner{ padding:72px 0; text-align:center; }
  .devices-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px; margin-top:44px; }
  @media(min-width:768px){ .devices-row{ gap:64px; } }
  .device{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .device-icon{ width:52px; height:52px; border-radius:16px; border:1px solid var(--line); background:var(--bg2); display:flex; align-items:center; justify-content:center; }
  .device span{ color:var(--text-dim); font-size:12px; }

  /* -------- cta banner -------- */
  .cta-final{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
  .cta-bg{ position:absolute; inset:0; background:radial-gradient(60% 90% at 50% 50%, var(--bg3) 0%, var(--bg) 75%); }
  .cta-inner{ position:relative; max-width:640px; margin:0 auto; text-align:center; padding:80px 24px; }
  .cta-inner h2{ font-family:var(--font-display); font-weight:500; font-size:1.9rem; margin:20px 0 16px; line-height:1.15; }
  @media(min-width:768px){ .cta-inner h2{ font-size:2.6rem; } }
  .cta-inner p{ color:var(--text-dim); margin-bottom:32px; font-size:14px; }

  /* -------- FAQ -------- */
  .faq{ max-width:760px; margin:0 auto; padding:80px 24px; }
  .faq-head{ text-align:center; margin-bottom:36px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; text-align:left; font-size:15px; font-weight:500; }
  .faq-q svg{ transition:transform .3s ease; flex-shrink:0; }
  .faq-item.open .faq-q svg{ transform:rotate(180deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .faq-item.open .faq-a{ max-height:260px; }
  .faq-a p{ color:var(--text-dim); font-size:14px; line-height:1.6; padding-bottom:20px; padding-right:32px; }

  /* -------- footer -------- */
  footer{ border-top:1px solid var(--line); background:var(--bg2); }
  .footer-inner{ padding:56px 0 40px; }
  .footer-links{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--line); }
  .footer-links a{ color:var(--text-dim); font-size:13px; }
  .footer-links a:hover{ color:var(--text); }
  .footer-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:28px; }
  .footer-legal a{ color:var(--text-dim); font-size:12px; }
  .footer-legal a:hover{ color:var(--text); }
  .footer-bottom{ display:flex; flex-direction:column; gap:16px; }
  @media(min-width:640px){ .footer-bottom{ flex-direction:row; align-items:center; justify-content:space-between; } }
  .footer-brand{ display:flex; align-items:center; gap:8px; }
  .footer-brand span{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; }
  .footer-copy{ color:var(--text-dim); font-size:11.5px; }
  .footer-social{ display:flex; gap:14px; }
  .footer-social a{ width:32px; height:32px; border-radius:999px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }

  /* -------- botão flutuante WhatsApp -------- */
  .whatsapp-float{ position:fixed; bottom:22px; right:22px; width:56px; height:56px; border-radius:999px; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:60; transition:transform .2s ease; }
  .whatsapp-float:hover{ transform:scale(1.08); }
  @media(max-width:480px){ .whatsapp-float{ width:50px; height:50px; bottom:16px; right:16px; } }