/* ═══════════════════════════════════════════════════════════════
   AVENTRA SECURITY — style.css
   Design system: "ops room meets engagement report"
   Dark technical bookends (hero / process / CTA / footer)
   framing a light, editorial report body.
   Type: Bricolage Grotesque (display) · Instrument Sans (body)
         · JetBrains Mono (technical voice)
   ═══════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

:root {
    /* Brand accent */
    --crimson: #8B2635;
    --crimson-deep: #6B1C28;
    --crimson-bright: #C94357;   /* accent on dark surfaces */
    --crimson-soft: rgba(139, 38, 53, 0.07);
    --crimson-line: rgba(139, 38, 53, 0.22);

    /* Light "report" surfaces */
    --paper: #FAF7F5;
    --paper-alt: #F3EEEB;
    --card: #FFFFFF;
    --ink: #1C1418;
    --ink-body: #4D4349;
    --ink-muted: #6E646A;
    --line: rgba(28, 20, 24, 0.10);
    --line-strong: rgba(28, 20, 24, 0.20);

    /* Dark "ops" surfaces */
    --night: #120C0F;
    --night-raised: #1C1418;
    --night-card: #211a1e;
    --night-line: rgba(255, 255, 255, 0.10);
    --night-line-strong: rgba(255, 255, 255, 0.18);
    --night-text: #F5F0F1;
    --night-body: #B9AEB3;
    --night-muted: #8A7F85;

    /* Severity scale */
    --sev-critical: #DC2626;
    --sev-high: #EA580C;
    --sev-medium: #D97706;
    --sev-low: #2563EB;
    --ok: #16A34A;
    --ok-bright: #4ADE80;

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Instrument Sans', sans-serif;
    --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

    /* Geometry */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(28, 20, 24, 0.05), 0 2px 8px rgba(28, 20, 24, 0.04);
    --shadow-md: 0 2px 4px rgba(28, 20, 24, 0.05), 0 12px 32px rgba(28, 20, 24, 0.09);
    --shadow-crimson: 0 8px 28px rgba(139, 38, 53, 0.28);

    --nav-h: 72px;

    /* Depth of the gradient ramp where dark zones blend into light sections */
    --zone-fade: 150px;
    /* Hero gets a longer, later ramp; footer a shorter one */
    --hero-fade: 230px;
    --footer-fade: 110px;

    /* Intermediate blend tones for eased (smoothstep) dark/light ramps */
    --blend-85: color-mix(in srgb, var(--night) 85%, var(--paper));
    --blend-50: color-mix(in srgb, var(--night) 50%, var(--paper));
    --blend-15: color-mix(in srgb, var(--night) 15%, var(--paper));
}

::selection { background: var(--crimson); color: #fff; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; }

/* ── Typography scale ─────────────────────────────────────────── */

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; line-height: 1.1; }
h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }

p { color: var(--ink-body); font-size: 1rem; line-height: 1.7; }

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Mono technical voice — labels, tags, indices */
.mono-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--crimson-bright);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ═══ DARK SECTION SCAFFOLD ═══════════════════════════════════ */

.dark-zone {
    background: var(--night);
    color: var(--night-text);
    position: relative;
    isolation: isolate;
}

/* Blueprint grid — fades vertically in sync with the zone's background ramp */
.dark-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--grid-line, rgba(255, 255, 255, 0.045)) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line, rgba(255, 255, 255, 0.045)) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0,
        black var(--grid-fade-top, calc(var(--zone-fade) * 1.2)),
        black calc(100% - var(--grid-fade-bottom, calc(var(--zone-fade) * 1.2))),
        transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0,
        black var(--grid-fade-top, calc(var(--zone-fade) * 1.2)),
        black calc(100% - var(--grid-fade-bottom, calc(var(--zone-fade) * 1.2))),
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

/* Hero touches the top of the page — keep its grid solid at the top edge */
.hero { --grid-fade-top: 0px; }

/* Film grain */
.dark-zone::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

.dark-zone p { color: var(--night-body); }
.dark-zone h2, .dark-zone h3, .dark-zone h4 { color: var(--night-text); }

/* ═══ NAVIGATION ══════════════════════════════════════════════ */

nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease, height 0.35s ease;
}

nav .container { width: 100%; }

/* Over dark hero (default at load) */
nav.on-dark {
    --nav-text: var(--night-text);
    --nav-link: var(--night-body);
}
/* Over light content */
nav:not(.on-dark) {
    --nav-text: var(--ink);
    --nav-link: var(--ink-body);
}

