/* ==========================================================================
   JL TECH SOLUTIONS - Corporate Design System
   --------------------------------------------------------------------------
   Locks (change in one place or not at all):
     THEME LOCK    one light theme, no mid-page inversion
     COLOR LOCK    one accent (--color-primary). Status hues are semantic only.
     SHAPE LOCK    one radius scale (--radius-sm/md/lg), no ad-hoc values.
     MOTION LOCK   one easing + duration vocabulary (--ease-*, --dur-*).
   ========================================================================== */

/* 1. TOKENS */
:root {
    /* Neutrals - one temperature (cool, slate-rooted). No warm/cool mixing. */
    --color-bg: #ffffff;
    --color-bg-alt: #f6f8fb;
    --color-bg-surface: #ffffff;
    --color-bg-surface-hover: #f1f5f9;
    --color-bg-dark: #0b1220;
    --color-border: #e4e9f0;
    --color-border-light: #f1f5f9;

    /* The single accent. Everything interactive or emphasised uses this. */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #dbeafe;

    /* Semantic status only - never decorative. */
    --color-accent: #16a34a;
    --color-alert: #dc2626;
    --color-warning: #f59e0b;
    --color-accent-text: #15803d;
    --color-alert-text: #b91c1c;
    --color-warning-text: #b45309;

    --color-text: #101828;
    --color-text-muted: #5a6b84;
    --color-text-light: #8b9bb4;
    --color-text-on-dark: #f6f8fb;

    /* Layout */
    --max-width: 1200px;
    --shell: clamp(20px, 5vw, 72px);

    /* SHAPE LOCK - 3 steps, documented. Nothing outside this set. */
    --radius-sm: 8px;    /* inputs, small chips */
    --radius-md: 14px;   /* cards, panels */
    --radius-lg: 22px;   /* large surfaces, the hero asset */
    --radius-pill: 999px;

    /* Shadows tinted to the background hue (slate), never pure black. */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.10), 0 4px 12px rgba(16, 24, 40, 0.05);
    --shadow-xl: 0 32px 72px rgba(16, 24, 40, 0.14);

    /* MOTION LOCK */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-press: 140ms;
    --dur-ui: 200ms;
    --dur-surface: 320ms;

    /* Type */
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Lighter tint of the SAME accent hue - used for the two-stop gradient.
       Not a second accent: same hue, different lightness. */
    --color-primary-soft: #60a5fa;

    /* Legacy aliases folded onto the locked vocabulary so older rules cannot
       drift onto their own curves or a fourth radius step. */
    --transition-fast: all var(--dur-ui) var(--ease-out);
    --transition: all var(--dur-surface) var(--ease-out);
    --radius-xl: var(--radius-lg);
    --color-secondary: var(--color-primary-soft);
}

/* 2. BASE RESET */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    /* Viewport stability: dvh, never 100vh */
    min-height: 100dvh;
}

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* The grain is a texture overlay: fixed, pointer-events-none, aria-hidden.
   Never applied to a scrolling container. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background-image: url('assets/grain.png');
    background-repeat: repeat;
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* 2b. BACKGROUND FIELD (aurora + grid)
   Fixed, behind content. Sections opt in by staying transparent. */
.bg-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.fx-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(38% 44% at 18% 22%, rgba(37, 99, 235, 0.16) 0%, transparent 62%),
        radial-gradient(34% 40% at 82% 12%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
        radial-gradient(42% 46% at 62% 88%, rgba(37, 99, 235, 0.10) 0%, transparent 64%);
    filter: blur(28px);
}

@keyframes auroraDrift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
    50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
    100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

.fx-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(16, 24, 40, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 24, 40, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
}

/* content sits above the field */
.main-header, main, .main-footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
    .fx-aurora { animation: auroraDrift 34s var(--ease-in-out) infinite alternate; }
    .hero-aurora { animation: auroraDrift 30s var(--ease-in-out) infinite alternate; }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    body { background: #fff; color: #000; }
    .main-header, .bg-fx, .skip-link { display: none; }
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* 3. REUSABLE
   Section headers stack vertically. No split-header (big-left / small-right). */
.section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(72px, 9vw, 132px) var(--shell);
}

