/* ===== DesireCore Liquid Glass Design System — Light/Dark Dual Mode ===== */

/* ===== Light Mode (Default) ===== */
:root {
  /* System Colors (Light) */
  --sys-label: #1d1d1f;
  --sys-secondary: #6e6e73;
  --sys-tertiary: #aeaeb2;
  --sys-quaternary: #c7c7cc;
  --sys-separator: rgba(60, 60, 67, 0.08);
  --sys-fill: rgba(120, 120, 128, 0.08);

  /* Accent Colors (Light) */
  --accent-green: #34C759;
  --accent-blue: #007AFF;
  --accent-purple: #AF52DE;
  --accent-orange: #FF9500;
  --accent-red: #FF3B30;

  /* Glass Colors (Light) */
  --glass-white: rgba(255, 255, 255, 0.72);
  --glass-card: rgba(255, 255, 255, 0.55);
  --glass-hover: rgba(255, 255, 255, 0.65);
  --glass-active: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.45);
  --glass-dim: rgba(255, 255, 255, 0.12);
  --glass-solid: rgb(255, 255, 255);

  /* App Background (Light) */
  --app-bg:
    radial-gradient(ellipse 120% 80% at 15% 20%, rgba(52,199,89,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 100% 90% at 85% 30%, rgba(90,200,250,0.16) 0%, transparent 50%),
    radial-gradient(ellipse 80% 70% at 50% 80%, rgba(175,82,222,0.1) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 20% 90%, rgba(255,204,0,0.08) 0%, transparent 50%),
    linear-gradient(160deg, #f2f0ed 0%, #e8e4df 30%, #dfe8f0 60%, #ece7f5 100%);

  /* Shadows (Light) */
  --shadow-glass: 0 0.5px 0 0 rgba(255,255,255,0.35) inset,
                  0 1px 3px rgba(0,0,0,0.06),
                  0 6px 24px rgba(0,0,0,0.04);
  --shadow-glass-lg: 0 0.5px 0 0 rgba(255,255,255,0.4) inset,
                     0 2px 8px rgba(0,0,0,0.06),
                     0 12px 40px rgba(0,0,0,0.06);
  --shadow-float: 0 16px 48px rgba(0,0,0,0.08),
                  0 2px 8px rgba(0,0,0,0.04);
  --shadow-popover: 0 12px 40px rgba(0,0,0,0.18),
                    0 4px 12px rgba(0,0,0,0.1);

  /* Button */
  --btn-primary-gradient: linear-gradient(135deg, #34C759, #30B350);
  --btn-green-shadow: rgba(52, 199, 89, 0.25);
  --shadow-glass-btn: 0 0.5px 0 0 rgba(255,255,255,0.5) inset,
                      0 1px 2px rgba(0,0,0,0.06);

  /* Overlay (Light) */
  --overlay-darker: rgba(0, 0, 0, 0.5);

  /* Scrollbar (Light) */
  --scroll-thumb: rgba(0, 0, 0, 0.1);
  --scroll-thumb-hover: rgba(0, 0, 0, 0.18);

  /* Hero text on image */
  --hero-text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  --hero-solid: rgb(18, 18, 24);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", "Noto Sans SC", system-ui, sans-serif;

  /* Glass Effects */
  --blur-thin: blur(20px) saturate(1.5);
  --blur-standard: blur(40px) saturate(1.8);

  /* Section Spacing */
  --section-gap: 120px;
  --section-title-gap: 48px;
  --card-gap: 24px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 9px;
  --radius-base: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 24px;

  /* Animation */
  --ease-out-expo: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* ===== Dark Mode ===== */
[data-theme="dark"] {
  --sys-label: #FFF2DD;
  --sys-secondary: #C8BFA6;
  --sys-tertiary: #A4A087;
  --sys-quaternary: #7A7660;
  --sys-separator: rgba(255, 255, 255, 0.08);
  --sys-fill: rgba(255, 255, 255, 0.06);

  --accent-green: #30D158;
  --accent-blue: #0A84FF;
  --accent-purple: #BF5AF2;
  --accent-orange: #FF9500;
  --accent-red: #FF3B30;

  --glass-white: rgba(22, 20, 16, 0.90);
  --glass-card: rgba(22, 20, 16, 0.85);
  --glass-hover: rgba(255, 242, 221, 0.06);
  --glass-active: rgba(255, 242, 221, 0.14);
  --glass-border: rgba(255, 242, 221, 0.10);
  --glass-highlight: rgba(255, 242, 221, 0.04);
  --glass-dim: rgba(255, 242, 221, 0.02);
  --glass-solid: rgb(17, 16, 13);

  --app-bg:
    radial-gradient(ellipse 130% 90% at 10% 10%, rgba(180,140,60,0.15) 0%, transparent 50%),
    radial-gradient(ellipse 110% 80% at 90% 20%, rgba(140,100,40,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 50% 90%, rgba(200,160,80,0.08) 0%, transparent 50%),
    linear-gradient(160deg, #1e1a14 0%, #221e16 50%, #1a1710 100%);

  --shadow-glass: 0 0.5px 0 0 rgba(255,255,255,0.06) inset,
                  0 1px 3px rgba(0,0,0,0.2),
                  0 6px 24px rgba(0,0,0,0.15);
  --shadow-glass-lg: 0 0.5px 0 0 rgba(255,255,255,0.08) inset,
                     0 2px 8px rgba(0,0,0,0.2),
                     0 12px 40px rgba(0,0,0,0.2);
  --shadow-float: 0 16px 48px rgba(0,0,0,0.3),
                  0 2px 8px rgba(0,0,0,0.15);
  --shadow-popover: 0 12px 40px rgba(0,0,0,0.35),
                    0 4px 12px rgba(0,0,0,0.2);

  --btn-primary-gradient: linear-gradient(135deg, #30D158, #28a745);
  --btn-green-shadow: rgba(48, 209, 88, 0.3);
  --shadow-glass-btn: 0 0.5px 0 0 rgba(255,255,255,0.08) inset,
                      0 1px 2px rgba(0,0,0,0.2);

  --overlay-darker: rgba(0, 0, 0, 0.65);

  --scroll-thumb: rgba(255, 242, 221, 0.10);
  --scroll-thumb-hover: rgba(255, 242, 221, 0.18);

  --hero-text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  --hero-solid: rgb(17, 16, 13);
}

/* ===== Global ===== */
html {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-sans);
  background: var(--app-bg);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  color: var(--sys-label);
  transition: background var(--duration-slow) ease, color var(--duration-normal) ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection on content that should be copyable */
code, pre, .modal-content a, .footer-legal a,
.modal-content div, .modal-content p {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Ensure all interactive elements show pointer cursor */
a, button, [onclick], [role="button"] {
  cursor: pointer;
}

main {
  flex: 1;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== Glass Header ===== */
.glass-header {
  background: var(--glass-white);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border-bottom: 0.5px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background var(--duration-normal), border-color var(--duration-normal), box-shadow var(--duration-normal);
}

.glass-header nav {
  color: var(--sys-secondary);
  font-weight: 500;
}

[data-theme="dark"] .glass-header nav {
  color: var(--sys-label);
}

.glass-header a {
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.glass-header a:hover {
  color: var(--accent-green) !important;
}

/* ===== Hero ===== */
.hero-container {
  background: var(--hero-solid);
  color: #fff;
  box-shadow: var(--shadow-float);
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--duration-normal);
}

.hero-title-shadow {
  text-shadow: var(--hero-text-shadow);
}

/* Gradient text for hero */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 50%, var(--accent-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* ===== Glass Card ===== */
.glass-card {
  background: var(--glass-card);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}

[data-theme="dark"] .glass-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 40%);
}

.glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-glass-lg);
}

[data-theme="dark"] .glass-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===== Glass Card Focus (detected OS) ===== */
.glass-card-focus {
  background: var(--glass-white);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid rgba(52, 199, 89, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass-lg), 0 0 0 1px rgba(52, 199, 89, 0.08);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.glass-card-focus::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}

[data-theme="dark"] .glass-card-focus::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%);
}

.glass-card-focus:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 199, 89, 0.35);
  box-shadow: var(--shadow-glass-lg), 0 0 20px rgba(52, 199, 89, 0.1);
}


/* ===== Glass Pill ===== */
.glass-pill {
  background: var(--glass-card);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-glass);
  color: var(--sys-label);
  transition: all var(--duration-fast) var(--ease-out-expo);
}

