/* =========================================================
   SANADAY — PHASE 1 / NEON WELLNESS DESIGN SYSTEM
   ---------------------------------------------------------
   This file intentionally sits AFTER style.css.
   It restyles the current website without changing content,
   JavaScript behavior, booking API, sliders or responsive logic.
   ========================================================= */

:root {
  /* Legacy aliases kept so the current components inherit the new brand. */
  --green-900: #f8f5ff;
  --green-800: #eee8ff;
  --green-700: #8e6cff;
  --green-600: #b15cff;
  --green-300: #d7c8ff;
  --sage: #241442;
  --cream: #130a27;
  --cream-2: #1c1036;
  --gold: #ff65c6;
  --gold-2: #ffabdF;
  --teal: #66dbc8;
  --coral: #ff6fb7;
  --blue: #78b8ff;

  --ink: #fbf9ff;
  --muted: #bdb3d5;
  --white: rgba(255,255,255,.92);
  --card: rgba(32, 18, 59, .72);
  --stroke: rgba(205, 174, 255, .18);

  --brand-midnight: #0f0722;
  --brand-night: #160b30;
  --brand-purple: #2b1756;
  --brand-violet: #8e6cff;
  --brand-lilac: #c395ff;
  --brand-pink: #ff65c6;
  --brand-hot-pink: #ff4fad;
  --brand-blue: #78b8ff;
  --brand-mint: #69e0c8;
  --brand-text: #fbf9ff;
  --brand-text-soft: #d7cfeb;
  --brand-text-muted: #aaa0c4;
  --brand-card: rgba(34, 19, 63, .72);
  --brand-card-strong: rgba(25, 12, 48, .88);
  --brand-line: rgba(217, 185, 255, .18);

  --shadow: 0 28px 90px rgba(4, 0, 18, .48);
  --shadow-soft: 0 16px 48px rgba(5, 0, 20, .30);
  --neon-shadow: 0 18px 48px rgba(165, 88, 255, .24), 0 0 42px rgba(255, 91, 195, .10);

  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
}

html {
  background: var(--brand-midnight);
}

body {
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-text);
  background:
    radial-gradient(circle at 12% 5%, rgba(123, 74, 255, .16), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(255, 78, 183, .12), transparent 28%),
    linear-gradient(180deg, #100721 0%, #170b2f 44%, #110822 100%);
  color-scheme: dark;
}

::selection {
  background: rgba(255, 101, 198, .34);
  color: #fff;
}

/* ---------- Cosmic ambient background ---------- */
.page-bg::before {
  background:
    radial-gradient(circle at 50% 4%, rgba(177, 92, 255, .22), transparent 32%),
    radial-gradient(circle at 92% 25%, rgba(255, 84, 186, .17), transparent 27%),
    radial-gradient(circle at 8% 78%, rgba(111, 92, 255, .18), transparent 30%),
    radial-gradient(circle at 48% 70%, rgba(111, 58, 187, .10), transparent 36%),
    linear-gradient(180deg, rgba(13, 6, 30, .58), rgba(22, 10, 45, .94));
}

.page-bg::after {
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.25px),
    radial-gradient(circle, rgba(204,164,255,.54) 0 .9px, transparent 1.15px),
    radial-gradient(circle, rgba(255,105,201,.35) 0 .75px, transparent 1px);
  background-size: 78px 78px, 113px 113px, 161px 161px;
  background-position: 0 0, 31px 18px, 72px 54px;
}

.leaf {
  display: none !important;
}

.sun-glow {
  top: -40px;
  width: 620px;
  height: 620px;
  opacity: .9;
  background:
    radial-gradient(circle at 48% 48%, rgba(255, 111, 207, .20), transparent 37%),
    radial-gradient(circle, rgba(146, 96, 255, .30), rgba(146, 96, 255, 0) 68%);
  filter: blur(7px);
}

.ambient-particles span {
  background: rgba(255,255,255,.8);
  box-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 20px rgba(203,145,255,.28);
}

.scroll-progress {
  background: linear-gradient(90deg, var(--brand-violet), var(--brand-pink));
  box-shadow: 0 0 16px rgba(255, 91, 195, .45);
}

/* ---------- Typography ---------- */
h1, h2, h3,
.hero-title,
.store-copy h2,
.booking-head h2,
.roi-note strong {
  font-family: "Manrope", "Inter", sans-serif;
}

h1, h2, h3 {
  color: var(--brand-text);
}

h1 {
  letter-spacing: -.065em;
}

