/* ═══════════════════════════════════════════════════
   AUDOMIZE — Global Styles
   Brand: Inter + Playfair Display
   Colors: Off-White #FFF9F5, Charcoal #202B33,
           Graphite #4B4B4B, Cobalt #2447FF, Mist #E8ECF7
   ═══════════════════════════════════════════════════ */

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

:root {
    --white: #FFF9F5;
    --charcoal: #202B33;
    --graphite: #4B4B4B;
    --cobalt: #2447FF;
    --coral: #FF5A5F;
    --cobalt-dark: #1a35cc;
    --cobalt-light: #4a6aff;
    --mist: #E8ECF7;
    --mist-dark: #d0d8ec;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Poppins', 'Inter', -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    --nav-height: 72px;
    --loader-bar-height: 200px;
    --container-max: 1200px;
    --section-pad: 120px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--charcoal);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Loader Bar (WebGL gradient) ─────────────────── */
.audomize-bar {
    position: relative;
    width: 100%;
    height: var(--loader-bar-height);
    overflow: hidden;
    cursor: crosshair;
    z-index: 5;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.05) 10%,
        rgba(0,0,0,0.2) 22%,
        rgba(0,0,0,0.6) 35%,
        rgba(0,0,0,1) 45%,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0.6) 65%,
        rgba(0,0,0,0.2) 78%,
        rgba(0,0,0,0.05) 90%,
        rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.05) 10%,
        rgba(0,0,0,0.2) 22%,
        rgba(0,0,0,0.6) 35%,
        rgba(0,0,0,1) 45%,
        rgba(0,0,0,1) 55%,
        rgba(0,0,0,0.6) 65%,
        rgba(0,0,0,0.2) 78%,
        rgba(0,0,0,0.05) 90%,
        rgba(0,0,0,0) 100%
    );
}
.audomize-bar canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.audomize-bar__meta {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 32px;
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 249, 245, 0.92);
    mix-blend-mode: difference;
}
.audomize-bar[data-label=""] .audomize-bar__meta { display: none; }
.audomize-bar__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    animation: audomize-bar-blink 1.2s ease-in-out infinite;
}
@keyframes audomize-bar-blink { 50% { opacity: 0.25; } }

/* ── Scroll Animation Base ────────────────────────── */

/* Word-by-word reveal for headings */
.word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* Generous padding on all sides except top so italic descenders
       and glyph overhang are never clipped. The top edge stays flush
       to mask the word sliding up during the reveal animation. */
    padding: 0 0.15em 0.35em 0.15em;
    margin: 0 -0.15em;
}
.word {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}
.anim-reveal.is-visible .word {
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade in (section labels) */
.anim-fade-in {
    opacity: 0;
}
.anim-fade-in.is-visible {
    opacity: 1;
    transition: opacity 0.6s var(--ease-out);
}

/* Fade up (body text, cards) */
.anim-fade-up {
    opacity: 0;
    transform: translateY(32px);
}
.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* Scale in (pillar cards, scorecard preview) */
.anim-scale-in {
    opacity: 0;
    transform: scale(0.92);
}
.anim-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* ── Section Helpers ──────────────────────────────── */
.section-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cobalt);
    margin-bottom: 16px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2.3rem, 4.6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--charcoal);
    margin-bottom: 20px;
}

.section-sub {
    font-size: clamp(1rem, 1.5vw, 1.175rem);
    color: var(--graphite);
    max-width: 640px;
    line-height: 1.65;
}

.text-accent {
    font-family: 'Fraunces', var(--font-display), Georgia, serif;
    font-style: italic;
    font-optical-sizing: auto;
    color: var(--cobalt);
    font-weight: 560;
    font-size: 1.08em;
    letter-spacing: -0.015em;
}

/* ── Buttons ──────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 100px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.35s var(--ease-out);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
}

/* ── Primary: cobalt → inverted white/cobalt ── */
.btn--primary {
    background: var(--cobalt);
    color: #fff;
    padding: 14px 32px;
    border-color: var(--cobalt);
}
.btn--primary:hover {
    background: #fff;
    color: var(--cobalt);
    border-color: var(--cobalt);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(36, 71, 255, 0.28), 0 0 0 1px rgba(36, 71, 255, 0.08);
}
.btn--primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(36, 71, 255, 0.2);
    transition-duration: 0.1s;
}

/* ── Ghost: outline → filled cobalt ── */
.btn--ghost {
    background: transparent;
    color: var(--charcoal);
    padding: 14px 32px;
    border-color: rgba(32, 43, 51, 0.2);
}
.btn--ghost:hover {
    background: var(--cobalt);
    color: #fff;
    border-color: var(--cobalt);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(36, 71, 255, 0.28);
}
.btn--ghost:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* ── White: white → cobalt fill ── */
.btn--white {
    background: #fff;
    color: var(--charcoal);
    padding: 14px 32px;
    border-color: #fff;
}
.btn--white:hover {
    background: var(--cobalt);
    color: #fff;
    border-color: var(--cobalt);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(36, 71, 255, 0.35);
}
.btn--white:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* ── Ghost-white: transparent on dark bg → white fill ── */
.btn--ghost-white {
    background: transparent;
    color: #fff;
    padding: 14px 32px;
    border-color: rgba(255, 255, 255, 0.3);
}
.btn--ghost-white:hover {
    background: #fff;
    color: var(--cobalt);
    border-color: #fff;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(255, 255, 255, 0.15);
}
.btn--ghost-white:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

.btn--sm { padding: 10px 24px; font-size: 0.875rem; }
.btn--lg { padding: 16px 36px; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

/* ── Arrow: slides right + slight scale on hover ── */
.btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.35s var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(5px) scale(1.1); }
.btn:active .btn-arrow { transform: translateX(2px) scale(0.95); transition-duration: 0.1s; }

/* ═══════════════════════════════════════════════════
   INTRO OVERLAY — from Claude Design handoff
   Balanced tempo, breathe pulse, custom cubic-beziers
   ═══════════════════════════════════════════════════ */
.intro-overlay {
    --i-stroke-w: 14;
    --i-node-sw: 9;
    --i-t-line-inner: 1.05s;
    --i-t-line-outer: 1.85s;
    --i-t-fade: 0.55s;
    --i-d-bottom: 0.10s;
    --i-d-lines: 0.55s;
    --i-d-middle: 1.50s;
    --i-d-apex: 2.30s;
    --i-d-pulse: 3.00s;
    --i-pulse-dur: 3.6s;
    --i-pulse-offset: 0.6s;
    --i-ease-draw: cubic-bezier(.65,.02,.18,1);
    --i-ease-fade: cubic-bezier(.22,.61,.36,1);
    --i-ease-pulse: cubic-bezier(.45,.05,.55,.95);

    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--white);
    display: grid;
    place-items: center;
    transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}
.intro-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
}

.intro-mark {
    width: min(46vmin, 360px);
    height: auto;
    overflow: visible;
}

/* ── Lines ──────────────────────────────────────── */
.intro-line {
    fill: none;
    stroke: var(--charcoal);
    stroke-width: var(--i-stroke-w);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.intro-line--outer {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: introDrawLine var(--i-t-line-outer) var(--i-ease-draw) forwards;
    animation-delay: var(--i-d-lines);
}
.intro-line--inner {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: introDrawLine var(--i-t-line-inner) var(--i-ease-draw) forwards;
    animation-delay: var(--i-d-lines);
}
@keyframes introDrawLine { to { stroke-dashoffset: 0; } }

/* ── Nodes ──────────────────────────────────────── */
.intro-node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.intro-node-ring {
    fill: var(--white);
    stroke: var(--charcoal);
    stroke-width: var(--i-node-sw);
}
.intro-node-dot { fill: var(--cobalt); }
.intro-halo { fill: var(--cobalt); }

.intro-node--bl  { animation: introNodeIn var(--i-t-fade) var(--i-ease-fade) forwards; animation-delay: var(--i-d-bottom); }
.intro-node--br  { animation: introNodeIn var(--i-t-fade) var(--i-ease-fade) forwards; animation-delay: var(--i-d-bottom); }
.intro-node--mid { animation: introNodeIn var(--i-t-fade) var(--i-ease-fade) forwards; animation-delay: var(--i-d-middle); }
.intro-node--top { animation: introNodeIn var(--i-t-fade) var(--i-ease-fade) forwards; animation-delay: var(--i-d-apex); }

@keyframes introNodeIn {
    from { opacity: 0; transform: scale(.78); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Pulse (breathe) ────────────────────────────── */
.intro-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: introDotBreathe var(--i-pulse-dur) var(--i-ease-pulse) infinite;
    animation-delay: var(--i-d-pulse);
}
.intro-pulse--br { animation-delay: calc(var(--i-d-pulse) + var(--i-pulse-offset)); }

.intro-halo {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: introHaloBreathe var(--i-pulse-dur) var(--i-ease-pulse) infinite;
    animation-delay: var(--i-d-pulse);
}
.intro-halo--br { animation-delay: calc(var(--i-d-pulse) + var(--i-pulse-offset)); }

@keyframes introDotBreathe {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: .62; transform: scale(.94); }
}
@keyframes introHaloBreathe {
    0%, 100% { opacity: 0;   transform: scale(1); }
    50%      { opacity: .18; transform: scale(1.9); }
}

/* ── Word mark ──────────────────────────────────── */
.intro-word-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.intro-brand-name {
    font-family: var(--font-body);
    font-weight: 500;
    letter-spacing: .32em;
    font-size: 13px;
    color: var(--charcoal);
    opacity: 0;
    transform: translateY(4px);
    animation: introWordIn 1.1s var(--i-ease-fade) forwards;
    animation-delay: calc(var(--i-d-apex) + .3s);
}

.intro-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--graphite);
    opacity: 0;
    transform: translateY(4px);
    animation: introWordIn 1.1s var(--i-ease-fade) forwards;
    animation-delay: calc(var(--i-d-apex) + .6s);
}

@keyframes introWordIn { to { opacity: .85; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .intro-line--inner, .intro-line--outer { animation-duration: .001s; }
    .intro-node, .intro-pulse, .intro-halo, .intro-brand-name, .intro-tagline {
        animation: none; opacity: 1; transform: none;
    }
    .intro-halo { opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════ */
.main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: rgba(255, 249, 245, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out);
    transform: translateY(-100%);
}
.main-nav.is-visible { transform: translateY(0); }
.main-nav.is-scrolled { border-bottom-color: rgba(32, 43, 51, 0.08); }

.nav-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-logo-svg { width: 28px; height: auto; }

.nav-brand-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--graphite);
    transition: color 0.25s;
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0; right: 0;
    height: 2px;
    background: var(--cobalt);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease-out);
}
.nav-link:hover { color: var(--charcoal); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-link--score { color: var(--cobalt); font-weight: 600; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mobile menu button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    border-radius: 2px;
    transition: all 0.3s var(--ease-out);
}
.mobile-menu-btn.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.is-active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--white);
    padding: 32px 24px;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
    pointer-events: none;
}
.mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.mobile-menu-link {
    font-size: 1.125rem;
    font-weight: 500;
    padding: 16px 0;
    border-bottom: 1px solid rgba(32, 43, 51, 0.06);
    color: var(--charcoal);
    transition: color 0.25s;
}
.mobile-menu-link:hover { color: var(--cobalt); }

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
    position: relative;
    /* The 200px loader bar sits above the hero in normal flow, so the hero
       only needs to fill the remaining viewport. Bottom padding is offset by
       the loader-bar height so the content optically centers in the full
       viewport (not just within the hero box). */
    padding: 16px 0 30px;
    overflow: hidden;
    min-height: calc(100vh - var(--loader-bar-height));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero .container { position: relative; z-index: 2; width: 100%; margin-top: auto; margin-bottom: auto; }

