/* ================================================================
   ARGUS — Website Styles
   Dark, cinematic, animated — inspired by portfolio aesthetic
   Accent: Emerald Green #00E5A0
   ================================================================ */

/* ==================== VARIABLES ==================== */
:root {
    --bg: #050507;
    --bg-secondary: #0a0a0e;
    --bg-tertiary: #111116;
    --surface: rgba(16, 16, 22, 0.7);
    --surface-solid: #10101a;
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --text: #e8e8ec;
    --text-secondary: #8b8b96;
    --text-muted: #55555e;
    --accent: #00E5A0;
    --accent-light: #33FFc0;
    --accent-dim: #00B880;
    --accent-glow: rgba(0, 229, 160, 0.12);
    --accent-glow-strong: rgba(0, 229, 160, 0.25);
    --danger: #ff4d6a;
    --gradient-1: linear-gradient(135deg, #00E5A0, #00B4D8, #6c63ff);
    --gradient-2: linear-gradient(135deg, #00E5A0 0%, #00CFA0 50%, #00B4D8 100%);
    --gradient-text: linear-gradient(135deg, #fff 0%, #a0ffd8 50%, #00E5A0 100%);

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --section-padding: clamp(80px, 12vh, 160px);
    --container-width: 1200px;
    --container-padding: clamp(20px, 4vw, 60px);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
}

@media (max-width: 768px) {
    body {
        cursor: auto;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    border: none;
    outline: none;
    background: none;
    cursor: none;
    font-family: inherit;
}

::selection {
    background: var(--accent);
    color: #050507;
}

/* ==================== NOISE ==================== */
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px;
}

/* ==================== MESH GRADIENT BACKGROUND ==================== */
#gradient-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.4;
    --gradient-color-1: #003d2e;
    --gradient-color-2: #00674f;
    --gradient-color-3: #003b5c;
    --gradient-color-4: #004d40;
}

/* ==================== CURSOR ==================== */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    mix-blend-mode: difference;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    left: -3px;
    transition: transform 0.1s ease;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    position: absolute;
    top: -20px;
    left: -20px;
    transition: all 0.15s var(--ease-out-expo);
}

.cursor.hover .cursor-outline {
    width: 60px;
    height: 60px;
    top: -30px;
    left: -30px;
    border-color: var(--accent);
    background: rgba(0, 229, 160, 0.05);
}

.cursor.click .cursor-dot {
    transform: scale(3);
}

@media (max-width: 768px) {
    .cursor {
        display: none;
    }
}

/* ==================== PRELOADER ==================== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease-out-expo), visibility 0.8s;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
    width: 240px;
}

.preloader-logo {
    margin-bottom: 32px;
    color: var(--accent);
    display: flex;
    justify-content: center;
}

.preloader-diamond {
    width: 72px;
    height: 72px;
}

.diamond-top {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawDiamond 1.8s var(--ease-out-expo) forwards;
}

.diamond-bottom {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawDiamond 1.8s 0.2s var(--ease-out-expo) forwards;
}

.diamond-hex {
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
    animation: drawHex 2s 0.1s var(--ease-out-expo) forwards;
}

.diamond-vline {
    opacity: 0;
    animation: fadeIn 0.6s 0.8s forwards;
}

@keyframes drawDiamond {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawHex {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.preloader-bar-track {
    width: 100%;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
}

.preloader-bar {
    width: 0%;
    height: 100%;
    background: var(--gradient-2);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.preloader-text {
    display: flex;
    justify-content: space-between;
}

.preloader-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.preloader-pct {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
}

/* ==================== NAV ==================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    transition: all 0.5s var(--ease-out-expo);
}

.nav.scrolled {
    padding: 16px var(--container-padding);
    background: rgba(5, 5, 7, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

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

.nav-logo-icon {
    color: var(--accent);
    display: flex;
}

.nav-logo-text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text);
}

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

.nav-link {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    position: relative;
    padding: 4px 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.4s var(--ease-out-expo);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-menu-btn {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    z-index: 1001;
}

.nav-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: all 0.4s var(--ease-out-expo);
    transform-origin: center;
}

.nav-menu-btn.active span:first-child {
    transform: rotate(45deg) translate(3px, 3px);
}

.nav-menu-btn.active span:last-child {
    transform: rotate(-45deg) translate(3px, -3px);
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-menu-btn {
        display: flex;
    }
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Stays 100%, not dvh: dvh tracks the live viewport as the browser toolbars
       move, which leaves this full-screen overlay short of the bottom. */
    height: 100%;
    background: var(--bg);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s var(--ease-out-expo);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8vh, 18px);
    text-align: center;
    /* Safety net for short/landscape screens: the list stays reachable, but the
       scrollbar itself is chrome we don't want inside a full-screen menu. Hide
       the bar, keep the scrolling. */
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* legacy Edge */
    padding: 12px 0;
}