nav.scrolled { height: 60px; }
nav.scrolled.on-dark {
    background: rgba(18, 12, 15, 0.85);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--night-line);
}
nav.scrolled:not(.on-dark) {
    background: rgba(250, 247, 245, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

/* Scroll progress hairline */
.nav-progress {
    position: absolute;
    bottom: -1px; left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    transform-origin: left;
    transform: scaleX(0);
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--nav-text);
    text-decoration: none;
    transition: color 0.35s ease;
}
.logo span { color: var(--crimson-bright); }
nav:not(.on-dark) .logo span { color: var(--crimson); }
.logo-img { width: 42px; height: 42px; object-fit: contain; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    list-style: none;
}

.nav-links a:not(.nav-cta) {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-link);
    text-decoration: none;
    padding: 0.25rem 0;
    position: relative;
    transition: color 0.25s;
}
.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: var(--crimson-bright);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}
.nav-links a:not(.nav-cta):hover { color: var(--nav-text); }
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }

/* Scroll-spy: link for the section currently in view stays lit */
.nav-links a.is-current { color: var(--nav-text); }
.nav-links a.is-current::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--crimson);
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.nav-cta:hover {
    background: var(--crimson-bright);
    transform: translateY(-1px);
    box-shadow: var(--shadow-crimson);
}

/* Mobile toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nav-text);
    padding: 0.5rem;
    z-index: 1102;
}
.mobile-toggle svg { width: 26px; height: 26px; }
.mobile-toggle .icon-close { display: none; }

/* Mobile overlay menu */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(18, 12, 15, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    padding: calc(var(--nav-h) + 2rem) 2rem 2.5rem;
    flex-direction: column;
    overflow-y: auto;
}
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-menu li { border-bottom: 1px solid var(--night-line); }
.mobile-menu a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 0.25rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--night-text);
    text-decoration: none;
    opacity: 0;
    transform: translateY(14px);
    transition: color 0.25s;
}
.mobile-menu a:hover { color: var(--crimson-bright); }
.mobile-menu .menu-index {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--crimson-bright);
    letter-spacing: 0.1em;
}
.mobile-menu .mobile-menu-cta {
    margin-top: 2rem;
    justify-content: center;
    background: var(--crimson);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    padding: 1.1rem;
    text-align: center;
}
.mobile-menu .mobile-menu-contact {
    margin-top: auto;
    padding-top: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--night-muted);
    text-transform: uppercase;
}
.mobile-menu .mobile-menu-contact a {
    display: inline;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--crimson-bright);
    opacity: 1;
    transform: none;
}

body.nav-open { overflow: hidden; }
body.nav-open .mobile-menu { display: flex; }
body.nav-open .mobile-menu a { opacity: 1; transform: translateY(0); }
body.nav-open .mobile-menu li a { transition: opacity 0.4s ease, transform 0.4s ease, color 0.25s; }
body.nav-open .mobile-menu li:nth-child(1) a { transition-delay: 0.05s; }
body.nav-open .mobile-menu li:nth-child(2) a { transition-delay: 0.1s; }
body.nav-open .mobile-menu li:nth-child(3) a { transition-delay: 0.15s; }
body.nav-open .mobile-menu li:nth-child(4) a { transition-delay: 0.2s; }
body.nav-open .mobile-menu li:nth-child(5) a { transition-delay: 0.25s; }
body.nav-open .mobile-menu li:nth-child(6) a { transition-delay: 0.3s; }
body.nav-open .mobile-menu li:nth-child(7) a { transition-delay: 0.35s; }
body.nav-open .mobile-toggle .icon-open { display: none; }
body.nav-open .mobile-toggle .icon-close { display: block; }
body.nav-open .mobile-toggle { color: var(--night-text); }

/* ── Nav dropdown (Free Tools) — CSS-only: hover + focus-within ── */

.nav-drop { position: relative; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 0.4rem; }
.drop-caret { width: 11px; height: 11px; transition: transform 0.25s ease; }
.nav-drop:hover > a .drop-caret,
.nav-drop:focus-within > a .drop-caret { transform: rotate(180deg); }

