/* ==========================================================================
   EAS 2026 — design system + home page
   Loaded after widget.css. Owns: tokens, base typography, navbar, floating
   nav, focus states, motion system, every `.x-*` home component, footer,
   and light chrome overrides for the legacy modal pages.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    /* colour */
    --e-black: #000000;
    --e-coal: #0d0b09;        /* section surface */
    --e-char: #17130f;        /* raised surface */
    --e-ash: #241e18;         /* borders / hairlines on dark */
    --e-bone: #f4efe7;        /* primary text on dark (warm white) */
    --e-smoke: #a59b8f;       /* secondary text */
    --e-dust: #877d72;        /* tertiary text (4.9:1 on the dark surfaces, WCAG AA) */
    --e-ember: #ff6b00;       /* brand */
    --e-ember-hot: #ff8c3a;
    --e-ember-deep: #c24e00;
    --e-ember-12: rgba(255, 107, 0, 0.12);
    --e-ember-25: rgba(255, 107, 0, 0.25);
    --e-ember-45: rgba(255, 107, 0, 0.45);
    --e-line: rgba(244, 239, 231, 0.10);
    --e-line-strong: rgba(244, 239, 231, 0.18);

    /* type */
    --e-display: 'Chakra Petch', 'Poppins', system-ui, sans-serif;
    --e-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --e-fs-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.82rem); /* 12px floor: labels stay readable on phones */
    --e-fs-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.93rem);
    --e-fs-md: clamp(0.975rem, 0.94rem + 0.15vw, 1.0625rem);
    --e-fs-lg: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    --e-fs-xl: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
    --e-fs-2xl: clamp(1.45rem, 1.05rem + 1.1vw, 2.15rem);
    --e-fs-hero: clamp(2rem, 1.15rem + 2.2vw, 3.3rem);

    /* space */
    --e-gutter: clamp(16px, 4vw, 56px);
    --e-section: clamp(64px, 8vw, 124px);
    --e-max: 1280px;

    /* radius */
    --e-r-sm: 8px;
    --e-r-md: 16px;
    --e-r-lg: 28px;
    --e-r-pill: 999px;

    /* motion */
    --e-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --e-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --e-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
    --e-t-quick: 160ms;
    --e-t-std: 320ms;
    --e-t-slow: 640ms;
}

/* registered custom properties: lets the gradient button animate its gradient */
@property --gb-x { syntax: '<percentage>'; initial-value: 12%; inherits: false; }
@property --gb-y { syntax: '<percentage>'; initial-value: 140%; inherits: false; }
@property --gb-sx { syntax: '<percentage>'; initial-value: 150%; inherits: false; }
@property --gb-sy { syntax: '<percentage>'; initial-value: 180%; inherits: false; }
@property --gb-c1 { syntax: '<color>'; initial-value: #ff8c3a; inherits: false; }
@property --gb-c2 { syntax: '<color>'; initial-value: #ff6b00; inherits: false; }
@property --gb-c3 { syntax: '<color>'; initial-value: #e85d00; inherits: false; }
@property --gb-c4 { syntax: '<color>'; initial-value: #b34400; inherits: false; }
@property --gb-c5 { syntax: '<color>'; initial-value: #5a2100; inherits: false; }
@property --gb-s1 { syntax: '<percentage>'; initial-value: 30%; inherits: false; }
@property --gb-s2 { syntax: '<percentage>'; initial-value: 55%; inherits: false; }
@property --gb-s3 { syntax: '<percentage>'; initial-value: 72%; inherits: false; }
@property --gb-s4 { syntax: '<percentage>'; initial-value: 88%; inherits: false; }
@property --gb-s5 { syntax: '<percentage>'; initial-value: 100%; inherits: false; }
@property --gb-angle { syntax: '<angle>'; initial-value: 20deg; inherits: true; }
@property --gb-b1 { syntax: '<color>'; initial-value: rgba(255, 200, 160, 0.35); inherits: true; }
@property --gb-b2 { syntax: '<color>'; initial-value: rgba(255, 107, 0, 0.7); inherits: true; }

/* ---------- 2. Base ------------------------------------------------------ */
html, body { background: var(--e-black); }
body { overflow-x: clip; }
html { scroll-padding-top: 88px; }

#home, .x-hp, .x-footer, .navbar {
    color: var(--e-bone);
    font-family: var(--e-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
:is(#home, .x-hp) { font-size: var(--e-fs-md); line-height: 1.6; }
:is(#home, .x-hp) h1, :is(#home, .x-hp) h2, :is(#home, .x-hp) h3, :is(#home, .x-hp) .x-display, .x-footer .x-footer-h {
    font-family: var(--e-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.02;
    text-wrap: balance;
    margin: 0;
}
:is(#home, .x-hp) h2 { font-size: var(--e-fs-2xl); }
:is(#home, .x-hp) h3 { font-size: var(--e-fs-lg); }
:is(#home, .x-hp) p { margin: 0; }
:is(#home, .x-hp) a { color: inherit; }
:where(#home, .x-hp) img { display: block; max-width: 100%; height: auto; }
:is(#home, .x-hp) ::selection { background: var(--e-ember); color: #000; }

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--e-ember-hot);
    outline-offset: 3px;
    border-radius: 6px;
}
.x-skip {
    position: fixed; left: 16px; top: -60px; z-index: 100000;
    padding: 10px 16px; background: var(--e-ember); color: #000;
    font-weight: 600; border-radius: var(--e-r-sm); transition: top var(--e-t-quick);
}
.x-skip:focus { top: 16px; }

.x-container {
    width: min(100% - 2 * var(--e-gutter), var(--e-max));
    margin-inline: auto;
}
.x-section {
    position: relative;
    padding-block: var(--e-section);
}
.x-section + .x-section { border-top: 1px solid var(--e-line); }
/* closed dialogs are fully skipped by the renderer (inactive pages carry [hidden]) */
.service-modal-overlay:not(.active) { content-visibility: hidden; }

/* section headers: marker + title + lede, left aligned, 2-col on wide */
.x-head {
    display: grid;
    gap: 18px 48px;
    margin-bottom: clamp(36px, 5vw, 64px);
}
@media (min-width: 900px) {
    .x-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.x-mark {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--e-fs-sm); color: var(--e-smoke); font-weight: 500;
    margin-bottom: 14px;
}
.x-mark::before {
    content: ''; width: 24px; height: 2px; background: var(--e-ember); border-radius: 2px;
}
.x-lede { color: var(--e-smoke); font-size: var(--e-fs-md); max-width: 52ch; }
.x-lede strong { color: var(--e-bone); font-weight: 500; }

/* ---------- 3. Buttons --------------------------------------------------- */
.x-btn {
    --bg: var(--e-char);
    --fg: var(--e-bone);
    --bd: var(--e-line-strong);
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px;
    border-radius: var(--e-r-pill);
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--bd);
    font: 600 var(--e-fs-sm)/1 var(--e-body);
    letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer;
    isolation: isolate; overflow: hidden;
    transition: transform var(--e-t-std) var(--e-ease-out),
                background var(--e-t-std) var(--e-ease-std),
                border-color var(--e-t-std) var(--e-ease-std),
                box-shadow var(--e-t-std) var(--e-ease-std),
                color var(--e-t-std) var(--e-ease-std);
    will-change: transform;
}
.x-btn svg { width: 18px; height: 18px; flex: none; }
.x-btn:hover { border-color: rgba(244, 239, 231, 0.32); background: #201a15; }
.x-btn:active { transform: scale(0.97); transition-duration: var(--e-t-quick); }
.x-btn-ghost { --bg: transparent; }
.x-btn-lg { min-height: 60px; padding: 0 34px; font-size: var(--e-fs-md); }
.x-btn .x-btn-arrow { transition: transform var(--e-t-std) var(--e-ease-out); }
.x-btn:hover .x-btn-arrow { transform: translateX(4px); }

/* primary: living gradient (radial gradient whose centre, spread and stops animate on hover) */
.x-btn-primary {
    --fg: #fff6ee;
    --bd: transparent;
    color: var(--fg);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    background: radial-gradient(
        var(--gb-sx) var(--gb-sy) at var(--gb-x) var(--gb-y),
        var(--gb-c1) var(--gb-s1),
        var(--gb-c2) var(--gb-s2),
        var(--gb-c3) var(--gb-s3),
        var(--gb-c4) var(--gb-s4),
        var(--gb-c5) var(--gb-s5)
    );
    box-shadow: 0 10px 34px -12px var(--e-ember-45);
    transition:
        transform var(--e-t-std) var(--e-ease-out),
        box-shadow var(--e-t-std),
        --gb-x 0.55s, --gb-y 0.55s, --gb-sx 0.55s, --gb-sy 0.55s,
        --gb-c1 0.55s, --gb-c2 0.55s, --gb-c3 0.55s, --gb-c4 0.55s, --gb-c5 0.55s,
        --gb-s1 0.55s, --gb-s2 0.55s, --gb-s3 0.55s, --gb-s4 0.55s, --gb-s5 0.55s,
        --gb-angle 0.55s, --gb-b1 0.55s, --gb-b2 0.55s;
}
.x-btn-primary::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(var(--gb-angle), var(--gb-b1), var(--gb-b2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.x-btn-primary:hover {
    --gb-x: 0%; --gb-y: 92%; --gb-sx: 120%; --gb-sy: 104%;
    --gb-c1: #ffd2b0; --gb-c2: #ff9a4a; --gb-c3: #ff6b00; --gb-c4: #7a2e00; --gb-c5: #1a0800;
    --gb-s1: 0%; --gb-s2: 9%; --gb-s3: 22%; --gb-s4: 72%; --gb-s5: 86%;
    --gb-angle: 190deg; --gb-b1: rgba(255, 220, 190, 0.15); --gb-b2: rgba(255, 210, 170, 0.7);
    box-shadow: 0 18px 44px -12px var(--e-ember-45);
    background-color: var(--e-ember);
}
/* dark variant: black glass body that ignites on hover */
.x-btn-dark {
    --fg: var(--e-bone); --bd: transparent; color: var(--fg);
    --gb-c1: #000; --gb-c2: #1a120c; --gb-c3: #3a1d0b; --gb-c4: #6a3410; --gb-c5: #8a4418;
    --gb-b1: rgba(255, 140, 58, 0.25); --gb-b2: rgba(255, 107, 0, 0.75);
    text-shadow: none;
}
.x-btn-dark:hover {
    --gb-c1: #ff9a4a; --gb-c2: #ff7a1a; --gb-c3: #c24e00; --gb-c4: #37140a; --gb-c5: #000;
    --gb-b1: rgba(255, 220, 190, 0.1); --gb-b2: rgba(255, 210, 170, 0.6);
    color: #fff6ee;
}

/* ---------- 4. Navbar (restyle of legacy markup) ------------------------ */
.navbar {
    position: fixed; inset: 0 0 auto 0; z-index: 9990;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background var(--e-t-std) var(--e-ease-std), border-color var(--e-t-std) var(--e-ease-std);
}
.navbar.scrolled, .navbar.x-open {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--e-line);
}
.navbar .nav-container {
    width: min(100% - 2 * var(--e-gutter), 1400px);
    margin-inline: auto; padding: 0;
    height: 72px; display: flex; align-items: center; gap: 24px;
}
.navbar .nav-logo {
    display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--e-bone);
    flex: none;
}
.navbar .x-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.navbar .x-brand {
    font-family: var(--e-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
    white-space: nowrap;
}
.navbar .x-brand em { font-style: normal; color: var(--e-ember); }
.navbar .nav-menu {
    list-style: none; margin: 0 auto; padding: 0;
    display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto;
    background: none; box-shadow: none; position: static;
}
.navbar .nav-menu li { margin: 0; }
.navbar .nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--e-r-pill);
    color: var(--e-smoke); font: 500 var(--e-fs-sm)/1 var(--e-body);
    text-decoration: none; cursor: pointer;
    transition: color var(--e-t-quick), background var(--e-t-quick);
}
.navbar .nav-link:hover { color: var(--e-bone); background: rgba(244, 239, 231, 0.06); }
.navbar .nav-link.active { color: var(--e-bone); background: rgba(244, 239, 231, 0.09); }
.navbar .nav-link .x-tag {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
    padding: 4px 6px; border-radius: 6px; background: var(--e-ember); color: #100800;
}
.navbar .nav-link .x-tag.x-tag-soft { background: var(--e-ember-25); color: var(--e-ember-hot); }
.navbar .x-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.navbar .x-nav-actions .x-btn { min-height: 42px; padding: 0 18px; }
.navbar .x-nav-phone { color: var(--e-smoke); font-size: var(--e-fs-sm); text-decoration: none; padding: 0 8px; }
.navbar .x-nav-phone:hover { color: var(--e-bone); }
.navbar .nav-toggle {
    display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--e-line);
    background: rgba(0, 0, 0, 0.4); cursor: pointer; margin-left: auto;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0;
}
.navbar .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--e-bone); border-radius: 2px; transition: transform var(--e-t-std) var(--e-ease-out), opacity var(--e-t-quick); margin: 0; }
.navbar .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar .nav-toggle.active span:nth-child(2) { opacity: 0; }
.navbar .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1540px) {
    .navbar .x-nav-phone { display: none; }
}
@media (max-width: 1440px) {
    .navbar .x-nav-actions .x-btn-ghost { display: none; }
    .navbar .nav-link { padding: 10px 11px; }
}
@media (max-width: 1320px) {
    .navbar .x-brand span { display: none; }
}
@media (max-width: 1240px) {
    .navbar .nav-toggle { display: flex; }
    .navbar .x-nav-actions { display: none; }
    .navbar .nav-menu {
        position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
        flex-direction: column; align-items: stretch; gap: 2px;
        padding: 12px var(--e-gutter) 40px;
        background: rgba(0, 0, 0, 0.94);
        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity var(--e-t-std) var(--e-ease-out), transform var(--e-t-std) var(--e-ease-out), visibility 0s var(--e-t-std);
        margin: 0;
    }
    .navbar .nav-menu.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .navbar .nav-menu li { border-bottom: 1px solid var(--e-line); }
    .navbar .nav-link { width: 100%; padding: 18px 8px; font-size: 1.15rem; border-radius: 0; font-family: var(--e-display); font-weight: 600; }
    .navbar .nav-menu .x-menu-cta { display: grid; gap: 10px; padding: 24px 0 0; border: 0; }
}
@media (min-width: 1241px) {
    .navbar .nav-menu .x-menu-cta { display: none; }
    /* neutralise the legacy widget.css 1350px mobile menu (column, 100vh) between 1241 and 1350px */
    .navbar .nav-menu { flex-direction: row; justify-content: flex-start; width: auto; height: auto; padding: 0; z-index: auto; }
}
@media (max-width: 1240px) {
    .navbar .nav-menu { height: auto; width: auto; justify-content: flex-start; background: var(--e-black); }
    .navbar .nav-link::before, .navbar .nav-link:hover::before, .navbar .nav-link.active::before { left: 8px; right: auto; transform: none; width: 0; }
    .navbar .nav-link.active::before { width: 28px; }
}

/* ---------- 6. Reveal system (GSAP-driven, CSS fallback) ---------------- */
/* The hidden state lives on :not(.is-in); the revealed state only carries the transition, so an
   element's own transform (hover lifts) is never overridden. app/js/motion.js adds .m-done once the
   entrance has finished, which drops the entrance transition/stagger so hovers respond instantly.
   No permanent will-change: the compositor promotes elements only while they transition. */
html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
html.js [data-reveal].is-in:not(.m-done) { transition: opacity 520ms var(--e-ease-out), transform 560ms var(--e-ease-out); }
html.js [data-reveal-group]:not(.is-in) > * { opacity: 0; transform: translateY(14px); }
html.js [data-reveal-group].is-in:not(.m-done) > * { transition: opacity 480ms var(--e-ease-out), transform 550ms var(--e-ease-out); }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(2) { transition-delay: 50ms; }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(3) { transition-delay: 100ms; }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(4) { transition-delay: 140ms; }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(5) { transition-delay: 180ms; }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(6) { transition-delay: 210ms; }
html.js [data-reveal-group].is-in:not(.m-done) > :nth-child(n+7) { transition-delay: 240ms; }
html.js.x-no-motion [data-reveal], html.js.x-no-motion [data-reveal-group] > * { opacity: 1; transform: none; filter: none; }
/* page-hero ledes are the LCP element on phones (deep-linked /pricing, /portfolio, /ai-transformation):
   like the home lede they rise into place but never start invisible */
html.js #pricing-intro .pr-lede[data-reveal]:not(.is-in), html.js #pf-hero .pf-lede[data-reveal]:not(.is-in), html.js #ait-hero .ait-hero-lede[data-reveal]:not(.is-in) { opacity: 1; filter: none; }

/* ---------- 7. Hero ------------------------------------------------------ */
.x-hero {
    position: relative; min-height: 100svh;
    display: grid; align-items: center;
    padding-block: calc(72px + clamp(48px, 8vh, 96px)) clamp(48px, 8vh, 96px);
    overflow: clip;
    isolation: isolate;
}
.x-hero-net {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
    display: block;
}
.x-hero-veil {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 55% at 22% 45%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 30%, transparent 70%, #000 100%);
}
.x-hero-spot {
    position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%;
    left: 0; top: 0; pointer-events: none;
    background: radial-gradient(circle, var(--e-ember-25) 0%, rgba(255, 107, 0, 0.08) 35%, transparent 70%);
    filter: blur(30px);
    transform: translate(-50%, -50%);
    opacity: 0; transition: opacity var(--e-t-slow) var(--e-ease-std);
}
.x-hero.is-pointer .x-hero-spot { opacity: 1; }
.x-hero-grid {
    display: grid; gap: 40px;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) { .x-hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.x-hero-copy { max-width: 760px; }
.x-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 8px; border-radius: var(--e-r-pill);
    border: 1px solid var(--e-line-strong); background: rgba(13, 11, 9, 0.6);
    backdrop-filter: blur(8px);
    font-size: var(--e-fs-sm); color: var(--e-smoke); margin-bottom: 28px;
}
.x-kicker img { width: 24px; height: 24px; border-radius: 6px; }
.x-kicker b { color: var(--e-bone); font-weight: 600; }
.x-hero-title {
    font-size: var(--e-fs-hero);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0 0 26px;
}
.x-hero-title .x-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.x-hero-title .x-line > span { display: inline-block; }
/* Hero entrance: pure CSS so the headline paints on the first frame (no wait for scripts) */
html.js .x-hero-title .x-line > span { animation: x-hero-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.js .x-hero-title .x-line:nth-child(2) > span { animation-delay: 0.09s; }
html.js .x-hero-title .x-line:nth-child(3) > span { animation-delay: 0.18s; }
html.js #section-hero [data-hero-seq] { animation: x-hero-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
html.js #section-hero .x-hero-lede { animation-name: x-hero-slide; animation-delay: 0.08s; }
html.js #section-hero .x-hero-actions { animation-delay: 0.16s; }
html.js #section-hero .x-hero-stats { animation-delay: 0.24s; }
html.js #section-hero .x-hero-side { animation-delay: 0.32s; }
@keyframes x-hero-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes x-hero-up { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the lede is the LCP element on phones: it moves but never starts invisible */
@keyframes x-hero-slide { from { transform: translateY(22px); } to { transform: none; } }
.x-hero-title .x-word { color: var(--e-ember); position: relative; white-space: nowrap; }
.x-hero-title .x-word::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.07em;
    background: var(--e-ember); border-radius: 2px; transform: scaleX(0); transform-origin: left;
}
.x-hero.is-in .x-hero-title .x-word::after { animation: x-underline 900ms var(--e-ease-out) 1.1s forwards; }
@keyframes x-underline { to { transform: scaleX(1); } }
.x-hero-lede { font-size: var(--e-fs-lg); line-height: 1.5; color: var(--e-smoke); max-width: 56ch; margin-bottom: 36px; }
.x-hero-lede strong { color: var(--e-bone); font-weight: 400; } /* preloaded weight: the lede is the phone LCP */
.x-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 52px; }
.x-hero-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
    margin: 0; padding: 0;
    border-top: 1px solid var(--e-line);
}
@media (min-width: 640px) { .x-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-hero-stats > div { padding: 18px 20px 6px 0; }
.x-hero-stats dt { order: 2; font-size: var(--e-fs-xs); color: var(--e-dust); margin-top: 6px; }
.x-hero-stats dd { margin: 0; font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-xl); line-height: 1; color: var(--e-bone); font-variant-numeric: tabular-nums; }
.x-hero-stats dd small { font-size: 0.6em; color: var(--e-ember); margin-left: 2px; }

/* hero side card: live flow panel */
.x-hero-side { display: none; }
@media (min-width: 1024px) { .x-hero-side { display: block; justify-self: end; width: 100%; max-width: 380px; perspective: 1200px; } }
.x-flowcard {
    position: relative;
    border-radius: var(--e-r-lg);
    border: 1px solid var(--e-line-strong);
    background: linear-gradient(160deg, rgba(23, 19, 15, 0.9), rgba(13, 11, 9, 0.9));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: 22px 22px 18px;
    transform-style: preserve-3d;
    transition: transform var(--e-t-slow) var(--e-ease-out);
    will-change: transform;
}
.x-flowcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.x-flowcard-head strong { font-family: var(--e-display); font-size: 0.95rem; letter-spacing: 0.02em; }
.x-live { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--e-smoke); }
.x-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); animation: x-ping 1.8s var(--e-ease-out) infinite; }
@keyframes x-ping { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(61, 220, 132, 0); } }
.x-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
.x-flow li {
    position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 14px; border: 1px solid var(--e-line);
    background: rgba(0, 0, 0, 0.35);
    transition: border-color var(--e-t-std), background var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
    transform: translateZ(0);
}
.x-flow li.is-on { border-color: var(--e-ember-45); background: var(--e-ember-12); transform: translateZ(24px); }
.x-flow img { width: 34px; height: 34px; border-radius: 9px; }
.x-flow b { display: block; font-weight: 600; font-size: 0.88rem; }
.x-flow small { display: block; color: var(--e-dust); font-size: 0.72rem; line-height: 1.3; }
.x-flow .x-flow-state { font-family: var(--e-display); font-size: 0.72rem; color: var(--e-dust); letter-spacing: 0.04em; transition: color var(--e-t-quick); }
.x-flow li.is-on .x-flow-state { color: var(--e-ember-hot); }
.x-flow li + li::before { content: ''; position: absolute; left: 31px; top: -9px; width: 2px; height: 9px; background: var(--e-line-strong); }
.x-flowcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--e-line); font-size: 0.74rem; color: var(--e-dust); }
.x-flowcard-foot b { color: var(--e-bone); font-family: var(--e-display); font-size: 0.95rem; }