.hero .container.hero-layout {
    max-width: 1420px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
}

.hero-copy { min-width: 0; }
.hero-layout .hero-title { font-size: clamp(2.7rem, 3.9vw, 3.7rem); }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mist);
    color: var(--cobalt);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 28px;
}
.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cobalt);
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--charcoal);
    margin-bottom: 16px;
    max-width: 820px;
}

.hero-title-accent {
    font-family: 'Fraunces', var(--font-display), Georgia, serif;
    display: block;
    font-style: italic;
    font-optical-sizing: auto;
    color: var(--cobalt);
    font-weight: 560;
    letter-spacing: -0.015em;
    font-size: 1.9em;
    line-height: 1.05;
}

.hero-sub {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    color: var(--graphite);
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 44px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Workflow hero animation */
.hero-workflow {
    --wf-loop: 9s;
    width: 100%;
    min-width: 0;
    position: relative;
    isolation: isolate;
}

.hero-workflow--retired { display: none !important; }

.hero-workflow--illustrated::before {
    inset: 16% 7% 8%;
    background: radial-gradient(circle, rgba(36, 71, 255, 0.1), rgba(36, 71, 255, 0) 70%);
}

.hero-illustration-stage {
    position: relative;
    width: 112%;
    margin-left: -6%;
    aspect-ratio: 1672 / 941;
    transform-origin: 55% 55%;
    animation: illustrationDepth var(--wf-loop) var(--ease-in-out) infinite;
    animation-play-state: paused;
    will-change: transform;
}

.hero-illustration-image,
.hero-illustration-motion {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-illustration-image { object-fit: contain; }
.hero-illustration-motion { overflow: visible; pointer-events: none; }

.ill-signal {
    fill: none;
    stroke: var(--cobalt-light);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: .035 .965;
    stroke-dashoffset: 1;
    opacity: 0;
    filter: url(#illustration-glow);
    animation-play-state: paused;
}

.ill-signal--main { animation: illustrationSignalMain var(--wf-loop) linear infinite; }
.ill-signal--review { animation: illustrationSignalReview var(--wf-loop) linear infinite; }
.ill-signal--output { animation: illustrationSignalOutput var(--wf-loop) linear infinite; }

.ill-diagnostic-scan path {
    fill: none;
    stroke: rgba(98, 130, 255, 0.9);
    stroke-width: 5;
    filter: url(#illustration-glow);
}
.ill-diagnostic-scan {
    opacity: 0;
    animation: illustrationScan var(--wf-loop) var(--ease-in-out) infinite;
    animation-play-state: paused;
}

.ill-routing-dial {
    opacity: 0;
    transform-origin: 902px 494px;
    animation: illustrationDial var(--wf-loop) var(--ease-in-out) infinite;
    animation-play-state: paused;
}
.ill-routing-dial circle,
.ill-routing-dial path {
    fill: none;
    stroke: var(--cobalt-light);
    stroke-width: 5;
    stroke-linecap: round;
}
.ill-routing-hand { stroke-width: 8 !important; }

.ill-check,
.ill-report-check {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    filter: url(#illustration-glow);
    animation-play-state: paused;
}
.ill-check--1 { animation: illustrationCheckOne var(--wf-loop) var(--ease-out) infinite; }
.ill-check--2 { animation: illustrationCheckTwo var(--wf-loop) var(--ease-out) infinite; }
.ill-check--3 { animation: illustrationCheckThree var(--wf-loop) var(--ease-out) infinite; }

.ill-status {
    fill: var(--cobalt-light);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter: url(#illustration-glow);
    animation-play-state: paused;
}
.ill-status--diagnostic { animation: illustrationStatusDiagnostic var(--wf-loop) ease-in-out infinite; }
.ill-status--review { animation: illustrationStatusReview var(--wf-loop) ease-in-out infinite; }
.ill-status--output { animation: illustrationStatusOutput var(--wf-loop) ease-in-out infinite; }

.ill-report-feed {
    opacity: 0;
    transform-origin: 1530px 630px;
    animation: illustrationReport var(--wf-loop) var(--ease-out) infinite;
    animation-play-state: paused;
}
.ill-report-feed > path:first-child {
    fill: rgba(255, 249, 245, 0.97);
    stroke: var(--charcoal);
    stroke-width: 3;
}
.ill-report-feed > path:not(:first-child):not(.ill-report-check) {
    fill: none;
    stroke: rgba(32, 43, 51, 0.58);
    stroke-width: 3;
    stroke-linecap: round;
}

.hero-workflow.is-running .hero-illustration-stage,
.hero-workflow.is-running .ill-animated { animation-play-state: running; }

@keyframes illustrationDepth {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    48% { transform: translate3d(-0.7%, -0.5%, 0) scale(1.018); }
    76% { transform: translate3d(0.35%, -0.2%, 0) scale(1.01); }
}

@keyframes illustrationSignalMain {
    0%, 6% { stroke-dashoffset: 1; opacity: 0; }
    10%, 27% { opacity: 1; }
    31%, 100% { stroke-dashoffset: -.05; opacity: 0; }
}
@keyframes illustrationSignalReview {
    0%, 26% { stroke-dashoffset: 1; opacity: 0; }
    31%, 47% { opacity: 1; }
    51%, 100% { stroke-dashoffset: -.05; opacity: 0; }
}
@keyframes illustrationSignalOutput {
    0%, 53% { stroke-dashoffset: 1; opacity: 0; }
    58%, 76% { opacity: 1; }
    81%, 100% { stroke-dashoffset: -.05; opacity: 0; }
}

@keyframes illustrationScan {
    0%, 13% { transform: translateY(-18px); opacity: 0; }
    18% { opacity: 1; }
    35% { transform: translateY(92px); opacity: 0.85; }
    40%, 100% { transform: translateY(116px); opacity: 0; }
}

@keyframes illustrationDial {
    0%, 24% { transform: rotate(-28deg) scale(0.92); opacity: 0; }
    30% { opacity: 1; }
    48% { transform: rotate(108deg) scale(1); opacity: 1; }
    57%, 100% { transform: rotate(136deg) scale(0.96); opacity: 0; }
}

@keyframes illustrationCheckOne {
    0%, 38% { stroke-dashoffset: 1; opacity: 0; }
    43%, 78% { stroke-dashoffset: 0; opacity: 1; }
    86%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes illustrationCheckTwo {
    0%, 43% { stroke-dashoffset: 1; opacity: 0; }
    48%, 78% { stroke-dashoffset: 0; opacity: 1; }
    86%, 100% { stroke-dashoffset: 1; opacity: 0; }
}
@keyframes illustrationCheckThree {
    0%, 48% { stroke-dashoffset: 1; opacity: 0; }
    53%, 78% { stroke-dashoffset: 0; opacity: 1; }
    86%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes illustrationStatusDiagnostic {
    0%, 11%, 35%, 100% { transform: scale(0.7); opacity: 0; }
    17%, 29% { transform: scale(1.5); opacity: 1; }
}
@keyframes illustrationStatusReview {
    0%, 37%, 59%, 100% { transform: scale(0.7); opacity: 0; }
    44%, 54% { transform: scale(1.5); opacity: 1; }
}
@keyframes illustrationStatusOutput {
    0%, 61%, 84%, 100% { transform: scale(0.7); opacity: 0; }
    68%, 78% { transform: scale(1.5); opacity: 1; }
}

@keyframes illustrationReport {
    0%, 63% { transform: translateY(-24px) scaleY(0.82); opacity: 0; }
    70%, 82% { transform: translateY(10px) scaleY(1); opacity: 1; }
    90%, 100% { transform: translateY(24px) scaleY(1); opacity: 0; }
}

.hero-workflow::before {
    content: '';
    position: absolute;
    inset: 14% 10% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(36, 71, 255, 0.09), rgba(36, 71, 255, 0) 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

.hero-workflow-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wf-register,
.wf-foot-rule {
    fill: none;
    stroke: rgba(32, 43, 51, 0.23);
    stroke-width: 1.5;
}

.wf-kicker,
.wf-status-copy,
.wf-footnote,
.wf-node text,
.wf-output-badge text {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    letter-spacing: 0.12em;
    fill: var(--charcoal);
}

.wf-kicker,
.wf-status-copy { font-size: 11px; }
.wf-footnote { font-size: 10px; letter-spacing: 0.18em; }
.wf-node text { font-size: 10px; font-weight: 600; }

.wf-chassis rect {
    fill: rgba(255, 249, 245, 0.72);
    stroke: rgba(32, 43, 51, 0.22);
    stroke-width: 1.5;
}

.wf-chassis path,
.wf-chassis circle {
    fill: none;
    stroke: rgba(32, 43, 51, 0.18);
    stroke-width: 1.3;
}

.wf-route-base {
    fill: none;
    stroke: rgba(32, 43, 51, 0.2);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wf-route-base--exception {
    stroke-dasharray: 6 9;
}

.wf-route-active {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation-play-state: paused;
}

.wf-route-active--main { animation: wfMainRoute var(--wf-loop) var(--ease-in-out) infinite; }
.wf-route-active--exception { animation: wfExceptionRoute var(--wf-loop) var(--ease-in-out) infinite; }

.wf-node-shell,
.wf-review-panel {
    fill: rgba(255, 249, 245, 0.96);
    stroke: var(--charcoal);
    stroke-width: 2.3;
}

.wf-trigger-ring {
    fill: rgba(36, 71, 255, 0.08);
    stroke: var(--cobalt);
    stroke-width: 2;
    transform-origin: 114px 338px;
    animation: wfTriggerPulse var(--wf-loop) ease-in-out infinite;
    animation-play-state: paused;
}

.wf-trigger-core,
.wf-input-port,
.wf-review-light { fill: var(--cobalt); }

.wf-input-sheet,
.wf-output-fold,
.wf-output-line,
.wf-review-lines {
    fill: none;
    stroke: var(--charcoal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wf-gate {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 3;
    stroke-linecap: round;
}
.wf-gate-pivot { fill: var(--white); stroke: var(--cobalt); stroke-width: 2; }

.wf-review-lever {
    transform-origin: 525px 224px;
    animation: wfReviewLever var(--wf-loop) var(--ease-out) infinite;
    animation-play-state: paused;
}
.wf-review-lever circle { fill: var(--white); stroke: var(--charcoal); stroke-width: 2; }
.wf-review-lever path { fill: none; stroke: var(--charcoal); stroke-width: 5; stroke-linecap: round; }
.wf-review-check {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    animation: wfReviewCheck var(--wf-loop) var(--ease-out) infinite;
    animation-play-state: paused;
}

.wf-output-line {
    opacity: 0;
    transform-origin: left center;
    animation: wfOutputLine var(--wf-loop) var(--ease-out) infinite;
    animation-play-state: paused;
}
.wf-output-line--2 { animation-delay: 0.08s; }
.wf-output-line--3 { animation-delay: 0.16s; }

.wf-packet {
    opacity: 0;
    animation-play-state: paused;
}
.wf-packet rect { fill: var(--cobalt); stroke: var(--white); stroke-width: 2; }
.wf-packet path { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; }
.wf-packet--main { animation: wfMainPacket var(--wf-loop) var(--ease-in-out) infinite; }
.wf-packet--exception { animation: wfExceptionPacket var(--wf-loop) var(--ease-in-out) infinite; }

.wf-output-badge {
    opacity: 0;
    transform-origin: 639px 471px;
    animation: wfOutputBadge var(--wf-loop) var(--ease-out) infinite;
    animation-play-state: paused;
}
.wf-output-badge rect { fill: var(--charcoal); }
.wf-output-badge circle { fill: var(--cobalt-light); }
.wf-output-badge text { fill: var(--white); font-size: 8px; font-weight: 600; }

.wf-route-active,
.wf-packet { animation-play-state: paused; }

.hero-workflow.is-running .wf-animated,
.hero-workflow.is-running .wf-route-active { animation-play-state: running; }

@keyframes wfMainRoute {
    0%, 7% { stroke-dashoffset: 1; opacity: 0; }
    11% { opacity: 1; }
    29%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes wfExceptionRoute {
    0%, 29% { stroke-dashoffset: 1; opacity: 0; }
    34% { opacity: 1; }
    47%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

@keyframes wfTriggerPulse {
    0%, 7%, 20%, 100% { transform: scale(1); opacity: 0.65; }
    11% { transform: scale(1.28); opacity: 1; }
    15% { transform: scale(0.94); opacity: 0.85; }
}

@keyframes wfMainPacket {
    0%, 10% { transform: translate(114px, 338px) scale(0.7); opacity: 0; }
    14% { transform: translate(114px, 338px) scale(1); opacity: 1; }
    27% { transform: translate(246px, 338px) scale(1); opacity: 1; }
    40% { transform: translate(390px, 338px) scale(1); opacity: 1; }
    62% { transform: translate(650px, 338px) scale(1); opacity: 1; }
    67%, 100% { transform: translate(650px, 338px) scale(0.72); opacity: 0; }
}

@keyframes wfExceptionPacket {
    0%, 18% { transform: translate(246px, 338px) scale(0.72); opacity: 0; }
    23% { transform: translate(246px, 338px) scale(1); opacity: 1; }
    32% { transform: translate(390px, 338px) scale(1); opacity: 1; }
    43% { transform: translate(448px, 250px) scale(1); opacity: 1; }
    50%, 61% { transform: translate(527px, 234px) scale(1); opacity: 1; }
    73% { transform: translate(590px, 264px) scale(1); opacity: 1; }
    82% { transform: translate(650px, 338px) scale(1); opacity: 1; }
    87%, 100% { transform: translate(650px, 338px) scale(0.72); opacity: 0; }
}

@keyframes wfReviewLever {
    0%, 48% { transform: rotate(0deg); }
    54%, 90% { transform: rotate(34deg); }
    96%, 100% { transform: rotate(0deg); }
}

@keyframes wfReviewCheck {
    0%, 52% { stroke-dashoffset: 1; opacity: 0; }
    58%, 89% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

@keyframes wfOutputLine {
    0%, 68% { transform: scaleX(0); opacity: 0; }
    75%, 90% { transform: scaleX(1); opacity: 1; }
    97%, 100% { transform: scaleX(0); opacity: 0; }
}

@keyframes wfOutputBadge {
    0%, 76% { transform: translateY(8px) scale(0.9); opacity: 0; }
    82%, 90% { transform: translateY(0) scale(1); opacity: 1; }
    97%, 100% { transform: translateY(5px) scale(0.94); opacity: 0; }
}

.hero-proof {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.hero-proof-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--graphite);
}
.hero-proof-item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Grid background */
.hero-grid-bg {
    position: absolute;
    top: 0; right: -10%;
    width: 60%;
    height: 100%;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(36, 71, 255, 0.06) 1px, transparent 0);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, black 20%, transparent 70%);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   PROBLEM
   ═══════════════════════════════════════════════════ */
.problem {
    /* This section is the zoom-parallax track — its tall height drives the
       scroll-scrubbed zoom while .problem-zoom-stage pins to the viewport. */
    padding: 0;
    background: #fff;
    position: relative;
}

.problem .section-sub { margin-bottom: 56px; }

/* ─── Zoom Parallax (text flies past → cards land) ─── */
.problem-zoom {
    position: relative;
    /* Tall track: the first stretch is a readable "hold" (text static), then
       the zoom + card reveal play out. Raise this for more runway overall;
       the hold/zoom proportions live in the GSAP timeline (script.js). */
    height: 400vh;
}
.problem-zoom-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pz-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
}
.pz-bg {
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%,
        rgba(36, 71, 255, 0.07) 0%, rgba(255, 249, 245, 0) 60%);
}
.pz-intro {
    z-index: 3;
    pointer-events: none;          /* never blocks the cards beneath when faded */
    text-align: center;
    /* blur is animated alongside scale to hide aliasing as the text enlarges */
    will-change: transform, opacity, filter;
}
.pz-intro .container { max-width: 760px; }
.pz-intro .section-label { display: block; margin-bottom: 16px; }
.pz-intro .section-title { margin-bottom: 0; }
.pz-cards {
    z-index: 2;
    opacity: 0;                    /* GSAP reveals it; .pz-static forces it on */
}
.pz-cards .container { display: flex; flex-direction: column; }
.pz-cards .problem-grid { width: 100%; }

/* Lead sentence above the tiles — typewriter reveal as cards land */
.pz-cards-lead {
    text-align: left;
    max-width: 620px;
    margin: 0 0 48px;
}
.pz-cards-lead .typewriter-text {
    display: inline;
    border-right: 2px solid var(--cobalt);
    animation: typewriterBlink 0.7s step-end infinite;
}
.pz-cards-lead .typewriter-text.typewriter-done {
    border-right-color: transparent;
    animation: none;
}
@keyframes typewriterBlink {
    50% { border-right-color: transparent; }
}

/* Fallback layout — no GSAP, reduced motion, or mobile: plain stacked section */
.problem-zoom.pz-static { height: auto; }
.problem-zoom.pz-static .problem-zoom-stage {
    position: static;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    flex-direction: column;
    gap: 56px;
    padding: var(--section-pad) 0;
}
.problem-zoom.pz-static .pz-layer {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
}
.problem-zoom.pz-static .pz-bg { display: none; }
.problem-zoom.pz-static .pz-intro { pointer-events: auto; }

.problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.problem-card {
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(32, 43, 51, 0.06);
    background: var(--white);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s;
}
.problem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(32, 43, 51, 0.08);
    border-color: rgba(36, 71, 255, 0.15);
}

.problem-card-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    overflow: visible;
    color: var(--cobalt);
}
.problem-card-icon svg { width: 100%; height: 100%; display: block; }

.problem-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.problem-card-text {
    font-size: 0.9rem;
    color: var(--graphite);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════
   PILLARS
   ═══════════════════════════════════════════════════ */
.pillars {
    padding: var(--section-pad) 0;
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pillars .section-sub { margin-bottom: 56px; }

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pillar-card {
    padding: 40px 32px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(32, 43, 51, 0.08);
    background: #fff;
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(32, 43, 51, 0.1);
}

.pillar-card--featured {
    background: var(--cobalt);
    color: #fff;
    border-color: transparent;
}
.pillar-card--featured:hover {
    box-shadow: 0 20px 60px rgba(36, 71, 255, 0.25);
}
.pillar-card--featured .pillar-card-number { color: rgba(255, 255, 255, 0.3); }
.pillar-card--featured .pillar-card-sub { color: rgba(255, 255, 255, 0.75); }
.pillar-card--featured .pillar-card-list li { color: rgba(255, 255, 255, 0.85); }
.pillar-card--featured .pillar-card-list li::before { background: rgba(255, 255, 255, 0.4); }

.pillar-card-number {
    font-size: 4.5rem;
    font-weight: 800;
    color: rgba(32, 43, 51, 0.04);
    line-height: 1;
    position: absolute;
    top: 16px;
    right: 24px;
}

.pillar-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
}
.pillar-card-icon svg { width: 100%; height: 100%; }

.pillar-icon-frame {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    border: 1.5px solid var(--cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pillar-icon-frame svg {
    width: 36px;
    height: 36px;
    overflow: visible;
    color: var(--cobalt);
    display: block;
}
.pillar-icon-frame--featured {
    border-color: #fff;
}
.pillar-icon-frame--featured svg {
    color: #fff;
}

.pillar-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.pillar-card-sub {
    font-size: 0.925rem;
    color: var(--graphite);
    line-height: 1.6;
    margin-bottom: 24px;
}

.pillar-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pillar-card-list li {
    font-size: 0.875rem;
    color: var(--graphite);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.pillar-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cobalt);
}

/* ═══════════════════════════════════════════════════
   AUDIT
   ═══════════════════════════════════════════════════ */
.audit {
    padding: var(--section-pad) 0;
    background: var(--mist);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.audit-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.audit-desc {
    font-size: 1.0625rem;
    color: var(--graphite);
    line-height: 1.7;
    margin-bottom: 32px;
}

.audit-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 36px;
}

.audit-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--charcoal);
    line-height: 1.5;
}
.audit-feature svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Audit card stack */
.audit-card-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audit-stack-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 28px;
    border: 1px solid rgba(32, 43, 51, 0.06);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
    position: relative;
}
.audit-stack-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 32px rgba(32, 43, 51, 0.08);
}

.audit-stack-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background: var(--cobalt);
    opacity: 0;
    transition: opacity 0.3s;
}
.audit-stack-card:hover::before { opacity: 1; }

.audit-stack-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cobalt);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.audit-stack-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.audit-stack-desc {
    font-size: 0.875rem;
    color: var(--graphite);
    line-height: 1.55;
}

/* ═══════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════ */
.how-it-works {
    padding: var(--section-pad) 0;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.how-it-works .section-title { margin-bottom: 56px; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.step-card {
    padding: 0 32px;
    position: relative;
    text-align: center;
}

.step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cobalt);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s var(--spring), box-shadow 0.3s;
}
.step-card:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(36, 71, 255, 0.3);
}

.step-connector {
    position: absolute;
    top: 28px;
    left: calc(50% + 32px);
    right: calc(-50% + 32px);
    height: 2px;
    background: linear-gradient(90deg, var(--cobalt), var(--mist));
    z-index: 1;
}

.step-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.step-text {
    font-size: 0.9rem;
    color: var(--graphite);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════
   INDUSTRIES
   ═══════════════════════════════════════════════════ */
.industries {
    padding: var(--section-pad) 0;
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.industries .section-sub { margin-bottom: 56px; }

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.industry-card {
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(32, 43, 51, 0.06);
    background: #fff;
    transition: all 0.4s var(--ease-out);
    cursor: default;
}
.industry-card:hover {
    transform: translateY(-4px);
    border-color: var(--cobalt);
    box-shadow: 0 12px 40px rgba(36, 71, 255, 0.08);
}

.industry-icon {
    width: 44px;
    height: 44px;
    color: var(--cobalt);
    margin-bottom: 18px;
    transition: transform 0.3s var(--spring);
}
.industry-card:hover .industry-icon { transform: scale(1.1); }
.industry-icon svg { width: 100%; height: 100%; }

.industry-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.industry-text {
    font-size: 0.875rem;
    color: var(--graphite);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   WHY AUDOMIZE
   ═══════════════════════════════════════════════════ */
.why {
    padding: var(--section-pad) 0;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why .section-title { margin-bottom: 56px; }

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    padding: 32px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(32, 43, 51, 0.06);
    background: var(--white);
    transition: all 0.4s var(--ease-out);
}
.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(32, 43, 51, 0.08);
}

.why-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.why-icon { width: 36px; height: 36px; flex-shrink: 0; }
.why-icon svg { width: 100%; height: 100%; }

.why-card-title {
    font-size: 1rem;
    font-weight: 700;
}

.why-card-text {
    font-size: 0.9rem;
    color: var(--graphite);
    line-height: 1.65;
}

/* ═══════════════════════════════════════════════════
   CONTRAST
   ═══════════════════════════════════════════════════ */
.contrast {
    padding: var(--section-pad) 0;
    background: var(--white);
}

.contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.contrast-col {
    padding: 40px;
    border-radius: var(--radius-lg);
}

.contrast-col--them {
    background: #f6f6f6;
    border: 1px solid rgba(0,0,0,0.04);
}
.contrast-col--us {
    background: var(--charcoal);
    color: #fff;
}

.contrast-col-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.contrast-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
    font-size: 0.925rem;
    line-height: 1.55;
}
.contrast-item:last-child { border-bottom: none; }
.contrast-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

.contrast-col--them .contrast-item { color: #777; font-style: italic; }
.contrast-col--us .contrast-item { color: rgba(255,255,255,0.85); }

/* ═══════════════════════════════════════════════════
   SCORECARD TEASER
   ═══════════════════════════════════════════════════ */
.scorecard-teaser {
    padding: var(--section-pad) 0;
    background: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scorecard-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.scorecard-desc {
    font-size: 1.0625rem;
    color: var(--graphite);
    line-height: 1.7;
    margin-bottom: 28px;
}

.scorecard-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.scorecard-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--charcoal);
    font-weight: 500;
}
.scorecard-feature svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ── Score Roll Card (animated rolling scorecard) ── */
.score-roll-card {
    --sr-bg: #202B33;
    --sr-ring: rgba(255, 255, 255, 0.08);
    --sr-shadow: 0 30px 70px -30px rgba(0,0,0,0.6);
    --sr-ink: #FFF9F5;
    --sr-muted: #99A2AB;
    --sr-num: #8AA0FF;
    --sr-slash: #6B7682;
    --sr-track: rgba(255, 255, 255, 0.10);
    --sr-fill: #5E7BFF;
    --sr-roll-dur: 900ms;
    --sr-bar-dur: 1000ms;
    --sr-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --sr-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    width: 100%;
    background: var(--sr-bg);
    border: 1px solid var(--sr-ring);
    border-radius: 22px;
    padding: 36px 38px 40px;
    box-shadow: var(--sr-shadow);
}
.sr-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sr-muted);
    margin: 0 0 18px;
}
.sr-score-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    line-height: 1;
}
.sr-num-window {
    position: relative;
    height: 0.92em;
    overflow: hidden;
    font-size: clamp(56px, 10vw, 80px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sr-num);
    font-variant-numeric: tabular-nums;
}
.sr-reel {
    display: flex;
    flex-direction: column;
    transition: transform var(--sr-roll-dur) var(--sr-ease-out-quint);
    will-change: transform;
}
.sr-reel span {
    display: block;
    height: 0.92em;
    line-height: 0.92em;
}
.sr-slash {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 600;
    color: var(--sr-slash);
    letter-spacing: -0.02em;
    margin-bottom: 0.14em;
}
.sr-band {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cobalt);
    transition: color 420ms ease;
    min-height: 20px;
}
.sr-band-text {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 320ms ease, transform 320ms var(--sr-ease-out-quint);
}
.sr-band.out .sr-band-text { opacity: 0; transform: translateY(4px); }
.sr-pillars {
    margin-top: 28px;
    display: grid;
    gap: 18px;
}
.sr-p-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sr-ink);
    margin-bottom: 8px;
    letter-spacing: -0.005em;
}
.sr-p-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--sr-track);
    overflow: hidden;
}
.sr-p-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: 999px;
    background: var(--sr-fill);
    transition: width var(--sr-bar-dur) var(--sr-ease-out-expo),
                background 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
    .sr-reel { transition: transform 1ms linear; }
    .sr-p-fill { transition: width 200ms ease, background 200ms ease; }
}