.glass-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass-lg);
  border-color: rgba(52, 199, 89, 0.25);
}

/* ===== Buttons ===== */
.btn-primary {
  display: inline-block;
  background: var(--btn-primary-gradient);
  color: #fff;
  padding: 10px 24px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--btn-green-shadow);
  transition: all var(--duration-fast) var(--ease-out-expo);
}

.btn-primary:hover {
  box-shadow: 0 4px 20px var(--btn-green-shadow), 0 0 30px rgba(52,199,89,0.15);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-block;
  background: var(--glass-card);
  color: var(--sys-label);
  padding: 10px 24px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 0.5px solid var(--glass-border);
  cursor: pointer;
  backdrop-filter: var(--blur-thin);
  -webkit-backdrop-filter: var(--blur-thin);
  transition: all var(--duration-fast) var(--ease-out-expo);
  box-shadow: var(--shadow-glass-btn);
}

.btn-secondary:hover {
  background: var(--glass-active);
  border-color: rgba(52, 199, 89, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 20px var(--btn-green-shadow);
}

/* ===== Hero Download Button ===== */
.hero-download-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer !important;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out-expo);
}

.hero-download-btn > * + * { margin-left: 8px; }

.hero-download-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  color: #fff !important;
}

/* Hero hint & toggle text */
#hero-download-hint,
#more-downloads-toggle {
  text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 0 24px rgba(0,0,0,0.4);
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