h2 {
  letter-spacing: -.045em;
}

h3 {
  letter-spacing: -.025em;
}

.section-heading p,
.hero-lead,
.glass-card p,
.module-grid p,
.dashboard-copy p,
.privacy-card p,
.timeline p,
.faq p,
.showcase-copy-block p,
.store-copy p,
.booking-head p {
  color: var(--brand-text-soft);
}

.eyebrow {
  color: #f3b6ff;
  letter-spacing: .075em;
}

.eyebrow span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transform: none;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 8%, transparent 10%),
    linear-gradient(145deg, var(--brand-violet), var(--brand-pink));
  box-shadow:
    0 0 0 5px rgba(180, 102, 255, .10),
    0 0 20px rgba(255, 91, 195, .32);
}

.hero-title span {
  color: #fff;
  text-shadow: 0 8px 40px rgba(8, 0, 30, .34);
}

.hero-title strong {
  background: linear-gradient(100deg, #ff8ed6 0%, #f36acb 30%, #b976ff 65%, #8d74ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 30px rgba(213, 87, 255, .18));
}

/* ---------- Header / navigation ---------- */
.site-header {
  background: rgba(14, 7, 31, .72);
  border-bottom: 1px solid rgba(220, 188, 255, .11);
  box-shadow: 0 12px 38px rgba(4, 0, 18, .15);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.brand {
  color: #fff;
  letter-spacing: -.025em;
}

.brand small {
  color: #f7c8ff;
  background: linear-gradient(135deg, rgba(137, 93, 255, .18), rgba(255, 91, 195, .15));
  border: 1px solid rgba(235, 195, 255, .15);
}

.brand-logo-img {
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.20),
    0 0 22px rgba(213, 98, 255, .36),
    0 12px 28px rgba(3,0,16,.30);
}

.nav-links {
  color: #e9e2f7;
}

.nav-links a {
  opacity: .82;
}

.nav-links a:hover {
  color: #ff9bd9;
  opacity: 1;
}

.nav-toggle {
  color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(221, 188, 255, .13);
}

.nav-toggle span {
  background: #fff;
}

@media (max-width: 820px) {
  .nav-links {
    background:
      linear-gradient(145deg, rgba(30, 16, 57, .97), rgba(17, 8, 35, .97));
    border: 1px solid rgba(222, 186, 255, .17);
    box-shadow: 0 28px 80px rgba(0,0,0,.44), 0 0 48px rgba(148, 83, 255, .12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
}

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid transparent;
  letter-spacing: -.01em;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #7b5cff 0%, #ad61ff 46%, #ff62c3 100%);
  border-color: rgba(255,255,255,.13);
  box-shadow:
    0 15px 38px rgba(139, 89, 255, .30),
    0 8px 30px rgba(255, 82, 181, .18),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-primary:hover {
  box-shadow:
    0 20px 52px rgba(139, 89, 255, .36),
    0 10px 36px rgba(255, 82, 181, .24),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.btn-ghost {
  color: #f8f4ff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(218, 181, 255, .18);
  box-shadow: 0 12px 35px rgba(4,0,18,.22), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}

.btn-ghost:hover {
  background: rgba(171, 104, 255, .11);
  border-color: rgba(255, 126, 211, .30);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  left: -300px;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 92, 255, .13), transparent 66%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-lead {
  color: #d1c8e3;
}

.trust-strip span {
  color: #eee9fb;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(219, 185, 255, .14);
  box-shadow: 0 10px 34px rgba(2,0,14,.18);
  backdrop-filter: blur(12px);
}

.hero-ecosystem::before {
  background:
    radial-gradient(circle at 46% 48%, rgba(255, 100, 199, .25), transparent 37%),
    radial-gradient(circle at 50% 50%, rgba(139, 92, 255, .24), transparent 64%);
  filter: blur(8px);
}

.ecosystem-orbit {
  border-color: rgba(196, 151, 255, .22);
  box-shadow:
    inset 0 0 0 16px rgba(182, 121, 255, .035),
    0 0 100px rgba(166, 96, 255, .18);
}

.ecosystem-orbit::before,
.ecosystem-orbit::after {
  background: linear-gradient(135deg, var(--brand-violet), var(--brand-pink));
  box-shadow: 0 0 22px rgba(255, 93, 196, .42);
}

.ecosystem-dashboard {
  background: linear-gradient(145deg, rgba(44, 25, 78, .84), rgba(19, 9, 40, .80));
  border-color: rgba(223, 193, 255, .18);
  box-shadow: 0 36px 100px rgba(3,0,17,.52), 0 0 60px rgba(145, 82, 255, .12);
}

.ecosystem-dashboard-top,
.ecosystem-dashboard-top strong {
  color: #f6f1ff;
}

.ecosystem-dashboard-top span {
  background: #9d77ff;
}
.ecosystem-dashboard-top span:nth-child(2) { background: #ff65c6; }
.ecosystem-dashboard-top span:nth-child(3) { background: #75c8ff; }

.ecosystem-dashboard-screen {
  background: #130b29;
  border-color: rgba(218, 181, 255, .14);
}

.ecosystem-dashboard-glass div,
.ecosystem-kpi,
.ecosystem-caption {
  background: rgba(24, 12, 48, .78);
  border-color: rgba(222, 184, 255, .18);
  box-shadow: 0 16px 42px rgba(2,0,14,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

.ecosystem-dashboard-glass b,
.ecosystem-kpi strong,
.ecosystem-caption,
.ecosystem-caption strong {
  color: #fff;
}

.ecosystem-dashboard-glass small,
.ecosystem-kpi span,
.ecosystem-caption span {
  color: #bdb2d5;
}

.ecosystem-phone {
  background: linear-gradient(180deg, #2a164d, #120822);
  border-color: rgba(224, 195, 255, .26);
  box-shadow:
    0 38px 100px rgba(3,0,18,.58),
    0 0 45px rgba(171, 91, 255, .20),
    inset 0 0 0 1px rgba(255,255,255,.07);
}

.ecosystem-phone-glow {
  background: rgba(239, 83, 196, .34);
  filter: blur(38px);
}

.ecosystem-phone-notch {
  background: rgba(10, 4, 23, .94);
}

.ecosystem-phone-screen {
  background: #0f071f;
}

.ecosystem-bridge span {
  background: linear-gradient(90deg, transparent, rgba(145, 103, 255, .90), rgba(255, 102, 199, .82), transparent);
  box-shadow: 0 0 10px rgba(211, 92, 255, .18);
}

/* ---------- Shared glass system ---------- */
.glass-card,
.experience,
.mock-dashboard,
.dashboard-copy,
.roi-card,
.module-grid article,
.privacy-card,
.timeline div,
.faq details,
.product-showcase-card,
.store-download-card {
  background:
    linear-gradient(145deg, rgba(42, 23, 76, .76), rgba(24, 11, 47, .76));
  border: 1px solid rgba(220, 185, 255, .15);
  box-shadow:
    0 20px 60px rgba(3,0,18,.30),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

.glass-card:hover,
.module-grid article:hover,
.experience:hover,
.faq details:hover {
  border-color: rgba(255, 116, 205, .27);
  box-shadow:
    0 28px 78px rgba(2,0,16,.40),
    0 0 42px rgba(151, 87, 255, .10);
}

.glass-card h3,
.experience h3,
.module-grid h3,
.faq summary,
.dashboard-copy h3 {
  color: #fff;
}

/* ---------- Section surfaces ---------- */
.dual-experience,
.showcase-section,
.roi-section,
.confidentialite {
  border-block: 1px solid rgba(215, 176, 255, .09);
}

.dual-experience {
  background:
    radial-gradient(circle at 10% 24%, rgba(140, 87, 255, .08), transparent 26%),
    rgba(255,255,255,.012);
}

.showcase-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 92, 194, .13), transparent 26%),
    radial-gradient(circle at 88% 54%, rgba(132, 89, 255, .15), transparent 30%),
    rgba(255,255,255,.012);
}

.showcase-bg-orb.orb-a {
  background: #ff66c6;
  opacity: .18;
}

.showcase-bg-orb.orb-b {
  background: #8c6bff;
  opacity: .18;
}

.feature-kicker {
  color: #f5b7ff;
  background: linear-gradient(135deg, rgba(145, 95, 255, .14), rgba(255, 91, 195, .12));
  border: 1px solid rgba(231, 190, 255, .14);
}

.product-showcase-card::before,
.storybook-showcase-card::before,
.cockpit-showcase-card::before {
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 92, 194, .13), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(135, 88, 255, .13), transparent 34%);
}

.showcase-tabs button,
.dashboard-rps-tabs button {
  color: #c8bedb;
  background: rgba(255,255,255,.045);
  border-color: rgba(218, 184, 255, .13);
}

.showcase-tabs button:hover,
.dashboard-rps-tabs button:hover {
  color: #fff;
  border-color: rgba(255, 105, 201, .26);
  background: rgba(176, 101, 255, .10);
}

.showcase-tabs button.is-active,
.dashboard-rps-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(122, 91, 255, .30), rgba(255, 91, 195, .22));
  border-color: rgba(255, 134, 214, .32);
  box-shadow: 0 12px 32px rgba(118, 75, 255, .12);
}

.showcase-tabs button.is-active span,
.dashboard-rps-tabs button.is-active span {
  background: var(--brand-pink);
  box-shadow: 0 0 0 5px rgba(255, 101, 198, .12), 0 0 16px rgba(255, 101, 198, .30);
}

/* ---------- Storybook becomes a luminous app showcase ---------- */
.storybook-light {
  background:
    radial-gradient(circle, rgba(255, 101, 198, .22), transparent 52%),
    radial-gradient(circle, rgba(139, 99, 255, .20), transparent 72%);
}

.storybook-book {
  background:
    linear-gradient(145deg, rgba(46, 25, 83, .90), rgba(22, 10, 43, .88)),
    radial-gradient(circle at 12% 20%, rgba(255, 98, 197, .16), transparent 32%);
  border-color: rgba(225, 191, 255, .18);
  box-shadow:
    0 34px 96px rgba(3,0,18,.48),
    0 0 64px rgba(151, 87, 255, .10),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.storybook-book::before {
  background: rgba(80, 43, 121, .24);
  border-color: rgba(219, 181, 255, .09);
}

.storybook-book::after {
  background:
    linear-gradient(90deg, rgba(121, 75, 185, .10), transparent 13%, transparent 86%, rgba(255,255,255,.08)),
    radial-gradient(circle at 80% 10%, rgba(255, 113, 205, .15), transparent 20%);
}

.storybook-spine {
  background: linear-gradient(180deg, #8e6cff, #ff66c6, #ad64ff);
  box-shadow: 0 0 0 6px rgba(198, 139, 255, .08), 0 0 24px rgba(255, 93, 195, .20);
}

.storybook-pages {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    rgba(96, 56, 132, .30);
}

.storybook-page {
  background:
    linear-gradient(180deg, rgba(39, 22, 73, .94), rgba(20, 9, 40, .92)),
    radial-gradient(circle at 15% 12%, rgba(255, 95, 195, .12), transparent 22%);
  border-color: rgba(224, 190, 255, .15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.storybook-page-top,
.storybook-page-top span,
.storybook-note strong {
  color: #fff;
}

.storybook-page-top small,
.storybook-note span {
  color: #bcb1d2;
}

.storybook-phone-frame {
  border-color: rgba(226, 195, 255, .25);
  background: linear-gradient(180deg, #2d1854, #120822);
  box-shadow:
    0 28px 80px rgba(2,0,18,.52),
    0 0 42px rgba(181, 89, 255, .16),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.storybook-screen {
  background: #0e071d;
}

.storybook-note {
  background: rgba(255,255,255,.045);
  border-color: rgba(220, 184, 255, .14);
}

.storybook-leaf {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: linear-gradient(145deg, #8f6dff, #ff65c6);
  opacity: .68;
  box-shadow: 0 0 18px rgba(255, 91, 195, .36);
}

/* ---------- RH glass cockpit ---------- */
.cockpit-aura {
  background:
    radial-gradient(circle at 42% 45%, rgba(255, 92, 194, .16), transparent 44%),
    radial-gradient(circle at 72% 38%, rgba(120,184,255,.13), transparent 36%),
    radial-gradient(circle at 20% 78%, rgba(139, 95, 255, .18), transparent 40%);
}

.cockpit-grid-lines {
  opacity: .32;
  background-image:
    linear-gradient(rgba(180, 131, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 131, 255, .11) 1px, transparent 1px);
}

.cockpit-console {
  background:
    linear-gradient(145deg, rgba(44, 25, 78, .86), rgba(19, 9, 40, .82)),
    linear-gradient(135deg, rgba(139, 92, 255, .08), rgba(255, 93, 195, .07));
  border-color: rgba(225, 191, 255, .17);
  box-shadow:
    0 36px 105px rgba(2,0,16,.50),
    0 0 60px rgba(143, 83, 255, .10),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.cockpit-console::before {
  background: linear-gradient(120deg, rgba(255,255,255,.10), transparent 28%, rgba(255,95,196,.10), transparent 72%, rgba(137,91,255,.12));
}

.cockpit-topbar,
.cockpit-topbar b {
  color: #fff;
}

.cockpit-topbar em {
  color: #b8accf;
}

.cockpit-topbar span { background: #9a76ff; }
.cockpit-topbar span:nth-child(2) { background: #ff65c6; }
.cockpit-topbar span:nth-child(3) { background: #78b8ff; }

.cockpit-screen {
  background: #100823;
  border-color: rgba(222, 185, 255, .14);
}

.cockpit-screen::after {
  background:
    linear-gradient(115deg, rgba(255,255,255,.09), transparent 24%, transparent 70%, rgba(255,255,255,.045)),
    radial-gradient(circle at 72% 12%, rgba(255, 93, 195, .09), transparent 22%);
}

.cockpit-bottom-metrics span,
.cockpit-floating-kpi {
  background: rgba(20, 9, 41, .76);
  border-color: rgba(220, 184, 255, .15);
  box-shadow: 0 14px 36px rgba(2,0,14,.28);
}

.cockpit-bottom-metrics b,
.cockpit-floating-kpi strong {
  color: #fff;
}

.cockpit-floating-kpi small {
  color: #b8accf;
}

/* ---------- Experience / dashboard / ROI ---------- */
.experience-illustration {
  background: linear-gradient(145deg, #442469, #7e49ad);
}

.employee-ui div,
.director-ui span {
  background: rgba(255,255,255,.14);
}

.employee-ui div:nth-child(3),
.director-ui span:nth-child(4) {
  background: linear-gradient(90deg, rgba(142,108,255,.62), rgba(255,101,198,.54));
}

.donut {
  background: conic-gradient(#916dff 0 52%, #ff65c6 52% 75%, #78b8ff 75% 100%);
  box-shadow: inset 0 0 0 28px rgba(25, 12, 49, .96);
}

.mock-top strong,
.kpi strong,
.rps-list div,
.bar em,
.privacy-points span,
.faq summary,
.field-label,
.booking-form label span {
  color: #fff;
}

.mock-top button,
.pill-list span {
  color: #eadfff;
  background: rgba(150, 102, 255, .12);
  border: 1px solid rgba(214, 177, 255, .10);
}

.kpi,
.privacy-points div {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(219, 183, 255, .11);
}

.rps-list {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(137, 91, 255, .055));
  border: 1px solid rgba(220, 184, 255, .08);
}

.rps-list b {
  background: linear-gradient(90deg, #8e6cff, #ff65c6);
  box-shadow: 0 0 0 7px rgba(255,255,255,.025), 0 0 16px rgba(206, 84, 255, .14);
}

.roi-chart {
  background:
    radial-gradient(circle at 70% 14%, rgba(255, 93, 195, .08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(137, 91, 255, .045));
  border: 1px solid rgba(219, 184, 255, .10);
}

.bar-group {
  border-color: rgba(222, 184, 255, .12);
}

.bar.muted {
  background: linear-gradient(180deg, #6d607e, #493d5d);
}

.bar.active {
  background: linear-gradient(180deg, #ff65c6, #8e6cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 14px 38px rgba(159, 80, 255, .22);
}

.roi-note strong {
  color: transparent;
  background: linear-gradient(135deg, #ff88d2, #9c79ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.active-dot { background: #ff65c6; }
.muted-dot { background: #685d78; }

.timeline b {
  background: linear-gradient(145deg, #8e6cff, #ff65c6);
  box-shadow: 0 10px 28px rgba(172, 86, 255, .20);
}

.privacy-points strong {
  color: #ff8fd5;
}

/* ---------- Store / platform area ---------- */
.store-download-card {
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 93, 195, .14), transparent 30%),
    radial-gradient(circle at 92% 84%, rgba(139, 91, 255, .16), transparent 34%),
    linear-gradient(145deg, rgba(42, 23, 76, .84), rgba(21, 10, 42, .84));
  border-color: rgba(222, 185, 255, .16);
  box-shadow: 0 30px 95px rgba(2,0,16,.40), 0 0 55px rgba(149, 85, 255, .08);
}

.store-download-card::before {
  background: rgba(255, 93, 195, .14);
}

.store-badge,
.app-store,
.google-play {
  background: linear-gradient(135deg, #24133f, #553080);
  box-shadow: 0 18px 45px rgba(2,0,16,.30);
}

.platform-info-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(221, 185, 255, .12);
  box-shadow: 0 14px 36px rgba(2,0,14,.23);
}

.platform-info-card strong {
  color: #fff;
}

.platform-info-card small {
  color: #b9aecf;
}

.platform-info-card .store-icon,
.platform-info-card.app-link-card::after {
  background: linear-gradient(135deg, #8d6cff, #ff65c6);
  box-shadow: 0 10px 26px rgba(166, 84, 255, .24);
}

.platform-info-card.app-link-card {
  border-color: rgba(218, 179, 255, .16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(153, 88, 255, .06)),
    radial-gradient(circle at 12% 20%, rgba(255, 93, 195, .08), transparent 35%);
}

.platform-info-card.app-link-card:hover {
  border-color: rgba(255, 111, 205, .28);
  box-shadow: 0 20px 48px rgba(2,0,16,.30), 0 0 34px rgba(149, 85, 255, .08);
}

.contact-main-btn {
  box-shadow: 0 20px 54px rgba(145, 83, 255, .28), 0 8px 30px rgba(255, 82, 181, .14);
}

/* ---------- Booking sticky CTA + modal ---------- */
.booking-banner {
  background: rgba(22, 10, 44, .88);
  border-color: rgba(223, 188, 255, .17);
  box-shadow: 0 20px 66px rgba(2,0,16,.48), 0 0 38px rgba(149, 83, 255, .10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.booking-banner strong {
  color: #fff;
}

.booking-banner span {
  color: #b9aecf;
}

.modal-backdrop {
  background: rgba(6, 2, 17, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.booking-panel,
.success-panel {
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 92, 194, .11), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(139, 92, 255, .13), transparent 32%),
    linear-gradient(180deg, rgba(35, 18, 64, .98), rgba(17, 8, 35, .98));
  border-color: rgba(224, 190, 255, .17);
  box-shadow: 0 44px 150px rgba(0,0,0,.58), 0 0 70px rgba(139, 82, 255, .10);
}

.modal-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(221, 183, 255, .13);
  color: #fff;
}

.date-btn,
.slot-btn {
  color: #e9e2f6;
  background: rgba(255,255,255,.045);
  border-color: rgba(219, 183, 255, .13);
}

.date-btn:hover,
.slot-btn:hover:not(.is-unavailable) {
  border-color: rgba(255, 110, 205, .30);
  background: rgba(155, 91, 255, .10);
}

.date-btn.is-selected,
.slot-btn.is-selected {
  background: linear-gradient(135deg, rgba(125, 91, 255, .96), rgba(255, 92, 194, .94));
  color: #fff;
  box-shadow: 0 12px 30px rgba(158, 84, 255, .20);
}

.slot-btn.is-unavailable {
  background: rgba(255,255,255,.025);
  color: #786f88;
}

.booking-form input,
.booking-form textarea {
  color: #fff;
  background: rgba(255,255,255,.045);
  border-color: rgba(219, 183, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: #887c9d;
}

.booking-form input:focus,
.booking-form textarea:focus {
  border-color: rgba(255, 100, 200, .45);
  box-shadow: 0 0 0 5px rgba(160, 91, 255, .10), 0 0 28px rgba(255, 91, 195, .07);
}

.booking-status {
  color: #d8c8f2;
}

.booking-status.error {
  color: #ff8da7;
}

.success-icon {
  background: linear-gradient(135deg, #8e6cff, #ff65c6);
  box-shadow: 0 18px 44px rgba(165, 84, 255, .28), 0 0 30px rgba(255, 91, 195, .14);
}

.success-panel h2 {
  color: #fff;
}

.success-panel p {
  color: #c2b7d7;
}

/* ---------- Image frame continuity ---------- */
.ecosystem-phone-screen,
.ecosystem-dashboard-screen,
.storybook-screen,
.cockpit-screen,
.promo-illustration {
  background: #100720;
}

/* ---------- Focus / accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(255, 113, 207, .65);
  outline-offset: 3px;
}

/* ---------- Small-screen polish ---------- */
@media (max-width: 560px) {
  h1 {
    font-size: clamp(2.85rem, 14vw, 3.45rem);
    letter-spacing: -.055em;
  }

  .site-header {
    background: rgba(13, 6, 28, .84);
  }

  .trust-strip span {
    font-size: .82rem;
  }

  .booking-banner {
    background: rgba(20, 9, 40, .94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-bg::before,
  .sun-glow,
  .ambient-particles span,
  .hero-title strong,
  .btn-primary::after {
    animation: none !important;
  }
}