/* =========================================================
   TECHPULSE — LAYOUT / GLOBAL SHELL
   "Signal Observatory" visual language

   Layers:
     1. Atmosphere — fixed background environment
     2. Site header — floating glass navigation
     3. Mobile navigation — glass drawer
     4. Hero + page heroes
     5. Section compositions (two-column, history, autonomous)
     6. Footer
     7. Reveal motion
   ========================================================= */


/* =========================================================
   1. ATMOSPHERE — PREMIUM BACKGROUND SYSTEM
   Fixed, GPU-cheap layers: aurora orbs, engineering grid,
   noise grain. Content always renders above (body z-index).
   ========================================================= */

.tp-atmosphere {
    position: fixed;

    inset: 0;

    z-index: var(--z-atmosphere);

    overflow: hidden;

    pointer-events: none;
}

/* Deep vignette base so edges recede */
.tp-atmosphere::after {
    content: '';

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            120% 90% at 50% 0%,
            transparent 40%,
            rgba(1, 3, 8, 0.55) 100%
        );

    pointer-events: none;
}

:root[data-theme="light"] .tp-atmosphere::after {
    background:
        radial-gradient(
            120% 90% at 50% 0%,
            transparent 45%,
            rgba(210, 220, 235, 0.5) 100%
        );
}

/* Aurora orbs — blurred gradient fields */
.tp-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    opacity: 0.5;

    will-change: transform;
}

.tp-orb--a {
    top: -220px;
    left: -140px;

    width: 640px;
    height: 640px;

    background:
        radial-gradient(
            circle,
            rgba(69, 229, 195, 0.20),
            transparent 65%
        );

    animation:
        orb-drift-a
        36s
        var(--ease)
        infinite
        alternate;
}

.tp-orb--b {
    top: 8%;
    right: -220px;

    width: 720px;
    height: 720px;

    background:
        radial-gradient(
            circle,
            rgba(111, 130, 255, 0.16),
            transparent 65%
        );

    animation:
        orb-drift-b
        44s
        var(--ease)
        infinite
        alternate;
}

.tp-orb--c {
    bottom: -260px;
    left: 28%;

    width: 560px;
    height: 560px;

    background:
        radial-gradient(
            circle,
            rgba(183, 139, 255, 0.11),
            transparent 65%
        );

    animation:
        orb-drift-c
        52s
        var(--ease)
        infinite
        alternate;
}

:root[data-theme="light"] .tp-orb {
    opacity: 0.34;
}

:root[data-theme="light"] .tp-orb--a {
    background:
        radial-gradient(
            circle,
            rgba(11, 128, 105, 0.20),
            transparent 65%
        );
}

:root[data-theme="light"] .tp-orb--b {
    background:
        radial-gradient(
            circle,
            rgba(79, 86, 224, 0.14),
            transparent 65%
        );
}

:root[data-theme="light"] .tp-orb--c {
    background:
        radial-gradient(
            circle,
            rgba(138, 79, 208, 0.10),
            transparent 65%
        );
}

@keyframes orb-drift-a {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform:
            translate3d(70px, 50px, 0)
            scale(1.12);
    }
}

@keyframes orb-drift-b {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform:
            translate3d(-80px, 60px, 0)
            scale(1.08);
    }
}

@keyframes orb-drift-c {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform:
            translate3d(60px, -70px, 0)
            scale(1.15);
    }
}

/* Engineering grid — hairlines with radial falloff */
.tp-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(148, 168, 205, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 168, 205, 0.05) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    -webkit-mask-image:
        radial-gradient(
            90% 64% at 50% 0%,
            black 0%,
            transparent 100%
        );
    mask-image:
        radial-gradient(
            90% 64% at 50% 0%,
            black 0%,
            transparent 100%
        );
}