#more-downloads-toggle {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  text-decoration: none;
}

#more-downloads-toggle:hover {
  color: #fff;
}

/* Dark mode — hero download button matches dark glass style */
[data-theme="dark"] .hero-download-btn {
  background: var(--glass-card);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-glass-btn);
  color: var(--cream);
}

[data-theme="dark"] .hero-download-btn:hover {
  background: var(--glass-white);
  box-shadow: var(--shadow-glass-btn), 0 4px 16px rgba(0,0,0,0.25);
  color: var(--cream);
}

/* ===== Download Cards Toggle ===== */
.download-cards {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: visibility var(--duration-normal),
              transform var(--duration-normal) var(--ease-out-expo);
}

.download-cards.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ===== Recommended Badge ===== */
.recommended {
  position: relative;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.6);
}

.recommended::after {
  content: '✓';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: var(--accent-green);
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* ===== Info Icon ===== */
.info-icon {
  color: var(--accent-orange);
  transition: color var(--duration-fast), transform var(--duration-fast);
}

.info-icon:hover {
  color: #FFB340;
  transform: scale(1.15);
}

/* ===== Theme Toggle ===== */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-card);
  border: 0.5px solid var(--glass-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--duration-fast) var(--ease-out-expo);
  color: var(--sys-label);
  flex-shrink: 0;
  box-shadow: var(--shadow-glass-btn);
}

.theme-toggle:hover {
  background: var(--glass-active);
  transform: scale(1.1);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 18px;
  height: 18px;
  position: absolute;
  transition: opacity var(--duration-normal), transform var(--duration-normal);
}

.theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg);
}

.theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(-90deg);
}

[data-theme="dark"] .theme-toggle .icon-sun {
  opacity: 0;
  transform: rotate(90deg);
}

[data-theme="dark"] .theme-toggle .icon-moon {
  opacity: 1;
  transform: rotate(0deg);
}

/* ===== Language Switch ===== */
.lang-switch {
  display: flex;
  border-radius: 999px;
  background: var(--glass-card);
  border: 0.5px solid var(--glass-border);
  padding: 2px;
  transition: background var(--duration-normal), border-color var(--duration-normal);
  flex-shrink: 0;
  box-shadow: var(--shadow-glass-btn);
}

.lang-switch button,
.lang-switch a,
.lang-switch span {
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sys-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  line-height: 1.2;
}

.lang-switch a:hover {
  color: var(--sys-label);
}

.lang-switch .active {
  background: var(--accent-green);
  color: #fff;
  box-shadow: 0 1px 4px var(--btn-green-shadow);
  cursor: default;
}

/* ===== Glass Footer ===== */
.glass-footer {
  background: var(--glass-white);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border-top: 0.5px solid var(--glass-border);
  color: var(--sys-tertiary);
  transition: background var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal);
}