.mobile-menu-links::-webkit-scrollbar {
    display: none;                      /* Chrome, Safari */
}

/* The page behind an open overlay should not scroll — that background scroll is
   the other way a stray scrollbar turns up. Scoped to the breakpoint where the
   menu button exists, so desktop never reflows. */
/* The class goes on <html>, not just <body>: this page sets overflow-x on the
   root, which makes <html> the scroll container, so body overflow no longer
   propagates to the viewport and would leave the scrollbar in place. */
@media (max-width: 768px) {
    html.menu-open,
    html.menu-open body {
        overflow: hidden;
    }
}

.mobile-link {
    font-family: var(--font-display);
    /* Eight entries at 36px with the inherited 1.6 line-height ran ~630px tall
       and overflowed shorter phones. The vh term only binds on short screens
       (landscape), where width alone would still size the list off the page. */
    font-size: clamp(20px, min(7vw, 5.2vh), 34px);
    line-height: 1.2;
    font-weight: 600;
    color: var(--text);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s var(--ease-out-expo);
}

.mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

/* One rule per link. Adding a nav item means adding a step here, or it pops in
   ahead of the cascade — which is what Team and Contact were doing. */
.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.20s; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active .mobile-link:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu.active .mobile-link:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu.active .mobile-link:nth-child(7) { transition-delay: 0.40s; }
.mobile-menu.active .mobile-link:nth-child(8) { transition-delay: 0.45s; }

/* ==================== LAYOUT ==================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
}

.section {
    padding: var(--section-padding) 0;
    position: relative;
    z-index: 1;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 64px;
}

.section-number {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    white-space: nowrap;
}

.section-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

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

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-2);
    color: #050507;
    box-shadow: 0 4px 24px var(--accent-glow);
}

.btn-primary:hover {
    box-shadow: 0 8px 40px var(--accent-glow-strong);
    transform: translateY(-2px);
}

.btn-ghost {
    border: 1px solid var(--border-hover);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.btn-lg {
    padding: 18px 40px;
    font-size: 16px;
}

/* ==================== HERO ==================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 1;
    max-width: var(--container-width);
    margin: 0 auto;
    gap: 40px;
}

.hero-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 30% 50%, rgba(0, 229, 160, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 180, 216, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(108, 99, 255, 0.03) 0%, transparent 50%);
}

.hero-content {
    padding-top: 100px;
    position: relative;
    z-index: 2;
    max-width: 800px;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 50px;
    margin-bottom: 32px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent);
    opacity: 0;
    transform: translateY(20px);
}

.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(42px, 8vw, 88px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 28px;
}

.hero-line {
    display: block;
    overflow: hidden;
}

.hero-line-inner {
    display: block;
    opacity: 0;
    transform: translateY(100%);
}

.hero-accent {
    font-style: normal;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Typing effect */
.typing-wrap {
    display: inline;
    white-space: nowrap;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: -2px;
    vertical-align: baseline;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

.typing-word {
    display: inline;
}

.typing-cursor {
    display: inline-block;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    animation: blink-cursor 0.8s steps(2) infinite;
    margin-left: 1px;
    font-weight: 400;
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Hero Logo */
.hero-logo-visual {
    flex-shrink: 0;
    width: 320px;
    max-width: 28vw;
    position: relative;
    z-index: 2;
    opacity: 0;
    margin-right: -60px;
}

.argus-3d-logo {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(0, 229, 160, 0.2));
}

.logo-face,
.logo-hex {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.logo-text path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.logo-vline {
    opacity: 0.8;
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
    }

    .hero-logo-visual {
        width: 260px;
        max-width: 60vw;
        order: -1;
        padding-top: 100px;
    }

    .hero-content {
        padding-top: 20px;
    }
}

.hero-sub {
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--text-secondary);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(20px);
}

