/* ===================================================================
   MyBestCreators — holding page
   All platforms. One intelligent home.
   =================================================================== */

:root {
  --bg-0: #0b0424;
  --bg-1: #150733;
  --bg-2: #2a0f5c;
  --card-bg: #f4f1fb;
  --card-name: #171226;
  --badge-bg: #e9e7f1;
  --badge-fg: #7c7b93;
  --badge-border: #c7c4d8;
  --arrow-soft: #6d5bd0;
  --arrow-light: #b7a6ef;
  --arrow-dark: #5b21b6;
  --live-bg: #dff6e6;
  --live-fg: #1a9e57;
  --live-border: #7ff0a3;
  --title-grad-a: #ff7a18;
  --title-grad-b: #ff4d6d;
  --title-grad-c: #e838c9;
}

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

html, body { height: 100%; }

body {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(12px, 1.6vw, 24px) clamp(16px, 5vw, 90px) clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(120, 60, 200, .40) 0%, rgba(60, 24, 120, .18) 38%, rgba(11, 4, 36, 0) 70%),
    radial-gradient(80% 60% at 50% 42%, rgba(90, 40, 170, .35), transparent 60%),
    linear-gradient(180deg, #120630 0%, #1a0940 45%, #0d0526 100%);
  isolation: isolate;
}

/* ===================== Background decoration ===================== */
.bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }

.glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.glow--center { width: 60vw; height: 40vw; left: 20vw; top: 8vw; background: radial-gradient(circle, rgba(126,58,205,.5), transparent 70%); }
.glow--tl { width: 30vw; height: 30vw; left: -6vw; top: 2vw; background: radial-gradient(circle, rgba(190,60,220,.35), transparent 70%); }
.glow--br { width: 34vw; height: 34vw; right: -8vw; bottom: -6vw; background: radial-gradient(circle, rgba(80,60,220,.30), transparent 70%); }

.prop { position: absolute; opacity: .9; filter: drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
.prop--insta { left: 3vw; top: 10vh; padding: 14px; border-radius: 20px;
  background: linear-gradient(145deg, rgba(214,41,118,.22), rgba(79,91,213,.18));
  box-shadow: 0 0 60px rgba(214,41,118,.35), inset 0 0 20px rgba(255,255,255,.08); }
.prop--x { left: 15vw; top: 33vh; width: 66px; height: 66px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(60,40,120,.5), rgba(30,18,70,.5));
  box-shadow: inset 0 0 16px rgba(255,255,255,.06); }
.x-mark { font-size: 30px; color: #cfc6f5; }
.prop--tube { right: 6vw; top: 26vh; padding: 12px; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,60,60,.20), rgba(120,20,20,.10));
  box-shadow: 0 0 60px rgba(255,40,40,.35); }
.prop--plane { right: 8vw; top: 12vh; font-size: 42px; color: #a78bfa; transform: rotate(8deg);
  filter: drop-shadow(0 0 18px rgba(150,110,255,.6)); }
.prop--emoji { right: 5vw; bottom: 22vh; font-size: 44px;
  filter: drop-shadow(0 0 16px rgba(180,120,255,.5)); }

