/* Home page, «Дневное небо»: the logo sphere is the page's visual language. Light by default, a night sky in the
   dark theme — the colours come from the site tokens (site.css), so both themes follow the header switch. */

.hm {
  --hm-sky: #f2f8ff;
  --hm-sky-2: #ddeeff;
  --hm-hero: linear-gradient(160deg, #ffffff 0%, #eef6ff 55%, #d8eeff 100%);
  --hm-card-shadow: 0 1px 2px var(--shadow), 0 2px 8px -2px var(--shadow);
  --hm-card-lift: 0 2px 4px var(--shadow), 0 22px 44px -18px var(--shadow-strong);
  --hm-blue-card: linear-gradient(135deg, #1464c8 0%, #1a79e1 45%, #3a96f0 100%);
  --hm-orbit: #1a79e1;
  --hm-craft: #ffffff;
  --hm-mark: url("/img/brand/mark-256.png");
  --hm-halo: radial-gradient(circle, rgba(91,160,233,.26) 0%, rgba(208,235,255,.4) 44%, transparent 70%);
  /* Apple-style springs as curves: no overshoot for things that appear, a soft one for things the pointer moves. */
  --hm-out: cubic-bezier(.22, 1, .36, 1);
  --hm-soft: cubic-bezier(.34, 1.3, .64, 1);
}
:root[data-theme="dark"] .hm {
  --hm-sky: #081526;
  --hm-sky-2: #0d1f38;
  --hm-hero: radial-gradient(1100px 520px at 72% 40%, rgba(26,121,225,.20), transparent 70%), linear-gradient(160deg, #040b18 0%, #071428 55%, #0b1d38 100%);
  --hm-card-shadow: 0 1px 2px rgba(0,0,0,.35);
  --hm-card-lift: 0 2px 4px rgba(0,0,0,.4), 0 22px 44px -18px rgba(0,0,0,.7);
  --hm-orbit: #5aa8f7;
  --hm-craft: #cfe6ff;
  --hm-mark: url("/img/brand/mark-deep-256.png");
  --hm-halo: radial-gradient(circle, rgba(58,143,240,.34) 0%, rgba(26,90,190,.16) 45%, transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hm {
    --hm-sky: #081526;
    --hm-sky-2: #0d1f38;
    --hm-hero: radial-gradient(1100px 520px at 72% 40%, rgba(26,121,225,.20), transparent 70%), linear-gradient(160deg, #040b18 0%, #071428 55%, #0b1d38 100%);
    --hm-card-shadow: 0 1px 2px rgba(0,0,0,.35);
    --hm-card-lift: 0 2px 4px rgba(0,0,0,.4), 0 22px 44px -18px rgba(0,0,0,.7);
    --hm-orbit: #5aa8f7;
    --hm-craft: #cfe6ff;
    --hm-mark: url("/img/brand/mark-deep-256.png");
    --hm-halo: radial-gradient(circle, rgba(58,143,240,.34) 0%, rgba(26,90,190,.16) 45%, transparent 70%);
  }
}
/* The home hero paints its own sky: no page glow behind it. */
main:has(> .hm)::before { display: none; }

/* ---- shared pieces ---- */
.hm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 700 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.hm-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
html.motion .hm-eyebrow-dot { animation: hm-ping 2.8s var(--hm-out) infinite; }
@keyframes hm-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

.hm-sec { padding: clamp(64px, 9vw, 104px) 0; }
.hm-sky { background: var(--hm-sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); }
.hm-head h2 { font: 800 clamp(28px, 3.6vw, 44px)/1.12 var(--display); letter-spacing: -0.03em; margin: 0 0 14px; text-wrap: balance; }
.hm-head p { font-size: clamp(16px, 1.4vw, 17.5px); line-height: 1.6; color: var(--slate); margin: 0; text-wrap: pretty; }
.hm-more { text-align: center; margin: 36px 0 0; }

.hm-btn-soft, .hm-btn-white, .hm-btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font: 700 15.5px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
  transition: transform var(--t-press) var(--ease), background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.hm-btn-soft { color: var(--ink); background: color-mix(in srgb, var(--card-bg) 70%, transparent); border: 1px solid var(--line); box-shadow: var(--hm-card-shadow); }
.hm-btn-soft:hover { color: var(--ink); text-decoration: none; background: var(--card-bg); border-color: var(--line-strong); }
.hm-btn-white { color: #0b3f8f; background: #ffffff; box-shadow: 0 14px 34px -12px rgba(0,0,0,.55); }
.hm-btn-white:hover { color: #0b3f8f; text-decoration: none; background: #eaf3fe; }
.hm-btn-line { color: #ffffff; border: 1.5px solid rgba(255,255,255,.42); }
.hm-btn-line:hover { color: #ffffff; text-decoration: none; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); }
:is(.hm-btn-soft, .hm-btn-white, .hm-btn-line):active, .hm .btn-pill:active { transform: scale(.97); }
.hm .btn-pill { min-height: 48px; padding: 12px 28px; }

/* ---- hero ---- */
.hm-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--hm-hero); padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 7vw, 88px); }
.hm-hero-orbits { position: absolute; top: -180px; right: -180px; width: 640px; height: 640px; color: var(--hm-orbit); pointer-events: none; z-index: -1; }
html.motion .hm-hero-orbits { animation: hm-drift 120s linear infinite; }
@keyframes hm-drift { to { transform: rotate(360deg); } }
.hm-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: center; }
.hm-h1 {
  font: 800 clamp(40px, 5.2vw, 64px)/1.06 var(--display); letter-spacing: -0.035em; margin: 0 0 22px; max-width: 13ch; padding-bottom: .06em;
  background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.62; color: var(--slate); max-width: 520px; margin: 0 0 34px; text-wrap: pretty; }
.hm-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* The sphere: the logo mark in its halo, two dashed orbits with aircraft travelling on them. */
.hm-vis { position: relative; display: grid; place-items: center; }
.hm-sphere { position: relative; width: 340px; aspect-ratio: 1; display: grid; place-items: center; will-change: transform; transform: translate3d(var(--tx, 0), var(--ty, 0), 0); }
.hm-halo { position: absolute; inset: -14%; border-radius: 50%; background: var(--hm-halo); }
.hm-orbit { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); color: var(--hm-orbit); overflow: visible; }
.hm-craft circle { fill: var(--hm-craft); filter: drop-shadow(0 0 4px var(--hm-orbit)); }
.hm-mark { position: relative; z-index: 1; width: 300px; aspect-ratio: 1; background: var(--hm-mark) center / contain no-repeat; filter: var(--mark-glow); }
html.motion .hm-mark { animation: hm-mark-in 1400ms var(--hm-out) 120ms both; }
html.motion .hm-halo { animation: hm-halo-in 1800ms var(--hm-out) both; }
html.motion .hm-orbit { animation: hm-orbit-in 1600ms var(--hm-out) 350ms both; }
@keyframes hm-mark-in { from { opacity: 0; transform: scale(.86) rotate(-8deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: var(--mark-glow); } }
@keyframes hm-halo-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes hm-orbit-in { from { opacity: 0; transform: scale(.9) rotate(-12deg); } to { opacity: 1; transform: none; } }
/* Without motion the aircraft sit still where the orbits start. */
@media (prefers-reduced-motion: reduce) { .hm-craft { display: none; } }

/* The live chip on the sphere: who is on the network right now; the numbers roll when they change. */
.hm-live {
  position: absolute; left: -12px; bottom: 6px; z-index: 2; display: grid; gap: 10px; min-width: 188px; padding: 13px 17px 14px;
  border-radius: 16px; color: var(--ink); text-decoration: none; background: color-mix(in srgb, var(--card-bg) 86%, transparent);
  border: 1px solid var(--line); box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -18px var(--shadow-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  transition: transform var(--t-hover) var(--hm-out), box-shadow var(--t-hover) var(--ease);
}
.hm-live:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); box-shadow: 0 2px 4px var(--shadow), 0 24px 48px -18px var(--shadow-strong); }
.hm-live:active { transform: scale(.98); }
html.motion .hm-live { animation: hm-rise 900ms var(--hm-out) 700ms both; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.hm-live-top { display: flex; align-items: center; gap: 7px; font: 700 10.5px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.hm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); }
.hm-live-dot.off { background: var(--dot-off); box-shadow: none; }
html.motion .hm-live-dot:not(.off) { animation: hm-live 2.4s ease-in-out infinite; }
@keyframes hm-live { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--live) 6%, transparent); } }
.hm-live-row { display: flex; gap: 22px; }
.hm-live-item { display: grid; gap: 2px; }
.hm-live-item b { font: 800 26px/1.05 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hm-live-item span { font-size: 12px; color: var(--slate); }

/* A number that changed: the old value leaves upwards, the new one comes up from below (home.js). */
.hm-roll { display: inline-block; }
.hm-roll.out { animation: hm-roll-out 220ms cubic-bezier(.4, 0, 1, 1) both; }
.hm-roll.in { animation: hm-roll-in 420ms var(--hm-out) both; }
@keyframes hm-roll-out { to { opacity: 0; transform: translateY(-40%); filter: blur(2px); } }
@keyframes hm-roll-in { from { opacity: 0; transform: translateY(45%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* ---- numbers ---- */
.hm-stats { background: var(--hm-sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-stats-row { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--line); }
.hm-stat:last-child { border-right: 0; }
.hm-stat b {
  display: block; font: 800 clamp(30px, 3.4vw, 38px)/1.1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  background: var(--grad-num); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-stat span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--slate); }

/* ---- bento ---- */
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hm-card {
  position: relative; overflow: hidden; isolation: isolate; display: block; padding: 30px; border-radius: 22px; color: var(--ink);
  background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--hm-card-shadow);
  transition: transform 320ms var(--hm-out), box-shadow 320ms var(--hm-out), border-color var(--t-hover) var(--ease);
}
a.hm-card:hover { color: var(--ink); text-decoration: none; transform: translateY(-3px); box-shadow: var(--hm-card-lift); border-color: var(--line-strong); }
a.hm-card:active { transform: scale(.99); transition-duration: var(--t-press); }
.hm-card.s7 { grid-column: span 7; } .hm-card.s5 { grid-column: span 5; } .hm-card.s4 { grid-column: span 4; }
.hm-card h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.02em; margin: 0 0 10px; color: inherit; }
.hm-card p { font-size: 15px; line-height: 1.62; color: var(--slate); margin: 0; }
.hm-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); transition: transform 420ms var(--hm-soft); }
.hm-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-card:hover .hm-icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }
.hm-card-blue { background: var(--hm-blue-card); border-color: transparent; color: #ffffff; }
.hm-card-blue h3 { color: #ffffff; }
.hm-card-blue p { color: rgba(255,255,255,.84); }
.hm-card-blue .hm-icon { color: #ffffff; background: rgba(255,255,255,.18); }
a.hm-card-blue:hover { color: #ffffff; border-color: transparent; box-shadow: 0 22px 44px -16px rgba(26,121,225,.6); }
.hm-card-sky { background: linear-gradient(135deg, var(--hm-sky) 0%, var(--hm-sky-2) 100%); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.hm-tags span { font: 600 12px/1 var(--body); letter-spacing: .02em; padding: 6px 11px; border-radius: 999px; color: rgba(255,255,255,.94); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); }
.hm-tags.soft span { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-soft-line); }
/* The aircraft crossing the SkyPilot card: it glides a little further when the card is hovered. */
.hm-plane-deco { position: absolute; right: 26px; bottom: -18px; width: 150px; height: 150px; color: #ffffff; opacity: .1; transform: rotate(45deg); pointer-events: none; z-index: -1; transition: transform 900ms var(--hm-out), opacity 900ms var(--hm-out); }
a.hm-card-blue:hover .hm-plane-deco { transform: translate(18px, -18px) rotate(45deg); opacity: .16; }

/* The radar: a sweep turns while the card is on screen; each blip lights up as the sweep passes it. */
.hm-radar { display: block; margin-top: 20px; height: 100px; border-radius: 12px; overflow: hidden; background: var(--hm-sky); border: 1px solid var(--line); }
.hm-radar svg { display: block; width: 100%; height: 100%; }
.hm-radar circle { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.hm-radar .sector { fill: none; stroke: var(--accent); stroke-width: .8; stroke-dasharray: 3 4; opacity: .45; }
.hm-radar .sweep path { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.hm-radar .sweep { transform-origin: 140px 50px; transform-box: view-box; }
.hm-radar .blips circle { fill: var(--accent); stroke: none; }
.hm-radar text { font: 700 7.5px var(--mono); fill: var(--accent); }
html.motion .hm-radar .sweep { animation: hm-sweep 4s linear infinite; animation-play-state: paused; }
html.motion .hm-radar .blips circle { animation: hm-blip 4s linear infinite; animation-play-state: paused; opacity: .35; }
html.motion .hm-radar .blips circle:nth-child(1) { animation-delay: .45s; }
html.motion .hm-radar .blips circle:nth-child(2) { animation-delay: -1.1s; }
html.motion .hm-radar .blips circle:nth-child(3) { animation-delay: -2.3s; }
html.motion .hm-radar .blips circle:nth-child(4) { animation-delay: -1.8s; }
html.motion .hm-radar.on :is(.sweep, .blips circle) { animation-play-state: running; }
@keyframes hm-sweep { to { transform: rotate(360deg); } }
@keyframes hm-blip { 0%, 4% { opacity: 1; } 60%, 100% { opacity: .3; } }

/* The voice waveform: still bars that "speak" once when the card appears and whenever it is hovered. */
.hm-wave { display: flex; align-items: center; gap: 5px; height: 36px; margin-top: 20px; }
.hm-wave i { flex: 1; max-width: 5px; height: var(--h); border-radius: 3px; background: var(--accent); opacity: .38; transform-origin: 50% 50%; }
.hm-card-sky.talk .hm-wave i { animation: hm-talk 1.4s var(--ease) calc(var(--k) * 28ms) both; }
@keyframes hm-talk { 0%, 100% { transform: scaleY(1); opacity: .38; } 30% { transform: scaleY(1.7); opacity: .75; } 60% { transform: scaleY(.6); opacity: .5; } }

/* ---- steps ---- */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-step { position: relative; padding: 32px 28px; border-radius: 22px; background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--hm-card-shadow); }
.hm-step h3 { font: 700 18px/1.3 var(--display); letter-spacing: -0.015em; margin: 0 0 9px; }
.hm-step p { font-size: 15px; line-height: 1.6; color: var(--slate); margin: 0; }
.hm-step a { font-weight: 600; }
.hm-step-n { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 18px; border-radius: 11px; font: 800 17px/1 var(--display); color: var(--accent); background: var(--accent-soft); }
/* The line from one step to the next draws itself once the steps are on screen. */
.hm-step:not(:last-child)::after { content: ""; position: absolute; top: 50px; right: -25px; width: 26px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--line-strong), var(--accent)); transform-origin: 0 50%; }
html.motion .hm-step:not(:last-child)::after { transform: scaleX(0); transition: transform 700ms var(--hm-out) 500ms; }
html.motion .hm-step.in:not(:last-child)::after, html.motion .hm-step:not([data-reveal]):not(:last-child)::after { transform: none; }

/* ---- right now ---- */
.hm-pulse { background: var(--hm-sky); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hm-pulse-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-pulse-cell { display: grid; align-content: start; gap: 8px; padding: 38px 32px; border-right: 1px solid var(--line); min-width: 0; }
.hm-pulse-cell:first-child { padding-left: 0; }
.hm-pulse-cell:last-child { border-right: 0; padding-right: 0; }
.hm-pulse-lbl { font: 700 11px/1.3 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--slate); }
.hm-pulse-val { font: 800 40px/1.05 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ink); }
.hm-pulse-calls { font: 500 12.5px/1.5 var(--mono); color: var(--slate); overflow-wrap: anywhere; min-height: 1em; }
.hm-pulse-link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font: 600 14px var(--body); }
.hm-pulse-link .chev { transition: transform var(--t-hover) var(--ease); }
.hm-pulse-link:hover { text-decoration: none; }
.hm-pulse-link:hover .chev { transform: translateX(3px); }
.hm-next { display: grid; gap: 4px; padding: 15px 16px; border-radius: 14px; color: var(--ink); background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--hm-card-shadow); transition: transform 320ms var(--hm-out), box-shadow 320ms var(--hm-out); }
.hm-next:hover { color: var(--ink); text-decoration: none; transform: translateY(-2px); box-shadow: var(--hm-card-lift); }
.hm-next-date { font: 700 11.5px/1.3 var(--mono); color: var(--accent); }
.hm-next-name { font: 700 15px/1.3 var(--display); letter-spacing: -0.01em; }
.hm-next-apts { font-size: 12px; color: var(--slate); }

