/* ==========================================================================
   Rylax v3 — design system
   ==========================================================================

   The v3 brief: Rylax is a precision engineering business that ships its own
   products and, because of what AI now makes possible, also takes on strategic
   market analysis and bespoke build work. Global deployment, clients in Ireland
   and the UAE. That is an engineering company's site, not a SaaS landing page,
   and the design follows from it.

   Visual language is taken from Fabius (frontend/src/theme/tokens.css) so the
   two read as one house: warm charcoal base rather than blue-black, pulse green
   as the single accent, amber for anything in flight, Lexend for display and
   IBM Plex Mono for labels, readouts and anything that is data.

   Token names are kept identical to Fabius's where they exist, so a component
   can be lifted between the two without a find-and-replace.

   Motion is a first-class layer here, and it is all native: IntersectionObserver
   reveals, CSS scroll-driven animation where supported, and cross-document view
   transitions. No animation library, no build step — the site stays plain static
   HTML that Firebase serves as-is.
   ========================================================================== */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Type */
    --font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
    --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Palette — light "Pulse" system. Clean paper-white with a warm green
       tint, taken from the Rylax Pulse login: airy, editorial, and the
       opposite of the dark-navy SaaS hero. Warmth is carried by the green
       tint on the deep surfaces rather than a charcoal base. */
    --bg:        #ffffff;
    --bg-deep:   #f3f8f4;   /* tinted sections, footer, input fields */
    --surface:   #ffffff;   /* cards, panels, menus */
    --surface-2: #f1f7f3;   /* card hover */
    --line:      #e2ede7;   /* borders */
    --line-soft: #eef4f0;   /* hairlines */

    --ink:   #12211a;       /* headings and primary text */
    --muted: #4a5a51;       /* body copy */
    --faint: #8aa093;       /* labels, captions, meta */

    /* Accent — brand green, chosen to read on light for BOTH fills
       (buttons, chips) and text (tags, links), so one token does both. */
    --accent:     #0F6016;
    --accent-dim: #2f9c58;
    --accent-bright: #34c759; /* animated strokes / live glow only */
    --accent-ink: #ffffff;
    --accent-wash: rgba(15, 96, 22, 0.08);
    --amber:      #b26a00;
    --amber-wash: rgba(178, 106, 0, 0.10);
    --danger:     #c0392b;

    /* Radii — Fabius scale */
    --r-chip:  6px;
    --r-card:  8px;
    --r-panel: 10px;
    --r-slide: 14px;

    /* Layout */
    --page: 1200px;
    --gutter: 28px;
    --sec-py: clamp(72px, 9vw, 128px);

    /* Elevation */
    --shadow-card: 0 4px 16px rgba(18, 33, 26, 0.06);
    --shadow-pop:  0 14px 38px rgba(15, 96, 22, 0.12);

    --tap-min: 44px;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--muted);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip, not hidden: hidden makes <body> a scroll container (overflow-y
       computes to auto), which on Chrome/macOS makes the sticky, backdrop-blur
       nav render blank. clip prevents horizontal scroll without creating a
       scroll container, so the sticky nav keeps painting against the viewport. */
    overflow-x: clip;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Cross-document view transitions. Chrome honours this on same-origin
   navigations; everything else simply navigates as normal. It is the cheapest
   modern-feeling thing on the site — one at-rule, no JS. */
@view-transition { navigation: auto; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 3.6vw, 3rem); letter-spacing: -0.028em; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--ink); font-weight: 600; }

.lede {
    font-size: clamp(1.08rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    color: var(--muted);
    max-width: 62ch;
}

/* Mono label. The workhorse of the system — every section, card and stat is
   tagged with one, which is what makes the site read as instrumentation. */
.tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.tag.amber { color: var(--amber); }
.tag.mute  { color: var(--faint); }

.tag-line {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.tag-line::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 840px; margin: 0 auto; padding: 0 var(--gutter); }

.sec { padding: var(--sec-py) 0; position: relative; }
.sec-deep { background: var(--bg-deep); }
.sec-line { border-top: 1px solid var(--line-soft); }

.sec-head { max-width: 70ch; margin-bottom: 56px; }
.sec-head h2 { margin-bottom: 18px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.split  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: var(--tap-min);
    padding: 13px 26px;
    border-radius: var(--r-chip);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink) !important; }