.spark { position: absolute; color: #ffd27a; font-size: 14px; filter: drop-shadow(0 0 8px rgba(255,200,120,.8)); }
.spark--1 { left: 22vw; top: 16vh; font-size: 20px; color:#fff; }
.spark--2 { left: 12vw; top: 26vh; }
.spark--3 { right: 26vw; top: 12vh; font-size: 18px; }
.spark--4 { left: 40vw; top: 8vh; font-size: 12px; }
.spark--5 { right: 16vw; bottom: 30vh; color:#ff9ecb; }

.dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }

/* ---------- subtle background motion ---------- */
@keyframes floatY   { 0%,100% { transform: translateY(0); }            50% { transform: translateY(-10px); } }
@keyframes floatYr  { 0%,100% { transform: translateY(0) rotate(0);}   50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes twinkle  { 0%,100% { opacity: .25; transform: scale(.8); }  50% { opacity: 1; transform: scale(1.18); } }
@keyframes breathe  { 0%,100% { opacity: .48; transform: scale(1); }   50% { opacity: .72; transform: scale(1.07); } }
@keyframes drift    { 0%,100% { transform: translate(0,0); }           50% { transform: translate(18px,-12px); } }
@keyframes planefly { 0%,100% { transform: rotate(8deg) translate(0,0); } 50% { transform: rotate(4deg) translate(-10px,-8px); } }
@keyframes dashflow { to { stroke-dashoffset: -140; } }

.glow--center { animation: breathe 9s ease-in-out infinite; }
.glow--tl     { animation: drift 16s ease-in-out infinite; }
.glow--br     { animation: drift 20s ease-in-out infinite reverse; }

.prop--insta  { animation: floatY  6.5s ease-in-out infinite; }
.prop--x      { animation: floatYr 8s   ease-in-out infinite; }
.prop--tube   { animation: floatY  7.5s ease-in-out infinite .6s; }
.prop--plane  { animation: planefly 7s  ease-in-out infinite; }
.prop--emoji  { animation: floatYr 5.5s ease-in-out infinite .3s; }

.spark { animation: twinkle 4s ease-in-out infinite; }
.spark--1 { animation-duration: 3.2s; animation-delay: .0s; }
.spark--2 { animation-duration: 4.6s; animation-delay: .8s; }
.spark--3 { animation-duration: 3.8s; animation-delay: 1.4s; }
.spark--4 { animation-duration: 5.2s; animation-delay: .4s; }
.spark--5 { animation-duration: 4.2s; animation-delay: 1.1s; }

.dots path { animation: dashflow 5s linear infinite; }
.dots path:last-child { animation-duration: 7s; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .glow, .prop, .spark, .dots path { animation: none !important; }
}

/* ===================== Top bar / logo ===================== */
.topbar { position: relative; z-index: 2; }
.logo { display: inline-flex; text-decoration: none;
  background: #fff; padding: 11px 15px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.logo__img { height: 26px; width: auto; display: block; }

/* ===================== Hero ===================== */
.hero { position: relative; z-index: 2; text-align: center; margin-top: clamp(6px, 1.4vw, 16px); }

.pill { display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 22px; border-radius: 999px;
  background: rgba(20, 10, 48, .55); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  font-size: clamp(10px, 1vw, 13px); font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: #e9e4ff; position: relative; }
.pill__rule { width: 26px; height: 1px; background: rgba(255,255,255,.5); }
.pill__spark { position: absolute; right: -26px; top: -12px; color: #fff; font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.8)); }

.title { margin-top: clamp(10px, 1.4vw, 18px);
  font-family: "Baloo 2", "Poppins", sans-serif; font-weight: 800; line-height: 1.0;
  font-size: clamp(38px, 6vw, 78px); letter-spacing: .5px; }
.title__line1 { display: block; color: #fff; }
.title__line2 { display: inline-block; position: relative; margin-top: 4px;
  background: linear-gradient(92deg, var(--title-grad-a) 0%, var(--title-grad-b) 45%, var(--title-grad-c) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.title__underline { position: absolute; left: 6%; bottom: -.12em; width: 62%; height: .16em; }

/* ===================== Grid of tools ===================== */
.grid {
  position: relative; z-index: 2;
  margin: clamp(22px, 3.4vw, 40px) auto 0;
  width: 100%; max-width: 920px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

.card {
  position: relative; display: block; text-decoration: none;
  background: var(--card-bg); border-radius: 20px; padding: 20px 20px 22px;
  min-height: 148px;
  box-shadow: 0 18px 40px rgba(8, 3, 30, .45);
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card--soon { cursor: default; }

/* every card lifts on hover and picks up the green live-outline + glow */
.card:hover {
  transform: translateY(-6px);
  border-color: var(--live-border);
  box-shadow: 0 0 0 4px rgba(124, 240, 155, .26), 0 26px 56px rgba(8, 3, 30, .55);
}
.card:hover .card__arrow { transform: translateX(3px); }
.card__icon svg { transition: transform .2s ease; }
.card:hover .card__icon svg { transform: scale(1.06); }
.card:hover .badge { border-color: #b3afca; }
/* non-live arrows: light purple by default, deep purple on hover */
.card--soon:hover .card__arrow { background: var(--arrow-dark); }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card__icon { display: inline-flex; }
.card__icon svg { display: block; border-radius: 12px; }

.badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--badge-fg); background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap; margin-top: 4px;
}
.badge--live { color: var(--live-fg); background: var(--live-bg);
  display: inline-flex; align-items: center; gap: 6px; }
.badge--live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live-fg);
  box-shadow: 0 0 0 3px rgba(26,158,87,.18); }

.card__name { margin-top: 16px; font-family: "Baloo 2", sans-serif; font-weight: 700;
  font-size: 21px; color: var(--card-name); }

.card__arrow {
  position: absolute; right: 18px; bottom: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--arrow-light); color: #fff;
  box-shadow: 0 4px 12px rgba(60, 40, 120, .22);
  transition: transform .18s ease, background .18s ease;
}
.card__arrow--live { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff;
  box-shadow: 0 6px 16px rgba(99,52,213,.45); }

/* Live card: permanent green outline + glow (kept on hover via the generic .card:hover rule) */
.card--live { background: #fff; border-color: var(--live-border);
  box-shadow: 0 0 0 4px rgba(124, 240, 155, .20), 0 20px 46px rgba(8, 3, 30, .5); }
/* live arrow stays the filled purple gradient even on hover */
.card--live:hover .card__arrow--live { background: linear-gradient(135deg, #7c3aed, #4f46e5); }

/* ===================== Responsive ===================== */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; gap: 16px; }
}
@media (max-width: 460px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { min-height: 130px; padding: 16px; }
  .card__name { font-size: 18px; }
  .prop, .spark { display: none; }
}