:root{
    --bg:#0a0a0f; --panel:rgba(255,255,255,.03); --border:rgba(255,255,255,.08);
    --text:#f5f5f7; --muted:#a1a1aa; --brand:#e879f9; --brand-2:#f59e0b; --brand-3:#6366f1;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
    overflow-x:hidden; line-height:1.5;
  }
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  .container{max-width:1200px; margin:0 auto; padding:0 24px}

  .glow{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
  .glow span{position:absolute; border-radius:9999px; filter:blur(80px); opacity:.5}
  .glow .g1{width:500px;height:500px;background:#c026d3;top:-160px;left:-160px; animation:pulseSlow 8s ease-in-out infinite}
  .glow .g2{width:500px;height:500px;background:#4f46e5;top:33%;right:-160px; animation:pulseSlow 10s ease-in-out infinite 2s}
  .glow .g3{width:400px;height:400px;background:#f59e0b;bottom:0;left:33%; opacity:.25; animation:pulseSlow 9s ease-in-out infinite 1s}
  @keyframes pulseSlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.75;transform:scale(1.08)}}

  main{position:relative; z-index:1}

  .dantigua{position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1);
    background:linear-gradient(90deg,#f59e0b,#f43f5e,#c026d3); color:#0a0a0f}
  .dantigua .shine{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    background-size:200% 100%; animation:shine 3s linear infinite}
  @keyframes shine{0%{background-position:-200% 0}100%{background-position:200% 0}}
  .marquee{display:flex; white-space:nowrap; padding:10px 0; font-weight:600; font-size:14px}
  .marquee > div{display:flex; flex-shrink:0; animation:marquee 30s linear infinite}
  .marquee span.item{margin:0 32px; display:inline-flex; align-items:center; gap:12px}
  @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

  header{border-bottom:1px solid var(--border); backdrop-filter:blur(6px)}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
  .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em}
  .logo .mark{width:36px;height:36px;border-radius:10px;
    background:linear-gradient(135deg,#e879f9,#6366f1);
    display:grid;place-items:center; box-shadow:0 10px 30px -10px rgba(232,121,249,.6)}
  .logo .mark::before{content:"";width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:inset 0 0 0 3px transparent}
  .logo em{color:#e879f9; font-style:normal}
  .btn-x{display:inline-flex;align-items:center;gap:8px; padding:9px 16px; border-radius:9999px;
    border:1px solid var(--border); color:#d4d4d8; font-size:14px; transition:.2s}
  .btn-x:hover{border-color:rgba(232,121,249,.5); color:#fff}

  .hero{text-align:center; padding:72px 0 40px}
  .badge{display:inline-flex; align-items:center; gap:8px; padding:6px 16px;
    border-radius:9999px; border:1px solid rgba(232,121,249,.3); background:rgba(232,121,249,.1);
    color:#f0abfc; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.2em;
    animation:floatIn .9s cubic-bezier(.2,.8,.2,1) both}
  .badge .dot{width:6px;height:6px;border-radius:50%;background:#e879f9;animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  h1{font-size:clamp(40px,7vw,80px); font-weight:800; letter-spacing:-.03em; line-height:1.05;
     margin:24px 0 0; animation:floatIn .9s cubic-bezier(.2,.8,.2,1) .15s both}
  .grad{background:linear-gradient(90deg,#e879f9,#f472b6,#fcd34d);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    background-size:200% 200%; animation:gradientX 6s ease infinite}
  @keyframes gradientX{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  @keyframes floatIn{0%{opacity:0;transform:translateY(30px) scale(.96);filter:blur(8px)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
  .lead{max-width:640px; margin:24px auto 0; color:#d4d4d8; font-size:18px;
    animation:floatIn .9s cubic-bezier(.2,.8,.2,1) .3s both}

  

  .thumb{position:relative; aspect-ratio:16/9; overflow:hidden}
  .thumb.big{
	  
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#000;
}
.thumb.big video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
  .thumb::after{
    display:none;
}
.thumb.big iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}
  .play span{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.96);
    display:grid;place-items:center; box-shadow:0 30px 60px -10px rgba(0,0,0,.5); transition:.2s}
  .play span::before{content:""; width:0; height:0; margin-left:6px;
    border-left:26px solid #000; border-top:16px solid transparent; border-bottom:16px solid transparent}
  .featured:hover .play span, .card:hover .play span{transform:scale(1.1)}
  .live{position:absolute; top:16px; left:16px; z-index:2;
    display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:9999px;
    background:#e11d48; color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.2em;
    animation:livePulse 1.8s ease-out infinite}
  .live .d{width:8px;height:8px;border-radius:50%;background:#fff}
  @keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,.6)}50%{box-shadow:0 0 0 10px rgba(244,63,94,0)}}
  .featured .meta{padding:32px; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
  .tag{font-size:11px; text-transform:uppercase; letter-spacing:.2em; font-weight:700; color:#fcd34d}
  .featured h2{margin:8px 0 8px; font-size:clamp(24px,3vw,32px); letter-spacing:-.02em}
  .featured p{margin:0; color:#d4d4d8; max-width:640px}

  section.block{padding:0 0 80px}
  .block-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:16px; flex-wrap:wrap}
  .block-head h2{margin:0; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em}
  .block-head p{margin:6px 0 0; color:var(--muted); font-size:14px}

  .grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .card{border:1px solid rgba(255,255,255,.06); border-radius:20px; overflow:hidden;
    background:var(--panel); transition:.2s; display:flex; flex-direction:column}
  .card:hover{border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.05); transform:translateY(-2px)}
  .card .thumb .year{position:absolute; top:12px; left:12px; z-index:2;
    background:rgba(0,0,0,.5); backdrop-filter:blur(6px); padding:4px 10px; border-radius:9999px;
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.15em}
  .card .body{padding:20px}
  .card .body .tag{color:#e879f9}
  .card h3{margin:8px 0 8px; font-size:20px; letter-spacing:-.01em}
  .card .body p{margin:0; color:var(--muted); font-size:14px}

  .share{margin-top:16px; position:relative; display:inline-block}
  .share-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:9999px;
    border:1px solid var(--border); background:rgba(255,255,255,.05); color:#fff; font-size:13px;
    font-weight:600; cursor:pointer; transition:.2s}
  .share-btn:hover{border-color:rgba(232,121,249,.5); background:rgba(255,255,255,.1)}
  .share-btn::before{content:"↗"; font-weight:700}
  .share-menu{position:absolute; right:0; margin-top:8px; width:220px; z-index:20;
    border:1px solid var(--border); background:rgba(23,23,28,.95); backdrop-filter:blur(10px);
    border-radius:14px; padding:6px; box-shadow:0 30px 60px -10px rgba(0,0,0,.5); display:none}
  .share.open .share-menu{display:block}
  .share-menu a, .share-menu button{display:flex; width:100%; align-items:center; gap:10px;
    padding:10px 12px; border-radius:10px; color:#e4e4e7; font-size:14px; border:0; background:none;
    text-align:left; cursor:pointer}
  .share-menu a:hover, .share-menu button:hover{background:rgba(255,255,255,.08)}
  .dot-color{width:8px;height:8px;border-radius:2px}

  .ads{display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
 .ad{
    position:relative;
    aspect-ratio:1/1;
    border-radius:20px;
    overflow:hidden;
    padding:0;
    display:block;
}

.ad img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
  .ad .bg{position:absolute; inset:0; z-index:0}
  .ad:nth-child(1) .bg{background:linear-gradient(135deg,#c026d3,#7c3aed,#4338ca)}
  .ad:nth-child(2) .bg{background:linear-gradient(135deg,#f59e0b,#ea580c,#e11d48)}
  .ad:nth-child(3) .bg{background:linear-gradient(135deg,#34d399,#14b8a6,#06b6d4)}
  .ad:nth-child(4) .bg{background:linear-gradient(135deg,#fcd34d,#f97316,#f43f5e)}
  .ad .pill{position:relative; display:inline-flex; padding:4px 12px; border-radius:9999px;
    border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; align-self:flex-start}
  .ad .info{position:relative}
  .ad .info small{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.2em; color:rgba(255,255,255,.7)}
  .ad .info strong{display:block; margin-top:4px; font-size:18px; letter-spacing:-.01em}
  .ad .info em{display:inline-block; margin-top:12px; font-style:normal; font-size:12px; font-weight:600; color:#f0abfc}
  .ad:hover .info em{color:#fff}
  .ad .sh{position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    background-size:200% 100%; animation:shine 3s linear infinite}

  footer{border-top:1px solid var(--border); padding:32px 0; margin-top:40px}
  .foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    color:var(--muted); font-size:14px}
  .foot a{color:#d4d4d8; display:inline-flex; align-items:center; gap:8px; transition:.2s}
  .foot a:hover{color:#e879f9}
.share-menu.show{
    display:block;
}

.share-menu a{
    text-decoration:none;
}

.share-menu button{
    font-family:inherit;
}