.btn-primary:hover { background: #6ee79a; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink) !important; border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent) !important; }

/* Compact pill CTA for the top nav (the shared .btn is sized for hero/form use). */
.nav-cta .btn { min-height: 0; padding: 9px 20px; font-size: 0.875rem; gap: 7px; border-radius: 999px; letter-spacing: 0.005em; box-shadow: 0 1px 2px rgba(15, 96, 22, 0.25); transition: background 0.18s var(--ease), box-shadow 0.22s var(--ease), transform 0.18s var(--ease); }
.nav-cta .btn::after { content: "\2192"; font-size: 1em; line-height: 1; transform: translateX(-2px); opacity: 0.85; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.nav-cta .btn.btn-primary:hover { background: #0c5313; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 96, 22, 0.28); }
.nav-cta .btn:hover::after { transform: translateX(2px); opacity: 1; }

.link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--accent);
    transition: gap 0.18s var(--ease);
}
.link:hover { gap: 13px; }
.link svg { flex: none; }

/* ==========================================================================
   Navigation
   ========================================================================== */
#nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Solid background, no backdrop-filter: a translucent blurred sticky bar
       renders blank on some Chrome/macOS GPU setups (the whole nav layer is
       dropped from paint). Solid white always paints. */
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
#nav.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 20px rgba(18, 33, 26, 0.05); }

.nav-inner {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.nav-logo { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a, .nav-drop-toggle {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    transition: color 0.18s var(--ease);
}
.nav-links > a:hover, .nav-drop-toggle:hover, .nav-links > a[aria-current="page"] { color: var(--ink); }

.nav-drop { position: relative; }
.nav-drop-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: -18px;
    width: 330px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: var(--shadow-pop);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s var(--ease);
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a { display: block; padding: 11px 13px; border-radius: var(--r-card); transition: background 0.15s var(--ease); }
.nav-drop-menu a:hover { background: var(--surface-2); }
.nav-drop-menu strong { display: block; color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.nav-drop-menu span { display: block; font-size: 0.8rem; color: var(--faint); margin-top: 1px; }
.nav-drop-menu .nav-all { margin-top: 6px; border-top: 1px solid var(--line-soft); border-radius: 0; padding-top: 12px; font-size: 0.86rem; font-weight: 500; color: var(--accent); }
.nav-drop-menu .nav-all:hover { background: transparent; color: var(--ink); }
.nav-drop-menu .nav-for { margin-top: 6px; border-top: 1px solid var(--line-soft); padding: 10px 13px 4px; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.nav-drop-menu .nav-for > span { display: block; width: 100%; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.nav-drop-menu .nav-for a { display: inline; padding: 2px 0; font-size: 0.84rem; color: var(--muted); border-radius: 0; }
.nav-drop-menu .nav-for a:hover { background: transparent; color: var(--accent); }

/* Product status badges + the winner banner inside the Products dropdown.
   Scoped under .nav-drop-menu so they beat the `.nav-drop-menu span` rule
   that otherwise makes every span a full-width block. */
.nav-drop-menu strong .nav-badge { display: inline-block; width: auto; margin: 0 0 0 7px; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.nav-drop-menu strong .nav-badge.live { color: var(--accent); background: var(--accent-wash); }
.nav-drop-menu strong .nav-badge.alpha { color: var(--amber); background: var(--amber-wash); }
/* Fabius winner: a gold ribbon draped over the item's top-right corner */
.nav-drop-menu .nav-fab { position: relative; overflow: hidden; }
.nav-fab-ribbon { position: absolute; top: 12px; right: -30px; transform: rotate(45deg); background: linear-gradient(160deg, var(--accent), #0b4a11); color: #fff; font-family: var(--font-mono); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 34px; box-shadow: 0 2px 6px rgba(18, 33, 26, 0.18); pointer-events: none; }

/* Homepage announcement bar (scrolls away; the sticky nav sits below it) */
.topbanner { background: linear-gradient(100deg, #0d4f12, #0b3a0f); color: #fff; text-align: center; font-size: 0.85rem; padding: 9px 20px; border-bottom: 1px solid rgba(232, 197, 114, 0.28); }
.topbanner a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #fff; flex-wrap: wrap; }
.topbanner .tb-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #F2D89A; padding: 3px 10px 3px 8px; border: 1px solid rgba(232, 197, 114, 0.5); border-radius: 999px; background: rgba(232, 197, 114, 0.1); }
.topbanner .tb-badge svg { width: 14px; height: 14px; color: #F2D89A; flex: none; }
.topbanner strong { color: #fff; font-weight: 600; letter-spacing: 0.01em; }
.topbanner .tb-sep { width: 1px; height: 13px; background: rgba(255, 255, 255, 0.28); }
.topbanner .tb-cta { color: #F2D89A; font-weight: 600; text-decoration: none; opacity: 1; }
.topbanner a:hover .tb-cta { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .topbanner .tb-sep { display: none; } .topbanner a { gap: 8px; } }

.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; }
.nav-mobile-toggle span { width: 20px; height: 1.5px; background: var(--ink); display: block; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); }

/* Scroll progress. One line, and it tells the reader how long the page is. */
.progress {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 110;
    background: var(--accent);
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/* Scroll-driven where supported — no JS, no scroll listener, runs off the
   compositor. The JS fallback in v3.js only engages when this is unsupported. */
@supports (animation-timeline: scroll()) {
    .progress { animation: progress-grow linear; animation-timeline: scroll(root block); }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   Motion layer
   ==========================================================================
   [data-reveal] elements start displaced and settle when they enter the
   viewport. --i on a child staggers it. Everything is opt-in, so a page with
   no reveal attributes animates not at all. */
/* Gated on html.js (added by a one-line script in <head>): with JS off, or
   before v3.js runs, nothing is hidden. The hero H1 and hero shot are the LCP
   element on every page and are never hidden, even with JS on. */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translateX(-26px); }
html.js [data-reveal="right"] { transform: translateX(26px); }
html.js [data-reveal="scale"] { transform: scale(0.965); }
html.js .hero h1[data-reveal], html.js .studio h1[data-reveal], html.js .hero-shot[data-reveal] { opacity: 1; transform: none; transition: none; }

/* The scan beam, lifted from Fabius's home screen. Used on anything that is
   meant to read as "the system is watching this". */
.scan { position: relative; overflow: hidden; }
.scan::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 38%, var(--accent-wash) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: scanbeam 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes scanbeam { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* A live dot. Small, but it is the detail that makes a static page feel running. */
.pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pulse-dot::after {
    content: ''; position: absolute; inset: -4px;
    border-radius: 50%; border: 1px solid var(--accent);
    animation: dot-ring 2.4s ease-out infinite;
}
@keyframes dot-ring { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.7); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    @view-transition { navigation: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: clamp(32px, 4.5vw, 60px) 0 clamp(56px, 7vw, 96px); position: relative; }
/* Engineering drawing grid, very low contrast. Reads as a drawing sheet rather
   than the "AI glow" grid, because there is no radial light behind it. */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--line-soft) 1px, transparent 1px),
                      linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 75%);
    opacity: 0.55;
    pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 { max-width: 17ch; margin-bottom: 26px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { font-size: clamp(1.12rem, 1.7vw, 1.35rem); max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* Pill CTAs in the hero, matching the nav's rounded button language. */
.hero-actions .btn { border-radius: 999px; }
.hero-actions .btn-primary { box-shadow: 0 1px 2px rgba(15, 96, 22, 0.22); }

/* Capability strip under the hero — what the business does, at a glance. */
.strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(48px, 6vw, 80px);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    overflow: hidden;
    background: var(--surface);
}
.strip > div { padding: 24px 22px; }
.strip > div + div { border-left: 1px solid var(--line); }
.strip .tag { display: block; margin-bottom: 10px; }
.strip strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-bottom: 5px; }
.strip span { font-size: 0.88rem; color: var(--faint); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 28px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
a.card:hover, .card.hoverable:hover { border-color: rgba(15,96,22,0.28); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(18,33,26,0.11); }
.card .tag { display: block; margin-bottom: 14px; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: 0.96rem; color: var(--muted); }

/* Product card — the product list and the homepage both use this. */
.prod-card { display: flex; flex-direction: column; gap: 0; position: relative; overflow: hidden; }
.prod-card .prod-mark { width: 40px; height: 40px; margin-bottom: 18px; border-radius: var(--r-card); display: grid; place-items: center; background: var(--accent-wash); border: 1px solid rgba(15,96,22,0.18); }
.prod-card .prod-mark svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.7; }
.prod-card .prod-mark img { width: 22px; height: 22px; }
.prod-card ul { margin: 18px 0 22px; }
.prod-card ul li { font-size: 0.9rem; color: var(--faint); padding: 7px 0 7px 18px; position: relative; }
.prod-card ul li::before { content: ''; position: absolute; left: 0; top: 15px; width: 7px; height: 1px; background: var(--accent-dim); }
.prod-card .link { margin-top: auto; }

.status {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 10px; border-radius: var(--r-chip);
}
.status.live  { background: var(--accent-wash); color: var(--accent); }
.status.pilot { background: var(--amber-wash); color: var(--amber); }
.status.build { background: rgba(18,33,26,0.05); color: var(--faint); }

/* ==========================================================================
   Figures / counters
   ========================================================================== */
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figs > div { padding: 30px 24px 30px 0; }
.figs > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.figs .fig-n {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.figs .fig-n b { color: var(--accent); font-weight: 500; }
.figs span { font-size: 0.88rem; color: var(--faint); display: block; max-width: 28ch; }

/* ==========================================================================
   Marquee — integrations and coverage
   ========================================================================== */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 20px 0; position: relative; }
.marquee::before, .marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
    font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--faint); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 10px;
}
.marquee-track span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-dim); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   People / portfolio
   ========================================================================== */
.person { display: grid; grid-template-columns: 92px 1fr; gap: 24px; align-items: start; }
.person-av {
    width: 92px; height: 92px; border-radius: var(--r-panel);
    background: var(--surface-2); border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 1.5rem; color: var(--faint);
    overflow: hidden;
}
.person-av img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: 2px; }
.person .role { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.person p { font-size: 0.95rem; }
.person .link { margin-top: 16px; }

/* ==========================================================================
   Panels, steps, spec tables
   ========================================================================== */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-slide);
    padding: clamp(30px, 4vw, 52px);
}
.panel.accent { border-color: var(--accent-dim); background: linear-gradient(180deg, var(--accent-wash), transparent 60%), var(--surface); }

.steps { counter-reset: step; }
.steps li {
    counter-increment: step;
    display: grid; grid-template-columns: 44px 1fr; gap: 20px;
    padding: 20px 0; border-top: 1px solid var(--line-soft);
}
.steps li::before {
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent);
    padding-top: 3px;
}
.steps li strong { grid-column: 2; display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 4px; font-weight: 600; }
.steps li span { grid-column: 2; font-size: 0.94rem; color: var(--muted); }

.spec { width: 100%; border-collapse: collapse; }
.spec tr { border-top: 1px solid var(--line-soft); }
.spec tr:first-child { border-top: 1px solid var(--line); }
.spec th, .spec td { text-align: left; padding: 15px 0; vertical-align: top; font-size: 0.94rem; }
.spec th { width: 230px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding-right: 24px; }
.spec td { color: var(--muted); }
.spec td strong { color: var(--ink); }

/* ==========================================================================
   Contact
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-brand { text-align: center; margin-bottom: 26px; }
.form-brand-logo { height: 34px; width: auto; margin: 0 auto 12px; }
.form-brand-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
}
.form input, .form textarea {
    font-family: var(--font-ui); font-size: 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 14px 16px;
    color: var(--ink);
    width: 100%;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}
.form select {
    font-family: var(--font-ui); font-size: 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 14px 44px 14px 16px;
    color: var(--ink);
    width: 100%;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238aa093' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.form select:invalid { color: var(--faint); }
.form select:hover { border-color: var(--accent-dim); }
.form select:focus { outline: none; background-color: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
/* Honeypot: off-screen, never shown, never focused. Bots fill it, people cannot. */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form { position: relative; }
.form input::placeholder, .form textarea::placeholder { color: var(--faint); }
.form input:hover, .form textarea:hover { border-color: var(--accent-dim); }
.form input:focus, .form textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-wash);
}
.form textarea { resize: vertical; min-height: 128px; }
.form button { margin-top: 6px; width: 100%; justify-content: center; }
.form-status { margin-top: 14px; font-size: 0.92rem; color: var(--accent); }
.form-status.error { color: var(--danger); }

/* ==========================================================================
   Footer
   ========================================================================== */
footer { background: var(--bg); border-top: 1px solid var(--line); padding: 72px 0 32px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 36px; }
.foot-logo { height: 28px; width: auto; margin-bottom: 18px; }
.foot-brand p { font-size: 0.9rem; color: var(--faint); max-width: 40ch; }
.foot-social { display: flex; gap: 14px; margin-top: 20px; }
.foot-social a { color: var(--faint); transition: color 0.18s var(--ease); }
.foot-social a:hover { color: var(--accent); }
.foot-col h4, .foot-col .foot-h { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.foot-col a { display: block; font-size: 0.92rem; color: var(--muted); padding: 5px 0; transition: color 0.18s var(--ease); }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
    margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
    font-size: 0.84rem; color: var(--faint);
}

/* ── Cookie banner ── */
#cookieBanner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 130; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 0; }
.cookie-inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-inner p { font-size: 0.86rem; margin: 0; max-width: 68ch; color: var(--muted); }
.cookie-inner a { color: var(--accent); }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions button { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; padding: 10px 20px; border-radius: var(--r-chip); cursor: pointer; border: 1px solid transparent; }
.cookie-accept { background: var(--accent); color: var(--accent-ink); }
.cookie-decline { background: transparent; color: var(--muted); border-color: var(--line); }

/* ==========================================================================
   Product imagery, slideshow & testimonials
   Shared across the product pages. Swap a .ph placeholder for
   <div class="shot"><img src="..." alt="..."></div> when a real
   screenshot lands.
   ========================================================================== */
.shot { border: 1px solid var(--line); border-radius: var(--r-slide); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-pop); }
.shot img { width: 100%; height: auto; display: block; }
.shot-cap { margin-top: 14px; color: var(--faint); font-size: 0.9rem; font-family: var(--font-mono); letter-spacing: 0.01em; }
.shot-label { margin-bottom: 18px; }
.shot-label b { display: block; color: var(--accent); font-size: 1.05rem; margin-bottom: 5px; }
.shot-label span { display: block; color: var(--faint); font-size: 0.95rem; max-width: 58ch; }
/* Crops bands out of a screenshot (.shot clips the overflow). crop-top removes a
   customer-branded top bar; crop-foot trims an unwanted bottom strip. */
.shot.crop-top img { margin-top: -4.6%; }
.shot.crop-foot img { margin-bottom: -10%; }
/* Softly dissolves the bottom of a screenshot to white (hides a trailing strip). */
.shot.fade-foot { position: relative; }
.shot.fade-foot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 42%); pointer-events: none; }
/* Cap screenshot media at the source width (2000px) over device-pixel-ratio 2,
   so retina displays render 1:1 instead of upscaling and softening the image. */