:root[data-theme="light"] .tp-grid {
    background-image:
        linear-gradient(
            rgba(24, 40, 71, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(24, 40, 71, 0.05) 1px,
            transparent 1px
        );
}

/* Noise grain — kills gradient banding, adds texture */
.tp-noise {
    position: absolute;
    inset: 0;

    opacity: 0.32;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .tp-noise {
    opacity: 0.2;
}

@media (max-width: 768px) {

    .tp-orb {
        filter: blur(70px);
    }

    .tp-orb--b {
        width: 480px;
        height: 480px;
    }

}


/* =========================================================
   2. SITE HEADER — FLOATING GLASS NAVIGATION
   ========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: var(--z-nav);

    padding: 18px 0;

    transition:
        padding var(--dur-med) var(--ease);
}

/* Glass shell appears once the page scrolls */
.site-header::before {
    content: '';

    position: absolute;
    inset: 0;

    border-bottom: 1px solid transparent;

    background: transparent;

    opacity: 0;

    transition:
        opacity var(--dur-med) var(--ease),
        background-color var(--dur-med) var(--ease);

    pointer-events: none;
}

.site-header.is-scrolled {
    padding: 10px 0;
}

.site-header.is-scrolled::before {
    opacity: 1;

    background:
        linear-gradient(
            180deg,
            rgba(4, 7, 13, 0.82),
            rgba(4, 7, 13, 0.62)
        );

    border-bottom-color: var(--glass-border);

    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(1.4);
    backdrop-filter:
        blur(var(--glass-blur))
        saturate(1.4);
}

:root[data-theme="light"] .site-header.is-scrolled::before {
    background:
        linear-gradient(
            180deg,
            rgba(248, 250, 253, 0.86),
            rgba(248, 250, 253, 0.68)
        );
}

.header-inner {
    display: flex;
    align-items: center;

    gap: 24px;
}

/* Brand — mark + wordmark */
.brand {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    flex: 0 0 auto;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid var(--accent-border);
    border-radius: 11px;

    background:
        linear-gradient(
            150deg,
            rgba(69, 229, 195, 0.22),
            rgba(69, 229, 195, 0.04) 55%
        ),
        var(--surface);

    color: var(--accent);

    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;

    box-shadow:
        0 0 22px -6px var(--accent-glow),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;

    transition:
        box-shadow var(--transition),
        transform var(--transition);
}

.brand:hover .brand-mark {
    transform: translateY(-1px) rotate(-3deg);

    box-shadow:
        0 0 30px -4px var(--accent-glow),
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.brand-name {
    font-family: var(--font-display);

    font-size: 17.5px;
    font-weight: 700;

    letter-spacing: -0.02em;

    color: var(--text);
}

/* Primary navigation — floating glass pill */
.main-nav {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-left: auto;

    padding: 5px;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);

    background: var(--glass-soft);

    -webkit-backdrop-filter:
        blur(14px);
    backdrop-filter:
        blur(14px);
}

.main-nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 8px 16px;

    border-radius: var(--radius-pill);

    color: var(--text-soft);

    font-size: 13.5px;
    font-weight: 600;

    letter-spacing: 0.005em;

    transition:
        color var(--transition),
        background-color var(--transition),
        box-shadow var(--transition);
}

.main-nav a:hover {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--text) 6%,
            transparent
        );
}

.main-nav a.active {
    color: var(--accent);

    background: var(--accent-soft);

    box-shadow:
        0 0 0 1px var(--accent-border),
        0 6px 18px -8px var(--accent-glow);
}

/* Header right side: status + theme + nav toggle */
.header-actions {
    display: flex;
    align-items: center;

    gap: 10px;

    flex: 0 0 auto;
}

.header-status {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);

    background: var(--glass-soft);

    color: var(--text-soft);

    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;

    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;

    white-space: nowrap;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.theme-toggle,
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);

    background: var(--glass-soft);

    color: var(--text-soft);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    transition:
        color var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        transform var(--transition);
}