.nav-drop-panel {
    position: absolute;
    top: 100%; left: 50%;
    transform: translate(-50%, 8px);
    padding-top: 14px; /* hover bridge across the gap below the link */
    min-width: 245px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 20;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-drop-inner {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.45rem;
    display: grid;
    gap: 2px;
}
nav.on-dark .nav-drop-inner {
    background: var(--night-card);
    border-color: var(--night-line-strong);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Panel rows: reset the mono/uppercase/underline treatment of top-level links */
.nav-links .nav-drop-inner a {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-links .nav-drop-inner a::after { display: none; }
.nav-links .nav-drop-inner a:hover { background: var(--crimson-soft); color: var(--crimson); }
nav.on-dark .nav-links .nav-drop-inner a { color: var(--night-text); }
nav.on-dark .nav-links .nav-drop-inner a:hover { background: rgba(201, 67, 87, 0.14); color: var(--crimson-bright); }

.drop-sub {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
nav.on-dark .drop-sub { color: var(--night-muted); }

/* ═══ BUTTONS ═════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.9rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn svg { width: 17px; height: 17px; transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
    background: var(--crimson);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 18px rgba(139, 38, 53, 0.3);
}
.btn-primary:hover {
    background: var(--crimson-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-crimson);
}

.btn-ghost-dark {
    background: rgba(255, 255, 255, 0.04);
    color: var(--night-text);
    border-color: var(--night-line-strong);
}
.btn-ghost-dark:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
}

.btn-ghost-light {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-ghost-light:hover {
    border-color: var(--crimson);
    color: var(--crimson);
    transform: translateY(-2px);
}

.btn-white {
    background: #fff;
    color: var(--crimson);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.3); }

/* ═══ HERO ════════════════════════════════════════════════════ */

.hero {
    padding: calc(var(--nav-h) + 4.5rem) 0 calc(2.5rem + var(--hero-fade) * 0.6);
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    --grid-line: rgba(255, 255, 255, 0.05);
    --grid-fade-bottom: calc(var(--hero-fade) * 1.05);
    /* solid night at top; eased ramp stays dark long, then rolls into paper */
    background: linear-gradient(180deg,
        var(--night) 0%,
        var(--night) calc(100% - var(--hero-fade)),
        var(--blend-85) calc(100% - var(--hero-fade) * 0.72),
        var(--blend-50) calc(100% - var(--hero-fade) * 0.45),
        var(--blend-15) calc(100% - var(--hero-fade) * 0.2),
        var(--paper) 100%);
}

/* crimson atmosphere */
.hero .hero-glow {
    position: absolute;
    top: -20%; right: -12%;
    width: 780px; height: 780px;
    background: radial-gradient(circle, rgba(139, 38, 53, 0.32) 0%, rgba(139, 38, 53, 0.08) 42%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.hero .hero-glow-2 {
    position: absolute;
    bottom: -30%; left: -14%;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(139, 38, 53, 0.16) 0%, transparent 62%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 4rem;
    align-items: center;
}
.hero-content, .hero-visual { min-width: 0; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--night-line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--night-body);
    margin-bottom: 1.8rem;
}
.hero-badge .badge-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ok-bright);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
    animation: statusPulse 2.2s ease-in-out infinite;
}

.hero h1 { color: var(--night-text); margin-bottom: 1.4rem; }
.hero h1 .accent {
    color: var(--crimson-bright);
    position: relative;
    white-space: nowrap;
}
.hero h1 .accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0.04em;
    width: 100%; height: 0.09em;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineDraw 0.9s cubic-bezier(0.6, 0, 0.2, 1) 1s forwards;
}
@keyframes underlineDraw { to { transform: scaleX(1); } }

.hero-description {
    font-size: 1.14rem;
    color: var(--night-body);
    max-width: 500px;
    margin-bottom: 2.4rem;
}

.hero-actions { display: flex; gap: 0.9rem; margin-bottom: 3rem; flex-wrap: wrap; }

/* trust strip */
.hero-stats {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--night-line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
    width: fit-content;
    overflow: hidden;
}
.hero-stat { padding: 0.8rem 1.4rem; }
.hero-stat + .hero-stat { border-left: 1px solid var(--night-line); }
.hero-stat-value {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--night-text);
    white-space: nowrap;
}
.hero-stat-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--night-muted);
    margin-top: 0.2rem;
}