/* ═══════════════════════════════════════════════════
   CTA
   ═══════════════════════════════════════════════════ */
.cta {
    padding: var(--section-pad) 0;
    background: var(--charcoal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cta-inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

.cta-title {
    font-family: var(--font-body);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.cta-sub {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: 36px;
}

.cta-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer {
    background: var(--charcoal);
    padding: 64px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 64px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-logo-svg { width: 28px; height: auto; }

.footer-brand-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
}

.footer-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.footer-col-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.footer-link {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    padding: 6px 0;
    transition: color 0.25s;
}
.footer-link:hover { color: #fff; }

.footer-bottom {
    padding-top: 24px;
    text-align: center;
}

.footer-copy {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Tablet / Medium
   ═══════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    :root {
        --section-pad: 96px;
    }

    .problem-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
    .step-connector { display: none; }
    .step-card { text-align: left; }
    .step-number { margin: 0 0 20px; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════
   MOTION GRAPHICS — Section A (Pain Points)
   ═══════════════════════════════════════════════════ */

/* SVG rotations — 80×80 viewBox, center 40,40 */
.problem-card-icon .gfx [data-rot] {
    transform-box: view-box;
    transform-origin: 40px 40px;
}

/* 1. TOOL SPRAWL */
.gfx-sprawl .lnk {
    stroke: var(--cobalt); stroke-width: 1.4;
    stroke-dasharray: 3 4; fill: none;
    opacity: .25;
    animation: sprawl-link 2.6s ease-in-out infinite;
}
.gfx-sprawl .lnk-2 { animation-delay: -.7s; }
.gfx-sprawl .lnk-3 { animation-delay: -1.3s; }
.gfx-sprawl .lnk-4 { animation-delay: -2.0s; }
.gfx-sprawl .lnk-5 { animation-delay: -.4s; }
@keyframes sprawl-link {
    0%, 100% { opacity: .08; stroke-dashoffset: 0; }
    35%      { opacity: .70; stroke-dashoffset: -14; }
    50%      { opacity: .05; }
    72%      { opacity: .55; stroke-dashoffset: -28; }
}
.gfx-sprawl .tile {
    fill: var(--cobalt);
    transform-box: fill-box; transform-origin: center;
    animation: sprawl-tile 3.6s ease-in-out infinite;
}
.gfx-sprawl .tile-tl { animation-delay: 0s; }
.gfx-sprawl .tile-tr { animation-delay: -.9s; }
.gfx-sprawl .tile-bl { animation-delay: -1.8s; }
.gfx-sprawl .tile-br { animation-delay: -2.7s; }
@keyframes sprawl-tile {
    0%, 100% { transform: translate(0,0) scale(1); }
    20%      { transform: translate(-2.2px,-2px) scale(1.12); }
    50%      { transform: translate(2.5px,2.2px) scale(.86); }
    75%      { transform: translate(-1.6px,1.6px) scale(1.08); }
}
.problem-card:hover .gfx-sprawl .tile { animation-duration: 1.0s; }
.problem-card:hover .gfx-sprawl .lnk { animation-duration: .7s; }

/* 2. ADMIN DRAG (clock) */
.gfx-drag .face   { fill: none; stroke: var(--cobalt); stroke-width: 1.8; }
.gfx-drag .face-2 { fill: none; stroke: var(--cobalt); stroke-width: 1; opacity: .25; }
.gfx-drag .tick    { stroke: var(--cobalt); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.gfx-drag .tick-mj { stroke-width: 2.4; opacity: 1; }
.gfx-drag .hand-m {
    stroke: var(--cobalt); stroke-width: 2.6; stroke-linecap: round;
    animation: drag-min 5.2s cubic-bezier(.72,.02,.34,1) infinite;
}
.gfx-drag .hand-h {
    stroke: var(--cobalt); stroke-width: 3.4; stroke-linecap: round;
    animation: drag-hr 5.2s cubic-bezier(.72,.02,.34,1) infinite;
}
.gfx-drag .hub { fill: var(--cobalt); }
@keyframes drag-min {
    0%   { transform: rotate(0deg); }
    8%   { transform: rotate(22deg); }
    20%  { transform: rotate(22deg); }
    24%  { transform: rotate(45deg); }
    36%  { transform: rotate(45deg); }
    62%  { transform: rotate(140deg); }
    72%  { transform: rotate(140deg); }
    100% { transform: rotate(360deg); }
}
@keyframes drag-hr {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(30deg); }
}
.gfx-drag .crumb {
    fill: var(--cobalt);
    animation: drag-crumb 5.2s cubic-bezier(.72,.02,.34,1) infinite;
}
.gfx-drag .crumb-1 { animation-delay: 0s; }
.gfx-drag .crumb-2 { animation-delay: -.18s; }
.gfx-drag .crumb-3 { animation-delay: -.36s; }
@keyframes drag-crumb {
    0%   { opacity: 0; transform: rotate(0deg) translateY(-26px); }
    10%  { opacity: 1; }
    62%  { opacity: 1; transform: rotate(140deg) translateY(-26px); }
    78%  { opacity: 0; transform: rotate(140deg) translateY(-30px); }
    100% { opacity: 0; transform: rotate(0deg) translateY(-26px); }
}
.problem-card:hover .gfx-drag .hand-m,
.problem-card:hover .gfx-drag .hand-h,
.problem-card:hover .gfx-drag .crumb { animation-duration: 1.9s; }

/* 3. GUT-FEEL DECISIONS */
.gfx-gut .silo {
    fill: var(--cobalt);
    transform-box: fill-box; transform-origin: center;
    animation: gut-pulse 2.2s ease-in-out infinite;
}
.gfx-gut .silo-a { animation-delay: 0s; }
.gfx-gut .silo-b { animation-delay: -.65s; }
.gfx-gut .silo-c { animation-delay: -1.3s; }
@keyframes gut-pulse {
    0%, 100% { opacity: .25; transform: scale(.7); }
    50%      { opacity: 1; transform: scale(1.25); }
}
.gfx-gut .silo-ring {
    fill: none; stroke: var(--cobalt); stroke-width: 1.2;
    transform-box: fill-box; transform-origin: center;
    opacity: 0;
    animation: gut-ring 2.2s ease-out infinite;
}
.gfx-gut .silo-ring.r-a { animation-delay: 0s; }
.gfx-gut .silo-ring.r-b { animation-delay: -.65s; }
.gfx-gut .silo-ring.r-c { animation-delay: -1.3s; }
@keyframes gut-ring {
    0%   { opacity: .55; transform: scale(.5); }
    100% { opacity: 0; transform: scale(3.0); }
}
.gfx-gut .guess {
    fill: none; stroke: var(--cobalt); stroke-width: 2;
    stroke-linecap: round;
    animation: gut-guess 3.2s ease-in-out infinite alternate;
    transform-box: view-box; transform-origin: 40px 18px;
}
@keyframes gut-guess {
    0%   { transform: translateY(0) skewX(-2deg); }
    50%  { transform: translateY(3px) skewX(2deg); }
    100% { transform: translateY(-2px) skewX(-3deg); }
}
.gfx-gut .guess-mark {
    fill: var(--cobalt);
    animation: gut-mark 3.2s ease-in-out infinite alternate;
}
@keyframes gut-mark {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(4px); }
    100% { transform: translateY(-3px); }
}
.problem-card:hover .gfx-gut .silo,
.problem-card:hover .gfx-gut .silo-ring { animation-duration: .9s; }
.problem-card:hover .gfx-gut .guess,
.problem-card:hover .gfx-gut .guess-mark { animation-duration: 1.0s; }

/* 4. NO CLEAR STARTING POINT (radar) */
.gfx-radar .ring     { fill: none; stroke: var(--cobalt); stroke-width: 1.3; opacity: .55; }
.gfx-radar .ring-out { opacity: .25; }
.gfx-radar .ring-mid { opacity: .35; }
.gfx-radar .axis {
    stroke: var(--cobalt); stroke-width: .8;
    stroke-dasharray: 2 3; opacity: .35;
}
.gfx-radar .sweep {
    animation: radar-sweep 3.4s cubic-bezier(.55,.05,.55,.95) infinite;
}
@keyframes radar-sweep {
    0%   { transform: rotate(-20deg); }
    28%  { transform: rotate(140deg); }
    38%  { transform: rotate(95deg); }
    46%  { transform: rotate(95deg); }
    72%  { transform: rotate(280deg); }
    100% { transform: rotate(340deg); }
}
.gfx-radar .target {
    fill: var(--cobalt);
    transform-box: fill-box; transform-origin: center;
    animation: radar-target 3.4s ease-in-out infinite;
}
.gfx-radar .target-ring {
    fill: none; stroke: var(--cobalt); stroke-width: 1.2;
    transform-box: fill-box; transform-origin: center;
    opacity: 0;
    animation: radar-target-ring 3.4s ease-out infinite;
}
.gfx-radar .t-1, .gfx-radar .tr-1 { animation-delay: -.2s; }
.gfx-radar .t-2, .gfx-radar .tr-2 { animation-delay: -1.1s; }
.gfx-radar .t-3, .gfx-radar .tr-3 { animation-delay: -2.3s; }
@keyframes radar-target {
    0%, 60%, 100% { opacity: .35; transform: scale(.7); }
    10%, 16%      { opacity: 1; transform: scale(1.35); }
    24%           { opacity: .35; transform: scale(.7); }
}
@keyframes radar-target-ring {
    0%   { opacity: 0; transform: scale(1); }
    10%  { opacity: .65; transform: scale(1); }
    35%  { opacity: 0; transform: scale(3); }
    100% { opacity: 0; transform: scale(3); }
}
.gfx-radar .core {
    fill: var(--cobalt);
    transform-box: fill-box; transform-origin: center;
    animation: radar-core 1.6s ease-in-out infinite;
}
@keyframes radar-core {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .45; transform: scale(.55); }
}
.problem-card:hover .gfx-radar .sweep,
.problem-card:hover .gfx-radar .target,
.problem-card:hover .gfx-radar .target-ring { animation-duration: 1.2s; }

/* ═══════════════════════════════════════════════════
   MOTION GRAPHICS — Section B (Three Systems)
   ═══════════════════════════════════════════════════ */

/* SVG rotations — 36×36 viewBox, center 18,18 */
.pillar-icon-frame .gfx [data-rot] {
    transform-box: view-box;
    transform-origin: 18px 18px;
}

/* 1. AI OPERATIONS — auto-populating doc */
.gfx-ops .frame {
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linejoin: round;
}
.gfx-ops .line {
    stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 14; stroke-dashoffset: 14;
    animation: ops-line 3.2s cubic-bezier(.7,.04,.34,1) infinite;
}
.gfx-ops .line-1 { --off: 14; animation-delay: 0s; }
.gfx-ops .line-2 { --off: 10; animation-delay: -.35s; stroke-dasharray: 10; stroke-dashoffset: 10; }
.gfx-ops .line-3 { --off: 12; animation-delay: -.7s; stroke-dasharray: 12; stroke-dashoffset: 12; }
.gfx-ops .line-4 { --off: 8; animation-delay: -1.05s; stroke-dasharray: 8; stroke-dashoffset: 8; }
@keyframes ops-line {
    0%   { stroke-dashoffset: var(--off, 14); opacity: .35; }
    20%  { stroke-dashoffset: 0; opacity: 1; }
    78%  { stroke-dashoffset: 0; opacity: 1; }
    88%  { opacity: 0; }
    100% { stroke-dashoffset: var(--off, 14); opacity: 0; }
}
.gfx-ops .check {
    stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 9; stroke-dashoffset: 9;
    animation: ops-check 3.2s ease-out infinite;
}
@keyframes ops-check {
    0%, 85%  { stroke-dashoffset: 9; opacity: 0; }
    90%      { stroke-dashoffset: 0; opacity: 1; }
    100%     { stroke-dashoffset: 0; opacity: 0; }
}
.pillar-card:hover .gfx-ops .line,
.pillar-card:hover .gfx-ops .check { animation-duration: 1.2s; }

/* 2. AI GROWTH — climbing line chart */
.gfx-growth .axis {
    stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; opacity: .35;
}
.gfx-growth .trend {
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: growth-draw 3.4s cubic-bezier(.55,.04,.4,1) infinite;
}
@keyframes growth-draw {
    0%   { stroke-dashoffset: 60; }
    55%  { stroke-dashoffset: 0; }
    80%  { stroke-dashoffset: 0; }
    90%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
.gfx-growth .ghost {
    fill: none; stroke: currentColor; stroke-width: 1; opacity: .2;
    stroke-dasharray: 2 3;
}
.gfx-growth .climber {
    fill: currentColor;
    animation: growth-climb 3.4s cubic-bezier(.55,.04,.4,1) infinite;
    transform-box: view-box;
}
@keyframes growth-climb {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 1; }
    55%  { transform: translate(20px, -22px); opacity: 1; }
    65%  { transform: translate(20px, -22px); }
    78%  { transform: translate(20px, -22px); }
    100% { transform: translate(20px, -22px); opacity: 0; }
}
.gfx-growth .pulse {
    fill: none; stroke: currentColor; stroke-width: 1.2;
    transform-box: view-box; transform-origin: 30px 8px;
    opacity: 0;
    animation: growth-pulse 3.4s ease-out infinite;
}
@keyframes growth-pulse {
    0%, 55% { opacity: 0; transform: scale(.5); }
    62%     { opacity: .8; transform: scale(1); }
    78%     { opacity: 0; transform: scale(2.4); }
    100%    { opacity: 0; transform: scale(2.4); }
}
.pillar-card:hover .gfx-growth .trend,
.pillar-card:hover .gfx-growth .climber,
.pillar-card:hover .gfx-growth .pulse { animation-duration: 1.4s; }

/* 3. AI DECISION — branching decision tree */
.gfx-dec .branch {
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
    opacity: .35;
    animation: dec-branch 4s ease-in-out infinite;
}
.gfx-dec .branch-1 { animation-delay: 0s; }
.gfx-dec .branch-2 { animation-delay: -1.3s; }
.gfx-dec .branch-3 { animation-delay: -2.6s; }
@keyframes dec-branch {
    0%, 100% { opacity: .35; stroke-width: 1.6; }
    8%, 18%  { opacity: 1; stroke-width: 2.2; }
    30%      { opacity: .35; stroke-width: 1.6; }
}
.gfx-dec .branch-3 { animation: dec-branch-select 4s ease-in-out infinite; }
@keyframes dec-branch-select {
    0%, 100%  { opacity: .35; stroke-width: 1.6; }
    65%, 70%  { opacity: 1; stroke-width: 2.4; }
    78%, 95%  { opacity: 1; stroke-width: 2.4; }
}
.gfx-dec .opt {
    fill: #fff; stroke: currentColor; stroke-width: 1.6;
    transform-box: fill-box; transform-origin: center;
    animation: dec-opt 4s ease-in-out infinite;
}
.gfx-dec .opt-1 { animation-delay: 0s; }
.gfx-dec .opt-2 { animation-delay: -1.3s; }
.gfx-dec .opt-3 { animation-delay: -2.6s; }
@keyframes dec-opt {
    0%, 100% { transform: scale(1); }
    10%      { transform: scale(1.35); }
    25%      { transform: scale(1); }
}
.gfx-dec .opt-3 { animation: dec-opt-select 4s ease-in-out infinite; }
@keyframes dec-opt-select {
    0%, 100%  { transform: scale(1); fill: #fff; }
    10%       { transform: scale(1.35); }
    25%       { transform: scale(1); }
    65%       { transform: scale(1.4); fill: currentColor; }
    78%, 95%  { transform: scale(1.15); fill: currentColor; }
}
.pillar-card--featured .gfx-dec .opt { fill: var(--cobalt); }
.pillar-card--featured .gfx-dec .opt-3 {
    animation: dec-opt-select-cobalt 4s ease-in-out infinite;
}
@keyframes dec-opt-select-cobalt {
    0%, 100%  { transform: scale(1); fill: var(--cobalt); }
    10%       { transform: scale(1.35); }
    25%       { transform: scale(1); fill: var(--cobalt); }
    65%       { transform: scale(1.4); fill: #fff; }
    78%, 95%  { transform: scale(1.15); fill: #fff; }
}
.gfx-dec .commit {
    fill: none; stroke: currentColor; stroke-width: 1.4;
    transform-box: fill-box; transform-origin: center;
    opacity: 0;
    animation: dec-commit 4s ease-out infinite;
}
@keyframes dec-commit {
    0%, 60%  { opacity: 0; transform: scale(.6); }
    68%      { opacity: .9; transform: scale(1.1); }
    85%      { opacity: 0; transform: scale(2.2); }
    100%     { opacity: 0; }
}
.gfx-dec .check-dec {
    fill: none; stroke: #fff; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 6; stroke-dashoffset: 6;
    animation: dec-check 4s ease-out infinite;
}
.pillar-card--featured .gfx-dec .check-dec { stroke: var(--cobalt); }
@keyframes dec-check {
    0%, 65%   { stroke-dashoffset: 6; opacity: 0; }
    72%       { stroke-dashoffset: 0; opacity: 1; }
    95%       { stroke-dashoffset: 0; opacity: 1; }
    100%      { stroke-dashoffset: 0; opacity: 0; }
}
.gfx-dec .root { fill: currentColor; }
.pillar-card:hover .gfx-dec .branch,
.pillar-card:hover .gfx-dec .branch-3,
.pillar-card:hover .gfx-dec .opt,
.pillar-card:hover .gfx-dec .opt-3,
.pillar-card:hover .gfx-dec .commit,
.pillar-card:hover .gfx-dec .check-dec { animation-duration: 1.6s; }

@media (prefers-reduced-motion: reduce) {
    .gfx * { animation: none !important; }
    .word { transform: none !important; }
    .anim-fade-up, .anim-fade-in, .anim-reveal, .anim-scale-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Small Tablet
   ═══════════════════════════════════════════════════ */
@media (max-width: 808px) {
    :root {
        --section-pad: 72px;
        --nav-height: 64px;
    }

    .nav-links, .nav-actions .nav-link--score { display: none; }
    .mobile-menu-btn { display: flex; }
    .mobile-menu { display: flex; }

    .pillars-grid { grid-template-columns: 1fr; max-width: 480px; }
    .audit-layout { grid-template-columns: 1fr; gap: 40px; }
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .contrast-grid { grid-template-columns: 1fr; }
    .scorecard-layout { grid-template-columns: 1fr; gap: 40px; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-links-grid { grid-template-columns: repeat(3, 1fr); }

    .hero .container.hero-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .hero-workflow { max-width: 680px; margin: 0 auto; }

    .problem, .pillars, .audit, .how-it-works,
    .industries, .why, .scorecard-teaser, .cta {
        min-height: auto;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
    :root {
        --section-pad: 56px;
    }

    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 48px);
        padding-bottom: 56px;
    }

    .hero-title { font-size: 2.2rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-proof { flex-direction: column; gap: 12px; }
    .hero-workflow { margin-top: 4px; }
    .wf-kicker, .wf-status-copy, .wf-footnote { display: none; }

    .problem-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; gap: 40px; }
    .industries-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .footer-links-grid { grid-template-columns: 1fr; gap: 24px; }

    .contrast-col { padding: 28px; }

    .score-roll-card { padding: 28px 26px 32px; }
    .sr-num-window { font-size: clamp(48px, 12vw, 64px); }

    .cta-actions { flex-direction: column; }
    .cta-actions .btn { width: 100%; justify-content: center; }

    .section-title { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-workflow *,
    .hero-workflow::before { animation: none !important; }
    .hero-workflow--illustrated .hero-illustration-stage { transform: none; }
    .hero-workflow--illustrated .hero-illustration-motion { opacity: 0; }
    .wf-route-active { stroke-dashoffset: 0; opacity: 0.8; }
    .wf-review-check { stroke-dashoffset: 0; opacity: 1; }
    .wf-output-line { transform: scaleX(1); opacity: 1; }
    .wf-output-badge { transform: none; opacity: 1; }
    .wf-packet { opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   HERO — supporting note (added 2026-07-09)
   ═══════════════════════════════════════════════════ */
.hero-note {
    font-size: 0.9375rem;
    color: var(--graphite);
    max-width: 560px;
    line-height: 1.65;
    margin: -16px 0 36px;
    padding-left: 16px;
    border-left: 2px solid var(--mist-dark);
}

/* ═══════════════════════════════════════════════════
   INTERNAL SYSTEMS WE'VE BUILT (CRM proof)
   Dark showcase so the light CRM screenshots pop.
   ═══════════════════════════════════════════════════ */
.systems {
    padding: var(--section-pad) 0;
    background: var(--charcoal);
    color: var(--white);
}
.systems .section-title { color: var(--white); }
.systems .section-sub { color: rgba(255, 249, 245, 0.68); }
.systems .text-accent { color: var(--cobalt-light); }
.systems .section-sub { margin-bottom: 48px; }

.systems-feature {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 56px;
}

/* Browser chrome mockup */
.browser-frame {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #11181e;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #1b242c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.browser-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.browser-url {
    margin-left: 12px;
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: rgba(255, 249, 245, 0.5);
}
.browser-frame img { width: 100%; display: block; }

.systems-stage { display: flex; flex-direction: column; }
#crm-feature-img {
    transition: opacity 0.25s var(--ease-out);
}
.systems-feature-caption {
    margin: 14px 2px 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 249, 245, 0.55);
}

.systems-caps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.systems-caps li {
    position: relative;
    padding-left: 26px;
    font-size: 0.95rem;
    color: rgba(255, 249, 245, 0.88);
    line-height: 1.4;
}
.systems-caps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cobalt-light);
    box-shadow: 0 0 0 4px rgba(74, 106, 255, 0.15);
}

/* Supporting screenshot gallery */
.systems-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.systems-shot {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #1b242c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s;
}
.systems-shot:hover {
    transform: translateY(-4px);
    border-color: rgba(74, 106, 255, 0.4);
}
.systems-shot:focus-visible {
    outline: 2px solid var(--cobalt-light);
    outline-offset: 2px;
}
.systems-shot.is-active {
    border-color: var(--cobalt-light);
    box-shadow: 0 0 0 1px var(--cobalt-light), 0 16px 34px -14px rgba(74, 106, 255, 0.55);
    cursor: default;
}
.systems-shot img {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.systems-shot-cap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 249, 245, 0.72);
}
.systems-shot-cap::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: background 0.3s;
}
.systems-shot.is-active .systems-shot-cap { color: #fff; }
.systems-shot.is-active .systems-shot-cap::before { background: var(--cobalt-light); }
.systems-cta { display: flex; }

/* ═══════════════════════════════════════════════════
   AUDIT — "It answers" label (added 2026-07-09)
   ═══════════════════════════════════════════════════ */
.audit-answers-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--graphite);
    margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════
   FOUNDER
   ═══════════════════════════════════════════════════ */
.founder {
    padding: var(--section-pad) 0;
    background: var(--mist);
}
.founder-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: center;
}
.founder-photo-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--mist-dark);
    box-shadow: 0 30px 70px -35px rgba(32, 43, 51, 0.5);
}
.founder-photo-frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.founder-photo-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(150deg, var(--mist-dark) 0%, var(--mist) 60%);
    color: var(--graphite);
    text-align: center;
}
.founder-photo-monogram {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--cobalt);
    line-height: 1;
}
.founder-photo-hint {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--graphite);
    opacity: 0.7;
    line-height: 1.5;
}
.founder-content .section-title { margin-bottom: 24px; }
.founder-text {
    font-size: 1.0125rem;
    color: var(--graphite);
    line-height: 1.75;
    margin-bottom: 18px;
    max-width: 620px;
}
.founder-email {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--cobalt);
    transition: color 0.25s;
}
.founder-email svg { width: 20px; height: 20px; }
.founder-email:hover { color: var(--cobalt-dark); }

