/* =========================================================
   JyotiCab.com — futuristic motion layer (fx.css)
   Everything here is decorative. All motion is switched off
   for visitors who ask their device for reduced motion.
   ========================================================= */

:root {
  --fx-glow: #fe005b;
  --fx-glow-soft: rgba(254, 0, 91, .45);
  --fx-cyan: #7f8cff;
}

/* ---------- Hero: headlight beams + moving road grid ---------- */
.fx-hero-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fx-beam {
  position: absolute; top: -30%; left: -40%; width: 55%; height: 160%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 30%, rgba(190,200,255,.16) 48%, rgba(255,255,255,.22) 50%, rgba(190,200,255,.16) 52%, transparent 70%);
  transform: skewX(-18deg) translateX(-60%);
  mix-blend-mode: screen; opacity: 0;
}
.fx-beam.b2 { width: 35%; background: linear-gradient(100deg, transparent 0%, rgba(254,0,91,.0) 30%, rgba(254,0,91,.18) 50%, transparent 70%); }
.fx-grid {
  position: absolute; left: -25%; right: -25%; bottom: -2px; height: 46%;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 64px 40px;
  transform: perspective(380px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  opacity: .55;
}
.fx-horizon { position: absolute; left: 0; right: 0; bottom: 46%; height: 1px; background: linear-gradient(90deg, transparent, rgba(254,0,91,.7), rgba(127,140,255,.6), transparent); box-shadow: 0 0 18px 2px rgba(254,0,91,.35); opacity: .7; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* HUD label above each page title */
.fx-hud {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font: 600 .74rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: #c9ccff; padding: 7px 12px 7px 10px; border: 1px solid rgba(201,204,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.04); backdrop-filter: blur(6px); max-width: 100%;
}
.fx-hud i { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-glow); box-shadow: 0 0 0 0 var(--fx-glow-soft); flex: 0 0 auto; }
.fx-hud span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .fx-hud { margin-bottom: 20px; }

/* Light pulse travelling along the swoosh */
.swoosh .fx-pulse { stroke: #fff; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 6px #fe005b); opacity: 0; }

/* ---------- Route line: scroll progress with a little car ---------- */
.fx-road { position: fixed; left: 0; right: 0; height: 3px; z-index: 49; pointer-events: none; top: 72px; }
.fx-road::before { content: ""; position: absolute; inset: 1px 0; background: repeating-linear-gradient(90deg, rgba(0,4,120,.18) 0 14px, transparent 14px 26px); }
.fx-road-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #000478, #fe005b 70%, #ff7aa8); box-shadow: 0 0 12px rgba(254,0,91,.6); }
.fx-road-car { position: absolute; top: -7px; left: 0; width: 26px; height: 16px; transform: translateX(-26px); filter: drop-shadow(0 0 6px rgba(254,0,91,.8)); }
.fx-road-car svg { width: 100%; height: 100%; display: block; }

/* ---------- Scroll reveals ---------- */
.fx-pre { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.fx-in { opacity: 1; transform: none; filter: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: var(--fx-d, 0s); }
/* headings wipe in behind a light bar */
.fx-wipe { position: relative; }
.fx-wipe.fx-pre { opacity: 1; transform: none; filter: none; clip-path: inset(0 100% 0 0); }
.fx-wipe.fx-in { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.7,0,.2,1); }
.fx-wipe::after { content: ""; position: absolute; top: 6%; bottom: 6%; width: 4px; left: 0; background: var(--fx-glow); box-shadow: 0 0 14px 2px var(--fx-glow-soft); opacity: 0; pointer-events: none; }
.fx-wipe.fx-in::after { animation: fx-bar .9s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes fx-bar { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- Holographic cards ---------- */
.fx-holo { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-holo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background:
    radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.55), transparent 42%),
    linear-gradient(115deg, transparent 20%, rgba(127,140,255,.16) 40%, rgba(254,0,91,.14) 55%, transparent 75%);
  background-size: 100% 100%, 220% 220%; background-position: 0 0, var(--hx, 50%) 50%;
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s ease;
}
.fx-holo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--fx-ang, 0deg), #fe005b, #7f8cff, #00e1ff, #fe005b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s ease;
}
.fx-holo.fx-hover::after, .fx-holo.fx-hover::before { opacity: 1; }
.fx-holo.fx-hover { box-shadow: 0 24px 50px -24px rgba(0,4,120,.55), 0 0 0 1px transparent; }

