/* Axion V8 responsive architecture: tablet, mobile, touch and compact-height layouts. */
@media (max-width: 1040px) {
  .flow-nodes { gap: 2rem; }
  .flow-node { padding: 1.35rem; }
  .flow-lines-desktop { opacity: 0.75; }
  .gardener-band { grid-template-columns: 1fr; }
  .care-loop { width: min(32rem, 100%); margin-inline: auto; }
}

@media (max-width: 900px) {
  .hero { min-height: min(52rem, 100svh); }
  .hero-veil {
    background:
      linear-gradient(90deg, rgba(5, 4, 3, 0.98) 0%, rgba(5, 4, 3, 0.84) 49%, rgba(5, 4, 3, 0.18) 85%),
      linear-gradient(180deg, rgba(5, 4, 3, 0.5), transparent 27%, transparent 75%, rgba(5, 4, 3, 0.72));
  }
  .hero-copy { max-width: 39rem; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading .section-label { grid-row: auto; }
  .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-intro { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-map { padding: 1rem; }
}

@media (max-width: 820px) {
  .orchestration {
    width: min(34rem, 100%);
    min-height: 0;
    margin-inline: auto;
  }
  .flow-lines { display: none; }
  .flow-nodes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .flow-node {
    width: 100%;
    min-height: 0;
    justify-self: stretch;
    padding: 1.35rem;
  }
  .flow-node:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 2.08rem;
    bottom: -1.3rem;
    width: 1px;
    height: 1.3rem;
    background: var(--accent);
  }
  .node-specialist {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }
  .node-result { margin-top: 0; }
  .subtasks {
    position: static;
    width: min(15rem, calc(100% - 2.5rem));
    margin: 0.5rem 0 0 2.5rem;
    transform: none;
  }
  .motion-ready .orchestration.is-pending .subtasks { transform: translateY(4px); }
  .orchestration.is-playing .subtasks { animation-name: enter-node; }
  .branch-explanation { position: static; margin-top: 2rem; }

  .system-diagram { display: none; }
  .system-mobile {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
  }
  .system-mobile li {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .system-mobile li::after {
    content: "";
    position: absolute;
    left: 1.35rem;
    bottom: -0.45rem;
    width: 1px;
    height: 0.9rem;
    background: var(--accent);
  }
  .system-mobile li:last-child::after { display: none; }
  .system-mobile li > span {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(194, 130, 33, 0.52);
    border-radius: 50%;
    color: var(--accent);
    font: 650 0.7rem/1 var(--mono);
  }
  .system-mobile strong,
  .system-mobile-foundation strong,
  .system-mobile-gardener strong {
    color: var(--text);
    font: 650 0.7rem/1.4 var(--mono);
    letter-spacing: 0.07em;
    overflow-wrap: anywhere;
  }
  .system-mobile p {
    margin: 0.45rem 0 0;
    color: var(--muted);
    font-size: clamp(0.86rem, 3.6vw, 0.92rem);
    overflow-wrap: anywhere;
  }
  .system-mobile-foundation,
  .system-mobile-gardener {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--hairline-strong);
    background: rgba(21, 16, 7, 0.76);
    overflow-wrap: anywhere;
  }
  .system-mobile-gardener { border-style: dashed; }
  .system-mobile-foundation span,
  .system-mobile-gardener span { color: var(--muted); font-size: 0.84rem; }
}

@media (max-width: 680px) {
  :root { --gutter: clamp(1.25rem, 6vw, 1.5rem); }
  .header-inner {
    min-height: calc(4.5rem + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .desktop-nav { display: none; }
  .mobile-nav { display: inline-flex; }
  .neural-fallback .field-nodes circle:nth-child(n + 10),
  .neural-fallback .field-lines path:nth-child(n + 5) { display: none; }

  .hero {
    min-height: clamp(40rem, 100svh, 48rem);
    display: grid;
    align-items: stretch;
    padding: 0;
    background: var(--void);
  }
  .hero-mascot-reveal,
  .hero-mascot-parallax,
  .hero-art,
  .hero-art picture,
  .hero-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-art { background: var(--indigo); }
  .hero-art img { object-fit: cover; object-position: 68% 50%; }
  .hero-veil {
    background:
      linear-gradient(90deg, rgba(5, 4, 3, 0.98) 0%, rgba(5, 4, 3, 0.91) 50%, rgba(5, 4, 3, 0.34) 78%, rgba(5, 4, 3, 0.16) 100%),
      linear-gradient(180deg, rgba(5, 4, 3, 0.55) 0%, transparent 30%, transparent 68%, rgba(5, 4, 3, 0.78) 100%);
    pointer-events: none;
  }
  .hero-neural { opacity: 0.82; }
  .hero-layout {
    position: relative;
    left: auto;
    top: auto;
    width: min(75rem, calc(100% - (2 * var(--gutter))));
    height: 100%;
    padding-top: calc(4.5rem + env(safe-area-inset-top) + clamp(2.6rem, 8vh, 4.2rem));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    transform: none;
  }
  .hero-copy {
    max-width: min(21.5rem, 100%);
    text-shadow: 0 2px 18px rgba(5, 4, 3, 0.9);
  }
  .hero .section-label { margin-bottom: 1.2rem; }
  .hero h1 {
    max-width: none;
    font-size: clamp(2.95rem, 15.2vw, 4.4rem);
    line-height: 0.94;
    letter-spacing: -0.055em;
  }
  .hero-lede {
    max-width: 29ch;
    margin-top: clamp(1.25rem, 4vh, 1.7rem);
    font-size: clamp(0.94rem, 3.8vw, 1.03rem);
    line-height: 1.52;
  }
  .hero-attribution { margin-top: 0.9rem; }
  .primary-link { margin-top: 1.2rem; min-height: 48px; }

  .section { padding-block: clamp(4.5rem, 14vw, 5.5rem); }
  .section-heading h2,
  .gardener h2 { font-size: clamp(2.65rem, 12.5vw, 4rem); }
  .section-heading > p:last-child { margin-top: 1.35rem; }
  .roster { grid-template-columns: 1fr; margin-top: 3.5rem; }
  .roster-item { min-height: 0; padding: 1.65rem 1.35rem; }
  .gardener-band {
    min-height: 0;
    gap: 3rem;
    padding: clamp(1.35rem, 6vw, 2rem);
  }
  .care-loop { min-height: 0; }
  .care-path { display: none; }
  .care-core {
    position: relative;
    inset: auto;
    margin: 0 auto 1rem;
    transform: none;
  }
  .care-loop ol { display: grid; gap: 0.75rem; }
  .care-step,
  .care-observe,
  .care-tend,
  .care-verify,
  .care-repeat {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 5.5rem;
    transform: none;
  }
  .care-step:not(:last-child)::after {
    content: "↓";
    position: absolute;
    z-index: 1;
    right: 1rem;
    bottom: -1.2rem;
    color: var(--accent);
    font: 600 0.75rem/1 var(--mono);
  }
  .method-rail { grid-template-columns: 1fr; }
  .system-map { margin-top: 3.5rem; padding: 0.9rem; }
  .stack-grid { grid-template-columns: 1fr; }
  .stack-card { min-height: 0; padding: 1.5rem 1.3rem; }
  .section:not(.creator)::before { background: rgba(5, 4, 3, 0.32); }
  .creator { min-height: 40rem; }
  .creator h2 { font-size: clamp(3.1rem, 15vw, 5rem); }
  .creator::before { right: -14rem; width: 32rem; }
  .footer-inner {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
    padding-block: 1.75rem calc(1.75rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 410px) {
  .flow-node { padding: 1.15rem; }
  .flow-node h3 { font-size: 0.65rem; }
  .subtasks { width: calc(100% - 2rem); margin-left: 2rem; }
  .method-rail li { padding: 1.25rem; }
}

@media (max-width: 360px) {
  .brand { letter-spacing: 0.16em; }
  .hero h1 { font-size: clamp(2.8rem, 14.8vw, 3.35rem); }
  .primary-link { padding-inline: 1rem; letter-spacing: 0.07em; }
  .system-mobile li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .system-mobile li > span { width: 2.5rem; height: 2.5rem; }
  .system-mobile li::after { left: 1.22rem; }
}

@media (max-width: 760px) and (max-height: 620px) and (orientation: landscape) {
  .hero { min-height: 34rem; }
  .hero-layout { padding-top: calc(4.5rem + env(safe-area-inset-top) + 1.6rem); }
  .hero h1 { font-size: clamp(2.8rem, 8vw, 4rem); }
  .hero-lede { margin-top: 1rem; line-height: 1.45; }
}

@media (hover: none), (pointer: coarse) {
  .hero-mascot-parallax { transform: none !important; will-change: auto; }
  .primary-link:hover span { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .orchestration.is-pending .subtasks { transform: none; }
}

/* Axis One V9 additions: compact motion surfaces and safe mobile spacing. */
@media (max-width: 520px) {
  .axion-profile-card {
    grid-template-columns: 2.75rem;
    padding: 0.35rem;
    border-radius: 50%;
  }
  .axion-profile-card img { width: 2.75rem; height: 2.75rem; }
  .axion-profile-card span,
  .axion-profile-card > i { display: none; }
  .cortex-console { margin-inline: -0.2rem; }
  .cortex-trace { padding: 1.2rem; }
  .cortex-trace p { gap: 0.65rem; font-size: 0.56rem; }
  .memory-brain { margin-inline: -0.75rem; }
  .brain-map { width: 108%; max-width: none; }
  .memory-chip { padding: 0.32rem 0.45rem; }
}

@media (max-width: 360px) {
  .launch-status span:first-child { display: none; }
  .launch-status i { width: 2rem; }
  .memory-chip { font-size: 0.4rem; letter-spacing: 0.07em; }
  .brain-core { width: 5.7rem; height: 5.7rem; }
  .care-activity b { font-size: 0.44rem; }
}