/* ═══════════════════════════════════════════════════
   FOOTER — trust / privacy block (added 2026-07-09)
   ═══════════════════════════════════════════════════ */
.footer-trust {
    padding: 32px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.footer-trust-note,
.footer-privacy-note {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
}
.footer-privacy-note strong { color: rgba(255, 255, 255, 0.6); font-weight: 600; }
.footer-trust a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s;
}
.footer-trust a:hover { color: #fff; }

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    text-align: left;
}
.footer-copy-link {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.25s;
}
.footer-copy-link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE — new sections
   ═══════════════════════════════════════════════════ */
@media (max-width: 808px) {
    .systems-feature { grid-template-columns: 1fr; gap: 28px; }
    .founder-layout { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
    .founder-photo-frame { max-width: 380px; }
    .footer-trust { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
    .hero-note { margin-top: -8px; }
    .systems-gallery { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════════
   LEGAL PAGES (privacy policy)
   ═══════════════════════════════════════════════════ */
.legal-page { background: var(--white); }
.legal-hero {
    padding: calc(var(--nav-height) + 72px) 0 40px;
    border-bottom: 1px solid rgba(32, 43, 51, 0.08);
}
.legal-hero .section-label { margin-bottom: 12px; }
.legal-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    margin-bottom: 16px;
}
.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 0.875rem;
    color: var(--graphite);
}
.legal-meta span { display: inline-flex; gap: 6px; }
.legal-meta strong { color: var(--charcoal); font-weight: 600; }

.legal-body { padding: 56px 0 96px; }
.legal-doc { max-width: 820px; margin: 0 auto; }
.legal-intro {
    font-size: 1.0625rem;
    color: var(--graphite);
    line-height: 1.75;
    margin-bottom: 40px;
}
.legal-doc h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 40px 0 14px;
    padding-top: 16px;
    border-top: 1px solid rgba(32, 43, 51, 0.06);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc p {
    font-size: 0.975rem;
    color: var(--graphite);
    line-height: 1.75;
    margin-bottom: 14px;
}
.legal-doc ul {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.legal-doc li {
    position: relative;
    padding-left: 22px;
    font-size: 0.975rem;
    color: var(--graphite);
    line-height: 1.7;
    margin-bottom: 10px;
}
.legal-doc li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cobalt);
}
.legal-doc li strong,
.legal-doc p strong { color: var(--charcoal); font-weight: 600; }
.legal-doc a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc {
    background: var(--mist);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin-bottom: 40px;
}
.legal-toc h2 {
    border: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cobalt);
}
.legal-toc ol {
    columns: 2;
    column-gap: 32px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.9rem;
    color: var(--graphite);
    line-height: 1.9;
}
.legal-toc li { padding-left: 0; margin-bottom: 0; }
.legal-toc li::before { display: none; }
.legal-toc a { color: var(--graphite); text-decoration: none; }
.legal-toc a:hover { color: var(--cobalt); }
@media (max-width: 600px) {
    .legal-toc ol { columns: 1; }
}

