/* ===================================
   CSS Variables & Reset
   =================================== */
:root {
    /* Brand Colors. --color-primary is the fill/border garnet; it only clears
       1.98:1 against the page background, so it must not be used for text.
       --color-accent-text is the same hue lifted to 5.06:1 for headings and
       any other garnet type on dark. */
    --color-primary: #8B0000;
    --color-secondary: #B22222;
    --color-accent-text: #E5484D;

    /* Dark Mode Palette */
    --color-bg: #0a0a0a;
    --color-bg-elevated: #141414;
    --color-bg-subtle: #1a1a1a;
    --color-border: #2a2a2a;
    --color-text: #E5E5E5;
    --color-text-muted: #999999;

    /* Legacy aliases (kept for any remaining references) */
    --color-gray: #86868C;
    --color-dark: #E5E5E5;
    --color-light: #141414;
    --color-white: #FFFFFF;

    /* Fonts */
    --font-montserrat: 'Montserrat', sans-serif;
    --font-open-sans: 'Open Sans', sans-serif;
    --font-source-sans: 'Source Sans Pro', sans-serif;

    /* Spacing */
    --container-width: 1280px;
    --section-padding: 120px;
    --section-padding-mobile: 40px;

    /* Animation easing.
       --ease-premium is an ease-in-OUT: it ramps up slowly, which reads as
       hesitation on entrance animations. Reveals use --ease-reveal instead —
       an expo-out curve that responds instantly and decelerates into place. */
    --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-source-sans);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.8;
    overflow-x: hidden;
}

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

/* ===================================
   Animated Background Layers
   =================================== */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(139, 0, 0, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 calc(var(--scroll-y, 0) * -0.15px);
}

.bg-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(139, 0, 0, 0.07), transparent),
        radial-gradient(ellipse 500px 500px at 75% 65%, rgba(178, 34, 34, 0.05), transparent),
        radial-gradient(ellipse 400px 300px at 50% 80%, rgba(139, 0, 0, 0.04), transparent);
    animation: meshDrift 60s ease-in-out infinite alternate;
}

@keyframes meshDrift {
    0% {
        background-position: 0% 0%, 100% 100%, 50% 50%;
    }
    33% {
        background-position: 10% 20%, 80% 90%, 60% 30%;
    }
    66% {
        background-position: 5% 10%, 90% 80%, 40% 70%;
    }
    100% {
        background-position: 15% 5%, 70% 95%, 55% 40%;
    }
}

/* ===================================
   Utility Classes
   =================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

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

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

.color-secondary {
    color: var(--color-secondary);
}

.section-title {
    font-family: var(--font-source-sans);
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-family: var(--font-source-sans);
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: 56px;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: inline !important;
    }
}

/* ===================================
   Buttons
   =================================== */
.btn {
    font-family: var(--font-source-sans);
    font-size: 24px;
    font-weight: 400;
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s var(--ease-premium);
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    pointer-events: none;
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 25px rgba(139, 0, 0, 0.5), 0 0 60px rgba(139, 0, 0, 0.2);
}

.btn-primary:hover::after {
    animation: btnLightSweep 0.6s var(--ease-premium);
}

@keyframes btnLightSweep {
    to {
        left: 120%;
    }
}

/* ===================================
   Navigation
   =================================== */
.navbar {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    transition: background-color 0.35s ease, padding 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}

/* Compact, sticky state once the user scrolls down */
.navbar.scrolled {
    position: fixed;
    padding: 14px 0;
    background-color: rgba(12, 8, 8, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom-color: var(--color-border);
}

.btn-pill {
    border-radius: 999px;
}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.btn-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
}

.btn-icon svg {
    width: 100%;
    height: 100%;
}

.btn-small {
    font-size: 18px;
    padding: 10px 24px;
}


.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Tubelight pill nav (centered in the bar) */
.nav-inline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

/* Sliding "lamp" indicator */
.nav-lamp {
    position: absolute;
    top: 5px;
    left: 0;
    height: calc(100% - 10px);
    width: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.4s var(--ease-premium), width 0.4s var(--ease-premium), opacity 0.3s ease;
}

.nav-lamp.visible {
    opacity: 1;
}

/* The glowing tube above the active pill */
.nav-lamp::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 4px;
    background: #ffffff;
    border-radius: 0 0 6px 6px;
    box-shadow:
        0 -2px 14px 3px rgba(255, 255, 255, 0.7),
        0 0 22px 8px rgba(255, 255, 255, 0.4),
        0 0 40px 14px rgba(255, 255, 255, 0.22);
}