.x-hero-scroll { display: none !important; }
.x-hero-scroll-legacy {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--e-dust); font-size: 0.7rem; letter-spacing: 0.12em; text-decoration: none;
}
.x-hero-scroll i { width: 1px; height: 36px; background: linear-gradient(var(--e-ember), transparent); animation: x-drip 1.8s var(--e-ease-std) infinite; }
@keyframes x-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-height: 700px) { .x-hero-scroll { display: none; } }

/* ---------- 8. Logo marquee --------------------------------------------- */
.x-logos { padding: 32px 0; border-top: 1px solid var(--e-line); border-bottom: 1px solid var(--e-line); overflow: hidden; background: var(--e-black); }
.x-logos-inner { display: grid; gap: 18px; }
.x-logos-label { text-align: center; font-size: var(--e-fs-sm); color: var(--e-dust); }
.x-logos-label b { color: var(--e-smoke); font-weight: 500; }
.x-marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.x-marquee-track { display: flex; gap: 56px; width: max-content; animation: x-marquee 70s linear infinite; }
.x-marquee[data-dir="rtl"] .x-marquee-track { animation-direction: reverse; }
.x-marquee:hover .x-marquee-track { animation-play-state: paused; }
@keyframes x-marquee { to { transform: translateX(-50%); } }
.x-marquee img {
    height: 34px; width: auto; max-width: 150px; object-fit: contain;
    filter: grayscale(1) brightness(1.8) contrast(0.9); opacity: 0.55;
    transition: filter var(--e-t-std), opacity var(--e-t-std), transform var(--e-t-std) var(--e-ease-out);
}
.x-marquee img:hover { filter: none; opacity: 1; transform: scale(1.08); }
@media (max-width: 640px) { .x-marquee-track { gap: 36px; } .x-marquee img { height: 26px; max-width: 110px; } }

/* ---------- 9. Services bento ------------------------------------------- */
.x-services-grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.x-svc {
    position: relative; grid-column: span 12;
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px; border-radius: var(--e-r-md);
    background: var(--e-coal); border: 1px solid var(--e-line);
    text-decoration: none; color: inherit;
    overflow: hidden; isolation: isolate;
    transition: transform var(--e-t-std) var(--e-ease-out), border-color var(--e-t-std), background var(--e-t-std);
    --mx: 50%; --my: 50%;
}
.x-svc::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), var(--e-ember-12), transparent 60%);
    transition: opacity var(--e-t-std);
}
.x-svc:hover { transform: translateY(-3px); border-color: var(--e-ember-45); background: var(--e-char); }
.x-svc:hover::before { opacity: 1; }
.x-svc-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--e-line); }
.x-svc-icon img { width: 28px; height: 28px; }
.x-svc h3 { font-size: 1.15rem; }
.x-svc p { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.55; }
.x-svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.x-svc-tags span { font-size: 0.7rem; padding: 5px 9px; border-radius: 6px; background: rgba(244, 239, 231, 0.05); color: var(--e-smoke); border: 1px solid var(--e-line); }
.x-svc-go { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--e-line); display: grid; place-items: center; color: var(--e-smoke); transition: background var(--e-t-std), color var(--e-t-std), transform var(--e-t-std) var(--e-ease-out); }
.x-svc-go svg { width: 16px; height: 16px; }
.x-svc:hover .x-svc-go { background: var(--e-ember); color: #100800; border-color: transparent; transform: rotate(-45deg); }
.x-svc-featured { min-height: 300px; padding: 28px; border-radius: var(--e-r-lg); }
.x-svc-featured h3 { font-size: var(--e-fs-xl); }
.x-svc-featured .x-svc-icon { width: 60px; height: 60px; border-radius: 16px; }
.x-svc-featured .x-svc-icon img { width: 36px; height: 36px; }
@media (min-width: 640px) { .x-svc { grid-column: span 6; } .x-svc-featured { grid-column: span 6; } }
@media (min-width: 640px) and (max-width: 1023px) { .x-svc-featured { min-height: 0; padding: 24px; } .x-svc-featured h3 { font-size: 1.15rem; } }
@media (min-width: 1024px) { .x-svc { grid-column: span 4; } .x-svc-featured { grid-column: span 4; } }
.x-services-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; color: var(--e-smoke); font-size: var(--e-fs-sm); }

/* ---------- 10. Process console (#section-process, home.js initProcess) ----
   Five steps that fit one screen: a track of nodes joined by an ember line, and a stage where every
   panel shares one grid cell (the tallest sets the height, so switching never moves the page).
   Auto-advances while in view (the ring around the active node is the countdown); pauses on hover,
   focus or off screen; stops for good once the visitor picks a step. Nothing here is scroll-linked. */
