/* ═══ TOKENS ═══ */
:root {
  --bg: #fdf6ff; --sf: #f2e8ff; --card: #fff;
  --bdr: #e2d0ff; --text: #35235a; --text2: #5c4880; --muted: #9880b5;
  --pink: #ff8fab; --pinklt: #ffdde8;
  --pur: #b56bff; --purlt: #ecdeff; --purdk: #8e3fef;
  --blult: #dceeff; --grlt: #d4f7ee;
  --shd: rgba(140,80,255,.13);
  --sp: cubic-bezier(.34,1.56,.64,1);
  --eo: cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] {
  --bg: #12091f; --sf: #1e1233; --card: #1a0f2e;
  --bdr: #3a2560; --text: #e8d8ff; --text2: #c4a8f0; --muted: #7a62a8;
  --pinklt: #3d1a2a; --purlt: #2a1650; --blult: #0f2240; --grlt: #0d2820;
  --shd: rgba(100,50,200,.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
  transition: background .35s, color .35s;
}

/* ═══ BLOBS ═══ */
.bg-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .25;
  will-change: transform; animation: bdrift var(--t,14s) ease-in-out infinite alternate; }
.b1 { width: clamp(240px,55vw,420px); height: clamp(240px,55vw,420px); background: #ffbbe6; top: -12%; left: -10%; --t: 17s; }
.b2 { width: clamp(190px,44vw,340px); height: clamp(190px,44vw,340px); background: #cbb4ff; top: 40%; right: -8%; --t: 13s; }
.b3 { width: clamp(170px,40vw,300px); height: clamp(170px,40vw,300px); background: #aae4ff; bottom: -8%; left: 24%; --t: 19s; }
.b4 { width: clamp(140px,36vw,240px); height: clamp(140px,36vw,240px); background: #b5fce2; bottom: 18%; left: -6%; --t: 11s; }
@keyframes bdrift { from { transform: translate(0,0) scale(1); } to { transform: translate(20px,16px) scale(1.07); } }

/* ═══ SPARKS ═══ */
.sparks { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sp { position: absolute; opacity: 0; font-size: var(--ss,13px);
  will-change: transform,opacity; animation: spup var(--sd,9s) var(--sdl,0s) ease-in-out infinite; }
@keyframes spup {
  0% { opacity: 0; transform: translateY(6px) scale(.4) rotate(0); }
  18% { opacity: .55; }
  82% { opacity: .15; }
  100% { opacity: 0; transform: translateY(-100px) scale(1.1) rotate(320deg); }
}

/* ═══ LAYOUT ═══ */
.page { position: relative; z-index: 1; max-width: 760px; margin: 0 auto;
  padding: clamp(14px,4vw,36px) clamp(12px,4vw,22px) clamp(48px,10vw,80px); }

/* ═══ TOP BAR ═══ */
.topbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: clamp(10px,3vw,20px); animation: popUp .5s var(--sp) both; }
.nav-home { font-family: 'Baloo 2', cursive; font-size: clamp(.85rem,2.5vw,1rem); font-weight: 800;
  background: linear-gradient(130deg,#ff6aae,#b56bff); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; }
.theme-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--sf);
  border: 2px solid var(--bdr); font-size: 1.2rem; display: flex; align-items: center;
  justify-content: center; cursor: pointer; transition: all .25s var(--sp); }
.theme-btn:hover { transform: scale(1.1) rotate(15deg); }
.theme-btn:active { transform: scale(.9); }

/* ═══ HERO ═══ */
.hero { text-align: center; margin-bottom: clamp(24px,5vw,40px); animation: popUp .6s .05s var(--sp) both; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--purlt); border: 2px solid var(--bdr); border-radius: 999px;
  padding: 5px 14px; font-size: clamp(.64rem,1.8vw,.72rem); font-weight: 800; color: var(--pur);
  margin-bottom: 12px;
}
.hero h1 {
  font-family: 'Baloo 2', cursive;
  font-size: clamp(1.4rem,5vw,2.2rem); font-weight: 800; line-height: 1.2;
  background: linear-gradient(130deg,#ff6aae,#b56bff,#5db0ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 10px;
}
.hero p { font-size: clamp(.78rem,2.2vw,.9rem); font-weight: 700; color: var(--muted); line-height: 1.7; max-width: 560px; margin: 0 auto 18px; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: 999px;
  background: linear-gradient(135deg,#ff8fab,#b56bff);
  color: #fff; font-weight: 800; font-size: clamp(.78rem,2.2vw,.88rem);
  text-decoration: none; transition: all .22s var(--sp);
  box-shadow: 0 6px 24px rgba(181,107,255,.35);
}
.hero-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(181,107,255,.45); }

/* ═══ SECTION ═══ */
.section { margin-bottom: clamp(28px,6vw,48px); animation: popUp .6s .15s var(--sp) both; }
.sec-label {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Baloo 2', cursive; font-size: clamp(.95rem,3vw,1.2rem); font-weight: 800;
  color: var(--text); margin-bottom: clamp(10px,2.5vw,16px);
}
.sec-label .icon { font-size: 1.3rem; }
.sec-desc { font-size: clamp(.72rem,2vw,.82rem); font-weight: 700; color: var(--muted);
  line-height: 1.7; margin-bottom: clamp(12px,3vw,18px); }

/* ═══ CARD ═══ */
.card {
  background: var(--card); border-radius: clamp(16px,4vw,24px);
  border: 2px solid var(--bdr); padding: clamp(16px,4vw,28px);
  box-shadow: 0 12px 48px var(--shd);
  transition: background .35s, border-color .35s;
}

/* ═══ TABLES ═══ */
.tbl-wrap { overflow-x: auto; border-radius: 16px; border: 2px solid var(--bdr); }
table {
  width: 100%; border-collapse: collapse;
  font-size: clamp(.68rem,1.9vw,.82rem); font-weight: 700;
  background: var(--card);
}
thead tr { background: linear-gradient(135deg,#ff8fab22,#b56bff22); }
thead th {
  padding: clamp(10px,2.5vw,14px) clamp(10px,2.5vw,16px);
  text-align: left; font-family: 'Baloo 2', cursive;
  font-size: clamp(.7rem,2vw,.84rem); font-weight: 800; color: var(--pur);
  white-space: nowrap; border-bottom: 2px solid var(--bdr);
}
tbody tr { border-bottom: 1.5px solid var(--bdr); transition: background .15s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--purlt); }
tbody td { padding: clamp(9px,2.2vw,13px) clamp(10px,2.5vw,16px); color: var(--text2); line-height: 1.5; }
tbody td:first-child { font-weight: 800; color: var(--text); }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: clamp(.6rem,1.6vw,.68rem); font-weight: 800; white-space: nowrap;
}
.badge-green { background: var(--grlt); color: #1a7a55; }
.badge-pink { background: var(--pinklt); color: #a3264a; }
.badge-blue { background: var(--blult); color: #1a5a8e; }
.badge-pur { background: var(--purlt); color: var(--purdk); }
.badge-warn { background: #fff3e0; color: #b25000; }

/* ═══ HIGHLIGHT ROW ═══ */
.tbl-highlight td { background: linear-gradient(90deg,var(--purlt),transparent) !important; }
.tbl-highlight td:first-child { border-left: 3px solid var(--pur); }

/* ═══ TABLE FOOTER NOTE ═══ */
.tbl-note {
  margin-top: 8px; font-size: clamp(.62rem,1.7vw,.7rem);
  font-weight: 700; color: var(--muted); line-height: 1.6;
}

/* ═══ STAT PILLS ROW ═══ */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: clamp(14px,3vw,20px); }
@media(max-width:480px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-pill {
  background: var(--sf); border: 2px solid var(--bdr); border-radius: 16px;
  padding: 14px 10px; text-align: center;
}
.stat-num {
  font-family: 'Baloo 2', cursive; font-size: clamp(1.3rem,4vw,1.8rem);
  font-weight: 800; background: linear-gradient(130deg,#ff8fab,#b56bff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: block; line-height: 1;
}
.stat-lbl { font-size: clamp(.6rem,1.6vw,.68rem); font-weight: 800; color: var(--muted); margin-top: 4px; }

/* ═══ VIDEO GRID ═══ */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.vid-card {
  background: var(--card); border: 2px solid var(--bdr); border-radius: 18px;
  overflow: hidden; transition: transform .22s var(--sp), box-shadow .22s;
  cursor: pointer;
}
.vid-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px var(--shd); }
.vid-thumb {
  position: relative; aspect-ratio: 16/9; background: var(--sf);
  overflow: hidden;
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25); transition: background .2s;
}
.vid-card:hover .vid-play { background: rgba(0,0,0,.4); }
.vid-play-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg,#ff8fab,#b56bff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .2s var(--sp);
}
.vid-card:hover .vid-play-btn { transform: scale(1.15); }
.vid-play-btn svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.vid-info { padding: 12px 14px 14px; }
.vid-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--purlt); color: var(--pur);
  font-size: clamp(.58rem,1.5vw,.66rem); font-weight: 800; margin-bottom: 6px;
}
.vid-title { font-family: 'Baloo 2', cursive; font-size: clamp(.82rem,2.3vw,.95rem);
  font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.vid-meta { font-size: clamp(.6rem,1.6vw,.68rem); font-weight: 700; color: var(--muted); }

/* ═══ VIDEO MODAL ═══ */
.vid-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(18,9,31,.82); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: 16px;
}
.vid-modal.open { display: flex; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.vid-modal-inner { position: relative; width: 100%; max-width: 720px; border-radius: 20px; overflow: hidden;
  background: #000; aspect-ratio: 16/9; }
.vid-modal iframe { width: 100%; height: 100%; border: none; display: block; }
.vid-close {
  position: absolute; top: -40px; right: 0; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,.2); border: none; cursor: pointer;
  color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.vid-close:hover { background: rgba(255,255,255,.35); }

/* ═══ CALLOUT BOX ═══ */
.callout {
  background: linear-gradient(135deg,var(--pinklt),var(--purlt));
  border: 2px solid var(--bdr); border-radius: 16px;
  padding: clamp(14px,3.5vw,20px); display: flex; gap: 14px; align-items: flex-start;
}
.callout-ico { font-size: 1.6rem; flex-shrink: 0; }
.callout-body { flex: 1; }
.callout-title { font-family: 'Baloo 2', cursive; font-size: clamp(.88rem,2.5vw,1rem);
  font-weight: 800; color: var(--text); margin-bottom: 4px; }
.callout-text { font-size: clamp(.68rem,1.9vw,.78rem); font-weight: 700;
  color: var(--text2); line-height: 1.7; }
.callout-text strong { color: var(--pur); }

/* ═══ PROGRESS BARS ═══ */
.stage-list { display: flex; flex-direction: column; gap: 12px; }
.stage-item { }
.stage-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px; }
.stage-name { font-size: clamp(.72rem,2vw,.82rem); font-weight: 800; color: var(--text); }
.stage-time { font-size: clamp(.66rem,1.8vw,.74rem); font-weight: 700; color: var(--muted); }
.stage-bar { height: 10px; border-radius: 999px; background: var(--sf);
  overflow: hidden; border: 1.5px solid var(--bdr); }
.stage-fill { height: 100%; border-radius: 999px; transition: width 1s var(--eo); }
.fill-n1 { width: 7%; background: linear-gradient(90deg,#aae4ff,#5db0ff); }
.fill-n2 { width: 45%; background: linear-gradient(90deg,#cbb4ff,#b56bff); }
.fill-n3 { width: 25%; background: linear-gradient(90deg,#ff8fab,#d94e68); }
.fill-rem { width: 23%; background: linear-gradient(90deg,#ffd166,#ff8fab); }
.stage-desc { font-size: clamp(.62rem,1.7vw,.7rem); font-weight: 700; color: var(--muted); margin-top: 3px; }

/* ═══ DIVIDER ═══ */
.divider { height: 1.5px; background: var(--bdr); margin: clamp(20px,4vw,32px) 0; }

/* ═══ FOOTER ═══ */
.site-footer { background: var(--card); border-top: 2px solid var(--bdr); margin-top: clamp(28px,6vw,48px); }
.site-footer-inner { max-width: 760px; margin: 0 auto;
  padding: clamp(20px,5vw,36px) clamp(14px,4vw,22px);
  display: flex; flex-direction: column; gap: 14px; }
.footer-logo { font-family: 'Baloo 2', cursive; font-size: clamp(1rem,3vw,1.2rem); font-weight: 800;
  background: linear-gradient(130deg,#ff6aae,#b56bff); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 4px; }
.footer-desc { font-size: clamp(.68rem,1.9vw,.76rem); font-weight: 700; color: var(--muted); line-height: 1.6; }
.footer-links { display: flex; gap: clamp(10px,3vw,20px); flex-wrap: wrap; }
.footer-links a { font-size: clamp(.68rem,1.9vw,.76rem); font-weight: 800;
  color: var(--pur); text-decoration: none; transition: opacity .18s; }
.footer-links a:hover { opacity: .7; text-decoration: underline; }
.footer-credit { font-size: clamp(.62rem,1.7vw,.7rem); font-weight: 700; color: var(--muted);
  padding-top: 12px; border-top: 1.5px solid var(--bdr); line-height: 1.8; }

/* ═══ REVEAL ═══ */
.reveal { will-change: opacity, transform; opacity: 0; transform: translateY(12px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .55s var(--eo), transform .55s var(--eo); }

@keyframes popUp { from { opacity: 0; transform: translateY(16px) scale(.93); } to { opacity: 1; transform: none; } }

/* ═══ RESPONSIVE ═══ */
@media(max-width:560px) {
  .video-grid { grid-template-columns: 1fr; }
}