:root {
  --bg: #08060b;
  --bg-soft: #0e0913;
  --surface: rgba(20, 13, 27, .82);
  --surface-strong: #17101f;
  --line: rgba(222, 193, 255, .12);
  --text: #fbf8ff;
  --muted: #a79dad;
  --cyan: #bd8cff;
  --blue: #9b62e3;
  --violet: #c396ff;
  --mint: #67e5ae;
  accent-color: #b77bf4;
}

html { scrollbar-color: #7847a2 #0d0911; }
body {
  background:
    radial-gradient(circle at 9% 18%, rgba(128, 64, 178, .16), transparent 27rem),
    radial-gradient(circle at 92% 5%, rgba(191, 100, 235, .12), transparent 31rem),
    #08060b;
}
body::before {
  background:
    linear-gradient(rgba(220, 187, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 187, 255, .018) 1px, transparent 1px);
  background-size: 72px 72px;
}
::selection { color: #fff; background: #7740a7; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #d7adff;
  outline-offset: 3px;
}

.ambient-one { background: #9c4bd4; opacity: .18; }
.ambient-two { background: #5e238f; opacity: .2; }
.site-header {
  height: 88px;
  border-color: rgba(222, 193, 255, .1);
}
.brand { gap: 8px; color: #f8efff; }
.brand-logo {
  filter: drop-shadow(0 0 16px rgba(187, 120, 244, .28));
}
.site-header nav { color: #a79dad; }
.site-header .nav-download {
  border-color: rgba(195, 150, 255, .3);
  border-radius: 13px 13px 13px 5px;
  color: #ecd8ff;
  background: rgba(164, 91, 221, .1);
}
.eyebrow { color: #c6a0ed; }
.eyebrow span { background: linear-gradient(90deg, #ca92ff, transparent); }
h1, h2 { text-wrap: balance; }
h1 em {
  background: linear-gradient(105deg, #f0c9ff, #bd87ff 48%, #de63b6);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero-lede,
.section-heading > p:last-child,
.about-intro > p:last-child { color: #ada3b3; }
.button {
  border-color: rgba(222, 193, 255, .14);
  border-radius: 15px 15px 15px 6px;
}
.button-primary {
  color: #fff;
  background: linear-gradient(120deg, #7040aa, #9c58db 56%, #c564ad);
  box-shadow: 0 14px 34px rgba(128, 63, 176, .28);
}
.button-primary:hover { box-shadow: 0 18px 44px rgba(158, 83, 211, .36); }
.button-secondary { color: #eee6f3; background: rgba(224, 195, 255, .045); }
.hero-note { color: #918695; }

.real-app-preview {
  border-radius: 24px 24px 24px 8px;
  box-shadow:
    0 45px 100px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(222, 193, 255, .15),
    0 0 75px rgba(151, 74, 204, .15);
}
.real-app-preview img { border-radius: inherit; }
.real-app-preview figcaption { color: #887c8d; }
.orbit { border-color: rgba(202, 146, 255, .13); }
.floating-card {
  border-color: rgba(222, 193, 255, .15);
  border-radius: 16px 16px 16px 6px;
  background: rgba(20, 13, 27, .9);
}
.floating-card > span { color: #d7adff; background: rgba(183, 123, 244, .12); }

.showcase-section,
.video-library-section,
.developer-section {
  border-color: rgba(222, 193, 255, .09);
  background: linear-gradient(135deg, rgba(17, 10, 23, .98), rgba(9, 6, 12, .99));
}
.showcase-section::before,
.video-library-section::before { background: #9343c6; opacity: .16; }
.showcase-copy p,
.developer-copy > p:not(.eyebrow) { color: #aaa0b0; }
.showcase-copy a { color: #d3a7ff; }
.showcase-video {
  border-color: rgba(222, 193, 255, .17);
  border-radius: 25px 25px 25px 8px;
  box-shadow: 0 45px 100px rgba(0, 0, 0, .5), 0 0 75px rgba(151, 74, 204, .12);
}
.showcase-video::before {
  background: linear-gradient(135deg, rgba(200, 139, 255, .09), transparent 38%, rgba(220, 87, 166, .07));
}

.platform-tabs {
  border-color: rgba(222, 193, 255, .12);
  border-radius: 17px 17px 17px 7px;
  background: rgba(224, 195, 255, .03);
}
.platform-tabs button { color: #968b9c; border-radius: 12px 12px 12px 5px; }
.platform-tabs button[aria-selected="true"] {
  color: #f7edff;
  background: linear-gradient(120deg, rgba(184, 123, 244, .2), rgba(209, 83, 166, .1));
  box-shadow: inset 0 0 0 1px rgba(210, 168, 255, .18);
}
.download-panel {
  border-color: rgba(222, 193, 255, .14);
  border-radius: 25px 25px 25px 8px;
  background: linear-gradient(120deg, rgba(25, 16, 34, .96), rgba(12, 8, 16, .97));
}
.download-panel::after { background: #a352d5; }
.platform-art {
  border-color: rgba(222, 193, 255, .13);
  border-radius: 31px 31px 31px 10px;
  background: radial-gradient(circle at 30% 20%, rgba(213, 171, 255, .12), rgba(255, 255, 255, .018));
}
.platform-art span { color: #d6adff; text-shadow: 0 0 28px rgba(180, 109, 238, .34); }
.platform-art i { border-color: rgba(199, 143, 255, .16); }
.download-copy p { color: #a097a6; }
.download-meta,
.download-footnote { color: #847988; }

.about-section,
.site-footer { border-color: rgba(222, 193, 255, .09); }
.feature-grid article {
  border-color: rgba(222, 193, 255, .11);
  border-radius: 21px 21px 21px 7px;
  background: linear-gradient(150deg, rgba(223, 193, 255, .055), rgba(255, 255, 255, .012));
}
.feature-grid article:hover { border-color: rgba(200, 142, 255, .28); }
.feature-icon {
  border-color: rgba(199, 143, 255, .18);
  border-radius: 15px 15px 15px 5px;
  color: #d2a3ff;
  background: rgba(177, 105, 235, .09);
}
.feature-grid p { color: #9d93a3; }
.developer-section::before { background: #8f3dbe; opacity: .16; }
.portrait-glow { background: conic-gradient(from 130deg, #b565e7, #58327d, #d452a2, #b565e7); }
.portrait-monogram {
  background: radial-gradient(circle at 35% 25%, #42244e, #1a101f 54%, #0b080e);
  -webkit-text-stroke-color: rgba(222, 177, 255, .8);
}
.developer-signoff > span { background: linear-gradient(145deg, #8d4fb3, #402751); }

@media (max-width: 720px) {
  .site-header { height: 72px; }
  .showcase-video,
  .download-panel,
  .feature-grid article { border-radius: 18px 18px 18px 6px; }
}