:root {
  --deep:    #0D1B2A;
  --navy:    #112240;
  --gold:    #F4C842;
  --amber:   #FF9F43;
  --rose:    #FF6B9D;
  --teal:    #43E8D8;
  --soft:    #E8F0FE;
  --coral:   #FF7C6E;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Tajawal', sans-serif;
  background: var(--deep);
  color: var(--soft);
  overflow-x: hidden;
}

/* ─── STARS BACKGROUND ────────────────────────────────── */
.stars-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle var(--dur, 3s) ease-in-out infinite alternate;
  opacity: var(--op, 0.4);
}
@keyframes twinkle {
  from { opacity: var(--op, 0.2); transform: scale(1); }
  to   { opacity: calc(var(--op, 0.4) * 2.5); transform: scale(1.4); }
}


/* ─── HERO ────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 4rem 6vw 3rem;
  overflow: hidden;
}

/* glow orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: pulse 7s ease-in-out infinite alternate;
}
.orb-1 { width: 500px; height: 500px; background: rgba(244,200,66,.12); top: -100px; right: -80px; animation-delay: 0s; }
.orb-2 { width: 360px; height: 360px; background: rgba(67,232,216,.08); bottom: -60px; left: -40px; animation-delay: 2s; }
@keyframes pulse {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.15); opacity: 1; }
}

/* ─── TEXT ────────────────────────────────────────────── */
.hero-text { position: relative; z-index: 2; }

.yt-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,0,0,.12);
  border: 1.5px solid rgba(255,0,0,.35);
  color: #ff6b6b;
  font-size: .82rem;
  font-weight: 700;
  padding: .3rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.4rem;
  animation: fadeSlide .5s ease both;
}
.yt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF0000;
  animation: blink 1.2s ease infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; } 50% { opacity: 0.2; }
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1 {
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  animation: fadeSlide .55s ease .1s both;
}
h1 .gold { color: var(--gold); }
h1 .rose { color: var(--rose); }

.hero-desc {
  font-size: clamp(.95rem, 1.7vw, 1.12rem);
  line-height: 1.9;
  color: rgba(232,240,254,.7);
  max-width: 480px;
  margin-bottom: 2rem;
  animation: fadeSlide .55s ease .2s both;
}

.cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeSlide .55s ease .3s both;
}
.btn-yt {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: #FF0000;
  color: #fff;
  text-decoration: none;
  font-family: 'Tajawal', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  box-shadow: 0 8px 28px rgba(255,0,0,.4);
  transition: transform .2s, box-shadow .2s;
}
.btn-yt:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(255,0,0,.55); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  font-size: .92rem;
  border: 1.5px solid rgba(67,232,216,.3);
  padding: .7rem 1.4rem;
  border-radius: 50px;
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(67,232,216,.08); border-color: var(--teal); }

.stats-row {
  display: flex;
  gap: 2rem;
  margin-top: 2.2rem;
  animation: fadeSlide .55s ease .4s both;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
}
.stat-label { font-size: .75rem; color: rgba(232,240,254,.5); font-weight: 600; margin-top: .2rem; }

/* ─── VIDEO GRID MOCKUP ───────────────────────────────── */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  animation: fadeSlide .7s ease .15s both;
}

.shorts-stack {
  position: relative;
  width: 100%;
  max-width: 380px;
}

/* background cards */
.card-shadow {
  position: absolute;
  width: 58%;
  aspect-ratio: 9/16;
  border-radius: 22px;
  top: 18px;
}
.card-shadow-1 {
  background: rgba(244,200,66,.12);
  border: 1px solid rgba(244,200,66,.2);
  right: -18px;
  transform: rotate(6deg);
  background-image: url('images/thumbnail1.jpg');
  background-position: center center;
  background-size: cover;
  transition: transform .3s, background-image .3s;
}
.card-shadow-2 {
  background: rgba(255,107,157,.1);
  border: 1px solid rgba(255,107,157,.2);
  left: -18px;
  transform: rotate(-5deg);
  background-image: url('images/thumbnail2.jpg');
  background-position: center center;
  background-size: cover;
  transition: transform .3s, background-image .3s;
}