/* Load-in choreography */
.hero-badge, .hero h1, .hero-description, .hero-actions, .hero-stats {
    animation: heroRise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero h1 { animation-delay: 0.08s; }
.hero-description { animation-delay: 0.16s; }
.hero-actions { animation-delay: 0.24s; }
.hero-stats { animation-delay: 0.32s; }
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Terminal set piece ─────────────────────────────────────── */

.hero-visual {
    position: relative;
    z-index: 1;
    animation: heroRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}

.terminal {
    background: #171013;
    border: 1px solid var(--night-line-strong);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 64px rgba(0, 0, 0, 0.55),
        0 0 90px rgba(139, 38, 53, 0.18);
    overflow: hidden;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.035);
    border-bottom: 1px solid var(--night-line);
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.term-dot:nth-child(1) { background: #E5564B; }
.term-dot:nth-child(2) { background: #E0A33E; }
.term-dot:nth-child(3) { background: #58B75C; }
.terminal-title {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--night-muted);
}
.terminal-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--ok-bright);
}
.terminal-live .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ok-bright);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
    animation: statusPulse 1.6s ease-in-out infinite;
}
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.terminal-body {
    padding: 1.15rem 1.2rem 1.3rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.9;
    min-height: 254px;
    color: var(--night-body);
}
.terminal-body .t-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terminal-body .t-prompt { color: var(--crimson-bright); font-weight: 700; }
.terminal-body .t-cmd { color: var(--night-text); font-weight: 500; }
.terminal-body .t-flag { color: var(--night-muted); }
.terminal-body .t-plus { color: var(--ok-bright); font-weight: 700; }
.terminal-body .t-ok { color: var(--ok-bright); }
.terminal-body .t-dim { color: var(--night-muted); }
.terminal-body .t-path { color: #D9A6AE; }

.t-sev {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.05rem 0.45rem;
    border-radius: 3px;
    margin-right: 0.45rem;
    vertical-align: 1px;
}
.t-sev.critical { background: rgba(220, 38, 38, 0.18); color: #F87171; border: 1px solid rgba(248, 113, 113, 0.35); }
.t-sev.high { background: rgba(234, 88, 12, 0.16); color: #FB923C; border: 1px solid rgba(251, 146, 60, 0.35); }
.t-sev.medium { background: rgba(217, 119, 6, 0.15); color: #FBBF24; border: 1px solid rgba(251, 191, 36, 0.32); }

.t-cursor {
    display: inline-block;
    width: 8px; height: 15px;
    background: var(--crimson-bright);
    vertical-align: -2px;
    animation: cursorBlink 1s steps(1) infinite;
}
@keyframes cursorBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* status bar under terminal body — live counters */
.terminal-statusbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--night-line);
    background: rgba(255, 255, 255, 0.025);
}
.term-stat { padding: 0.85rem 1.1rem; text-align: center; }
.term-stat + .term-stat { border-left: 1px solid var(--night-line); }
.term-stat-value {
    font-family: var(--font-mono);
    font-size: 1.28rem;
    font-weight: 700;
    color: var(--night-text);
    letter-spacing: -0.01em;
}
.term-stat-value .unit { font-size: 0.75rem; color: var(--night-muted); font-weight: 500; }
.term-stat-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--night-muted);
    margin-top: 0.15rem;
}

.hero-compliance {
    margin-top: 1.1rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--night-muted);
}
.hero-compliance b { color: var(--night-body); font-weight: 600; }

/* ═══ SECTION SCAFFOLD (light body) ═══════════════════════════ */

section { position: relative; }

.section { padding: 6.5rem 0; }
.section-alt { background: var(--paper-alt); }

/* Editorial section header: kicker rule + split title/lede */
.section-head {
    border-top: 1px solid var(--line-strong);
    padding-top: 1.4rem;
    margin-bottom: 3.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem 4rem;
    align-items: end;
    position: relative;
}
.section-head::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 64px; height: 3px;
    background: var(--crimson);
}
.section-kicker {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crimson);
}
.section-head h2 { max-width: 560px; }
.section-lede {
    font-size: 1.02rem;
    color: var(--ink-muted);
    max-width: 420px;
    justify-self: end;
    padding-bottom: 0.35rem;
}

.dark-zone .section-head { border-top-color: var(--night-line-strong); }
.dark-zone .section-kicker { color: var(--crimson-bright); }
.dark-zone .section-lede { color: var(--night-muted); }

/* ═══ WHAT YOU GET — feature grid ═════════════════════════════ */

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.feature-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.8rem 1.7rem 1.7rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.feature-card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--crimson), var(--crimson-bright));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--crimson-line);
}
.feature-card:hover::after { transform: scaleY(1); }

.feature-index {
    position: absolute;
    top: 1.3rem; right: 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    opacity: 0.55;
}