.theme-toggle:hover,
.nav-toggle:hover {
    color: var(--text);

    border-color: var(--border-strong);

    transform: translateY(-1px);
}

.theme-toggle:active,
.nav-toggle:active {
    transform: translateY(0);
}

.theme-toggle svg,
.nav-toggle svg {
    width: 17px;
    height: 17px;
}

/* Icon swap handled by [data-theme] */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
    display: block;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
    display: none;
}

.nav-toggle {
    display: none;

    position: relative;

    z-index: calc(var(--z-mobile-nav) + 1);
}

.nav-toggle .icon-close {
    display: none;
}

body.nav-open .nav-toggle .icon-close {
    display: block;
}

body.nav-open .nav-toggle .icon-menu {
    display: none;
}


/* =========================================================
   3. MOBILE NAVIGATION — GLASS DRAWER
   ========================================================= */

.mobile-nav {
    position: fixed;

    top: 74px;
    left: 16px;
    right: 16px;

    z-index: var(--z-mobile-nav);

    display: none;

    flex-direction: column;

    padding: 10px;

    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-lg);

    background: var(--glass-strong);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(1.4);
    backdrop-filter:
        blur(24px)
        saturate(1.4);

    box-shadow: var(--shadow-lg);

    opacity: 0;

    transform: translateY(-8px) scale(0.99);

    transform-origin: top center;

    pointer-events: none;

    transition:
        opacity var(--dur-med) var(--ease),
        transform var(--dur-med) var(--ease);
}

body.nav-open .mobile-nav {
    display: flex;

    opacity: 1;

    transform: translateY(0) scale(1);

    pointer-events: auto;
}

.mobile-nav a {
    display: flex;
    align-items: center;

    padding: 15px 16px;

    border-radius: var(--radius-md);

    color: var(--text-soft);

    font-size: 15.5px;
    font-weight: 600;

    transition:
        color var(--transition),
        background-color var(--transition);
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible {
    color: var(--text);

    background:
        color-mix(
            in srgb,
            var(--text) 6%,
            transparent
        );
}

.mobile-nav a.active {
    color: var(--accent);

    background: var(--accent-soft);
}

/* Lock scroll while the drawer is open */
body.nav-open {
    overflow: hidden;
}


/* =========================================================
   4. HERO — HOMEPAGE
   ========================================================= */

.hero {
    position: relative;

    padding: 188px 0 96px;

    overflow: hidden;
}

/* Faint signal rings behind the headline */
.hero::before {
    content: '';

    position: absolute;

    top: -30%;
    right: -12%;

    width: 720px;
    height: 720px;

    border-radius: 50%;

    border: 1px solid var(--glass-border);

    background:
        radial-gradient(
            circle,
            transparent 52%,
            rgba(69, 229, 195, 0.035) 53%,
            transparent 66%
        );

    opacity: 0.9;

    pointer-events: none;
}

.hero::after {
    content: '';

    position: absolute;

    top: -18%;
    right: 2%;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    border: 1px solid var(--glass-border);

    background:
        radial-gradient(
            circle,
            transparent 55%,
            rgba(111, 130, 255, 0.05) 56%,
            transparent 70%
        );

    pointer-events: none;
}

.hero-inner {
    position: relative;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 9px 16px;

    margin-bottom: 30px;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);

    background: var(--glass-soft);

    color: var(--text-soft);

    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;

    letter-spacing: 0.16em;
    line-height: 1;

    text-transform: uppercase;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    box-shadow: var(--shadow-sm);
}

.hero h1 {
    font-family: var(--font-display);

    font-size:
        clamp(
            46px,
            8vw,
            92px
        );

    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 700;

    color: var(--text);
}

.hero h1 span {
    display: inline-block;

    background: var(--gradient-brand);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-description {
    max-width: 560px;

    margin-top: 28px;

    color: var(--text-soft);

    font-size: clamp(15.5px, 1.4vw, 17.5px);
    line-height: 1.7;
}

/* Hero calls to action */
.hero-cta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 34px;
}