.nav-inline .nav-link {
    position: relative;
    z-index: 1;
    font-family: var(--font-source-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 9px 22px;
    border: none;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-inline .nav-link:hover,
.nav-inline .nav-link.active {
    color: #ffffff;
    padding-left: 22px;
}

.nav-cta-inline {
    padding: 9px 22px;
    font-size: 17px;
}

/* Slide-down menu panel (hamburger-triggered) */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgba(12, 8, 8, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.45s var(--ease-premium), opacity 0.3s ease, visibility 0.3s ease;
}

.nav-menu.active {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
}

.nav-menu .container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 18px;
    padding-bottom: 26px;
}

.nav-link {
    font-family: var(--font-source-sans);
    font-size: 22px;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    position: relative;
    padding: 12px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-link:hover {
    color: var(--color-accent-text);
    padding-left: 14px;
}

.nav-menu .nav-cta {
    align-self: flex-start;
    margin-top: 18px;
}

.language-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The slide-down panel is also used on desktop once the navbar collapses, where
   the switcher in .nav-right is still on screen — so this copy is mobile-only,
   or the two would show together. */
.nav-menu-lang {
    display: none;
}

.lang-btn {
    background: none;
    border: none;
    font-family: var(--font-source-sans);
    font-size: 18px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.3s ease;
}

.lang-btn.active {
    color: var(--color-accent-text);
    font-weight: 600;
}

.lang-divider {
    color: var(--color-text-muted);
}

.nav-cta {
    padding: 10px 25px;
    font-size: 20px;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(139, 0, 0, 0.15);
    border-color: var(--color-primary);
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: transform 0.3s var(--ease-premium), opacity 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Scrolled: collapse inline bar into hamburger */
.navbar.scrolled .nav-inline,
.navbar.scrolled .nav-cta-inline {
    display: none;
}

.navbar.scrolled .mobile-menu-toggle {
    display: flex;
}

/* ===================================
   Hero Section
   =================================== */
.hero {
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0) 58%, #0a0a0a 100%),
        radial-gradient(ellipse 70% 60% at 50% 38%, #161015 0%, #0a0709 45%, #050405 100%);
    padding: 200px 0 160px;
    position: relative;
    overflow: hidden;
}

/* Soft glow behind the headline */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 15%;
    width: 70%;
    height: 140%;
    background: radial-gradient(ellipse at 50% 45%, rgba(139, 0, 0, 0.10) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Animated dotted-surface canvas background */
.hero-dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.95;
    mask-image: radial-gradient(ellipse 95% 85% at 50% 72%, #000 62%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 72%, #000 62%, transparent 100%);
}

.hero-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.hero-line-1 {
    stroke: rgba(139, 0, 0, 0.35);
    animation: heroLineDraw 2.5s var(--ease-premium) 0.5s forwards;
}
.hero-line-2 {
    stroke: rgba(178, 34, 34, 0.25);
    animation: heroLineDraw 2.8s var(--ease-premium) 0.7s forwards;
}
.hero-line-3 {
    stroke: rgba(139, 0, 0, 0.18);
    animation: heroLineDraw 3s var(--ease-premium) 1.0s forwards;
}
.hero-line-4 {
    stroke: rgba(178, 34, 34, 0.28);
    animation: heroLineDraw 2.6s var(--ease-premium) 0.6s forwards;
}

@keyframes heroLineDraw {
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* One-time lightning pulse along hero lines */
.hero-line-pulse {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0;
    stroke-dasharray: 120 2000;
    stroke-dashoffset: 120;
    filter: drop-shadow(0 0 6px rgba(255, 40, 40, 0.8)) drop-shadow(0 0 20px rgba(139, 0, 0, 0.6));
}

.hero-line-pulse-1 {
    stroke: rgba(255, 60, 60, 0.9);
    animation: heroLightningPulse 1.8s var(--ease-premium) 2.8s forwards;
}

.hero-line-pulse-2 {
    stroke: rgba(255, 40, 40, 0.7);
    animation: heroLightningPulse 2.0s var(--ease-premium) 3.1s forwards;
}

.hero-line-pulse-3 {
    stroke: rgba(255, 50, 50, 0.6);
    animation: heroLightningPulse 1.6s var(--ease-premium) 3.3s forwards;
}

@keyframes heroLightningPulse {
    0% {
        opacity: 1;
        stroke-dashoffset: 120;
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-dashoffset: -2000;
    }
}

/* Blurred gradient overlay that follows cursor */
.hero-gradient-overlay {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(ellipse at 30% 40%, rgba(139, 0, 0, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(178, 34, 34, 0.10) 0%, transparent 55%);
    z-index: 1;
    pointer-events: none;
    transition: transform 0.4s ease-out;
    filter: blur(40px);
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 1120px;
}

/* Fluid headline that fills the hero. The wrapped line count is not monotonic
   across widths (3 lines wide, 2 mid, up to 5 on small phones), so the height
   reserved for the typewriter animation is measured in JS rather than guessed
   here — see reserveHeadlineHeight() in main.js. */
.hero-title {
    font-family: var(--font-source-sans);
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 32px;
    letter-spacing: -0.03em;
    line-height: 1.08;
    animation: heroFadeInUp 0.8s var(--ease-premium) 0.3s both;
}

.hero-title-lead {
    display: block;
    color: #ffffff;
}

.hero-title-accent {
    display: block;
    width: fit-content;
    max-width: 100%;
    position: relative;
    color: var(--color-accent-text);
    text-shadow: 0 0 60px rgba(139, 0, 0, 0.45), 0 0 120px rgba(139, 0, 0, 0.18);
}

/* Underline draws itself in once "live by now." finishes typing */
.hero-title-accent.typed::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.06em;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 14px rgba(178, 34, 34, 0.6);
    transform: scaleX(0);
    transform-origin: left center;
    animation: accentUnderline 0.55s var(--ease-premium) forwards;
}

@keyframes accentUnderline {
    to { transform: scaleX(1); }
}

/* Blinking typing caret */
.type-cursor {
    display: inline-block;
    width: 0.055em;
    height: 0.92em;
    margin-left: 6px;
    background: currentColor;
    vertical-align: -0.08em;
    border-radius: 1px;
    animation: caretBlink 1s steps(1, end) infinite;
}

@keyframes caretBlink {
    50% { opacity: 0; }
}

.hero .btn,
.hero-ctas,
.hero-metrics {
    animation: heroFadeInUp 0.8s var(--ease-premium) 0.7s both;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-text-muted);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-accent-text);
}

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

/* Trust / metrics strip under the CTAs */
.hero-metrics {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.hero-metric {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-source-sans);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
}

.hero-metric:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--color-border);
}

.hero-metric-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-accent-text);
}

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