.hero-shot { margin-top: clamp(40px, 6vw, 68px); max-width: 1000px; margin-left: auto; margin-right: auto; }
.shot-band { margin-top: clamp(44px, 6vw, 72px); max-width: 1000px; margin-left: auto; margin-right: auto; }

.ph { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 28px; background: linear-gradient(135deg, var(--bg-deep), var(--surface-2)); }
.ph::after { content: "Placeholder"; position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-wash); padding: 4px 9px; border-radius: var(--r-chip); }
.ph svg { width: 38px; height: 38px; color: var(--accent-dim); opacity: 0.65; }
.ph b { color: var(--ink); font-size: 1.02rem; }
.ph span { color: var(--faint); font-size: 0.92rem; max-width: 46ch; }

.slides { position: relative; max-width: 1000px; margin-left: auto; margin-right: auto; }
.slides-viewport { overflow: hidden; border-radius: var(--r-slide); border: 1px solid var(--line); box-shadow: var(--shadow-pop); background: var(--surface); }
.slides-track { display: flex; transition: transform 0.55s var(--ease-out); }
.slide { min-width: 100%; }
.slide .ph { border-radius: 0; }
/* A screenshot framed to the slide's 16:9 window. crop-top clips a branded header. */
.slide-shot { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.slide-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.slide-shot.crop-top img { object-position: 50% 13.5%; }
/* A tall/portrait shot shown whole, centred on a matching backdrop. */
.slide-shot.contain { background: #f4f6f9; padding: 3% 0; }
.slide-shot.contain img { object-fit: contain; object-position: center; }
.slide-cap { padding: 16px 20px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.slide-cap strong { color: var(--accent); display: block; font-size: 1.02rem; }
.slide-cap span { color: var(--muted); font-size: 0.94rem; }
.slides-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.slides-dots { display: flex; gap: 9px; }
.slides-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; transition: background 0.2s var(--ease); }
.slides-dots button[aria-current="true"] { background: var(--accent); }
.slides-arrows { display: flex; gap: 10px; }
.slides-arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.slides-arrows button:hover { border-color: var(--accent); color: var(--accent); }
.slides-arrows button:disabled { opacity: 0.4; cursor: default; }

/* Testimonials — continuous horizontal auto-scroll (marquee), two tracks
   for a seamless loop. Pauses on hover/focus; freezes for reduced-motion. */
.tscroll { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tscroll-row { display: flex; width: max-content; gap: 20px; animation: tscroll-move 46s linear infinite; }
.tscroll:hover .tscroll-row, .tscroll:focus-within .tscroll-row { animation-play-state: paused; }
@keyframes tscroll-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tcard { width: 360px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-card); padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.tcard p { color: var(--ink); font-size: 1.02rem; line-height: 1.55; margin: 0; }
.tcard .tmeta { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard .tav { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 0.9rem; flex: none; }
.tcard .twho { font-size: 0.88rem; color: var(--faint); line-height: 1.35; }
.tcard .twho strong { display: block; color: var(--muted); font-weight: 600; }
.tcard .tstars { color: var(--accent-dim); letter-spacing: 2px; font-size: 0.9rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .grid-4, .strip, .figs { grid-template-columns: repeat(2, 1fr); }
    .strip > div:nth-child(3) { border-left: none; }
    .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .figs > div:nth-child(3) { border-left: none; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .case { grid-template-columns: 1fr; gap: 26px; }
    .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 820px) {
    .nav-links {
        display: none;
        position: absolute; top: 72px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--gutter) 22px;
    }
    .nav-links.open { display: flex; }
    .nav-links > a, .nav-drop-toggle { padding: 14px 0; border-bottom: 1px solid var(--line-soft); width: 100%; justify-content: space-between; min-height: var(--tap-min); }
    .nav-drop-menu { position: static; opacity: 1; visibility: visible; transform: none; width: auto; border: none; box-shadow: none; background: transparent; padding: 0 0 8px 12px; }
    .nav-cta { margin-top: 16px; }
    .nav-cta .btn { width: 100%; }
    .nav-mobile-toggle { display: flex; }

    .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .person { grid-template-columns: 1fr; }
    .person-av { width: 72px; height: 72px; }
    .spec th { width: auto; display: block; padding-bottom: 4px; }
    .spec td { display: block; padding-top: 0; padding-bottom: 16px; }
    .spec tr { display: block; padding-top: 12px; }
}

@media (max-width: 560px) {
    :root { --gutter: 20px; }
    .grid-4, .strip, .figs { grid-template-columns: 1fr; }
    .strip > div + div, .figs > div + div { border-left: none; border-top: 1px solid var(--line); padding-left: 0; }
    .strip > div, .figs > div { padding-right: 0; }
    .hero-actions .btn { width: 100%; }
    .foot-grid { grid-template-columns: 1fr; }
    .case blockquote { font-size: 1.08rem; }
    .tcard { width: 78vw; max-width: 320px; }
}