.feature-icon {
    width: 46px; height: 46px;
    border: 1px solid var(--crimson-line);
    background: var(--crimson-soft);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.15rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.feature-icon svg { width: 21px; height: 21px; color: var(--crimson); transition: color 0.3s ease; }
.feature-card:hover .feature-icon { background: var(--crimson); border-color: var(--crimson); }
.feature-card:hover .feature-icon svg { color: #fff; }

.feature-card h4 { margin-bottom: 0.45rem; font-weight: 600; }
.feature-card p { font-size: 0.92rem; color: var(--ink-muted); line-height: 1.65; }

/* ═══ ENGAGEMENT MODELS ═══════════════════════════════════════ */

.models-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

.model-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.7rem 1.8rem;
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.model-card:hover {
    transform: translateY(-3px);
    border-color: var(--crimson-line);
    box-shadow: var(--shadow-md);
}
.model-index {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--crimson);
    border: 1px solid var(--crimson-line);
    background: var(--crimson-soft);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.model-card h4 { margin-bottom: 0.35rem; font-weight: 600; }
.model-card p { font-size: 0.92rem; color: var(--ink-muted); }

/* ═══ SERVICES — master/detail tabs ═══════════════════════════ */

.services-shell {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}

.services-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
}

.service-tab {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.05rem;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-body);
    cursor: pointer;
    position: relative;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.service-tab .tab-index {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    transition: color 0.25s ease;
}
.service-tab::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    border-radius: 2px;
    background: var(--crimson);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.service-tab:hover { background: rgba(28, 20, 24, 0.04); color: var(--ink); }
.service-tab.is-active {
    background: var(--card);
    border-color: var(--line);
    color: var(--ink);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
.service-tab.is-active::before { transform: scaleY(1); }
.service-tab.is-active .tab-index { color: var(--crimson); }

.services-panels {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

.service-panel { padding: 2.6rem 2.8rem; display: none; }
.service-panel.is-active { display: block; animation: panelIn 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes panelIn {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.service-panel .panel-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: 0.8rem;
}
.service-panel h3 { font-size: 1.6rem; margin-bottom: 0.8rem; }
.service-panel > p { margin-bottom: 1.5rem; max-width: 60ch; }

.service-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.8rem; }
.service-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 0.32rem 0.7rem;
    background: var(--crimson-soft);
    color: var(--crimson);
    border: 1px solid var(--crimson-line);
    border-radius: 4px;
}

.service-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1.8rem;
}
.service-meta-item { padding: 1.15rem 1.3rem; background: var(--paper); }
.service-meta-item + .service-meta-item { border-left: 1px solid var(--line); }
.service-meta-item h5 {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--crimson);
    margin-bottom: 0.4rem;
}
.service-meta-item p { font-size: 0.86rem; color: var(--ink-body); line-height: 1.55; }

.panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crimson);
    text-decoration: none;
}
.panel-cta svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.panel-cta:hover svg { transform: translateX(4px); }

/* ═══ PROCESS — dark scroll-linked timeline ═══════════════════ */

.process-zone {
    padding: calc(5.5rem + var(--zone-fade) * 0.55) 0 calc(6rem + var(--zone-fade) * 0.55);
    background: linear-gradient(180deg,
        var(--paper) 0%, var(--night) var(--zone-fade),
        var(--night) calc(100% - var(--zone-fade)), var(--paper) 100%);
}

.process-track { position: relative; margin-top: 1rem; }

.process-rail {
    position: absolute;
    top: 23px; left: 0; right: 0;
    height: 2px;
    background: var(--night-line);
    border-radius: 1px;
    overflow: hidden;
}
.process-rail-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    box-shadow: 0 0 14px rgba(201, 67, 87, 0.55);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.15s linear;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
    list-style: none;
    counter-reset: step;
}
.process-step { position: relative; padding-top: 0; }
.step-node {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--night-line-strong);
    background: var(--night-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--night-muted);
    margin-bottom: 1.3rem;
    position: relative;
    z-index: 1;
    transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.process-step.lit .step-node {
    border-color: var(--crimson-bright);
    color: #fff;
    background: var(--crimson);
    box-shadow: 0 0 22px rgba(201, 67, 87, 0.45);
}
.process-step h4 { font-size: 1rem; margin-bottom: 0.4rem; color: var(--night-text); transition: color 0.4s ease; }
.process-step p { font-size: 0.86rem; color: var(--night-muted); line-height: 1.6; }
.process-step.lit p { color: var(--night-body); }

.process-note {
    margin-top: 3.4rem;
    padding: 1.2rem 1.5rem;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--night-line);
    border-left: 3px solid var(--crimson-bright);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--night-body);
    line-height: 1.65;
}
.process-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--crimson-bright); margin-top: 0.1rem; }
.process-note strong { color: var(--night-text); font-weight: 600; }

/* ═══ CASE STUDIES — field report cards ═══════════════════════ */

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.case-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.case-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--crimson-line);
}

.case-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
}
.case-id {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--crimson-bright);
}
.case-industry {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--night-muted);
    text-align: right;
}

