:root {
  /* Color tokens */
  --color-bg: #05070d;
  --color-bg-elev: #0c1322;
  --color-bg-elev-2: #111a2f;
  --color-surface-a: rgba(18, 27, 47, 0.94);
  --color-surface-b: rgba(10, 16, 29, 0.96);
  --color-text: #edf3ff;
  --color-text-soft: #a2b1cc;
  --color-line: rgba(164, 187, 230, 0.22);
  --color-teal: #0bc4a2;
  --color-blue: #2f73ff;
  --color-violet: #8c4dff;
  --color-orange: #ff9234;
  --color-pink: #f85fc4;

  /* Typography tokens */
  --font-display: "Sora", "Avenir Next", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --text-display-xl: clamp(2rem, 4.2vw, 4.4rem);
  --text-display-lg: clamp(1.4rem, 2.9vw, 2.25rem);
  --text-body-lg: clamp(1.02rem, 1.4vw, 1.24rem);
  --text-body: 1rem;
  --text-meta: 0.86rem;
  --text-micro: 0.76rem;

  /* Spacing tokens */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* Radius tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow tokens */
  --shadow-soft: 0 12px 28px rgba(57, 146, 255, 0.28);
  --shadow-card: 0 26px 50px rgba(6, 10, 22, 0.6);

  /* Motion token */
  --motion-standard: 260ms ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--color-text);
  font-family: var(--font-body);
}

a {
  color: inherit;
}

.ds-container {
  width: min(1180px, calc(100% - 2 * var(--space-5)));
  margin-left: auto;
  margin-right: auto;
}

.ds-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-teal);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.8rem;
  font-weight: 700;
}

.ds-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  font-size: var(--text-meta);
  color: var(--color-text-soft);
  background: rgba(8, 14, 25, 0.55);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform var(--motion-standard), filter var(--motion-standard), border-color var(--motion-standard);
}

.ds-btn:hover {
  transform: translateY(-1px);
}

.ds-btn--primary {
  color: #06111e;
  background: linear-gradient(135deg, #63ffdf 0%, #5f99ff 100%);
  box-shadow: var(--shadow-soft);
}

.ds-btn--ghost {
  color: var(--color-text);
  border: 1px solid var(--color-line);
  background: rgba(11, 16, 28, 0.5);
}

.ds-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: linear-gradient(170deg, var(--color-surface-a), var(--color-surface-b));
}

.ds-surface > * {
  position: relative;
  z-index: 1;
}

/* Surface modes: switch via body class */
body.surface-mode-solid .ds-surface {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(170deg, rgba(18, 27, 47, 0.97), rgba(10, 16, 29, 0.98));
  border-color: rgba(125, 149, 191, 0.35);
  box-shadow: 0 18px 38px rgba(4, 10, 20, 0.52);
}

body.surface-mode-frosted .ds-surface {
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  background: linear-gradient(170deg, rgba(205, 228, 255, 0.12), rgba(159, 195, 255, 0.07));
  border-color: rgba(205, 227, 255, 0.32);
  box-shadow: 0 18px 38px rgba(0, 12, 34, 0.45), inset 0 1px 0 rgba(244, 250, 255, 0.28);
}

body.surface-mode-iridescent .ds-surface {
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  background: linear-gradient(165deg, rgba(148, 228, 255, 0.1), rgba(255, 152, 208, 0.09) 44%, rgba(121, 133, 255, 0.11));
  border-color: rgba(208, 220, 255, 0.38);
  box-shadow: 0 20px 44px rgba(5, 10, 24, 0.56), inset 0 1px 0 rgba(245, 248, 255, 0.36);
}

body.surface-mode-iridescent .ds-surface::before {
  content: "";
  position: absolute;
  inset: -35% -20%;
  z-index: 0;
  background: conic-gradient(
    from 210deg at 50% 50%,
    rgba(69, 242, 212, 0.3),
    rgba(91, 153, 255, 0.3),
    rgba(176, 89, 255, 0.28),
    rgba(255, 142, 76, 0.28),
    rgba(69, 242, 212, 0.3)
  );
  opacity: 0.45;
  filter: blur(20px);
  transform: rotate(8deg);
}

/* Strategic panel roles: semantic styles override global mode */
.ds-surface.panel--critical {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(170deg, rgba(18, 27, 47, 0.97), rgba(10, 16, 29, 0.99)) !important;
  border-color: rgba(129, 158, 208, 0.42) !important;
  box-shadow: 0 20px 42px rgba(4, 10, 20, 0.56) !important;
}

.ds-surface.panel--critical::before {
  content: none !important;
}

.ds-surface.panel--workspace {
  backdrop-filter: blur(16px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
  background: linear-gradient(170deg, rgba(205, 228, 255, 0.12), rgba(159, 195, 255, 0.07)) !important;
  border-color: rgba(205, 227, 255, 0.32) !important;
  box-shadow: 0 18px 38px rgba(0, 12, 34, 0.45), inset 0 1px 0 rgba(244, 250, 255, 0.28) !important;
}

.ds-surface.panel--workspace::before {
  content: none !important;
}

.ds-surface.panel--brand {
  backdrop-filter: blur(14px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  background: linear-gradient(
    165deg,
    rgba(148, 228, 255, 0.11),
    rgba(255, 152, 208, 0.1) 44%,
    rgba(121, 133, 255, 0.12)
  ) !important;
  border-color: rgba(208, 220, 255, 0.38) !important;
  box-shadow: 0 20px 44px rgba(5, 10, 24, 0.56), inset 0 1px 0 rgba(245, 248, 255, 0.36) !important;
}

.ds-surface.panel--brand::before {
  content: "";
  position: absolute;
  inset: -35% -20%;
  z-index: 0;
  background: conic-gradient(
    from 210deg at 50% 50%,
    rgba(69, 242, 212, 0.3),
    rgba(91, 153, 255, 0.3),
    rgba(176, 89, 255, 0.28),
    rgba(255, 142, 76, 0.28),
    rgba(69, 242, 212, 0.3)
  );
  opacity: 0.45;
  filter: blur(20px);
  transform: rotate(8deg);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms ease, transform 560ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}