/* ===================================
   Logos Section
   =================================== */
.logos-section {
    background-color: var(--color-bg-subtle);
    padding: 40px 0;
    position: relative;
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: center;
    justify-items: center;
}

.logos-title {
    font-family: var(--font-source-sans);
    font-size: 48px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 30px;
    text-align: center;
}


@property --logo-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.logo-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-premium);
    position: relative;
    border-radius: 12px;
    padding: 16px;
}

.logo-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 2px;
    background: conic-gradient(
        from var(--logo-border-angle),
        transparent 60%,
        rgba(255, 40, 40, 0.9) 75%,
        rgba(255, 80, 80, 1) 78%,
        rgba(255, 40, 40, 0.9) 81%,
        transparent
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s var(--ease-premium);
    pointer-events: none;
}

.logo-item img {
    width: 100%;
    max-width: 280px;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.logo-item:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(255, 40, 40, 0.3));
}

.logo-item:hover::before {
    opacity: 1;
    animation: logoLightningBorder 2s linear infinite;
}

.logo-item:hover img {
    opacity: 1;
}

@keyframes logoLightningBorder {
    to {
        --logo-border-angle: 360deg;
    }
}

/* ===================================
   About Section
   =================================== */
.about-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 800px;
}

/* The dither panel is a desktop-only flourish. Below 1025px the column is
   removed entirely rather than hidden, so the canvas never gets laid out and
   about-dither.js tears the render loop down. */
.about-visual {
    display: none;
}

@media (min-width: 1025px) {
    .about-content {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        align-items: center;
        gap: 64px;
        max-width: 1180px;
    }

    /* Spans the full height of the copy column, down past the Ship card.
       There is deliberately no gradient scrim over the top: the field's edge
       falloff is baked into the render (see EDGE_* in about-dither.js), so the
       panel dissolves into the section instead of ending on a rectangle. */
    .about-visual {
        display: block;
        position: relative;
        align-self: stretch;
        min-height: 560px;
    }

    .about-visual canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }
}

.about-images img {
    width: 100%;
    max-width: 490px;
}

.about-text h2 {
    font-size: 48px;
    margin-bottom: 15px;
}

.about-text h3 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 30px;
}

.about-description {
    font-size: 20px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

/* Scroll-driven word reveal */
.about-description .word-reveal {
    opacity: 0.12;
    transition: opacity 0.5s var(--ease-premium), transform 0.4s var(--ease-premium);
    display: inline;
    transform: translateY(2px);
}

.about-description .word-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* CTA emphasis for final sentence */
.about-description .word-reveal-cta.visible {
    color: var(--color-accent-text);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(139, 0, 0, 0.3);
}

/* ===================================
   About Highlights
   =================================== */
.about-highlights {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}

.about-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(139, 0, 0, 0.15);
    background: rgba(139, 0, 0, 0.03);
    transition: all 0.4s var(--ease-premium);
    opacity: 0;
    transform: translateX(-20px);
}

.about-highlight-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.about-highlight-item:hover {
    border-color: var(--color-primary);
    background: rgba(139, 0, 0, 0.07);
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(139, 0, 0, 0.1);
}

.highlight-icon,
.highlight-number {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.highlight-number {
    font-family: var(--font-source-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent-text);
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(139, 0, 0, 0.12);
}

.about-highlight-item h4 {
    font-family: var(--font-source-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 6px;
}

/* Was 14px on #666 — 3.41:1, under the 4.5:1 that body-size text needs. */
.about-highlight-item p {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
}

/* ===================================
   Services Section
   =================================== */
.services-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg-subtle);
    position: relative;
}

/* Depth glow behind services */
.services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 20% 50%, rgba(139, 0, 0, 0.06), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.services-cases {
    margin-top: 72px;
}

.service-case {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
}

.service-case.reverse {
    direction: rtl;
}