.case-body { padding: 1.6rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.case-card h3 { font-size: 1.15rem; margin-bottom: 1.2rem; line-height: 1.3; }

.case-block { margin-bottom: 1.1rem; }
.case-block h4 {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    margin-bottom: 0.35rem;
}
.case-block p { font-size: 0.88rem; color: var(--ink-body); line-height: 1.6; }

.case-sev { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.sev-chip {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.5rem;
    border-radius: 3px;
}
.sev-chip.critical { background: rgba(220, 38, 38, 0.09); color: var(--sev-critical); border: 1px solid rgba(220, 38, 38, 0.28); }
.sev-chip.high { background: rgba(234, 88, 12, 0.09); color: var(--sev-high); border: 1px solid rgba(234, 88, 12, 0.28); }
.sev-chip.medium { background: rgba(217, 119, 6, 0.09); color: #B45309; border: 1px solid rgba(217, 119, 6, 0.3); }

.case-result {
    margin-top: auto;
    margin-bottom: 0;
    padding: 1rem 1.1rem;
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: var(--radius-sm);
}
.case-result h4 { color: var(--ok); display: flex; align-items: center; gap: 0.4rem; }
.case-result h4 svg { width: 12px; height: 12px; }
.case-result p { font-size: 0.86rem; }

/* ═══ ABOUT ═══════════════════════════════════════════════════ */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
}

.about-aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.about-aside h2 { margin-bottom: 1.4rem; }
.about-aside .about-principle {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    padding-left: 1.2rem;
    border-left: 3px solid var(--crimson);
    margin-bottom: 2.2rem;
}

.cert-heading {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.9rem;
}
.cert-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cert-badge:hover {
    border-color: var(--crimson);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.cert-badge svg { width: 15px; height: 15px; color: var(--crimson); }

.about-body p { margin-bottom: 1.3rem; font-size: 1.02rem; }
.about-body p:last-child { margin-bottom: 0; }
.about-body .about-lead {
    font-size: 1.18rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.6;
}

/* ═══ FAQ ═════════════════════════════════════════════════════ */

.faq-list { max-width: 780px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--line); transition: background 0.25s ease; }
.faq-item:first-child { border-top: 1px solid var(--line); }

.faq-question {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding: 1.35rem 0.4rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.25s ease;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--crimson); }

.faq-index {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--crimson);
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.faq-question .faq-toggle {
    margin-left: auto;
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke: var(--ink-muted);
    align-self: center;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), stroke 0.25s ease;
}
.faq-item.expanded .faq-toggle { transform: rotate(45deg); stroke: var(--crimson); }

/* Height is animated by JS (measured px -> auto); wrapper stays padding-free
   so height: 0 fully collapses it. */
.faq-answer {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.faq-item.expanded .faq-answer { opacity: 1; }
.faq-answer-body {
    padding: 0.1rem 0.4rem 1.4rem 2.5rem;
    color: var(--ink-body);
    font-size: 0.95rem;
    line-height: 1.7;
}
.faq-answer-body a {
    color: var(--crimson);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.faq-answer-body a:hover { color: var(--crimson-bright); }

/* No-JS fallback: native details behavior, no animation */
html:not(.js-ready) .faq-item[open] .faq-answer { height: auto; opacity: 1; }
html:not(.js-ready) .faq-item[open] .faq-toggle { transform: rotate(45deg); stroke: var(--crimson); }

/* ═══ CTA BAND ════════════════════════════════════════════════ */

.cta-band {
    /* short band -> proportionally short ramps, or the blend reads as fog */
    --cta-fade: 90px;
    padding: calc(5.5rem + var(--cta-fade)) 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg,
        var(--paper) 0%,
        var(--blend-15) calc(var(--cta-fade) * 0.28),
        var(--blend-50) calc(var(--cta-fade) * 0.55),
        var(--blend-85) calc(var(--cta-fade) * 0.8),
        var(--night) var(--cta-fade),
        var(--night) calc(100% - var(--cta-fade)),
        var(--blend-85) calc(100% - var(--cta-fade) * 0.8),
        var(--blend-50) calc(100% - var(--cta-fade) * 0.55),
        var(--blend-15) calc(100% - var(--cta-fade) * 0.28),
        var(--paper) 100%);
}
.cta-band::before { --grid-fade-top: var(--cta-fade); --grid-fade-bottom: var(--cta-fade); }
.cta-band .cta-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 900px; height: 500px;
    background: radial-gradient(ellipse, rgba(139, 38, 53, 0.3) 0%, transparent 62%);
    /* keep the crimson glow inside the solid-night middle, off the ramps */
    -webkit-mask-image: linear-gradient(180deg, transparent 4%, black 34%, black 66%, transparent 96%);
    mask-image: linear-gradient(180deg, transparent 4%, black 34%, black 66%, transparent 96%);
    pointer-events: none;
    z-index: 0;
}
.cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.1rem; }
.cta-band .cta-sub {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    color: var(--night-body);
    margin-bottom: 2.6rem;
}
.cta-band .cta-sub .t-prompt { color: var(--crimson-bright); font-weight: 700; }
.cta-band .cta-sub .t-flag { color: var(--night-muted); }

/* ═══ CONSULTATION ════════════════════════════════════════════ */

.consultation-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: start;
}

/* Section header lives inside the left column so the scheduler
   sits level with the heading */
.consult-head {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 2.4rem;
}
.consult-head .section-lede { justify-self: start; padding-bottom: 0; }

.consultation-info h3 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.consultation-info > p { margin-bottom: 1.6rem; max-width: 44ch; }