/* ---- events and news ---- */
.hm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.hm .card.hm-ev { position: relative; isolation: isolate; display: block; padding: 0; overflow: hidden; border-radius: 22px; color: var(--ink); background: var(--card-bg); border: 1px solid var(--line); box-shadow: var(--hm-card-shadow); transition: transform 320ms var(--hm-out), box-shadow 320ms var(--hm-out), border-color var(--t-hover) var(--ease); }
.hm a.card.hm-ev:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--hm-card-lift); border-color: var(--line-strong); }
.hm a.card.hm-ev:active { transform: scale(.99); transition-duration: var(--t-press); }
.hm .hm-ev .card-media { border-radius: 0; background: var(--hm-sky); }
.hm .hm-ev .card-media img { transition: transform 900ms var(--hm-out); }
.hm a.hm-ev:hover .card-media img:not(.banner-fill) { transform: scale(1.035); }
.hm .hm-ev .card-media.blank { background: linear-gradient(160deg, var(--accent-soft), transparent 70%); box-shadow: inset 0 -1px 0 var(--line); }
.hm .hm-ev h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.015em; margin: 0 0 8px; }
.hm .hm-ev p { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0; }
.hm .hm-ev .airports { display: block; margin-top: 12px; font-size: 12.5px; color: var(--slate); }
.hm .hm-ev .date-chip { margin-bottom: 12px; }
.hm-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; border-radius: 22px; color: var(--slate); text-align: center; background: var(--card-bg); border: 1px dashed var(--line-strong); }
.hm-empty svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.hm-empty p { margin: 0; }

