/* MANDROK — FINAL EXPERIENCE WITH GSAP & PURPLE ACCENTS */

/* ==================== RESET ==================== */

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

:root {
    --black: #0F1010;
    --steel: #686B6B;
    --stone: #E5E5E5;
    --white: #FAFAFA;
    --purple: #E04700;
    --purple-light: #C04000;
    --purple-dark: #A83800;

    /* diagonal shine swept across the filled CTA pills on hover —
       a light layer over the solid fill, not a separate clipped element */
    --cta-sheen: linear-gradient(115deg,
        transparent 38%,
        rgba(255, 255, 255, 0.5) 48%,
        rgba(255, 255, 255, 0.5) 52%,
        transparent 62%);
    --cta-sheen-rest: 130% -60%;
    --cta-sheen-active: -30% 90%;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--black);
    color: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ==================== PRELOADER ====================
   A precision instrument powering up, not a generic loader:
   frame assembles -> traces activate -> diagnostic scan -> mark
   resolves -> system reports ready. Driven by experience-final.js,
   which advances a single 0-100 value through CAD/ANALYSIS/
   INTELLIGENCE/READY and toggles the classes below. */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(104, 107, 107, 0.05) 39px, rgba(104, 107, 107, 0.05) 40px),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(104, 107, 107, 0.05) 39px, rgba(104, 107, 107, 0.05) 40px);
    pointer-events: none;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* ---------- the rig ---------- */

.preloader-rig {
    width: 240px;
    height: 240px;
    overflow: visible;
}

.rig-frame {
    stroke: var(--steel);
    stroke-width: 1;
    stroke-dasharray: 1120;
    stroke-dashoffset: 1120;
    animation: rigDraw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

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

.rig-corner {
    stroke: var(--stone);
    stroke-width: 1.6;
    stroke-linecap: square;
    opacity: 0;
    animation: rigCornerIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
.rig-corner-tl { transform-origin: 20px 20px; }
.rig-corner-tr { transform-origin: 300px 20px; }
.rig-corner-br { transform-origin: 300px 300px; }
.rig-corner-bl { transform-origin: 20px 300px; }

@keyframes rigCornerIn {
    from { opacity: 0; transform: scale(1.5); }
    to { opacity: 1; transform: scale(1); }
}

.rig-trace {
    opacity: 0;
    animation: rigFadeIn 0.4s ease-out 0.5s forwards;
}

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

.rig-trace-line {
    stroke: var(--steel);
    stroke-width: 1.2;
}

.rig-trace-via {
    fill: var(--steel);
}

.rig-trace-pad {
    fill: var(--black);
    stroke: var(--steel);
    stroke-width: 1;
}

.rig-trace.active .rig-trace-line {
    animation: traceLine 0.5s ease-out forwards;
}

.rig-trace.active .rig-trace-via {
    animation: traceVia 0.5s ease-out 0.1s forwards;
}

.rig-trace.active .rig-trace-pad {
    animation: tracePad 0.6s ease-out 0.15s forwards;
}

@keyframes traceLine {
    0%   { stroke: var(--steel); }
    50%  { stroke: var(--purple); filter: drop-shadow(0 0 3px rgba(224, 71, 0, 0.7)); }
    100% { stroke: var(--steel); filter: none; }
}

@keyframes traceVia {
    0%   { fill: var(--steel); }
    50%  { fill: var(--purple); }
    100% { fill: var(--steel); }
}

@keyframes tracePad {
    0%   { fill: var(--black); stroke: var(--steel); filter: none; }
    45%  { fill: var(--purple); stroke: var(--purple); filter: drop-shadow(0 0 5px rgba(224, 71, 0, 0.85)); }
    100% { fill: var(--purple); stroke: var(--purple); filter: none; }
}

/* ---------- GD&T callouts ---------- */

.pre-gdt {
    opacity: 0;
}

.pre-gdt.active {
    animation: rigFadeIn 0.45s ease-out forwards;
}

.pre-gdt-leader {
    stroke: var(--steel);
    stroke-width: 1;
    fill: none;
}

.pre-gdt-flag {
    fill: var(--steel);
}

.pre-gdt-box,
.pre-fcf-box {
    fill: var(--black);
    stroke: var(--steel);
    stroke-width: 1;
}

.pre-gdt-text {
    font-family: 'Inter', monospace;
    font-size: 9px;
    letter-spacing: 0.02em;
    fill: var(--stone);
}

.pre-dim-text {
    font-size: 9px;
    letter-spacing: 0.05em;
}

.rig-mark {
    opacity: 0;
    animation: rigFadeIn 0.5s ease-out 0.35s forwards;
}

.rig-mark polygon {
    fill: var(--white);
    fill-opacity: 0;
    stroke: var(--steel);
    stroke-width: 1.4;
    transition: fill-opacity 0.5s ease, stroke 0.5s ease;
}

.rig-mark.resolved polygon {
    fill-opacity: 1;
    stroke: var(--white);
}

.rig-mark.resolved {
    /* .resolved's `animation` replaces (not merges with) the entrance
       fade above, which would otherwise drop `opacity` back to its
       unanimated base of 0 the instant this rule takes over — pin it
       explicitly so the mark stays visible through the resolve pulse. */
    opacity: 1;
    animation: markResolve 0.7s ease-out;
}

@keyframes markResolve {
    0%   { filter: drop-shadow(0 0 0 rgba(224, 71, 0, 0)); }
    45%  { filter: drop-shadow(0 0 16px rgba(224, 71, 0, 0.75)); }
    100% { filter: drop-shadow(0 0 0 rgba(224, 71, 0, 0)); }
}

.rig-scan {
    opacity: 0;
    transform-box: fill-box;
}

.rig-scan.scan-active {
    animation: rigScan 1.15s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes rigScan {
    0%   { transform: translateY(0); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(230px); opacity: 0; }
}

/* ---------- wordmark ---------- */

.preloader-text {
    display: flex;
    gap: 8px;
}

.preloader-letter {
    font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--white);
    opacity: 0;
    animation: letterFadeIn 0.5s ease-out forwards;
}

.preloader-letter:nth-child(1) { animation-delay: 1.85s; }
.preloader-letter:nth-child(2) { animation-delay: 1.93s; }
.preloader-letter:nth-child(3) { animation-delay: 2.01s; }
.preloader-letter:nth-child(4) { animation-delay: 2.09s; }
.preloader-letter:nth-child(5) { animation-delay: 2.17s; }
.preloader-letter:nth-child(6) { animation-delay: 2.25s; }
.preloader-letter:nth-child(7) { animation-delay: 2.33s; }

@keyframes letterFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- stage / scale / percent readout ---------- */

.preloader-readout {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 240px;
}

.preloader-stage {
    font-family: 'Inter', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--purple);
    text-transform: uppercase;
    min-width: 92px;
}

.preloader-scale {
    position: relative;
    flex: 1;
    height: 14px;
}

.preloader-scale-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(250, 250, 250, 0.14);
}

.preloader-scale-tick {
    position: absolute;
    top: 50%;
    width: 1px;
    height: 7px;
    background: rgba(250, 250, 250, 0.22);
    transform: translate(-50%, -50%);
}

.preloader-scale-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 2px;
    height: 11px;
    background: var(--purple);
    box-shadow: 0 0 8px rgba(224, 71, 0, 0.7);
    transform: translate(-50%, -50%);
    transition: left 0.1s linear;
}

.preloader-pct {
    font-family: 'Inter', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--stone);
    min-width: 34px;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .preloader * {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== NAVIGATION ==================== */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 32px 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav.scrolled {
    padding: 20px 0;
    background: rgba(15, 16, 16, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(216, 91, 91, 0.3);
}

.nav-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-svg {
    height: 20px;
    width: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.logo-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--white);
}

.nav-logo:hover .logo-svg {
    opacity: 0.7;
}

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

.nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--steel);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--purple-light);
}

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

.btn-primary {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    isolation: isolate;
    padding: 12px 28px;
    background: transparent;
    color: var(--white);
    border: 1px solid #E04700;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    display: inline-block;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #E04700;
    z-index: -1;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary::after {
    content: '→';
    margin-left: 8px;
    font-size: 14px;
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
    color: var(--black);
    border-color: #E04700;
    box-shadow: 0 8px 24px rgba(224, 71, 0, 0.25);
}

.btn-primary:hover::before {
    left: 0;
}

.btn-primary:hover::after {
    transform: translateX(4px);
}

/* ==================== HERO SECTION ==================== */

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    overflow: hidden;
}

/* .hero-bg::before flat grid replaced by .hero-grid (curved reference plane) */
/* .hero-bg::after crosshair removed */

.hero-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    pointer-events: none;
    perspective: 1000px;
    animation: heroGridBreathe 10s ease-in-out infinite;
}

