:root{
  --bg:#07080b; --panel:#0e1016; --text:#e7f1ff; --muted:#8ea2c7; --border:#1b2233;
  --brand:#6d5efc; --brand2:#18e1ff;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(109,94,252,.12), transparent),
    radial-gradient(900px 500px at 110% 10%, rgba(24,225,255,.10), transparent),
    var(--bg);
  overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; opacity:.35;
  background-image:
    linear-gradient(transparent 31px, rgba(24,225,255,.06) 32px),
    linear-gradient(90deg, transparent 31px, rgba(109,94,252,.06) 32px);
  background-size:32px 32px; animation:drift 20s linear infinite;
  mask-image: radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,.9), transparent 70%);
}
@keyframes drift{to{transform:translateY(32px)}}

/* NAVBAR */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:14px 20px; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(160%) blur(8px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px}
.brand-mark{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:900;
  background:conic-gradient(from 180deg, var(--brand), var(--brand2));
}
.nav-actions{display:flex; align-items:center; gap:.6rem}

/* BUTTONS */
.btn{
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  padding:10px 14px; border-radius:12px; cursor:pointer; transition:box-shadow .2s, transform .1s
}
.btn:hover{box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 50%, transparent)}
.btn.primary{border:none; background:linear-gradient(135deg, var(--brand), var(--brand2)); font-weight:700}
.btn.glow:hover{box-shadow:0 0 18px rgba(24,225,255,.35), 0 0 28px rgba(109,94,252,.25)}

/* HERO */
.hero{padding:56px 20px 24px; text-align:center}
.hero-title{font-size:clamp(34px,7.5vw,80px); line-height:1.05; font-weight:900; letter-spacing:.4px; margin:0 0 10px}
.grad-neon{
  /* neon gradient + stronger white sheen */
  background:
    linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%),
    radial-gradient(120% 200% at 50% 38%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 0 4px rgba(255,255,255,.25),
    0 0 10px rgba(255,255,255,.18),
    0 0 10px rgba(109,94,252,.16),
    0 0 18px rgba(24,225,255,.14);
}
.sub{color:var(--muted); margin:0}

/* SEARCH + CHIPS */
.search-wrap{margin:18px auto 10px; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.input{
  width:min(760px, 92vw); padding:16px 16px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg, #0c0f15, #0a0c12); color:var(--text); outline:none
}
.chips{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:10px}
.chip{
  background: rgba(22,26,39,.7); border:1px solid var(--border); color:var(--text);
  padding:6px 10px; border-radius:999px; cursor:pointer; font-size:.9rem
}
.chip.active{outline:2px solid color-mix(in oklab, var(--brand) 60%, var(--panel));}

/* GRID + CARDS */
.container{padding:26px 20px 80px}
.grid{display:grid; gap:18px; grid-template-columns: repeat(1, minmax(0, 1fr)); max-width:1200px; margin:0 auto}
@media (min-width:640px){.grid{grid-template-columns: repeat(2, minmax(0, 1fr))}}
@media (min-width:1024px){.grid{grid-template-columns: repeat(3, minmax(0, 1fr))}}

.card{
  background:linear-gradient(180deg, rgba(15,17,22,.86), rgba(13,15,20,.92));
  border:1px solid var(--border); border-radius:18px; overflow:hidden; position:relative;
  transition: transform .12s ease, box-shadow .2s ease;
}
.card::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: 0 0 0 1px rgba(109,94,252,.18), 0 0 28px rgba(24,225,255,.08) inset;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.45) }

.thumb{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; color:#fff;
  background:
    radial-gradient(120% 120% at 20% 0%, color-mix(in oklab, var(--brand) 70%, #000), transparent),
    radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--brand2) 70%, #000), transparent);
}

/* Equal “tab” size; labels slightly bigger, pure white, no glow */
.thumb-label{
  white-space:pre-line; line-height:1.12; color:#fff; text-shadow:none;
  font-weight:900; letter-spacing:.35px; font-size:clamp(24px,3.2vw,36px);
}

.cnt{padding:14px; display:flex; flex-direction:column; gap:.55rem}
.cnt h3{margin:0 0 6px; font-size:1.05rem}
.cnt p{margin:0; color:var(--muted)}
.tags{display:flex; gap:.45rem; flex-wrap:wrap; margin-top:6px}
.tag{font-size:.8rem; color:var(--muted); border:1px dashed var(--border); padding:4px 8px; border-radius:999px}
.row{display:flex; gap:.6rem; margin-top:10px; flex-wrap:wrap}

/* MODAL */
.modal{position:fixed; inset:0; display:none; place-items:center; z-index:60}
.modal.open{display:grid}
.scrim{position:absolute; inset:0; backdrop-filter: blur(8px) brightness(.6)}
.dialog{
  position:relative; width:min(1100px, 96vw); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background: linear-gradient(180deg, rgba(16,18,26,.95), rgba(12,14,22,.98));
}
.dialog-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:10px 14px; border-bottom:1px solid var(--border)}
.frame{position:relative; height:min(72vh, 680px)}
iframe{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; border-radius:0}
.fb{position:absolute; inset:0; display:none; place-items:center; text-align:center; padding:20px; color:var(--muted)}
.fb.show{display:grid}