/* ---------- Cursor + buttons ---------- */
.fx-cursor, .fx-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; }
.fx-cursor { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(254,0,91,.75); box-shadow: 0 0 14px rgba(254,0,91,.35), inset 0 0 10px rgba(254,0,91,.2); transition: width .25s ease, height .25s ease, margin .25s ease, background-color .25s ease, opacity .3s ease; opacity: 0; }
.fx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fe005b; box-shadow: 0 0 10px #fe005b; opacity: 0; }
.fx-cursor.on, .fx-dot.on { opacity: 1; }
.fx-cursor.big { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(254,0,91,.08); }
.fx-cursor.down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }

.btn { position: relative; overflow: hidden; isolation: isolate; translate: var(--mx, 0px) var(--my, 0px); transition: transform .2s ease, background-color .2s ease, color .2s ease, translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.btn-primary:hover { box-shadow: 0 0 0 4px rgba(254,0,91,.18), 0 10px 30px -8px rgba(254,0,91,.7); }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); }
.btn-primary:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); transform: scale(0); animation: fx-ripple .65s ease-out forwards; }
.btn-ghost .fx-ripple { background: radial-gradient(circle, rgba(254,0,91,.45), rgba(254,0,91,0) 70%); }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* Form fields: laser underline on focus */
.field { position: relative; }
.field::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fe005b, #7f8cff, transparent); transform: scaleX(0); transition: transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; box-shadow: 0 0 10px rgba(254,0,91,.6); }
.field:focus-within::after { transform: scaleX(1); }
.field:has(.hint)::after { display: none; }

/* ---------- Generic scan beam (fleet cards, duty slip) ---------- */
.fx-scan { position: absolute; left: 0; right: 0; top: 0; height: 36%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(127,140,255,.0) 20%, rgba(127,140,255,.28) 80%, rgba(254,0,91,.9) 98%, transparent);
  transform: translateY(-110%); mix-blend-mode: screen; }