.consult-features { list-style: none; margin-bottom: 2.2rem; }
.consult-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.55rem 0;
    font-size: 0.96rem;
    color: var(--ink-body);
}
.consult-features .check {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--crimson-soft);
    border: 1px solid var(--crimson-line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}
.consult-features .check svg { width: 11px; height: 11px; stroke: var(--crimson); }

.consult-email-label { font-size: 0.92rem; color: var(--ink-muted); margin-bottom: 0.4rem; }
.consult-email {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--crimson);
    text-decoration: none;
    border-bottom: 1px solid var(--crimson-line);
    padding-bottom: 2px;
    transition: border-color 0.25s ease;
}
.consult-email:hover { border-color: var(--crimson); }
.consult-email svg { width: 16px; height: 16px; }

/* Calendly framed as a window */
.calendly-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.calendly-titlebar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.1rem;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
}
.calendly-titlebar .term-dot { width: 10px; height: 10px; }
.calendly-titlebar span:last-child {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--night-muted);
}
.calendly-card .calendly-inline-widget { min-width: 320px; height: 700px; }

/* ═══ CONTACT FORM ════════════════════════════════════════════ */

.contact-wrapper { max-width: 680px; margin: 0 auto; }

.contact-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.6rem 2.6rem 2.2rem;
    box-shadow: var(--shadow-sm);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.form-group { margin-bottom: 1.15rem; }
.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.form-group label .req { color: var(--crimson); }

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
}
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236E646A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.6rem;
    cursor: pointer;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-color: var(--crimson);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(139, 38, 53, 0.12);
}
.form-group textarea { min-height: 120px; resize: vertical; }

.form-submit { width: 100%; margin-top: 0.6rem; }

.form-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.8rem;
    margin-top: 1.3rem;
}
.form-trust-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}
.form-trust-item svg { width: 14px; height: 14px; color: var(--crimson); flex-shrink: 0; }