.section-header {
    max-width: 660px;
    margin-bottom: clamp(40px, 5vw, 64px);
}

.section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.65rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    color: var(--color-text);
    margin-bottom: 14px;
    line-height: 1.12;
    text-wrap: balance;
}

.section-description {
    max-width: 62ch;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.2vw, 1.075rem);
    line-height: 1.65;
}

.accent-text { color: var(--color-primary); }

/* Buttons */
.btn-primary, .btn-secondary, .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 550;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
    border: none;
    white-space: nowrap;
    will-change: transform;
}

/* Tactile press: a physical push, not a colour blink. */
.btn-primary:active, .btn-secondary:active, .btn-outline:active,
.btn-submit-ticket:active, .btn-panel-action:active {
    transform: scale(0.975);
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37,99,235,0.3);
}
.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}
.btn-secondary:hover { filter: brightness(0.95); }

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
}
.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* 4. HEADER */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--dur-surface) var(--ease-out), background-color var(--dur-surface) var(--ease-out);
    overflow: visible;
}

.main-header.scrolled {
    box-shadow: var(--shadow-sm);
    background: rgba(255, 255, 255, 0.86);
}

/* Scroll progress: replaces the banned window scroll listener. */
.scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.scroll-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    /* Scaled from 0 by ScrollTrigger. Width must be real for scaleX to show. */
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft));
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-logo, .footer-logo {
    width: auto;
    object-fit: contain;
}

.nav-logo {
    height: 44px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.footer-logo {
    height: 120px;
}

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

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color var(--dur-ui) var(--ease-out);
    padding-bottom: 2px;
}
.nav-link:hover { color: var(--color-text); }

/* Active-section indicator, driven by IntersectionObserver in motion.js. */
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1.5px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur-surface) var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-current { color: var(--color-text); }
.nav-link.is-current::after { transform: scaleX(1); }

.nav-link.btn-secondary {
    padding: 12px 24px;
    font-size: 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--color-primary-dark);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 110;
}
.hamburger-bar {
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: var(--transition-fast);
}

/* 5. HERO - single column, left-aligned with asymmetric whitespace.
   Deliberately not centred: a centred hero is the default the design bar bans
   above variance 4. The animated field carries the right-hand weight. */
.hero-section {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 132px var(--shell) 88px;
    overflow: hidden;
    background: transparent;
}

/* Hero background: a receding perspective grid. Pure CSS 3D, so the hero has no
   canvas and no rAF loop at all. The mask biases the grid to the right of the
   frame, keeping the single-column hero asymmetric and the copy area clean. */
.hero-tunnel {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    perspective: 300px;
    perspective-origin: 64% 44%;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.30) 32%, #000 74%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.30) 32%, #000 74%);
}

.tunnel-plane {
    position: absolute;
    left: -70%;
    right: -70%;
    top: 44%;
    bottom: -110%;
    transform: rotateX(73deg);
    transform-origin: 50% 0;
    background-image:
        linear-gradient(to right, rgba(37, 99, 235, 0.40) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37, 99, 235, 0.40) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 44%, #000 100%);
}

.tunnel-horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 34%;
    height: 42%;
    background: linear-gradient(to bottom, rgba(37, 99, 235, 0.30), rgba(37, 99, 235, 0));
    filter: blur(26px);
}

@media (prefers-reduced-motion: no-preference) {
    .tunnel-plane { animation: tunnelRun 3.4s linear infinite; }
}
@keyframes tunnelRun {
    from { background-position: 0 0; }
    to   { background-position: 0 78px; }
}

