:root {
  --purple: #6B4FE0;
  --purple-deep: #3D27A8;
  --purple-darker: #2A1A7A;
  --purple-light: #9B85F0;
  --yellow: #FFD52D;
  --yellow-soft: #FFE173;
  --yellow-dark: #C9A700;
  --pink: #F8A6B8;
  --pink-soft: #FDD3DC;
  --red: #E8556B;
  --white: #FFFFFF;
}

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

html, body {
  min-height: 100%;
  font-family: 'Noto Sans SC', 'Baloo 2', system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--white);
  background: radial-gradient(ellipse at top, #7A60E8 0%, var(--purple-deep) 55%, var(--purple-darker) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Soft color glows for depth ---------- */
.bg-glows {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 420px at 12% 18%, rgba(248, 166, 184, 0.28), transparent 70%),
    radial-gradient(520px 520px at 88% 22%, rgba(255, 213, 45, 0.18), transparent 70%),
    radial-gradient(620px 620px at 78% 82%, rgba(155, 133, 240, 0.35), transparent 70%),
    radial-gradient(480px 480px at 8% 78%, rgba(232, 85, 107, 0.18), transparent 70%);
  filter: blur(2px);
  animation: glowDrift 18s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.2%, 1%, 0) scale(1.04); }
  100% { transform: translate3d(1.4%, -0.8%, 0) scale(1.02); }
}

/* ---------- Stars ---------- */
.bg-stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--yellow) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 28%, var(--white) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 35% 78%, var(--yellow) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 72%, var(--white) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 60% 12%, var(--yellow-soft) 50%, transparent 51%),
    radial-gradient(2px 2px at 22% 62%, var(--pink) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 5% 45%, var(--white) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 92% 50%, var(--yellow) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 36%, var(--white) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 68% 58%, var(--pink-soft) 50%, transparent 51%),
    radial-gradient(2px 2px at 30% 30%, var(--yellow-soft) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 95% 88%, var(--white) 50%, transparent 51%),
    radial-gradient(2px 2px at 16% 88%, var(--yellow) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 72%, var(--white) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: 0.7;
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.45; }
}

/* ---------- Decorative 4-point sparkles ---------- */
.bg-sparkles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sparkle {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--yellow);
  filter: drop-shadow(0 0 8px rgba(255, 213, 45, 0.85));
  clip-path: polygon(
    50% 0%, 55% 45%, 100% 50%, 55% 55%,
    50% 100%, 45% 55%, 0% 50%, 45% 45%
  );
  animation: sparklePulse 3s ease-in-out infinite;
}
.sparkle-a { top: 10%;  left: 8%;  width: 26px; height: 26px; animation-delay: 0s; }
.sparkle-b { top: 16%;  left: 90%; width: 18px; height: 18px; animation-delay: 0.6s; background: var(--white); filter: drop-shadow(0 0 8px rgba(255,255,255,0.85)); }
.sparkle-c { top: 44%;  left: 4%;  width: 16px; height: 16px; animation-delay: 1.2s; background: var(--pink-soft); filter: drop-shadow(0 0 8px rgba(248, 166, 184, 0.85)); }
.sparkle-d { top: 56%;  left: 94%; width: 22px; height: 22px; animation-delay: 1.8s; }
.sparkle-e { top: 80%;  left: 12%; width: 20px; height: 20px; animation-delay: 0.9s; background: var(--yellow-soft); }
.sparkle-f { top: 88%;  left: 82%; width: 18px; height: 18px; animation-delay: 2.4s; background: var(--white); filter: drop-shadow(0 0 8px rgba(255,255,255,0.85)); }
@keyframes sparklePulse {
  0%, 100% { transform: scale(0.8) rotate(0deg);   opacity: 0.55; }
  50%      { transform: scale(1.2) rotate(45deg);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glows, .bg-stars, .sparkle { animation: none; }
}

.page {
  position: relative; z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 6px;
  font-weight: 800;
  color: var(--yellow-soft);
  background: rgba(255, 213, 45, 0.12);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 213, 45, 0.35);
}

