.hero-home {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  padding: 96px 0 72px;
  background: #f5f8ff;
}

.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(120deg, rgba(249, 251, 255, .98) 0%, rgba(244, 248, 255, .92) 43%, rgba(238, 246, 255, .72) 72%, rgba(248, 250, 255, .94) 100%);
}

.hero-home::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -2;
  background:
    radial-gradient(circle at 78% 27%, rgba(37, 99, 235, .34) 0, rgba(37, 99, 235, 0) 30%),
    radial-gradient(circle at 58% 78%, rgba(34, 211, 238, .24) 0, rgba(34, 211, 238, 0) 28%),
    radial-gradient(circle at 92% 72%, rgba(168, 85, 247, .22) 0, rgba(168, 85, 247, 0) 26%),
    radial-gradient(circle at 30% 10%, rgba(96, 165, 250, .14) 0, rgba(96, 165, 250, 0) 24%);
  filter: blur(22px) saturate(120%);
  transform: translate3d(0, 0, 0) scale(1.03);
  animation: hero-light-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-home .hero-grid { position: relative; display: block; min-height: min(610px, calc(100svh - 168px)); }
.hero-home .hero-content { position: relative; z-index: 3; width: min(100%, 650px); padding-top: 42px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--primary-dark); font-size: .82rem; font-weight: 750; text-transform: uppercase; }
.hero-kicker span { width: 30px; height: 2px; background: var(--accent); }
.hero-home .hero-title { max-width: 650px; margin-bottom: 24px; color: #102a56; font-size: 5.75rem; line-height: .96; font-weight: 820; white-space: normal; overflow-wrap: anywhere; }
.hero-home .hero-subtitle { max-width: 580px; margin-bottom: 14px; color: #102a56; font-size: 1.65rem; }
.hero-home .hero-desc { max-width: 520px; margin-bottom: 34px; color: #52657f; font-size: 1.02rem; }
.home-page .nav-links a:hover, .home-page .nav-links a.active, .download-page .nav-links a:hover, .download-page .nav-links a.active { background: rgba(37, 99, 235, .1); color: var(--primary); }

.btn-download { min-height: 50px; padding: 12px 18px 12px 22px; border-radius: 8px; background: var(--primary); color: #fff; box-shadow: 0 16px 38px rgba(37, 99, 235, .22); }
.btn-download:hover { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 20px 42px rgba(37, 99, 235, .3); }
.btn-download .btn-arrow { margin-left: 8px; font-size: 1.4rem; }
.hero-home .btn-group { min-height: 50px; border-radius: 8px; background: rgba(255, 255, 255, .65); backdrop-filter: blur(12px); }
.hero-home .btn-group:hover { background: var(--primary); color: #fff; }

.hero-visual { position: absolute; top: 0; right: 0; z-index: 1; width: min(46%, 590px); height: 100%; }
.hero-home .hero-showcase { position: absolute; inset: 0; min-height: 0; gap: 16px; justify-content: flex-end; }
.hero-home .showcase-card { width: min(18vw, 226px); margin: 0; animation: showcase-float 7s ease-in-out infinite; }
.hero-home .showcase-card:nth-child(1) { transform: translateY(34px); }
.hero-home .showcase-card:nth-child(2) { transform: translateY(-28px); animation-delay: -3.5s; }
.hero-home .showcase-card img { filter: drop-shadow(0 30px 54px rgba(18, 63, 133, .24)); }

.hero-scroll { position: absolute; left: 50%; bottom: 24px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(16, 42, 86, .16); border-radius: 50%; color: #52657f; animation: scroll-pulse 2.4s ease-in-out infinite; }

@keyframes showcase-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes scroll-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes hero-light-drift {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1.03); }
  50% { transform: translate3d(1.5%, 1.5%, 0) scale(1.07); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.04); }
}

.home-page .features { position: relative; padding: 76px 0 100px; background: #f3f6fb; }
.features-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.features-heading .eyebrow { margin-bottom: 7px; color: var(--primary-dark) !important; }
.features-heading h2 { width: min(100%, 620px); color: #102a56; font-size: 2.15rem; line-height: 1.18; }
.home-page .features-grid { gap: 20px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.home-page .feature-card { position: relative; min-height: 280px; border: 1px solid rgba(37, 99, 235, .1); border-radius: 18px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 48px rgba(36, 72, 132, .08); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.home-page .feature-card:hover { transform: translateY(-5px); border-color: rgba(37, 99, 235, .22); box-shadow: 0 24px 58px rgba(36, 72, 132, .14); }
.feature-index { position: absolute; top: 32px; right: 30px; color: #91a3bd; font-size: .75rem; font-variant-numeric: tabular-nums; }
.home-page .feature-card .feature-icon { border-radius: 12px; }
.feature-cyan .feature-icon { background: #e0f2fe; color: #0284c7; }
.feature-green .feature-icon { background: #dbeafe; color: #2563eb; }
.feature-coral .feature-icon { background: #ede9fe; color: #7c3aed; }

.download-shell { min-height: 100vh; background: #f3f6fb; }
.download-hero { position: relative; overflow: hidden; padding: 92px 0 54px; background: #102a56; color: #fff; }
.download-hero::after { content: ""; position: absolute; top: -120px; right: -60px; width: 420px; height: 420px; border: 1px solid rgba(96, 165, 250, .28); border-radius: 50%; box-shadow: 0 0 0 70px rgba(34, 211, 238, .05), 0 0 0 140px rgba(167, 139, 250, .035); }
.download-hero-inner { position: relative; z-index: 1; }
.download-hero .eyebrow { color: #7dd3fc !important; }
.download-hero h1 { max-width: 720px; margin-bottom: 18px; font-size: 4.4rem; line-height: 1; }
.download-hero p:last-child { max-width: 600px; color: rgba(255, 255, 255, .7); font-size: 1.04rem; }
.download-section { padding-top: 42px; padding-bottom: 90px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-card { display: grid; min-height: 310px; padding: 26px; border: 1px solid rgba(16, 42, 86, .1); border-radius: 8px; background: #fff; box-shadow: 0 16px 48px rgba(36, 72, 132, .07); }
.download-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.download-platform-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 8px; background: #dbeafe; color: #2563eb; font-size: 1.4rem; }
.platform-windows .download-platform-icon, .platform-macos .download-platform-icon { background: #e8edf7; color: #315b91; }
.platform-harmony .download-platform-icon { background: #fbe7e1; color: #c34a32; }
.release-badge { padding: 5px 8px; border-radius: 5px; background: #eef2f8; color: #52657f; font-size: .72rem; font-weight: 700; }
.download-card-body { align-self: center; padding: 24px 0; }
.download-card h2 { margin-bottom: 6px; color: #102a56; font-size: 1.55rem; }
.download-version { color: #2563eb; font-size: .92rem; font-weight: 720; }
.download-version span { margin-left: 8px; color: #8797ad; font-weight: 500; }
.download-notes { display: -webkit-box; overflow: hidden; margin-top: 13px; color: #667a95; font-size: .88rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.download-action { display: flex; align-items: center; justify-content: space-between; align-self: end; min-height: 46px; padding-top: 14px; border-top: 1px solid rgba(16, 42, 86, .1); color: #102a56; font-size: .9rem; font-weight: 720; }
.download-action i { color: var(--primary); font-size: 1.25rem; transition: transform .2s ease; }
.download-action:hover i { transform: translateY(3px); }
.download-empty { display: grid; min-height: 330px; place-content: center; gap: 14px; text-align: center; color: #667a95; }
.download-empty i { color: var(--primary); font-size: 2rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-home, :root:not([data-theme="light"]) .home-page .features, :root:not([data-theme="light"]) .download-shell { background: #080f20; }
  :root:not([data-theme="light"]) .hero-home::before { background: linear-gradient(115deg, rgba(8,15,32,.98), rgba(9,18,40,.9) 44%, rgba(16,31,66,.62)); }
  :root:not([data-theme="light"]) .hero-home::after { opacity: .72; }
  :root:not([data-theme="light"]) .hero-home .hero-title, :root:not([data-theme="light"]) .hero-home .hero-subtitle, :root:not([data-theme="light"]) .features-heading h2, :root:not([data-theme="light"]) .feature-card h3, :root:not([data-theme="light"]) .download-card h2, :root:not([data-theme="light"]) .download-action { color: #eff6ff; }
  :root:not([data-theme="light"]) .hero-home .hero-desc { color: #a7b8d3; }
  :root:not([data-theme="light"]) .feature-card, :root:not([data-theme="light"]) .download-card { background: #111a2e; border-color: rgba(147,197,253,.13); }
}

:root[data-theme="dark"] .hero-home, :root[data-theme="dark"] .home-page .features, :root[data-theme="dark"] .download-shell { background: #080f20; }
:root[data-theme="dark"] .hero-home::before { background: linear-gradient(115deg, rgba(8,15,32,.98), rgba(9,18,40,.9) 44%, rgba(16,31,66,.62)); }
:root[data-theme="dark"] .hero-home::after { opacity: .72; }
:root[data-theme="dark"] .hero-home .hero-title, :root[data-theme="dark"] .hero-home .hero-subtitle, :root[data-theme="dark"] .features-heading h2, :root[data-theme="dark"] .feature-card h3, :root[data-theme="dark"] .download-card h2, :root[data-theme="dark"] .download-action { color: #eff6ff; }
:root[data-theme="dark"] .hero-home .hero-desc { color: #a7b8d3; }
:root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .download-card { background: #111a2e; border-color: rgba(147,197,253,.13); }

@media (max-width: 1366px) and (min-width: 721px) {
  .hero-home .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, min(58%, 650px)) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 42px);
    align-items: stretch;
  }
  .hero-home .hero-content { width: 100%; }
  .hero-visual { position: relative; top: auto; right: auto; width: 100%; height: auto; align-self: stretch; }
  .hero-home .hero-showcase { justify-content: flex-start; }
}

@media (max-width: 980px) {
  .hero-home .hero-content { width: 100%; padding-top: 24px; }
  .hero-home .hero-title { font-size: 4.25rem; }
  .hero-home .hero-subtitle { font-size: 1.35rem; }
  .hero-visual { width: 100%; }
  .hero-home .showcase-card { width: min(21vw, 190px); }
}

@media (max-width: 720px) {
  .hero-home { height: 100vh; height: 100svh; min-height: 640px; padding: 88px 0 56px; }
  .hero-home .hero-grid { min-height: 0; }
  .hero-home .hero-content { width: 100%; padding-top: 8px; }
  .hero-home .hero-title { font-size: 3.5rem; white-space: normal; }
  .hero-home .hero-subtitle { font-size: 1.2rem; }
  .hero-home .hero-desc { margin-bottom: 26px; }
  .hero-visual.has-showcase { position: relative; width: 100%; height: 300px; margin: 48px auto 0; }
  .hero-home .hero-showcase { align-items: flex-start; justify-content: center; }
  .hero-home .showcase-card { width: min(44vw, 172px); }
  .hero-home .showcase-card:nth-child(1), .hero-home .showcase-card:nth-child(2) { transform: none; }
  .hero-scroll { display: none; }
  .home-page .features { padding: 54px 0 64px; }
  .features-heading { display: block; }
  .features-heading h2 { font-size: 1.65rem; }
  .home-page .features-grid, .download-grid { grid-template-columns: 1fr; }
  .home-page .feature-card { min-height: 230px; }
  .download-hero { padding: 68px 0 42px; }
  .download-hero h1 { font-size: 3rem; }
  .download-section { padding-top: 24px; padding-bottom: 60px; }
  .download-card { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home::after, .hero-home .showcase-card, .hero-scroll { animation: none; }
  .home-page .feature-card { transition: none; }
}