/* ═══════════════════════════════════════════════════
   SYSTEMS SHOWCASE (rotating four-system card)
   Scoped additions only; nothing above is modified.
   ═══════════════════════════════════════════════════ */
.systems--compact { padding: 72px 0; }
.systems--compact .showcase-sub {
    font-size: 0.95rem;
    max-width: 560px;
    margin-bottom: 30px;
}

.showcase-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.showcase-tab {
    position: relative;
    padding: 9px 18px 11px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 249, 245, 0.62);
    background: #1b242c;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.showcase-tab:hover { color: rgba(255, 249, 245, 0.9); border-color: rgba(74, 106, 255, 0.4); }
.showcase-tab:focus-visible { outline: 2px solid var(--cobalt-light); outline-offset: 2px; }
.showcase-tab.is-active {
    color: #fff;
    background: rgba(36, 71, 255, 0.18);
    border-color: var(--cobalt-light);
}
.showcase-tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--cobalt-light);
    transform: scaleX(0);
    transform-origin: left;
}
.showcase-tab.is-active.progress-run::after {
    animation: showcaseProgress var(--showcase-interval, 6.5s) linear forwards;
}
#systems-showcase.is-paused .showcase-tab.is-active.progress-run::after {
    animation-play-state: paused;
}
@keyframes showcaseProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .showcase-tab.is-active.progress-run::after { animation: none; }
}

