/* Performance + typography layer.
   Goal: smoother mobile scrolling, premium system typography, less GPU-heavy motion. */
:root {
  --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-tight: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--font-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
.brand strong,
.price,
.price-chip strong,
.future-tile strong,
.showroom-card h2,
.mockup-screen strong,
.stat strong {
  font-family: var(--font-tight);
  font-weight: 820;
  letter-spacing: -0.055em;
}

p,
li,
small,
label,
summary,
input,
textarea {
  letter-spacing: -0.015em;
}

.eyebrow,
.section-kicker,
.badge,
.main-holo small,
.console-bar strong,
.future-tile span {
  letter-spacing: .14em;
  font-weight: 850;
}

.hero-text,
.page-hero p,
.contact-card p,
.price-card p,
.faq-list p,
.compact-list p {
  line-height: 1.55;
}

.primary-btn,
.secondary-btn,
.header-cta,
.price-card a {
  font-family: var(--font-tight);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 720;
  letter-spacing: -0.025em;
}

.primary-btn {
  color: rgba(7, 16, 28, .82) !important;
  background: linear-gradient(135deg, #63eaf5, #8cf4f7) !important;
}

.secondary-btn,
.header-cta {
  color: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 760px) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  body.future-mode {
    animation: none !important;
  }

  body.future-mode::before {
    background:
      radial-gradient(circle at 20% 12%, rgba(138, 92, 255, .26), transparent 22rem),
      radial-gradient(circle at 88% 22%, rgba(35, 244, 255, .18), transparent 24rem),
      linear-gradient(135deg, #030711 0%, #071226 52%, #02040c 100%) !important;
  }

  .tech-noise {
    animation: none !important;
    opacity: .22 !important;
    background-size: 80px 80px, 80px 80px, 100% 10px !important;
    will-change: auto !important;
  }

  .orb,
  .orb-b {
    animation: none !important;
    opacity: .28 !important;
    filter: blur(14px) !important;
    will-change: auto !important;
  }

  .future-header,
  .future-mark::after,
  .future-hero::after,
  .page-hero::after,
  .future-console,
  .future-console::before,
  .scan-line,
  .module-orbit span,
  .mockup-screen::after,
  .console-bar span {
    animation: none !important;
    will-change: auto !important;
  }

  .future-console::before {
    opacity: .34 !important;
  }

  .future-hero::after,
  .page-hero::after {
    filter: blur(18px) !important;
    opacity: .34 !important;
  }

  .future-console,
  .future-tile,
  .showroom-card,
  .price-card,
  .holo-card,
  .contact-card,
  .contact-form,
  .split-panel,
  .faq-list details,
  .limits-grid article {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, .22) !important;
  }

  .primary-btn,
  .secondary-btn,
  .header-cta,
  .price-card a {
    min-height: 54px !important;
    padding: 15px 20px !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    box-shadow: 0 10px 28px rgba(35, 244, 255, .12) !important;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease !important;
  }

  .page-home .future-hero .primary-btn,
  .page-home .future-hero .secondary-btn {
    min-height: 56px !important;
    font-size: clamp(15px, 4.2vw, 17px) !important;
    font-weight: 700 !important;
  }

  .primary-btn::after,
  .secondary-btn::after,
  .header-cta::after,
  .price-card a::after {
    display: none !important;
  }

  .reveal {
    filter: none !important;
    transition: opacity .32s ease, transform .32s ease !important;
  }

  html.animations-ready .reveal {
    transform: translateY(10px) !important;
    filter: none !important;
  }

  html.animations-ready .reveal.is-visible {
    transform: translateY(0) !important;
    filter: none !important;
  }

  .future-hero h1,
  .page-hero h1 {
    font-weight: 800;
    letter-spacing: -0.075em;
  }

  .future-line,
  .page-hero p {
    font-weight: 440;
    letter-spacing: -0.025em;
  }

  .eyebrow {
    letter-spacing: .16em;
    opacity: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-noise,
  .orb,
  .future-console,
  .scan-line,
  .module-orbit span,
  .mockup-screen::after,
  .future-mark::after,
  .future-hero::after,
  .page-hero::after {
    animation: none !important;
  }
}