:root {
  --hy-premium-bg: #eef3f1;
  --hy-premium-ink: #0b1726;
  --hy-premium-muted: #5d6b7c;
  --hy-premium-line: rgba(255, 255, 255, 0.58);
  --hy-premium-glass: rgba(255, 255, 255, 0.72);
  --hy-premium-accent: #0a8f85;
  --hy-premium-blue: #0a66b7;
  --hy-premium-shadow: 0 32px 80px rgba(10, 24, 40, 0.18);
  --hy-premium-shadow-soft: 0 16px 40px rgba(10, 24, 40, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --hy-premium-bg: #07111d;
    --hy-premium-ink: #f7fbff;
    --hy-premium-muted: #b6c2d0;
    --hy-premium-line: rgba(255, 255, 255, 0.16);
    --hy-premium-glass: rgba(9, 22, 35, 0.72);
    --hy-premium-shadow: 0 32px 80px rgba(0, 0, 0, 0.34);
    --hy-premium-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.28);
  }
}

.modal-section:not(.product-detail) {
  --modal-scene: url("media/hero-factory.jpg");
  --modal-position: center;
  isolation: isolate;
  padding: 88px 24px 40px !important;
  color: var(--hy-premium-ink) !important;
  background: var(--hy-premium-bg) !important;
}

#platform.modal-section {
  --modal-scene: url("media/platform-poster.jpg");
}

#factory.modal-section {
  --modal-scene: url("media/workshop.jpg");
  --modal-position: center 42%;
}

#video.modal-section {
  --modal-scene: url("media/campus.jpg");
}

#service.modal-section,
#selection-tool.modal-section {
  --modal-scene: url("media/fan-products.jpg");
}

#app-install.modal-section {
  --modal-scene: url("media/platform-poster.jpg");
}

#solutions.modal-section,
#news.modal-section {
  --modal-scene: url("media/team-flag.jpg");
}

#contact.modal-section {
  --modal-scene: url("media/campus.jpg");
}

.modal-section:not(.product-detail).is-modal-open::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(244, 248, 247, 0.42), rgba(244, 248, 247, 0.82) 62%, rgba(244, 248, 247, 0.96)),
    linear-gradient(115deg, rgba(255, 255, 255, 0.84), rgba(221, 235, 229, 0.22) 44%, rgba(8, 28, 45, 0.36)),
    var(--modal-scene) var(--modal-position) / cover no-repeat !important;
  content: "";
  transform: scale(1.02);
  animation: hySceneEase 900ms ease both;
}

.modal-section:not(.product-detail).is-modal-open::after {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 42vh;
  background:
    linear-gradient(180deg, rgba(238, 243, 241, 0), rgba(238, 243, 241, 0.78) 58%, rgba(238, 243, 241, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 18px);
  content: "";
  pointer-events: none;
}

.modal-section:not(.product-detail).is-modal-open > :not(.modal-close) {
  width: min(1184px, 100%) !important;
  max-width: 1184px !important;
  margin: 0 auto 24px !important;
  border: 1px solid var(--hy-premium-line) !important;
  border-radius: 8px !important;
  color: var(--hy-premium-ink) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), var(--hy-premium-glass) 54%, rgba(255, 255, 255, 0.62)) !important;
  box-shadow: var(--hy-premium-shadow) !important;
  backdrop-filter: blur(24px) saturate(1.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.14);
  animation: hyContentReveal 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  overflow: hidden;
}

.platform-section.is-modal-open,
.factory-section.is-modal-open,
.video-section.is-modal-open,
.contact-section.is-modal-open,
.patent-section.is-modal-open {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 24px !important;
  align-items: center !important;
}

.service-section.is-modal-open,
.news-section.is-modal-open,
.system-flow.is-modal-open,
.service-chain-section.is-modal-open {
  display: block !important;
}

.modal-section:not(.product-detail) .eyebrow,
.modal-section:not(.product-detail) .section-title span {
  color: var(--hy-premium-accent) !important;
  letter-spacing: 0 !important;
}

.modal-section:not(.product-detail) h2,
.modal-section:not(.product-detail) h3,
.modal-section:not(.product-detail) h4,
.modal-section:not(.product-detail) h5,
.modal-section:not(.product-detail) strong {
  color: var(--hy-premium-ink) !important;
  letter-spacing: 0 !important;
}

.modal-section:not(.product-detail) p,
.modal-section:not(.product-detail) li,
.modal-section:not(.product-detail) span,
.modal-section:not(.product-detail) small {
  color: var(--hy-premium-muted) !important;
  letter-spacing: 0 !important;
}

.service-section.is-modal-open .service-heading,
.news-section.is-modal-open .news-heading,
.system-flow.is-modal-open .section-title {
  display: grid !important;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr) !important;
  gap: 24px !important;
  align-items: end !important;
}

.service-section.is-modal-open .service-grid,
.news-section.is-modal-open .news-grid,
.system-flow.is-modal-open .flow-grid,
.system-flow.is-modal-open .solution-scenarios {
  width: min(1184px, 100%) !important;
  margin: 0 auto 24px !important;
}

.service-section.is-modal-open .service-card,
.news-section.is-modal-open .news-card,
.system-flow.is-modal-open .flow-grid article,
.system-flow.is-modal-open .solution-scenarios article,
.download-modal .download-copy,
.download-modal .app-qr-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62)) !important;
  box-shadow: var(--hy-premium-shadow-soft) !important;
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.service-section.is-modal-open .service-card:hover,
.news-section.is-modal-open .news-card:hover,
.system-flow.is-modal-open .flow-grid article:hover,
.system-flow.is-modal-open .solution-scenarios article:hover {
  border-color: rgba(10, 143, 133, 0.36) !important;
  box-shadow: 0 28px 64px rgba(10, 24, 40, 0.18) !important;
  transform: translateY(-4px) !important;
}