.showcase-slide { display: none; }
.showcase-slide.is-active { display: block; animation: showcaseFade 0.45s var(--ease-out); }
@keyframes showcaseFade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase-slide.is-active { animation: none; }
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 36px;
    align-items: center;
}
.showcase-stage .browser-frame img {
    width: 100%;
    display: block;
    max-height: 46vh;
    object-fit: cover;
    object-position: top;
}
.showcase-aside h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 10px;
}
.showcase-aside p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 249, 245, 0.68);
    margin: 0 0 16px;
}
.showcase-caps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.showcase-caps li {
    position: relative;
    padding-left: 24px;
    font-size: 0.88rem;
    color: rgba(255, 249, 245, 0.88);
    line-height: 1.4;
}
.showcase-caps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cobalt-light);
    box-shadow: 0 0 0 4px rgba(74, 106, 255, 0.15);
}

.showcase-how {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #1b242c;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
}
.how-step {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 249, 245, 0.78);
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    white-space: nowrap;
}
.how-step--ai { color: #c7d3ff; background: rgba(74, 106, 255, 0.14); border-color: rgba(74, 106, 255, 0.35); }
.how-step--human { color: #bff0d0; background: rgba(74, 200, 130, 0.12); border-color: rgba(74, 200, 130, 0.3); }
.how-arrow { color: rgba(255, 249, 245, 0.35); font-size: 0.8rem; }

@media (max-width: 900px) {
    .showcase-grid { grid-template-columns: 1fr; gap: 24px; }
    .showcase-stage .browser-frame img { max-height: none; }
    .systems--compact { padding: 64px 0; }
}

/* ── Showcase v2: pause control, CTA spacing, in-frame galleries ── */
.systems--compact .systems-cta { margin-top: 36px; }

.showcase-play {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(255, 249, 245, 0.7);
    background: #1b242c;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.3s, border-color 0.3s;
}
.showcase-play:hover { color: #fff; border-color: rgba(74, 106, 255, 0.5); }
.showcase-play:focus-visible { outline: 2px solid var(--cobalt-light); outline-offset: 2px; }
.showcase-play svg { width: 15px; height: 15px; }
.showcase-play .icon-play { display: none; }
.showcase-play.is-paused .icon-pause { display: none; }
.showcase-play.is-paused .icon-play { display: block; }

.showcase-stage { position: relative; }
.frame-track { display: flex; transition: transform 0.55s var(--ease-out); }
.showcase-stage .browser-frame .frame-track img { flex: 0 0 100%; width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .frame-track { transition: none; }
}

.frame-next {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: rgba(17, 24, 30, 0.82);
    border: 1px solid rgba(74, 106, 255, 0.55);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.frame-next:hover { background: rgba(36, 71, 255, 0.35); border-color: var(--cobalt-light); transform: translateY(-2px); }
.frame-next:focus-visible { outline: 2px solid var(--cobalt-light); outline-offset: 2px; }
.frame-next .frame-count {
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 249, 245, 0.65);
}

/* ═══════════════════════════════════════════════════
   HERO LOOP SEQUENCER (2026-07-17)
   Five illustrated scenes crossfade in a continuous
   diagnose → build → review → result loop.
   ═══════════════════════════════════════════════════ */
.hero-workflow--loop {
    --loop-step: 5s;
    --loop-total: 25s;
}

.loop-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.loop-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: loopScene var(--loop-total) var(--ease-out) infinite;
    animation-delay: calc(var(--i) * var(--loop-step));
    animation-play-state: paused;
    will-change: opacity, transform;
}

.loop-scene img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Each scene owns 0–22% of the 25s cycle (5.5s incl. handover):
   pop in with a small overshoot, subtle grow, pop out toward the viewer. */
@keyframes loopScene {
    0%    { opacity: 0; transform: translateX(80px) scale(0.95); }
    3.2%  { opacity: 1; }
    6%    { transform: translateX(0) scale(1); }
    19%   { opacity: 1; transform: translateX(0) scale(1); }
    21.5% { opacity: 0; transform: translateX(-84px) scale(0.96); }
    100%  { opacity: 0; transform: translateX(-84px) scale(0.96); }
}

.loop-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.loop-captions {
    position: relative;
    height: 36px;
    width: 100%;
}

.loop-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    opacity: 0;
    animation: loopCaption var(--loop-total) var(--ease-out) infinite;
    animation-delay: calc(var(--i) * var(--loop-step));
    animation-play-state: paused;
}

.loop-caption b {
    color: var(--cobalt);
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-optical-sizing: auto;
    font-size: 2.1em;
    font-weight: 600;
    margin-right: 11px;
    vertical-align: -0.1em;
}

@keyframes loopCaption {
    0%    { opacity: 0; transform: translateX(80px); }
    3.2%  { opacity: 1; }
    6%    { transform: translateX(0); }
    19%   { opacity: 1; transform: translateX(0); }
    21.5% { opacity: 0; transform: translateX(-84px); }
    100%  { opacity: 0; }
}

.hero-workflow.is-running .loop-scene,
.hero-workflow.is-running .loop-caption {
    animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
    .loop-scene, .loop-caption { animation: none !important; }
    .loop-scene--first, .loop-caption--first { opacity: 1; transform: none; }
}

/* ── Hero loop: per-scene motion overlays ── */
.loop-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Scene 1: CRT glow + connector pings */
.fx-crtglow {
    fill: #2447FF;
    opacity: 0.1;
    filter: blur(28px);
    animation: fxGlowPulse 3.2s ease-in-out infinite;
}
.fx-ping-core {
    fill: #2447FF;
    opacity: 0.45;
    filter: blur(2px);
    animation: fxCorePulse 3.6s ease-in-out infinite;
    animation-delay: calc(var(--p) * 0.9s);
}
.fx-ping-ring {
    fill: none;
    stroke: #2447FF;
    stroke-width: 5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fxPingRing 3.6s ease-out infinite;
    animation-delay: calc(var(--p) * 0.9s);
}
@keyframes fxGlowPulse {
    0%, 100% { opacity: 0.08; }
    50% { opacity: 0.26; }
}
@keyframes fxCorePulse {
    0%, 100% { opacity: 0.2; }
    12% { opacity: 0.7; }
    30% { opacity: 0.2; }
}
@keyframes fxPingRing {
    0% { opacity: 0.6; transform: scale(0.5); }
    45% { opacity: 0; transform: scale(3); }
    100% { opacity: 0; transform: scale(3); }
}

/* Scene 2: screen glow, scan sweep, probe spark */
.fx-scr-glow {
    fill: #2447FF;
    opacity: 0.1;
    filter: blur(30px);
    animation: fxGlowPulse 2.8s ease-in-out infinite;
}
.fx-scanline {
    fill: #4a6aff;
    opacity: 0;
    filter: blur(5px);
    animation: fxScan var(--loop-total) linear infinite;
    animation-delay: calc(var(--i) * var(--loop-step));
}
@keyframes fxScan {
    0%, 2.8% { transform: translateX(0); opacity: 0; }
    3.4%     { opacity: 0.55; }
    8.8%     { transform: translateX(286px); opacity: 0.55; }
    9.4%     { transform: translateX(286px); opacity: 0; }
    10.8%    { transform: translateX(0); opacity: 0; }
    11.4%    { opacity: 0.55; }
    16.8%    { transform: translateX(286px); opacity: 0.55; }
    17.4%, 100% { transform: translateX(286px); opacity: 0; }
}
.fx-probe {
    fill: #2447FF;
    filter: blur(3px);
    animation: fxCorePulse 2.2s ease-in-out infinite;
}

/* Scene 3: hub glow, traveling signal dots, port blinks */
.fx-hub-glow {
    fill: #2447FF;
    opacity: 0.08;
    filter: blur(32px);
    animation: fxGlowPulse 3.4s ease-in-out infinite;
}
.fx-dot circle {
    fill: #2447FF;
    filter: blur(3px);
}
.fx-dot {
    opacity: 0;
    animation: fxDotTravel 2.8s linear infinite;
    animation-delay: calc(var(--d) * 0.95s);
}
@keyframes fxDotTravel {
    0%   { offset-distance: 0%; opacity: 0; }
    12%  { opacity: 0.85; }
    82%  { opacity: 0.85; }
    100% { offset-distance: 100%; opacity: 0; }
}
.fx-port {
    fill: #2447FF;
    opacity: 0.15;
    filter: blur(2px);
    animation: fxCorePulse 2.85s ease-in-out infinite;
    animation-delay: calc(var(--p) * 0.95s);
}

/* Scene 4: dome pulse, sequential check reveals */
.fx-dome {
    fill: #2447FF;
    opacity: 0.1;
    filter: blur(34px);
    transform-box: fill-box;
    transform-origin: center;
    animation: fxDomeBreath 3.2s ease-in-out infinite;
}
@keyframes fxDomeBreath {
    0%, 100% { opacity: 0.09; transform: scale(1); }
    50%      { opacity: 0.3;  transform: scale(1.12); }
}
.fx-dome-core {
    fill: #4a6aff;
    opacity: 0.18;
    filter: blur(14px);
    transform-box: fill-box;
    transform-origin: center;
    animation: fxDomeCore 3.2s ease-in-out infinite;
}
@keyframes fxDomeCore {
    0%, 100% { opacity: 0.16; transform: scale(1); }
    50%      { opacity: 0.5;  transform: scale(1.08); }
}
.fx-dome-ring {
    fill: none;
    stroke: #2447FF;
    stroke-width: 6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fxDomeRing 3.2s ease-out infinite;
}
@keyframes fxDomeRing {
    0%, 44% { opacity: 0; transform: scale(0.72); }
    50%     { opacity: 0.45; }
    88%     { opacity: 0; transform: scale(1.75); }
    100%    { opacity: 0; transform: scale(1.75); }
}

/* Scene 5: beacon, rising gauge pulse, ribbon sheen */
.fx-beacon-core {
    fill: #2447FF;
    opacity: 0.35;
    filter: blur(6px);
    animation: fxCorePulse 2.4s ease-in-out infinite;
}
.fx-beacon-ring {
    fill: none;
    stroke: #2447FF;
    stroke-width: 5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fxPingRing 2.4s ease-out infinite;
}
.fx-rise circle {
    fill: #2447FF;
    filter: blur(4px);
}
.fx-rise {
    opacity: 0;
    animation: fxDotTravel 2.6s ease-in-out infinite;
}
.fx-tip {
    fill: #2447FF;
    filter: blur(3px);
    animation: fxCorePulse 2.6s ease-in-out infinite;
    animation-delay: 1.1s;
}
.fx-sheen {
    filter: blur(12px);
    animation: fxSheen 3.8s ease-in-out infinite;
}
@keyframes fxSheen {
    0%   { transform: translateX(0); opacity: 0; }
    15%  { opacity: 0.5; }
    70%  { opacity: 0.5; }
    100% { transform: translateX(880px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .loop-fx { display: none; }
}

/* CRT flicker (scene 1) and live waveform (scene 2) */
.fx-crtflicker {
    fill: #4a6aff;
    opacity: 0;
    filter: blur(18px);
    animation: fxFlicker 1.15s linear infinite;
}
@keyframes fxFlicker {
    0%   { opacity: 0.05; }
    9%   { opacity: 0.14; }
    18%  { opacity: 0.06; }
    31%  { opacity: 0.16; }
    42%  { opacity: 0.08; }
    55%  { opacity: 0.18; }
    66%  { opacity: 0.07; }
    78%  { opacity: 0.15; }
    89%  { opacity: 0.05; }
    100% { opacity: 0.05; }
}
.fx-wave {
    fill: none;
    stroke: #dfe9ff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 0.1 0.07;
    filter: blur(1.5px);
    opacity: 0.55;
    animation: fxWaveFlow 1.3s linear infinite;
}
@keyframes fxWaveFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -0.34; }
}

/* Pause every overlay with the loop (kept last so animation shorthands above cannot override) */
.loop-fx * { animation-play-state: paused; }
.hero-workflow.is-running .loop-fx * { animation-play-state: running; }

/* ═══════════════════════════════════════════════════
   INDUSTRIES (verticals) + OFFERS (2026-07-18)
   ═══════════════════════════════════════════════════ */
.verticals { padding: var(--section-pad) 0; }

.verticals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 56px;
}