/* The plane that actually tilts toward the cursor — sized slightly larger
   than its container so a few degrees of rotation never reveals an edge. */
.hero-grid-plane {
    position: absolute;
    inset: -12%;
    will-change: transform;
}

.hero-grid-plane svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-grid-ticks path {
    transform-box: fill-box;
    transform-origin: center;
    animation: heroTickPulse 3.2s ease-in-out infinite;
}
.hero-grid-ticks path:nth-child(1) { animation-delay: 0s; }
.hero-grid-ticks path:nth-child(2) { animation-delay: 0.7s; }
.hero-grid-ticks path:nth-child(3) { animation-delay: 1.4s; }
.hero-grid-ticks path:nth-child(4) { animation-delay: 2.1s; }

@keyframes heroGridBreathe {
    0%, 100% { opacity: 0.38; }
    50% { opacity: 0.56; }
}

@keyframes heroTickPulse {
    0%, 100% { opacity: 0.4; stroke-width: 1.2px; }
    50% { opacity: 1; stroke-width: 2.4px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-grid,
    .hero-grid-ticks path {
        animation: none !important;
    }
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.15;
    z-index: 0;
    object-fit: cover;
}

/* ==================== HERO CAD VISUALIZATION ====================
   A machined mounting bracket in isometric, analysed in five phases.
   Everything here is background: dark graphite surfaces, thin technical
   linework, and warm orange reserved for the feature under analysis. */

.cad-visualization {
    position: absolute;
    /* Confined to the right half so the headline column stays quiet */
    top: 50%;
    right: 0;
    left: 52%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 40px 0 0;
    pointer-events: none;
    z-index: 1;
}

.cad-stage {
    width: 100%;
    max-width: 700px;
    height: auto;
    max-height: 82vh;
    overflow: visible;
}

/* Below the two-column breakpoint the copy re-centres, and there is no
   column left for the part to live in without sitting behind the headline.
   The engineering grid carries the background instead. */
@media (max-width: 1099px) {
    .cad-visualization {
        display: none;
    }
}

/* ---------- Surfaces & linework ---------- */

.part-face {
    opacity: 0;
}

.part-edge {
    fill: none;
    stroke: rgba(229, 229, 229, 0.26);
    stroke-width: 1;
    stroke-linejoin: round;
    opacity: 0;
}

.part-edge-strong {
    stroke: rgba(229, 229, 229, 0.52);
    stroke-width: 1.25;
}

.part-edge-fine {
    stroke: rgba(229, 229, 229, 0.16);
    stroke-width: 0.75;
}

.bore-mouth {
    stroke: rgba(229, 229, 229, 0.45);
    stroke-width: 1.15;
}

/* ---------- Phase caption ---------- */

.phase-caption {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    fill: rgba(104, 107, 107, 0.9);
    opacity: 0;
}

/* ---------- Active feature highlight ---------- */

.hl {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.6;
    stroke-linejoin: round;
    opacity: 0;
}

/* ---------- Leader lines & labels ---------- */

.feat {
    opacity: 0;
}

.leader {
    stroke: rgba(229, 229, 229, 0.28);
    stroke-width: 0.85;
    fill: none;
}

.leader-dot {
    fill: #E04700;
}

.feat-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: rgba(250, 250, 250, 0.92);
}

.feat-detail {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    fill: rgba(104, 107, 107, 0.95);
}

/* Swapped in during the strategy phase */
.proc-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: #E04700;
    opacity: 0;
}

/* ---------- Result state ---------- */

#resultGroup {
    opacity: 0;
}

.result-rule {
    stroke: rgba(229, 229, 229, 0.12);
    stroke-width: 1;
}

.result-block {
    opacity: 0;
}

.result-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    fill: rgba(104, 107, 107, 0.95);
}

.result-value {
    font-family: 'Parkinsans', 'Inter', sans-serif;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.01em;
    fill: rgba(250, 250, 250, 0.96);
}

.result-value-accent {
    fill: #E04700;
}

/* Retired radar / HUD / orbital visual language */
.coordinate-system,
.axis-line,
.cnc-crosshair,
.crosshair-dot,
.scanline,
.grid-circle,
.tick-mark,
.orbital-system,
.orbital-annotations,
.orbit-ring,
.connection-line,
.connection-dot,
.flow-particle,
.particle-canvas {
    display: none;
}

/* ==================== HERO CONTENT ==================== */

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1400px;
    padding: 0 60px;
}

/* Two-column hero: copy left, machined part right. This is what keeps the
   CAD visual from ever landing behind the headline. */
@media (min-width: 1100px) {
    .hero {
        justify-content: flex-start;
    }

    .hero-content {
        width: 100%;
        max-width: 1560px;
        margin: 0 auto;
        text-align: left;
        padding: 0 72px;
        /* Right column is a reserved void the CAD stage sits in */
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .hero-content > .symbol-stage,
    .hero-content > .hero-text {
        grid-column: 1;
    }

    .hero-subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-actions {
        justify-content: flex-start;
    }
}

.symbol-stage {
    position: relative;
    width: 300px;
    height: 270px;
    margin: 0 auto 60px;
    z-index: 10;
}

/* The mark is an accent here, not the headline's rival */
@media (min-width: 1100px) {
    .symbol-stage {
        width: 132px;
        height: 119px;
        margin: 0 0 34px;
    }
}

.interactive-symbol {
    width: 100%;
    height: 100%;
    cursor: pointer;
    filter: drop-shadow(0 0 40px rgba(216, 91, 91, 0.3));
}

.jaw {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-text {
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

.hero-title {
    font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 96px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
}

.title-line {
    display: block;
    color: var(--white);
}

.hero-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;
    color: var(--steel);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto 40px;
}

.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    /* center, not stretch, so the primary stays visibly taller */
    align-items: center;
    position: relative;
    z-index: 10;
}

.btn-hero,
.btn-hero-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* PRIMARY — solid warm orange on black is the highest-contrast pairing
   available in the palette, so the eye lands here first. */
.btn-hero {
    gap: 12px;
    padding: 21px 44px;
    background-color: #E04700;
    background-image: var(--cta-sheen);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: var(--cta-sheen-rest);
    color: #0F1010;
    border: 1px solid #E04700;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    /* hairline top highlight reads as a machined edge, not a glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
                0 10px 30px rgba(224, 71, 0, 0.22);
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero:hover {
    background-color: #F25200;
    background-position: var(--cta-sheen-active);
    border-color: #F25200;
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 16px 40px rgba(224, 71, 0, 0.3);
}

.btn-hero:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.12s;
}

.btn-hero-arrow {
    width: 17px;
    height: 17px;
    color: #0F1010;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero:hover .btn-hero-arrow {
    transform: translateX(5px);
}

/* SECONDARY — deliberately quiet: no fill, hairline border, lighter text */
.btn-hero-secondary {
    padding: 19px 34px;
    background: transparent;
    color: rgba(250, 250, 250, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    box-shadow: none;
}

.btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.28);
    color: rgba(250, 250, 250, 0.92);
}

.technical-hud {
    position: absolute;
    top: 120px;
    left: 60px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hud-item {
    display: flex;
    gap: 12px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

.hud-label {
    color: var(--steel);
    font-weight: 600;
    letter-spacing: 0.1em;
    min-width: 60px;
}

.hud-value {
    color: var(--purple-light);
    font-weight: 400;
}

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.scroll-indicator span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--purple) 0%, transparent 100%);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(10px); }
}

/* ==================== STATS SECTION ==================== */

.stats-section {
    padding: 120px 60px;
    background: linear-gradient(180deg, var(--black) 0%, #0A0B0B 100%);
    border-top: 1px solid rgba(216, 91, 91, 0.2);
}

.stats-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
}

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

.stat-number {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--white);
    margin-bottom: 16px;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
    margin-bottom: 8px;
}

.stat-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--purple-light);
}

/* ==================== SYSTEM SECTION (SCROLL-DRIVEN ANALYSIS) ==================== */

.system {
    height: 260vh;
    position: relative;
}

.sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.system-inner {
    width: 90vw;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 38% 62%;
    gap: 4vw;
    align-items: center;
}

.system-copy h2 {
    font-size: clamp(45px, 5vw, 82px);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin: 20px 0;
}

.system-copy .kicker {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.18em;
    color: #686d6d;
    text-transform: uppercase;
}

.system-copy .sub {
    color: #838888;
    max-width: 650px;
    font-size: 17px;
    line-height: 1.7;
}

.status {
    font: 11px ui-monospace, monospace;
    color: #717777;
    margin-top: 30px;
    letter-spacing: 0.08em;
}

.status span {
    color: #8eb0ff;
}