.hero-sub strong {
    color: var(--accent);
    font-weight: 600;
}

/* Hero Stats */
.hero-stats-row {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 48px;
    opacity: 0;
    transform: translateY(20px);
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.hero-stat-prefix {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--accent);
}

.hero-stat-unit {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--accent);
}

.hero-stat-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.hero-stat-divider {
    width: 1px;
    height: 48px;
    background: var(--border);
}

.hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
}

@media (max-width: 640px) {
    .hero-stats-row {
        gap: 16px;
    }

    .hero-stat-number {
        font-size: 36px;
    }

    .hero-stat-divider {
        height: 36px;
    }
}

/* Hero Scroll */
.hero-scroll {
    position: absolute;
    bottom: 40px;
    left: var(--container-padding);
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
}

.hero-scroll-line {
    width: 1px;
    height: 60px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}

.hero-scroll-dot {
    width: 3px;
    height: 12px;
    background: var(--accent);
    border-radius: 3px;
    position: absolute;
    left: -1px;
    animation: scrollDown 2s infinite var(--ease-in-out);
}

@keyframes scrollDown {
    0% {
        top: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: calc(100% - 12px);
        opacity: 0;
    }
}

.hero-scroll span {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ==================== PROBLEM ==================== */
.problem-hero-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.problem-hero-text h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: 16px;
}

.problem-hero-text p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.7;
}

.problem-hero-text strong {
    color: var(--accent-light);
}

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

.problem-card {
    background: var(--surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.problem-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.problem-card-icon {
    color: var(--accent);
    margin-bottom: 16px;
}

.problem-card-number {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.problem-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.problem-callout {
    text-align: center;
    padding: 48px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.problem-callout::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 77, 106, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.problem-callout-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.problem-callout-line {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--danger), transparent);
}

.problem-callout-lead {
    color: var(--text-secondary);
    font-size: 16px;
    letter-spacing: 0.5px;
}

.problem-callout-highlight {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.problem-callout-highlight span {
    color: var(--danger);
    position: relative;
}

.problem-callout-highlight span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--danger);
    opacity: 0.5;
    border-radius: 2px;
}

.problem-callout-consequences {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.problem-callout-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--danger);
    opacity: 0.4;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .problem-callout-consequences {
        flex-direction: column;
        gap: 8px;
    }

    .problem-callout-dot {
        display: none;
    }
}

@media (max-width: 900px) {
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ==================== SOLUTION ==================== */
.solution-headline {
    text-align: center;
    margin-bottom: 48px;
}

.solution-headline h3 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 700;
    margin-bottom: 20px;
}

.solution-timer {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 40px;
    background: var(--surface);
    border: 1px solid var(--accent-glow-strong);
    border-radius: 60px;
}

.timer-number {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.timer-label {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--accent);
    letter-spacing: 2px;
}

.solution-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Conveyor Illustration */
.conveyor-illustration {
    max-width: 780px;
    margin: 0 auto 48px;
}

.conveyor-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.solution-card {
    background: var(--surface);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s var(--ease-out-expo);
}

.solution-card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.solution-card:hover .solution-card-glow {
    opacity: 1;
}

.solution-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 229, 160, 0.1);
}

.solution-card-icon {
    color: var(--accent);
    margin-bottom: 20px;
}

.solution-card h4 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
}

.solution-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .solution-features {
        grid-template-columns: 1fr;
    }
}

/* ==================== VISUALIZER ==================== */
.visualizer {
    padding-bottom: 0;
}

.visualizer-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 18px;
    max-width: 600px;
    margin: -32px auto 48px;
}

.visualizer-stage {
    position: relative;
    width: 100%;
    background: rgba(10, 10, 14, 0.75);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.visualizer-canvas-wrap {
    position: relative;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    overflow: hidden;
}

.visualizer-canvas-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.visualizer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    transition: opacity 0.8s ease, visibility 0.8s;
    z-index: 10;
}