.service-case.reverse > * {
    direction: ltr;
}

.case-badge {
    display: inline-block;
    font-family: var(--font-source-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-text);
    background: rgba(139, 0, 0, 0.12);
    border: 1px solid rgba(139, 0, 0, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.case-category {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 10px;
}

.case-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}

.case-description {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: var(--color-text-muted);
}

.case-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.case-image img {
    max-width: 400px;
}

.polygon-group {
    position: relative;
    width: 348px;
    height: 348px;
}

.polygon-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.polygon-front {
    position: absolute;
    top: 130px;
    left: 215px;
    width: 280px;
    height: 280px;
}

/* ===================================
   Skillset Section
   =================================== */
.skillset-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

.skillset-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 48px;
    overflow: hidden;
    position: relative;
}

/* Fade edges */
.skillset-rows::before,
.skillset-rows::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}

.skillset-rows::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg), transparent);
}

.skillset-rows::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg), transparent);
}

.skillset-marquee {
    overflow: hidden;
    position: relative;
}

.skillset-marquee-track {
    display: flex;
    gap: 12px;
    width: max-content;
}

.skillset-marquee-track.marquee-left {
    animation: marqueeLeft 25s linear infinite;
}

.skillset-marquee-track.marquee-right {
    animation: marqueeRight 25s linear infinite;
}

@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.skillset-tag {
    font-family: var(--font-source-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 10px 20px;
    white-space: nowrap;
    transition: all 0.3s var(--ease-premium);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.skillset-tag::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 60px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(139, 0, 0, 0.35),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s var(--ease-premium);
    pointer-events: none;
    border-radius: inherit;
}

.skillset-tag:hover {
    border-color: var(--color-primary);
    color: #fff;
    transform: scale(1.08);
}

.skillset-tag:hover::after {
    opacity: 1;
}

.skillset-marquee:hover .skillset-marquee-track {
    animation-play-state: paused;
}

/* ===================================
   Team Section
   =================================== */
.team-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg-subtle);
    position: relative;
    overflow: hidden;
}

/* Background doodle animation */
.team-bg-strip {
    position: relative;
    height: 60px;
    overflow: hidden;
    opacity: 0.12;
    color: #fff;
    pointer-events: none;
    z-index: 0;
    margin-top: -30px;
    margin-bottom: -35px;
}

.team-bg-track {
    display: flex;
    width: max-content;
    animation: teamBgScroll 30s linear infinite;
}

.team-bg-scenes {
    width: 600px;
    height: 80px;
    flex-shrink: 0;
}

@keyframes teamBgScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 72px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.team-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 0;
    overflow: visible;
    position: relative;
    box-shadow: 0px 14px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6);
}

.team-card-photo {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    position: relative;
    background-color: #000;
}

.team-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===================================
   Character mosaic
   ===================================
   A canvas of monospace glyphs covers the photograph; the photo is revealed by
   punching a soft hole in that layer. The canvas itself is static — the reveal
   is purely a mask, so dragging the lens costs nothing per frame.

   --lens is registered with @property so it can be transitioned; an unregistered
   custom property is not an animatable type and the hole would snap open. Where
   @property is unsupported the effect still works, it just cuts rather than
   eases. */
@property --lens {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.photo-mosaic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: var(--color-bg);
    /* The feather scales with --lens rather than being a fixed offset: with a
       constant +16% the gradient still ramps from transparent at radius 0, so a
       hole stayed punched in the layer even at --lens: 0%. Multiplying keeps
       both stops at 0 when closed, leaving the mask fully opaque. */
    -webkit-mask-image: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        transparent 0,
        transparent var(--lens, 0%),
        #000 calc(var(--lens, 0%) * 1.7)
    );
    mask-image: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        transparent 0,
        transparent var(--lens, 0%),
        #000 calc(var(--lens, 0%) * 1.7)
    );
    transition: --lens 0.45s var(--ease-reveal);
}

/* Pointer-driven reveal. The hole tracks the cursor with no transition on
   position, so it stays under the fingertip rather than lagging behind it. */
.team-card-photo.is-revealing .photo-mosaic {
    --lens: 26%;
}

@media (prefers-reduced-motion: reduce) {
    .photo-mosaic {
        display: none;
    }
}

.team-card-info {
    padding: 20px 16px;
    text-align: center;
    border-radius: 0 0 16px 16px;
    background: var(--color-bg-elevated);
    position: relative;
    z-index: 1;
}

.team-card-name {
    font-family: var(--font-source-sans);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}

.team-card-position {
    font-family: var(--font-source-sans);
    font-size: 15px;
    color: var(--color-text-muted);
}

.team-dots {
    display: none;
}

/* ===================================
   How We Work Section
   =================================== */
.how-we-work-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

/* Depth glow behind features */
.how-we-work-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 80% 30%, rgba(178, 34, 34, 0.05), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 40px;
    margin-top: 72px;
}

.feature-item {
    text-align: center;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px 24px;
    position: relative;
    overflow: hidden;
}

.feature-step {
    display: none;
}

