:root {
  --ink: #24132f;
  --ink-soft: #6c596f;
  --pink: #ed338d;
  --pink-dark: #b81569;
  --shadow: 0 26px 72px rgba(58, 24, 64, .15);
  --shadow-soft: 0 12px 34px rgba(58, 24, 64, .09);
  --max: 1240px;
}

html { scroll-padding-top: 106px; }
body {
  font-family: 'DM Sans', Arial, sans-serif;
  background: #f9f5f8;
  color: var(--ink);
}
h1, h2, h3, .brand-mini, .btn, .mini-feature b {
  font-family: 'Outfit', 'DM Sans', Arial, sans-serif;
}
h1, h2 { letter-spacing: -.045em; }
.site-shell { background: #f9f5f8; }
.blob { opacity: .18; filter: blur(48px); }
.topbar {
  top: 20px;
  padding: 9px 10px 9px 20px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(39, 19, 49, .91);
  box-shadow: 0 12px 34px rgba(32, 12, 43, .18);
  backdrop-filter: blur(24px);
}
.brand-mini { color: #fff; font-size: 16px; }
.brand-dot { width: 32px; height: 32px; }
.nav-links a { color: rgba(255,255,255,.8); font-weight: 700; }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav-links .nav-cta {
  background: #161019;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
}
.nav-links .nav-cta:hover { background: #35223d; }
.play-link { display: inline-flex; align-items: center; gap: 9px; }
.play-link img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.nav-links .play-link { color: #fff; white-space: nowrap; }
.nav-links .play-link img { width: 19px; height: 19px; }

.hero {
  padding: 152px 24px 118px;
  background: linear-gradient(145deg, #fffaf7 0%, #fff4f9 55%, #f4ecfc 100%);
}
.hero-bg { opacity: .21; mask-image: linear-gradient(180deg, #000 38%, transparent 100%); }
.hero-bg::after {
  background: linear-gradient(90deg, #fffaf7 2%, rgba(255,250,247,.78) 52%, rgba(255,250,247,.36));
}
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(36px, 5vw, 76px); }
.logo-lockup { width: min(410px, 77%); margin: 0 0 22px -12px; filter: drop-shadow(0 14px 18px rgba(156,32,112,.13)); }
.eyebrow {
  margin-bottom: 20px;
  background: rgba(255,255,255,.86);
  border: 1px solid #f0dae6;
  color: #a5226a;
  box-shadow: none;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
}
h1 { max-width: 620px; font-size: clamp(48px, 5.6vw, 76px); line-height: .99; font-weight: 800; color: #291333; }
.hero-copy p { max-width: 540px; margin: 26px 0 30px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.58; font-weight: 500; color: #66556d; }
.actions { margin-bottom: 32px; }
.btn { min-height: 56px; padding: 14px 21px; border-radius: 999px; font-size: 15px; font-weight: 700; }
.btn-primary.play-link {
  color: #fff;
  background: #161019;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  box-shadow: 0 13px 25px rgba(35, 18, 43, .2);
}
.btn-primary.play-link:hover { background: #35223d; box-shadow: 0 17px 29px rgba(35, 18, 43, .24); }
.btn-primary.play-link img { width: 25px; height: 25px; }
.btn-secondary { background: #fff; border: 1px solid #eadbe5; box-shadow: 0 8px 25px rgba(78, 40, 74, .08); }
.btn:focus-visible, .shot:focus-visible, .nav-links a:focus-visible, .store-badge:focus-visible {
  outline: 3px solid #6f45c4;
  outline-offset: 4px;
}
.quick-points { max-width: 580px; gap: 0; }
.quick-point {
  padding: 1px 16px;
  border-radius: 0;
  border: 0;
  border-left: 1px solid #e5d4e0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  color: #44234c;
}
.quick-point:first-child { border-left: 0; padding-left: 0; }
.quick-point small { color: #847184; font-weight: 500; font-size: 12px; line-height: 1.4; }
.hero-card {
  transform: none;
  padding: 9px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 32px 78px rgba(58, 24, 64, .2);
}
.hero-card::before, .shine { display: none; }
.hero-card .video-frame { border-radius: 20px; }
.floating-pill { right: 22px; bottom: 22px; padding: 10px 14px; border-radius: 999px; font-size: 13px; background: #fff; box-shadow: 0 10px 24px rgba(34,18,43,.15); }

.section { padding: 108px 24px; }
.section-heading { align-items: end; margin-bottom: 38px; }
.section-kicker { color: #d2287f; font-size: 11px; letter-spacing: .17em; font-weight: 800; }
h2 { max-width: 700px; font-size: clamp(38px, 4.3vw, 60px); line-height: 1.04; font-weight: 700; color: #291333; }
.section-heading p { color: #75647a; font-weight: 500; font-size: 16px; line-height: 1.6; }

.feature-strip { margin-top: -46px; padding: 0 24px; }
.feature-strip .section-inner { gap: 12px; padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; }
.mini-feature {
  padding: 24px;
  min-height: 150px;
  border-radius: 20px;
  border: 1px solid #f0e4eb;
  background: #fff;
  box-shadow: 0 16px 32px rgba(65,30,65,.07);
}
.mini-feature b { color: #32173c; font-size: 18px; }
.mini-feature span { color: #76667a; font-size: 13px; font-weight: 500; line-height: 1.5; }

#watch { background: #281631; }
#watch h2 { color: #fff; }
#watch .section-kicker { color: #ff9cca; }
#watch .section-heading p { color: #d3c0d4; }
#watch .video-card { background: #3b2544; border: 1px solid #5a4161; box-shadow: 0 20px 50px rgba(10,3,16,.2); }
#watch .video-caption { background: rgba(32,17,39,.9); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
#watch .video-caption b { color: #fff; }
#watch .video-caption span { color: #d5c4d7; }

#features { background: #fffaf7; }
.feature-card {
  min-height: 270px;
  padding: 32px;
  border: 1px solid #f1e4e9;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(62,30,62,.07);
}
.feature-card::after { opacity: .11; }
.feature-icon { width: 54px; height: 54px; border-radius: 16px; box-shadow: none; }
.feature-card h3 { font-size: 24px; }
.feature-card p { font-weight: 500; color: #716176; }

.lifestyle { background: linear-gradient(155deg, #392042, #24142e); }
.lifestyle h2 { color: #fff; }
.lifestyle .section-kicker { color: #ff9bc8; }
.lifestyle .section-heading p { color: #d9c9dc; }
.lifestyle-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.lifestyle-card { margin: 0; overflow: hidden; border-radius: 22px; background: #4a3052; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 45px rgba(10,3,16,.18); }
.lifestyle-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lifestyle-card figcaption { display: flex; flex-direction: column; gap: 4px; padding: 18px 21px 22px; color: #fff; }
.lifestyle-card strong { font: 600 20px 'Outfit', sans-serif; }
.lifestyle-card span { color: #d9c9dc; font-size: 14px; }

#screenshots { background: #fffaf7; }
.shot { outline: 1px solid #eadde6; box-shadow: 0 16px 34px rgba(64,30,61,.1); }
.shot span { background: rgba(35,20,42,.9); color: #fff; box-shadow: none; font-weight: 700; }
.download-panel { background: #3a1c45 url('../img/main-menu.webp') center / cover no-repeat; border: 0; }
.download-panel::before { background: linear-gradient(90deg, rgba(36,15,44,.98), rgba(36,15,44,.89) 58%, rgba(36,15,44,.56)); }
.download-panel h2, .download-panel p { color: #fff; }
.download-panel p { font-weight: 500; }
.download-panel .section-kicker { color: #ffb4d5; }
.download-logo { width: min(280px, 72%); margin-bottom: 20px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.download-panel .store-badge { display: inline-flex; align-items: center; gap: 13px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 16px; background: #161019; color: #fff; box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.download-panel .store-badge img { width: 34px; height: 34px; }
.download-panel .store-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.download-panel .store-badge small { font-size: 11px; color: #ded6e1; }
.download-panel .store-badge strong { font: 700 22px 'Outfit', sans-serif; }
.download-panel .store-badge:hover { transform: translateY(-2px); background: #24182a; }
.download-panel .btn-secondary { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }

.footer { background: #1f1128; color: #d8c8dc; }
.footer-inner { border-top-color: rgba(255,255,255,.15); }
.footer a { color: #ff9aca; }

@media (max-width: 980px) {
  .hero { padding-top: 132px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-showcase { max-width: 800px; }
  .lifestyle-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .topbar { top: 10px; }
  .nav-links .play-link { padding: 10px 12px; font-size: 12px; }
  .nav-links .play-link img { width: 18px; height: 18px; }
  .hero { padding: 112px 20px 78px; }
  .logo-lockup { width: min(300px, 77%); }
  h1 { font-size: clamp(43px, 11vw, 58px); }
  .quick-points { grid-template-columns: 1fr; gap: 12px; }
  .quick-point, .quick-point:first-child { padding: 0 0 0 14px; border-left: 2px solid #f3a1c9; }
  .feature-strip { margin-top: -32px; padding: 0 20px; }
  .mini-feature { min-height: auto; padding: 20px; }
  .section { padding: 76px 20px; }
  .lifestyle-grid { grid-template-columns: 1fr; }
  .lifestyle-card { max-width: 500px; }
}