.hero-aurora {
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 120%;
    background:
        radial-gradient(42% 46% at 14% 30%, rgba(37, 99, 235, 0.20) 0%, transparent 64%),
        radial-gradient(36% 42% at 88% 8%, rgba(14, 165, 233, 0.14) 0%, transparent 62%);
    filter: blur(34px);
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(16, 24, 40, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 24, 40, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 70% at 72% 42%, #000 0%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 72% 42%, #000 0%, transparent 76%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.hero-copy { max-width: 760px; }

/* Semantic status dot (real state, not decoration). */
.pulse-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    animation: pulse 2.4s var(--ease-in-out) infinite;
}

/* Eyebrow: sentence case, not an uppercase tracked micro-label. */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    background: rgba(219, 234, 254, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.18);
    padding: 7px 15px;
    border-radius: var(--radius-pill);
    margin-bottom: 26px;
    backdrop-filter: blur(6px);
}

.hero-title {
    font-size: clamp(2.35rem, 5.4vw, 4.15rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin-bottom: 22px;
    color: var(--color-text);
    text-wrap: balance;
}

.gradient-text {
    background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    color: var(--color-text-muted);
    margin-bottom: 34px;
    line-height: 1.62;
    max-width: 52ch;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Quiet, non-button secondary action. */
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text);
    padding: 12px 6px;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.btn-link:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn-link svg { transition: transform var(--dur-ui) var(--ease-out); }
.btn-link:hover svg { transform: translateX(3px); }

/* 6. WHO WE SERVE */
.verticals-section {
    background: transparent;
}

/* 6b. INDUSTRIES - tall stacking cards.
   Same sticky mechanism as the services stack, deliberately different scale and
   internal composition so the two adjacent stacks do not read as one template
   applied twice. Industry hues stay confined to the icon tile: the page keeps a
   single accent, and these are the existing semantic tints. */
.verticals-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vertical-row {
    position: sticky;
    top: calc(92px + var(--row-i) * 8px);
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 24px 56px;
    align-items: start;
    min-height: 0;
    padding: 34px 40px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: border-color var(--dur-ui) var(--ease-out);
}
.vertical-row:hover { border-color: #c7d2e4; }

/* Number on its own line, then icon and title side by side. A fully stacked head
   made the column ~140px tall against a two-line description, which left the
   card looking half empty. */
.vertical-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 18px;
}

.vertical-num {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.vertical-icon {
    grid-column: 1;
    width: 62px;
    height: 62px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vertical-icon svg { width: 28px; height: 28px; }

.vertical-icon.health { background: #fef2f2; color: #dc2626; }
.vertical-icon.restaurant { background: #fff7ed; color: #ea580c; }
.vertical-icon.government { background: #f0fdf4; color: #16a34a; }
.vertical-icon.smb { background: #eff6ff; color: #2563eb; }
.vertical-icon.enterprise { background: #f5f3ff; color: #7c3aed; }

.vertical-head h3 {
    grid-column: 2;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.024em;
    line-height: 1.15;
    color: var(--color-text);
    text-wrap: balance;
}

.vertical-body {
    font-size: clamp(0.95rem, 1.15vw, 1.06rem);
    line-height: 1.65;
    color: var(--color-text-muted);
    max-width: 58ch;
}

/* 7. SERVICES - sticky scroll stack. Each row pins and the next covers it.
   CSS-only: the stack still reads as an ordered list with JS or motion off. */
.services-section {
    background: var(--color-bg-alt);
}

.services-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.service-row {
    position: sticky;
    top: calc(92px + var(--row-i) * 9px);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 22px 26px;
    align-items: start;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 26px 30px;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: border-color var(--dur-ui) var(--ease-out);
}
.service-row:hover { border-color: #c7d2e4; }

.service-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    padding-top: 14px;
    min-width: 22px;
}

.service-icon {
    width: 46px;
    height: 46px;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}
.service-icon svg { width: 22px; height: 22px; }

.service-text h3 {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 7px;
    color: var(--color-text);
}

.service-text p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 68ch;
    margin-bottom: 14px;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.service-tags li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px 11px;
}

.service-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--color-primary-dark);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}
.service-open:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.service-open:active { transform: scale(0.97); }
.service-open svg { transition: transform var(--dur-ui) var(--ease-out); }
.service-open:hover svg { transform: translateX(3px); }

/* 8. MODALS */
.spec-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}
.spec-modal.active { display: flex; }

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: min(85vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    opacity: 0;
    transition: var(--transition-fast);
}
.spec-modal.active .modal-content {
    transform: scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    transition: var(--transition-fast);
}
.modal-close:hover { background: var(--color-alert); color: #fff; border-color: var(--color-alert); }

.modal-body { padding: 40px; overflow-y: auto; min-height: 0; }

.modal-badge {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-text);
}

.modal-lead {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.modal-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.modal-list li {
    padding-left: 24px;
    position: relative;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.5;
}
.modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}
.modal-list li strong {
    color: var(--color-text);
}

/* 9. AI CO-WORKER SECTION */
.ai-section {
    background: var(--color-bg);
}

.ai-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.ai-step {
    text-align: left;
    padding: 4px 0;
}

.ai-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.ai-step h3 {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    color: var(--color-text);
}

.ai-step p {
    font-size: 0.89rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* The connector is drawn (DrawSVG) as the section enters view. */
.ai-link {
    align-self: center;
    color: var(--color-primary);
    padding-top: 10px;
}
.ai-link svg {
    display: block;
    width: 64px;
    height: 28px;
    overflow: visible;
}

.ai-trust-bar {
    margin-top: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    color: var(--color-primary-dark);
    font-weight: 600;
}
.trust-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* 10. HOW WE WORK */
.engagement-section {
    background: var(--color-bg-alt);
}

.engage-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
}

.engage-row {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 210px;
    gap: 32px 44px;
    align-items: start;
    padding: 44px 0;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

/* Directional hover fill: enters from the side the pointer came from.
   --fill-x is set on pointerenter in app.js. */
.engage-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(219, 234, 254, 0.55), rgba(219, 234, 254, 0.15));
    transform: scaleX(0);
    transform-origin: var(--fill-x, 0%) 50%;
    transition: transform var(--dur-surface) var(--ease-out);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .engage-row:hover::before { transform: scaleX(1); }
}

.engage-aside {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.engage-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.engagement-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    flex-shrink: 0;
}
.engagement-icon svg { width: 24px; height: 24px; }

.engage-body { position: relative; }

.engage-body h3 {
    font-size: clamp(1.15rem, 1.9vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--color-text);
}

.engage-body p {
    font-size: 0.94rem;
    color: var(--color-text-muted);
    line-height: 1.62;
    max-width: 62ch;
}

.engage-price {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 10px;
}
.engage-price span {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.engagement-features {
    margin-top: 18px;
    display: grid;
    gap: 9px;
}
.engagement-features li {
    position: relative;
    padding-left: 22px;
    font-size: 0.87rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.engagement-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 11px;
    height: 6px;
    border-left: 1.5px solid var(--color-primary);
    border-bottom: 1.5px solid var(--color-primary);
    transform: rotate(-45deg);
}

.engage-action {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

/* The featured model is emphasised by weight and rhythm, not by being the
   middle card of three identical ones. */
.engage-row--featured {
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.42), rgba(219, 234, 254, 0.12));
    border-radius: var(--radius-lg);
    border-bottom-color: transparent;
    padding-left: 28px;
    padding-right: 28px;
    margin-bottom: 12px;
}
.engage-row--featured .engagement-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mirrored row: breaks the uniform three-across rhythm.
   Explicit column placement, not `order` - order reorders paint but leaves
   auto-placement intact, which squeezed the body into the 190px aside track. */
.engage-row--mirror {
    grid-template-columns: 190px minmax(0, 1fr) 210px;
}
.engage-row--mirror .engage-action { grid-column: 1; justify-content: flex-start; }
.engage-row--mirror .engage-body { grid-column: 2; }
.engage-row--mirror .engage-aside { grid-column: 3; justify-content: flex-end; }

.dashboard-section {
    background: var(--color-bg);
}

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

.dashboard-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.panel-header {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.panel-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.status-online { background: var(--color-accent); }

.panel-body { padding: 24px; }

.telemetry-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    padding: 16px;
    border-radius: var(--radius-sm);
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 10px;
}

/* Telemetry sparklines: drawn on reveal, then left alone. */
.stat-spark {
    display: block;
    width: 100%;
    height: 22px;
    margin-top: 10px;
    overflow: visible;
}
.stat-spark-path {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Scan line: purely decorative sweep over the vitals panel. The panel clips it
   and it never receives pointer events. */
.panel-scan {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
.panel-scan::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.055), rgba(37, 99, 235, 0));
    transform: translateY(-120%);
}
@media (prefers-reduced-motion: no-preference) {
    .panel-scan::after { animation: panelScan 7.5s var(--ease-in-out) infinite; }
}
@keyframes panelScan {
    0%   { transform: translateY(-120%); }
    55%  { transform: translateY(240%); }
    100% { transform: translateY(240%); }
}

.network-interfaces h3 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.interface-row {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.83rem;
}
.interface-name { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.interface-bandwidth { font-family: 'JetBrains Mono', monospace; color: var(--color-primary); }

/* Logger */
.logger-panel { border-color: var(--color-border); }

.panel-actions { display: flex; gap: 8px; }

.btn-panel-action {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    min-height: 44px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}
.btn-panel-action:hover { border-color: var(--color-primary); color: var(--color-primary); }

.console-body {
    background: #f8fafc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    height: 340px;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--color-border);
}

.log-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
    animation: fadeInUp 0.15s ease-out;
}
.log-timestamp { color: var(--color-text-muted); flex-shrink: 0; }
.log-tag { font-weight: 700; flex-shrink: 0; }

.log-row.info .log-tag { color: var(--color-primary); }
.log-row.info .log-msg { color: var(--color-text); }

.log-row.success .log-tag { color: var(--color-accent-text); }
.log-row.success .log-msg { color: #166534; }

.log-row.warn .log-tag { color: var(--color-warning-text); }
.log-row.warn .log-msg { color: #92400e; }

.log-row.error .log-tag { color: var(--color-alert-text); }
.log-row.error .log-msg { color: #991b1b; }

/* 12. ABOUT SECTION */
.about-section {
    background: var(--color-bg-alt);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.about-image-column { display: flex; justify-content: center; }

.logo-card-frame {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-md);
}

.inner-frame-glowing {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo-badge {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 8px rgba(37,99,235,0.15));
    transition: var(--transition);
}
.logo-card-frame:hover .about-logo-badge {
    transform: scale(1.05);
}

.about-lead {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.5;
}

.about-body {
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.about-credentials {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cred-icon {
    width: 24px;
    height: 24px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 900;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.credential-item span {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-text);
}

/* 13. PROJECT INQUIRY FORM */
.portal-section {
    background: var(--color-bg);
}

.portal-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.portal-header {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: 32px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.portal-badge-status {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 4px;
}

.portal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
}

.portal-mini-logo {
    height: 56px;
    width: auto;
    opacity: 0.9;
}

.portal-form { padding: 40px; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

.form-group { display: flex; flex-direction: column; }

.form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 12px 16px;
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition-fast);
    outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

@media (min-width: 769px) {
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.92rem;
    }
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.validation-error {
    color: var(--color-alert-text);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 6px;
    display: none;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--color-alert);
}
.form-group.has-error .validation-error {
    display: block;
    animation: fieldErrorIn 220ms var(--ease-out) both;
}

@keyframes fieldErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* A short nudge on submit failure so the offending field is felt, not just seen.
   Transform only, 2px, one pass. */
.form-group.shake input,
.form-group.shake select,
.form-group.shake textarea {
    animation: fieldNudge 200ms var(--ease-in-out) 1;
}
@keyframes fieldNudge {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(-2px); }
    70%      { transform: translateX(2px); }
}

/* Bot trap: real users never see or reach this field */
.honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Delivery failure notice (with mailto fallback link) */
.portal-form-error {
    margin-top: 24px;
    padding: 14px 18px;
    border: 1px solid rgba(220, 38, 38, 0.35);
    background: #fef2f2;
    color: #991b1b;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
}
.portal-form-error a {
    color: #991b1b;
    text-decoration: underline;
    font-weight: 700;
}
.portal-form-error[hidden] { display: none; }

.btn-submit-ticket:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.severity-selector-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.severity-option {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dur-ui) var(--ease-out),
                border-color var(--dur-ui) var(--ease-out),
                transform var(--dur-press) var(--ease-out);
}
.severity-option:active { transform: scale(0.985); }
.severity-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.custom-radio-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.severity-option:hover { border-color: var(--color-primary); }

.severity-option:has(input:checked),
.severity-option.is-checked {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.severity-option:has(input:checked) .custom-radio-label,
.severity-option.is-checked .custom-radio-label { color: var(--color-primary-dark); }

.severity-option.option-medium:has(input:checked),
.severity-option.option-medium.is-checked {
    border-color: var(--color-warning);
    background: #fffbeb;
}
.severity-option.option-medium:has(input:checked) .custom-radio-label,
.severity-option.option-medium.is-checked .custom-radio-label { color: var(--color-warning-text); }

.severity-option.option-high:has(input:checked),
.severity-option.option-high.is-checked {
    border-color: var(--color-alert);
    background: #fef2f2;
}
.severity-option.option-high:has(input:checked) .custom-radio-label,
.severity-option.option-high.is-checked .custom-radio-label { color: var(--color-alert-text); }

.portal-form-actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
}

.btn-submit-ticket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 16px 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    border: none;
    background: var(--color-primary);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}
.btn-submit-ticket:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.btn-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.btn-submit-ticket.loading .btn-text { visibility: hidden; }
.btn-submit-ticket.loading .btn-loader { display: block; position: absolute; }

/* Terminal Sim */
.portal-processing {
    padding: 60px 40px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.processing-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.terminal-loader-header {
    background: #1e293b;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.terminal-dot.red { background: #ef4444; }
.terminal-dot.yellow { background: #f59e0b; }
.terminal-dot.green { background: #16a34a; }

.terminal-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-left: 10px;
}

.terminal-loader-body {
    background: #0f172a;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    height: 260px;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.uplink-row { color: #94a3b8; line-height: 1.4; }
.uplink-row.success { color: #16a34a; }
.uplink-row.active { color: #60a5fa; }
.uplink-row.accent { color: #38bdf8; }

/* Receipt */
.portal-receipt {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.4s ease-out;
}

.receipt-success-badge { margin-bottom: 24px; }
.success-glowing-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-icon { width: 28px; height: 28px; }

.receipt-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    color: var(--color-text);
}
.receipt-lead {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    text-align: center;
    max-width: 500px;
    margin-bottom: 32px;
}

.digital-ticket-box {
    width: 100%;
    max-width: 520px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 32px;
}
.ticket-header-strip {
    background: var(--color-primary-light);
    border-bottom: 1px solid rgba(37,99,235,0.15);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ticket-sec-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary-dark);
}
.ticket-id {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}
.ticket-details-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    border-bottom: 1px dashed var(--color-border);
}
.ticket-detail { display: flex; flex-direction: column; }
.t-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.t-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 600;
}
.text-alert { color: var(--color-warning); }

.ticket-barcode-box {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.barcode-stripes {
    width: 100%;
    height: 38px;
    background: repeating-linear-gradient(90deg,
        var(--color-text) 0px, var(--color-text) 2px,
        transparent 2px, transparent 6px,
        var(--color-text) 6px, var(--color-text) 10px);
    opacity: 0.1;
}
.barcode-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.portal-receipt #btn-reset-form { align-self: center; }

/* 14. FOOTER */
.main-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 24px 30px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-desc {
    color: var(--color-text-light);
    font-size: 0.9rem;
    max-width: 320px;
}

.footer-links h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #f8fafc;
    text-transform: uppercase;
}
.footer-links ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
    color: #cbd5e1;
    font-size: 0.9rem;
    transition: var(--transition-fast);
    display: inline-block;
    padding: 6px 0;
}
.footer-links a:hover { color: #fff; padding-left: 4px; }

.footer-legal {
    grid-column: span 3;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.system-integrity-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(37,99,235,0.1);
    border: 1px solid rgba(37,99,235,0.2);
    padding: 4px 10px;
    border-radius: 4px;
    color: var(--color-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}
.online-dot {
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
}

/* 15. ANIMATIONS */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 15a. REEL BAND
   Two short brand films, immediately before the comparison band and sharing its
   dark treatment so the two read as one closing sequence rather than a mid-page
   theme flip.

   The videos are silent, muted and looped - autoplay with sound is blocked by
   every browser, so a band video is silent by definition. They carry no src
   until app.js attaches one near the viewport, and they never play under
   prefers-reduced-motion, where the poster frame stands in. That means the
   section is complete with JS off and with motion off; the video is an
   enhancement, never load-bearing. */
.reel-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-dark);
}

.reel-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 96px) var(--shell);
}

.reel-title {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.14;
    color: #ffffff;
    margin-bottom: 14px;
    max-width: 22ch;
    text-wrap: balance;
}

.reel-lede {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    color: #8fa6c2;
    max-width: 58ch;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.reel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px, 2.4vw, 30px);
}

.reel-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* width/height attributes + aspect-ratio reserve the box, so attaching a
   source at runtime cannot shift layout. */
.reel-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: #05090f;
    border: 1px solid rgba(147, 197, 253, 0.16);
}

.reel-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-primary-soft);
    margin-bottom: 6px;
}

