html,
html[data-theme="black"] {
  color-scheme: dark;
  background: #090b14;
}

body,
html[data-theme="black"] body {
  display: block;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 75% 17%, rgba(86, 63, 180, .13), transparent 34%),
    radial-gradient(ellipse at 2% 46%, rgba(32, 99, 162, .08), transparent 30%),
    #090b14 !important;
  color: #f5f4fb !important;
  font-family: "DM Sans", sans-serif;
}

.header,
html[data-theme="black"] .header {
  position: relative;
  z-index: 2;
  height: 88px;
  padding: 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.header-content {
  width: min(1160px, calc(100% - 64px));
  max-width: 1160px;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  justify-content: space-between;
  gap: 20px;
}

.header-logo,
.header-logo.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: #f5f4fb !important;
  font: 700 21px "Space Grotesk", sans-serif;
  letter-spacing: -.8px;
  -webkit-text-fill-color: currentColor;
}

.header-logo .brand-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(185,164,255,.42);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(167,139,250,.27), rgba(81,113,255,.12));
  color: #d7c8ff;
  font-size: 15px;
}

.header-logo .brand-period { color: #a78bfa; }
.download-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.download-home-button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(191,170,255,.22); border-radius: 10px; background: rgba(145,117,230,.08); color: #e5dcff; font-size: 12px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.download-home-button:hover { transform: translateY(-1px); background: rgba(145,117,230,.17); }
.download-home-button span { color: #c9b4ff; }
.header .header-cta { padding: 11px 15px; border: 1px solid rgba(191,170,255,.22); border-radius: 10px; background: rgba(145,117,230,.08); color: #e5dcff; font-size: 12px; font-weight: 700; }

.container {
  width: min(1160px, calc(100% - 64px));
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;
}

.content {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 55px;
  gap: 0;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 68px;
  min-height: 570px;
  padding: 70px 0;
}

.hero-copy,
html[data-theme="black"] .hero-copy {
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.hero-copy::after { display: none; }
.hero-copy .eyebrow { color: #b7a5ed; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; }
.hero-copy h1 { margin: 25px 0 20px; color: #f5f4fb; font: 600 clamp(42px, 5.2vw, 64px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -2.6px; }
.subtitle,
html[data-theme="black"] .subtitle { max-width: 460px; margin-bottom: 28px; color: #a4a6b6 !important; font-size: 14px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid rgba(201,184,255,.48);
  border-radius: 10px;
  background: linear-gradient(110deg, #8867db, #596fce);
  box-shadow: 0 9px 28px rgba(104,85,200,.22);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.download-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(104,85,200,.38); }
.hero-copy .download-btn:first-child { background: linear-gradient(110deg, #8867db, #596fce); }
.hero-copy .download-btn:first-child:hover { background: linear-gradient(110deg, #8867db, #596fce); }
.hero-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 35px; }
.hero-metrics .metric,
html[data-theme="black"] .hero-metrics .metric {
  min-width: 103px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 9px;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
}
.hero-metrics .metric strong { display: block; color: #e4ddf7; font: 600 16px "Space Grotesk", sans-serif; }
.hero-metrics .metric span { display: block; margin-top: 4px; color: #8e91a2 !important; font-size: 9px; }

.hero-panel { min-width: 0; padding: 0; }
.stack-card {
  position: relative;
  min-height: 390px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(180,161,255,.2);
  border-radius: 19px;
  background: radial-gradient(ellipse at 80% 10%, rgba(102,95,190,.25), transparent 45%), linear-gradient(145deg, rgba(24,27,44,.96), rgba(13,16,28,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.045);
}
.platform-badge { border-color: rgba(167,139,250,.22); border-radius: 6px; background: rgba(137,112,211,.1); color: #bea8ff; }
.app-window,
html[data-theme="black"] .app-window { border: 1px solid rgba(255,255,255,.1) !important; border-radius: 12px; background: rgba(8,10,18,.78) !important; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.app-window-head,
html[data-theme="black"] .app-window-head { border-bottom: 1px solid rgba(255,255,255,.07) !important; background: rgba(255,255,255,.025) !important; }
.app-window-body,
html[data-theme="black"] .app-window-body { background: transparent !important; }
.mini-card,
html[data-theme="black"] .mini-card { border: 1px solid rgba(255,255,255,.07) !important; border-radius: 9px; background: rgba(255,255,255,.03) !important; }
.mini-card strong { color: #e4e4ed !important; }
.mini-card span { color: #9a9daf !important; }

.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 8px 0 22px; }
.download-card,
html[data-theme="black"] .download-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  column-gap: 16px;
  row-gap: 11px;
  padding: 22px;
  border: 1px solid rgba(180,161,255,.14) !important;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(22,25,40,.9), rgba(13,15,25,.86)) !important;
  box-shadow: none !important;
  transform: none;
}
.download-card::before { display: none; }
.download-card:hover { border-color: rgba(178,157,255,.3) !important; background: linear-gradient(150deg, rgba(29,31,49,.95), rgba(15,17,29,.92)) !important; transform: translateY(-3px); }
.download-icon { grid-row: span 2; border: 1px solid rgba(176,143,255,.2); border-radius: 10px; background: rgba(157,122,238,.12); }
.download-icon img { object-fit: contain; }
.download-card h2 { align-self: end; margin: 0; color: #e8e7ef !important; font: 600 16px "Space Grotesk", sans-serif; }
.download-card p { grid-column: 1 / -1; min-height: 45px; margin: 0; color: #9b9eae !important; font-size: 11px; line-height: 1.7; }
.download-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.version-pill { border: 1px solid rgba(255,255,255,.07); border-radius: 6px; background: rgba(255,255,255,.025); color: #9b9eae !important; }
.download-meta .download-btn { min-height: 37px; padding-inline: 14px; }

.features,
.system-requirements,
.installation-steps,
.support-panel,
html[data-theme="black"] .features,
html[data-theme="black"] .system-requirements,
html[data-theme="black"] .installation-steps,
html[data-theme="black"] .support-panel {
  margin: 14px 0;
  padding: 23px;
  border: 1px solid rgba(164,147,233,.14) !important;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(18,21,34,.92), rgba(13,15,25,.92)) !important;
  box-shadow: none !important;
}
.features h3,
.system-requirements h3,
.installation-steps h3,
.support-panel h3 { margin-bottom: 17px; color: #e8e7ef !important; font: 600 17px "Space Grotesk", sans-serif; }
.features-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.feature-item,
html[data-theme="black"] .feature-item,
.requirement,
html[data-theme="black"] .requirement,
.step,
html[data-theme="black"] .step {
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 9px;
  background: rgba(255,255,255,.025) !important;
  color: #b7b4c2 !important;
  box-shadow: none !important;
}
.feature-item { min-height: 68px; padding: 12px; }
.feature-icon { color: #c0a5ff; }
.feature-text { color: #a4a6b6 !important; font-size: 11px; line-height: 1.65; }
.requirements-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.requirement { padding: 16px; }
.requirement h4,
.step-content h4 { margin: 0 0 7px; color: #e8e7ef !important; font: 600 13px "Space Grotesk", sans-serif; }
.requirement p,
.step-content p,
.support-panel p { margin: 0; color: #999cad !important; font-size: 11px; line-height: 1.8; }
.steps { display: grid; gap: 8px; }
.step { display: flex; align-items: flex-start; gap: 13px; padding: 13px; }
.step-number { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border: 1px solid rgba(167,139,250,.22); border-radius: 8px; background: rgba(153,127,231,.1); color: #c1adff; font: 600 10px "Space Grotesk", sans-serif; }
.support-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.support-panel h3 { margin: 0 0 6px; }
.support-panel p { max-width: 670px; }
.support-link { flex: 0 0 auto; border: 1px solid rgba(191,170,255,.25); border-radius: 8px; background: rgba(145,117,230,.08); color: #d6c6ff !important; }
.footer { min-height: 76px; border-top: 1px solid rgba(255,255,255,.06); background: transparent; color: #838697; font-size: 10px; }
.footer p { margin: 0; }

.download-toast { background: rgba(5,6,12,.72); }
.download-toast-card { border: 1px solid rgba(169,147,245,.2); border-radius: 15px; background: linear-gradient(145deg, rgba(24,27,44,.98), rgba(13,16,28,.98)); color: #f5f4fb; }
.download-toast-card h2 { color: #f5f4fb !important; }
.download-toast-card p { color: #a4a6b6 !important; }
.download-toast-heading p { color: #b8bdcb !important; }
.download-toast-steps li { color: #d7d9e3; }
.download-toast-card .download-toast-note { color: #ffe0a3 !important; }
.download-toast-close { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #f5f4fb; }
.download-toast-close:hover { background: rgba(255,255,255,.13); }

@media (max-width: 900px) {
  .header-content, .container { width: min(100% - 44px, 680px); }
  .hero { grid-template-columns: 1fr; gap: 35px; min-height: 0; padding: 58px 0; }
  .hero-copy { max-width: 600px; }
  .hero-panel { width: min(100%, 520px); margin-inline: auto; }
  .stack-card { min-height: 340px; }
}

@media (max-width: 640px) {
  .header { height: 70px; }
  .header-content, .container { width: calc(100% - 36px); }
  .header-logo, .header-logo.brand { gap: 8px; font-size: 18px; }
  .header-logo .brand-mark { width: 28px; height: 28px; }
  .download-header-actions { gap: 7px; }
  .download-home-button, .header .header-cta { padding: 9px 10px; font-size: 10px; }
  .header .header-cta { padding: 10px 11px; font-size: 10px; }
  .hero { gap: 27px; padding: 48px 0 42px; }
  .hero-copy h1 { margin: 19px 0 16px; font-size: clamp(39px, 11vw, 53px); letter-spacing: -2px; }
  .subtitle { font-size: 13px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 9px; }
  .hero-actions .download-btn { width: 100%; }
  .hero-metrics { gap: 7px; }
  .hero-metrics .metric { min-width: 0; flex: 1; padding: 10px; }
  .hero-metrics .metric strong { font-size: 14px; }
  .stack-card { min-height: 300px; padding: 19px; }
  .download-grid, .features-list, .requirements-grid { grid-template-columns: 1fr; }
  .download-card { padding: 18px; }
  .features, .system-requirements, .installation-steps, .support-panel { padding: 18px; }
  .support-panel { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}