.stage {
    height: 560px;
    position: relative;
    border: 1px solid #202525;
    background: radial-gradient(circle at 60% 45%, #18202a 0, #0f1213 45%, #0a0b0b 100%);
    overflow: hidden;
}

.stagegrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#26313c33 1px, transparent 1px), linear-gradient(90deg, #26313c33 1px, transparent 1px);
    background-size: 34px 34px;
    transform: perspective(500px) rotateX(58deg) scale(1.7);
    transform-origin: center bottom;
}

.stagepart {
    position: absolute;
    width: 55%;
    aspect-ratio: 1.15;
    left: 23%;
    top: 25%;
    border: 1px solid #a2a7a7;
    border-radius: 14px;
    background: linear-gradient(135deg, #242929, #101313);
    box-shadow: inset 0 0 0 1px #ffffff0c, 0 30px 80px #000;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.stagepart:before {
    content: "";
    position: absolute;
    left: 25%;
    top: 24%;
    width: 50%;
    height: 45%;
    border: 1px solid #6d7474;
    border-radius: 9px;
    background: #080a0a;
    box-shadow: inset 0 0 30px #000;
}

/* 2D Flat Part for PROCESS stage */
.stagepart-2d {
    position: absolute;
    width: 60%;
    height: 50px;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #3a4246 0%, #242929 50%, #1a1d1d 100%);
    border: 2px solid #6d7474;
    border-radius: 4px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.5),
        0 8px 24px rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Top edge highlight */
.stagepart-2d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, #4a5458 0%, transparent 100%);
    border-radius: 2px 2px 0 0;
}

/* Bottom edge shadow */
.stagepart-2d::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, transparent 0%, #0a0d0d 100%);
    border-radius: 0 0 2px 2px;
}

/* Part Features - Holes and Slot */
.part-hole {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #000 0%, #1a1d1d 50%, #2a2e2e 100%);
    border: 2px solid #587dc8;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.8), 0 0 20px rgba(88, 125, 200, 0.4);
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s ease;
}

.part-hole::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

.hole-1 {
    left: 15%;
    top: 10%;
}

.hole-2 {
    right: 15%;
    top: 10%;
}

.part-slot {
    position: absolute;
    left: 35%;
    bottom: 12%;
    width: 30%;
    height: 10%;
    border-radius: 20px;
    background: linear-gradient(90deg, #000 0%, #0a0d0d 50%, #000 100%);
    border: 2px solid #587dc8;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.8), 0 0 20px rgba(88, 125, 200, 0.4);
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.5s ease;
}

.part-slot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 50%;
    transform: translateY(-50%);
    background: #000;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.9);
}

/* CNC Tool */
.cnc-tool {
    position: absolute;
    width: 60px;
    height: 140px;
    left: 20%;
    top: 15%;
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 10;
}

/* Tool spindle/head body */
.cnc-tool::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 80px;
    background: linear-gradient(180deg, #6a7478 0%, #4a5458 50%, #3a4246 100%);
    border-radius: 4px;
    box-shadow:
        inset 3px 0 6px rgba(255,255,255,0.3),
        inset -3px 0 6px rgba(0,0,0,0.5),
        0 4px 10px rgba(0,0,0,0.6);
}

/* Endmill cutting tool */
.cnc-tool::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 60px;
    background: linear-gradient(180deg, #9aa4a9 0%, #7a8489 30%, #5a6468 70%, #4a5458 100%);
    border-radius: 2px;
    box-shadow:
        inset 2px 0 3px rgba(255,255,255,0.5),
        inset -2px 0 3px rgba(0,0,0,0.6),
        0 3px 8px rgba(0,0,0,0.7);
}

.feature {
    position: absolute;
    border: 1px solid #587dc8;
    color: #8eb0ff;
    padding: 8px 10px;
    background: #0c1018e8;
    font: 9px ui-monospace, monospace;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
}

.f1 { left: 8%; top: 20%; }
.f2 { right: 8%; top: 20%; }
.f3 { left: 16%; bottom: 22%; }
.f4 { right: 15%; bottom: 15%; }

.stage.features-visible .part-hole,
.stage.features-visible .part-slot {
    opacity: 1;
    transform: scale(1);
}

.stage.process-visible .stagepart {
    opacity: 0;
    transform: scale(0.8);
}

.stage.process-visible .stagepart-2d {
    opacity: 1;
}

.stage.process-visible .cnc-tool {
    opacity: 1;
    transform: translateX(0);
    animation: milling 4s ease-in-out infinite;
}

.stage.process-visible .part-hole,
.stage.process-visible .part-slot {
    opacity: 0;
}

@keyframes milling {
    0% {
        transform: translateX(0) translateY(0);
    }
    15% {
        transform: translateX(0) translateY(35px);
    }
    40% {
        transform: translateX(280px) translateY(35px);
    }
    55% {
        transform: translateX(280px) translateY(0);
    }
    70% {
        transform: translateX(140px) translateY(0);
    }
    85% {
        transform: translateX(140px) translateY(35px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}

/* Machining path line */
.stage.process-visible::after {
    content: '';
    position: absolute;
    left: 23%;
    top: 46%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #E04700 10%, #C04000 50%, #E04700 90%, transparent 100%);
    box-shadow: 0 0 15px #E04700, 0 0 30px rgba(216, 91, 91, 0.5);
    opacity: 0;
    animation: toolpathGlow 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes toolpathGlow {
    0%, 14% {
        opacity: 0;
        width: 0;
    }
    15% {
        opacity: 0;
        width: 0;
    }
    20% {
        opacity: 0.9;
        width: 10px;
    }
    40% {
        opacity: 0.9;
        width: 310px;
    }
    55%, 100% {
        opacity: 0;
        width: 310px;
    }
}

.stage.active .feature {
    opacity: 1;
    transform: none;
}

.stage.active .stagepart {
    transform: scale(1.03) rotate(-4deg);
}

.progressline {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #ffffff10;
}

.progressline i {
    display: block;
    height: 100%;
    width: 0;
    background: #8eb0ff;
    box-shadow: 0 0 16px #6d95ff;
    transition: width 0.1s;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #242828;
    margin-top: 32px;
}

.metric {
    background: #0f1010;
    padding: 24px 20px;
}

.metric label {
    display: block;
    font: 9px ui-monospace, monospace;
    color: #666b6b;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.metric strong {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.03em;
}

/* ==================== OLD TRANSFORMATION SECTION (HIDDEN) ==================== */

.scan-line {
    position: absolute;
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--purple) 50%, transparent 100%);
    box-shadow: 0 0 20px var(--purple);
    opacity: 0;
    z-index: 10;
}

.transform-part {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 60px;
}

.transform-part svg,
.transform-part spline-viewer {
    width: 100%;
    height: auto;
}

spline-viewer {
    background: var(--black) !important;
    pointer-events: none;
}

spline-viewer::part(canvas) {
    background: transparent !important;
}

spline-viewer::part(logo),
spline-viewer::part(controls) {
    display: none !important;
}

.data-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 60px;
}

.data-panel {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.data-item {
    position: relative;
}

.data-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.data-value {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -0.01em;
    color: var(--white);
    font-family: 'Courier New', monospace;
    transition: opacity 0.4s ease;
}

.manual-value {
    opacity: 1;
}

.intelligent-value {
    position: absolute;
    top: 24px;
    left: 0;
    opacity: 0;
    color: var(--purple);
}

.feature-detections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.detection-label {
    position: absolute;
    padding: 8px 12px;
    background: rgba(216, 91, 91, 0.1);
    border: 1px solid var(--purple);
    border-radius: 2px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.detection-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--purple);
    margin-bottom: 2px;
}

.detection-depth {
    font-size: 10px;
    font-weight: 400;
    color: var(--purple-light);
    font-family: 'Courier New', monospace;
}

.confidence-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(15, 16, 16, 0.8);
    border: 1px solid var(--steel);
    border-radius: 2px;
    opacity: 0;
}

.confidence-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
}

.confidence-value {
    font-size: 32px;
    font-weight: 300;
    color: var(--purple);
    font-family: 'Courier New', monospace;
}

.confidence-unit {
    font-size: 16px;
    font-weight: 400;
    color: var(--purple);
}

.transformation-footer {
    margin-top: 40px;
    text-align: center;
}

.transformation-note {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
    opacity: 0.5;
}

/* ==================== QUOTING SECTION (ANIME.JS TEXT REVEAL) ==================== */

.quoting-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 60px;
    background: var(--black);
    overflow: hidden;
}

.quoting-content {
    max-width: 1400px;
    width: 100%;
}

.quoting-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
    margin-bottom: 40px;
    text-transform: uppercase;
}

.quoting-title {
    font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 96px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 48px;
    word-spacing: 0.25em;
}

.quoting-title .word {
    display: inline;
    color: rgba(250, 250, 250, 0.03);
    transition: color 0.3s ease;
}

