/* Ceiling Radar — Red Maverick Pty Ltd
   Single stylesheet. No JS, no webfonts, no trackers.
   Palette follows the retail box (black panels, white tracked wordmark,
   orange spine) and the projector boot screen (radar green). */

:root {
  /* Box panel black and greys (packaging/v2-black-style/v2-common.css) */
  --bg: #07090c;
  --bg-2: #0b0e13;
  --panel: #10141a;
  --panel-2: #151a21;
  --line: #1c222b;
  --line-2: #2a323d;

  --text: #f2f4f6;
  --text-2: #c3cbd3;
  --text-3: #8a949e;

  /* Radar green: the boot-screen sweep (skylight-boot.html) and the app icon */
  --accent: #17e08b;
  --accent-2: #5ce9ad;
  --accent-deep: #0a3d2e;
  --accent-dim: rgba(23, 224, 139, 0.12);
  --accent-line: rgba(23, 224, 139, 0.35);
  --on-accent: #03120b;

  /* Box details: the orange tuck/spine and the warm ceiling-cove light */
  --spine: #ff5200;
  --cove: #ffcf8a;

  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1120px;
  --pad: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 760px; }

.eyebrow {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 .7em;
}

.lead { font-size: 1.12rem; color: var(--text-2); }
.muted { color: var(--text-2); }
.small { font-size: .9rem; color: var(--text-3); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 9, 12, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .82rem;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand .wordmark { width: auto; height: 13px; border-radius: 0; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; }
.nav a { color: var(--text-2); font-size: .92rem; }
.nav a:hover { color: var(--text); text-decoration: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 64px 0 46px;
  background:
    radial-gradient(900px 420px at 72% -10%, rgba(23, 224, 139, .10), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero h1 { margin-bottom: .35em; }
.hero .tagline {
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .8rem;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 1.4em;
}
.hero-grid {
  display: grid;
  gap: 34px;
  align-items: center;
}
.hero-art {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

/* ---------- buttons ---------- */
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); }

/* ---------- sections ---------- */
section { padding: 62px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.section-alt { background: var(--bg-2); }

.product { display: grid; gap: 30px; align-items: center; }
.product img { border-radius: var(--radius); border: 1px solid var(--line-2); }

/* ---------- feature lists ---------- */
.features { list-style: none; margin: 0 0 1.3em; padding: 0; }
.features li {
  padding: 11px 0 11px 30px;
  border-bottom: 1px solid var(--line);
  position: relative;
  color: var(--text-2);
}
.features li:last-child { border-bottom: 0; }
.features li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 21px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.features strong { color: var(--text); font-weight: 600; }

/* ---------- chips / badges ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 1.2em; list-style: none; }
.chip {
  font-size: .8rem;
  color: var(--text-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 13px;
}
.tag {
  display: inline-block;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: 2px 7px;
  vertical-align: middle;
  margin-left: 6px;
}
.tag-grey {
  color: var(--text-3);
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-2);
}

/* store badges (not real links yet) */
.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.store {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 10px 18px;
  background: var(--panel);
  min-width: 168px;
}
.store .s1 { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.store .s2 { font-weight: 600; font-size: .98rem; color: var(--text-2); }

/* ---------- steps ---------- */
.steps { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; counter-reset: s; }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  counter-increment: s;
}
.step::before {
  content: counter(s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 14px;
}
.step h3 { margin-bottom: .35em; }
.step p { margin: 0; color: var(--text-2); font-size: .96rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 18px; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Flightstrip LED illustration (CSS only) ---------- */
.led {
  background: #05070a;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .8);
}
.led-screen {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    #070a0f;
  border-radius: 8px;
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}
.led-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.led-call { color: #ffb648; font-size: 1.32rem; font-weight: 700; letter-spacing: .06em; }
.led-type { color: #6f7d90; font-size: .8rem; letter-spacing: .08em; }
.led-route { color: #57c7ff; font-size: .95rem; letter-spacing: .1em; margin-top: 2px; }
.led-meta { color: #8ee06a; font-size: .82rem; letter-spacing: .08em; margin-top: 2px; }
.led-cap { text-align: center; color: var(--text-3); font-size: .8rem; margin-top: 12px; }

/* ---------- tables / legal ---------- */
.legal h2 { margin-top: 1.8em; font-size: 1.35rem; }
.legal h3 { margin-top: 1.4em; }
.legal ul { color: var(--text-2); padding-left: 20px; }
.legal li { margin-bottom: .45em; }

.notice {
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-left-width: 3px;
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--text-2);
  font-size: .95rem;
  margin: 0 0 1.6em;
}
.notice strong { color: var(--accent-2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); margin-top: 26px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: -2px;
  color: var(--accent-2);
  font-size: 1.3rem;
  font-weight: 400;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: .8em 0 0; color: var(--text-2); font-size: .96rem; }

/* ---------- page head ---------- */
.page-head {
  padding: 52px 0 34px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: .25em; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 46px 0 34px;
  font-size: .92rem;
  color: var(--text-3);
}
.footer-grid { display: grid; gap: 26px; margin-bottom: 28px; }
.footer-grid h4 {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 .9em;
  font-weight: 600;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .5em; }
.footer-grid a { color: var(--text-3); }
.footer-grid a:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- 404 ---------- */
.mid {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 22px;
}

/* ---------- hero: box lockup + warm ceiling-cove line ---------- */
.lockup { width: min(100%, 420px); height: auto; margin: 0 0 22px; }
.hero::after {
  /* the amber cove light that runs along the ceiling line on the box art */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 207, 138, .55) 30%, rgba(255, 207, 138, .75) 55%, transparent);
  box-shadow: 0 -10px 40px rgba(255, 190, 110, .18);
}
.beta {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--spine);
  border: 1px solid rgba(255, 82, 0, .55);
  border-radius: 5px;
  padding: 2px 8px;
  margin-right: 8px;
  vertical-align: 1px;
}

/* ---------- projector boot screen, rebuilt natively ----------
   Source of truth: skylight/scripts/projector/skylight-boot.html (1280x720
   stage). Every size below is stage pixels × --u, where --u scales the
   stage to the figure width via container query units, so it stays crisp at
   any size. Content is scaled 1.3× relative to the projector so the small
   type survives on a phone. One 18 s loop: STARTING UP → RADAR BOOTING →
   FINAL CHECKS → the live radar fades in → back to black. */
.boot-fig { margin: 0; }
/* Phones: the boot screen leads the hero so it is on screen on first load. */
@media (max-width: 899px) { .boot-fig { order: -1; } }
.boot {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  border: 1px solid #10231b;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .65), 0 0 90px rgba(23, 224, 139, .07);
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.boot-stage {
  --u: calc(100cqw / 1280 * 1.3);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(40 * var(--u));
}
.b-scope {
  position: relative;
  flex: none;
  width: calc(280 * var(--u));
  height: calc(280 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid var(--accent-deep);
  box-shadow: 0 0 calc(60 * var(--u)) #062b1f66 inset, 0 0 calc(40 * var(--u)) #062b1f33;
}
.b-ring { position: absolute; border-radius: 50%; border: max(1px, var(--u)) solid var(--accent-deep); }
.b-r1 { inset: 23%; }
.b-r2 { inset: 46%; }
.b-ch { position: absolute; left: 0; right: 0; top: 50%; height: max(1px, var(--u)); background: var(--accent-deep); }
.b-cv { position: absolute; top: 0; bottom: 0; left: 50%; width: max(1px, var(--u)); background: var(--accent-deep); }
.b-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 290deg, #17e08b18 320deg, #17e08b40 350deg, #17e08b80 360deg);
  animation: b-spin 3s linear infinite;
  will-change: transform;
}
.b-sweep::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 50%;
  width: calc(2 * var(--u));
  margin-left: calc(-1 * var(--u));
  background: linear-gradient(#17e08bcc, #17e08b40);
}
@keyframes b-spin { to { transform: rotate(360deg); } }
/* A blip lights as the sweep line passes its bearing (--a, degrees clockwise from top). */
.b-blip {
  position: absolute;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin: calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 calc(6 * var(--u)) var(--accent);
  opacity: 0;
  animation: b-blip 3s linear infinite;
  animation-delay: calc(var(--a) / 360 * 3s - 3s);
}
@keyframes b-blip { 0% { opacity: 0 } 2% { opacity: 1 } 60% { opacity: .15 } 80%, 100% { opacity: 0 } }
.b-wm {
  color: #e8f6ef;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
  font-size: calc(26 * var(--u));
  line-height: 1.2;
  margin-top: calc(30 * var(--u));
  white-space: nowrap;
}
.b-tag {
  color: #3e6b58;
  font-size: calc(12 * var(--u));
  letter-spacing: .22em;
  text-indent: .22em;
  line-height: 1.2;
  margin-top: calc(6 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}
.b-sub, .b-status { position: relative; width: 100%; text-align: center; white-space: nowrap; }
.b-sub {
  color: #7fbfa2;
  font-size: calc(16 * var(--u));
  height: calc(20 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: .2em;
  margin-top: calc(34 * var(--u));
}
.b-status {
  color: #5b6e66;
  font-size: calc(13 * var(--u));
  height: calc(18 * var(--u));
  line-height: calc(18 * var(--u));
  letter-spacing: .06em;
  margin-top: calc(12 * var(--u));
}
.b-sub > span, .b-status > span { position: absolute; left: 0; right: 0; opacity: 0; }
.b-p1 { animation: b-p1 18s step-end infinite; }
.b-p2 { animation: b-p2 18s step-end infinite; }
.b-p3 { animation: b-p3 18s step-end infinite; }
/* 0–2.5 s starting up, 2.5–9 s radar booting, 9–13 s final checks, 13 s radar */
@keyframes b-p1 { 0% { opacity: 1 } 13.9% { opacity: 0 } }
@keyframes b-p2 { 0% { opacity: 0 } 13.9% { opacity: 1 } 50% { opacity: 0 } }
@keyframes b-p3 { 0% { opacity: 0 } 50% { opacity: 1 } 72.2% { opacity: 0 } }
.b-dots i { font-style: normal; opacity: 0; animation: b-dot 1.5s infinite; }
.b-dots i:nth-child(2) { animation-delay: .25s; }
.b-dots i:nth-child(3) { animation-delay: .5s; }
@keyframes b-dot { 0% { opacity: 0 } 30% { opacity: 1 } 60%, 100% { opacity: 0 } }
.b-steps {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(26 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(28 * var(--u));
}
.b-step { width: calc(120 * var(--u)); text-align: center; }
.b-bar { position: relative; height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--accent-deep); overflow: hidden; }
.b-bar b, .b-bar i { position: absolute; inset: 0; background: var(--accent); opacity: 0; }
.b-bar i { animation: b-pulse 1.5s ease-in-out infinite; }
.b-bar .w { position: absolute; inset: 0; opacity: 0; }
.b-lbl { color: #3e6b58; font-size: calc(10 * var(--u)); letter-spacing: .2em; margin-top: calc(8 * var(--u)); text-transform: uppercase; }
@keyframes b-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
/* step 1: solid from the start; step 2 pulses in phase 2, solid after;
   step 3 pulses in phase 3, solid once the radar is up */
.b-s1 b { opacity: 1; }
.b-s2 .w { animation: b-p2 18s step-end infinite; }
.b-s2 b { animation: b-on2 18s step-end infinite; }
.b-s3 .w { animation: b-p3 18s step-end infinite; }
.b-s3 b { animation: b-on3 18s step-end infinite; }
@keyframes b-on2 { 0% { opacity: 0 } 50% { opacity: 1 } }
@keyframes b-on3 { 0% { opacity: 0 } 72.2% { opacity: 1 } }
/* the live radar takes over the ceiling */
.b-radar {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: b-radar 18s ease-in-out infinite;
}
.b-radar img { width: 100%; height: 100%; object-fit: cover; }
@keyframes b-radar { 0%, 72.2% { opacity: 0 } 77% { opacity: 1 } 95% { opacity: 1 } 100% { opacity: 0 } }
.boot-cap { margin-top: 14px; font-size: .86rem; color: var(--text-3); text-align: center; }

/* Reduced motion: the static poster — the boot card frozen mid-sweep, no
   phase changes and no radar crossfade. */
@media (prefers-reduced-motion: reduce) {
  .boot *, .boot *::before, .boot *::after { animation: none !important; }
  .b-sweep { transform: rotate(72deg); }
  .b-blip.k1 { opacity: .9; }
  .b-blip.k2 { opacity: .35; }
  .b-sub .b-p2, .b-status .b-p2, .b-s2 .w { opacity: 1; }
  .b-bar i { opacity: 1; }
  .b-dots i { opacity: 1; }
}

/* ---------- box band: lid lockup over the room scene, icon strip ---------- */
.boxband { padding: 0; background: var(--bg); }
.boxband-scene { position: relative; max-width: 1280px; margin: 0 auto; }
.boxband-scene img { width: 100%; height: auto; }
.boxband-scene::before, .boxband-scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
}
.boxband-scene::before { top: 0; background: linear-gradient(var(--bg), rgba(7, 9, 12, 0)); }
.boxband-scene::after { bottom: 0; background: linear-gradient(rgba(7, 9, 12, 0), var(--bg)); }
.boxband-head { text-align: center; padding: 56px 0 8px; }
.boxband-head h2 { margin-bottom: .2em; }
.strip {
  list-style: none;
  margin: 0 auto;
  padding: 8px var(--pad) 58px;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 0;
}
.strip li {
  text-align: center;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e8ecf0;
  line-height: 1.45;
  padding: 0 10px;
}
.strip svg {
  width: 40px; height: 40px;
  stroke: #e8ecf0; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  display: block; margin: 0 auto 12px;
}

/* ---------- gallery: the retail box ---------- */
.gallery { display: grid; gap: 18px; list-style: none; margin: 34px 0 0; padding: 0; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #0c0e12;
}
.gallery figcaption { margin-top: 10px; font-size: .88rem; color: var(--text-3); }
.gallery figcaption strong { color: var(--text); font-weight: 600; display: block; }

.app-icon { width: min(60%, 260px); margin: 0 auto; border-radius: 22%; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 80px rgba(23, 224, 139, .08); }

/* ---------- responsive ---------- */
/* Narrow screens: the nav wraps, so tighten it up and make the wrap look deliberate. */
@media (max-width: 719px) {
  .site-header .wrap {
    min-height: 0;
    gap: 10px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .nav {
    width: 100%;
    gap: 8px 16px;
  }
  .nav a { font-size: .85rem; }
}

@media (min-width: 720px) {
  .strip { grid-template-columns: repeat(4, 1fr); }
  .strip li + li { border-left: 1px solid rgba(255, 255, 255, .12); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .hero { padding: 88px 0 66px; }
  .hero-grid { grid-template-columns: 1fr 1.1fr; gap: 48px; }
  .product { grid-template-columns: 1fr 1fr; gap: 46px; }
  .product.flip .product-art { order: 2; }
  section { padding: 78px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}