.form-success {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--card);
    border: 1px solid rgba(22, 163, 74, 0.3);
    border-radius: var(--radius-lg);
}
.form-success .success-icon {
    width: 52px; height: 52px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-success .success-icon svg { width: 24px; height: 24px; stroke: var(--ok); }
.form-success h3 { margin-bottom: 0.5rem; }

/* ═══ FOOTER ══════════════════════════════════════════════════ */

footer {
    /* blends up into the contact section (paper-alt) above; content starts
       only after the ramp has fully reached solid night */
    background: linear-gradient(180deg, var(--paper-alt) 0%, var(--night) var(--footer-fade), var(--night) 100%);
    color: var(--night-text);
    padding: calc(2.75rem + var(--footer-fade)) 0 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.045;
    pointer-events: none;
    z-index: -1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 3rem;
    padding-bottom: 3.5rem;
}

.footer-brand .logo { margin-bottom: 1.1rem; color: var(--night-text); }
.footer-brand > p { color: var(--night-body); font-size: 0.92rem; max-width: 280px; margin-bottom: 1.5rem; }

.social-links { display: flex; gap: 0.6rem; }
.social-links a {
    width: 38px; height: 38px;
    border: 1px solid var(--night-line);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.social-links a:hover { background: var(--crimson); border-color: var(--crimson); transform: translateY(-2px); }
.social-links svg { width: 15px; height: 15px; fill: var(--night-body); transition: fill 0.25s ease; }
.social-links a:hover svg { fill: #fff; }

.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--night-muted);
    margin-bottom: 1.2rem;
}
.footer-col a {
    display: block;
    color: var(--night-body);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.65rem;
    transition: color 0.25s ease, transform 0.25s ease;
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-col p { color: var(--night-body); font-size: 0.9rem; margin-bottom: 0.65rem; }
.footer-col .footer-mono { font-family: var(--font-mono); font-size: 0.8rem; }

.footer-bottom {
    border-top: 1px solid var(--night-line);
    padding: 1.6rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer-bottom p {
    color: var(--night-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.footer-legal { display: flex; gap: 1.6rem; }
.footer-legal a {
    color: var(--night-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}
.footer-legal a:hover { color: var(--night-text); }

/* Giant watermark */
.footer-watermark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(4rem, 14vw, 12.5rem);
    line-height: 0.78;
    letter-spacing: -0.04em;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
    user-select: none;
    pointer-events: none;
    margin-top: 1rem;
    transform: translateY(0.16em);
}

/* ═══ CURSOR SPOTLIGHT (cards) ════════════════════════════════ */

.feature-card, .model-card, .case-card { position: relative; }
.feature-card::before, .model-card::before, .case-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
        rgba(139, 38, 53, 0.075), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.feature-card:hover::before, .model-card:hover::before, .case-card:hover::before { opacity: 1; }

/* ═══ SCROLL REVEAL SYSTEM ════════════════════════════════════ */

.js-ready .reveal,
.js-ready .reveal-left,
.js-ready .reveal-right {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-ready .reveal { transform: translateY(28px); }
.js-ready .reveal-left { transform: translateX(-28px); }
.js-ready .reveal-right { transform: translateX(28px); }
.js-ready .reveal.visible,
.js-ready .reveal-left.visible,
.js-ready .reveal-right.visible { opacity: 1; transform: translate(0, 0); }

.js-ready .stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-ready .stagger.visible > * { opacity: 1; transform: translateY(0); }
.js-ready .stagger.visible > *:nth-child(1) { transition-delay: 0.04s; }
.js-ready .stagger.visible > *:nth-child(2) { transition-delay: 0.09s; }
.js-ready .stagger.visible > *:nth-child(3) { transition-delay: 0.14s; }
.js-ready .stagger.visible > *:nth-child(4) { transition-delay: 0.19s; }
.js-ready .stagger.visible > *:nth-child(5) { transition-delay: 0.24s; }
.js-ready .stagger.visible > *:nth-child(6) { transition-delay: 0.29s; }
.js-ready .stagger.visible > *:nth-child(7) { transition-delay: 0.34s; }
.js-ready .stagger.visible > *:nth-child(8) { transition-delay: 0.39s; }

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .nav-links { display: none; }
    .mobile-toggle { display: block; }

    .hero { padding: calc(var(--nav-h) + 3rem) 0 4rem; min-height: 0; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
    .hero-content { text-align: center; }
    .hero-badge { margin-left: auto; margin-right: auto; }
    .hero-description { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-stats { margin: 0 auto; }
    .hero-visual { max-width: 640px; margin: 0 auto; width: 100%; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }

    .services-shell { grid-template-columns: 1fr; }
    .services-tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        gap: 0.45rem;
        padding-bottom: 0.6rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .services-tabs::-webkit-scrollbar { display: none; }
    .service-tab {
        white-space: nowrap;
        width: auto;
        flex-shrink: 0;
        border: 1px solid var(--line);
        background: var(--card);
        padding: 0.6rem 1rem;
    }
    .service-tab::before { display: none; }
    .service-tab.is-active { background: var(--crimson); color: #fff; border-color: var(--crimson); }
    .service-tab.is-active .tab-index { color: rgba(255, 255, 255, 0.7); }
    .services-panels { min-height: 0; }
    .service-panel { padding: 2rem 1.6rem; }

    .process-steps { grid-template-columns: repeat(2, 1fr) ; gap: 2rem 1.4rem; }
    .process-rail { display: none; }

    .cases-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }

    .about-grid { grid-template-columns: 1fr; gap: 2.6rem; }
    .about-aside { position: static; }

    .consultation-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    :root { --zone-fade: 90px; --hero-fade: 130px; --footer-fade: 70px; }

    .section { padding: 4.5rem 0; }
    .process-zone { padding: calc(2.5rem + var(--zone-fade)) 0; }

    .container { padding: 0 1.4rem; }

    .section-head { grid-template-columns: 1fr; gap: 0.9rem; margin-bottom: 2.6rem; }
    .section-lede { justify-self: start; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { flex-direction: column; width: 100%; }
    .hero-stat + .hero-stat { border-left: none; border-top: 1px solid var(--night-line); }
    .hero-stat { display: flex; justify-content: space-between; align-items: center; text-align: left; }
    .hero-stat-label { margin-top: 0; }

    .terminal-body { font-size: 0.68rem; min-height: 0; }
    .terminal-statusbar { grid-template-columns: 1fr; }
    .term-stat + .term-stat { border-left: none; border-top: 1px solid var(--night-line); }
    .term-stat { display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 0.7rem 1.1rem; }
    .term-stat-label { margin-top: 0; }

    .features-grid { grid-template-columns: 1fr; }
    .models-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; gap: 1.8rem; }
    .service-meta-row { grid-template-columns: 1fr; }
    .service-meta-item + .service-meta-item { border-left: none; border-top: 1px solid var(--line); }
    .form-row { grid-template-columns: 1fr; gap: 0; }

    .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .cta-band { --cta-fade: 60px; padding: calc(3rem + var(--cta-fade)) 0; }
}

@media (max-width: 420px) {
    h1 { font-size: 2.15rem; }
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js-ready .reveal, .js-ready .reveal-left, .js-ready .reveal-right,
    .js-ready .stagger > * { opacity: 1; transform: none; }
    .process-rail-fill { transform: scaleX(1); }
    .hero h1 .accent::after { transform: scaleX(1); }
}

/* ═══ PERFORMANCE HINTS ═══════════════════════════════════════ */

main > section { content-visibility: auto; contain-intrinsic-size: auto 720px; }
main > section:first-of-type { content-visibility: visible; }