.quoting-title .word.active {
    color: var(--white);
}

.quoting-subtitle {
    font-size: 20px;
    color: var(--steel);
    line-height: 1.8;
    max-width: 800px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.quoting-subtitle.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== FEATURE SECTIONS ==================== */

.features-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
}

.feature-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-sticky {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 60px;
    background: var(--black);
    border-top: 1px solid rgba(216, 91, 91, 0.1);
}

.feature-grid {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.feature-section[data-section="02"] .feature-grid,
.feature-section[data-section="04"] .feature-grid {
    direction: rtl;
}

.feature-section[data-section="02"] .feature-grid > *,
.feature-section[data-section="04"] .feature-grid > * {
    direction: ltr;
}

/* Feature Visual */

.feature-visual {
    position: relative;
}

.visual-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--purple);
    margin-bottom: 24px;
}

.technical-drawing {
    width: 100%;
    height: auto;
    padding: 40px;
    background: rgba(15, 16, 16, 0.5);
    border: 1px solid rgba(216, 91, 91, 0.3);
}

/* SVG Drawing Animation Classes */

.draw-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.draw-fill {
    opacity: 0;
}

.dim-text, .balloon-text, .tb-text {
    opacity: 0;
}

/* Feature Text */

.feature-text {
}

.feature-number {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--purple);
    margin-bottom: 24px;
}

.feature-title {
    font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 32px;
    line-height: 1;
}

.feature-description {
    font-size: 18px;
    color: var(--steel);
    line-height: 1.8;
    margin-bottom: 40px;
}

.feature-list {
    list-style: none;
}

.feature-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(216, 91, 91, 0.1);
    font-size: 15px;
    color: var(--stone);
}

.item-icon {
    color: var(--purple);
    font-size: 18px;
}

/* Cost Breakdown */

.cost-breakdown {
    margin-top: 40px;
}

.cost-line {
    display: grid;
    grid-template-columns: 120px 1fr 100px;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(216, 91, 91, 0.1);
}

.cost-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--steel);
}

.cost-bar {
    height: 8px;
    background: rgba(216, 91, 91, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.cost-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--purple-dark), var(--purple-light));
    width: 0;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.cost-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    text-align: right;
}

.cost-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid rgba(216, 91, 91, 0.4);
}

.cost-total-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--purple);
}

.cost-total-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--white);
}

/* ==================== PRICING SECTION REMOVED ==================== */

/* ==================== CTA SECTION ==================== */

.cta {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 60px;
    background: #FAFAFA;
    overflow: hidden;
}

.cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(229, 229, 229, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229, 229, 229, 0.5) 1px, transparent 1px);
    background-size: 50px 50px;
}

.purple-radial {
    display: none;
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
}

.cta-symbol {
    width: 100px;
    height: auto;
    margin: 0 auto 32px;
    filter: none;
}

.cta-symbol g {
    fill: var(--black);
}

.cta-kicker {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--steel);
    margin-bottom: 32px;
    text-transform: uppercase;
}

.cta-title {
    font-family: 'Parkinsans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 96px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    line-height: 1;
    color: var(--black);
}

.cta-title .highlight {
    color: var(--steel);
}

.cta-subtitle {
    font-size: 18px;
    color: var(--steel);
    margin-bottom: 48px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Final CTA button — orange on white section, unmissable */
.btn-cta {
    position: relative;
    isolation: isolate;
    padding: 22px 52px;
    background-color: #E04700;
    background-image: var(--cta-sheen);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: var(--cta-sheen-rest);
    color: #0F1010;
    border: 1px solid #E04700;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
                0 10px 30px rgba(224, 71, 0, 0.28);
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* always visible — no GSAP dependency */
    opacity: 1 !important;
}

.btn-cta:hover {
    background-color: #F25200;
    background-position: var(--cta-sheen-active);
    border-color: #F25200;
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 18px 44px rgba(224, 71, 0, 0.36);
}

.btn-cta:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.12s;
}

.cta-reassurance {
    display: block;
    margin-top: 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--steel);
    opacity: 0.7;
}

.cta-features {
    display: none;
}

/* ==================== INTERMEDIATE CTA ==================== */

.mid-cta {
    position: relative;
    padding: 160px 60px;
    background: #000000;
    text-align: center;
    overflow: hidden;
}

.mid-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(224, 71, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.mid-cta-content {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2;
}

.mid-cta-kicker {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #E04700;
    margin-bottom: 24px;
    padding: 6px 16px;
    border: 1px solid rgba(224, 71, 0, 0.3);
    border-radius: 2px;
}

.mid-cta-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 24px;
}

.mid-cta-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--steel);
    max-width: 600px;
    margin: 0 auto 48px;
}

.btn-mid-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 40px;
    background: transparent;
    color: var(--white);
    border: 1px solid #E04700;
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-mid-cta svg:not(.cta-arrow) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 2px;
}

.btn-mid-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #E04700;
    z-index: -1;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-mid-cta:hover {
    color: var(--black);
    border-color: #E04700;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(224, 71, 0, 0.25);
}

.btn-mid-cta:hover::before {
    left: 0;
}

.btn-mid-cta:hover .cta-arrow {
    transform: translateX(4px);
    color: var(--black);
}

.cta-arrow {
    width: 18px;
    height: 18px;
    color: var(--white);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
    .mid-cta {
        padding: 100px 32px;
    }

    .mid-cta-title {
        font-size: 36px;
    }

    .mid-cta-subtitle {
        font-size: 15px;
    }

    .btn-mid-cta {
        padding: 16px 32px;
        font-size: 11px;
    }
}

/* ==================== SECTION-LEVEL CTAs ==================== */
/* Shared ghost-link language: quiet by default, engineered on hover.
   Keeps GET A DEMO present in every section without competing with
   the hero and final CTA, which carry the heavier visual weight. */