.feature-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.feature-title {
    font-family: var(--font-source-sans);
    font-size: 30px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 15px;
}

.feature-description {
    font-size: 20px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ===================================
   Contact Section
   =================================== */
.contact-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg-subtle);
    position: relative;
}

/* Depth glow behind contact */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 80% 30%, rgba(178, 34, 34, 0.05), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.contact-intro {
    font-size: 20px;
    margin: 30px auto 60px;
    max-width: 1110px;
    color: var(--color-text-muted);
}

.contact-form-wrapper {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 60px;
    max-width: 920px;
    margin: 0 auto 60px;
}

.form-title {
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 20px;
}

.form-subtitle {
    font-size: 24px;
    margin-bottom: 40px;
    color: var(--color-text-muted);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-family: var(--font-source-sans);
    font-size: 22px;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-group label {
    position: absolute;
    left: 15px;
    top: 15px;
    font-size: 24px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: all 0.3s ease;
}

.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group input:focus + label,
.form-group textarea:focus + label {
    top: -10px;
    left: 10px;
    font-size: 16px;
    background-color: var(--color-bg-elevated);
    padding: 0 5px;
    color: var(--color-accent-text);
}

.contact-form button[type="submit"] {
    align-self: center;
    margin-top: 20px;
}

/* Drop Us a Line Section */
.drop-us-line {
    margin-top: 80px;
}

.drop-us-line-header {
    margin-bottom: 60px;
}

.drop-us-line-title {
    font-size: 64px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 20px;
}

.drop-us-line-subtitle {
    font-size: 24px;
    color: var(--color-text-muted);
    line-height: 1.5;
    max-width: 574px;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.contact-info-card {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.contact-info-icon {
    width: 40px;
    height: 40px;
    margin: 22px auto 16px;
}

.contact-info-icon img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

.contact-info-title {
    font-family: var(--font-source-sans);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 20px;
}

.contact-info-description {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
    text-align: center;
    padding: 0 16px;
}

.contact-info-description .email-highlight {
    color: var(--color-accent-text);
    font-weight: 600;
}

.contact-info-description .text-highlight {
    color: var(--color-accent-text);
}

/* Structured email methods */
.email-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    text-align: left;
}

.email-method {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}

a.email-method:hover .email-highlight {
    text-decoration: underline;
}

.email-method-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    opacity: 0.7;
}

.pgp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pgp-key {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--color-accent-text);
    display: inline-block;
    letter-spacing: 0.04em;
    user-select: all;
}

.pgp-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.25s var(--ease-premium);
    flex-shrink: 0;
}

.pgp-copy-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.pgp-copy-btn.copied {
    color: #4ade80;
    border-color: #4ade80;
}

/* ===================================
   Footer
   =================================== */
.footer {
    background-color: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    padding: 40px 0 16px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    margin-bottom: 24px;
}