.vertical-card {
    background: #fff;
    border: 1px solid var(--mist-dark);
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    display: flex;
    flex-direction: column;
}

.vertical-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(32, 43, 51, 0.09);
}

.vertical-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.vertical-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--mist);
    color: var(--cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vertical-icon svg { width: 26px; height: 26px; }

.vertical-head h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--charcoal);
}

.vertical-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.vertical-col h4 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 10px;
}
.vertical-col--build h4 { color: var(--cobalt); }

.vertical-col ul { list-style: none; }
.vertical-col li {
    position: relative;
    padding-left: 16px;
    font-size: 0.895rem;
    line-height: 1.45;
    color: var(--graphite);
    margin-bottom: 9px;
}
.vertical-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 6px;
    height: 2px;
    border-radius: 1px;
    background: var(--coral);
}
.vertical-col--build li { color: var(--charcoal); }
.vertical-col--build li::before { background: var(--cobalt); }

.vertical-line {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--graphite);
}
.vertical-col--build .vertical-line { color: var(--charcoal); }

.vertical-proof {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cobalt);
    text-decoration: none;
    border-bottom: 1px solid rgba(36, 71, 255, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.2s;
}
.vertical-proof:hover { border-color: var(--cobalt); }

.vertical-card--general {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--charcoal), #2a3945);
    border-color: var(--charcoal);
}
.vertical-card--general .vertical-head h3 { color: #fff; }
.vertical-card--general .vertical-icon {
    background: rgba(36, 71, 255, 0.35);
    color: #a9bbff;
}
.vertical-card--general .vertical-general-text {
    color: rgba(255, 249, 245, 0.82);
}
.vertical-card--general .vertical-col h4 { color: var(--coral); }
.vertical-card--general .vertical-col--build h4 { color: #a9bbff; }
.vertical-card--general .vertical-line { color: rgba(255, 249, 245, 0.85); }
.vertical-card--general .vertical-col--build .vertical-line { color: #fff; }
.vertical-card--general .vertical-col li { color: rgba(255, 249, 245, 0.82); }
.vertical-card--general .vertical-col--build li { color: #fff; }
.vertical-card--general .vertical-col--build li::before { background: #a9bbff; }
.vertical-card--general .vertical-proof {
    color: #a9bbff;
    border-color: rgba(169, 187, 255, 0.4);
}
.vertical-card--general .vertical-proof:hover { border-color: #a9bbff; }

.vertical-card--cta {
    background: var(--cobalt);
    border-color: var(--cobalt);
    color: #fff;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
}
.vertical-cta-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.vertical-cta-text {
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.85;
    max-width: 380px;
}
.vertical-card--cta .btn--light {
    background: #fff;
    color: var(--cobalt);
    border: none;
}
.vertical-card--cta .btn--light:hover {
    background: var(--mist);
}

.founder-linkedin { margin-top: 10px; display: inline-flex; }

.vertical-proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 18px;
}
.vertical-proofs .vertical-proof { margin-top: 0; }
.vertical-general-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--graphite);
    margin-bottom: 18px;
}
.vertical-general-list { list-style: none; }
.vertical-general-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.895rem;
    color: var(--charcoal);
    font-weight: 500;
    margin-bottom: 8px;
}
.vertical-general-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--cobalt);
    font-weight: 700;
}