.btn-stats-cta,
.btn-section-cta,
.btn-quoting-cta,
.btn-feature-cta {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 30px;
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(224, 71, 0, 0.35);
    border-radius: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-stats-cta::before,
.btn-section-cta::before,
.btn-quoting-cta::before,
.btn-feature-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #E04700;
    z-index: -1;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-stats-cta:hover,
.btn-section-cta:hover,
.btn-quoting-cta:hover,
.btn-feature-cta:hover {
    color: var(--black);
    border-color: #E04700;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(224, 71, 0, 0.22);
}

.btn-stats-cta:hover::before,
.btn-section-cta:hover::before,
.btn-quoting-cta:hover::before,
.btn-feature-cta:hover::before {
    left: 0;
}

.btn-stats-cta:hover .cta-arrow,
.btn-section-cta:hover .cta-arrow,
.btn-quoting-cta:hover .cta-arrow,
.btn-feature-cta:hover .cta-arrow {
    color: var(--black);
    transform: translateX(4px);
}

/* Stats — centered below the metric row */
.stats-cta {
    display: flex;
    justify-content: center;
    margin-top: 72px;
}

/* System — pinned to the bottom of the sticky viewport so it never
   disturbs the centered scroll-driven stage */
.btn-section-cta {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.btn-section-cta:hover {
    transform: translateX(-50%) translateY(-2px);
}

/* Quoting — the strongest mid-page moment after the value statement */
.btn-quoting-cta {
    margin-top: 48px;
    padding: 16px 36px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    border-color: #E04700;
}

/* Feature sections — inline with the copy */
.btn-feature-cta {
    margin-top: 40px;
}

/* Solid variant for the highest-intent feature moment (ESTIMATE) */
.btn-feature-cta-solid {
    background: rgba(224, 71, 0, 0.08);
    border-color: #E04700;
    font-weight: 700;
    letter-spacing: 0.18em;
}

@media (max-width: 768px) {
    .stats-cta {
        margin-top: 48px;
    }

    .btn-stats-cta,
    .btn-section-cta,
    .btn-quoting-cta,
    .btn-feature-cta {
        padding: 14px 24px;
        font-size: 10px;
        letter-spacing: 0.12em;
        gap: 10px;
    }

    .btn-section-cta {
        bottom: 24px;
    }

    .btn-quoting-cta {
        margin-top: 32px;
        font-size: 11px;
    }

    .btn-feature-cta {
        margin-top: 28px;
    }

    .cta-arrow {
        width: 15px;
        height: 15px;
    }
}

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

@media (max-width: 1200px) {
    .feature-grid {
        gap: 60px;
    }

    .hero-title {
        font-size: 72px;
    }

    .feature-title {
        font-size: 48px;
    }
}

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

    .nav-actions {
        gap: 12px;
    }

    .nav-actions .nav-link {
        display: none;
    }

    .btn-primary {
        padding: 10px 20px;
        font-size: 10px;
    }

    .btn-primary::after {
        font-size: 12px;
        margin-left: 6px;
    }

    .nav-content {
        padding: 0 32px;
    }

    .hero-title {
        font-size: 48px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* Stacked CTAs reach the bottom of the viewport here, so the scroll
       indicator would sit on top of GET A DEMO. */
    .scroll-indicator {
        display: none;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 14px;
    }

    .btn-hero, .btn-hero-secondary {
        width: 100%;
    }

    /* Keep the size gap between tiers on mobile, where both go full-width
       and only weight/fill can carry the hierarchy. */
    .btn-hero {
        padding: 20px 32px;
        font-size: 12.5px;
        letter-spacing: 0.14em;
    }

    .btn-hero-secondary {
        padding: 15px 28px;
        font-size: 10.5px;
    }

    .technical-hud {
        display: none;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .stat-number {
        font-size: 48px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-section[data-section="02"] .feature-grid,
    .feature-section[data-section="04"] .feature-grid {
        direction: ltr;
    }

    .feature-title {
        font-size: 36px;
    }

    .feature-description {
        font-size: 16px;
    }

    .workflow-title {
        font-size: 36px;
    }

    .timeline-item {
        grid-template-columns: 80px 1fr;
        gap: 32px;
        padding: 40px 0;
    }

    .timeline-circle {
        width: 80px;
        height: 80px;
    }

    .circle-progress {
        width: 80px;
        height: 80px;
    }

    .timeline-connector {
        left: 38px;
    }

    .timeline-title {
        font-size: 24px;
    }

    .cta-title {
        font-size: 40px;
    }

    .btn-cta {
        padding: 18px 36px;
        font-size: 11px;
        letter-spacing: 0.15em;
    }

    .cta-subtitle {
        font-size: 16px;
    }
}

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

/* ============================================================
   SYSTEM V2 — scroll-driven analysis of MND-2024-114
   To revert: delete everything from here to END SYSTEM V2,
   delete the <section class="sysv2"> markup, and delete the
   SYSTEM V2 block in experience-final.js.
   ============================================================ */

/* REVERT RULE — hides the original section. Delete this to bring it back. */
.system {
    display: none;
}

.sysv2 {
    /* 5 states x ~460px of scroll at a 900px viewport */
    height: 360vh;
    position: relative;
    background: var(--black);
}

.sysv2-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sysv2-inner {
    width: 92vw;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 34%) 1fr;
    gap: 5vw;
    align-items: center;
}

/* ---------------- copy column ---------------- */

.sysv2-kicker {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.2em;
    color: #686d6d;
    text-transform: uppercase;
}

.sysv2-partid {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sysv2-partno {
    font: 600 12px ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: #E04700;
}

.sysv2-partdesc {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.12em;
    color: #6d7272;
}

.sysv2-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: clamp(40px, 4.4vw, 68px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    margin: 22px 0 14px;
    color: var(--white);
}

.sysv2-sub {
    color: #838888;
    font-size: 16px;
    line-height: 1.65;
    min-height: 54px;
    max-width: 460px;
}

/* Stage ledger — replaces the old progress bar. Shows position AND story. */
.sysv2-ledger {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sysv2-ledger-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.16em;
    color: #4a4f4f;
    transition: color 0.35s ease;
}

.v2-ledger-tick {
    width: 14px;
    height: 1px;
    background: #2e3333;
    transition: background 0.35s ease, width 0.35s ease;
}

.sysv2-ledger-item.is-done {
    color: #7d8282;
}

.sysv2-ledger-item.is-done .v2-ledger-tick {
    background: #58605f;
}

.sysv2-ledger-item.is-active {
    color: #E04700;
}

.sysv2-ledger-item.is-active .v2-ledger-tick {
    background: #E04700;
    width: 26px;
}

/* Metrics */
.sysv2-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #1e2222;
    margin-top: 28px;
}

.sysv2-metric {
    background: #0c0d0d;
    padding: 18px 18px 16px;
}

.sysv2-metric label {
    display: block;
    font: 9px ui-monospace, monospace;
    color: #5f6464;
    letter-spacing: 0.14em;
    margin-bottom: 7px;
}

.sysv2-metric strong {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}

.sysv2-metric-cost strong {
    color: #E04700;
}

/* Stacked time -> cost bar */
.sysv2-bar {
    display: flex;
    width: 100%;
    height: 6px;
    margin-top: 20px;
    background: #141717;
    overflow: hidden;
}

.v2-seg {
    display: block;
    width: 0;
    height: 100%;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.45s ease;
}

.v2-seg-rough    { background: #E04700; }
.v2-seg-holes    { background: #A83800; }
.v2-seg-bore     { background: #A83800; }
.v2-seg-slot     { background: #702900; }
.v2-seg-ports    { background: #5A2200; }
/* non-machining contributions, only present in the cost stacking */
.v2-seg-setup    { background: #55605f; }
.v2-seg-tooling  { background: #414b4a; }
.v2-seg-material { background: #2e3736; }

.sysv2-bar-legend {
    margin-top: 9px;
    font: 9px ui-monospace, monospace;
    letter-spacing: 0.14em;
    color: #5f6464;
}

/* ---------------- stage ---------------- */

.sysv2-stage {
    position: relative;
    aspect-ratio: 1.55;
    max-height: 76vh;
    border: 1px solid #1a1e1e;
    background: radial-gradient(circle at 55% 45%, #14181c 0, #0d0f10 55%, #0a0b0b 100%);
    overflow: hidden;
}

/* machine-bed floor, far quieter than the original */
.sysv2-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 140, 150, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 140, 150, 0.07) 1px, transparent 1px);
    background-size: 38px 38px;
    transform: perspective(560px) rotateX(58deg) scale(1.7);
    transform-origin: center bottom;
}

.sysv2-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------------- part ---------------- */

.v2-face {
    opacity: 0;
}

.v2-edge {
    fill: none;
    stroke: rgba(229, 229, 229, 0.24);
    stroke-width: 1;
    stroke-linejoin: round;
    opacity: 0;
}

.v2-edge-key {
    stroke: rgba(229, 229, 229, 0.5);
    stroke-width: 1.2;
}

.v2-edge-fine {
    stroke: rgba(229, 229, 229, 0.15);
    stroke-width: 0.75;
}

.v2-port-edge {
    stroke: rgba(229, 229, 229, 0.4);
    stroke-width: 1;
}

.v2-port {
    opacity: 0;
}

/* single accent, used only for what is currently being resolved */
.v2-hl {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.7;
    stroke-linejoin: round;
    opacity: 0;
}

.v2-hl ellipse {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.7;
}

/* ---------------- toolpaths ---------------- */

.v2-tp {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.v2-tp path {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.3;
    stroke-linecap: round;
}

/* ---------------- annotation ---------------- */

.v2-feat {
    opacity: 0;
}

.v2-leader {
    fill: none;
    stroke: rgba(229, 229, 229, 0.3);
    stroke-width: 0.85;
}

.v2-leader-dot {
    fill: #E04700;
}

.v2-feat-label,
.v2-proc-label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.07em;
}

.v2-feat-label {
    fill: rgba(250, 250, 250, 0.92);
}

.v2-proc-label {
    fill: #E04700;
    opacity: 0;
}

.v2-feat-detail,
.v2-proc-detail {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    fill: rgba(104, 107, 107, 0.95);
}

.v2-proc-detail {
    opacity: 0;
}

.v2-viewlabel {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.2em;
    fill: #565c5c;
    opacity: 0;
}

#v2DimGroup {
    opacity: 0;
}

.v2-dim-line {
    fill: none;
    stroke: rgba(224, 71, 0, 0.45);
    stroke-width: 0.9;
}

.v2-dim {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    fill: #E04700;
    font-variant-numeric: tabular-nums;
}

/* ---------------- responsive ---------------- */

@media (max-width: 1000px) {
    .sysv2 {
        height: 240vh;
    }

    .sysv2-sticky {
        align-items: flex-start;
        padding-top: 5vh;
    }

    .sysv2-inner {
        grid-template-columns: 1fr;
        gap: 26px;
        width: 88vw;
    }

    /* stage first on small screens: the part is the point */
    .sysv2-stage {
        order: -1;
        aspect-ratio: 1.4;
        max-height: 38vh;
    }

    .sysv2-title {
        margin: 14px 0 10px;
    }

    .sysv2-sub {
        font-size: 15px;
        min-height: 44px;
        max-width: none;
    }

    .sysv2-ledger {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 16px;
        margin-top: 16px;
    }

    .sysv2-ledger-item {
        padding: 2px 0;
    }

    .sysv2-metrics {
        margin-top: 18px;
    }

    .sysv2-metric {
        padding: 13px 13px 11px;
    }

    .sysv2-metric strong {
        font-size: 20px;
    }

    .v2-feat-label,
    .v2-proc-label {
        font-size: 19px;
    }

    .v2-feat-detail,
    .v2-proc-detail {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .sysv2-inner {
        width: 90vw;
    }

    .sysv2-partid {
        flex-direction: column;
        gap: 3px;
    }

    .sysv2-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   END SYSTEM V2
   ============================================================ */

/* ============================================================
   PROMINENT IN-SECTION DEMO CTA
   One label, one treatment, present in every section. Solid warm
   orange on near-black is the highest-contrast pairing available,
   so it reads as the page's single action wherever it appears.
   ============================================================ */

.btn-demo {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 17px 38px;
    background-color: #E04700;
    background-image: var(--cta-sheen);
    background-repeat: no-repeat;
    background-size: 300% 300%;
    background-position: var(--cta-sheen-rest);
    color: #0f1010;
    border: 1px solid #E04700;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26),
                0 8px 26px rgba(224, 71, 0, 0.2);
    transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-position 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-demo .cta-arrow,
.btn-cta .cta-arrow {
    width: 17px;
    height: 17px;
    color: #0f1010;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-demo:hover {
    background-color: #F25200;
    background-position: var(--cta-sheen-active);
    border-color: #F25200;
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34),
                0 16px 40px rgba(224, 71, 0, 0.3);
}

.btn-demo:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.12s;
}

.btn-demo:hover .cta-arrow,
.btn-cta:hover .cta-arrow {
    transform: translateX(5px);
}

/* lock-on corner brackets — the same CAD-viewfinder mark used on the
   hero reference grid and the preloader rig, here confirming a target */
.btn-demo::after,
.btn-cta::after,
.btn-hero::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background:
        linear-gradient(to right, var(--purple) 2px, transparent 2px) top left / 10px 2px no-repeat,
        linear-gradient(to bottom, var(--purple) 2px, transparent 2px) top left / 2px 10px no-repeat,
        linear-gradient(to left, var(--purple) 2px, transparent 2px) top right / 10px 2px no-repeat,
        linear-gradient(to bottom, var(--purple) 2px, transparent 2px) top right / 2px 10px no-repeat,
        linear-gradient(to right, var(--purple) 2px, transparent 2px) bottom left / 10px 2px no-repeat,
        linear-gradient(to top, var(--purple) 2px, transparent 2px) bottom left / 2px 10px no-repeat,
        linear-gradient(to left, var(--purple) 2px, transparent 2px) bottom right / 10px 2px no-repeat,
        linear-gradient(to top, var(--purple) 2px, transparent 2px) bottom right / 2px 10px no-repeat;
}

.btn-demo:hover::after,
.btn-cta:hover::after,
.btn-hero:hover::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .btn-demo,
    .btn-cta,
    .btn-hero {
        transition-duration: 0.01ms !important;
    }
    .btn-demo::after,
    .btn-cta::after,
    .btn-hero::after {
        display: none;
    }
}

/* larger tier for the two standalone conversion moments */
.btn-demo-lg {
    padding: 20px 46px;
    font-size: 13px;
    letter-spacing: 0.18em;
}

/* the one inside the pinned system stage stays bottom-centred */
.btn-demo-float {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.btn-demo-float:hover {
    transform: translateX(-50%) translateY(-3px);
}

/* sits under the metrics block in the system section */
.btn-demo-inline {
    margin-top: 26px;
}

@media (max-width: 768px) {
    .btn-demo {
        padding: 15px 28px;
        font-size: 11px;
        letter-spacing: 0.12em;
        gap: 10px;
    }

    .btn-demo-lg {
        padding: 17px 32px;
        font-size: 12px;
    }

    .btn-demo .cta-arrow {
        width: 15px;
        height: 15px;
    }
}

/* ============================================================
   WORKFLOW 01-04  —  MND-2024-114 carried through four states
   Replaces the old .features-container horizontal carousel.
   ============================================================ */

.wf-container {
    position: relative;
    background: var(--black);
}

/* persistent part identity across all four panels */
.wf-partbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 60px;
    background: rgba(10, 11, 11, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wf-partno {
    font: 600 12px ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: #E04700;
}

.wf-partdesc {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.12em;
    color: #6d7272;
}

.wf-partprog {
    margin-left: auto;
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.16em;
    color: #5f6464;
}

.wf-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 90px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wf-inner {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 5vw;
    align-items: center;
}

/* alternate sides so consecutive panels do not read as a repeat */
.wf-section[data-section="02"] .wf-visual,
.wf-section[data-section="04"] .wf-visual {
    order: 2;
}

/* ---------------- visual ---------------- */

.wf-visual-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.wf-visual-label {
    font: 600 11px 'Inter', sans-serif;
    letter-spacing: 0.2em;
    color: #E04700;
}

.wf-visual-view {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.18em;
    color: #565c5c;
}

.wf-stage {
    position: relative;
    aspect-ratio: 1.226;
    border: 1px solid #1a1e1e;
    background: radial-gradient(circle at 52% 44%, #14181c 0, #0d0f10 55%, #0a0b0b 100%);
    overflow: hidden;
}

.wf-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(120, 140, 150, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 140, 150, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
}

.wf-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------------- part rendering ---------------- */

.wf-face { opacity: 0; }

.wf-edge {
    fill: none;
    stroke: rgba(229, 229, 229, 0.24);
    stroke-width: 1;
    stroke-linejoin: round;
    opacity: 0;
}

.wf-edge-key {
    stroke: rgba(229, 229, 229, 0.5);
    stroke-width: 1.2;
}

.wf-edge-fine {
    stroke: rgba(229, 229, 229, 0.15);
    stroke-width: 0.75;
}

.wf-centre {
    stroke: rgba(229, 229, 229, 0.2);
    stroke-width: 0.7;
    stroke-dasharray: 9 4 2 4;
    opacity: 0;
}

.wf-stock-face { opacity: 0; }

.wf-stock-edge {
    fill: none;
    stroke: rgba(229, 229, 229, 0.3);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    opacity: 0;
}

/* ---------------- 01 measure ---------------- */

.wf-datum {
    stroke: #E04700;
    stroke-width: 1.1;
    stroke-dasharray: 5 4;
}

.wf-datum-head { fill: #E04700; }

.wf-dim { opacity: 0; }

.wf-dim-line {
    fill: none;
    stroke: rgba(224, 71, 0, 0.5);
    stroke-width: 0.9;
}

.wf-dim-val {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    fill: rgba(250, 250, 250, 0.94);
    font-variant-numeric: tabular-nums;
}

.wf-dim-sub {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    fill: rgba(104, 107, 107, 0.95);
}

.wf-bc {
    fill: none;
    stroke: rgba(224, 71, 0, 0.32);
    stroke-width: 0.8;
    stroke-dasharray: 7 5;
}

.wf-meta { opacity: 0; }

.wf-fcf {
    fill: rgba(10, 11, 11, 0.9);
    stroke: rgba(224, 71, 0, 0.6);
    stroke-width: 0.9;
}

.wf-fcf-div {
    stroke: rgba(224, 71, 0, 0.6);
    stroke-width: 0.9;
}

.wf-fcf-txt {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    fill: rgba(250, 250, 250, 0.9);
}

.wf-tag {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    fill: #E04700;
}

/* ---------------- 02 understand ---------------- */

.wf-an-hot,
.wf-an-warm { stroke: none; }

.wf-find { opacity: 0; }

.wf-hl {
    fill: none;
    stroke: #E04700;
    stroke-width: 2;
}

.wf-find-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    fill: #E04700;
}

.wf-find-label.wf-ok { fill: #7f9a86; }

.wf-find-detail {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.09em;
    fill: rgba(229, 229, 229, 0.78);
}

.wf-find-note {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    fill: rgba(104, 107, 107, 0.95);
}

.wf-tool-env {
    fill: none;
    stroke: rgba(224, 71, 0, 0.7);
    stroke-width: 1.1;
    stroke-dasharray: 5 3;
}

.wf-rule {
    stroke: rgba(229, 229, 229, 0.12);
    stroke-width: 1;
}

.wf-verdict-txt {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.1em;
    fill: #E04700;
}

.wf-verdict-sub {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    fill: rgba(104, 107, 107, 0.95);
}

/* ---------------- 03 machine ---------------- */

.wf-tp {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.wf-tp path {
    fill: none;
    stroke: #E04700;
    stroke-width: 1.3;
    stroke-linecap: round;
}

.wf-tool-body {
    stroke: rgba(229, 229, 229, 0.55);
    stroke-width: 5;
    stroke-linecap: round;
}

.wf-tool-tip {
    stroke: #E04700;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.wf-tool-dot { fill: #E04700; }

/* ---------------- copy column ---------------- */

.wf-num {
    font: 700 13px 'Inter', sans-serif;
    letter-spacing: 0.18em;
    color: #E04700;
    margin-bottom: 14px;
}

.wf-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: clamp(42px, 4.4vw, 66px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--white);
    margin-bottom: 18px;
}

.wf-desc {
    font-size: 16px;
    line-height: 1.65;
    color: #838888;
    max-width: 470px;
    margin-bottom: 30px;
}

/* step ledger — each row lights as its visual beat lands */
.wf-steps {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.wf-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.wf-step.is-on { opacity: 1; }

.wf-step-tick {
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    margin-top: 8px;
    background: #2e3333;
    transition: background 0.4s ease, width 0.4s ease;
}

.wf-step.is-on .wf-step-tick {
    background: #E04700;
    width: 24px;
}

.wf-step-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wf-step-label {
    font: 600 12px 'Inter', sans-serif;
    letter-spacing: 0.12em;
    color: var(--stone);
}

.wf-step-detail {
    font: 10px ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: #626767;
}

.wf-readouts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #1e2222;
    margin-bottom: 28px;
}

.wf-readout {
    background: #0c0d0d;
    padding: 16px 18px;
}

.wf-readout label {
    display: block;
    font: 9px ui-monospace, monospace;
    color: #5f6464;
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}

.wf-readout strong {
    font: 600 24px 'Inter', sans-serif;
    letter-spacing: -0.02em;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}

/* ---------------- 04 estimate panel ---------------- */

.wf-est {
    margin-bottom: 28px;
}

.wf-est-head,
.wf-est-row {
    display: grid;
    grid-template-columns: 124px 1fr 74px 78px;
    align-items: center;
    gap: 12px;
}

.wf-est-head {
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font: 9px ui-monospace, monospace;
    letter-spacing: 0.14em;
    color: #5f6464;
}

.wf-est-head span:nth-child(3),
.wf-est-head span:nth-child(4) { text-align: right; }

.wf-est-row {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    opacity: 0.28;
    transition: opacity 0.4s ease;
}

.wf-est-row.is-on { opacity: 1; }

.wf-est-name {
    font: 600 11px 'Inter', sans-serif;
    letter-spacing: 0.1em;
    color: var(--stone);
}

.wf-est-bar {
    display: block;
    height: 4px;
    background: #161919;
    overflow: hidden;
}

.wf-est-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: #E04700;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.wf-est-extra .wf-est-bar i { background: #4a5453; }

.wf-est-min,
.wf-est-cost {
    font: 11px ui-monospace, monospace;
    text-align: right;
    color: #8d9292;
    font-variant-numeric: tabular-nums;
}

.wf-est-cost { color: var(--stone); }

.wf-est-total {
    display: grid;
    grid-template-columns: 124px 1fr 74px 78px;
    gap: 12px;
    align-items: baseline;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid rgba(224, 71, 0, 0.3);
}

.wf-est-total-label {
    font: 700 11px 'Inter', sans-serif;
    letter-spacing: 0.18em;
    color: #E04700;
    grid-column: 1;
}

.wf-est-total-time {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
    font: 600 15px 'Inter', sans-serif;
    color: var(--stone);
    font-variant-numeric: tabular-nums;
}

.wf-est-total-cost {
    grid-column: 4;
    text-align: right;
    font-family: 'Parkinsans', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #E04700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* the payoff line — the thesis of the whole page, stated once */
.wf-chain {
    margin-top: 20px;
    padding: 13px 16px;
    background: rgba(224, 71, 0, 0.05);
    border-left: 2px solid #E04700;
    font: 11px ui-monospace, monospace;
    letter-spacing: 0.09em;
    color: #b9bebe;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.wf-chain.is-on { opacity: 1; }

/* ---------------- responsive ----------------
   The old carousel pinned four 100vw panels and clipped 229px off
   every one of them below 1000px. These are plain stacked sections,
   so there is nothing left to clip. */

@media (max-width: 1000px) {
    .wf-partbar { padding: 12px 28px; }

    .wf-partprog { display: none; }

    .wf-section {
        min-height: 0;
        padding: 64px 28px;
    }

    .wf-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Visual always first: the part is the point. Needs to out-specify the
       desktop alternating rule .wf-section[data-section="02"] .wf-visual. */
    .wf-section[data-section] .wf-visual { order: -1; }

    .wf-title { font-size: 38px; }

    .wf-desc {
        font-size: 15px;
        max-width: none;
        margin-bottom: 22px;
    }

    .wf-dim-val, .wf-find-label { font-size: 18px; }
    .wf-dim-sub, .wf-find-detail { font-size: 14px; }
    .wf-find-note { font-size: 13px; }
    .wf-verdict-txt { font-size: 21px; }
    .wf-verdict-sub { font-size: 14px; }
    .wf-fcf-txt { font-size: 15px; }
    .wf-tag { font-size: 17px; }

    .wf-est-head,
    .wf-est-row,
    .wf-est-total {
        grid-template-columns: 104px 1fr 54px 64px;
        gap: 9px;
    }

    .wf-est-total-cost { font-size: 24px; }
}

@media (max-width: 560px) {
    .wf-partbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .wf-est-head,
    .wf-est-row,
    .wf-est-total {
        grid-template-columns: 88px 1fr 46px 58px;
        gap: 7px;
    }

    .wf-est-name { font-size: 10px; }
    .wf-est-min, .wf-est-cost { font-size: 10px; }
}

/* ============================================================
   CTA FOOTER ADDITIONS
   ============================================================ */

.cta-offices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 56px;
    width: 100%;
    max-width: 720px;
    text-align: left;
}

.cta-office {
    display: flex;
    gap: 14px;
    padding: 22px 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.025);
}

.office-flag { font-size: 28px; flex-shrink: 0; line-height: 1; margin-top: 2px; }

.office-body { display: flex; flex-direction: column; gap: 4px; }

.office-label {
    font: 600 9px 'Inter', sans-serif;
    letter-spacing: 0.18em;
    color: var(--steel);
    text-transform: uppercase;
}

.office-name {
    font: 600 15px 'Inter', sans-serif;
    color: var(--black);
    letter-spacing: -0.01em;
}

.cta-office address {
    font: 400 13px 'Inter', sans-serif;
    color: var(--steel);
    font-style: normal;
    line-height: 1.6;
}

.office-email {
    font: 500 13px 'Inter', sans-serif;
    color: #E04700;
    text-decoration: none;
    margin-top: 4px;
    display: inline-block;
}
.office-email:hover { text-decoration: underline; }

.cta-powered {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0,0,0,0.08);
    width: 100%;
    max-width: 720px;
    justify-content: center;
}

.powered-label {
    font: 600 10px 'Inter', sans-serif;
    letter-spacing: 0.2em;
    color: var(--steel);
    white-space: nowrap;
}

.powered-logo {
    height: 28px;
    width: auto;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.3s ease;
}
.powered-logo:hover { filter: grayscale(0) opacity(1); }

@media (max-width: 768px) {
    .cta-offices { grid-template-columns: 1fr; }
    .cta-powered { flex-direction: column; gap: 10px; }
}

/* ============================================================
   DEMO MODAL
   ============================================================ */

.demo-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 11, 11, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 20px;
}

.demo-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.demo-modal {
    position: relative;
    background: #FAFAFA;
    border-radius: 8px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 48px 40px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.35);
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

.demo-overlay.is-open .demo-modal {
    transform: translateY(0);
}

.demo-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: var(--steel);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}
.demo-close:hover { background: rgba(0,0,0,0.06); }

.demo-modal-header { margin-bottom: 32px; }

.demo-mark {
    width: 40px;
    height: auto;
    margin-bottom: 14px;
}

.demo-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.demo-sub {
    font-size: 14px;
    color: var(--steel);
    line-height: 1.55;
}

.demo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.demo-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}

.demo-field-full { grid-column: 1 / -1; margin-bottom: 0; }

.demo-field label {
    font: 600 11px 'Inter', sans-serif;
    letter-spacing: 0.1em;
    color: var(--black);
    text-transform: uppercase;
}

.req { color: #E04700; }

.demo-field input,
.demo-field textarea {
    background: #fff;
    border: 1.5px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    padding: 11px 14px;
    font: 400 14px 'Inter', sans-serif;
    color: var(--black);
    transition: border-color 0.25s;
    resize: vertical;
    outline: none;
    width: 100%;
}

.demo-field input:focus,
.demo-field textarea:focus {
    border-color: #E04700;
    box-shadow: 0 0 0 3px rgba(224,71,0,0.1);
}

.demo-submit {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 17px 32px;
    background: #E04700;
    color: #0f1010;
    border: none;
    border-radius: 4px;
    font: 700 12px 'Inter', sans-serif;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.demo-submit:hover {
    background: #F25200;
    transform: translateY(-2px);
}

.demo-privacy {
    margin-top: 14px;
    font-size: 12px;
    color: var(--steel);
    text-align: center;
    line-height: 1.5;
}
.demo-privacy a { color: #E04700; text-decoration: none; }
.demo-privacy a:hover { text-decoration: underline; }

.demo-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 0 24px;
    gap: 16px;
}
.demo-success svg { width: 56px; height: 56px; }
.demo-success h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
}
.demo-success p { color: var(--steel); font-size: 15px; }

@media (max-width: 640px) {
    .demo-modal { padding: 32px 24px 28px; }
    .demo-row { grid-template-columns: 1fr; }
}

/* ============================================================
   SITE FOOTER — dark, compact, animated grid
   ============================================================ */

/* remove old bloat from the white CTA */
.cta { min-height: auto; padding: 100px 60px 80px; }
.cta-content { max-width: 860px; }

/* ---- animated footer strip ---- */
.site-footer {
    position: relative;
    background: #07080a;
    overflow: hidden;
    padding: 0;
}

/* engineering grid */
.footer-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(232, 234, 232, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 234, 232, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: footerGridDrift 24s linear infinite;
}

@keyframes footerGridDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 48px 48px; }
}

/* scan band: a single bright line that sweeps top-to-bottom */
.footer-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(224, 71, 0, 0.45) 30%, rgba(224, 71, 0, 0.7) 50%, rgba(224, 71, 0, 0.45) 70%, transparent 100%);
    animation: footerScan 8s ease-in-out infinite;
    opacity: 0;
}

@keyframes footerScan {
    0%   { top: -2px;   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%;  opacity: 0; }
}

/* ---- inner layout ---- */
.footer-inner {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 52px 60px 36px;
}

/* office row */
.footer-offices {
    display: flex;
    align-items: flex-start;
    gap: 0;
    justify-content: center;
}

.footer-office {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 0 56px;
    flex: 1;
    max-width: 420px;
}

.footer-office:first-child { padding-left: 0; }
.footer-office:last-child  { padding-right: 0; }

.footer-office-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    margin: 4px 0;
}

/* flag circle */
.footer-flag {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    margin-top: 2px;
    background: #1a1d20;
}
.footer-flag svg { width: 100%; height: 100%; display: block; }

/* text */
.footer-office-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-office-label {
    font: 600 9px 'Inter', sans-serif;
    letter-spacing: 0.18em;
    color: #E04700;
    text-transform: uppercase;
}

.footer-office-name {
    font: 600 14px 'Inter', sans-serif;
    color: #FAFAFA;
    letter-spacing: -0.01em;
}

.footer-office address {
    font: 400 12px 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.45);
    font-style: normal;
    line-height: 1.65;
}

.footer-email {
    display: inline-block;
    margin-top: 5px;
    font: 500 12px 'Inter', sans-serif;
    color: #E04700;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s;
}
.footer-email:hover { color: #F25200; text-decoration: underline; }

/* bottom bar */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer-copy {
    font: 400 11px 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.06em;
}

.footer-powered {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-powered-label {
    font: 600 9px 'Inter', sans-serif;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.3);
}

.footer-powered-logo {
    height: 22px;
    width: auto;
    filter: brightness(0) invert(1) opacity(0.45);
    transition: filter 0.3s ease;
}
.footer-powered-logo:hover { filter: brightness(0) invert(1) opacity(0.9); }

/* responsive */
@media (max-width: 900px) {
    .site-footer { padding: 0; }
    .footer-inner { padding: 40px 28px 28px; }
    .footer-offices { flex-direction: column; gap: 32px; align-items: flex-start; }
    .footer-office { padding: 0; max-width: none; }
    .footer-office-divider { width: 100%; height: 1px; align-self: auto; margin: 0; }
    .footer-bottom { flex-direction: column; gap: 14px; align-items: center; text-align: center; }
    .cta { padding: 72px 28px 60px; }
}

/* hide old office styles (now replaced by footer) */
.cta-offices, .cta-powered { display: none; }

/* ============================================================
   APP SHOWCASE SECTION
   ============================================================ */

.showcase {
    position: relative;
    background: #040506;
    padding: 120px 60px;
    overflow: hidden;
}

.showcase-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(224, 71, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 71, 0, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
}

.showcase-inner {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
}

/* header */
.showcase-header {
    text-align: center;
    margin-bottom: 72px;
}

.showcase-kicker {
    display: block;
    font: 600 11px 'Inter', sans-serif;
    letter-spacing: 0.22em;
    color: #E04700;
    margin-bottom: 18px;
}

.showcase-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--white);
    margin-bottom: 16px;
}

.showcase-desc {
    font: 400 17px 'Inter', sans-serif;
    color: rgba(255,255,255,0.46);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.65;
}

/* body layout */
.showcase-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 52px;
    align-items: start;
}

.showcase-cta {
    margin-top: 56px;
    text-align: center;
}

/* ---- left nav ---- */
.showcase-nav {
    position: sticky;
    top: 80px;
    display: flex;
    gap: 0;
}

.showcase-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.showcase-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px 18px 0;
    cursor: pointer;
    border-left: 2px solid rgba(255,255,255,0.06);
    margin-left: 1px;
    transition: border-color 0.3s ease;
    user-select: none;
}