.x-process { background: linear-gradient(180deg, var(--e-black), var(--e-coal) 30%, var(--e-coal) 70%, var(--e-black)); padding-block: clamp(44px, 7vh, 96px); }
:is(#home, .x-hp) .x-process .x-head { margin-bottom: clamp(20px, 3.2vh, 40px); }
.x-pc { --pc-dur: 5.4s; --pc-i: 0; display: grid; gap: clamp(12px, 2.2vh, 24px); }

/* track: five nodes on one ember line */
.x-pc-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.x-pc-rail { position: absolute; left: 10%; right: 10%; top: 21px; height: 2px; border-radius: 2px; background: var(--e-line-strong); pointer-events: none; }
.x-pc-rail i {
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 70%, var(--e-ember-hot));
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.55);
    transform-origin: 0 50%; transform: scaleX(calc(var(--pc-i) / 4));
    transition: transform 0.6s var(--e-ease-out);
}
.x-pc-tab {
    position: relative; display: grid; justify-items: center; align-content: start; gap: 8px;
    padding: 0 4px 4px; margin: 0; background: none; border: 0; border-radius: 12px;
    color: var(--e-smoke); font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.x-pc-node {
    position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--e-black); border: 1px solid var(--e-line-strong);
    font: 700 0.86rem/1 var(--e-display); color: var(--e-smoke); font-variant-numeric: tabular-nums;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.x-pc-n { transition: opacity 0.25s; }
.x-pc-check { position: absolute; width: 20px; height: 20px; fill: none; stroke: #140800; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.3s var(--e-ease-out); }
.x-pc-ring { position: absolute; left: -5px; top: -5px; width: 54px; height: 54px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.x-pc-ring circle { fill: none; stroke: var(--e-ember-hot); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.x-pc-tab.is-done .x-pc-node { background: var(--e-ember); border-color: var(--e-ember); }
.x-pc-tab.is-done .x-pc-n { opacity: 0; }
.x-pc-tab.is-done .x-pc-check { opacity: 1; transform: none; }
.x-pc-tab[aria-selected="true"] .x-pc-node { border-color: var(--e-ember); color: var(--e-bone); background: #1c0e03; box-shadow: 0 0 0 5px var(--e-ember-12), 0 0 26px -2px rgba(255, 107, 0, 0.6); }
.x-pc-tab:hover .x-pc-node { border-color: var(--e-ember-45); color: var(--e-bone); }
.x-pc-label { font: 600 var(--e-fs-sm)/1.2 var(--e-body); color: var(--e-smoke); transition: color 0.25s; }
.x-pc-tab[aria-selected="true"] .x-pc-label, .x-pc-tab:hover .x-pc-label { color: var(--e-bone); }
.x-pc-sub { margin-top: -4px; font-size: 0.72rem; line-height: 1.2; color: var(--e-dust); }
.x-pc-tab:focus-visible { outline: none; }
.x-pc-tab:focus-visible .x-pc-node { outline: 2px solid var(--e-ember-hot); outline-offset: 5px; }

/* stage: every panel in the same cell, so the height never changes */
.x-pc-stage {
    position: relative; display: grid; isolation: isolate; overflow: hidden;
    padding: clamp(14px, 2vw, 26px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: linear-gradient(160deg, var(--e-char), var(--e-coal) 55%, #0a0806);
    touch-action: pan-y; --mx: 50%; --my: 50%;
}
.x-pc-panel {
    grid-area: 1 / 1; display: grid; gap: clamp(16px, 2.4vw, 34px); min-width: 0;
    visibility: hidden; opacity: 0; transition: opacity 0.2s var(--e-ease-std), visibility 0s linear 0.2s;
}
.x-pc-panel.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s var(--e-ease-std); }
@media (min-width: 900px) { .x-pc-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* the "screen": a small console window with a live line drawing per step */
.x-pc-screen {
    position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    border-radius: 16px; border: 1px solid var(--e-line);
    background: radial-gradient(120% 90% at 30% 0%, rgba(255, 107, 0, 0.1), transparent 60%), #070504;
}
.x-pc-screen::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(244, 239, 231, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 231, 0.045) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent);
}
.x-pc-bar {
    position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 12px; flex: none;
    border-bottom: 1px solid var(--e-line); color: var(--e-dust);
    font: 500 0.7rem/1 ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
}
.x-pc-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 239, 231, 0.14); }
.x-pc-bar span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-pc-bar b { margin-left: auto; font-weight: 500; color: var(--e-ember-hot); display: inline-flex; align-items: center; gap: 6px; }
.x-pc-bar b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--e-ember); box-shadow: 0 0 8px var(--e-ember); }
.x-pv { position: relative; display: block; flex: 1 1 0; min-height: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; overflow: visible; }
@media (max-width: 899px) { .x-pc-screen { height: clamp(170px, 46vw, 250px); } }

/* line-drawing vocabulary */
.x-pv .d { fill: none; stroke: rgba(244, 239, 231, 0.16); stroke-width: 1.5; stroke-linecap: round; }
.x-pv .dash { stroke-dasharray: 2 6; }
.x-pv .dash2 { stroke-dasharray: 5 7; stroke: rgba(244, 239, 231, 0.22); }
.x-pv .l { fill: none; stroke: rgba(244, 239, 231, 0.5); stroke-width: 1.5; stroke-linecap: round; }
.x-pv .t { fill: none; stroke: rgba(244, 239, 231, 0.26); stroke-width: 3; stroke-linecap: round; }
.x-pv .e { fill: none; stroke: var(--e-ember-hot); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.x-pv .box { fill: rgba(244, 239, 231, 0.035); stroke: rgba(244, 239, 231, 0.2); stroke-width: 1.2; }
.x-pv .bar { fill: rgba(244, 239, 231, 0.26); }
.x-pv .bar2 { fill: rgba(244, 239, 231, 0.12); }
.x-pv .hot { fill: var(--e-ember); }
.x-pv text { font: 700 9.5px var(--e-display); fill: rgba(244, 239, 231, 0.45); letter-spacing: 0.12em; }
.x-pv text.big { font-size: 22px; fill: var(--e-bone); letter-spacing: 0; }
.x-pv .pv-ping { fill: none; stroke: var(--e-ember-hot); stroke-width: 1.5; opacity: 0.5; transform-box: fill-box; transform-origin: center; }
.x-pv .lens { fill: rgba(255, 107, 0, 0.1); stroke: var(--e-ember-hot); stroke-width: 2.2; }
.x-pv .pv-route { stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.x-pv .pv-ms { fill: var(--e-coal); stroke: var(--e-ember-hot); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.x-pv .pv-ms-end { fill: var(--e-ember); }
.x-pv .pv-flag { fill: var(--e-ember); transform-box: fill-box; transform-origin: 0 50%; }
.x-pv .pv-code rect { fill: rgba(244, 239, 231, 0.24); transform-box: fill-box; transform-origin: 0 50%; }
.x-pv .pv-code .c1 { fill: rgba(255, 140, 58, 0.85); }
.x-pv .pv-code .c2 { fill: rgba(255, 180, 125, 0.5); }
.x-pv .pv-caret { fill: var(--e-ember-hot); }
.x-pv .pv-blk { fill: rgba(255, 107, 0, 0.1); stroke: rgba(255, 140, 58, 0.55); stroke-width: 1.2; }
.x-pv .pv-blk.on { fill: rgba(255, 107, 0, 0.75); stroke: var(--e-ember-hot); }
.x-pv .pv-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.x-pv .pv-scan { fill: var(--e-ember-hot); opacity: 0; }
.x-pv .gauge-bg { fill: none; stroke: rgba(244, 239, 231, 0.08); stroke-width: 8; }
.x-pv .pv-gauge { fill: none; stroke: var(--e-ember); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.x-pv .pv-star { fill: rgba(244, 239, 231, 0.6); }
.x-pv .pv-ring { fill: none; stroke: var(--e-ember-hot); stroke-width: 1.4; opacity: 0.35; transform-box: fill-box; transform-origin: center; }
.x-pv .rk { fill: #1b130c; stroke: rgba(244, 239, 231, 0.6); stroke-width: 1.6; stroke-linejoin: round; }
.x-pv .rk-fin { fill: var(--e-ember); }
.x-pv .rk-noz { fill: rgba(244, 239, 231, 0.4); }
.x-pv .rk-win { fill: rgba(255, 107, 0, 0.25); stroke: var(--e-ember-hot); stroke-width: 2; }
.x-pv .pv-flame { transform-box: fill-box; transform-origin: 50% 0; }

/* copy */
.x-pc-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding-block: 2px; }
.x-pc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 0.76rem; color: var(--e-dust); }
.x-pc-meta b { font: 700 0.74rem/1 var(--e-display); color: var(--e-ember); letter-spacing: 0.1em; }
:is(#home, .x-hp) .x-pc-copy h3 { font-size: var(--e-fs-xl); }
.x-pc-lede { color: var(--e-smoke); font-size: var(--e-fs-sm); line-height: 1.6; max-width: 56ch; }
.x-pc-k { margin-top: 2px; font: 600 0.68rem/1 var(--e-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-dust); }
.x-pc-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
:is(#home, .x-hp) .x-pc-gets li { position: relative; margin: 0; padding-left: 26px; font-size: var(--e-fs-sm); line-height: 1.45; color: var(--e-bone); }
.x-pc-gets li::before {
    content: ''; position: absolute; left: 0; top: 0.12em; width: 16px; height: 16px; border-radius: 5px; box-sizing: border-box;
    border: 1px solid var(--e-ember-25);
    background: var(--e-ember-12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8c3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.x-pc-you { font-size: 0.8rem; color: var(--e-dust); }
.x-pc-you b { color: var(--e-smoke); font-weight: 600; margin-right: 8px; }
.x-pc-more {
    margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; border: 1px solid var(--e-ember-25); background: var(--e-ember-12);
    color: var(--e-bone); font: 600 var(--e-fs-sm)/1 var(--e-body); text-decoration: none;
    transition: background-color var(--e-t-quick), border-color var(--e-t-quick);
}
.x-pc-more:hover { background-color: rgba(255, 107, 0, 0.22); border-color: var(--e-ember-45); }
.x-pc-more svg { width: 16px; height: 16px; transition: transform var(--e-t-std) var(--e-ease-out); }
.x-pc-more:hover svg { transform: translateX(3px); }

/* phones: tighter track, the sub-labels step aside, the panel stacks */
@media (max-width: 759px) {
    .x-pc-tab { padding-inline: 0; gap: 6px; }
    .x-pc-label { font-size: 0.74rem; }
    .x-pc-sub { display: none; }
    .x-pc-you { display: none; }
    .x-pc-copy { gap: 8px; }
}
/* short laptop screens (1280 x 720): the whole console still fits under the header bars */
@media (min-width: 900px) and (max-height: 800px) {
    .x-pc-stage { padding: 16px; }
    .x-pc-you { display: none; }
    .x-pc-copy { gap: 8px; }
}
@media (max-width: 380px) { .x-pc-node { width: 40px; height: 40px; } .x-pc-ring { width: 50px; height: 50px; } .x-pc-rail { top: 19px; } }

/* motion (never scroll-linked): panel swap, countdown ring, line drawings */
@media (prefers-reduced-motion: no-preference) {
    .x-pc.is-auto .x-pc-tab[aria-selected="true"] .x-pc-ring circle { opacity: 1; animation: x-pc-count var(--pc-dur) linear forwards; }
    .x-pc.is-paused .x-pc-ring circle { animation-play-state: paused !important; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-screen { animation: x-pc-wipe 0.6s var(--m-ease-io, cubic-bezier(0.76, 0, 0.24, 1)) both; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > * { animation: x-pc-in 0.5s var(--e-ease-out) both; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > :nth-child(2) { animation-delay: 0.04s; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > :nth-child(3) { animation-delay: 0.08s; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > :nth-child(4) { animation-delay: 0.12s; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > :nth-child(5) { animation-delay: 0.15s; }
    .x-pc.is-swap .x-pc-panel.is-active .x-pc-copy > :nth-child(n+6) { animation-delay: 0.18s; }
    .x-pc-bar b::before { animation: x-pc-blink 1.6s ease-in-out infinite; }

    .x-pc.is-live .x-pc-panel.is-active .pv-lens { animation: pv-scan 6s var(--e-ease-std) infinite; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ping { animation: pv-ping 6s ease-out infinite; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ping:nth-of-type(1) { animation-delay: 0.4s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ping:nth-of-type(2) { animation-delay: 2.4s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ping:nth-of-type(3) { animation-delay: 4.4s; }

    .x-pc.is-live .x-pc-panel.is-active .pv-route { animation: pv-draw 6s var(--e-ease-std) infinite; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ms { animation: pv-pop 6s var(--e-ease-out) infinite backwards; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ms:nth-of-type(2) { animation-delay: 0.45s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ms:nth-of-type(3) { animation-delay: 0.9s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ms:nth-of-type(4) { animation-delay: 1.4s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ms:nth-of-type(5) { animation-delay: 1.9s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-flag { animation: pv-wave 1.4s ease-in-out infinite alternate; }

    .x-pc.is-live .x-pc-panel.is-active .pv-code rect { animation: pv-type 6s var(--e-ease-out) infinite backwards; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(2) { animation-delay: 0.15s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(3) { animation-delay: 0.3s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(4) { animation-delay: 0.45s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(5) { animation-delay: 0.6s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(6) { animation-delay: 0.75s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(7) { animation-delay: 0.9s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(8) { animation-delay: 1.05s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-code rect:nth-child(9) { animation-delay: 1.2s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-caret { animation: x-pc-blink 1s steps(1) infinite; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk { animation: pv-drop 6s var(--e-ease-out) infinite backwards; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(1) { animation-delay: 0.7s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(2) { animation-delay: 0.85s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(3) { animation-delay: 1s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(4) { animation-delay: 1.2s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(5) { animation-delay: 1.35s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(6) { animation-delay: 1.5s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(7) { animation-delay: 1.7s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(8) { animation-delay: 1.85s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-blk:nth-of-type(9) { animation-delay: 2s; }

    .x-pc.is-live .x-pc-panel.is-active .pv-tick { animation: pv-tick 6s var(--e-ease-out) infinite backwards; }
    .x-pc.is-live .x-pc-panel.is-active .pv-tick:nth-of-type(2) { animation-delay: 0.55s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-tick:nth-of-type(3) { animation-delay: 1.1s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-tick:nth-of-type(4) { animation-delay: 1.65s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-scan { animation: pv-sweep 6s linear infinite; }
    .x-pc.is-live .x-pc-panel.is-active .pv-gauge { animation: pv-gauge 6s var(--e-ease-std) infinite; }

    .x-pc.is-live .x-pc-panel.is-active .pv-rocket { animation: pv-bob 2.4s ease-in-out infinite alternate; }
    .x-pc.is-live .x-pc-panel.is-active .pv-flame { animation: pv-flame 0.16s ease-in-out infinite alternate; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ring { animation: pv-ring 3s ease-out infinite backwards; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ring:nth-of-type(2) { animation-delay: 1s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-ring:nth-of-type(3) { animation-delay: 2s; }
    .x-pc.is-live .x-pc-panel.is-active .pv-star { animation: pv-twinkle 2.2s ease-in-out infinite alternate; }
    .x-pc.is-live .x-pc-panel.is-active .pv-star:nth-of-type(2n) { animation-delay: 1.1s; }
}
@keyframes x-pc-count { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes x-pc-wipe { from { clip-path: inset(0 100% 0 0 round 16px); } to { clip-path: inset(0 0 0 0 round 16px); } }
@keyframes x-pc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes x-pc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes pv-scan { 0%, 20% { transform: translate(110px, 50px); } 33%, 53% { transform: translate(160px, 100px); } 66%, 86% { transform: translate(214px, 150px); } 100% { transform: translate(110px, 50px); } }
@keyframes pv-ping { 0% { opacity: 0.95; transform: scale(0.6); } 16% { opacity: 0; transform: scale(2.8); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes pv-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 42% { stroke-dashoffset: 0; } 86% { opacity: 1; } 95% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 1; } }
@keyframes pv-pop { 0% { transform: scale(0); opacity: 0; } 5% { transform: scale(1.35); opacity: 1; } 9%, 80% { transform: scale(1); opacity: 1; } 88%, 100% { transform: scale(0); opacity: 0; } }
@keyframes pv-wave { from { transform: scaleX(0.82); } to { transform: scaleX(1); } }
@keyframes pv-type { 0% { transform: scaleX(0); } 7%, 84% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes pv-drop { 0% { transform: translateY(-14px); opacity: 0; } 7%, 80% { transform: none; opacity: 1; } 88%, 100% { transform: none; opacity: 0; } }
@keyframes pv-tick { 0% { stroke-dashoffset: 1; } 6%, 82% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1; } }
@keyframes pv-sweep { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: 0.9; } 40% { transform: translateY(142px); opacity: 0.9; } 44%, 100% { transform: translateY(142px); opacity: 0; } }
@keyframes pv-gauge { 0% { stroke-dashoffset: 1; } 40%, 84% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 1; } }
@keyframes pv-bob { from { transform: translateY(2px); } to { transform: translateY(-6px); } }
@keyframes pv-flame { from { transform: scaleY(0.72); } to { transform: scaleY(1.08); } }
@keyframes pv-ring { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pv-twinkle { from { opacity: 0.15; } to { opacity: 0.8; } }
.x-pc:not(.is-live) .x-pv *, .x-pc:not(.is-live) .x-pc-bar b::before { animation-play-state: paused !important; }

/* ---------- 11. Testimonials -------------------------------------------- */
/* one featured quote (tall, left) beside six in a 2 x 3 grid; a swipe row on phones */
.x-quotes { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
    .x-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .x-quote-hero { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
    .x-quotes { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); }
    .x-quote-hero { grid-column: 1; grid-row: 1 / span 3; }
}
.x-quote {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; margin: 0;
    padding: 24px; border-radius: var(--e-r-md);
    background: var(--e-coal); border: 1px solid var(--e-line);
    transition: border-color var(--e-t-std);
    --mx: 50%; --my: 50%;
}
.x-quote:hover { border-color: var(--e-line-strong); }
.x-quote p { font-size: var(--e-fs-md); line-height: 1.55; color: var(--e-bone); }
:is(#home, .x-hp) .x-quote footer { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding: 18px 0 0; min-height: 0; height: auto; background: none; border: 0; }
.x-quote-hero {
    padding: clamp(26px, 3vw, 40px); border-radius: var(--e-r-lg);
    background: radial-gradient(90% 70% at 0% 0%, rgba(255, 107, 0, 0.14), transparent 60%), linear-gradient(160deg, var(--e-char), var(--e-coal));
    border-color: var(--e-ember-25);
}
.x-quote-hero p { font-family: var(--e-display); font-weight: 600; font-size: var(--e-fs-2xl); line-height: 1.2; letter-spacing: -0.01em; margin-top: clamp(18px, 3vw, 34px); }
.x-quote-score { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.x-quote-score b { font: 700 2.2rem/1 var(--e-display); color: var(--e-bone); }
.x-quote-score .x-stars { margin: 0; font-size: 0.95rem; }
.x-quote-score small { flex-basis: 100%; color: var(--e-dust); font-size: 0.78rem; }
:is(#home, .x-hp) .x-quote-hero footer { margin-top: 0; }
:is(#home, .x-hp) .x-quote-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding-top: 22px; }
.x-quote-stats div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35); }
.x-quote-stats dt { font-size: 0.74rem; color: var(--e-dust); margin-top: 6px; }
.x-quote-stats dd { margin: 0; font: 700 var(--e-fs-xl)/1 var(--e-display); color: var(--e-bone); font-variant-numeric: tabular-nums; }
.x-quote-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.x-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--e-ember-12); color: var(--e-ember-hot); font: 700 0.8rem var(--e-display); border: 1px solid var(--e-ember-25); flex: none; }
.x-quote cite { font-style: normal; display: grid; line-height: 1.3; }
.x-quote cite b { font-weight: 600; font-size: var(--e-fs-sm); }
.x-quote cite span { color: var(--e-dust); font-size: 0.76rem; }
.x-stars { margin-left: auto; color: var(--e-ember); letter-spacing: 1px; font-size: 0.8rem; flex: none; }
.x-rating { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: var(--e-r-pill); border: 1px solid var(--e-line); background: var(--e-coal); font-size: var(--e-fs-sm); color: var(--e-smoke); }
.x-rating b { font-family: var(--e-display); font-size: 1.3rem; color: var(--e-bone); }
/* phones: one swipe row instead of seven stacked cards */
@media (max-width: 699px) {
    .x-quotes {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * var(--e-gutter)); padding: 2px var(--e-gutter) 6px; scroll-padding-inline: var(--e-gutter);
    }
    .x-quotes::-webkit-scrollbar { display: none; }
    .x-quotes > .x-quote { scroll-snap-align: start; }
    .x-quote-hero p { font-size: var(--e-fs-xl); margin-top: 16px; }
}

/* ---------- 12. Advantage (sticky split) -------------------------------- */
.x-adv { display: grid; gap: 48px; }
@media (min-width: 960px) { .x-adv { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } .x-adv-left { position: sticky; top: 110px; align-self: start; } }
.x-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.x-badges img { height: 48px; width: auto; border-radius: 10px; background: #fff; padding: 6px; object-fit: contain; box-sizing: content-box; }
@media (max-width: 480px) { .x-badges { gap: 8px; } .x-badges img { height: 34px; padding: 5px; } }
.x-pillars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--e-line); }
.x-pillar { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; padding: 28px 0; border-bottom: 1px solid var(--e-line); align-items: start; }
.x-pillar h3 { font-size: var(--e-fs-xl); margin-bottom: 8px; }
.x-pillar p { color: var(--e-smoke); font-size: var(--e-fs-sm); max-width: 48ch; grid-column: 1; }
.x-pillar .x-pillar-stat { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--e-display); font-weight: 700; font-size: var(--e-fs-2xl); line-height: 1; color: var(--e-ember); font-variant-numeric: tabular-nums; }
.x-pillar .x-pillar-stat small { display: block; font: 500 var(--e-fs-xs) var(--e-body); color: var(--e-dust); margin-top: 8px; letter-spacing: 0; }
@media (max-width: 480px) { .x-pillar { grid-template-columns: 1fr; } .x-pillar .x-pillar-stat { grid-column: 1; grid-row: auto; text-align: left; } }

/* ---------- 13. Industries (tabs; panels share one cell, so the height never changes) */
.x-ind { display: grid; gap: 14px; }
@media (min-width: 900px) { .x-ind { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; } }
.x-ind-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.x-ind-tab {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-radius: 12px; border: 1px solid transparent;
    background: transparent; color: var(--e-smoke); text-align: left; cursor: pointer;
    font: 600 var(--e-fs-md) var(--e-body);
    transition: background var(--e-t-quick), color var(--e-t-quick), border-color var(--e-t-quick);
}
.x-ind-tab:hover { color: var(--e-bone); background: rgba(244, 239, 231, 0.04); }
.x-ind-tab[aria-selected="true"] { color: var(--e-bone); background: var(--e-coal); border-color: var(--e-line); box-shadow: inset 3px 0 0 var(--e-ember); }
.x-ind-tab .x-ind-metric { font-family: var(--e-display); color: var(--e-ember); font-size: 0.95rem; }
/* phones and tablets: the eight tabs become one swipe row of chips */
@media (max-width: 899px) {
    .x-ind-list {
        display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin-inline: calc(-1 * var(--e-gutter)); padding: 2px var(--e-gutter) 4px;
    }
    .x-ind-list::-webkit-scrollbar { display: none; }
    .x-ind-tab { width: auto; flex: none; padding: 10px 14px; border-color: var(--e-line); border-radius: 999px; font-size: var(--e-fs-sm); white-space: nowrap; }
    .x-ind-tab[aria-selected="true"] { background: var(--e-ember-12); border-color: var(--e-ember-45); box-shadow: none; }
    .x-ind-tab .x-ind-metric { font-size: 0.8rem; }
}
.x-ind-panels { position: relative; display: grid; border-radius: var(--e-r-lg); isolation: isolate; --mx: 50%; --my: 50%; }
.x-ind-panel {
    grid-area: 1 / 1; min-width: 0;
    border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: linear-gradient(160deg, var(--e-char), var(--e-coal));
    padding: clamp(22px, 3vw, 40px); position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    visibility: hidden; opacity: 0; transition: opacity 0.2s var(--e-ease-std), visibility 0s linear 0.2s;
}
.x-ind-panel.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s var(--e-ease-std); }
@media (prefers-reduced-motion: no-preference) {
    #section-industries.is-swap .x-ind-panel.is-active > * { animation: x-pc-in 0.45s var(--e-ease-out) both; }
    #section-industries.is-swap .x-ind-panel.is-active > :nth-child(2) { animation-delay: 0.04s; }
    #section-industries.is-swap .x-ind-panel.is-active > :nth-child(3) { animation-delay: 0.08s; }
    #section-industries.is-swap .x-ind-panel.is-active > :nth-child(n+4) { animation-delay: 0.12s; }
}
.x-ind-panel::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, var(--e-ember-25), transparent 70%); filter: blur(20px); pointer-events: none; }
.x-ind-panel h3 { font-size: var(--e-fs-xl); margin-bottom: 6px; }
:is(#home, .x-hp) .x-ind-tag { color: var(--e-smoke); margin: 4px 0 22px; }
.x-ind-cols { display: grid; gap: 20px; margin-bottom: 24px; }
@media (min-width: 640px) { .x-ind-cols { grid-template-columns: 1fr 1fr; } }
.x-ind-cols h4 { font: 600 var(--e-fs-xs) var(--e-body); color: var(--e-dust); margin: 0 0 10px; }
.x-ind-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.x-ind-cols li { position: relative; padding-left: 18px; font-size: var(--e-fs-sm); color: var(--e-bone); line-height: 1.5; }
.x-ind-cols li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 2px; background: var(--e-dust); }
.x-ind-cols .x-help li::before { background: var(--e-ember); }
:is(#home, .x-hp) .x-ind-big { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--e-line); display: flex; align-items: baseline; gap: 12px; }
.x-ind-big b { font-family: var(--e-display); font-size: var(--e-fs-2xl); color: var(--e-ember); line-height: 1; font-weight: 700; }
.x-ind-big span { color: var(--e-smoke); font-size: var(--e-fs-sm); }
.x-ind-foot { margin-top: 26px; color: var(--e-smoke); font-size: var(--e-fs-sm); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }

/* ---------- 14. Apps ecosystem: three key apps + two drifting rows ------- */
.x-apps-key { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .x-apps-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.x-app-key {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 14px; padding: 18px 50px 18px 18px;
    border-radius: var(--e-r-md); border: 1px solid var(--e-ember-25);
    background: linear-gradient(160deg, var(--e-char), var(--e-coal));
    text-decoration: none; color: var(--e-bone);
    transition: transform var(--e-t-std) var(--e-ease-out), border-color var(--e-t-std);
    --mx: 50%; --my: 50%;
}
.x-app-key:hover { transform: translateY(-3px); border-color: var(--e-ember-45); }
.x-app-key img { width: 44px; height: 44px; flex: none; }
.x-app-key b { display: block; font-family: var(--e-display); font-size: 1.05rem; }
.x-app-key small { display: block; color: var(--e-dust); font-size: 0.76rem; font-weight: 400; }
.x-app-go { position: absolute; right: 18px; top: calc(50% - 9px); width: 18px; height: 18px; color: var(--e-smoke); transition: color var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out); }
.x-app-key:hover .x-app-go { color: var(--e-ember-hot); transform: translate(2px, -2px); }
.x-apps-rows { display: grid; gap: 10px; margin-top: clamp(18px, 3vw, 30px); }
.x-apps-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.x-apps-track { display: flex; gap: 10px; width: max-content; animation: x-marquee 60s linear infinite; }
.x-apps-row-rev .x-apps-track { animation-direction: reverse; animation-duration: 68s; }
.x-apps-rows:hover .x-apps-track { animation-play-state: paused; }
.x-chip {
    display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; flex: none;
    border-radius: 999px; border: 1px solid var(--e-line); background: rgba(13, 11, 9, 0.8);
    color: var(--e-bone); font: 500 var(--e-fs-sm)/1 var(--e-body); white-space: nowrap;
}
.x-chip img { width: 26px; height: 26px; flex: none; }

/* ---------- 15. Final CTA ----------------------------------------------- */
.x-cta {
    position: relative; overflow: hidden;
    padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 72px);
    border-radius: var(--e-r-lg); border: 1px solid var(--e-ember-25);
    background: radial-gradient(120% 140% at 100% 0%, var(--e-ember-25), transparent 50%), linear-gradient(160deg, var(--e-char), var(--e-black));
    display: grid; gap: 28px;
}
@media (min-width: 900px) { .x-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.x-cta h2 { font-size: var(--e-fs-2xl); }
.x-cta p { color: var(--e-smoke); margin-top: 14px; max-width: 46ch; }
.x-cta-actions { display: grid; gap: 12px; justify-items: start; }
@media (min-width: 900px) { .x-cta-actions { justify-items: end; } }
.x-cta-contact { display: grid; gap: 6px; font-size: var(--e-fs-sm); color: var(--e-smoke); }
.x-cta-contact a { color: var(--e-bone); text-decoration: none; }
.x-cta-contact a:hover { color: var(--e-ember-hot); }
@media (min-width: 900px) { .x-cta-contact { text-align: right; } }

/* ---------- 16. Footer -------------------------------------------------- */
.x-footer { background: var(--e-black); border-top: 1px solid var(--e-line); padding: clamp(48px, 7vw, 88px) 0 28px; font-size: var(--e-fs-sm); text-align: left; }
.x-footer-grid { display: grid; gap: 36px; }
/* 2 x 2 on tablets, four columns only once the brand column has room (legacy .footer centred text: reset above) */
@media (min-width: 640px) { .x-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; } }
@media (min-width: 1024px) { .x-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; } }
/* phones and tablets: room for the floating section pill under the last line */
@media (max-width: 1099px) { .x-footer { padding-bottom: 92px; } }
.x-footer-brand { display: grid; gap: 16px; align-content: start; }
.x-footer-brand .x-logo-row { display: flex; align-items: center; gap: 12px; }
.x-footer-brand .x-logo-row img { width: 44px; height: 44px; border-radius: 50%; }
.x-footer-brand .x-logo-row b { font-family: var(--e-display); font-size: 1.05rem; }
.x-footer-brand p { color: var(--e-smoke); max-width: 40ch; margin: 0; }
.x-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.x-footer-badges img { height: 44px; width: auto; border-radius: 8px; background: #fff; padding: 4px; }
.x-footer .x-footer-h { font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.02em; color: var(--e-dust); margin: 0 0 14px; font-family: var(--e-body); font-weight: 600; }
.x-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.x-footer a { color: var(--e-smoke); text-decoration: none; transition: color var(--e-t-quick); }
.x-footer a:hover { color: var(--e-bone); }
.x-footer address { font-style: normal; color: var(--e-smoke); display: grid; gap: 9px; }
.x-footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--e-line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; color: var(--e-dust); font-size: 0.78rem; }
.x-footer-bottom a { color: var(--e-smoke); }
.x-footer-bottom button { background: none; border: 0; padding: 0; color: var(--e-smoke); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.x-footer-bottom button:hover { color: var(--e-ember-hot); }

/* ---------- 17. Legacy modal chrome polish ------------------------------ */
.modal-close { transition: transform var(--e-t-std) var(--e-ease-out), background var(--e-t-quick), color var(--e-t-quick); }
.modal-close:hover { transform: rotate(90deg); }
.service-modal-overlay { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.service-modal { transition: transform var(--e-t-slow) var(--e-ease-out), opacity var(--e-t-std) var(--e-ease-std); transform: scale(0.94) translateY(24px); }
.btn { transition: transform var(--e-t-std) var(--e-ease-out), box-shadow var(--e-t-std), background var(--e-t-std), color var(--e-t-std), border-color var(--e-t-std); }
.btn:active { transform: scale(0.97); }
.zoho-form-modal-body { position: relative; }
.zoho-form-modal-body iframe:not([src]) { visibility: hidden; }
.zoho-form-modal-body::before { content: ''; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--e-ember-25); border-top-color: var(--e-ember); animation: x-spin 0.9s linear infinite; pointer-events: none; }
.zoho-form-modal-body:has(iframe[src])::before { display: none; }
@keyframes x-spin { to { transform: rotate(360deg); } }

/* ---------- 18. Motion preferences -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .x-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .x-marquee { mask-image: none; -webkit-mask-image: none; }
    .x-live i, .x-hero-scroll i { animation: none; }
    .x-hero-title .x-word::after { transform: scaleX(1); animation: none; }
    html.js .x-hero-title .x-line > span, html.js #section-hero [data-hero-seq] { animation: none; transform: none; opacity: 1; }
    html.js [data-reveal], html.js [data-reveal-group] > * { opacity: 1; transform: none; filter: none; }
}
@media (hover: none) {
    .x-svc:hover, .x-app:hover, .x-app-key:hover { transform: none; }
}

/* ---------- 20. Hero 3D figure (Spline, desktop only, lazy) ------------- */
.x-hero-3d {
    position: absolute; z-index: 0; pointer-events: none;
    right: max(2vw, calc((100% - var(--e-max)) / 2 - 6vw)); top: 50%;
    width: clamp(440px, 38vw, 640px); height: min(74vh, 760px);
    transform: translateY(calc(-52% + var(--fig-y, 0px))); scale: var(--fig-s, 1);
    opacity: 0; transition: opacity 900ms var(--e-ease-std);
    /* soft edges on every side so the figure never ends with a hard line */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 74%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-composite: intersect;
}
/* brand tint: the scene is black + chrome, so sepia/saturate turns every highlight ember */
.x-hero-3d-canvas { width: 100% !important; height: 100% !important; display: block; filter: sepia(1) saturate(3.4) hue-rotate(-14deg) brightness(1.02) contrast(1.05); }
.x-hero.is-3d .x-hero-3d { opacity: 1; pointer-events: auto; }
.x-hero.is-3d .x-hero-grid { position: relative; z-index: 1; pointer-events: none; }
.x-hero.is-3d .x-hero-copy { pointer-events: auto; }
.x-hero.is-3d .x-hero-side { opacity: 0 !important; visibility: hidden; transform: translateY(24px) !important; transition: opacity 600ms var(--e-ease-std), transform 600ms var(--e-ease-out), visibility 0s 600ms; pointer-events: none; }
.x-hero.is-3d .x-hero-stats { position: relative; z-index: 2; background: linear-gradient(90deg, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 70%, transparent); border-radius: 12px; }
@media (max-width: 1199px) { .x-hero-3d { display: none; } }
@media (min-width: 1700px) { .x-hero-3d { right: max(0px, calc((100% - var(--e-max)) / 2 - 2vw)); width: clamp(520px, 34vw, 720px); } }

/* ---------- 21. Scroll section transitions ------------------------------ */
:is(#home, .x-hp) .x-section { --orb-y: 0px; --orb-x: 0px; }
:is(#home, .x-hp) .x-section::after {
    content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, var(--e-ember), rgba(255, 107, 0, 0.35) 45%, transparent 80%);
    transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--e-ease-out);
}
:is(#home, .x-hp) .x-section.is-in::after { transform: scaleX(1); }
:is(#home, .x-hp) .x-section[data-orb]::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
    width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.16), rgba(255, 107, 0, 0.05) 45%, transparent 70%);
    filter: blur(40px);
    transform: translate3d(var(--orb-x), var(--orb-y), 0);
    will-change: transform;
}
:is(#home, .x-hp) .x-section[data-orb="right"]::before { right: -14vw; top: -10%; }
:is(#home, .x-hp) .x-section[data-orb="left"]::before { left: -16vw; bottom: -10%; }
:is(#home, .x-hp) .x-section > .x-container { position: relative; z-index: 1; }
:is(#home, .x-hp) .x-logos { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    :is(#home, .x-hp) .x-section::after { transform: scaleX(1); transition: none; }
    :is(#home, .x-hp) .x-section[data-orb]::before { transform: none; }
}

/* ---------- 22. Hero spacing (beats the generic #home h1 reset) ---------- */
:is(#home, .x-hp) .x-hero-title { margin: 0 0 clamp(18px, 2.4vw, 28px); }
:is(#home, .x-hp) .x-kicker { margin-bottom: clamp(18px, 2.4vw, 26px); }
:is(#home, .x-hp) .x-hero-lede { margin-bottom: clamp(26px, 3vw, 36px); }
:is(#home, .x-hp) .x-head h2 { margin-top: 0; }
:is(#home, .x-hp) .x-mark { margin-bottom: 12px; }

/* ---------- 23. Floating section navigator (app/js/sectionnav.js) ------- */
.x-snav { position: fixed; z-index: 9999; pointer-events: none; font-family: var(--e-body); }
.x-snav a { text-decoration: none; }
.x-snav-rail, .x-snav-pill { opacity: 0; transform: translateY(12px); transition: opacity var(--e-t-std) var(--e-ease-std), transform var(--e-t-std) var(--e-ease-out); }
.x-snav.is-visible .x-snav-rail, .x-snav.is-visible .x-snav-pill { opacity: 1; transform: none; pointer-events: auto; }

/* desktop rail */
.x-snav-rail { display: none; }
@media (min-width: 1100px) {
    .x-snav { right: clamp(10px, 1.4vw, 24px); top: 50%; }
    .x-snav-rail { display: block; position: relative; transform: translate(0, -50%); padding: 14px 10px 14px 14px; border-radius: 18px; }
    .x-snav.is-visible .x-snav-rail { transform: translate(0, -50%); }
    .x-snav-pill, .x-snav-sheet { display: none !important; }
    .x-snav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
    .x-snav-list a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 26px; color: var(--e-dust); font-size: 0.78rem; font-weight: 500; }
    .x-snav-label { white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); border: 1px solid transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--e-smoke); font-size: 0.74rem; transition: color var(--e-t-quick), border-color var(--e-t-quick), background var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out); }
    .x-snav-dot { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 239, 231, 0.3); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55); transition: transform var(--e-t-std) var(--e-ease-out), background var(--e-t-quick), box-shadow var(--e-t-std); flex: none; }
    .x-snav-list a:hover .x-snav-label, .x-snav-list a:focus-visible .x-snav-label { color: var(--e-bone); border-color: var(--e-line-strong); transform: translateX(-3px); }
    .x-snav-list a:hover .x-snav-dot { background: var(--e-bone); transform: scale(1.25); }
    .x-snav-list a.is-active .x-snav-label { color: var(--e-ember-hot); border-color: var(--e-ember-25); background: rgba(20, 10, 2, 0.8); font-weight: 600; }
    .x-snav-list a.is-active .x-snav-dot { background: var(--e-ember); transform: scale(1.5); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55), 0 0 14px var(--e-ember-45); }
    /* very wide content next to the rail: shrink the labels on mid-size desktops */
    @media (max-width: 1360px) { .x-snav-label { font-size: 0.68rem; padding: 2px 8px; } .x-snav-list a { height: 22px; } }
    /* progress trace behind the dots */
    .x-snav-trace { position: absolute; right: 13px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: rgba(244, 239, 231, 0.1); overflow: hidden; }
    .x-snav-trace i { position: absolute; inset: 0; background: linear-gradient(var(--e-ember), var(--e-ember-hot)); transform-origin: top; transform: scaleY(var(--snav-p, 0)); transition: transform 120ms linear; }
}

/* compact pill + sheet (tablets, phones) */
@media (max-width: 1099px) {
    .x-snav { left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
    .x-snav.is-visible.is-tucked .x-snav-pill { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
    .x-snav-pill {
        display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px;
        border-radius: 999px; border: 1px solid var(--e-line-strong); background: rgba(10, 8, 6, 0.86); color: var(--e-bone);
        backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
        box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.9); cursor: pointer; font: inherit; max-width: calc(100vw - 32px);
    }
    .x-snav-ring { width: 34px; height: 34px; flex: none; transform: rotate(-90deg); }
    .x-snav-ring circle { fill: none; stroke: rgba(244, 239, 231, 0.14); stroke-width: 3; }
    .x-snav-ring .x-snav-ring-fill { stroke: var(--e-ember); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--snav-p, 0))); transition: stroke-dashoffset 120ms linear; }
    .x-snav-pill-text { display: grid; text-align: left; line-height: 1.15; min-width: 0; }
    .x-snav-count { font-size: 0.66rem; color: var(--e-dust); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
    .x-snav-current { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64vw; }
    .x-snav-caret { width: 16px; height: 16px; color: var(--e-smoke); transition: transform var(--e-t-std) var(--e-ease-out); }
    .x-snav.is-open .x-snav-caret { transform: rotate(180deg); }
    .x-snav-sheet {
        position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); width: min(320px, calc(100vw - 32px));
        max-height: min(60vh, 440px); overflow: auto; padding: 14px; border-radius: 20px; pointer-events: auto;
        border: 1px solid var(--e-line-strong); background: rgba(12, 10, 8, 0.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9); animation: x-snav-in var(--e-t-std) var(--e-ease-out);
    }
    .x-snav-sheet-title { margin: 2px 6px 10px; font-size: 0.72rem; color: var(--e-dust); font-weight: 600; letter-spacing: 0.02em; }
    .x-snav-sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
    .x-snav-sheet-list a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 12px; color: var(--e-smoke); font-size: 0.95rem; font-weight: 500; }
    .x-snav-sheet-list a:hover, .x-snav-sheet-list a:focus-visible { background: rgba(244, 239, 231, 0.06); color: var(--e-bone); }
    .x-snav-sheet-list a.is-active { color: var(--e-bone); background: var(--e-ember-12); }
    .x-snav-n { font-family: var(--e-display); font-size: 0.8rem; color: var(--e-dust); font-variant-numeric: tabular-nums; }
    .x-snav-sheet-list a.is-active .x-snav-n { color: var(--e-ember); }
}
@keyframes x-snav-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
    .x-snav-rail, .x-snav-pill, .x-snav-label, .x-snav-dot, .x-snav-trace i, .x-snav-ring-fill { transition: none !important; }
    .x-snav-sheet { animation: none; }
}
:is(#home, .x-hp) .x-cta p { margin-top: 14px; }
:is(#home, .x-hp) .x-cta .x-cta-contact { margin-top: 4px; }

/* closing CTA: keep air between heading and paragraph on every page */
.x-cta h2 + p { margin-top: 14px !important; }

/* ---------- 23b. Section navigator: laptop widths use a horizontal bar -- */
@media (min-width: 1100px) and (max-width: 1599px) {
    .x-snav { top: 82px; right: auto; left: 50%; transform: translateX(-50%); }
    .x-snav-rail, .x-snav.is-visible .x-snav-rail { transform: none; }
    .x-snav-rail {
        padding: 4px; border-radius: 999px; border: 1px solid var(--e-line-strong);
        background: rgba(10, 8, 6, 0.82); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
        box-shadow: 0 14px 36px -16px rgba(0, 0, 0, 0.9); overflow: hidden;
    }
    .x-snav-rail { transform: translateY(-8px); }
    .x-snav.is-visible .x-snav-rail { transform: none; }
    .x-snav-list { display: flex; flex-wrap: nowrap; gap: 2px; }
    .x-snav-list a { height: 32px; gap: 0; }
    .x-snav-dot { display: none; }
    .x-snav-label { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 12px; line-height: 32px; font-size: 0.76rem; border-radius: 999px; }
    .x-snav-list a:hover .x-snav-label, .x-snav-list a:focus-visible .x-snav-label { transform: none; background: rgba(244, 239, 231, 0.07); }
    .x-snav-list a.is-active .x-snav-label { background: var(--e-ember); color: #140800; border: 0; }
    .x-snav-trace { top: auto; bottom: 0; left: 18px; right: 18px; width: auto; height: 2px; background: transparent; }
    .x-snav-trace i { transform-origin: left; transform: scaleX(var(--snav-p, 0)); opacity: 0.8; }
}
/* every page sits under the one global navbar: the strip starts at its bottom edge */

/* ---------- 24. Robot: no fallback-card flash, loading glow ---------------- */
html.x-3d-pending .x-hero-side { display: none !important; }
html.x-3d-pending .x-hero-3d { opacity: 1; }
html.x-3d-pending .x-hero-3d::before {
    content: ''; position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.22), rgba(255, 107, 0, 0.05) 45%, transparent 70%);
    filter: blur(8px); animation: x-bot-wait 1.8s var(--e-ease-std) infinite;
}
@keyframes x-bot-wait { 0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }

/* ---------- 23c. Laptop section bar = full-width sub-navigation strip ---- */
@media (min-width: 1100px) and (max-width: 1599px) {
    .x-snav { left: 0; right: 0; top: 72px; transform: none; }
    .x-snav-rail, .x-snav.is-visible .x-snav-rail {
        display: flex; justify-content: center; width: 100%;
        padding: 6px var(--e-gutter); border-radius: 0; border: 0; border-bottom: 1px solid var(--e-line);
        background: rgba(0, 0, 0, 0.82); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.9);
    }
    .x-snav-list { justify-content: center; }
    .x-snav-trace { left: 0; right: 0; bottom: 0; }
    .x-snav-trace i { opacity: 1; }
}

/* ---------- 8b. Client logos: one uniform white-silhouette wall (app/clients/mono) -------
   Every logo reads the same on the dark band, whatever its original colours or background. */
.x-logos .x-marquee-track { gap: clamp(34px, 5vw, 64px); align-items: center; }
.x-logos .x-marquee img {
    height: 40px; width: auto; max-width: 170px; object-fit: contain;
    opacity: 0.62; filter: none;
    transition: opacity var(--e-t-std), transform var(--e-t-std) var(--e-ease-out), filter var(--e-t-std);
}
.x-logos .x-marquee img:hover { opacity: 1; transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(255, 140, 58, 0.35)); }
@media (max-width: 640px) { .x-logos .x-marquee img { height: 30px; max-width: 120px; } }

/* ---------- 25. Large and ultra-wide screens ------------------------------
   Scale the rem-based type and widen the content column so 1920-2560+ screens
   get their own composition instead of a small 1280px column in a sea of black. */
@media (min-width: 1920px) {
    :root { --e-max: 1440px; }
    .navbar .nav-container { width: min(100% - 2 * var(--e-gutter), 1560px); }
}
@media (min-width: 2400px) {
    html { font-size: 18px; }
    :root { --e-max: 1680px; }
    .navbar .nav-container { width: min(100% - 2 * var(--e-gutter), 1800px); height: 84px; }
    .navbar .x-logo { width: 46px; height: 46px; }
}

/* ---------- 27. Header polish ---------------------------------------------
   Open mobile menu: the header bar is solid too (no hero icons behind the logo/close).
   "Contact" is already a nav link, so the extra ghost Contact button is never shown. */
.navbar:has(.nav-menu.active) { background: var(--e-black); border-bottom-color: var(--e-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.navbar .x-nav-actions .x-btn-ghost { display: none; }

/* ---------- 28. Hero: what we build (capability chips) --------------------- */
.x-kicker-ico { color: var(--e-ember); flex: none; }
.x-hero-caps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 760px; }
.x-hero-caps a {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px;
    border: 1px solid var(--e-line-strong); background: rgba(12, 10, 8, 0.55); color: var(--e-bone);
    font: 500 0.82rem/1 var(--e-body); text-decoration: none; white-space: nowrap;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: border-color var(--e-t-quick), background var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out);
}
.x-hero-caps a:hover, .x-hero-caps a:focus-visible { border-color: var(--e-ember-45); background: var(--e-ember-12); transform: translateY(-1px); }
.x-hero-caps li:last-child a { color: var(--e-smoke); }
html.js #section-hero .x-hero-caps { animation-delay: 0.12s; }
#section-hero .x-hero-caps + .x-hero-actions { margin-top: 22px; }
@media (max-width: 480px) { .x-hero-caps { gap: 6px; } .x-hero-caps a { min-height: 32px; padding: 0 11px; font-size: 0.78rem; } }

/* 15 service cards: on two-column tablets the last card spans the row */
@media (min-width: 640px) and (max-width: 1023px) { .x-services-grid > .x-svc:last-child { grid-column: span 12; } }

/* ---------- 29. Motion system (app/js/motion.js) ---------------------------
   Calm by design: every entrance plays once, in well under a second, over 16px or less (or as a
   pure fade, mask or clip), and content never moves again after it lands. Nothing the visitor
   reads is scrubbed to the scroll; only decorative layers (orbs, progress lines) follow it.
   Every hidden or moved state below is scoped to html.m-on, which motion.js sets only when motion
   is allowed: with prefers-reduced-motion, or if the script never runs, everything is static. */
:root { --m-ease: cubic-bezier(0.16, 1, 0.3, 1); --m-ease-io: cubic-bezier(0.76, 0, 0.24, 1); }

/* 29a. Masked headings: words rise out of their own mask, line by line (motion.js sets --m-d) */
.m-w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.04em 0.07em 0.16em; margin: -0.04em -0.07em -0.16em; }
.m-w > span { display: inline-block; }
html.m-on .m-split:not(.m-go) .m-w > span { transform: translate3d(0, 105%, 0); opacity: 0; }
html.m-on .m-split.m-go .m-w > span { transition: transform 0.56s var(--m-ease) var(--m-d, 0s), opacity 0.36s var(--e-ease-std) var(--m-d, 0s); }
/* the block that hosts a split heading only fades and settles: the words do the moving */
html.js [data-reveal].m-hhost:not(.is-in) { transform: translateY(8px); filter: none; }

/* 29b. Card fields: a short staggered rise (motion.js sets --m-d from each card's row and column) */
html.m-on [data-reveal-group][data-m~="cards"]:not(.is-in) > * { transform: translate3d(0, 16px, 0); }
html.m-on [data-reveal-group][data-m~="cards"].is-in:not(.m-done) > * { transition: opacity 0.45s var(--e-ease-out) var(--m-d, 0s), transform 0.55s var(--m-ease) var(--m-d, 0s); }
@media (max-width: 759px) {
    html.m-on [data-reveal-group][data-m~="cards"]:not(.is-in) > * { transform: translate3d(0, 12px, 0); }
}

/* 29c. Media wipes: a curtain lifts off the image while it settles from a slight zoom */
html.m-on .m-media:not(.m-in) { clip-path: inset(100% 0 0 0 round var(--m-r, 0px)); }
html.m-on .m-media.m-in:not(.m-done) { clip-path: inset(0 0 0 0 round var(--m-r, 0px)); transition: clip-path 0.66s var(--m-ease-io) var(--m-d, 0s); }
html.m-on .m-media:not(.m-in) img { transform: scale(1.06) !important; }
html.m-on .m-media.m-in:not(.m-done) img { transition: transform 0.7s var(--m-ease) var(--m-d, 0s) !important; }

/* 29d. Seams: an ember line draws across each section boundary the first time it arrives */
html.m-on .m-seamed { position: relative; }
html.m-on .m-orbed { position: relative; isolation: isolate; }
.m-seam {
    position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none; border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 107, 0, 0) 0%, rgba(255, 107, 0, 0.45) 50%, var(--e-ember-hot) 88%, #ffe0c8 100%);
    box-shadow: 0 0 16px rgba(255, 107, 0, 0.5);
    transform: scaleX(0); transform-origin: 0 50%;
}
.m-seam.m-in { transform: scaleX(1); transition: transform 0.9s var(--m-ease); }
html.m-on :is(#home, .x-hp) .x-section.m-seamed::after { display: none; }

/* 29e. Orbs: soft ember glows behind sections (motion.js drifts them slowly on wide screens) */
/* the wrap clips sideways only, so orbs never widen the page but still bleed past the section edges */
.m-orb-wrap { position: absolute; left: 0; right: 0; top: -18%; bottom: -18%; z-index: -1; overflow: hidden; pointer-events: none; }
.m-orb {
    position: absolute; pointer-events: none; border-radius: 50%;
    width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
    background: radial-gradient(closest-side, rgba(255, 107, 0, 0.17), rgba(255, 107, 0, 0.07) 45%, rgba(255, 107, 0, 0.02) 70%, transparent);
    will-change: transform;
}
.m-orb[data-side="right"] { right: -14vw; top: 6%; }
.m-orb[data-side="left"] { left: -16vw; bottom: 6%; }
html.m-on :is(#home, .x-hp) .x-section.m-orbed::before { display: none; }

/* 29f. Scroll progress: thin ember line under the global navbar (widget.js) and the dialog header */
.m-prog {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, var(--e-ember-deep), var(--e-ember) 70%, #ffb47d);
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.55);
    transform: scaleX(0); transform-origin: 0 50%;
}
.m-prog-dlg { bottom: auto; top: var(--m-top, 72px); }
/* laptop widths: the section bar under the page header already shows progress */

/* 29g. Stories: accents and lines only, nothing the visitor reads moves or dims */
/* home, why EAS: the pillar at eye level gets an ember rule and a glowing figure */
@media (min-width: 960px) {
    html.m-on #section-advantage .x-pillar { position: relative; }
    html.m-on #section-advantage .x-pillar::before {
        content: ''; position: absolute; left: -22px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px;
        background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember)); box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
        transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.45s var(--m-ease);
    }
    html.m-on #section-advantage .x-pillar.m-focus::before { transform: scaleY(1); }
    html.m-on #section-advantage .x-pillar .x-pillar-stat { transition: text-shadow 0.45s var(--e-ease-std); }
    html.m-on #section-advantage .x-pillar.m-focus .x-pillar-stat { text-shadow: 0 0 28px rgba(255, 107, 0, 0.5); }
}
/* contact, what happens next: the three steps connect with one ember line */
html.m-on #modal-contact .c-steps .c-step::before { width: 100%; transform: scaleX(0.14); transform-origin: 0 50%; background: linear-gradient(90deg, var(--e-ember), rgba(255, 107, 0, 0.35) 65%, rgba(255, 107, 0, 0.05)); }
html.m-on #modal-contact .c-steps.is-in .c-step::before { transform: none; transition: transform 0.9s var(--m-ease) calc(var(--m-d, 0s) + 0.2s); }
/* about, founder: an ember rail beside the portrait fills as the story is read */
.m-rail { display: none; }
@media (min-width: 960px) {
    html.m-on #modal-about .m-rail { display: block; position: absolute; top: 0; bottom: 0; left: -18px; width: 2px; border-radius: 2px; background: var(--e-line); pointer-events: none; }
    html.m-on #modal-about .m-rail i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--e-ember-hot), var(--e-ember)); box-shadow: 0 0 12px rgba(255, 107, 0, 0.55); transform: scaleY(0); transform-origin: 50% 0; }
}

/* 29h. Service and process dialogs (lighter): sections fade up as the dialog body scrolls */
html.m-on .m-dsec:not(.m-in) .m-rise { opacity: 0; transform: translate3d(0, 12px, 0); }
html.m-on .m-dsec.m-in .m-rise { transition: opacity 0.45s var(--e-ease-out) var(--m-d, 0s), transform 0.55s var(--m-ease) var(--m-d, 0s); }
html.m-on .m-dsec:not(.m-in) .dlg-sec-title { clip-path: inset(0 0 100% 0); transform: translate3d(0, 0.4em, 0); }
html.m-on .m-dsec.m-in .dlg-sec-title { clip-path: inset(0 0 0 0); transition: clip-path 0.55s var(--m-ease-io), transform 0.6s var(--m-ease); }

/* hero flow card: stack-neutral line icons in the same tile as the old app logos */
.x-flow li > svg { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 9px; background: rgba(244, 239, 231, 0.05); border: 1px solid var(--e-line); box-sizing: border-box; }

/* ---------- 30. Home polish: cursor glow, live borders, keyword shimmer, compact phones ----
   All stable: nothing here moves layout or reading content. Borders and the shimmer only animate
   with motion allowed; home.js gates the border spin to cards that are on screen (.is-vis). */
@property --x-ba { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* cursor-reactive glow (home.js sets --mx/--my on the card under the pointer) */
.x-quote::before, .x-app-key::before, .x-pc-stage::before, .x-cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 0, 0.11), transparent 60%);
    transition: opacity var(--e-t-std);
}
.x-cta { isolation: isolate; --mx: 50%; --my: 50%; }
.x-cta::before { background: radial-gradient(640px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 0, 0.14), transparent 60%); }
.x-quote:hover::before, .x-app-key:hover::before, .x-pc-stage:hover::before, .x-cta:hover::before { opacity: 1; }

/* animated gradient border: a comet of ember light travelling round the edge */
.x-glow-border { position: relative; }
.x-glow-border::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px;
    background: conic-gradient(from var(--x-ba), transparent 0deg 210deg, rgba(255, 140, 58, 0.15) 250deg, rgba(255, 140, 58, 0.95) 318deg, #ffe0c8 330deg, rgba(255, 107, 0, 0) 352deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
    .x-glow-border.is-vis::after { animation: x-border-spin 7s linear infinite; }
    .x-svc-featured.x-glow-border.is-vis:nth-child(2)::after { animation-delay: -2.3s; }
    .x-svc-featured.x-glow-border.is-vis:nth-child(3)::after { animation-delay: -4.6s; }
    .x-app-key.x-glow-border.is-vis:nth-child(2)::after { animation-delay: -2.3s; }
    .x-app-key.x-glow-border.is-vis:nth-child(3)::after { animation-delay: -4.6s; }
}
@keyframes x-border-spin { to { --x-ba: 360deg; } }

/* hero keyword: a slow light sweep across "software" */
@media (prefers-reduced-motion: no-preference) {
    html.js .x-hero-title .x-word {
        background: linear-gradient(100deg, var(--e-ember) 0%, var(--e-ember) 40%, #ffe2cc 50%, var(--e-ember) 60%, var(--e-ember) 100%) 100% 0 / 260% 100% no-repeat;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        animation: x-shimmer 7s var(--e-ease-std) 2.4s infinite;
    }
}
@keyframes x-shimmer { 0% { background-position: 100% 0; } 24%, 100% { background-position: 0% 0; } }

/* featured quote: a big ember quotation mark behind the words */
.x-quote-mark { position: absolute; right: 16px; top: -26px; z-index: -1; font: 700 11rem/1 var(--e-display); color: rgba(255, 107, 0, 0.1); pointer-events: none; user-select: none; }

/* phones: the twelve smaller services become compact rows (the three featured stay full cards) */
@media (max-width: 639px) {
    .x-services-grid { gap: 10px; }
    .x-svc-featured { min-height: 0; padding: 22px; }
    .x-svc:not(.x-svc-featured) { flex-direction: row; align-items: center; gap: 14px; padding: 12px 56px 12px 12px; }
    .x-svc:not(.x-svc-featured) p, .x-svc:not(.x-svc-featured) .x-svc-tags { display: none; }
    .x-svc:not(.x-svc-featured) .x-svc-icon { width: 42px; height: 42px; border-radius: 10px; flex: none; }
    .x-svc:not(.x-svc-featured) .x-svc-icon svg, .x-svc:not(.x-svc-featured) .x-svc-icon img { width: 24px; height: 24px; }
    :is(#home, .x-hp) .x-svc:not(.x-svc-featured) h3 { font-size: 1rem; line-height: 1.25; }
    .x-svc:not(.x-svc-featured) .x-svc-go { top: calc(50% - 16px); right: 12px; width: 32px; height: 32px; }
}

/* reduced motion: the app rows wrap in place */
@media (prefers-reduced-motion: reduce) {
    .x-apps-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
    .x-apps-row { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- 31. By the numbers (proof band after the client logos) ---------
   Eight canonical figures. Counters come from widget.js ([data-count], reduced-motion aware); each
   number sits on an invisible copy of its final value (.x-num-ghost), so counting up never changes
   a width and the "+" never moves. */
.x-proof { position: relative; padding-block: clamp(32px, 6vh, 72px) 0; }
.x-proof-box {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(20px, 3vw, 40px); border-radius: var(--e-r-lg); border: 1px solid var(--e-line);
    background: radial-gradient(70% 120% at 0% 0%, rgba(255, 107, 0, 0.13), transparent 55%), linear-gradient(160deg, var(--e-char), var(--e-coal) 60%, #0a0806);
}
.x-proof-box::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(244, 239, 231, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 239, 231, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(120deg, #000, transparent 70%); mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.x-proof-head { margin-bottom: clamp(16px, 2.4vw, 28px); }
:is(#home, .x-hp) .x-proof-head .x-mark { margin-bottom: 8px; }
:is(#home, .x-hp) .x-proof-head h2 { font-size: var(--e-fs-xl); }
.x-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--e-line); }
@media (min-width: 900px) { .x-proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.x-proof-cell { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 18px 14px 16px; border-bottom: 1px solid var(--e-line); border-left: 1px solid var(--e-line); }
.x-proof-cell::after {
    content: ''; position: absolute; left: 14px; top: -1px; width: 38px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--e-ember), var(--e-ember-hot)); box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
}
@media (max-width: 899px) {
    .x-proof-cell:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .x-proof-cell:nth-child(2n+1)::after { left: 0; }
    .x-proof-cell:nth-child(n+7) { border-bottom: 0; padding-bottom: 4px; }
}
@media (min-width: 900px) {
    .x-proof-cell { padding: 20px 20px 18px; }
    .x-proof-cell::after { left: 20px; }
    .x-proof-cell:nth-child(4n+1) { border-left: 0; padding-left: 0; }
    .x-proof-cell:nth-child(4n+1)::after { left: 0; }
    .x-proof-cell:nth-child(n+5) { border-bottom: 0; padding-bottom: 4px; }
}
.x-proof-cell dd { margin: 0; }
.x-proof-cell dd:not(.x-proof-sub) {
    order: -1; display: flex; align-items: baseline; white-space: nowrap;
    font: 700 clamp(1.75rem, 1.1rem + 1.7vw, 2.8rem)/1 var(--e-display); color: var(--e-bone);
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.x-proof-cell dd i { font-style: normal; color: var(--e-ember); margin-left: 2px; }
.x-num { display: inline-grid; }
.x-num > span { grid-area: 1 / 1; }
.x-num-ghost { visibility: hidden; }
.x-proof-cell dt { font: 600 var(--e-fs-sm)/1.3 var(--e-body); color: var(--e-bone); }
.x-proof-sub { font-size: 0.76rem; line-height: 1.35; color: var(--e-dust); }
/* the ember tick over each figure draws once as the band arrives */
@media (prefers-reduced-motion: no-preference) {
    html.js .x-proof-grid:not(.is-in) .x-proof-cell::after { transform: scaleX(0); }
    html.js .x-proof-grid.is-in .x-proof-cell::after { transform-origin: 0 50%; transition: transform 0.6s var(--e-ease-out) 0.25s; }
    html.js .x-proof-grid.is-in .x-proof-cell:nth-child(n+2)::after { transition-delay: 0.32s; }
    html.js .x-proof-grid.is-in .x-proof-cell:nth-child(n+3)::after { transition-delay: 0.39s; }
    html.js .x-proof-grid.is-in .x-proof-cell:nth-child(n+4)::after { transition-delay: 0.46s; }
    html.js .x-proof-grid.is-in .x-proof-cell:nth-child(n+5)::after { transition-delay: 0.53s; }
}
@media (max-width: 380px) { .x-proof-cell { padding-inline: 10px; } .x-proof-cell dd:not(.x-proof-sub) { font-size: 1.6rem; } }
@media (max-width: 479px) { .x-proof-sub { display: none; } .x-proof-cell { padding-block: 14px 12px; } }

/* ---------- 30. Zoho embeds: dark loader, no white flash --------------------- */
.zoho-form-modal-body { position: relative; background: #0d0b09; }
.zoho-form-modal-body iframe { position: relative; z-index: 1; opacity: 0; transition: opacity 320ms var(--e-ease-std); }
.zoho-form-modal-body.is-loaded iframe { opacity: 1; }
.zoho-embed-loading { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--e-smoke); font: 500 0.9rem/1.3 var(--e-body); }
.zoho-embed-loading p { margin: 0; }
.zoho-embed-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--e-ember-25); border-top-color: var(--e-ember); animation: x-embed-spin 0.9s linear infinite; }
.zoho-form-modal-body.is-loaded .zoho-embed-loading { visibility: hidden; }
@keyframes x-embed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zoho-embed-loading span { animation: none; } }

/* ---------- 32. Audit fixes (home, header, navigator) -------------------------------------- */
/* shared sticky offset: header (72px) plus, on laptops, the section strip (to ~117px) plus air.
   Pages can use var(--sticky-top) for their pinned columns. */
:root { --sticky-top: 96px; }
@media (min-width: 1100px) and (max-width: 1599px) { :root { --sticky-top: 141px; } }
@media (min-width: 960px) { .x-adv-left { top: var(--sticky-top); } }
@media (min-width: 1100px) and (max-width: 1599px) { .x-adv-left { top: var(--sticky-top); } }

/* phones and tablets: the scrolled header is near-opaque (legacy CSS drops the blur there) */
@media (max-width: 768px) { .navbar.scrolled, .navbar.x-open { background: rgba(0, 0, 0, 0.94); } }

/* mobile menu: the calls to action anchor at the bottom, so the sheet is balanced */
@media (max-width: 1240px) {
    .navbar .nav-menu { display: flex; }
    .navbar .nav-menu .x-menu-cta { margin-top: auto; padding: 28px 0 8px; border-bottom: 0; }
    .navbar .nav-menu .x-menu-cta::before { content: 'Free 30-minute call with a developer'; display: block; margin-bottom: 4px; font: 500 var(--e-fs-sm)/1.4 var(--e-body); color: var(--e-dust); }
    .navbar .nav-menu .x-menu-cta .x-btn { min-height: 52px; justify-content: center; }
}

/* wide screens: the dots get a slim backing and only the current label shows (others on hover),
   so it never sits bare on top of the full-bleed marquee and demo wall */
@media (min-width: 1600px) {
    .x-snav-rail { isolation: isolate; }
    .x-snav-rail::before {
        content: ''; position: absolute; z-index: -1; top: 8px; bottom: 8px; right: 2px; width: 24px; border-radius: 12px; pointer-events: none;
        background: rgba(8, 6, 4, 0.78); border: 1px solid var(--e-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    }
    /* labels always visible (owner): each sits on its own glass backing so it reads over any content */
    .x-snav-list a .x-snav-label { opacity: 1; transform: none; pointer-events: auto; background: rgba(8, 6, 4, 0.84); border-color: var(--e-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .x-snav-list a.is-active .x-snav-label { background: rgba(28, 12, 2, 0.92); border-color: var(--e-ember-45); }
    .x-snav-label { transition: opacity var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out), color var(--e-t-quick), border-color var(--e-t-quick), background var(--e-t-quick); }
}

/* hero: laptop heights keep the stats above the fold */
@media (min-width: 1024px) and (max-height: 860px) {
    #section-hero.x-hero { padding-block: calc(72px + 28px) 36px; }
    :is(#home, .x-hp) .x-kicker { margin-bottom: 16px; }
    :is(#home, .x-hp) .x-hero-title { margin-bottom: 16px; }
    :is(#home, .x-hp) .x-hero-lede { margin-bottom: 20px; }
    #section-hero .x-hero-caps { margin-top: 12px; }
    #section-hero .x-hero-caps + .x-hero-actions { margin-top: 18px; }
    #section-hero .x-hero-actions { margin-bottom: 26px; }
}
/* tablets: a bigger headline and no tall empty band under the stats */
@media (min-width: 640px) and (max-width: 1023px) {
    .x-hero { min-height: min(100svh, 880px); }
    :is(#home, .x-hp) .x-hero-title { font-size: clamp(2.6rem, 6.2vw, 3.6rem); }
}

/* services on tablets: the first card spans the row, the other fourteen pair up (no lone card) */
@media (min-width: 640px) and (max-width: 1023px) {
    .x-services-grid > .x-svc:last-child { grid-column: span 6; }
    .x-services-grid > .x-svc:first-child { grid-column: span 12; }
}

/* dark pills ("Talk to a developer", "Describe your stack"): readable at rest */
.x-btn-dark { --bd: var(--e-line-strong); --gb-c1: #0b0907; --gb-c2: #21160e; --gb-c3: #3a1d0b; }

/* app and service icons never stretch */
.x-chip img, .x-app-key img, .x-svc-icon img { object-fit: contain; }

/* industries: a key over the tab list says what the percentages measure; rows breathe */
.x-ind-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.x-ind-key { display: flex; justify-content: space-between; gap: 12px; padding: 0 18px; font: 600 0.68rem/1 var(--e-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--e-dust); }
.x-ind-list { gap: 6px; }
@media (max-width: 899px) { .x-ind-key { display: none; } .x-ind-list { gap: 8px; } }

/* no orphans in the short ledes */
.x-pc-lede, .x-lede, .x-quote p, .x-ind-tag { text-wrap: pretty; }

/* "Any stack" orbit: the optional chips stay out of the ring at every size; phones keep six */
.fx-orbit.is-fx .fx-chip-opt { display: none; }
@media (max-width: 480px) { .fx-orbit.is-fx .fx-chip-sm-off { display: none; } }

/* reduced motion: the logo rows wrap evenly inside the page gutters */
@media (prefers-reduced-motion: reduce) {
    .x-logos .x-marquee { padding-inline: var(--e-gutter); }
    .x-logos .x-marquee-track { max-width: 1180px; margin-inline: auto; row-gap: 18px; justify-content: center; }
}

/* tablets: the seven capability chips fit one row */
@media (min-width: 640px) and (max-width: 1023px) { .x-hero-caps { gap: 6px; } .x-hero-caps a { padding: 0 11px; font-size: 0.78rem; } }

/* ---------- 34. Pages: every route is a full page ------------------------------------------
   One document, one global navbar and footer. The pages are .x-page containers in <main>;
   only the active one renders (the others carry [hidden]). js/router.js switches them with a
   View Transition: the old page fades out (150ms), the new one fades and rises 12px (380ms), the
   navbar stays still and an ember sweep runs under it. Reduced motion: an instant swap. */
:root { --x-nav-h: 72px; }
@media (min-width: 2400px) { :root { --x-nav-h: 84px; } }
/* dialogs (ROI cases, Zoho embeds) lock the page: the scrollbar keeps its gutter, nothing jumps */
html { scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: clip; }
.x-main { display: block; }
.x-page { display: block; position: relative; }
.x-page[hidden] { display: none !important; }
/* every page except the home (whose hero runs under the transparent navbar) starts below it */
.x-page:not(.x-page-home) {
    padding-top: var(--x-nav-h);
    min-height: 100vh; min-height: 100svh;
    background: var(--e-black);
}
.x-page-body { overflow-x: clip; }
/* pages other than the home: the navbar is the solid glass bar from the first pixel */
html[data-current-page]:not([data-current-page="home"]) .navbar,
html[data-boot-page] .navbar {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--e-line);
}
@media (max-width: 768px) {
    html[data-current-page]:not([data-current-page="home"]) .navbar, html[data-boot-page] .navbar { background: rgba(0, 0, 0, 0.94); }
}
/* service and process pages: no top-level link is theirs, the navbar shows no active page */

/* page transition (View Transitions API) */
.navbar { view-transition-name: x-nav; }
::view-transition-old(root) { animation: x-vt-out 150ms var(--e-ease-std) both; }
::view-transition-new(root) { animation: x-vt-in 380ms var(--e-ease-out) both; }
::view-transition-group(x-nav) { animation: none; }
::view-transition-old(x-nav) { display: none; }
::view-transition-new(x-nav) { animation: none; }
@keyframes x-vt-out { to { opacity: 0; } }
@keyframes x-vt-in { from { opacity: 0; transform: translateY(12px); } }
/* browsers without View Transitions: the same fade-and-rise on the incoming page */
.x-page.x-page-in { animation: x-vt-in 380ms var(--e-ease-out) both; }
/* the ember sweep under the navbar on every page change */
.navbar > .x-route-sweep {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 4; pointer-events: none;
    overflow: hidden; opacity: 0;
}
.navbar > .x-route-sweep::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(90deg, transparent, var(--e-ember-deep) 25%, var(--e-ember) 60%, #ffc08f 85%, transparent);
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.7);
    transform: translateX(-110%);
}
.navbar > .x-route-sweep.is-run { animation: x-sweep-fade 450ms linear both; }
.navbar > .x-route-sweep.is-run::before { animation: x-sweep 450ms var(--e-ease-out) both; }
@keyframes x-sweep { to { transform: translateX(240%); } }
@keyframes x-sweep-fade { 0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* scroll progress under the navbar (widget.js); the laptop section strip shows its own trace */
.navbar > .x-nav-prog { z-index: 3; }
@media (min-width: 1100px) and (max-width: 1599px) { html:has(.x-snav.is-visible) .navbar > .x-nav-prog { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .x-page.x-page-in, .navbar > .x-route-sweep.is-run, .navbar > .x-route-sweep.is-run::before { animation: none; }
}

/* ---------- 33. Any-stack orbit: inner counter-rotating ring ------------------ */
.fx-orbit.is-fx .fx-chip-in { font-size: 0.72rem; padding: 6px 11px; }
/* phones: one clean ring of six (the inner ring would collide with the core) */
@media (max-width: 699px) { .fx-orbit.is-fx .fx-chip-in { display: none; } }

/* ---------- 35. Services mega menu ------------------------------------------------------
   Markup: src/shell.html (li.x-mega-item > button.x-mega-btn + .x-mega > .x-mega-card).
   Behaviour: js/router.js (hover intent, click, keyboard, closes on navigation / scroll).
   Desktop (>=1241px): a glass card hanging under the navbar (absolute to the fixed navbar, so
   nothing below moves), 3 service columns + a side block. Opens with a scale / fade from the top,
   the items stagger in 20ms apart. Mobile menu (<=1240px): the same panel is a compact accordion. */
.navbar .x-mega-btn { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; }
.navbar .x-mega-chev { flex: none; opacity: 0.65; transition: transform var(--e-t-std) var(--e-ease-out), opacity var(--e-t-quick); }
.navbar .x-mega-btn[aria-expanded="true"] { color: var(--e-bone); background: rgba(244, 239, 231, 0.09); }
.navbar .x-mega-btn[aria-expanded="true"] .x-mega-chev { transform: rotate(180deg); opacity: 1; }
.navbar .x-mega-btn[aria-expanded="true"]::before { width: 60%; }
.navbar .x-mega ul, .navbar .x-mega ol { list-style: none; margin: 0; padding: 0; }
.navbar .nav-menu .x-mega li { display: block; margin: 0; border: 0; }
.x-mega svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.x-mega-h {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font: 600 0.66rem/1 var(--e-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-dust);
}
.x-mega-h::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--e-ember); box-shadow: 0 0 8px rgba(255, 107, 0, 0.8); flex: none; }

/* service items: line icon, title with the ember underline, one-line description */
.x-mega-link {
    position: relative; isolation: isolate;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 9px 10px; border-radius: 14px;
    color: var(--e-bone); text-decoration: none;
}
.x-mega-link::before, .x-mega-feature::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 30%) var(--my, 50%), rgba(255, 107, 0, 0.17), transparent 70%), rgba(244, 239, 231, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 140, 58, 0.2);
    opacity: 0; transition: opacity var(--e-t-quick) var(--e-ease-std);
}
.x-mega-link:hover::before, .x-mega-link:focus-visible::before, .x-mega-feature:hover::before, .x-mega-feature:focus-visible::before { opacity: 1; }
.x-mega-link[aria-current="page"]::before { opacity: 0.7; }
.x-mega-link:focus-visible, .x-mega-feature:focus-visible { outline-offset: 1px; }
.x-mega-ico {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    border: 1px solid var(--e-line); color: var(--e-ember-hot);
    background: linear-gradient(180deg, rgba(244, 239, 231, 0.06), rgba(244, 239, 231, 0.015));
    transition: border-color var(--e-t-quick), box-shadow var(--e-t-std) var(--e-ease-out), color var(--e-t-quick), transform var(--e-t-std) var(--e-ease-out);
}
.x-mega-ico svg { width: 18px; height: 18px; }
.x-mega-link:hover .x-mega-ico, .x-mega-link:focus-visible .x-mega-ico, .x-mega-link[aria-current="page"] .x-mega-ico {
    border-color: var(--e-ember-45); color: #ffb47d; transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.08), 0 6px 20px -6px rgba(255, 107, 0, 0.65);
}
.x-mega-txt { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
.x-mega-txt b {
    justify-self: start; padding-bottom: 2px;
    font: 600 0.88rem/1.25 var(--e-body); color: var(--e-bone);
    background: linear-gradient(90deg, var(--e-ember), var(--e-ember-hot)) no-repeat 0 100% / 0 1.5px;
    transition: background-size var(--e-t-std) var(--e-ease-out);
}
.x-mega-link:hover .x-mega-txt b, .x-mega-link:focus-visible .x-mega-txt b, .x-mega-link[aria-current="page"] .x-mega-txt b { background-size: 100% 1.5px; }
.x-mega-txt small { font: 400 0.76rem/1.35 var(--e-body); color: var(--e-smoke); text-wrap: pretty; }

/* "Explore more" band: the hub pages (all services, how we work, industries, Zoho suite) as four ember tiles,
   so the way into the grouped pages is hard to miss */
.x-mega-foot { margin: 0; }
.x-mega-hubs-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.x-mega-hubs-h { flex: none; color: var(--e-ember-hot); }
.x-mega-note { flex: 1 1 260px; min-width: 0; margin: 0; font: 400 0.78rem/1.4 var(--e-body); color: var(--e-smoke); }
.x-mega-hubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.x-mega-hubs li { min-width: 0; }
.x-mega-hubs a {
    position: relative; display: flex; align-items: center; gap: 11px; height: 100%; min-height: 62px;
    padding: 10px 32px 10px 10px; border-radius: 14px;
    border: 1px solid rgba(255, 140, 58, 0.32);
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.12), rgba(255, 107, 0, 0.035));
    color: var(--e-bone); text-decoration: none;
    transition: border-color var(--e-t-quick), background var(--e-t-quick), box-shadow var(--e-t-std) var(--e-ease-out);
}
.x-mega-hub-ico {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(180deg, #ff8a3d, var(--e-ember)); color: #1c0c02;
    box-shadow: 0 6px 16px -8px rgba(255, 107, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.x-mega-hubs .x-mega-hub-ico svg { width: 18px; height: 18px; stroke-width: 2; }
.x-mega-hub-txt { display: grid; gap: 2px; min-width: 0; }
.x-mega-hub-txt b { font: 600 0.86rem/1.2 var(--e-body); color: var(--e-bone); }
.x-mega-hub-txt small { font: 400 0.72rem/1.3 var(--e-body); color: var(--e-smoke); }
.x-mega-hub-go {
    position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
    color: var(--e-ember-hot); transition: transform var(--e-t-std) var(--e-ease-out);
}
.x-mega-hubs a:hover, .x-mega-hubs a:focus-visible, .x-mega-hubs a[aria-current="page"] {
    border-color: var(--e-ember); background: linear-gradient(180deg, rgba(255, 107, 0, 0.22), rgba(255, 107, 0, 0.07));
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.08), 0 12px 28px -14px rgba(255, 107, 0, 0.8);
}
.x-mega-hubs a:hover .x-mega-hub-go, .x-mega-hubs a:focus-visible .x-mega-hub-go { transform: translateX(3px); }
.x-mega-go {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font: 600 0.8rem/1 var(--e-body); color: var(--e-ember-hot); text-decoration: none;
}
.x-mega-go svg { width: 14px; height: 14px; stroke-width: 2; transition: transform var(--e-t-std) var(--e-ease-out); }
.x-mega-feature:hover .x-mega-go svg, .x-mega-feature:focus-visible .x-mega-go svg { transform: translateX(3px); }

/* side block: live demos card, the five process steps, the booking button */
.x-mega-feature {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: 4px; padding: 12px 14px 14px; border-radius: 16px;
    border: 1px solid var(--e-line); background: rgba(0, 0, 0, 0.35);
    color: var(--e-bone); text-decoration: none;
}
.x-mega-art {
    display: block; height: 78px; margin: -12px -14px 8px; overflow: hidden;
    background: radial-gradient(120% 140% at 85% 20%, rgba(255, 107, 0, 0.22), transparent 60%), #0b0907;
    border-bottom: 1px solid var(--e-line);
}
.x-mega-art svg { display: block; width: 100%; height: 100%; }
.x-mega-art .a-win { fill: rgba(244, 239, 231, 0.04); stroke: rgba(244, 239, 231, 0.16); stroke-width: 1; }
.x-mega-art .a-rule { stroke: rgba(244, 239, 231, 0.12); stroke-width: 1; }
.x-mega-art .a-dot { fill: rgba(244, 239, 231, 0.26); stroke: none; }
.x-mega-art .a-bar { fill: rgba(244, 239, 231, 0.14); stroke: none; }
.x-mega-art .a-line { stroke: var(--e-ember); stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.75)); }
.x-mega-art .a-pt { fill: #ffb47d; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 140, 58, 0.9)); }
.x-mega-kicker { font: 600 0.66rem/1 var(--e-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-ember-hot); }
.x-mega-feature b { font: 700 1rem/1.2 var(--e-display); color: var(--e-bone); letter-spacing: -0.01em; }
.x-mega-feature small { font: 400 0.76rem/1.4 var(--e-body); color: var(--e-smoke); text-wrap: pretty; }
.x-mega-go { margin-top: 6px; }
.x-mega-steps ol { position: relative; display: grid; margin-top: 8px; }
.x-mega-steps ol::before {
    content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, var(--e-ember-45), var(--e-line-strong) 60%, var(--e-line));
}
.x-mega-steps a {
    display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 3px 8px 3px 0; border-radius: 8px;
    font: 500 0.8rem/1.2 var(--e-body); color: var(--e-smoke); text-decoration: none;
    transition: color var(--e-t-quick);
}
.x-mega-steps i {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 27px; height: 22px;
    border-radius: 999px; border: 1px solid var(--e-line-strong); background: #0d0b09;
    font: 600 0.62rem/1 var(--e-display); font-style: normal; color: var(--e-dust);
    transition: border-color var(--e-t-quick), color var(--e-t-quick), box-shadow var(--e-t-std) var(--e-ease-out);
}
.x-mega-steps a:hover, .x-mega-steps a:focus-visible, .x-mega-steps a[aria-current="page"] { color: var(--e-bone); }
.x-mega-steps a:hover i, .x-mega-steps a:focus-visible i, .x-mega-steps a[aria-current="page"] i { border-color: var(--e-ember-45); color: var(--e-ember-hot); box-shadow: 0 0 14px -3px rgba(255, 107, 0, 0.7); }
.x-mega-cta { width: 100%; }

@media (min-width: 1241px) {
    .navbar.x-mega-on {
        z-index: 10000; /* above the laptop section strip */
        background: rgba(0, 0, 0, 0.82); border-bottom-color: var(--e-line);
        backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .navbar .x-mega {
        position: absolute; left: 0; right: 0; top: 100%; z-index: 2;
        visibility: hidden; pointer-events: none;
        transition: visibility 0s linear 240ms;
    }
    .navbar .x-mega.is-open { visibility: visible; transition-delay: 0s; }
    .navbar .x-mega-card {
        position: relative; pointer-events: auto;
        width: min(100% - 2 * var(--e-gutter), 1240px); margin: 10px auto 0;
        display: grid; grid-template-columns: minmax(0, 1fr) clamp(262px, 21vw, 300px);
        border-radius: 24px; border: 1px solid var(--e-line-strong);
        background:
            radial-gradient(70% 90% at 100% 0%, rgba(255, 107, 0, 0.09), transparent 60%),
            radial-gradient(50% 70% at 0% 100%, rgba(255, 107, 0, 0.05), transparent 70%),
            linear-gradient(180deg, rgba(23, 19, 15, 0.97), rgba(8, 7, 6, 0.975));
        backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
        box-shadow: 0 48px 90px -36px rgba(0, 0, 0, 0.95), 0 18px 40px -24px rgba(255, 107, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        opacity: 0; transform: translateY(-10px) scale(0.985); transform-origin: 50% 0;
        transition: opacity 180ms var(--e-ease-std), transform 240ms var(--e-ease-std);
    }
    .navbar .x-mega.is-open .x-mega-card { opacity: 1; transform: none; transition: opacity 260ms var(--e-ease-out), transform 480ms var(--e-ease-out); }
    /* hover bridge over the 10px gap, and the ember hairline along the top edge */
    .navbar .x-mega-card::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
    .navbar .x-mega-card::after {
        content: ''; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; pointer-events: none;
        background: linear-gradient(90deg, transparent, var(--e-ember) 30%, #ffc08f 50%, var(--e-ember) 70%, transparent);
        box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
    }
    .x-mega-main { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 0; }
    .x-mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; margin-bottom: 16px; }
    .x-mega-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .x-mega-col .x-mega-h { padding: 0 10px; margin-bottom: 8px; }
    .x-mega-col ul + .x-mega-h { margin-top: 16px; }
    .x-mega-foot {
        display: grid; gap: 12px; margin: auto -24px 0; padding: 16px 24px 20px; border-radius: 0 0 0 23px;
        border-top: 1px solid rgba(255, 140, 58, 0.3);
        background: linear-gradient(180deg, rgba(255, 107, 0, 0.08), rgba(255, 107, 0, 0.02));
    }
    .x-mega-hubs-lead { padding: 0 2px; }
    .x-mega-side {
        display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px;
        border-left: 1px solid var(--e-line); border-radius: 0 23px 23px 0;
        background: linear-gradient(180deg, rgba(255, 107, 0, 0.045), rgba(255, 255, 255, 0.012));
    }
    .x-mega-cta { margin-top: auto; min-height: 46px; }
    /* the page dims behind the open menu; the laptop section strip steps aside */
    body::after {
        content: ''; position: fixed; inset: 0; z-index: 9980; pointer-events: none;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35) 70%);
        opacity: 0; visibility: hidden; transition: opacity 240ms var(--e-ease-std), visibility 0s linear 240ms;
    }
    html.x-mega-open body::after { opacity: 1; visibility: visible; transition: opacity 320ms var(--e-ease-out); }
    html.x-mega-open .x-snav { opacity: 0; transition: opacity var(--e-t-quick); }
}
/* the entrance: the card scales in from the top, then the items rise in 20ms apart */
@media (min-width: 1241px) and (prefers-reduced-motion: no-preference) {
    .navbar .x-mega :is(.x-mega-h, .x-mega-link, .x-mega-foot, .x-mega-feature, .x-mega-steps li) {
        opacity: 0; transform: translateY(8px);
        transition: opacity 120ms var(--e-ease-std), transform 120ms var(--e-ease-std);
    }
    .navbar .x-mega.is-open :is(.x-mega-h, .x-mega-link, .x-mega-foot, .x-mega-feature, .x-mega-steps li) {
        opacity: 1; transform: none;
        transition: opacity 360ms var(--e-ease-out) calc(70ms + var(--i, 0) * 20ms), transform 560ms var(--e-ease-out) calc(70ms + var(--i, 0) * 20ms);
    }
    .navbar .x-mega-art .a-line { stroke-dasharray: 180; stroke-dashoffset: 180; }
    .navbar .x-mega.is-open .x-mega-art .a-line { animation: x-mega-draw 1s var(--e-ease-out) 280ms forwards; }
    .navbar .x-mega-art .a-pt { opacity: 0; }
    .navbar .x-mega.is-open .x-mega-art .a-pt { animation: x-mega-pop 400ms var(--e-ease-out) 1s forwards; }
}
@keyframes x-mega-draw { to { stroke-dashoffset: 0; } }
@keyframes x-mega-pop { from { opacity: 0; } to { opacity: 1; } }
/* closed by a navigation: gone at once, never fading over the next page */
.navbar .x-mega.is-instant, .navbar .x-mega.is-instant *, .navbar .x-mega.is-instant *::before, .navbar .x-mega.is-instant *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .navbar .x-mega-card, .navbar .x-mega.is-open .x-mega-card { transform: none; transition: opacity 120ms linear; }
    .navbar .x-mega-chev, .x-mega-ico, .x-mega-txt b, .x-mega-hubs a, .x-mega-hub-go, .x-mega-go svg { transition: none; }
    .x-mega-hubs a:hover .x-mega-hub-go, .x-mega-hubs a:focus-visible .x-mega-hub-go { transform: none; }
    .x-mega-link:hover .x-mega-ico, .x-mega-link:focus-visible .x-mega-ico, .x-mega-link[aria-current="page"] .x-mega-ico { transform: none; }
}

/* mobile menu: Services is an accordion with a compact grouped list (icon + title) */
@media (max-width: 1240px) {
    .navbar .nav-menu .x-mega-item { display: block; }
    .navbar .x-mega-btn { text-align: left; }
    .navbar .x-mega-chev { width: 18px; height: 18px; margin-left: auto; margin-right: 4px; }
    .navbar .x-mega-btn[aria-expanded="true"]::before { width: 28px; }
    .navbar .x-mega {
        display: grid; grid-template-rows: 0fr; visibility: hidden;
        transition: grid-template-rows 380ms var(--e-ease-out), visibility 0s linear 380ms;
    }
    .navbar .x-mega.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .navbar .x-mega-card { min-height: 0; overflow: hidden; }
    .x-mega-main { padding: 0 0 6px; }
    .x-mega-cols { display: grid; gap: 14px; }
    .x-mega-col { display: grid; gap: 2px; align-content: start; min-width: 0; }
    .x-mega-col .x-mega-h { padding: 6px 8px 8px; }
    .x-mega-col ul + .x-mega-h { margin-top: 12px; }
    .x-mega-link { align-items: center; min-height: 48px; padding: 6px 8px; border-radius: 12px; }
    .x-mega-link:focus-visible, .x-mega-feature:focus-visible, .x-mega-steps a:focus-visible { outline-offset: -2px; }
    .x-mega-ico { width: 32px; height: 32px; border-radius: 9px; }
    .x-mega-ico svg { width: 17px; height: 17px; }
    .x-mega-txt small, .x-mega-note, .x-mega-art, .x-mega-feature small, .x-mega-cta { display: none; }
    .x-mega-foot { display: grid; gap: 10px; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--e-line); }
    .x-mega-hubs-lead { padding: 0 8px; }
    .x-mega-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .x-mega-hubs a { min-height: 56px; padding: 8px 28px 8px 8px; border-radius: 12px; }
    .x-mega-hub-ico { width: 32px; height: 32px; border-radius: 9px; }
    .x-mega-hub-txt b { font-size: 0.9rem; font-weight: 500; }
    .x-mega-hub-go { right: 9px; }
    .x-mega-hubs a:focus-visible { outline-offset: -2px; }
    .x-mega-txt b { font-size: 0.98rem; font-weight: 500; }
    .x-mega-side { display: grid; gap: 14px; margin: 10px 0 14px; padding-top: 16px; border-top: 1px solid var(--e-line); }
    .x-mega-feature { padding: 12px 14px; }
    .x-mega-steps .x-mega-h { padding: 0 8px; }
    .x-mega-steps ol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .x-mega-steps ol::before { display: none; }
    .x-mega-steps a { min-height: 44px; padding: 0 14px 0 8px; border: 1px solid var(--e-line); border-radius: 999px; background: rgba(244, 239, 231, 0.025); }
}
@media (min-width: 640px) and (max-width: 1240px) {
    .x-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
    .x-mega-col:last-child { grid-column: span 2; }
    .x-mega-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 28px; }
}
@media (max-width: 639px) { .x-mega-hub-txt small { display: none; } }
@media (max-width: 1240px) and (prefers-reduced-motion: reduce) { .navbar .x-mega { transition: none; } }

/* footer: the Services column lists the key services, a "How we work" column the five steps */
.x-footer ol.x-footer-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: x-step; }
.x-footer-steps li { counter-increment: x-step; }
.x-footer-steps a::before { content: counter(x-step, decimal-leading-zero); display: inline-block; min-width: 22px; margin-right: 6px; font: 600 0.7rem/1 var(--e-display); color: var(--e-ember-hot); opacity: 0.85; }
@media (min-width: 1024px) and (max-width: 1279px) {
    .x-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 36px 40px; }
}
@media (min-width: 1280px) {
    .x-footer-grid { grid-template-columns: 1.45fr 0.9fr 1.05fr 0.9fr 1.25fr; gap: 36px; }
}
@media (min-width: 1600px) { .navbar .x-mega-card { width: min(100% - 2 * var(--e-gutter), 1320px); } }
@media (min-width: 1241px) and (prefers-reduced-motion: no-preference) {
    /* the process timeline line arrives with its first step */
    .navbar .x-mega .x-mega-steps ol::before { opacity: 0; transition: opacity 120ms var(--e-ease-std); }
    .navbar .x-mega.is-open .x-mega-steps ol::before { opacity: 1; transition: opacity 500ms var(--e-ease-out) calc(70ms + var(--i, 0) * 20ms); }
}
/* prerendered service / process / hub pages: Services reads as active before js/router.js runs */
:is(html[data-route^="/services/"], html[data-route^="/process/"], html[data-route="/services"], html[data-route="/how-we-work"], html[data-route="/industries"], html[data-route="/zoho"]) .navbar .x-mega-btn { color: var(--e-bone); background: rgba(244, 239, 231, 0.09); }
:is(html[data-route^="/services/"], html[data-route^="/process/"], html[data-route="/services"], html[data-route="/how-we-work"], html[data-route="/industries"], html[data-route="/zoho"]) .navbar .x-mega-btn::before { width: 60%; }
@media (max-width: 1240px) {
    :is(html[data-route^="/services/"], html[data-route^="/process/"], html[data-route="/services"], html[data-route="/how-we-work"], html[data-route="/industries"], html[data-route="/zoho"]) .navbar .x-mega-btn::before { width: 28px; }
}
html.x-mega-cut body::after { transition: none !important; }
.fx-orbit-ring.fx-orbit-ring-in { border: 1.5px solid rgba(255, 150, 70, 0.42); box-shadow: 0 0 14px rgba(255, 107, 0, 0.18), inset 0 0 30px rgba(255, 107, 0, 0.08); }

/* ---------- 36. Robot owns the hero; lead-to-cash card in the automation section ---------- */
/* still frame of the robot (files/robot-poster.webp): shown at once while the live scene loads, and kept when it
   can't run (reduced motion, data saver, no WebGL, load failure). The live canvas replaces it at the same pose. */
html.x-3d-pending .x-hero-3d, html.x-3d-static .x-hero-3d {
    opacity: 1;
    background: url(../files/robot-poster.webp) center / auto 100% no-repeat;
}
html.x-3d-pending .x-hero-3d::before { display: none; }
.x-hero.is-3d .x-hero-3d { background: none; }

.x-auto-flow {
    display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
    margin-top: clamp(32px, 4vw, 56px);
}
#section-automate .x-auto-flow-copy h3 { font-family: var(--e-display); font-size: var(--e-fs-xl); line-height: 1.2; margin: 10px 0 14px; }
#section-automate .x-auto-flow-copy p:not(.x-mark) { color: var(--e-smoke); max-width: 46ch; font-size: var(--e-fs-base, 1rem); line-height: 1.65; }
.x-flowside { perspective: 1200px; width: 100%; max-width: 420px; }
@media (min-width: 900px) {
    .x-auto-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
    .x-flowside { justify-self: end; }
}

/* ---------- 37. Deep audit fixes (Sept 2026) ------------------------------------------------ */
/* header: the legacy stylesheet pads the scrolled bar (73px -> 89px) and drops its blur on phones, so
   copy showed through; keep the height and make it solid below the laptop layout */
.navbar.scrolled { padding: 0; }
@media (max-width: 1099px) {
    .navbar.scrolled, .navbar.x-open,
    html[data-current-page]:not([data-current-page="home"]) .navbar.scrolled, html[data-boot-page] .navbar.scrolled { background: var(--e-black); }
}
/* footer: comfortable tap targets on touch screens, badges on one row on laptops, normal line height */
@media (pointer: coarse) {
    .x-footer ul { gap: 2px; }
    .x-footer ul a, .x-footer address a { display: inline-flex; align-items: center; min-height: 34px; }
}
@media (min-width: 1024px) {
    .x-footer-badges { flex-wrap: nowrap; }
    .x-footer-badges img { flex: 0 1 auto; min-width: 0; height: auto; max-height: 44px; }
}
.x-footer-bottom p { line-height: 1.5; }
/* proof counters: the counting number hugs the "+" instead of drifting away from it */
.x-num > span:not(.x-num-ghost) { justify-self: end; }
/* home: the Explore cards and the live demos wall share one section gap */
#home .x-explore + .x-work { padding-top: clamp(40px, 5vw, 80px); }
/* phones: the icon network sits further back so the headline and copy stay crisp */
@media (max-width: 759px) { .x-hero-net { opacity: 0.4; } }