.glass-footer a {
  color: var(--sys-tertiary);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.glass-footer a:hover {
  color: var(--accent-green);
}

.footer-legal {
  color: var(--sys-quaternary);
  font-size: 10px;
  line-height: 1.6;
}

/* ===== Modal ===== */
.modal-overlayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--overlay-darker);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              visibility var(--duration-normal);
  z-index: 50;
}

.modal-overlayer.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  color: var(--sys-label);
  background: var(--glass-white);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-popover);
  padding: 28px;
  animation: scaleIn var(--duration-normal) var(--ease-out-expo) both;
  transition: background var(--duration-normal), border-color var(--duration-normal);
}

.modal-content code {
  background: var(--sys-fill);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  color: var(--accent-green);
  font-family: "SF Mono", "JetBrains Mono", "Fira Code", monospace;
  font-size: 12px;
}

.modal-content strong {
  color: var(--sys-label);
}

.modal-content a {
  color: var(--accent-blue);
  transition: color var(--duration-fast);
}

.modal-content a:hover {
  color: var(--accent-green);
}

/* ===== Scroll Animations ===== */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ===== Mobile nav toggle ===== */
.mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-card);
  border: 0.5px solid var(--glass-border);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--sys-label);
  transition: all var(--duration-fast);
  box-shadow: var(--shadow-glass-btn);
}

@media (max-width: 768px) {
  .desktop-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .desktop-nav.show { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--glass-white); backdrop-filter: var(--blur-standard); -webkit-backdrop-filter: var(--blur-standard); border-bottom: 0.5px solid var(--glass-border); padding: 16px; }
  .desktop-nav.show ul { flex-direction: column; }
  .desktop-nav.show ul > * + * { margin-top: 12px; }
}

/* ===== Original Hero & Card Styles ===== */
.text-cream {
  color: #f5f5dc;
}

.bg-cream-dark {
  background-color: #e5e5ce;
}

.border-btn-top {
  border-top: 1px solid rgba(245, 245, 220, 0.53);
}

.shadow-3xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.cosmos {
  background-color: #797572;
  background-image:
    linear-gradient(-173deg, rgba(255,255,255,0.20) 0%, #000000 100%),
    linear-gradient(72deg, rgba(255,255,255,0.25) 25%, rgba(0,0,0,0.25) 100%),
    radial-gradient(47% 102%, rgba(255,255,255,0.50) 0%, rgba(21,24,32,0.60) 120%);
  background-blend-mode: multiply;
}

.cosmos-focus {
  background-color: #f7f7cd;
  background-image:
    linear-gradient(-173deg, rgba(255,255,255,0.20) 0%, #f7f7d9 100%),
    linear-gradient(72deg, rgba(255,255,255,0.25) 25%, rgba(72, 72, 65, 0.278) 100%),
    radial-gradient(47% 102%, rgba(255,255,255,0.50) 0%, rgba(126, 126, 127, 0.6) 120%);
  background-blend-mode: multiply;
}

/* ===== Light Mode — Full Glass Adaptation ===== */

/* Cosmos cards → frosted glass */
[data-theme="light"] .cosmos {
  background-color: transparent;
  background-image: none;
  background-blend-mode: normal;
  background: var(--glass-card);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid var(--glass-border);
  color: var(--sys-label);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

[data-theme="light"] .cosmos:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--shadow-glass-lg);
  transform: translateY(-4px);
}

/* Cosmos focus → near-opaque white glass */
[data-theme="light"] .cosmos-focus {
  background-color: transparent;
  background-image: none;
  background-blend-mode: normal;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  color: var(--sys-label);
  box-shadow: var(--shadow-glass-lg);
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

[data-theme="light"] .cosmos-focus:hover {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-glass-lg);
  transform: translateY(-4px);
}

/* Override bg-cream-dark in light mode */
[data-theme="light"] .bg-cream-dark {
  background-color: #f5f5f0;
}

/* Text colors: cosmos text-cream → dark */
[data-theme="light"] .text-cream.cosmos {
  color: var(--sys-label);
}

[data-theme="light"] .cosmos .text-cream {
  color: var(--sys-label);
}

/* SVG icon in Mastering button */
[data-theme="light"] .cosmos .icon path {
  fill: #1d1d1f;
}

/* Glass specular highlight on cards */
[data-theme="light"] .cosmos::before,
[data-theme="light"] .cosmos-focus::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 40%);
  pointer-events: none;
}