.hero-title {
  font-size: clamp(48px, 12vw, 96px);
  color: var(--yellow);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.1;
  text-align: center;
  text-shadow:
    -3px -3px 0 var(--purple-deep),
     3px -3px 0 var(--purple-deep),
    -3px  3px 0 var(--purple-deep),
     3px  3px 0 var(--purple-deep),
     0 8px 0 rgba(0,0,0,0.28);
  margin-top: 8px;
}

.hero-sub {
  font-size: 15px;
  letter-spacing: 5px;
  color: var(--purple-light);
  font-weight: 700;
  margin-top: 6px;
}

.hero-name {
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 1px;
  text-shadow: 0 4px 0 rgba(0,0,0,0.25);
}

/* ---------- Founder card ---------- */
.founder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.founder-photo-wrap {
  width: clamp(180px, 26vw, 240px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
  box-shadow: 0 10px 0 var(--yellow-dark), 0 18px 36px rgba(0,0,0,0.4);
}

.founder-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border: 4px solid var(--white);
  background: var(--purple-darker);
}

.founder-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 16px 44px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.1;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  margin-top: 10px;
}

.btn-main { font-size: 18px; letter-spacing: 2px; font-weight: 900; white-space: nowrap; }
.btn-sub  { font-size: 11px; letter-spacing: 4px; margin-top: 6px; opacity: 0.85; font-weight: 700; white-space: nowrap; }

.btn-primary {
  background: linear-gradient(180deg, var(--yellow-soft), var(--yellow));
  color: var(--purple-deep);
  box-shadow: 0 8px 0 var(--yellow-dark), 0 14px 30px rgba(0,0,0,0.32);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 0 var(--yellow-dark), 0 16px 30px rgba(0,0,0,0.35);
}
.btn-primary:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 var(--yellow-dark), 0 6px 12px rgba(0,0,0,0.3);
}

.btn-secondary {
  background: linear-gradient(135deg, var(--purple-light), var(--purple));
  color: var(--white);
  border: 3px solid rgba(255, 213, 45, 0.55);
  box-shadow: 0 8px 0 rgba(0,0,0,0.25), 0 14px 30px rgba(0,0,0,0.32);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--yellow);
  box-shadow: 0 10px 0 rgba(0,0,0,0.28), 0 16px 30px rgba(0,0,0,0.35);
}
.btn-secondary:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
}

/* ---------- Video ---------- */
.video-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.video-title {
  font-size: clamp(26px, 7vw, 42px);
  font-weight: 900;
  color: var(--yellow);
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 3px 0 var(--purple-deep);
  line-height: 1.25;
}

.video-cta {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--pink-soft);
  font-weight: 700;
}

.video-frame {
  width: 100%;
  max-width: 800px;
  padding: 12px;
  background: linear-gradient(135deg, var(--purple-light), var(--purple));
  border-radius: 24px;
  border: 3px solid rgba(255, 213, 45, 0.55);
  box-shadow: 0 12px 0 rgba(0,0,0,0.22), 0 24px 50px rgba(0,0,0,0.45);
}

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- CTA ---------- */
.cta-section {
  display: flex;
  justify-content: center;
}

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: 20px 16px 28px;
  color: var(--purple-light);
  font-size: 13px;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .page { gap: 40px; padding: 36px 14px 20px; }
  .btn { padding: 14px 24px; }
  .btn-main { font-size: 14px; letter-spacing: 1px; }
  .btn-sub  { font-size: 10px; letter-spacing: 3px; }
  .video-frame { padding: 8px; border-radius: 18px; }
  .hero-eyebrow { letter-spacing: 4px; padding: 5px 12px; }
}
@media (max-width: 380px) {
  .page { padding: 32px 10px 16px; }
  .btn { padding: 12px 18px; }
  .btn-main { font-size: 13px; letter-spacing: 0.5px; }
  .hero-title { letter-spacing: 2px; }
}