.visualizer-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.viz-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.viz-loading span {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.viz-loading-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* HUD */
.viz-hud {
    position: absolute;
    top: 24px;
    left: 24px;
    background: rgba(5, 5, 7, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 220px;
    z-index: 5;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s var(--ease-out-expo);
}

.viz-hud.visible {
    opacity: 1;
    transform: translateX(0);
}

.viz-hud-title {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.viz-hud-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s infinite;
}

.viz-measurement-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.4s var(--ease-out-expo);
}

.viz-measurement-row.visible {
    opacity: 1;
    transform: translateY(0);
}

.viz-measurement-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.viz-measurement-row.selected {
    background: rgba(0, 229, 160, 0.08);
    border-radius: 6px;
    padding: 6px 6px;
    margin: 0 -6px;
}

.viz-measurement-row:last-child {
    border-bottom: none;
}

.viz-measurement-name {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.viz-measurement-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}

.viz-measurement-value .unit {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
    margin-left: 2px;
}

/* Viz Controls */
.viz-controls {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    gap: 8px;
    z-index: 5;
}

.viz-ctrl-btn {
    width: 40px;
    height: 40px;
    background: rgba(5, 5, 7, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.viz-ctrl-btn:hover,
.viz-ctrl-btn.active {
    color: var(--accent);
    border-color: var(--accent);
}

/* ==================== IMPACT ==================== */
.impact-headline {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.impact-headline h3 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    margin-bottom: 16px;
}

.impact-headline p {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.7;
}

.impact-headline strong {
    color: var(--accent-light);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.impact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.5s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.impact-card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-2);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.impact-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.impact-card:hover .impact-card-top {
    opacity: 1;
}

.impact-icon {
    font-size: 32px;
    margin-bottom: 16px;
}

.impact-card h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.impact-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.impact-big-number {
    text-align: center;
}

.impact-big-label {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.impact-big-value {
    font-family: var(--font-display);
    font-size: clamp(60px, 10vw, 120px);
    font-weight: 800;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

@media (max-width: 900px) {
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ==================== FUTURE ==================== */
.future {
    position: relative;
    overflow: hidden;
}

.future-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.future .container {
    position: relative;
    z-index: 1;
}

.future-timeline {
    position: relative;
    padding-left: 60px;
    margin-bottom: 80px;
}

.future-timeline-line {
    position: absolute;
    /* Markers sit in a 24px box starting at x=8, so their centre is x=20.
       A 2px rule centres there at left:19 — the same at every breakpoint,
       since the mobile padding and marker offset shift together. */
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.future-timeline-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow-strong), 0 0 24px rgba(0, 229, 160, 0.15);
    transition: height 0.1s linear;
    border-radius: 0 0 2px 2px;
}

.future-item {
    position: relative;
    margin-bottom: 40px;
    opacity: 0;
}

.future-item:last-child {
    margin-bottom: 0;
}

.future-marker {
    position: absolute;
    left: -52px;
    top: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.future-marker-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    background: var(--bg);
    transition: all 0.4s ease;
    z-index: 2;
}

.future-marker-ping {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    z-index: 1;
}

.future-item-active .future-marker-dot {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow-strong);
}

.future-item-active .future-marker-ping {
    animation: markerPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes markerPing {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    75%,
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Card layout with icon */
.future-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 32px;
    transition: all 0.4s var(--ease-out-expo);
    overflow: hidden;
}

.future-card:hover {
    border-color: rgba(0, 229, 160, 0.3);
    transform: translateY(-2px);
}

.future-card-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(0, 229, 160, 0.06) 0%, transparent 60%);
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.future-card:hover .future-card-glow {
    opacity: 1;
}

.future-card-content {
    flex: 1;
}

.future-item-active .future-card {
    border-color: var(--accent-glow-strong);
}

/* SVG Icons — stroke-draw animation */
.future-card-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.future-svg-icon {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.3));
}

.future-svg-icon .fi-stroke {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.future-svg-icon .fi-dot {
    fill: rgba(0, 229, 160, 0.15);
}

.future-svg-icon .fi-accent {
    stroke: #FF6B6B;
}

.future-svg-icon .fi-connector {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

/* When item animates in, draw the SVG */
.future-item.in-view .fi-stroke {
    stroke-dashoffset: 0;
}

.future-item.in-view .fi-connector {
    stroke-dashoffset: 0;
    transition-delay: 0.6s;
}

/* Subtle idle float for icons */
.future-item.in-view .future-card-icon {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

/* Scan-line shimmer on active card */
.future-item-active .future-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 160, 0.04), transparent);
    animation: cardShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cardShimmer {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

.future-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.future-card h4 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.future-card p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
}

.future-tech {
    text-align: center;
    opacity: 0;
}

.future-tech h4 {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.future-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.future-tech-tags span {
    padding: 8px 18px;
    background: var(--accent-glow);
    border: 1px solid rgba(0, 229, 160, 0.2);
    border-radius: 50px;
    font-size: 13px;
    color: var(--accent-light);
    font-weight: 500;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(16px) scale(0.9);
}

.future-tech-tags span.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.future-tech-tags span:hover {
    background: rgba(0, 229, 160, 0.2);
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(0, 229, 160, 0.15);
    transform: translateY(-2px) scale(1.04);
}

@media (max-width: 640px) {
    .future-timeline {
        padding-left: 40px;
    }

    .future-marker {
        left: -32px;
    }

    .future-card-icon {
        display: none;
    }
}

/* ==================== CONTACT ==================== */
.contact {
    padding: var(--section-padding) 0 calc(var(--section-padding) * 1.5);
}

.contact-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.contact-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
}

.contact-sub {
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.contact-cta {
    display: flex;
    justify-content: center;
}

/* ==================== FOOTER ==================== */
.footer {
    padding: 32px 0;
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 1;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--accent);
}

.footer-tagline {
    font-size: 13px;
    color: var(--text-muted);
}

.footer-copy {
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .footer-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-brand {
        flex-direction: column;
        gap: 4px;
    }
}

/* ==================== ANIMATIONS ==================== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

[data-animate].in-view {
    opacity: 1;
    transform: translateY(0);
}
/* ==================== FLOOR MODEL (Argus factory-floor animation) ==================== */
.floor-viz { max-width: 1180px; margin: 0 auto 48px; }
.floor-stats {
    display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px;
    background: var(--border); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden; margin: 0 0 20px;
}
.floor-stat { background: rgba(12,12,18,0.72); backdrop-filter: blur(12px); padding: 16px 20px; }
.floor-stat .v {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(20px, 2.2vw, 28px); line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.floor-stat .v .u { font-size: 14px; font-weight: 600; }
.floor-stat .v.grad {
    background: linear-gradient(135deg, #fff, #a0ffd8 60%, var(--accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.floor-stat .v.pass   { color: var(--accent); }
.floor-stat .v.rework { color: #f5b942; }
.floor-stat .v.fail   { color: var(--danger); }
.floor-stat .v.packed { color: #33FFC0; }
.floor-stat .k {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--text-secondary); margin-top: 8px;
}
.floor-stage {
    background: rgba(8,8,12,0.55); border: 1px solid var(--border);
    border-radius: 20px; padding: 8px; overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03);
}
#floorSvg { width: 100%; height: auto; display: block; }
.floor-legend {
    display: flex; gap: 18px; flex-wrap: wrap; padding: 12px 16px 6px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--text-secondary);
}
.floor-legend .grp { color: var(--text-muted); font-weight: 600; letter-spacing: 1.5px; }
.floor-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 7px; vertical-align: -1px; }
.floor-legend i.cam { border-radius: 50%; }
@media (max-width: 760px) { .floor-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px) { .floor-stats { grid-template-columns: repeat(2, 1fr); } }

/* Tighten the empty gap directly beneath the problem callout bar */
.section.problem { padding-bottom: clamp(36px, 5vh, 60px); }

/* ==================== TRACTION / LOGO MARQUEES ==================== */
.traction {
    position: relative;
    overflow: hidden;
}

.traction-headline {
    max-width: 780px;
    margin: 0 0 clamp(48px, 7vh, 80px);
}

.traction-headline h3 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.traction-headline p {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    max-width: 640px;
}

.traction-headline p + p {
    margin-top: 14px;
}

/* --- status pill --- */
.traction-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    margin-bottom: 24px;
    border: 1px solid var(--border-hover);
    border-radius: 100px;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.traction-status .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow-strong);
    animation: tractionPing 2.4s var(--ease-out-expo) infinite;
}

@keyframes tractionPing {
    0%   { box-shadow: 0 0 0 0 var(--accent-glow-strong); }
    70%  { box-shadow: 0 0 0 9px rgba(0, 229, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0); }
}

/* --- marquee scaffolding --- */
.marquee-block {
    margin-bottom: clamp(40px, 6vh, 64px);
}

.marquee-label {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.marquee-label strong {
    color: var(--accent);
    font-weight: 500;
}

.marquee {
    position: relative;
    overflow: hidden;
    /* soft fade at both edges so items enter/exit instead of popping */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
    will-change: transform;
    animation: marqueeScroll var(--marquee-duration, 60s) linear infinite;
}

.marquee--reverse .marquee-track {
    animation-direction: reverse;
}

/* Track holds the item list twice; -50% lands exactly on the seam. */
@keyframes marqueeScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
    animation-play-state: paused;
}

/* --- factory logo chips --- */
.logo-chip {
    flex: 0 0 auto;
    width: 176px;
    height: 112px;
    display: block;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--border);
    filter: grayscale(1);
    opacity: 0.78;
    transition: opacity 0.4s var(--ease-out-quart),
                filter 0.4s var(--ease-out-quart),
                transform 0.4s var(--ease-out-quart),
                box-shadow 0.4s var(--ease-out-quart);
}

/* The img box fills the chip's content box exactly and object-fit centres the
   bitmap inside it. Percentage max-height on an intrinsically-sized image is
   unreliable here (it overflowed and clipped), so size the box explicitly. */
.logo-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.logo-chip:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
                0 0 0 1px var(--accent-glow-strong);
}