/* Softer shadows */
[data-theme="light"] .shadow-3xl {
  box-shadow: var(--shadow-glass);
}

/* Glass border replaces cream border */
[data-theme="light"] .border-btn-top {
  border-top: 0.5px solid var(--glass-border);
}

/* Download buttons — light glass pill */
[data-theme="light"] section[id$="-download"] a[id$="-download-link"] {
  background: rgba(255, 255, 255, 0.65);
  color: var(--sys-label);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: var(--shadow-glass-btn);
}

[data-theme="light"] section[id$="-download"] a[id$="-download-link"]:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-glass-btn), 0 2px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* ===== Probe Modal ===== */
.probe-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 60;
  background: var(--overlay-darker);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out-expo),
              visibility var(--duration-normal);
}

.probe-overlay.probe-modal-show {
  opacity: 1;
  visibility: visible;
}

.probe-overlay.probe-modal-done {
  opacity: 0;
  visibility: hidden;
}

.probe-modal {
  background: var(--glass-white);
  backdrop-filter: var(--blur-standard);
  -webkit-backdrop-filter: var(--blur-standard);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-popover);
  padding: 24px 28px;
  min-width: 240px;
  transform: scale(0.96);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.probe-overlay.probe-modal-show .probe-modal {
  transform: scale(1);
}

.probe-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 16px;
  text-align: center;
}

.probe-list {
  display: flex;
  flex-direction: column;
}

.probe-list > * + * { margin-top: 10px; }

.probe-header {
  border-bottom: 0.5px solid var(--sys-separator);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.probe-header .probe-label,
.probe-header .probe-ping,
.probe-header .probe-speed,
.probe-header .probe-status {
  font-size: 11px;
  color: var(--sys-secondary);
  font-weight: 500;
}

.probe-row {
  display: flex;
  align-items: center;
}

.probe-row > * + * { margin-left: 10px; }

.probe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--sys-quaternary);
  transition: background var(--duration-fast);
}

.probe-probing {
  background: var(--accent-orange);
  animation: probePulse 1s ease-in-out infinite;
}

.probe-testing {
  background: var(--accent-blue);
  animation: probePulse 1s ease-in-out infinite;
}

.probe-done {
  background: var(--sys-tertiary);
  animation: none;
}

.probe-won {
  background: var(--accent-green);
  animation: none;
}

.probe-failed {
  background: var(--accent-red);
  opacity: 0.5;
  animation: none;
}

.probe-idle {
  background: var(--sys-quaternary);
  opacity: 0.4;
  animation: none;
}

.probe-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--sys-label);
  flex: 1;
  min-width: 50px;
}

.probe-ping,
.probe-speed {
  font-size: 12px;
  color: var(--sys-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 65px;
  text-align: right;
}

.probe-status {
  font-size: 12px;
  color: var(--sys-tertiary);
  font-weight: 500;
  min-width: 50px;
  text-align: right;
}

.probe-status-won {
  color: var(--accent-green);
  font-weight: 600;
}

/* ===== Keyframes ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 199, 89, 0); }
}

.version-tag:empty {
  display: none;
}

.version-tag:empty + .version-sep {
  display: none;
}

.version-tag {
  font-weight: 600;
  opacity: 0;
  animation: versionFadeIn 0.4s ease forwards;
}

@keyframes versionFadeIn {
  to { opacity: 1; }
}

.probe-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sys-separator);
  text-align: center;
  font-size: 13px;
  color: var(--sys-secondary);
}

.probe-footer-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sys-label);
}

@keyframes probePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes flip {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes flip-out {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0%); }
}
/* ===== Section Layout ===== */
.section-block {
  padding: var(--section-gap) 0;
}

.section-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 640px) {
  .section-inner { padding: 0 32px; }
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--section-title-gap);
  color: var(--sys-label);
  line-height: 1.3;
}

@media (min-width: 1024px) {
  .section-title { font-size: 40px; }
}

.section-desc {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--section-title-gap);
  color: var(--sys-secondary);
  font-size: 16px;
  line-height: 1.8;
}

/* ===== Block 2: One-liner ===== */
.oneliner-quote {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--section-title-gap);
  color: var(--sys-label);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .oneliner-quote { font-size: 32px; }
}

.keyword-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .keyword-grid { grid-template-columns: repeat(4, 1fr); }
}