.service-section.is-modal-open .service-card a,
.news-section.is-modal-open .news-card a,
.download-primary,
.download-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content;
  min-height: 44px !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 20px !important;
  text-decoration: none !important;
}

.service-section.is-modal-open .service-card a,
.download-primary {
  border: 1px solid rgba(10, 143, 133, 0.46) !important;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, var(--hy-premium-accent), var(--hy-premium-blue)) !important;
  box-shadow: 0 14px 30px rgba(10, 102, 183, 0.22) !important;
}

.download-secondary,
.news-section.is-modal-open .news-card a {
  border: 1px solid rgba(10, 24, 40, 0.12) !important;
  color: var(--hy-premium-ink) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}

.service-section.is-modal-open .certificate-panel {
  grid-template-columns: minmax(0, 0.58fr) minmax(320px, 0.42fr) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.66)) !important;
}

.download-modal.is-modal-open {
  display: grid !important;
  place-items: center !important;
}

.download-shell {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  padding: 24px !important;
}

.download-shell.app-shell {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr) !important;
}

.download-visual {
  position: relative !important;
  min-height: 440px !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background:
    linear-gradient(140deg, rgba(8, 22, 35, 0.82), rgba(17, 88, 100, 0.5)),
    url("products/ai/axial-fan-ai-render-cutout.png") center / 78% auto no-repeat,
    linear-gradient(180deg, #eef4f2, #cfded8) !important;
  box-shadow: var(--hy-premium-shadow-soft) !important;
}

.download-copy {
  display: grid !important;
  align-content: center !important;
  gap: 16px !important;
  padding: 32px !important;
}

.download-copy h2 {
  max-width: 560px;
  font-size: 32px !important;
  line-height: 40px !important;
}

.download-copy > p {
  max-width: 620px;
  font-size: 16px !important;
  line-height: 28px !important;
}

.download-meta,
.download-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.download-meta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(10, 24, 40, 0.1) !important;
  border-radius: 999px !important;
  color: var(--hy-premium-ink) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.app-qr-card {
  display: grid !important;
  place-items: center !important;
  gap: 16px !important;
  min-height: 420px !important;
  padding: 32px !important;
  text-align: center !important;
}

.qr-frame {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: min(280px, 80vw) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(10, 24, 40, 0.12) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(10, 24, 40, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 24, 40, 0.12) 1px, transparent 1px),
    rgba(255, 255, 255, 0.72) !important;
  background-size: 24px 24px !important;
}

.qr-frame span {
  position: absolute !important;
  width: 56px !important;
  height: 56px !important;
  border: 10px solid var(--hy-premium-ink) !important;
  border-radius: 8px !important;
}

.qr-frame span:nth-child(1) {
  left: 24px !important;
  top: 24px !important;
}

.qr-frame span:nth-child(2) {
  right: 24px !important;
  top: 24px !important;
}

.qr-frame span:nth-child(3) {
  left: 24px !important;
  bottom: 24px !important;
}

.qr-frame span:nth-child(4) {
  right: 44px !important;
  bottom: 52px !important;
  width: 32px !important;
  height: 32px !important;
  border-width: 8px !important;
}

.qr-frame strong {
  width: 180px;
  color: var(--hy-premium-ink) !important;
  font-size: 16px;
  line-height: 24px;
}

.modal-global-close {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    rgba(10, 24, 40, 0.72) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.modal-global-close::before,
.modal-global-close::after {
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  content: "";
}

.modal-global-close::before {
  transform: rotate(45deg);
}

.modal-global-close::after {
  transform: rotate(-45deg);
}

@keyframes hySceneEase {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes hyContentReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 960px) {
  .modal-section:not(.product-detail) {
    padding: 72px 16px 24px !important;
  }

  .platform-section.is-modal-open,
  .factory-section.is-modal-open,
  .video-section.is-modal-open,
  .contact-section.is-modal-open,
  .patent-section.is-modal-open,
  .service-section.is-modal-open .certificate-panel,
  .service-section.is-modal-open .service-heading,
  .news-section.is-modal-open .news-heading,
  .system-flow.is-modal-open .section-title,
  .certificate-panel,
  .download-shell,
  .download-shell.app-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .service-section.is-modal-open .service-grid,
  .news-section.is-modal-open .news-grid,
  .system-flow.is-modal-open .flow-grid,
  .system-flow.is-modal-open .solution-scenarios {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .modal-section:not(.product-detail) {
    padding: 64px 12px 20px !important;
  }

  .modal-section:not(.product-detail).is-modal-open > :not(.modal-close) {
    margin-bottom: 16px !important;
    padding: 24px !important;
  }

  .service-section.is-modal-open .service-grid,
  .news-section.is-modal-open .news-grid,
  .system-flow.is-modal-open .flow-grid,
  .system-flow.is-modal-open .solution-scenarios {
    grid-template-columns: 1fr !important;
  }

  .service-section.is-modal-open .certificate-panel,
  .service-section.is-modal-open .certificate-panel > *,
  .service-section.is-modal-open .certificate-copy,
  .service-section.is-modal-open .certificate-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .download-shell {
    gap: 16px !important;
  }

  .download-visual,
  .app-qr-card {
    min-height: 300px !important;
  }

  .download-copy h2,
  .modal-section:not(.product-detail) h2 {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .download-cta-row,
  .service-section.is-modal-open .service-card a,
  .download-primary,
  .download-secondary {
    width: 100% !important;
  }

  .service-section.is-modal-open .service-card a,
  .download-primary,
  .download-secondary {
    min-height: 52px !important;
  }

  .modal-global-close {
    top: 12px !important;
    right: 12px !important;
  }
}