/* --- buyer wordmarks --- */
/* Set as a wall of type rather than chips: no box, no fill. The spacing comes
   from each item's own padding so the track gap stays at 0. */
.brand-chip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0 clamp(22px, 3.2vw, 52px);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.4vw, 1.95rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    opacity: 0.6;
    transition: opacity 0.4s var(--ease-out-quart);
}

.brand-chip:hover {
    opacity: 1;
}

.marquee-track--type {
    gap: 0;
    align-items: center;
}

/* A long mask ramp makes each name rise to full strength as it nears the
   centre and fall away again — the brightening is the mask, not per-item JS. */
.marquee--soft {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --- footnote --- */
.traction-note {
    max-width: 720px;
    margin-top: clamp(28px, 4vh, 44px);
    padding-left: 16px;
    border-left: 2px solid var(--border-hover);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

@media (max-width: 640px) {
    .logo-chip {
        width: 144px;
        height: 92px;
    }

    .brand-chip {
        padding: 0 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }

    .marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .traction-status .dot {
        animation: none;
    }
}

/* ==================== TEAM ==================== */
.team-headline {
    max-width: 760px;
    margin: 0 0 clamp(48px, 7vh, 80px);
}

.team-headline h3 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.team-headline p {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
    max-width: 660px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 40px);
}

.team-card {
    position: relative;
    padding: 32px 24px 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color 0.45s var(--ease-out-quart),
                transform 0.45s var(--ease-out-quart),
                background 0.45s var(--ease-out-quart);
}

.team-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-glow-strong);
    background: var(--surface-solid);
}