.reel-caption {
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #dbe7f6;
    text-wrap: pretty;
}

@media (max-width: 860px) {
    .reel-grid { grid-template-columns: 1fr; }
}

/* 15b. COMPARISON BAND
   Replaces the two media bands. This is the closing argument: it sits between
   About and the inquiry form, so the last thing read before the CTA is why to
   choose us. Dark by design, like the footer, rather than a mid-page theme flip. */
.vs-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-dark);
}

.vs-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(58% 120% at 76% 38%, rgba(37, 99, 235, 0.24), transparent 70%);
}

.vs-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 96px) var(--shell);
}

.vs-title {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.14;
    color: #ffffff;
    margin-bottom: clamp(30px, 4vw, 46px);
    max-width: 22ch;
    text-wrap: balance;
}

.vs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.vs-col { padding: 0 40px; }
.vs-col:first-child { border-right: 1px solid rgba(147, 197, 253, 0.16); padding-left: 0; }
.vs-col:last-child { padding-right: 0; }

.vs-col h3 {
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
}
.vs-col--them h3 { color: #8fa6c2; }

.vs-col ul { display: grid; gap: 13px; }

.vs-col li {
    position: relative;
    padding-left: 28px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #dbe7f6;
}
.vs-col--them li { color: #8fa6c2; }

.vs-col li::before {
    position: absolute;
    left: 0;
    top: -1px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
}
.vs-col--us li::before { content: '\2713'; color: #6ee7b7; }
.vs-col--them li::before { content: '\00D7'; color: #7f97b5; }

.vs-foot {
    margin-top: clamp(30px, 4vw, 44px);
    padding-top: 24px;
    border-top: 1px solid rgba(147, 197, 253, 0.16);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: #93c5fd;
    max-width: 76ch;
}

@media (max-width: 760px) {
    .vs-grid { grid-template-columns: 1fr; }
    .vs-col { padding: 0; }
    .vs-col:first-child {
        border-right: 0;
        border-bottom: 1px solid rgba(147, 197, 253, 0.16);
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
}

/* 16. RESPONSIVE */
@media (max-width: 1100px) {
    .engage-row { grid-template-columns: 160px minmax(0, 1fr) 190px; gap: 28px 32px; }
}

@media (max-width: 1024px) {
    .hero-copy { max-width: 100%; }
    .ai-flow { grid-template-columns: 1fr; gap: 0; }
    .ai-link {
        height: 34px;
        margin: 8px 0 8px 14px;
        padding: 0;
        border-left: 1.5px dashed var(--color-border);
    }
    .ai-link svg { display: none; }
    .engage-row { grid-template-columns: minmax(0, 1fr) 190px; }
    .engage-row .engage-body { grid-column: 1; }
    .engage-row .engage-action { grid-column: 2; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-container { grid-template-columns: 1fr 1fr; }
    .footer-legal { grid-column: span 2; }
}

@media (max-width: 768px) {
    .section-container { padding: 60px 16px; }
    .hero-actions { width: 100%; }

    .service-row {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icon text" ". action";
        gap: 16px 18px;
        padding: 22px;
        top: calc(84px + var(--row-i) * 7px);
    }
    .service-num { display: none; }
    .service-icon { grid-area: icon; }
    .service-text { grid-area: text; }
    .service-open { grid-area: action; justify-self: start; }

    .vertical-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 26px 22px;
        min-height: 0;
        top: calc(84px + var(--row-i) * 6px);
    }
    .hero-tunnel { opacity: 0.45; perspective: 220px; perspective-origin: 62% 40%; }
    .vertical-head { grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; }
    .vertical-icon { width: 50px; height: 50px; }
    .vertical-icon svg { width: 24px; height: 24px; }
    .vertical-head h3 { font-size: 1.15rem; }

    .engage-row,
    .engage-row--featured {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 32px 0;
    }
    .engage-row--featured { padding-left: 20px; padding-right: 20px; }
    .engage-row--featured .engagement-features { grid-template-columns: 1fr; }
    .engage-row--mirror,
    .engage-row--mirror .engage-aside,
    .engage-row--mirror .engage-body,
    .engage-row--mirror .engage-action { grid-column: auto; justify-content: flex-start; }
    .engage-action { justify-content: flex-start; }

    .ai-trust-bar { flex-direction: row; align-items: flex-start; text-align: left; }

    .mobile-menu-toggle { display: flex; }
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(300px, 82vw);
        height: 100dvh;
        background: var(--color-bg);
        border-left: 1px solid var(--color-border);
        box-shadow: var(--shadow-xl);
        z-index: 105;
        transition: var(--transition-fast);
        padding: 100px 32px;
    }
    .nav-menu.active { right: 0; }
    .nav-list { flex-direction: column; align-items: flex-start; gap: 32px; }

    .mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .mobile-menu-toggle.active .hamburger-bar:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .telemetry-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .form-grid { grid-template-columns: 1fr; }
    .col-4, .col-6, .col-12 { grid-column: span 12; }
    .severity-selector-wrapper { grid-template-columns: 1fr; }

    .footer-container { grid-template-columns: 1fr; gap: 30px; }
    .footer-legal { grid-column: span 1; flex-direction: column; gap: 20px; text-align: center; }

    .modal-content { width: 92%; margin: 0 16px; }
    .modal-body { padding: 24px; }

    .nav-logo { height: 40px; }
    .hero-section { padding-top: 108px; padding-bottom: 64px; }
    .console-body { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .section-container { padding: 40px 16px; }
    .service-row { padding: 20px 18px; }
    .vertical-row { padding: 26px 22px; min-height: 0; gap: 18px; }
    .portal-header { padding: 24px 20px; flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
    .portal-form { padding: 24px 20px; }
    .portal-receipt { padding: 40px 16px; }
    .ticket-details-grid { grid-template-columns: 1fr; }
    .hero-section { padding-top: 96px; min-height: auto; padding-bottom: 56px; }
    .nav-logo { height: 38px; }
    .logo-card-frame { padding: 24px; }
    .inner-frame-glowing { width: 140px; height: 140px; }
}