.showcase-step.is-active {
    border-left-color: #E04700;
}

.step-marker {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease, border-color 0.3s ease;
    margin-top: 1px;
    margin-left: -17px;
}

.showcase-step.is-active .step-marker {
    background: #E04700;
    border-color: #E04700;
}

.step-num {
    font: 700 10px 'Inter', sans-serif;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.4);
    transition: color 0.3s;
}

.showcase-step.is-active .step-num { color: #040506; }

.step-label {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-title {
    font: 600 14px 'Inter', sans-serif;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
    line-height: 1.3;
}

.showcase-step.is-active .step-title,
.showcase-step:hover .step-title { color: var(--white); }

.step-sub {
    font: 400 12px 'Inter', sans-serif;
    color: rgba(255,255,255,0.2);
    transition: color 0.3s ease;
    line-height: 1.4;
}

.showcase-step.is-active .step-sub { color: rgba(255,255,255,0.5); }

/* progress rail */
.showcase-track {
    width: 2px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    margin-left: 4px;
    position: relative;
    flex-shrink: 0;
    align-self: stretch;
    display: none; /* handled by border-left on steps */
}

/* ---- right panel ---- */
.showcase-panel {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 40px 80px rgba(0,0,0,0.55),
        0 8px 24px rgba(0,0,0,0.4);
    transform: translateY(0);
    will-change: transform;
}

/* browser chrome */
.showcase-chrome {
    background: #1a1d21;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: block;
}

.chrome-dot:nth-child(1) { background: #ff5f57; }
.chrome-dot:nth-child(2) { background: #febc2e; }
.chrome-dot:nth-child(3) { background: #28c840; }

.chrome-url {
    margin-left: 10px;
    font: 400 11px ui-monospace, monospace;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.02em;
}

/* screen area */
.showcase-screen {
    position: relative;
    background: #141618;
    overflow: hidden;
    line-height: 0;
    aspect-ratio: 2/1;
}

.screen-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: none; /* GSAP handles this */
    will-change: opacity, transform;
    pointer-events: none;
}

.screen-img.is-current {
    opacity: 1;
    transform: scale(1);
}

/* scan overlay — shows briefly on each transition */
.screen-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(224,71,0,0.6) 40%, rgba(224,71,0,0.9) 50%, rgba(224,71,0,0.6) 60%, transparent 100%);
    top: -3px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
}

/* caption */
.showcase-caption {
    background: #111315;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.caption-index {
    font: 700 11px ui-monospace, monospace;
    color: #E04700;
    letter-spacing: 0.12em;
    flex-shrink: 0;
}

.caption-text {
    font: 400 13px 'Inter', sans-serif;
    color: rgba(255,255,255,0.5);
    flex: 1;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.caption-next {
    flex-shrink: 0;
    background: rgba(224,71,0,0.12);
    border: 1px solid rgba(224,71,0,0.3);
    color: #E04700;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.25s, border-color 0.25s;
}

.caption-next:hover {
    background: rgba(224,71,0,0.24);
    border-color: #E04700;
}

/* responsive */
@media (max-width: 1000px) {
    .showcase { padding: 80px 28px; }
    .showcase-body { grid-template-columns: 1fr; gap: 36px; }
    .showcase-cta { margin-top: 40px; }
    .showcase-nav { position: static; flex-direction: row; overflow-x: auto; }
    .showcase-steps { flex-direction: row; gap: 0; }
    .showcase-step { border-left: none; border-bottom: 2px solid rgba(255,255,255,0.06); margin-left: 0; padding: 12px 16px; white-space: nowrap; }
    .showcase-step.is-active { border-bottom-color: #E04700; }
    .step-marker { display: none; }
    .step-sub { display: none; }
    .showcase-header { margin-bottom: 40px; }
}