.keyword-card {
  padding: 28px 20px;
  text-align: center;
}

.keyword-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-green);
  margin-bottom: 8px;
}

.keyword-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.6;
}

/* ===== Block 3: Philosophy ===== */
.philosophy-body {
  max-width: 720px;
  margin: 0 auto var(--section-title-gap);
  font-size: 16px;
  line-height: 1.9;
  color: var(--sys-secondary);
}

.compare-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 0.5px solid var(--sys-separator);
}

.compare-table th {
  font-weight: 600;
  color: var(--sys-label);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compare-table td {
  color: var(--sys-secondary);
}

.col-highlight {
  color: var(--accent-green) !important;
  font-weight: 600;
}

.compare-table th.col-highlight {
  color: var(--accent-green) !important;
}

/* ===== Block 4: Problems ===== */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
}

.problem-card {
  padding: 32px 28px;
}

.problem-number {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.1);
  color: var(--accent-green);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}

.problem-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 8px;
  line-height: 1.5;
}

.problem-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

.problem-divider {
  height: 2px;
  width: 40px;
  background: linear-gradient(90deg, var(--accent-green), transparent);
  border-radius: 1px;
  margin: 20px 0;
}

[data-theme="dark"] .problem-divider {
  background: linear-gradient(90deg, #D4A853, transparent);
}

.problem-answer {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

.problem-answer strong {
  color: var(--accent-green);
  font-weight: 600;
}

/* ===== Block 5: Capabilities ===== */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .capability-grid { grid-template-columns: repeat(3, 1fr); }
}

.capability-card {
  padding: 32px 28px;
}

.capability-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-base);
  background: var(--glass-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent-green);
}

.capability-icon svg {
  width: 24px;
  height: 24px;
}

.capability-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 8px;
}

.capability-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

/* ===== Block: Agent Swarm ===== */
.swarm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .swarm-grid { grid-template-columns: repeat(3, 1fr); }
}

.swarm-card {
  padding: 32px 28px;
  position: relative;
}

.swarm-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
  opacity: 0;
  transition: opacity var(--duration-normal);
}

[data-theme="dark"] .swarm-card::after {
  background: linear-gradient(90deg, #D4A853, #E8C87A);
}

.swarm-card:hover::after {
  opacity: 1;
}

.swarm-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-base);
  background: linear-gradient(135deg, rgba(175, 82, 222, 0.12), rgba(0, 122, 255, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--accent-purple);
}

[data-theme="dark"] .swarm-icon {
  background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(232, 200, 122, 0.1));
  color: #D4A853;
}

.swarm-icon svg {
  width: 24px;
  height: 24px;
}

.swarm-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 8px;
}

.swarm-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

/* ===== Block 6: Use Cases ===== */
.usecase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .usecase-grid { grid-template-columns: repeat(3, 1fr); }
}

.usecase-card {
  padding: 28px 24px 28px 28px;
  border-left: 3px solid var(--accent-blue);
}

.usecase-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 8px;
}

.usecase-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

/* ===== Block 7: Security ===== */
.security-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .security-grid { grid-template-columns: repeat(3, 1fr); }
}

.security-card {
  padding: 36px 28px;
  text-align: center;
}

.security-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
}

.security-icon svg {
  width: 24px;
  height: 24px;
}

.security-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--sys-label);
  margin-bottom: 8px;
}

.security-desc {
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.7;
}

/* ===== Block 8: Migration ===== */
.migration-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.migration-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}

.step-number {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--sys-label);
}

.migration-arrow {
  color: var(--sys-tertiary);
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .migration-steps { flex-direction: column; }
  .migration-arrow { display: none; }
}

.benefit-list {
  padding: 28px;
}

.benefit-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--sys-secondary);
  line-height: 1.6;
}

.benefit-item + .benefit-item {
  border-top: 0.5px solid var(--sys-separator);
}

.benefit-check {
  color: var(--accent-green);
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Block 10: CTA ===== */
.cta-block {
  padding: 80px 0;
  text-align: center;
  border-radius: var(--radius-3xl);
}

.cta-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--sys-label);
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .cta-title { font-size: 40px; }
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cta-subtitle {
  color: var(--sys-secondary);
  font-size: 16px;
  margin-bottom: 32px;
  text-align: center;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
  padding: 14px 32px;
  font-size: 16px;
}

