/* Mobile refinements are scoped to keep the desktop composition intact.
   !important overrides presentation styles from the original design export. */
.mobile-menu { display: none; }

@media (max-width: 900px) {
  nav { top: max(10px, env(safe-area-inset-top)) !important; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)) !important; }
  nav > div { position: relative; width: 100%; padding: 6px 6px 6px 18px !important; justify-content: space-between; }
  nav > div > a { margin-right: 0 !important; }
  nav > div > div:nth-child(2), nav > div > div:last-child > a:first-child { display: none !important; }
  nav > div > div:last-child { align-items: center; gap: 8px !important; margin-left: 0 !important; }
  nav > div > div:last-child > a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px !important; }
  .mobile-menu { display: block; }
  .mobile-menu > summary { width: 44px; height: 44px; border: 1px solid #ffffff25; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; list-style: none; }
  .mobile-menu > summary span { width: 16px; height: 1px; background: #f2f5e9; transition: transform .2s; }
  .mobile-menu[open] { padding: 0 !important; background: none; }
  .mobile-menu[open] > summary span:first-child { transform: translateY(3px) rotate(45deg); }
  .mobile-menu[open] > summary span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-menu-panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; max-height: calc(100dvh - 100px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid #d8edb230; border-radius: 22px; background: #11160c; box-shadow: 0 20px 50px #0008; }
  .mobile-menu-panel > .mono { display: block; color: #a6b38d; font-size: 10px; margin-bottom: 12px; }
  .mobile-menu-panel > a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-top: 1px solid #ffffff14; font-size: 16px; }
  .mobile-menu-panel > a > span { color: #9dab85; font: 500 10px var(--mono); }
  .mobile-menu-panel > .mobile-buy { justify-content: center; margin-top: 12px; background: #ccff00; border-radius: 12px; color: #090b09; font-weight: 600; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
  section { scroll-margin-top: 0; }
  section:not(#hero):not(.final-cta):not([data-screen-label="Live Network Strip"]) > div { padding: 72px max(20px, env(safe-area-inset-right)) 72px max(20px, env(safe-area-inset-left)) !important; }
  section :is(div, article) { min-width: 0; }
  section:not(#hero):not(.final-cta) h2 { font-size: clamp(32px, 9.7vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -.04em !important; overflow-wrap: normal; }
  section h2 { text-wrap: balance; }
  section > div[style*="display:grid"], section > div > div[style*="display:grid"][style*="repeat(auto-fit"] { gap: 32px !important; }
  #hero { padding-top: 112px !important; padding-bottom: 40px !important; }
  .hero-copy { width: 100%; }
  #hero h1 { font-size: clamp(70px, 20vw, 130px) !important; }
  #hero h2 { max-width: 520px !important; font-size: clamp(25px, 6.8vw, 34px) !important; line-height: 1.14 !important; }
  #hero p { line-height: 1.6 !important; }
  .hero-actions { margin-top: 28px !important; gap: 10px !important; }
  .hero-actions a { justify-content: center; min-height: 52px; }
  .hero-stage { min-height: 0; gap: 10px; margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-gpu { margin: -8px auto -16px; animation: none; }
  .spec-float { padding: 14px; }
  .spec-float strong { font-size: clamp(20px, 5.6vw, 28px); line-height: 1.12; }
  .spec-float .mono { font-size: 9px; letter-spacing: .08em; }
  .spec-float small { display: block; font-size: 9px; line-height: 1.5; }
  .hero-stats { gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div > span:first-child { line-height: 1.5; }
  .hero-stats > div > span:last-child { font-size: 21px !important; font-variant-numeric: tabular-nums; }
  .hero-footnote { font-size: 8px; letter-spacing: .06em; }

  [data-screen-label="Live Network Strip"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-screen-label="Live Network Strip"] > div > div { padding: 24px 20px !important; gap: 10px !important; border-right: 0 !important; border-bottom: 1px solid #0707081a; }
  [data-screen-label="Live Network Strip"] > div > div:nth-child(odd) { border-right: 1px solid #0707081a !important; }
  [data-screen-label="Live Network Strip"] > div > div:nth-last-child(-n+2) { border-bottom: 0; }
  [data-screen-label="Live Network Strip"] > div > div > span:first-child { font-size: 9px !important; line-height: 1.5; letter-spacing: .08em !important; min-height: 27px; }
  [data-screen-label="Live Network Strip"] > div > div > span:nth-child(2) { font-size: clamp(23px, 6vw, 36px) !important; gap: 8px !important; }
  [data-screen-label="Live Network Strip"] > div > div > span:nth-child(2) > span { font-size: 10px !important; }

  .protocol-flow { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px !important; margin-top: 32px !important; }
  .protocol-flow > div { padding: 20px !important; }
  .protocol-flow > svg { width: 28px; height: 20px; justify-self: center; transform: rotate(90deg); overflow: visible; }
  .protocol-flow > svg line { transform: scaleX(.5); }
  .how-grid { gap: 16px; }
  .how-card { min-height: 360px; }
  .how-copy { min-height: 0; }
  .how-art { height: 210px; }
  .miner-grid { margin-top: 32px !important; gap: 16px !important; }
  .miner-card a { min-height: 48px; }
  .rig-art-caption { min-height: 0; gap: 16px; padding: 24px; }
  .rig-art-caption > strong { font-size: clamp(30px, 8.6vw, 42px); }
  .rig-art-panel > img { margin: -8px 0 0; }
  .rig-layout { gap: 16px; }
  .rig-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .rig-metrics .mono { font-size: 9px; letter-spacing: .07em; min-height: 27px; }
  .rig-metrics strong { font-size: clamp(28px, 8.5vw, 40px); margin-top: 6px; }
  .rig-load .row { gap: 10px; font-size: 9px; letter-spacing: .04em; }
  .rig-buttons button { min-height: 48px; padding: 14px 16px; }

  .epoch-metrics { gap: 10px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 28px !important; }
  .epoch-metrics > div { padding: 16px !important; }
  .epoch-metrics > div > div:first-child { font-size: 9px !important; line-height: 1.5; letter-spacing: .08em !important; min-height: 27px; }
  .epoch-metrics > div > div:last-child { font-size: clamp(21px, 5.6vw, 30px) !important; }
  .pool-chart { min-height: 380px !important; padding: 24px !important; margin-top: 32px !important; }
  .pool-chart > div:first-child > div:last-child { text-align: left !important; }
  .pool-chart > div:first-child > div:first-child > div:last-child { font-size: clamp(34px, 9.5vw, 62px) !important; }
  .pool-chart > svg { height: 48% !important; }
  .pool-chart > div[style*="animation:rise"] { font-size: 10px !important; bottom: 45px !important; }
  .pool-chart > div[style*="left:84%"] { left: 76% !important; }
  .network-metrics { gap: 10px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .network-metrics > div > div:first-child { min-height: 27px; font-size: 9px !important; line-height: 1.5; letter-spacing: .06em !important; }
  .network-metrics > div > div:last-child { font-size: 22px !important; }
  .network-scene { width: 100%; aspect-ratio: auto; height: 360px; min-height: 0; }
  .network-pause { width: 44px; height: 44px; }

  /* Orbit labels become a readable list with the same content and order. */
  [data-screen-label="Token Utility"] > div > div:last-child { order: -1; }
  .utility-orbit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: auto !important; }
  .utility-orbit > svg { display: none; }
  .utility-orbit > div { position: static !important; transform: none !important; white-space: normal !important; text-align: center; }
  .utility-orbit > div:first-of-type { grid-column: 1 / -1; width: 112px !important; margin: 0 auto 20px; font-size: 28px !important; }
  .utility-orbit > div:not(:first-of-type) { display: grid; place-items: center; min-height: 50px; padding: 12px !important; border-radius: 12px !important; font-size: 10px !important; line-height: 1.5 !important; letter-spacing: .04em !important; box-shadow: 0 6px 16px #263c000a !important; }
  .utility-orbit > div:last-child { grid-column: 1 / -1; }
  #tokenomics > div > div:last-child { gap: 16px !important; margin-top: 32px !important; }
  #tokenomics .glass { padding: 24px !important; }
  .token-allocation { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 12px !important; }
  #tokenomics .glass:last-child > div:not(:first-child) { gap: 12px; padding: 14px !important; }
  #tokenomics .glass:last-child > div > div:last-child { flex: none; }
  .evolution-console { padding: 24px; }
  .evolution-console > .row { flex-wrap: wrap; gap: 12px; }
  .fusion-equation { grid-template-columns: minmax(0, 1fr); padding: 0 20px 24px; gap: 12px; }
  .fusion-equation > div { padding: 20px; min-height: 0; gap: 10px; }
  .fusion-equation strong { font-size: 24px; }
  .fusion-equation .mono { font-size: 10px; }
  .fusion-arrow { transform: rotate(90deg); justify-self: center; }

  #dashboard > div > .glass-dark { margin-top: 32px !important; }
  #dashboard main { padding: 16px !important; }
  #dashboard .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-metrics > div { padding: 14px !important; }
  .dashboard-metrics > div:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .dashboard-metrics > div > div:first-child { line-height: 1.5; }
  .dashboard-metrics > div:not(:nth-child(3)) > div:last-child { font-size: clamp(20px, 5.5vw, 28px) !important; }
  #dashboard main > div:last-child { padding: 14px !important; }
  #dashboard main > div:last-child > .dashboard-transaction { grid-template-columns: minmax(0, 1fr) auto !important; gap: 6px 10px !important; font-size: 12px !important; }
  .dashboard-transaction > span:first-child { grid-column: 1 / -1; line-height: 1.5; }
  #dashboard main > div:last-child > .dashboard-transaction > span:nth-child(2) { display: block !important; font-size: 10px !important; }
  .dashboard-transaction > span:last-child { text-align: right; white-space: nowrap; }

  .ecosystem-diagram { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: auto !important; margin-top: 32px !important; }
  .ecosystem-diagram > svg { display: none; }
  .ecosystem-diagram > div { position: static !important; transform: none !important; white-space: normal !important; }
  .ecosystem-diagram > div:first-of-type { grid-column: 1 / -1; padding: 8px 0 16px; }
  .ecosystem-diagram > div:not(:first-of-type) { min-height: 82px; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px !important; font-size: 12px !important; line-height: 1.4; letter-spacing: .02em !important; box-shadow: 0 6px 16px #263c000a !important; }
  [data-screen-label="Why OVRCLK"] .glass > div { min-height: 220px !important; padding: 28px 24px !important; }
  .roadmap-grid { gap: 12px !important; }
  .roadmap-card { padding: 18px !important; min-height: 290px !important; }
  #faq > div { gap: 28px !important; }
  #faq summary { line-height: 1.4; min-height: 28px; }
  #faq summary > span:first-child { flex: 1; min-width: 0; transform: none; }
  #faq summary > span:last-child { flex: none; }
  .final-cta { padding: 72px 20px 48px !important; }
  .final-cta h2 { font-size: clamp(42px, 12vw, 84px) !important; }
  .footer-links { gap: 0; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }
  .footer-links .mono { min-height: 32px; line-height: 1.5; }
  .footer-top { gap: 28px 20px; }
  .footer-bottom > a { display: flex; align-items: center; min-height: 44px; }
  .motion-image { translate: none !important; }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions a { width: 100%; padding: 15px 20px !important; }
  .how-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .how-art { max-width: 280px; width: 100%; }
  .miner-card .gpu-stage { margin: 0 !important; }
  .miner-card .miner-art { transform: none !important; }
  .final-cta > div > div[style*="display:flex"] { flex-direction: column; }
  .final-cta a { min-height: 52px; }
}

@media (max-width: 360px) {
  .spec-float { padding: 12px; }
  .spec-float .mono { font-size: 8px; }
  .epoch-metrics > div { padding: 12px !important; }
  #tokenomics .glass { padding: 20px !important; }
  #dashboard main { padding: 12px !important; }
  .dashboard-metrics > div { padding: 12px !important; }
  .dashboard-metrics > div:not(:nth-child(3)) > div:last-child { font-size: 19px !important; }
  .roadmap-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .roadmap-card { min-height: 270px !important; }
  .roadmap-card .phase-title { font-size: 26px !important; }
  .phase-art { align-self: center; width: 180px; }
}

@media (hover: none) and (pointer: coarse) {
  .motion-card, .how-card:hover, .miner-card:hover, .roadmap-card:hover, button:hover { transform: none !important; rotate: none !important; }
  .miner-card:hover .miner-art { transform: scale(1.15); }
  /* The export runtime injects its own `style-hover` rule for the miner card after this file,
     so the class is repeated here to outweigh it and keep touch scrolling free of hover lifts. */
  .miner-card.miner-card:hover { transform: none !important; box-shadow: inset 0 1px 0 #fff, 0 12px 32px -24px rgba(29, 41, 0, .4) !important; }
}