.team-avatar {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto 22px;
    border-radius: 50%;
    overflow: hidden;
    /* ring sits outside the clipped circle so it never crops the photo */
    box-shadow: 0 0 0 1px var(--border-hover);
    transition: box-shadow 0.45s var(--ease-out-quart);
}

.team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(1) contrast(1.02);
    transition: filter 0.5s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
}

.team-card:hover .team-avatar {
    box-shadow: 0 0 0 1px var(--accent-dim),
                0 0 24px var(--accent-glow);
}

.team-card:hover .team-avatar img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.04);
}

.team-name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 8px;
}

/* Reserve two lines so a role that wraps doesn't push its bio out of line
   with the neighbouring cards. */
.team-role {
    display: block;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent);
    min-height: 3em;
    margin-bottom: 12px;
}

.team-bio {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.65;
    text-align: center;
}

.team-note {
    max-width: 720px;
    margin-top: clamp(36px, 5vh, 56px);
    padding-left: 16px;
    border-left: 2px solid var(--border-hover);
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .team-card {
        padding: 28px 22px;
    }
}

/* Manual line breaks in display headlines only help once there's width for them. */
@media (max-width: 640px) {
    .br-lg {
        display: none;
    }
}

/* ================================================================
   MOBILE REFINEMENTS
   Phone-first corrections for the hero, the 3D viewer and the wide
   floor diagram, which were all laid out for landscape space.
   ================================================================ */

