/* ==========================================================================
   EnerAxiom Technologies — stylesheet
   Zero dependencies. Dark, technical, high-contrast.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #060a12;
  --bg-alt:        #080e19;
  --surface:       #0d1524;
  --surface-2:     #111b2e;
  --line:          #1c2942;
  --line-soft:     #16223a;

  /* Text */
  --text:          #e8eef8;
  --text-dim:      #9fb0c9;
  --text-faint:    #7d90ad;  /* stays >=4.5:1 on every surface used below */

  /* Accents */
  --cyan:          #22d3ee;
  --sky:           #38bdf8;
  --violet:        #a78bfa;
  --amber:         #fbbf24;
  --accent:        var(--cyan);

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.022em; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.14rem; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 999;
  background: var(--cyan); color: #04121a; padding: 10px 18px;
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 24px; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   Shared bits
   ------------------------------------------------------------------------- */

.grad {
  background: linear-gradient(100deg, var(--sky) 0%, var(--cyan) 42%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.kicker::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 600; font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(100deg, var(--sky), var(--cyan));
  color: #041019;
  box-shadow: 0 8px 26px -12px rgba(34, 211, 238, .75);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(34, 211, 238, .85); }
.btn-ghost {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255, 255, 255, .015);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; font-family: var(--mono); letter-spacing: -0.01em; }

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6, 10, 18, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.02em; }
.brand-text em {
  font-style: normal; font-family: var(--mono);
  font-size: 0.63rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint);
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a:not(.btn) {
  font-size: 0.93rem; color: var(--text-dim); font-weight: 500;
  transition: color .2s ease; position: relative;
}
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0;
  background: var(--cyan); transition: width .25s ease;
}
.nav-links > a:not(.btn):hover { color: var(--text); }
.nav-links > a:not(.btn):hover::after { width: 100%; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; padding: 11px 10px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .28s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 130px 0 90px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }

.grid-plane {
  position: absolute; inset: -20% -10% 0;
  background-image:
    linear-gradient(rgba(56, 189, 248, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .075) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 32%, #000 5%, transparent 72%);
  animation: gridDrift 26s linear infinite;
}
@keyframes gridDrift { to { background-position: 62px 62px, 62px 62px; } }

.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.orb-a { width: 520px; height: 520px; top: -12%; left: -8%; background: radial-gradient(circle, rgba(56,189,248,.42), transparent 68%); animation: float 17s ease-in-out infinite; }
.orb-b { width: 460px; height: 460px; bottom: -16%; right: -6%; background: radial-gradient(circle, rgba(167,139,250,.38), transparent 68%); animation: float 21s ease-in-out infinite reverse; }
.orb-c { width: 380px; height: 380px; top: 42%; left: 52%; background: radial-gradient(circle, rgba(34,211,238,.24), transparent 70%); animation: float 25s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(38px, -34px) scale(1.08); }
}

.hero-inner { position: relative; z-index: 1; }
/* No width cap: the headline is written as two lines (the second is the
   .grad span) and at 3.3rem each one fits the container on a single physical
   line, so it sets as 2 lines instead of stacking into a narrow tower.
   Below ~978px the clamp scales the type down and it wraps naturally. */
.hero h1 { max-width: none; }
.hero h1 .grad { display: block; }
.lede { margin-top: 28px; max-width: 70ch; color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.14rem); }
.hero-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

.hero-chips { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chips li {
  font-family: var(--mono); font-size: 0.79rem;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(13, 21, 36, .55);
  color: var(--text-dim);
  backdrop-filter: blur(6px);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.hero-chips li:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

.scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 38px; border: 1px solid var(--line); border-radius: 13px;
  display: flex; justify-content: center; padding-top: 8px;
}
.scroll-hint span { width: 3px; height: 7px; border-radius: 2px; background: var(--cyan); animation: scrollDot 1.9s ease-in-out infinite; }
@keyframes scrollDot { 0%,100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(13px); } }

/* -------------------------------------------------------------------------
   Section scaffolding
   ------------------------------------------------------------------------- */

.section { padding: 108px 0; position: relative; }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.section-head { max-width: 720px; margin-bottom: 62px; }
.section-sub { margin-top: 18px; color: var(--text-dim); font-size: 1.03rem; }

/* -------------------------------------------------------------------------
   Pipeline:  AI → Simulation → Design → Manufacturing
   ------------------------------------------------------------------------- */

.pipeline {
  display: flex; align-items: stretch;
  gap: 0;
  padding: 8px 0;
}