/* Hero stat strip — glass tiles divided by hairlines */
.hero-meta {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    max-width: 860px;

    margin-top: 56px;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);

    background: var(--glass-border);

    overflow: hidden;

    box-shadow: var(--shadow-md);
}

.hero-meta > div {
    padding: 20px 22px;

    background:
        linear-gradient(
            175deg,
            var(--glass-highlight),
            rgba(255, 255, 255, 0) 46%
        ),
        var(--glass);

    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

.hero-meta .meta-label {
    display: block;

    margin-bottom: 8px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 500;

    letter-spacing: 0.14em;
}

.hero-meta strong {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text);

    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;

    letter-spacing: -0.01em;
}


/* =========================================================
   4B. PAGE HERO — SUBPAGES
   ========================================================= */

.page-hero {
    position: relative;

    padding: 176px 0 72px;

    overflow: hidden;
}

.page-hero::before {
    content: '';

    position: absolute;

    top: -40%;
    left: 50%;

    width: 900px;
    height: 560px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            50% 50% at 50% 50%,
            rgba(69, 229, 195, 0.07),
            transparent 70%
        );

    pointer-events: none;
}

.page-hero .container {
    position: relative;
}

.page-hero h1 {
    font-family: var(--font-display);

    font-size:
        clamp(
            40px,
            6vw,
            72px
        );

    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;

    color: var(--text);
}

.page-hero h1 span {
    display: inline-block;

    background: var(--gradient-brand);

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}

.page-hero p {
    max-width: 600px;

    margin-top: 22px;

    color: var(--text-soft);

    font-size: 16px;
    line-height: 1.7;
}

.page-meta {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px 18px;

    margin-top: 34px;
}

.page-meta > span {
    color: var(--text-muted);

    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;

    letter-spacing: 0.14em;
    line-height: 1;

    text-transform: uppercase;
}

.page-meta strong {
    color: var(--text);

    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   5. SECTION COMPOSITIONS
   ========================================================= */

.two-column {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

    align-items: start;
}

/* History section — split feature + timeline */
.history-section {
    display: grid;

    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);

    gap: 72px;

    align-items: center;
}

.history-section > div:first-child h2 {
    font-family: var(--font-display);

    font-size:
        clamp(
            30px,
            3.6vw,
            46px
        );

    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 700;

    margin-bottom: 18px;
}

.history-section > div:first-child p {
    max-width: 460px;

    color: var(--text-muted);

    font-size: 15px;
    line-height: 1.75;

    margin-bottom: 30px;
}

.timeline-preview {
    min-width: 0;
}

/* Autonomous closing feature */
.autonomous {
    position: relative;

    max-width: 760px;

    margin-inline: auto;

    padding: 56px 56px 48px;

    text-align: center;

    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            180deg,
            var(--glass-highlight),
            rgba(255, 255, 255, 0) 42%
        ),
        var(--glass);

    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));

    box-shadow: var(--shadow-lg);

    overflow: hidden;
}

/* Luminous horizon line inside the panel */
.autonomous::before {
    content: '';

    position: absolute;

    top: 0;
    left: 18%;
    right: 18%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent),
            transparent
        );

    opacity: 0.65;
}

.autonomous-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 20px;

    border: 1px solid var(--accent-border);
    border-radius: 18px;

    background: var(--accent-soft);

    font-size: 24px;

    box-shadow:
        0 0 32px -8px var(--accent-glow),
        0 1px 0 rgba(255, 255, 255, 0.09) inset;
}

.autonomous h2 {
    font-family: var(--font-display);

    font-size:
        clamp(
            26px,
            3vw,
            36px
        );

    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;

    margin-bottom: 14px;
}

.autonomous p {
    max-width: 520px;

    margin-inline: auto;

    color: var(--text-muted);

    font-size: 15px;
    line-height: 1.75;
}

