:root{
  --bg-top:#243C8C; --bg-bot:#2F4FB4;
  --text:#ffffff; --muted:#e6edff;
  --cyan:#21A3FF; --magenta:#FF6EC7; --gold:#FFD84D;
  --border: rgba(255,255,255,.15);
  --card: rgba(255,255,255,.12);
  --card-inner: rgba(255,255,255,.10);
  --shadow: 0 18px 40px rgba(12,20,56,.35);
}
*{box-sizing:border-box}
html{font-size:16px}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg-top),var(--bg-bot));color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
.center{text-align:center}
.mt{margin-top:18px}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(10,16,48,.55);backdrop-filter: blur(12px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;gap:12px;align-items:center;color:var(--text)}
.logo-glow img{border-radius:999px;box-shadow:0 0 0 4px rgba(33,163,255,.28)}
.brand-text strong{display:block;font-weight:900;letter-spacing:.2px;font-size:1.05rem}
.brand-text span{display:block;font-size:.82rem;color:#f3f6ff}

.hamburger{display:none;background:transparent;border:0;cursor:pointer;padding:8px;margin-left:auto}
.hamburger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px}

.nav{display:flex;gap:16px;align-items:center}
.nav a{color:#ffffff;opacity:.95;padding:10px 6px;border-radius:10px}
.nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.halo-line{height:3px;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 18px rgba(33,163,255,.6),0 0 18px rgba(255,110,199,.6)}
.halo-line.bottom{height:3px}

/* Buttons */
.btn{display:inline-block;border:1px solid var(--border);padding:12px 18px;border-radius:18px;font-weight:800}
.btn.neon{background: linear-gradient(90deg,var(--cyan),var(--magenta));color:#05132a;border:none;box-shadow:0 0 22px rgba(33,163,255,.6),0 0 32px rgba(255,110,199,.45);position:relative;overflow:hidden}
.btn.neon::after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 25%, transparent 50%);transform:skewX(-20deg);transition: transform .6s ease}
.btn.neon:hover::after{ transform: translateX(200%); }
.btn.small{padding:10px 12px;border-radius:12px;font-size:.95rem}

/* Hero */
.hero{position:relative;padding:48px 0 24px;border-bottom:1px solid var(--border)}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:18px;position:relative}
.card::before{content:"";position:absolute;inset:0;border-radius:18px;background:radial-gradient(100% 180% at 50% 0%, var(--card-inner), transparent 60%);opacity:.6;pointer-events:none}
.logo-row{display:flex;gap:12px;align-items:center}
.logo-row h1{font-size:clamp(26px,5vw,40px);line-height:1.08;margin:0}
.pulse img{border-radius:999px; box-shadow: 0 0 0 0 rgba(33,163,255,.7); animation:pulse 3s ease-in-out infinite}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(33,163,255,.55), 0 0 0 0 rgba(255,110,199,.45); }
  50%{ box-shadow: 0 0 0 18px rgba(33,163,255,.0), 0 0 0 28px rgba(255,110,199,.0); }
  100%{ box-shadow: 0 0 0 0 rgba(33,163,255,.55), 0 0 0 0 rgba(255,110,199,.45); }
}
.hero .cta-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.hero-video .video-frame{border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.25)}

/* Sections */
.section{padding:44px 0}
.section.alt{background:rgba(0,0,0,.12)}
.section-head h2{margin:0;font-size:1.4rem}
.section-head .section-lead{margin:6px 0 16px;color:#eef3ff;font-size:1rem}
.divider.glow{height:2px;margin:26px auto 0;max-width:1100px;background:linear-gradient(90deg,transparent,var(--cyan),var(--magenta),transparent);filter:drop-shadow(0 0 10px rgba(33,163,255,.6)) drop-shadow(0 0 10px rgba(255,110,199,.4))}

/* Grids */
.grid{display:grid;gap:14px}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1024px){ .grid.four{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 768px){ .grid.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .grid.four{grid-template-columns:1fr} }

.video-frame,.playlist-frame{position:relative;width:100%;padding-top:56.25%;background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.25);border:1px solid var(--border)}
.video-frame iframe,.playlist-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.card-meta{margin-top:8px}
.card-meta strong{display:block;color:#ffffff;font-size:1rem}
.card-meta span{color:#f1f6ff;font-size:.95rem}

/* Share icon under videos */
.share-row{display:flex;justify-content:flex-end; margin-top:8px;}
.share-btn{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  color:#05132a;font-size:1.05rem;font-weight:900; box-shadow:0 0 16px rgba(33,163,255,.55), 0 0 18px rgba(255,110,199,.45); position:relative;}
.share-btn:hover{filter:brightness(1.05)}
.tip{position:absolute; bottom:44px; right:0; transform:translateY(6px);
  background:rgba(10,16,48,.92); color:#fff; padding:6px 10px; border-radius:10px; font-size:.9rem;
  border:1px solid var(--border); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.35);}
.tip.show{opacity:1; transform:translateY(0);}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35));padding:22px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#ytSub{filter: drop-shadow(0 6px 10px rgba(2,6,23,.35))}

/* Sticky bottom bar */
.bottom-bar{display:none; position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(10,16,48,.9); backdrop-filter: blur(10px);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 20px rgba(0,0,0,.25);
}
.bottom-bar .bar-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:33.333%; padding:10px 6px; color:#fff; text-decoration:none; font-weight:800; font-size:.9rem;}
.bottom-bar .icon{font-size:1.1rem}
.bottom-bar .bar-btn:active{background:rgba(255,255,255,.08)}

@media (max-width: 768px){
  .header-inner{height:64px}
  .brand-text strong{font-size:1rem}
  .brand-text span{display:none}
  .hamburger{display:block}
  .nav{position:absolute; right:12px; top:64px; background:rgba(10,16,48,.95); border:1px solid var(--border); border-radius:14px; padding:10px; display:none; flex-direction:column; gap:8px; width:min(88vw,340px)}
  .nav.open{display:flex}
  .nav a{padding:12px 10px; font-size:1.05rem}
  .btn.small{font-size:1rem}
  .hero-inner{grid-template-columns:1fr; gap:14px}
  .section{padding:38px 0}
  .bottom-bar{display:flex}
  body{padding-bottom:64px}
}