.stage {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(160deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 24px;
  text-align: center;
  position: relative;
  transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease;
}
.stage::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(160deg, rgba(34,211,238,.14), transparent 55%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.stage.active { border-color: rgba(34, 211, 238, .55); box-shadow: 0 14px 44px -22px rgba(34,211,238,.8); }
.stage.active::before { opacity: 1; }
.stage:hover { transform: translateY(-4px); }

.stage-icon {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(34, 211, 238, .07);
  border: 1px solid var(--line);
  transition: background .4s ease, border-color .4s ease;
}
.stage.active .stage-icon { background: rgba(34, 211, 238, .16); border-color: rgba(34,211,238,.5); }
.stage-icon svg {
  width: 27px; height: 27px;
  fill: none; stroke: var(--cyan); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.stage-icon svg .dim { opacity: .4; }
.stage h3 { font-size: 1.08rem; margin-bottom: 8px; }
.stage p { font-size: 0.87rem; color: var(--text-faint); line-height: 1.55; }

.link {
  flex: 0 0 62px;
  position: relative;
  align-self: center;
  height: 2px;
  background: var(--line);
  margin: 0 -1px;
}
.link .pulse {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: flowX 2.4s linear infinite;
}
.link:nth-of-type(2) .pulse { animation-delay: .35s; }
.link:nth-of-type(3) .pulse { animation-delay: .7s; }
@keyframes flowX {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}
.link .arrow {
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--line); border-right: 2px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

/* Feedback loop: the return path from Manufacturability back to AI.
   Its ends line up with the CENTRES of the first and last stage cards rather
   than the outer edges of the row. Each stage is (100% - the three links)/4
   wide, so half a stage -- the inset needed at each end -- is (100% - 180px)/8.
   A .link is 62px of flex basis but its -1px side margins net it to 60px. */
.feedback { margin-top: 26px; position: relative; }
.feedback-line {
  height: 34px;
  margin-inline: calc((100% - 180px) / 8);
  border: 1px dashed var(--line);
  border-top: none;
  border-radius: 0 0 12px 12px;
  position: relative;
}
/* One arrowhead only, at the LEFT end, pointing up into the AI card -- that is
   where the loop returns to. The right end is the tail, where measured data
   leaves Manufacturability, so it gets no head. */
.feedback-line::before {
  content: ""; position: absolute; left: -5px; top: -8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--cyan);
}
/* Travels right-to-left, the opposite of the pulses between the cards, so the
   figure reads as a closed cycle. */
.feedback-pulse {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(270deg, transparent, var(--cyan), transparent);
  background-size: 42% 100%;
  background-repeat: no-repeat;
  animation: flowBack 3.2s linear infinite;
}
@keyframes flowBack {
  from { background-position: 142% 0; }
  to   { background-position: -52% 0; }
}
.feedback-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px;
  font-family: var(--mono); font-size: 0.79rem;
  color: var(--text-faint); letter-spacing: 0.02em;
  text-align: center;
}
.fb-icon { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; }

/* -------------------------------------------------------------------------
   Capability cards
   ------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

/* Per-card accent. Kept in CSS (not inline style attributes) so the strict
   Content-Security-Policy in _headers can stay free of 'unsafe-inline'. */
.card-energy { --accent: var(--amber); }
.card-ai     { --accent: var(--violet); }
.card-sim    { --accent: var(--cyan); }
.card-mfg    { --accent: var(--sky); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .65; transition: opacity .3s ease;
}
.card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 26px 54px -34px var(--accent); }
.card:hover::after { opacity: 1; }

.card-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.card-icon svg {
  width: 25px; height: 25px;
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.card-icon svg .dim { opacity: .45; }
.card h3 { font-size: 1.22rem; margin-bottom: 12px; }
.card > p { color: var(--text-dim); font-size: 0.94rem; }

.tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px; }
.tags li {
  font-family: var(--mono); font-size: 0.72rem;
  padding: 5px 11px; border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  color: var(--text-faint);
}

/* -------------------------------------------------------------------------
   Services
   ------------------------------------------------------------------------- */

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

.service {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  background: linear-gradient(170deg, var(--surface) 0%, rgba(13,21,36,0) 100%);
  transition: border-color .3s ease, transform .3s ease;
  position: relative;
}
.service:hover { border-color: rgba(34,211,238,.4); transform: translateY(-4px); }
.service-num {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: .12em;
  color: var(--cyan); display: block; margin-bottom: 16px;
}
.service h3 { font-size: 1.34rem; margin-bottom: 14px; }
.service > p { color: var(--text-dim); font-size: 0.95rem; }

.ticks { margin-top: 22px; display: grid; gap: 11px; }
.ticks li {
  position: relative; padding-left: 26px;
  font-size: 0.9rem; color: var(--text-dim);
}
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
   About
   ------------------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 68px;
  align-items: start;
}
.prose { color: var(--text-dim); margin-top: 22px; font-size: 1rem; }
.about-grid .btn { margin-top: 32px; }