/* ---- call to action ---- */
.hm-cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(80px, 10vw, 112px) 0; text-align: center; color: #e8f1fd;
  background: radial-gradient(900px 420px at 50% 118%, rgba(58,143,240,.55), transparent 70%), linear-gradient(160deg, #061e50 0%, #0a3a94 45%, #1a79e1 100%); }
.hm-cta-glow { position: absolute; top: -200px; left: 50%; width: 760px; height: 760px; margin-left: -380px; border-radius: 50%; background: radial-gradient(circle, rgba(140,200,250,.22), transparent 64%); pointer-events: none; z-index: -1; }
.hm-cta-mark { position: absolute; right: -90px; top: 50%; width: 420px; aspect-ratio: 1; margin-top: -210px; background: url("/img/brand/mark-256.png") center / contain no-repeat; opacity: .09; pointer-events: none; z-index: -1; }
html.motion .hm-cta-mark { animation: hm-drift 160s linear infinite reverse; }
.hm-cta-in { max-width: 700px; }
.hm-cta h2 { font: 800 clamp(32px, 4.6vw, 54px)/1.08 var(--display); letter-spacing: -0.035em; color: #ffffff; margin: 0 0 16px; text-wrap: balance; }
.hm-cta p { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: rgba(222,236,252,.8); margin: 0 auto 36px; max-width: 560px; }
.hm-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---- phones and tablets ---- */
@media (max-width: 960px) {
  .hm-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hm-vis { order: -1; }
  .hm-sphere { width: 240px; }
  .hm-mark { width: 212px; }
  .hm-vis { display: flex; flex-direction: column; align-items: center; }
  .hm-live { position: relative; left: auto; bottom: auto; margin-top: -10px; }
  .hm-hero-text { text-align: center; }
  .hm-h1, .hm-lead { margin-left: auto; margin-right: auto; }
  .hm-actions { justify-content: center; }
  .hm-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-stat:nth-child(2) { border-right: 0; }
  .hm-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hm-card.s7, .hm-card.s5, .hm-card.s4 { grid-column: span 12; }
  .hm-steps, .hm-cards { grid-template-columns: minmax(0, 1fr); }
  .hm-step:not(:last-child)::after { display: none; }
  .hm-pulse-row { grid-template-columns: minmax(0, 1fr); }
  .hm-pulse-cell, .hm-pulse-cell:first-child, .hm-pulse-cell:last-child { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hm-pulse-cell:last-child { border-bottom: 0; }
  .hm-cta-mark { right: -160px; opacity: .06; }
}
@media (max-width: 480px) {
  .hm-hero { padding-top: 40px; }
  .hm-sphere { width: 200px; }
  .hm-mark { width: 180px; }
  .hm-live { min-width: 0; padding: 11px 14px 12px; }
  .hm-live-item b { font-size: 22px; }
  .hm-actions > * { flex: 1 1 100%; }
  .hm-card { padding: 24px 22px; }
  .hm-stat { padding: 24px 12px; }
  .hm-pulse-val { font-size: 34px; }
}

/* ---- less motion, less transparency, more contrast ---- */
@media (prefers-reduced-motion: reduce) {
  .hm-card, .hm-next, .hm .card.hm-ev, .hm-live, .hm-icon, .hm-plane-deco { transition: none; }
  a.hm-card:hover, .hm-next:hover, .hm a.card.hm-ev:hover, .hm-live:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .hm-live { background: var(--card-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .hm-h1, .hm-stat b { background: none; color: CanvasText; }
}