/* ============================================================
   Felnath Web — home.css  (homepage motion layer)
   Hero "studio stage", marquee, build grid, products, stats.
   ============================================================ */

/* ---------- Hero ---------- */
.x-hero { position: relative; padding: 140px 0 40px; overflow: hidden; isolation: isolate; }
.x-hero::before { /* fine dot grid, fades out toward edges */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(rgba(155,165,188,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 65% 40%, #000 30%, transparent 75%);
}
.x-aurora { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .55; }
.x-aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.x-aurora i:nth-child(1) { width: 46%; height: 46%; left: 30%; top: 18%; background: #3a63e6; }
.x-aurora i:nth-child(2) { width: 34%; height: 34%; left: 55%; top: 38%; background: #7b4dff; }
.x-aurora i:nth-child(3) { width: 22%; height: 22%; left: 40%; top: 52%; background: #f2b544; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .x-aurora i:nth-child(1) { animation: x-drift1 18s ease-in-out infinite alternate; }
  .x-aurora i:nth-child(2) { animation: x-drift2 22s ease-in-out infinite alternate; }
  .x-aurora i:nth-child(3) { animation: x-drift3 26s ease-in-out infinite alternate; }
}
@keyframes x-drift1 { to { transform: translate(-12%, 10%) scale(1.15); } }
@keyframes x-drift2 { to { transform: translate(10%, -14%) scale(.9); } }
@keyframes x-drift3 { to { transform: translate(18%, 12%) scale(1.3); } }

.x-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.x-hero h1 { font-size: clamp(2.3rem, 4.1vw, 3.55rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.x-hero h1 .x-rot { display: inline-block; position: relative; color: var(--marigold); }
.x-hero-lead { color: var(--muted); font-size: 1.15rem; line-height: 1.65; margin-top: 24px; max-width: 33em; }
.x-hero .h-hero-cta { margin-top: 34px; }
.x-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; color: var(--muted); font-size: .95rem; align-items: center; }
.x-proof b { color: var(--text); font-weight: 600; }

/* Intro sequence: one orchestrated moment on load */
@media (prefers-reduced-motion: no-preference) {
  .x-in { opacity: 0; transform: translateY(18px); animation: x-in .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .x-in-1 { animation-delay: .05s; } .x-in-2 { animation-delay: .18s; } .x-in-3 { animation-delay: .3s; } .x-in-4 { animation-delay: .42s; } .x-in-5 { animation-delay: .25s; }
}
@keyframes x-in { to { opacity: 1; transform: none; } }

/* ---------- Stage ---------- */
.x-stage-wrap { position: relative; }
.x-stage { position: relative; aspect-ratio: 1.12 / 1; perspective: 1400px; }
.x-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98) rotateX(4deg); transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s; }
.x-scene.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .8s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.x-label { position: absolute; left: 0; top: 0; z-index: 5; font-size: .8rem; font-weight: 600; color: var(--text); background: rgba(15,21,36,.85); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(8px); }
.x-label span { color: var(--marigold); }

.x-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.x-tab { position: relative; overflow: hidden; flex: 1 1 0; min-width: 0; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; padding: 10px 8px; font: 600 .86rem var(--body); cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.x-tab:hover { color: var(--text); }
.x-tab[aria-selected="true"] { color: var(--text); border-color: #34416a; }
.x-tab i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--marigold); }
.x-tab[aria-selected="true"] i { width: 100%; }
.x-stage-wrap.is-playing .x-tab[aria-selected="true"] i { width: 0; animation: x-progress var(--dur, 5s) linear forwards; }
@keyframes x-progress { to { width: 100%; } }

/* shared device chrome */
.x-win { width: 92%; background: #0f1524; border: 1px solid #263150; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02) inset; }
.x-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #161d31; border-bottom: 1px solid #263150; }
.x-bar i { width: 9px; height: 9px; border-radius: 50%; background: #39445f; }
.x-bar i:nth-child(1) { background: #ff6159; } .x-bar i:nth-child(2) { background: #ffbd2e; } .x-bar i:nth-child(3) { background: #28c941; }
.x-bar span { margin-left: 10px; flex: 1; font-size: .72rem; color: #8892ab; background: #0f1524; border-radius: 6px; padding: 5px 10px; }
.x-phone { width: 38%; aspect-ratio: 9 / 18.5; background: #0b0f1b; border-radius: 34px; padding: 9px; border: 1px solid #2c3757; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), inset 0 0 0 2px #151b2c; position: relative; }
.x-phone-screen { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; position: relative; }
.x-phone-screen::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 32%; height: 14px; border-radius: 10px; background: #000; z-index: 4; }

/* Scene 1: website — real client site scrolling */
.x-web-view { height: 0; padding-bottom: 66%; position: relative; overflow: hidden; background: #fff; }
.x-web-view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
.x-scene.is-on .x-web-view img { animation: x-scrollsite 9s cubic-bezier(.45,.05,.4,1) .4s both; }
@keyframes x-scrollsite { 0%, 6% { transform: translateY(0); } 88%, 100% { transform: translateY(-76.5%); } }
.x-web-meta { position: absolute; right: 2%; bottom: 6%; z-index: 3; background: #fff; color: #0b1020; border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.55); font-size: .78rem; width: 46%; }
.x-web-meta b { display: block; font-size: .9rem; margin-bottom: 6px; }
.x-meter { height: 6px; background: #e8ecf5; border-radius: 6px; overflow: hidden; margin: 6px 0 2px; }
.x-meter i { display: block; height: 100%; width: 0; background: #1fa855; border-radius: 6px; }
.x-scene.is-on .x-meter i { animation: x-fill 1.6s cubic-bezier(.2,.7,.2,1) .9s forwards; }
.x-meter-row { display: flex; justify-content: space-between; color: #4b5470; }
@keyframes x-fill { to { width: var(--w, 96%); } }

/* Scene 2: mobile app */
.x-app { background: linear-gradient(180deg, #f6f3ff 0%, #ffffff 40%); color: #14182b; font-size: 10px; padding: 30px 12px 0; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.x-app-hi { font-size: 9px; color: #6b7290; }
.x-app h4 { font: 700 15px var(--display); letter-spacing: -.01em; margin-top: 1px; }
.x-app-card { background: linear-gradient(135deg, #5b5bf6, #8d4dff); color: #fff; border-radius: 14px; padding: 11px; box-shadow: 0 10px 20px -8px rgba(91,91,246,.6); }
.x-app-card small { opacity: .8; font-size: 8.5px; } .x-app-card strong { display: block; font-size: 12px; margin: 3px 0 7px; }
.x-app-card em { font-style: normal; font-size: 8.5px; background: rgba(255,255,255,.2); padding: 3px 7px; border-radius: 999px; }
.x-chips { display: flex; gap: 5px; }
.x-chips span { font-size: 8.5px; padding: 5px 8px; border-radius: 999px; background: #eef0f8; color: #3a4060; }
.x-chips span:first-child { background: #14182b; color: #fff; }
.x-slot { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #eceef6; border-radius: 12px; padding: 8px; }
.x-slot i { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.x-slot div { flex: 1; } .x-slot b { display: block; font-size: 10px; } .x-slot small { color: #7b829c; font-size: 8.5px; }
.x-slot span { font-size: 8.5px; font-weight: 700; color: #5b5bf6; }
.x-tabbar { margin-top: auto; display: flex; justify-content: space-around; padding: 9px 0 12px; border-top: 1px solid #eceef6; background: #fff; }
.x-tabbar i { width: 16px; height: 16px; border-radius: 5px; background: #d9dcea; } .x-tabbar i:first-child { background: #5b5bf6; }
.x-toast { position: absolute; left: 8px; right: 8px; top: 26px; z-index: 5; background: #14182b; color: #fff; border-radius: 12px; padding: 8px 10px; font-size: 9px; display: flex; gap: 7px; align-items: center; transform: translateY(-140%); opacity: 0; }
.x-toast i { width: 16px; height: 16px; border-radius: 50%; background: #1fa855; flex: none; display: grid; place-items: center; font-style: normal; font-size: 9px; }
.x-scene.is-on .x-toast { animation: x-toast 4.4s ease .9s both; }
@keyframes x-toast { 0% { transform: translateY(-140%); opacity: 0; } 12%, 80% { transform: none; opacity: 1; } 100% { transform: translateY(-140%); opacity: 0; } }
.x-scene.is-on .x-app > * { animation: x-in .6s cubic-bezier(.2,.7,.2,1) both; }
.x-scene.is-on .x-app > *:nth-child(2) { animation-delay: .06s; } .x-scene.is-on .x-app > *:nth-child(3) { animation-delay: .12s; }
.x-scene.is-on .x-app > *:nth-child(4) { animation-delay: .18s; } .x-scene.is-on .x-app > *:nth-child(5) { animation-delay: .24s; }
.x-scene.is-on .x-app > *:nth-child(6) { animation-delay: .3s; } .x-scene.is-on .x-app > *:nth-child(7) { animation-delay: .36s; }
.x-float { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--text); font-size: .8rem; box-shadow: 0 30px 60px -25px rgba(0,0,0,.8); }
.x-float b { display: block; font: 700 1.35rem var(--display); }
.x-float small { color: var(--muted); }
.x-float-l { left: 2%; top: 22%; } .x-float-r { right: 2%; bottom: 18%; }
@media (prefers-reduced-motion: no-preference) {
  .x-scene.is-on .x-float { animation: x-bob 4s ease-in-out infinite alternate; }
  .x-scene.is-on .x-float-r { animation-delay: -2s; }
}
@keyframes x-bob { to { transform: translateY(-10px); } }

/* Scene 3: game (canvas) */
.x-game { width: 94%; aspect-ratio: 16 / 10; border-radius: 26px; padding: 10px; background: #0b0f1b; border: 1px solid #2c3757; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), inset 0 0 0 2px #151b2c; position: relative; }
.x-game canvas { width: 100%; height: 100%; display: block; border-radius: 18px; }
.x-game-hud { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; justify-content: space-between; font: 700 .8rem var(--display); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); pointer-events: none; }
.x-game-hud span { background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 999px; }

/* Scene 4: SaaS dashboard */
.x-dash { display: grid; grid-template-columns: 54px 1fr; min-height: 0; aspect-ratio: 1.5 / 1; }
.x-side { background: #121a2e; border-right: 1px solid #263150; padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.x-side i { width: 22px; height: 22px; border-radius: 7px; background: #222c46; } .x-side i:first-child { background: var(--brand); }
.x-main { padding: 14px; display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.x-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.x-kpi { background: #151d33; border: 1px solid #263150; border-radius: 10px; padding: 10px; min-width: 0; }
.x-kpi small { display: block; color: #8892ab; font-size: .66rem; }
.x-kpi b { display: block; font: 700 1.05rem var(--display); margin-top: 3px; white-space: nowrap; }
.x-kpi em { font-style: normal; font-size: .64rem; color: #3fd28a; }
.x-chart { background: #151d33; border: 1px solid #263150; border-radius: 10px; padding: 10px; position: relative; min-height: 0; }
.x-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.x-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.x-area { fill: url(#xg); opacity: 0; }
.x-scene.is-on .x-line { animation: x-draw 1.8s cubic-bezier(.4,0,.2,1) .3s forwards; }
.x-scene.is-on .x-area { animation: x-fade .8s ease 1.4s forwards; }
.x-bars rect { fill: #2a3557; transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.x-bars rect.hi { fill: var(--marigold); }
.x-scene.is-on .x-bars rect { animation: x-grow .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes x-draw { to { stroke-dashoffset: 0; } }
@keyframes x-fade { to { opacity: 1; } }
@keyframes x-grow { to { transform: scaleY(1); } }

/* Scene 5: CRM pipeline */
.x-crm { padding: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; aspect-ratio: 1.75 / 1; }
.x-col { background: #121a2e; border: 1px solid #263150; border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.x-col h5 { font: 600 .72rem var(--body); color: #9ba5bc; display: flex; justify-content: space-between; margin-bottom: 2px; }
.x-col h5 b { color: var(--text); font-weight: 700; }
.x-lead { background: #1a233c; border: 1px solid #2a3557; border-radius: 8px; padding: 8px; font-size: .7rem; }
.x-lead b { display: block; font-size: .74rem; color: var(--text); }
.x-lead small { color: #8892ab; display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.x-lead small i { width: 8px; height: 8px; border-radius: 50%; background: #1fa855; }
.x-lead.is-won { border-color: rgba(242,181,68,.6); background: #2a2614; }
.x-mover { position: absolute; width: calc((100% - 28px - 20px) / 3 - 18px); z-index: 4; box-shadow: 0 18px 30px -12px rgba(0,0,0,.7); transition: left .9s cubic-bezier(.6,0,.2,1), top .9s cubic-bezier(.6,0,.2,1), background .4s, border-color .4s; }

/* ---------- Marquee ---------- */
.x-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 20px 0; margin-top: 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.x-track { display: flex; gap: 48px; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .x-track { animation: x-marq 38s linear infinite; } .x-marquee:hover .x-track { animation-play-state: paused; } }
@keyframes x-marq { to { transform: translateX(-50%); } }
.x-track span { display: inline-flex; align-items: center; gap: 12px; font: 600 1.15rem var(--display); color: var(--text); white-space: nowrap; }
.x-track span svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.x-track span:nth-child(3n) svg { color: var(--marigold); }

/* ---------- Build grid ---------- */
.x-build { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.x-tile { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; overflow: hidden; transition: border-color .25s, transform .25s; }
.x-tile::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(79,124,255,.18), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.x-tile:hover { border-color: #34416a; transform: translateY(-3px); }
.x-tile:hover::after { opacity: 1; }
.x-ico { width: 46px; height: 46px; margin-bottom: 20px; color: var(--brand); }
.x-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.x-ico .acc { stroke: var(--marigold); }
.x-ico svg * { stroke-dasharray: 120; stroke-dashoffset: 0; }
.x-build.is-drawing .x-ico svg * { animation: x-icodraw 1.4s cubic-bezier(.4,0,.2,1) both; }
.x-build.is-drawing .x-tile:nth-child(2) .x-ico svg * { animation-delay: .08s; } .x-build.is-drawing .x-tile:nth-child(3) .x-ico svg * { animation-delay: .16s; }
.x-build.is-drawing .x-tile:nth-child(4) .x-ico svg * { animation-delay: .24s; } .x-build.is-drawing .x-tile:nth-child(5) .x-ico svg * { animation-delay: .32s; }
.x-build.is-drawing .x-tile:nth-child(6) .x-ico svg * { animation-delay: .4s; } .x-build.is-drawing .x-tile:nth-child(7) .x-ico svg * { animation-delay: .48s; }
.x-build.is-drawing .x-tile:nth-child(8) .x-ico svg * { animation-delay: .56s; }
@keyframes x-icodraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
.x-tile h3 { font-size: 1.22rem; margin-bottom: 8px; }
.x-tile p { color: var(--muted); font-size: .95rem; line-height: 1.6; flex: 1; }
.x-tile span { margin-top: 16px; color: var(--brand); font-weight: 600; font-size: .9rem; }
.x-tile:hover span { color: var(--marigold); }
.x-group { grid-column: 1 / -1; color: var(--muted); font-size: .95rem; margin: 10px 0 -2px; }
.x-group:first-child { margin-top: 0; }

/* ---------- Stats ---------- */
.x-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, var(--surface), transparent); }
.x-stat { padding: 30px 26px; border-right: 1px solid var(--line); }
.x-stat:last-child { border-right: 0; }
.x-stat b { display: block; font: 800 clamp(2.2rem, 4vw, 3.1rem) var(--display); letter-spacing: -.03em; line-height: 1; }
.x-stat b small { font-size: .5em; color: var(--marigold); margin-left: 2px; }
.x-stat > span { display: block; color: var(--muted); margin-top: 10px; font-size: .95rem; line-height: 1.5; }
.x-stat b span { display: inline; }

/* ---------- Own products ---------- */
.x-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1180px) { .x-products { grid-template-columns: 1fr 1fr; } }
.x-prod { position: relative; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease, border-color .25s; will-change: transform; }
.x-prod:hover { border-color: #34416a; }
.x-prod-art { aspect-ratio: 16 / 11; position: relative; overflow: hidden; display: grid; place-items: center; }
.x-prod-art svg { width: 100%; height: 100%; display: block; }
.x-prod-body { padding: 22px 24px 26px; }
.x-prod-tag { display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.x-prod-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); }
@media (prefers-reduced-motion: no-preference) { .x-prod-tag i { animation: x-pulse 1.8s ease-in-out infinite; } }
@keyframes x-pulse { 50% { opacity: .3; } }
.x-prod h3 { font-size: 1.5rem; margin: 14px 0 8px; }
.x-prod p { color: var(--muted); line-height: 1.6; }
.x-prod-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.07), transparent 40%); opacity: 0; transition: opacity .3s; }
.x-prod:hover .x-prod-shine { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .x-float-y { animation: x-bob 3.6s ease-in-out infinite alternate; }
  .x-float-y2 { animation: x-bob 4.4s ease-in-out -1.5s infinite alternate; }
  .x-spin { animation: x-spin 22s linear infinite; transform-origin: center; transform-box: fill-box; }
}
@keyframes x-spin { to { transform: rotate(360deg); } }

/* ---------- Process line ---------- */
.x-steps { position: relative; }
.x-steps::before { content: ""; position: absolute; left: 22px; right: 8%; top: 22px; height: 1px; background: var(--line); }
.x-steps::after { content: ""; position: absolute; left: 22px; top: 22px; height: 1px; width: 0; background: linear-gradient(90deg, var(--brand), var(--marigold)); transition: width 1.8s cubic-bezier(.4,0,.2,1); }
.x-steps.is-drawn::after { width: calc(92% - 22px); }
.x-steps li::before { position: relative; z-index: 1; background: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .x-build { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .x-hero { padding-top: 116px; }
  .x-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .x-stage-wrap { max-width: 640px; }

  .x-stats { grid-template-columns: 1fr 1fr; }
  .x-stat:nth-child(2) { border-right: 0; }
  .x-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .x-steps::before, .x-steps::after { display: none; }
}
@media (max-width: 600px) {
  .x-build { grid-template-columns: 1fr; }
  .x-tabs { gap: 6px; }
  .x-tab { font-size: .74rem; padding: 9px 4px; }
  .x-phone { width: 44%; }
  .x-float { font-size: .7rem; padding: 9px 10px; }
  .x-float b { font-size: 1.05rem; }
  .x-kpi b { font-size: .82rem; } .x-kpi small, .x-kpi em { font-size: .56rem; }
  .x-lead { padding: 6px; font-size: .6rem; } .x-lead b { font-size: .64rem; }
  .x-col h5 { font-size: .62rem; }
  .x-stat { padding: 22px 18px; }
  .x-marquee { margin-top: 40px; }
  .x-track span { font-size: 1rem; }
}

/* Reduced motion: everything visible, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .x-line { stroke-dashoffset: 0; } .x-area { opacity: 1; } .x-bars rect { transform: none; }
  .x-meter i { width: var(--w, 96%); }
}

@media (max-width: 600px) { .x-aurora { filter: blur(50px); opacity: .45; } .x-aurora i { animation: none !important; } }

@media (max-width: 600px) { .x-products { grid-template-columns: 1fr; } }
.x-prod h3 { font-size: 1.35rem; }
.x-prod-body { padding: 20px 20px 24px; }