.principles { display: grid; gap: 14px; }
.principles li {
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
  background: var(--surface);
  transition: transform .25s ease, background .25s ease;
}
.principles li:hover { transform: translateX(4px); background: var(--surface-2); }
.principles h3 { font-size: 1rem; margin-bottom: 6px; }
.principles p { font-size: 0.88rem; color: var(--text-faint); }

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.contact { padding-bottom: 120px; }
.contact-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(38px, 6vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 130% at 50% -20%, rgba(34,211,238,.13), transparent 70%),
    var(--surface);
}
.contact-card .kicker { justify-content: center; }
.contact-card .kicker::before { display: none; }
.contact-card h2 { max-width: 18ch; margin: 0 auto; }
.contact-card .section-sub { max-width: 58ch; margin-inline: auto; }
.contact-actions { margin-top: 36px; display: flex; justify-content: center; }
.contact-note {
  margin-top: 26px; font-family: var(--mono);
  font-size: 0.76rem; color: var(--text-faint); letter-spacing: .03em;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line-soft); background: var(--bg-alt); padding: 54px 0 30px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 34px; flex-wrap: wrap; padding-bottom: 34px;
}
.footer-brand { display: flex; gap: 13px; align-items: flex-start; color: var(--cyan); }
.footer-brand .brand-mark { width: 32px; height: 32px; }
.footer-brand strong { display: block; color: var(--text); font-size: 1rem; }
.footer-brand span { display: block; color: var(--text-faint); font-size: 0.86rem; max-width: 42ch; margin-top: 3px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { font-size: 0.9rem; color: var(--text-dim); transition: color .2s ease; }
.footer-links a:hover { color: var(--cyan); }
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 0.84rem; color: var(--text-faint);
}
.footer-bottom a { transition: color .2s ease; }
.footer-bottom a:hover { color: var(--cyan); }

/* -------------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }

/* Reveal is JS-driven, so with scripting off the content must not stay at
   opacity 0. script.js has a matching fallback for browsers without
   IntersectionObserver. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* Stagger children of grids */
.cards .reveal:nth-child(2), .services .reveal:nth-child(2) { transition-delay: .09s; }
.cards .reveal:nth-child(3), .services .reveal:nth-child(3) { transition-delay: .18s; }
.cards .reveal:nth-child(4) { transition-delay: .27s; }
.hero .reveal:nth-child(2) { transition-delay: .07s; }
.hero .reveal:nth-child(3) { transition-delay: .14s; }
.hero .reveal:nth-child(4) { transition-delay: .21s; }
.hero .reveal:nth-child(5) { transition-delay: .28s; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 44px; }

  /* Pipeline goes vertical */
  .pipeline { flex-direction: column; align-items: stretch; }
  .stage { text-align: left; display: grid; grid-template-columns: 54px 1fr; gap: 6px 18px; align-items: center; padding: 20px 22px; }
  .stage-icon { margin: 0; grid-row: span 2; }
  .stage h3 { margin-bottom: 0; align-self: end; }
  .stage p { align-self: start; }
  .link {
    flex: 0 0 40px; width: 2px; height: 40px;
    align-self: center; margin: -1px 0;
  }
  .link .pulse {
    background: linear-gradient(180deg, transparent, var(--cyan), transparent);
    background-size: 100% 55%;
    background-repeat: no-repeat;
    animation-name: flowY;
  }
  .link .arrow { right: auto; top: auto; left: 50%; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  @keyframes flowY {
    from { background-position: 0 -60%; }
    to   { background-position: 0 160%; }
  }
  /* Stacked layout: the stage-centre formula no longer applies, so just inset
     the loop enough that it reads as deliberate. */
  .feedback-line { height: 26px; margin-inline: 20%; }
}

@media (max-width: 780px) {
  body { font-size: 16px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 78px 0; }
  .section-head { margin-bottom: 42px; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(6, 10, 18, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 26px;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden;
    /* visibility flips only after the fade-out finishes... */
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; transform: none;
    /* ...but immediately on the way in, so the menu is clickable at once. */
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .nav-links > a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 1rem; }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 18px; justify-content: center; }

  .hero { min-height: auto; padding: 118px 0 76px; }
  .hero h1 .grad { display: inline; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .scroll-hint { display: none; }

  .contact { padding-bottom: 84px; }
  .footer-inner { flex-direction: column; gap: 26px; }
}

@media (max-width: 460px) {
  .stage { grid-template-columns: 1fr; }
  .stage-icon { grid-row: auto; }
  .card, .service { padding: 26px 22px; }
}

/* -------------------------------------------------------------------------
   Motion / print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .scroll-hint, .hero-bg { display: none; }
  body { background: #fff; color: #000; }
}