/* 100vh on phones measures the viewport with the address bar retracted, so
   the hero runs taller than what is actually on screen and pushes the CTA
   below the fold. svh is the visible height. */
@supports (min-height: 100svh) {
    .hero {
        min-height: 100svh;
    }
}

/* The base rule nudges the mark 60px right so it overlaps the headline block
   on desktop. Once the hero stacks, that nudge just throws it off-centre. */
@media (max-width: 900px) {
    .hero-logo-visual {
        margin-right: 0;
        align-self: center;
    }
}

@media (max-width: 640px) {
    /* 12vh top and bottom put ~200px of dead space between every section on a
       phone. Tighter rhythm keeps the page scannable without changing desktop. */
    :root {
        --section-padding: clamp(52px, 7.5vh, 76px);
    }

    .section-header {
        margin-bottom: 40px;
        gap: 14px;
    }

    .future-timeline {
        margin-bottom: 48px;
    }

    /* --- Hero --- */
    .hero {
        gap: 4px;
    }

    /* The mark was claiming ~60vw plus 100px of lead-in, which pushed the
       headline off the first screen. */
    .hero-logo-visual {
        width: 200px;
        max-width: 48vw;
        padding-top: 76px;
    }

    .hero-content {
        padding-top: 4px;
    }

    .hero-badge {
        font-size: 11px;
        padding: 6px 14px;
    }

    /* The 42px floor left "Quality Control for" one word too wide on a 360px
       screen, orphaning "for" onto its own line. */
    .hero-title {
        font-size: clamp(34px, 9.5vw, 42px);
        letter-spacing: -1.5px;
    }

    /* Equal columns keep the three figures aligned even when one label wraps
       to two lines; the dividers stop earning their space at this width. */
    .hero-stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
        gap: 10px;
        margin-bottom: 34px;
    }

    .hero-stat-divider {
        display: none;
    }

    .hero-stat-number {
        font-size: 30px;
    }

    .hero-stat-prefix {
        font-size: 20px;
    }

    .hero-stat-unit {
        font-size: 14px;
    }

    .hero-stat-label {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    /* Equal halves: even widths, no pill jammed against the screen edge, and
       far less vertical space than two full-width blocks. 44px tall is the
       minimum comfortable touch target, so height comes from padding alone. */
    .hero-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
        padding: 13px 10px;
        font-size: 13px;
        gap: 6px;
    }

    /* Touch already implies scrolling, and the hint collides with a tall hero. */
    .hero-scroll {
        display: none;
    }

    /* --- Buttons elsewhere --- */
    /* btn-lg was a separate, larger scale; on a phone that reads as oversized
       next to the hero pair. Collapse the two scales into one. */
    .btn {
        padding: 13px 24px;
        font-size: 13px;
    }

    .btn-lg {
        padding: 14px 28px;
        font-size: 14px;
    }

    .contact-cta .btn {
        width: auto;
        min-width: 200px;
        justify-content: center;
    }
}

/* --- 3D viewer --- */
@media (max-width: 768px) {
    .visualizer-canvas-wrap {
        height: 62vh;
        min-height: 380px;
    }

    /* At 220px min-width the panel covered most of a phone screen. Docked
       full-width with the readings in two columns, it stays short. */
    .viz-hud {
        top: 10px;
        left: 10px;
        right: 10px;
        min-width: 0;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .viz-hud-title {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .viz-hud-measurements {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    .viz-measurement-row {
        padding: 3px 0;
    }

    .viz-measurement-name {
        font-size: 10px;
    }

    .viz-measurement-value {
        font-size: 11px;
    }

    .viz-controls {
        bottom: 12px;
        right: 12px;
        gap: 6px;
    }
}

/* --- Factory floor plan --- */
/* Deliberately left to scale to fit rather than holding a fixed width behind a
   horizontal scroll. SVG renders at device resolution, so at the 2-3x DPR of a
   real phone the labels stay readable at fit-to-width — and a pannable region
   inside a vertically scrolling page mostly goes undiscovered, leaving readers
   with what looks like a cropped diagram. */