.fx-scan.go { animation: fx-scan 1.4s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes fx-scan { 0% { transform: translateY(-110%); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(300%); opacity: 0; } }

/* ---------- Home: duty slip HUD ---------- */
.slip { overflow: hidden; }
.slip .fx-scan { height: 22%; }
.trust .wrap > div { position: relative; padding-left: 14px; }
.trust .wrap > div::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(#fe005b, #7f8cff); transform-origin: top; transform: scaleY(var(--fx-s, 1)); transition: transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--fx-d, 0s); }
.trust .wrap > div.fx-pre { --fx-s: 0; }
.trust .wrap > div.fx-in { --fx-s: 1; }

/* ---------- About: radar on the map pin, HUD frames on the figures ---------- */
.find-map .leaflet-marker-icon::before, .find-map .leaflet-marker-icon::after {
  content: ""; position: absolute; left: 17px; top: 32px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #fe005b; pointer-events: none;
}
.highlights > div { position: relative; }
.highlights dt { text-shadow: 0 0 0 rgba(254,0,91,0); }
.since { position: relative; }
.since::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #fe005b; opacity: 0; }

/* ---------- Fleet: car readout ---------- */
.car-specs span { display: inline-block; }
.car.fx-pre .car-specs span, .car.fx-pre .car-price strong { opacity: 0; }
.car.fx-in .car-specs span { opacity: 1; animation: fx-flicker .6s steps(1) both; animation-delay: calc(.35s + var(--i, 0) * .12s); }
@keyframes fx-flicker { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 1; } }
.car-art img { transition: clip-path 1.2s cubic-bezier(.6,0,.3,1) .1s; }
.car.fx-pre .car-art img { clip-path: inset(0 0 100% 0); }
.car.fx-in .car-art img { clip-path: inset(0 0 0 0); }

/* ---------- Estimate: holographic receipt ---------- */
.receipt { isolation: isolate; }
.receipt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 70% 0%, #000, transparent 75%); }
.fx-corner { position: absolute; width: 18px; height: 18px; border: 2px solid #fe005b; pointer-events: none; filter: drop-shadow(0 0 4px rgba(254,0,91,.8)); }
.fx-corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.fx-corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.fx-corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.fx-corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.odometer.fx-flash { animation: fx-flash .7s ease-out; }
@keyframes fx-flash { 0% { text-shadow: 0 0 0 rgba(254,0,91,0); } 30% { text-shadow: 0 0 18px rgba(254,0,91,.95), 0 0 2px #fff; } 100% { text-shadow: 0 0 0 rgba(254,0,91,0); } }
.car-choice button[aria-pressed="true"] { box-shadow: 0 0 0 1px #fe005b, 0 0 18px -4px rgba(254,0,91,.7); }

/* ---------- Estimate hero dial / Contact hero sonar ---------- */
.fx-dial { position: absolute; right: max(-60px, 2%); top: 50%; width: min(42vw, 380px); aspect-ratio: 1; translate: 0 -50%; opacity: .55; }
.fx-dial svg { width: 100%; height: 100%; overflow: visible; }
.fx-sonar { position: absolute; right: 12%; top: 50%; width: 10px; height: 10px; translate: 0 -50%; }
.fx-sonar i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1.5px solid rgba(254,0,91,.8); }
.fx-sonar b { position: absolute; inset: 0; border-radius: 50%; background: #fe005b; box-shadow: 0 0 16px 4px rgba(254,0,91,.7); }

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fx-beam { animation: fx-beam 7.5s cubic-bezier(.45,0,.25,1) infinite; animation-delay: .6s; }
  .fx-beam.b2 { animation-duration: 10s; animation-delay: 2.4s; }
  .fx-grid { animation: fx-drive 1.6s linear infinite; }
  .fx-horizon { animation: fx-breathe 4s ease-in-out infinite; }
  .fx-hud i { animation: fx-ping 2s ease-out infinite; }
  .swoosh .fx-pulse { animation: fx-run 4.8s cubic-bezier(.5,0,.3,1) 2.2s infinite; }
  .fx-holo::before { animation: fx-spin 4s linear infinite; }
  .fx-road-car { transition: transform .12s linear; }
  .find-map .leaflet-marker-icon::before { animation: fx-radar 2.4s ease-out infinite; }
  .find-map .leaflet-marker-icon::after { animation: fx-radar 2.4s ease-out 1.2s infinite; }
  .since::after { animation: fx-badge 2.6s ease-out infinite; }
  .fx-dial .r1 { animation: fx-rot 28s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  .fx-dial .r2 { animation: fx-rot 16s linear infinite reverse; transform-origin: 50% 50%; transform-box: fill-box; }
  .fx-dial .sweep { animation: fx-rot 4s linear infinite; transform-origin: 50% 50%; transform-box: view-box; }
  .fx-sonar i { animation: fx-sonar 3.6s cubic-bezier(.2,.6,.3,1) infinite; }
  .fx-sonar i:nth-child(2) { animation-delay: 1.2s; }
  .fx-sonar i:nth-child(3) { animation-delay: 2.4s; }
  .slip .fx-scan { animation: fx-scan 1.6s cubic-bezier(.6,0,.3,1) 1.4s, fx-scan 1.6s cubic-bezier(.6,0,.3,1) 7s infinite; }
}
@keyframes fx-beam { 0% { transform: skewX(-18deg) translateX(-60%); opacity: 0; } 12% { opacity: 1; } 55% { opacity: 1; } 70%, 100% { transform: skewX(-18deg) translateX(330%); opacity: 0; } }
@keyframes fx-drive { from { background-position: 0 0, 0 0; } to { background-position: 0 40px, 0 0; } }
@keyframes fx-breathe { 50% { opacity: .35; } }
@keyframes fx-ping { 0% { box-shadow: 0 0 0 0 rgba(254,0,91,.7); } 100% { box-shadow: 0 0 0 9px rgba(254,0,91,0); } }
@keyframes fx-run { 0% { stroke-dashoffset: var(--fx-l0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: var(--fx-l1); opacity: 0; } }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
@keyframes fx-radar { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@keyframes fx-badge { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35, 1.8); opacity: 0; } }
@keyframes fx-rot { to { transform: rotate(360deg); } }
@keyframes fx-sonar { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(26); opacity: 0; } }
@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@media (prefers-reduced-motion: reduce) {
  .fx-pre { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .fx-road-car, .fx-cursor, .fx-dot { display: none; }
}
@media (max-width: 860px) {
  .fx-dial { width: 60vw; right: -22vw; opacity: .3; }
  .fx-sonar { right: 10%; top: 30%; }
  .fx-grid { height: 38%; }
  .fx-horizon { bottom: 38%; }
}
@media (hover: none) { .fx-cursor, .fx-dot { display: none; } }

/* Multi-line page titles keep their line breaks */
.page-hero h1 .line { display: block; }

/* ---------- Contact page hero ---------- */
.contact-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.contact-hero .hero-actions { align-items: flex-end; gap: 16px; }
.ch-action { display: grid; gap: 8px; }
.ch-action small { font: 600 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-muted); }
.ch-call::before, .ch-wa::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ch-call { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ch-wa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.4.1-.2 0-.3 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7a2.8 2.8 0 0 0 1.9-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E"); }
.contact-hero .btn-ghost.ch-wa:hover { border-color: #25d366; color: #fff; background: rgba(37,211,102,.16); }

.ch-panel { position: relative; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px; padding: 26px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 60px -24px rgba(0,2,40,.7), inset 0 1px 0 rgba(255,255,255,.12); overflow: hidden; }
.ch-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(130deg, rgba(254,0,91,.9), transparent 35%, transparent 65%, rgba(127,140,255,.8));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ch-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255,255,255,.22); }
.ch-panel-head strong { font-family: var(--font-display); font-stretch: 112%; font-size: 1.08rem; }
.ch-live { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #9ff0bf; }
.ch-live i { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 10px #25d366; }
.ch-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 18px; position: relative; }
.ch-steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(#fe005b, #7f8cff); transform-origin: top; opacity: .7; }
.ch-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; position: relative; }
.ch-steps b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .95rem var(--font-display); background: var(--navy); border: 2px solid #fe005b; box-shadow: 0 0 14px rgba(254,0,91,.55); position: relative; z-index: 1; }
.ch-steps strong { display: block; font-size: 1rem; }
.ch-steps span { color: var(--on-navy-muted); font-size: .92rem; line-height: 1.45; }
.ch-jump { display: inline-flex; gap: 8px; align-items: center; margin-top: 22px; font-weight: 600; color: #ff7aa8; text-decoration: none; }
.ch-jump:hover { color: #fff; }
.contact-hero .fx-sonar { right: 22%; top: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ch-steps::before { animation: ch-draw 1.2s cubic-bezier(.6,0,.3,1) .5s both; }
  .ch-steps li { animation: ch-in .6s cubic-bezier(.2,.8,.2,1) both; }
  .ch-steps li:nth-child(1) { animation-delay: .6s; } .ch-steps li:nth-child(2) { animation-delay: .9s; } .ch-steps li:nth-child(3) { animation-delay: 1.2s; }
  .ch-panel { animation: ch-in .8s cubic-bezier(.2,.8,.2,1) .25s both; }
  .ch-live i { animation: fx-ping 2s ease-out infinite; }
  .ch-jump span { animation: ch-bob 1.6s ease-in-out infinite; display: inline-block; }
}
@keyframes ch-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ch-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ch-bob { 50% { transform: translateY(4px); } }
@media (max-width: 860px) {
  .contact-hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .contact-hero .fx-sonar { right: 8%; top: 20%; opacity: .45; }
}