/* ===== Dark mode — section accents: warm gold instead of green ===== */
[data-theme="dark"] .keyword-title {
  color: #D4A853;
}

[data-theme="dark"] .col-highlight {
  color: #D4A853 !important;
}

[data-theme="dark"] .compare-table th.col-highlight {
  color: #D4A853 !important;
}

[data-theme="dark"] .problem-answer strong {
  color: #D4A853;
}

[data-theme="dark"] .capability-icon {
  color: #D4A853;
}

[data-theme="dark"] .security-icon {
  background: linear-gradient(135deg, #D4A853, var(--accent-blue));
}

[data-theme="dark"] .step-number {
  background: #D4A853;
}

[data-theme="dark"] .benefit-check {
  color: #D4A853;
}

[data-theme="dark"] .usecase-card {
  border-left-color: var(--accent-orange);
}

[data-theme="dark"] .problem-number {
  background: rgba(212, 168, 83, 0.15);
  color: #D4A853;
}

/* ===== Card visual enhancements ===== */
.keyword-card {
  padding: 32px 20px;
  text-align: center;
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 16px;
}

[data-theme="dark"] .section-eyebrow {
  color: #D4A853;
}

.keyword-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-base);
  background: var(--glass-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--accent-green);
}

.keyword-icon svg {
  width: 22px;
  height: 22px;
}

[data-theme="dark"] .keyword-icon {
  color: #D4A853;
}

.capability-card {
  padding: 32px 28px;
  position: relative;
}

.capability-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--accent-green), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
}

[data-theme="dark"] .capability-card::after {
  background: linear-gradient(90deg, #D4A853, transparent);
}

.capability-card:hover::after {
  opacity: 1;
}

.usecase-card {
  padding: 28px 24px 28px 28px;
  border-left: 3px solid var(--accent-blue);
  position: relative;
}

.usecase-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(0, 122, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--accent-blue);
}

.usecase-icon svg {
  width: 20px;
  height: 20px;
}

[data-theme="dark"] .usecase-icon {
  background: rgba(255, 149, 0, 0.1);
  color: var(--accent-orange);
}

.security-card {
  padding: 36px 28px;
  text-align: center;
}

.problem-card {
  padding: 32px 28px;
  position: relative;
}

/* Alternate section backgrounds for visual rhythm */
#philosophy {
  position: relative;
}

#philosophy::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-dim);
  pointer-events: none;
  z-index: -1;
}

#capabilities {
  position: relative;
}

#capabilities::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-dim);
  pointer-events: none;
  z-index: -1;
}

#security {
  position: relative;
}

#security::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-dim);
  pointer-events: none;
  z-index: -1;
}

.cta-block {
  padding: 80px 0;
  text-align: center;
  position: relative;
}

.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-dim);
  pointer-events: none;
  z-index: -1;
}

/* ===== Mobile responsive overrides ===== */
@media (max-width: 768px) {
  :root {
    --section-gap: 80px;
    --section-title-gap: 32px;
    --card-gap: 16px;
  }
  .section-title { font-size: 26px; }
  .oneliner-quote { font-size: 20px; }
  .cta-title { font-size: 26px; }
}

/* ===== Backdrop-filter fallback (Chrome <76, Firefox <103) ===== */
/* Use more opaque backgrounds when backdrop-filter is not supported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-header { background: rgba(242, 240, 237, 0.97); }
  [data-theme="dark"] .glass-header { background: rgba(30, 26, 20, 0.97); }
  .modal-content,
  .probe-modal { background: rgba(242, 240, 237, 0.98); }
  [data-theme="dark"] .modal-content,
  [data-theme="dark"] .probe-modal { background: rgba(30, 26, 20, 0.98); }
  .modal-overlayer,
  .probe-overlay { background: rgba(0, 0, 0, 0.65); }
  .glass-footer { background: rgba(242, 240, 237, 0.95); }
  [data-theme="dark"] .glass-footer { background: rgba(30, 26, 20, 0.95); }
  .glass-card,
  .glass-card-focus { background: rgba(255, 255, 255, 0.88); }
  [data-theme="dark"] .glass-card,
  [data-theme="dark"] .glass-card-focus { background: rgba(38, 33, 26, 0.88); }
}