.autonomous-stats {
    display: flex;

    justify-content: center;

    gap: 56px;

    margin-top: 38px;
}

.autonomous-stats strong {
    display: block;

    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;

    letter-spacing: -0.02em;

    color: var(--accent);
}

.autonomous-stats span {
    display: block;

    margin-top: 4px;

    color: var(--text-muted);

    font-family: var(--font-mono);
    font-size: 10.5px;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* =========================================================
   6. FOOTER
   ========================================================= */

.site-footer {
    position: relative;

    border-top: 1px solid var(--border-soft);

    background:
        linear-gradient(
            180deg,
            var(--bg),
            var(--bg-deep)
        );

    padding: 72px 0 44px;

    overflow: hidden;
}

/* Oversized watermark wordmark */
.site-footer::before {
    content: 'TECHPULSE';

    position: absolute;

    bottom: -0.18em;
    left: 50%;

    transform: translateX(-50%);

    font-family: var(--font-display);
    font-size: clamp(90px, 16vw, 210px);
    font-weight: 700;

    letter-spacing: 0.02em;
    line-height: 1;

    color: transparent;

    -webkit-text-stroke: 1px
        rgba(148, 168, 205, 0.07);

    pointer-events: none;

    user-select: none;
}

:root[data-theme="light"] .site-footer::before {
    -webkit-text-stroke: 1px
        rgba(24, 40, 71, 0.09);
}

.footer-inner {
    position: relative;

    display: grid;

    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);

    gap: 48px;
}

.footer-inner .brand {
    margin-bottom: 16px;
}

.footer-inner > div > p {
    max-width: 320px;

    color: var(--text-muted);

    font-size: 13.5px;
    line-height: 1.7;
}

.footer-links {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color: var(--text-soft);

    font-size: 13.5px;
    font-weight: 500;

    transition:
        color var(--transition),
        transform var(--transition);
}

.footer-links a:hover {
    color: var(--accent);

    transform: translateX(3px);
}

.footer-meta {
    display: flex;

    flex-direction: column;

    gap: 10px;

    align-items: flex-start;
}

.footer-meta span {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text-muted);

    font-family: var(--font-mono);
    font-size: 11px;

    letter-spacing: 0.06em;
}

.footer-meta span::before {
    content: '';

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--accent-border);

    flex: 0 0 5px;
}


/* =========================================================
   7. REVEAL MOTION
   ========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(26px);

    transition:
        opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);

    transition-delay:
        var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}

.reveal-item {
    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 480ms var(--ease-out),
        transform 480ms var(--ease-out);

    transition-delay:
        calc(
            var(--stagger, 0) * 55ms +
            var(--reveal-delay, 0ms)
        );
}

.reveal-item.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE SHELL
   ========================================================= */

@media (max-width: 1080px) {

    .main-nav a {
        padding: 8px 12px;

        font-size: 13px;
    }

    .history-section {
        gap: 48px;
    }

}

@media (max-width: 900px) {

    .main-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .header-status {
        display: none;
    }

    .hero {
        padding: 148px 0 72px;
    }

    .page-hero {
        padding: 140px 0 56px;
    }

    .hero-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-column {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-section {
        grid-template-columns: minmax(0, 1fr);

        gap: 44px;
    }

    .footer-inner {
        grid-template-columns: minmax(0, 1fr);

        gap: 36px;
    }

    .footer-meta {
        align-items: flex-start;
    }

    .autonomous {
        padding: 40px 28px 36px;
    }

    .autonomous-stats {
        gap: 32px;
    }

}

@media (max-width: 480px) {

    .site-header {
        padding: 14px 0;
    }

    .brand-name {
        font-size: 16px;
    }

    .hero-meta {
        grid-template-columns: minmax(0, 1fr);

        max-width: none;
    }

    .autonomous-stats {
        flex-direction: column;

        gap: 22px;
    }

    .mobile-nav {
        top: 66px;
    }

}