.main-card {
  position: relative;
  width: 62%;
  aspect-ratio: 9/16;
  margin: 0 auto;
  border-radius: 22px;
  background: linear-gradient(160deg, #1a2f4a 0%, #0d1b2a 100%);
  border: 1.5px solid rgba(244,200,66,.25);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s, background-image .3s;

  background-image: url('images/thumbnail3.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.main-card:hover { transform: scale(1.03); }

.card-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.2rem;
}

.card-letter {
  font-family: 'Rakkas', cursive;
  font-size: 4.5rem;
  color: var(--gold);
  text-shadow: 0 0 40px rgba(244,200,66,.6), 0 4px 12px rgba(0,0,0,.4);
  animation: glowPulse 2.5s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  from { text-shadow: 0 0 30px rgba(244,200,66,.4); }
  to   { text-shadow: 0 0 60px rgba(244,200,66,.9), 0 0 100px rgba(255,159,67,.4); }
}

.card-word {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(232,240,254,.8);
  letter-spacing: .04em;
}

/* .play-button {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-top: .4rem;
  transition: background .2s, transform .2s;
}
.main-card:hover .play-button {
  background: var(--gold);
  border-color: var(--gold);
  transform: scale(1.1);
} */

/* progress line at bottom */
.card-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.1);
}
.card-progress-fill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  border-radius: 0 2px 2px 0;
  animation: progressAnim 3s ease-in-out infinite alternate;
}
@keyframes progressAnim {
  from { width: 20%; }
  to   { width: 75%; }
}

/* top bar */
.card-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: .7rem .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
}
.card-tag {
  background: #FF0000;
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 4px;
}
.card-time {
  font-size: .65rem;
  color: rgba(255,255,255,.6);
}

/* bottom info */
.card-bottom {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  padding: 0 .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-views {
  font-size: .65rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* floating mini cards outside stack */
.mini-float {
  position: absolute;
  background: rgba(17,34,64,.9);
  border: 1px solid rgba(244,200,66,.2);
  border-radius: 14px;
  padding: .55rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  animation: floatY 4s ease-in-out infinite alternate;
  white-space: nowrap;
}
.mf-right { top: 10%; right: -30px; color: var(--teal); animation-delay: 0s; }
.mf-left  { bottom: 15%; left: -30px; color: var(--rose); animation-delay: 1.5s; }
@keyframes floatY {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

/* ─── CATEGORIES STRIP ────────────────────────────────── */
.categories {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem 6vw 3.5rem;
}
.cat-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(232,240,254,.8);
  font-size: .85rem;
  font-weight: 700;
  padding: .55rem 1.2rem;
  border-radius: 50px;
  transition: background .2s, border-color .2s, color .2s;
  cursor: pointer;
}
.cat-chip:hover {
  background: rgba(244,200,66,.1);
  border-color: rgba(244,200,66,.4);
  color: var(--gold);
}
.cat-chip.active {
  background: rgba(244,200,66,.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 3rem 5vw 2rem;
    min-height: auto;
  }
  .hero-desc { margin: 0 auto 2rem; }
  .cta-group, .stats-row { justify-content: center; }
  .hero-visual { margin-top: 2.5rem; }
  .shorts-stack { max-width: 280px; }
  .mf-right { right: -10px; }
  .mf-left  { left: -10px; }
}
@media (max-width: 500px) {
  nav { padding: 1rem 1.2rem; }
  .nav-links { display: none; }
}
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--coral), #ff4f7b);
  color: #fff;
  text-decoration: none;
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  padding: .8rem 2rem;
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(255,79,123,.35);
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(255,79,123,.45); }