/* ── Offers ── */
.offers { padding: var(--section-pad) 0; background: #fff; }

.offers-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1fr;
    gap: 40px;
    margin-top: 64px;
    align-items: stretch;
}

.offer-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--mist-dark);
    border-radius: var(--radius-lg);
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
}

.offer-card--featured {
    border: 2px solid var(--cobalt);
    box-shadow: 0 24px 56px rgba(36, 71, 255, 0.13);
}

.offer-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--cobalt);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 100px;
}

.offer-tag--ghost {
    background: #fff;
    color: var(--cobalt);
    border: 1.5px solid var(--cobalt);
}

.offer-step {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-optical-sizing: auto;
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--cobalt);
    line-height: 1;
    margin-bottom: 10px;
}

.offer-title {
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    margin-bottom: 6px;
}

.offer-role {
    font-size: 0.95rem;
    color: var(--graphite);
    margin-bottom: 20px;
}

.offer-list { list-style: none; margin-bottom: 22px; }
.offer-list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.91rem;
    line-height: 1.5;
    color: var(--charcoal);
    margin-bottom: 10px;
}
.offer-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--cobalt);
    font-weight: 700;
}

.offer-phases {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.offer-phases span {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--graphite);
    background: var(--mist);
    border-radius: 100px;
    padding: 4px 10px;
}

.offer-price {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--mist);
    font-size: 0.92rem;
    color: var(--graphite);
}
.offer-price strong { color: var(--charcoal); font-size: 1.05rem; font-weight: 700; }
.offer-guarantee {
    display: inline-block;
    background: var(--coral);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 100px;
    white-space: nowrap;
}

/* flow arrows between the cards */
.offers-grid .offer-card:nth-child(-n+2)::after {
    content: '\2192';
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--cobalt);
    opacity: 0.65;
    z-index: 2;
}

.offers-cta { text-align: center; margin-top: 52px; }

@media (max-width: 1024px) {
    .verticals-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
    .offers-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; gap: 36px; }
    .offers-grid .offer-card:nth-child(-n+2)::after {
        right: 50%;
        top: auto;
        bottom: -30px;
        transform: translateX(50%) rotate(90deg);
    }
}

@media (max-width: 600px) {
    .vertical-cols { grid-template-columns: 1fr; gap: 18px; }
    .vertical-card { padding: 24px 22px; }
    .offer-card { padding: 28px 24px; }
}

/* ── Social icons + tools strip (2026-07-19) ── */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--mist);
    color: var(--cobalt);
    transition: background 0.25s, color 0.25s, transform 0.25s;
}
.social-icon svg { width: 19px; height: 19px; }
.social-icon:hover {
    background: var(--cobalt);
    color: #fff;
    transform: translateY(-2px);
}
.social-icon--footer {
    background: rgba(255, 249, 245, 0.1);
    color: rgba(255, 249, 245, 0.75);
    margin-top: 6px;
}
.social-icon--footer:hover { background: var(--cobalt); color: #fff; }

.founder-content .social-icon { margin-top: 14px; }

.tools-strip {
    padding: 56px 0 64px;
    border-top: 1px solid var(--mist-dark);
    overflow: hidden;
}
.tools-strip-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--graphite);
    opacity: 0.7;
    margin-bottom: 34px;
}
.tools-marquee {
    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);
}
.tools-track {
    display: flex;
    width: max-content;
    animation: toolsScroll 55s linear infinite;
}
.tools-marquee:hover .tools-track { animation-play-state: paused; }
.tools-set {
    display: flex;
    align-items: center;
    gap: 56px;
    padding-right: 56px;
}
.tool-mark {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--graphite);
    opacity: 0.55;
    white-space: nowrap;
    transition: opacity 0.25s, color 0.25s;
}
.tool-mark:hover { opacity: 1; color: var(--charcoal); }
@keyframes toolsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tools-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .tools-set[aria-hidden="true"] { display: none; }
    .tools-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ── Coral emphasis inside accent lines ── */
.accent-pop {
    color: var(--coral);
    font-style: inherit;
}

/* ── Tools strip inside the hero ── */
.tools-strip--hero {
    position: relative;
    z-index: 2;
    width: 100%;
    border-top: none;
    margin-top: auto;
    padding: 56px 0 0;
}
.tools-strip--hero .tools-strip-label {
    font-size: 0.7rem;
    margin-bottom: 20px;
    opacity: 0.55;
}
.tool-mark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.tool-mark img {
    width: 17px;
    height: 17px;
    opacity: 0.8;
}
.tools-strip--hero .tool-mark { font-size: 0.95rem; }