.footer-logo img {
    max-width: 280px;
    height: auto;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.footer-column h4 {
    font-family: var(--font-source-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-accent-text);
    margin-bottom: 20px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a,
.footer-column p {
    font-family: var(--font-source-sans);
    font-size: 16px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--color-accent-text);
}

.footer-column p a {
    font-family: var(--font-source-sans);
    font-size: 16px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column p a:hover {
    color: var(--color-accent-text);
}

.footer-bottom {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.footer-bottom p {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* ===================================
   Problem Section
   =================================== */
.problem-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.problem-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
}

.problem-card:hover {
    border-color: rgba(139, 0, 0, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.problem-card-title {
    font-family: var(--font-source-sans);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.3;
}

.problem-card-desc {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ===================================
   What We Build Section
   =================================== */
.what-we-build-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg-subtle);
    position: relative;
}

.build-categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.build-category-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
}

.build-category-card:hover {
    border-color: rgba(139, 0, 0, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.build-category-title {
    font-family: var(--font-source-sans);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 12px;
}

.build-category-desc {
    font-size: 17px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ===================================
   Proof / Portfolio Section
   =================================== */
.proof-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 56px;
}

.proof-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
    display: flex;
    flex-direction: column;
}

.proof-card:hover {
    border-color: rgba(139, 0, 0, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

.proof-badge {
    display: inline-block;
    font-family: var(--font-source-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent-text);
    background: rgba(139, 0, 0, 0.12);
    border: 1px solid rgba(139, 0, 0, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    width: fit-content;
}

.proof-title {
    font-family: var(--font-source-sans);
    font-size: 26px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.proof-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
    flex: 1;
}

.proof-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.proof-tag {
    font-family: var(--font-source-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px 10px;
}

.proof-link {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-source-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-accent-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.proof-link:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ===================================
   Differentiators Section
   =================================== */
.differentiators-section {
    padding: var(--section-padding) 0;
    position: relative;
}

.differentiators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 56px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.differentiator-card {
    position: relative;
    padding: 28px 28px 28px 88px;
    border-radius: 12px;
    border: 1px solid rgba(139, 0, 0, 0.15);
    background: rgba(139, 0, 0, 0.03);
    transition: all 0.4s var(--ease-premium);
}

/* Outlined numeral, matching the 01–03 / 01–04 counting already used in About
   and Process. Gives the stack rhythm and an anchor for the eye without adding
   any more copy — on mobile these four cards were reading as a wall of text.
   A faint fill sits under the stroke so the numeral survives if
   -webkit-text-stroke is unsupported. */
.differentiator-card::before {
    content: attr(data-num);
    position: absolute;
    top: 22px;
    left: 22px;
    font-family: var(--font-source-sans);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(229, 72, 77, 0.10);
    -webkit-text-stroke: 1px rgba(229, 72, 77, 0.42);
    pointer-events: none;
    transition: color 0.4s var(--ease-premium), -webkit-text-stroke-color 0.4s var(--ease-premium);
}

.differentiator-card:hover::before {
    color: rgba(229, 72, 77, 0.22);
    -webkit-text-stroke-color: rgba(229, 72, 77, 0.75);
}

.differentiator-card:hover {
    border-color: var(--color-primary);
    background: rgba(139, 0, 0, 0.07);
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(139, 0, 0, 0.1);
}

.differentiator-title {
    font-family: var(--font-source-sans);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 8px;
}

.differentiator-desc {
    font-size: 16px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ===================================
   Process Section
   =================================== */
.process-section {
    padding: var(--section-padding) 0;
    background-color: var(--color-bg);
    position: relative;
}

/* Hairline-separated rows rather than a dotted timeline: the step number is
   de-emphasised so the eye lands on the title, and the description is capped to
   a comfortable measure instead of running the full column width. */
.process-steps {
    display: flex;
    flex-direction: column;
    margin: 56px auto 0;
    max-width: 900px;
    border-top: 1px solid var(--color-border);
}

.process-step {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 32px;
    align-items: start;
    padding: 40px 8px;
    border-bottom: 1px solid var(--color-border);
}

.process-step-number {
    font-family: var(--font-source-sans);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-muted);
}

.process-step-title {
    font-family: var(--font-source-sans);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 14px;
}

.process-step-desc {
    font-size: 18px;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 62ch;
}

/* ===================================
   CTA Section
   =================================== */
.cta-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(135deg, #1a0808 0%, #0a0a0a 50%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 0, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-title {
    font-family: var(--font-source-sans);
    font-size: 56px;
    font-weight: 600;
    color: var(--color-accent-text);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.cta-note {
    margin-top: 24px;
    font-size: 15px;
    color: var(--color-text-muted);
    font-style: italic;
    opacity: 0.7;
}

/* ===================================
   Contact Layout (form + info side by side)
   =================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 48px;
}

.contact-layout .contact-form-wrapper {
    margin: 0;
    max-width: none;
}

.contact-layout .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    align-content: start;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .logos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }
}

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

    /* ===== Nav: a floating hamburger, not a bar =======================
       The scrolled state painted a fixed full-width strip with a blurred
       background, which covered content on every scroll and cost real height on
       an already short viewport. The bar is now transparent and click-through;
       only the hamburger remains, carrying its own backdrop so it stays legible
       over whatever scrolls beneath it. The language switcher moves into the
       slide-down panel. */
    .navbar,
    .navbar.scrolled {
        background-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom-color: transparent;
        padding: 14px 0;
        pointer-events: none;
    }

    .nav-wrapper {
        justify-content: flex-end;
    }

    /* Only the in-bar copy; the one inside .nav-menu stays visible. */
    .nav-right .language-switcher {
        display: none;
    }

    .mobile-menu-toggle,
    .nav-menu {
        pointer-events: auto;
    }

    .mobile-menu-toggle {
        background: rgba(12, 8, 8, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .nav-menu-lang {
        display: flex;
        margin: 10px 0 4px;
    }

    /* ===== Hero: fill the first screen and distribute ==================
       At 375x812 the hero was only 0.71vh, so everything bunched against the
       nav and the next section peeked in underneath. svh (not vh) so mobile
       browser chrome does not push the CTAs off-screen. The two auto margins
       split the free space: one above the headline, one below it, which lands
       the headline near the middle and the CTAs against the bottom. */
    .hero {
        min-height: 100svh;
        padding: 96px 0 40px;
        display: flex;
    }

    .hero > .container {
        display: flex;
        width: 100%;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .hero-title {
        margin-top: auto;
        margin-bottom: 28px;
    }

    .hero-ctas {
        margin-top: auto;
    }

    /* The hero's primary booking button is dropped on mobile — the same CTA is
       still reachable from the hamburger menu and the "Ready to Build?" section,
       so the hero keeps one action instead of two stacked full-width pills. */
    .hero-ctas .btn-primary {
        display: none;
    }

    .hero-metrics {
        margin-top: 24px;
    }

    /* ===== Problem: fit the whole section in one screen ================ */
    .problem-section {
        padding: 48px 0;
    }

    .problem-section .section-title {
        margin-bottom: 20px;
    }

    .problem-grid {
        gap: 14px;
    }

    .problem-card {
        padding: 20px;
    }

    .problem-card h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .problem-card p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* ===== Differentiators: less wall-of-text ========================== */
    .differentiators-section {
        padding: 56px 0;
    }

    .differentiators-grid {
        gap: 12px;
    }

    .differentiator-card {
        padding: 20px 20px 20px 62px;
    }

    .differentiator-card::before {
        font-size: 34px;
        top: 14px;
        left: 16px;
    }

    .differentiator-title {
        font-size: 18px;
    }

    .differentiator-desc {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Number moves above the title rather than eating a third of a narrow row */
    .process-step {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 32px 4px;
    }

    .process-step-number {
        font-size: 20px;
    }

    .process-step-title {
        font-size: 24px;
    }

    .process-step-desc {
        font-size: 16px;
    }

    .hero-metrics {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero-metric:not(:last-child)::after {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Fixed so the hamburger stays reachable, but with no bar of its own —
       background, blur and border are deliberately absent here. This rule used
       to paint the full-width dark strip that covered content on scroll. */
    .navbar {
        position: fixed;
    }

    .btn {
        font-size: 18px;
        padding: 10px 22px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 18px;
    }

    .form-group label {
        font-size: 18px;
    }

    :root {
        --section-padding: 80px;
    }

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

    .section-subtitle {
        font-size: 18px;
    }

    .hero {
        padding: 120px 0 80px;
    }

    .about-content,
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .build-categories-grid {
        grid-template-columns: 1fr;
    }

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

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

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

    .hero-ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: 40px 20px;
    }

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

    .form-subtitle {
        font-size: 18px;
    }

    .footer {
        padding: 32px 0 12px;
    }

    .footer-content {
        gap: 24px;
        margin-bottom: 16px;
    }

    .footer-logo {
        text-align: center;
    }

    .footer-logo img {
        max-width: 200px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .footer-column h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .footer-column ul li {
        margin-bottom: 6px;
    }

    .footer-column ul li a,
    .footer-column p,
    .footer-column p a {
        font-size: 14px;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
        text-align: center;
        padding-top: 4px;
        border-top: 1px solid var(--color-border);
    }

    .footer-bottom p {
        font-size: 12px;
    }

    .logos-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
    }

    .logo-item {
        padding: 4px;
    }

    .logo-item img {
        max-width: 80px;
    }

    .logos-section {
        padding: 16px 0;
    }

    .skillset-tag {
        font-size: 13px;
        padding: 8px 14px;
    }

    .team-section {
        padding: 60px 0 40px;
    }

    .team-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 0 40px;
        margin-top: 32px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .team-grid::-webkit-scrollbar {
        display: none;
    }

    .team-card {
        flex: 0 0 70%;
        scroll-snap-align: center;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 0.5;
    }

    .team-card.active {
        opacity: 1;
    }

    .team-card::before,
    .team-card::after {
        display: none !important;
    }

    .team-card .team-card-photo {
        aspect-ratio: 3/4;
        border-radius: 20px;
    }

    .team-card .team-card-photo img {
        border-radius: 20px;
    }

    .team-card .team-card-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 16px;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
        border-radius: 0 0 20px 20px;
        z-index: 2;
    }

    .team-card .team-card-name {
        font-size: 18px;
        color: #fff;
    }

    .team-card .team-card-position {
        font-size: 13px;
        color: rgba(255,255,255,0.7);
    }

    /* Scroll indicator dots */
    .team-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .team-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .team-dot.active {
        background: var(--color-primary);
        width: 24px;
        border-radius: 4px;
    }

    /* Contact section mobile */
    .contact-section {
        padding: 50px 0 40px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .contact-info-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
        padding: 16px;
        border-radius: 12px;
        min-height: auto;
    }

    .contact-info-icon {
        margin: 0;
        min-width: 32px;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .contact-info-card .contact-info-content {
        flex: 1;
        min-width: 0;
    }

    .contact-info-title {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .contact-info-description {
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
        padding: 0;
    }

    .process-steps {
        padding-left: 16px;
    }

    .process-step {
        gap: 16px;
        padding: 20px 0 20px 16px;
    }

    .process-step-number {
        font-size: 24px;
        min-width: 36px;
    }

    .process-step-title {
        font-size: 18px;
    }

    .process-step-desc {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .btn {
        font-size: 16px;
        padding: 9px 18px;
    }

    .hero {
        padding: 110px 0 70px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }

    .form-group label {
        font-size: 16px;
    }

    .container {
        padding: 0 15px;
    }

    .section-title {
        font-size: 28px;
    }

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

    .team-grid {
        padding: 0 30px;
    }

    .team-card {
        flex: 0 0 75%;
    }

    /* Simplify bg effects on mobile */
    .bg-mesh {
        opacity: 0.5;
    }
}

/* ===================================
   Animations
   =================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ===================================
   Premium Micro-Animations
   =================================== */

/* Premium cubic-bezier for all interactive elements */
.btn,
.contact-info-card,
.logo-item,
.problem-card,
.build-category-card,
.proof-card,
.differentiator-card,
.process-step {
    transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

.btn:hover {
    transform: translateY(-2px);
}

.contact-info-card:hover {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.5);
    border-color: rgba(139, 0, 0, 0.3);
}

/* Mouse-follow glow effect on cards */
.problem-card::after,
.build-category-card::after,
.proof-card::after,
.contact-info-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(139, 0, 0, 0.15),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s var(--ease-premium);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

.problem-card:hover::after,
.build-category-card:hover::after,
.proof-card:hover::after,
.contact-info-card:hover::after {
    opacity: 1;
}

/* CTA button pulsing glow */
.nav-cta,
.hero .btn-primary {
    animation: ctaGlow 3s ease-in-out infinite;
}

@keyframes ctaGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(139, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 25px rgba(139, 0, 0, 0.35), 0 0 50px rgba(139, 0, 0, 0.1);
    }
}

/* Scroll-triggered reveal animations.
   The stagger comes from transition-delay (--anim-delay, set once in JS) rather
   than a setTimeout per element, so the offsets are driven by the compositor
   and stay even when the main thread is busy. */
.scroll-animate {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.9s var(--ease-reveal) var(--anim-delay, 0ms),
                transform 0.9s var(--ease-reveal) var(--anim-delay, 0ms);
    will-change: opacity, transform;
}

.scroll-animate.scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Dropped once the reveal has run, so long pages don't hold hundreds of
   promoted layers. */
.scroll-animate.scroll-settled {
    will-change: auto;
}

/* Directional scroll animations */
.scroll-animate-left {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
    transition: opacity 0.9s var(--ease-reveal) var(--anim-delay, 0ms),
                transform 0.9s var(--ease-reveal) var(--anim-delay, 0ms);
}

.scroll-animate-right {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
    transition: opacity 0.9s var(--ease-reveal) var(--anim-delay, 0ms),
                transform 0.9s var(--ease-reveal) var(--anim-delay, 0ms);
}

.scroll-animate-left.scroll-visible,
.scroll-animate-right.scroll-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ===================================
   Section Light (Dark/Light Interplay)
   =================================== */
/* Formerly near-white sections. The page now stays dark end to end; these keep
   their rhythm from a barely-there lift off the base background plus a hairline,
   not from inverting to white. */
.section-light {
    background-color: rgba(255, 255, 255, 0.022);
    color: var(--color-text);
    padding-top: calc(var(--section-padding) + 40px);
    padding-bottom: calc(var(--section-padding) + 40px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

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

.section-light .section-subtitle {
    color: var(--color-text-muted);
}

.section-light .about-description {
    color: var(--color-text);
}

.section-light .about-text h3 {
    color: var(--color-accent-text);
}

.section-light .feature-item {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border);
}

.section-light .feature-title {
    color: var(--color-text);
}

.section-light .feature-description {
    color: var(--color-text-muted);
}

.section-light .feature-icon img {
    filter: none;
    opacity: 1;
}

.how-we-work-section.section-light {
    background-color: rgba(255, 255, 255, 0.022);
}

/* ===================================
   Hero Glow Animation
   =================================== */
.hero-glow {
    position: absolute;
    top: 50%;
    left: 30%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%) scale(0.5);
    background: radial-gradient(circle, rgba(139, 0, 0, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    animation: heroGlowReveal 1.5s var(--ease-premium) 0.2s both;
    filter: blur(60px);
}

@keyframes heroGlowReveal {
    from {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ===================================
   Glow Border Effect
   =================================== */
.glow-border {
    position: relative;
}

.glow-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid transparent;
    background: linear-gradient(transparent, transparent) padding-box,
                linear-gradient(135deg, rgba(139, 0, 0, 0.4), rgba(178, 34, 34, 0.2)) border-box;
    filter: blur(1px);
    z-index: -1;
    animation: glowRotate 6s linear infinite;
}

.glow-border::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 3px solid transparent;
    background: linear-gradient(transparent, transparent) padding-box,
                linear-gradient(135deg, rgba(139, 0, 0, 0.6), rgba(178, 34, 34, 0.3)) border-box;
    filter: blur(12px);
    z-index: -2;
    animation: glowRotate 6s linear infinite;
}

@keyframes glowRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate,
    .scroll-animate-left,
    .scroll-animate-right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero-line {
        animation: none;
        opacity: 1;
        stroke-dashoffset: 0;
    }
    .hero-title,
    .hero .btn {
        animation: none;
    }
    .nav-cta,
    .hero .btn-primary {
        animation: none;
    }
    .bg-mesh {
        animation: none;
    }
    .hero-glow {
        animation: none;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .glow-border::before,
    .glow-border::after {
        animation: none;
    }
    .team-card::before,
    .team-card::after {
        animation: none;
        opacity: 0 !important;
    }
    .about-description .word-reveal {
        opacity: 1;
        transition: none;
        transform: none;
    }
    .hero-line-pulse {
        animation: none;
        opacity: 0;
    }
    .logo-item::before {
        animation: none;
        opacity: 0;
    }
    .btn-primary::after {
        animation: none;
    }
}