/* ============================================================
   CHEN DIGMI PORTFOLIO - Complete Design System
   Based on Figma Make designs - all screenshots
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand colors */
    --color-bg: #FFFFFF;
    --color-bg-beige: #F5F2EC;
    --color-bg-dark: #0F1115;
    --color-text: #1A1A1A;
    --color-text-muted: #6B6B6B;
    --color-text-light: rgba(255, 255, 255, 0.85);
    --color-text-light-muted: rgba(255, 255, 255, 0.55);

    /* Accent palette */
    --color-coral: #FF3D5C;
    --color-coral-soft: #FFE0E6;
    --color-purple: #7B4DFF;
    --color-teal: #2DD4BF;
    --color-mint: #2DFF9A;
    --color-lavender: #C4B5FD;
    --color-yellow: #FFD93D;

    /* ========================================
       2026 Bento Palette (homepage tiles only)
       Editorial harmony + Fuchsia accent intact
       ======================================== */
    --color-tile-ivory: #F5F1E8;       /* EAGLE flagship - warm ivory */
    --color-tile-indigo: #2A3A8C;      /* TIIKITI - electric indigo */
    --color-tile-jade: #AEB8A0;        /* Cozzy - jade green */
    --color-tile-persimmon: #FF5C34;   /* Dollybook - persimmon orange */
    --color-fuchsia: #FF3D5C;          /* Primary accent (unchanged DNA) */

    /* UI */
    --color-border: #EDEDED;
    --color-border-dark: rgba(255, 255, 255, 0.1);
    --color-surface-dark: #1A1D24;

    /* Shadows */
    --shadow-card: 0px 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0px 20px 48px rgba(0, 0, 0, 0.12);
    --shadow-deep: 0px 40px 80px rgba(0, 0, 0, 0.15);

    /* Radius */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-pill: 999px;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 80px;
    --space-4xl: 120px;
    --space-5xl: 160px;

    /* Type scale - mobile defaults */
    --fs-h1: 56px;
    --fs-h2: 40px;
    --fs-h3: 28px;
    --fs-h4: 22px;
    --fs-body-xl: 20px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-tiny: 12px;
    --fs-micro: 11px;

    /* Container */
    --container-max: 1280px;
    --container-pad: 24px;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 768px) {
    :root {
        --fs-h1: 88px;
        --fs-h2: 56px;
        --fs-h3: 36px;
        --fs-h4: 26px;
        --container-pad: 40px;
    }
}

@media (min-width: 1024px) {
    :root {
        --fs-h1: 120px;
        --fs-h2: 72px;
        --fs-h3: 44px;
        --fs-h4: 28px;
        --fs-body-lg: 20px;
        --container-pad: 64px;
    }
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

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

ul[role="list"] {
    list-style: none;
}

/* ---------- 3. ACCESSIBILITY ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 24px;
    background: var(--color-text);
    color: var(--color-bg);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    z-index: 9999;
    font-weight: 600;
    transition: top 200ms var(--ease);
}

.skip-link:focus {
    top: 16px;
}

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

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

    .marquee-track {
        animation: none !important;
    }
}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* ============================================================
   GREEN DOT INDICATORS (signature element across all pages)
   ============================================================ */
.dot-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-teal);
    box-shadow: 0 0 0 3px transparent;
    animation: dot-pulse 2.4s ease-in-out infinite;
}

.dot-indicator-ring {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-teal);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dot-indicator-ring::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color-teal);
    border-radius: 50%;
}

@keyframes dot-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(45, 212, 191, 0);
        transform: scale(1.1);
    }
}

/* Pink dot (used for eyebrow labels) */
.pink-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-coral);
    flex-shrink: 0;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}

.nav-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0 var(--container-pad);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.nav-logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    display: inline-flex;
    align-items: baseline;
}

.nav-logo-dot {
    color: var(--color-coral);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links {
    display: none;
    align-items: center;
    gap: var(--space-xl);
}

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

.nav-links a {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding: 6px 0;
    transition: color 200ms var(--ease);
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-coral);
    transition: width 300ms var(--ease-out);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-coral);
    color: var(--color-bg);
    padding: 12px 26px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    transition: all 200ms var(--ease);
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 61, 92, 0.3);
}

.nav-cta-arrow {
    transition: transform 250ms var(--ease-out);
}

.nav-cta:hover .nav-cta-arrow {
    transform: translateX(4px);
}

/* Mobile burger */
.nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
}

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

.nav-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.mobile-menu {
    background: var(--color-bg);
    padding: var(--space-md) var(--container-pad) var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.mobile-menu a {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    padding: 8px 0;
}

/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero {
    padding: var(--space-3xl) 0 var(--space-4xl);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .hero {
        padding: var(--space-4xl) 0 var(--space-5xl);
    }
}

/* Status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2xl);
}

.status-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00C853;
    animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0, 200, 83, 0); }
}

/* Hero headline */
.hero-headline {
    font-size: var(--fs-h1);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--color-text);
    margin-bottom: var(--space-xl);
}

.hero-headline .impact {
    color: var(--color-coral);
}

.hero-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 580px;
    margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
    .hero-sub {
        font-size: 22px;
    }
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 600;
    transition: all 250ms var(--ease-out);
    min-height: 52px;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--color-coral);
    color: var(--color-bg);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 61, 92, 0.3);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-text);
}

.btn-ghost:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.btn-arrow {
    transition: transform 250ms var(--ease-out);
}

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

/* ============================================================
   MARQUEE (dark strip)
   ============================================================ */
.marquee {
    background: var(--color-bg-dark);
    padding: var(--space-md) 0;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    padding-right: var(--space-2xl);
}

.marquee-item {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .marquee-item {
        font-size: 26px;
    }
}

.marquee-dot {
    width: 8px;
    height: 8px;
    background: var(--color-coral);
    border-radius: 50%;
    flex-shrink: 0;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================================
   SECTION HEADERS (eyebrow + h2)
   ============================================================ */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-lg);
}

.section-eyebrow-light {
    color: var(--color-coral);
}

.section-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

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

.section-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 640px;
    margin-top: var(--space-md);
}

.section-header-center {
    text-align: center;
    margin-bottom: var(--space-3xl);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-header-center .section-sub {
    margin-inline: auto;
}

/* ============================================================
   SELECTED WORK - BENTO
   ============================================================ */
.work-section {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .work-section {
        padding: var(--space-4xl) 0;
    }
}

.bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .bento {
        gap: var(--space-xl);
    }
}

/* TIIKITI - Full width flagship tile */
.bento-flagship {
    background: var(--color-purple);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    color: var(--color-bg);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    overflow: hidden;
    position: relative;
    transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

@media (min-width: 768px) {
    .bento-flagship {
        grid-template-columns: 1fr 1fr;
        padding: var(--space-2xl);
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .bento-flagship {
        padding: var(--space-3xl);
        min-height: 540px;
    }
}

.bento-flagship:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
}

/* EAGLE flagship - Warm Ivory (2026 palette) */
.bento-flagship-yellow {
    background: var(--color-tile-ivory);
    color: var(--color-text);
}

.bento-flagship-yellow .tile-tag {
    color: var(--color-text);
    opacity: 0.85;
}

.bento-flagship-yellow .bento-flagship-meta {
    color: rgba(26, 26, 26, 0.7);
}

.bento-flagship-yellow .btn-tile-primary {
    background: var(--color-text);
    color: var(--color-tile-ivory);
}

.bento-flagship-yellow:hover .btn-tile-primary {
    background: var(--color-fuchsia);
    color: var(--color-bg);
}

/* LIGHT BOX flagship - Mint (energy + nutrition palette) */
.bento-flagship-mint {
    background: linear-gradient(135deg, #FBF3E8 0%, #F5E6D3 100%);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.bento-flagship-mint::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle, rgba(77, 191, 163, 0.20) 0%, transparent 65%);
    pointer-events: none;
}

.bento-flagship-mint .tile-tag {
    color: var(--color-text);
    opacity: 0.85;
}

.bento-flagship-mint .bento-flagship-meta {
    color: rgba(26, 26, 26, 0.7);
}

.bento-flagship-mint .bento-flagship-title {
    color: var(--color-text);
    letter-spacing: -0.03em;
    font-weight: 800;
    font-size: clamp(56px, 9vw, 120px);
    line-height: 0.9;
}

@media (max-width: 767px) {
    .bento-flagship-mint .bento-flagship-title {
        font-size: clamp(48px, 12vw, 72px);
    }
}

.bento-flagship-mint .bento-flagship-sub {
    color: var(--color-text);
    font-weight: 600;
}

.bento-flagship-mint .bento-flagship-question {
    color: rgba(26, 26, 26, 0.7);
}

.bento-flagship-mint .btn-tile-primary {
    background: var(--color-text);
    color: #FFFFFF;
}

.bento-flagship-mint:hover .btn-tile-primary {
    background: var(--color-fuchsia);
    color: var(--color-bg);
}

/* NDA badge inside flagship */
.bento-flagship-nda-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 639px) {
    .bento-flagship-nda-badge {
        margin-left: 0;
        margin-top: 12px;
        display: block;
        width: fit-content;
    }
}

/* Placeholder for EAGLE visuals */
.bento-flagship-placeholder {
    background: rgba(0, 0, 0, 0.08);
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bento-flagship-placeholder .placeholder-label {
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(0, 0, 0, 0.5);
}

.bento-flagship-placeholder .placeholder-sub {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(0, 0, 0, 0.4);
}

/* TIIKITI purple tile (in trio row) */
/* TIIKITI - Electric Indigo (2026 palette) */
.bento-tile-purple {
    background: var(--color-tile-indigo);
    color: var(--color-tile-ivory);
}

.bento-tile-purple .tile-tag {
    color: var(--color-tile-ivory);
}

.bento-tile-purple .bento-tile-meta {
    color: rgba(245, 241, 232, 0.7);
}

.tile-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md);
    opacity: 0.95;
}

.tile-tag .pink-dot {
    background: var(--color-coral);
}

/* 2026 palette - dots become ivory inside the 3 lower tiles
   to avoid fuchsia-on-warm-color vibration (especially Persimmon) */
.bento-tile-purple .tile-tag .pink-dot,
.bento-tile-teal .tile-tag .pink-dot,
.bento-tile-lavender .tile-tag .pink-dot {
    background: var(--color-tile-ivory);
}

.bento-flagship-title {
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-md);
}

.bento-flagship-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.4;
    margin-bottom: var(--space-md);
    max-width: 480px;
    color: var(--color-bg);
}

@media (min-width: 1024px) {
    .bento-flagship-sub {
        font-size: 22px;
    }
}

.bento-flagship-question {
    font-size: var(--fs-body);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
    max-width: 460px;
    color: rgba(255, 255, 255, 0.85);
}

.bento-flagship-meta {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-lg);
}

.bento-flagship-ctas {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.btn-tile-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg);
    color: var(--color-text);
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    transition: all 250ms var(--ease-out);
}

.btn-tile-primary:hover,
.bento-flagship:hover .btn-tile-primary {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bento-flagship:hover .btn-tile-primary span[aria-hidden] {
    transform: translateX(4px);
}

.btn-tile-primary span[aria-hidden] {
    display: inline-block;
    transition: transform 250ms var(--ease-out);
}

/* CTA button for Cozzy/Dollybook tiles */
.bento-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 700;
    transition: all 250ms var(--ease-out);
    align-self: flex-start;
}

.bento-tile:hover .bento-tile-cta {
    background: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.bento-tile-cta span[aria-hidden] {
    display: inline-block;
    transition: transform 250ms var(--ease-out);
}

.bento-tile:hover .bento-tile-cta span[aria-hidden] {
    transform: translateX(4px);
}

.bento-flagship-mockup {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-flagship-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Row 2: Cozzy + Dollybook side by side */
.bento-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .bento-pair {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* Row 2 (4 projects): Cozzy + Ariel Wimasor + Dollybook in a trio */
.bento-trio {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .bento-trio {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .bento-trio {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.bento-tile {
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .bento-tile {
        padding: var(--space-2xl);
        min-height: 560px;
    }
}

.bento-tile:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-deep);
}

/* Cozzy - Jade (2026 palette) */
.bento-tile-teal {
    background: var(--color-tile-jade);
    color: var(--color-text);
}

/* Dollybook - Persimmon (2026 palette) */
.bento-tile-lavender {
    background: var(--color-tile-persimmon);
    color: var(--color-tile-ivory);
}

.bento-tile-yellow {
    background: var(--color-yellow);
    color: var(--color-text);
}

/* NDA tile - not a link, shows static info with note */
.bento-tile-nda {
    cursor: default;
}

.bento-tile-nda:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.bento-tile-nda-note {
    margin-top: var(--space-md);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm);
    display: inline-block;
    color: rgba(0, 0, 0, 0.7);
}

.bento-tile-title {
    font-size: clamp(56px, 7vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
}

/* When in trio (3 tiles per row), shrink title */
@media (min-width: 1024px) {
    .bento-trio .bento-tile-title {
        font-size: clamp(40px, 4vw, 56px);
    }
    .bento-trio .bento-tile {
        min-height: 460px;
        padding: var(--space-xl);
    }
    .bento-trio .bento-tile-sub {
        font-size: 16px;
    }
}

.bento-tile-sub {
    font-size: var(--fs-body);
    line-height: 1.5;
    margin-bottom: var(--space-md);
    max-width: 360px;
}

@media (min-width: 1024px) {
    .bento-tile-sub {
        font-size: 17px;
    }
}

.bento-tile-meta {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.7;
    margin-bottom: var(--space-md);
}

.bento-tile-image {
    margin-top: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bento-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bento-tile-image-tilted-right {
    transform: rotate(3deg);
}

.bento-tile-image-tilted-left {
    transform: rotate(-3deg);
}

/* NDA badge */
.nda-badge {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--space-md);
}

/* ============================================================
   PAST EXPLORATIONS (earlier work tiles row)
   ============================================================ */
.past-section {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .past-section {
        padding: var(--space-4xl) 0;
    }
}

.past-eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
}

.past-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-2xl);
    color: var(--color-text);
}

.past-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .past-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .past-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-lg);
    }
}

.past-card {
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--color-bg);
    transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
    position: relative;
    overflow: hidden;
}

.past-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.past-card-purple { background: var(--color-purple); }
.past-card-teal { background: var(--color-teal); color: #0F4A4A; }
.past-card-yellow { background: var(--color-yellow); color: var(--color-text); }
.past-card-lavender { background: var(--color-lavender); color: var(--color-text); }

.past-card-year {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.8;
    margin-bottom: 4px;
}

.past-card-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
    .past-card-name {
        font-size: 28px;
    }
}

/* ============================================================
   ABOUT (Hi card)
   ============================================================ */
.about-section {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .about-section {
        padding: var(--space-4xl) 0;
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

@media (min-width: 1024px) {
    .about-grid {
        gap: var(--space-3xl);
    }
}

.about-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-bg-beige);
    box-shadow: var(--shadow-card);
}

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

.about-greeting {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
}

.about-body {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.about-body strong {
    color: var(--color-text);
    font-weight: 700;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-coral);
    font-size: 16px;
    font-weight: 700;
    margin-top: var(--space-md);
    transition: gap 200ms var(--ease);
}

.about-link:hover {
    gap: 12px;
}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.capabilities-section {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .capabilities-section {
        padding: var(--space-4xl) 0;
    }
}

.cap-header {
    margin-bottom: var(--space-2xl);
}

.cap-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-md);
}

.cap-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-text);
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
}

.cap-title-dot {
    width: 14px;
    height: 14px;
    background: var(--color-coral);
    border-radius: 50%;
    display: inline-block;
}

.cap-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .cap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

@media (min-width: 1024px) {
    .cap-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-sm);
    }
}

.cap-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-lg);
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .cap-card {
        padding: var(--space-lg) var(--space-md);
    }
}

.cap-card:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.cap-card-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-lg);
    color: var(--color-text);
    /* Reserve space for two lines so all 4 cards align uniformly */
    min-height: calc(22px * 1.25 * 2);
}

@media (min-width: 1024px) {
    .cap-card-title {
        font-size: 24px;
        min-height: calc(24px * 1.25 * 2);
    }
}

.cap-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.cap-card-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .cap-card-item {
        font-size: 16px;
    }
}

.cap-card-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-coral);
    flex-shrink: 0;
    /* Align dot vertically with first line of text */
    margin-top: 8px;
}

/* ============================================================
   PROCESS (How I work - dark section)
   ============================================================ */
.process-section {
    background: var(--color-bg-dark);
    color: var(--color-bg);
    padding: var(--space-4xl) 0;
    text-align: center;
}

@media (min-width: 1024px) {
    .process-section {
        padding: var(--space-5xl) 0;
    }
}

.process-eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-lg);
}

.process-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-bg);
    margin-bottom: var(--space-md);
}

.process-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
}

.process-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    text-align: center;
}

@media (min-width: 768px) {
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-step-num {
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: var(--space-md);
    letter-spacing: -0.04em;
}

@media (min-width: 1024px) {
    .process-step-num {
        font-size: 120px;
    }
}

.process-step-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-bg);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
    .process-step-title {
        font-size: 36px;
    }
}

.process-step-desc {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    max-width: 280px;
}

/* Experience list (dark section) - centered layout */
.exp-list {
    margin: var(--space-2xl) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 920px;
}

.exp-item {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    transition: background 0.3s, border-color 0.3s;
    text-align: center;
}

.exp-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.exp-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-coral);
}

.exp-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.exp-type {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.exp-role {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .exp-role {
        font-size: 32px;
    }
}

.exp-company {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

.exp-bullets {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 680px;
}

.exp-bullets li {
    position: relative;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.exp-bullets li::before {
    content: "→ ";
    color: var(--color-coral);
    font-weight: 600;
    margin-right: 4px;
}

/* Education block - centered */
.edu-block {
    margin: var(--space-3xl) auto 0;
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 920px;
    text-align: center;
}

.edu-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-coral);
    margin-bottom: var(--space-lg);
}

.edu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .edu-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.edu-degree {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
    line-height: 1.3;
}

.edu-school {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.edu-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    max-width: 380px;
    margin: 0 auto;
}

/* ============================================================
   STATS + CONTACT
   ============================================================ */
.stats-section {
    padding: var(--space-3xl) 0 var(--space-md);
    text-align: center;
}

@media (min-width: 1024px) {
    .stats-section {
        padding: var(--space-4xl) 0 var(--space-lg);
    }
}

.stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-4xl);
}

@media (min-width: 640px) {
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-coral);
    letter-spacing: -0.04em;
    margin-bottom: var(--space-sm);
}

@media (min-width: 1024px) {
    .stat-num {
        font-size: 120px;
    }
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text-muted);
}

.contact-block {
    text-align: center;
    padding: var(--space-3xl) 0;
}

.contact-title {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.contact-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 640px;
    margin: 0 auto var(--space-xl);
}

.contact-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

@media (min-width: 640px) {
    .contact-actions {
        flex-direction: row;
        justify-content: center;
    }
}

.contact-direct {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.contact-direct a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: color 200ms;
}

.contact-direct a:hover {
    color: var(--color-coral);
}

/* ============================================================
   FOOTER (dark)
   ============================================================ */
.footer {
    background: var(--color-bg-dark);
    color: var(--color-bg);
    padding: var(--space-3xl) 0 var(--space-lg);
}

@media (min-width: 1024px) {
    .footer {
        padding: var(--space-4xl) 0 var(--space-lg);
    }
}

.footer-headline {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-bg);
    margin-bottom: var(--space-3xl);
    max-width: 900px;
}

.footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-border-dark);
    margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
    .footer-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-col h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-md);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.footer-col a {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-bg);
    transition: color 200ms var(--ease);
    display: inline-block;
    padding: 8px 0;        /* enlarges tap target on mobile */
    min-height: 44px;
    line-height: 1.5;
}

.footer-col a:hover {
    color: var(--color-coral);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ============================================================
   CASE STUDY PAGES (TIIKITI, Cozzy, Dollybook)
   ============================================================ */

/* Back to portfolio strip */
.case-back-strip {
    padding: var(--space-md) 0;
    background: var(--color-bg);
}

.case-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    padding: 8px 0;
}

.case-back-link:hover {
    color: var(--color-coral);
}

/* Case hero */
.case-hero {
    padding: var(--space-xl) 0 var(--space-3xl);
}

@media (min-width: 1024px) {
    .case-hero {
        padding: var(--space-2xl) 0 var(--space-4xl);
    }
}

.case-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .case-hero-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-3xl);
    }
}

.case-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-lg);
}

.case-hero-title {
    font-size: clamp(72px, 12vw, 160px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-lg);
}

.case-hero-title-purple {
    color: var(--color-purple);
}

.case-hero-title-mint {
    color: #4DBFA3;
}

.case-hero-subtitle {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    max-width: 540px;
}

.case-hero-question {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 540px;
}

.case-hero-visual {
    background: linear-gradient(135deg, rgba(123, 77, 255, 0.06) 0%, rgba(123, 77, 255, 0.01) 100%);
    border-radius: var(--radius-lg);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.case-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (min-width: 1024px) {
    .case-hero-visual {
        aspect-ratio: 1 / 1;
    }
}

/* Case meta strip */
.case-meta-strip {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.case-meta-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 768px) {
    .case-meta-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.case-meta-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-sm);
}

.case-meta-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 4px;
}

.case-meta-sub {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* TL;DR block */
.case-tldr {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-tldr {
        padding: var(--space-4xl) 0;
    }
}

.case-tldr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-lg);
}

.case-tldr-text {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
    max-width: 920px;
}

/* User Pain section */
.case-pain {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-pain {
        padding: var(--space-4xl) 0;
    }
}

.case-pain-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-xl);
    max-width: 1100px;
}

.case-pain-text {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    max-width: 920px;
}

@media (min-width: 1024px) {
    .case-pain-text {
        font-size: 22px;
    }
}

/* Design Principles section (beige bg) */
.case-principles {
    background: var(--color-bg-beige);
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-principles {
        padding: var(--space-5xl) 0;
    }
}

.case-principles-intro {
    margin-bottom: var(--space-4xl);
}

.case-principles-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
    max-width: 1100px;
}

.case-principles-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 720px;
}

@media (min-width: 1024px) {
    .case-principles-sub {
        font-size: 22px;
    }
}

.principle-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-4xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .principle-block {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
    }
}

.principle-block-reverse .principle-image {
    order: -1;
}

@media (min-width: 1024px) {
    .principle-block-reverse .principle-image {
        order: 1;
    }
    .principle-block-reverse .principle-text {
        order: 2;
    }
}

.principle-image {
    background: #F5F1EA;
    border-radius: var(--radius-lg);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    padding: var(--space-lg);
}

.principle-image img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

@media (max-width: 767px) {
    .principle-image {
        aspect-ratio: 4 / 3;
    }
}

.principle-number {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-md);
}

.principle-number::before {
    content: '';
    width: 32px;
    height: 2px;
    background: var(--color-coral);
}

.principle-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-lg);
}

.principle-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-sm);
    margin-top: var(--space-md);
}

.principle-text-block {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    max-width: 520px;
    margin-bottom: var(--space-md);
}

@media (min-width: 1024px) {
    .principle-text-block {
        font-size: 18px;
    }
}

.principle-decision-label {
    color: var(--color-coral);
}

/* Flow in Action (dark section) */
.case-flow {
    background: var(--color-bg-dark);
    color: var(--color-bg);
    padding: var(--space-3xl) 0;
    text-align: center;
}

@media (min-width: 1024px) {
    .case-flow {
        padding: var(--space-5xl) 0;
    }
}

.case-flow-title {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
    color: var(--color-bg);
}

.case-flow-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 720px;
    margin: 0 auto var(--space-3xl);
}

@media (min-width: 1024px) {
    .case-flow-sub {
        font-size: 22px;
    }
}

.case-flow-visual {
    margin-top: var(--space-2xl);
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: perspective(2000px) rotateX(8deg);
    transform-origin: center bottom;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

.case-flow-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Personas grid */
.case-personas {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-personas {
        padding: var(--space-4xl) 0;
    }
}

.case-personas-intro {
    margin-bottom: var(--space-3xl);
}

.case-personas-title {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
}

.case-personas-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 720px;
}

.personas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .personas-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

.persona-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}

@media (min-width: 1024px) {
    .persona-card {
        padding: var(--space-2xl);
    }
}

.persona-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.persona-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: var(--color-bg);
    margin-bottom: var(--space-lg);
}

.persona-avatar-coral { background: var(--color-coral); }
.persona-avatar-purple { background: var(--color-purple); }
.persona-avatar-teal { background: var(--color-teal); }
.persona-avatar-yellow { background: var(--color-yellow); color: var(--color-text); }

.persona-name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    color: var(--color-text);
}

.persona-meta {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.persona-quote {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    font-style: italic;
}

/* Try it yourself (prototype CTA) */
.case-prototype {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-beige);
    text-align: center;
}

@media (min-width: 1024px) {
    .case-prototype {
        padding: var(--space-5xl) 0;
    }
}

.case-prototype-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-lg);
}

.case-prototype-title {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
}

.case-prototype-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto var(--space-xl);
}

@media (min-width: 1024px) {
    .case-prototype-sub {
        font-size: 22px;
    }
}

.btn-prototype {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--color-purple);
    color: var(--color-bg);
    padding: 18px 36px;
    border-radius: var(--radius-pill);
    font-size: 18px;
    font-weight: 700;
    transition: all 250ms var(--ease-out);
}

.btn-prototype:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(123, 77, 255, 0.4);
}

.case-prototype-note {
    margin-top: var(--space-md);
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Closing summary */
.case-closing {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-closing {
        padding: var(--space-4xl) 0;
    }
}

.case-closing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-lg);
}

.case-closing-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-xl);
    max-width: 1100px;
}

.case-closing-text {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 820px;
    margin-bottom: var(--space-3xl);
}

.case-open-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-coral);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-md);
}

.case-open-list {
    list-style: none;
    max-width: 820px;
}

.case-open-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.case-open-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-text);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 12px;
}

/* Next case teaser */
.case-next {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-beige);
}

@media (min-width: 1024px) {
    .case-next {
        padding: var(--space-4xl) 0;
    }
}

.case-next-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-md);
}

.case-next-link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-lg);
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--color-text);
    transition: color 200ms var(--ease);
}

.case-next-link:hover {
    color: var(--color-coral);
}

.case-next-arrow {
    transition: transform 250ms var(--ease-out);
}

.case-next-link:hover .case-next-arrow {
    transform: translateX(12px);
}

.case-next-sub {
    font-size: var(--fs-body-lg);
    color: var(--color-text-muted);
    margin-top: var(--space-md);
}

/* ============================================================
   CUSTOM CURSOR (two-part) + CLICK RIPPLE
   Desktop only - hidden on touch devices
   ============================================================ */

/* Hide native cursor on devices that support fine pointing */
@media (hover: hover) and (pointer: fine) {
    body {
        cursor: none;
    }
    a, button, [role="button"], input, textarea, select, .case-back-link, label {
        cursor: none;
    }
}

/* Inner dot - always visible, follows mouse exactly */
#cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    background: #FF3D5C;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Outer ring - elastic follow */
#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid #FF3D5C;
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

#cursor-ring .cursor-label {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 150ms ease-out;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    padding: 0 4px;
}

/* ---- State: link ---- */
body.cursor-link #cursor-ring {
    width: 44px;
    height: 44px;
    border-width: 2px;
}

/* ---- State: cta ---- */
body.cursor-cta #cursor-ring {
    min-width: 60px;
    height: 60px;
    width: auto;
    padding: 0 16px;
    background: #FF3D5C;
    border-color: #FF3D5C;
    border-radius: 999px;
}

/* When CTA cursor has no label, collapse to small circle (no text bubble) */
body.cursor-cta #cursor-ring:has(.cursor-label:empty),
body.cursor-cta.cursor-no-label #cursor-ring {
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
}

body.cursor-cta #cursor-dot {
    opacity: 0;
}

body.cursor-cta #cursor-ring .cursor-label {
    opacity: 1;
}

body.cursor-cta #cursor-ring .cursor-label:empty {
    opacity: 0;
    padding: 0;
}

/* ---- State: tile ---- */
body.cursor-tile #cursor-ring {
    min-width: 72px;
    height: 72px;
    width: auto;
    padding: 0 20px;
    background: #FF3D5C;
    border-color: #FF3D5C;
    border-radius: 999px;
}

/* When tile cursor has no label, collapse to circle */
body.cursor-tile #cursor-ring:has(.cursor-label:empty),
body.cursor-tile.cursor-no-label #cursor-ring {
    min-width: 56px;
    width: 56px;
    height: 56px;
    padding: 0;
}

body.cursor-tile #cursor-dot {
    opacity: 0;
}

body.cursor-tile #cursor-ring .cursor-label {
    opacity: 1;
}

body.cursor-tile #cursor-ring .cursor-label:empty {
    opacity: 0;
    padding: 0;
}

/* ---- State: image ---- */
body.cursor-image #cursor-ring {
    width: 52px;
    height: 52px;
    border-width: 2px;
}

/* ---- Cursor over text content ---- */
body.cursor-on-text #cursor-ring {
    opacity: 0;
}

body.cursor-on-text #cursor-dot {
    width: 6px;
    height: 6px;
}

/* ---- DISABLED on touch devices ---- */
@media (pointer: coarse), (hover: none) {
    body {
        cursor: auto !important;
    }
    a, button, [role="button"], input, textarea, select {
        cursor: auto !important;
    }
    #cursor-dot,
    #cursor-ring {
        display: none !important;
    }
}

/* ---- Respect reduced motion (still show, just no transitions) ---- */
@media (prefers-reduced-motion: reduce) {
    #cursor-dot,
    #cursor-ring,
    #cursor-ring .cursor-label {
        transition: none !important;
    }
}

/* ============================================================
   CLICK RIPPLE - localized at click point
   ============================================================ */
.click-ripple {
    position: fixed;
    width: 16px;
    height: 16px;
    background: #FF3D5C;
    opacity: 0.5;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9997;
    transform: translate(-50%, -50%);
    animation: ripple-localized 500ms ease-out forwards;
}

@keyframes ripple-localized {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* No ripple on touch devices either (would be triggered by every tap) */
@media (prefers-reduced-motion: reduce) {
    .click-ripple {
        animation: none;
        opacity: 0;
    }
}

/* ============================================================
   CASE STUDY - VISUAL LANGUAGE SECTION (dark)
   For TIIKITI: Color / Typography / Effects / Components
   ============================================================ */
.case-visual-system {
    background: var(--color-bg-dark);
    color: var(--color-bg);
    padding: var(--space-4xl) 0;
}

@media (min-width: 1024px) {
    .case-visual-system {
        padding: var(--space-5xl) 0;
    }
}

/* ============================================================
   COZZY - Visual Language LIGHT variant
   Cream background, dark text, mint accent
   ============================================================ */
.case-visual-system-light {
    background: #F5F2EC;
    color: #1E1E1E;
}

.case-visual-system-light .case-vs-title {
    color: #1E1E1E;
}
.case-visual-system-light .case-vs-sub {
    color: rgba(30, 30, 30, 0.65);
}
.case-visual-system-light .vs-block {
    border-top-color: rgba(30, 30, 30, 0.1);
}
.case-visual-system-light .vs-section-label {
    color: rgba(30, 30, 30, 0.5);
}
.case-visual-system-light .vs-section-title {
    color: #1E1E1E;
}
.case-visual-system-light .vs-section-sub {
    color: rgba(30, 30, 30, 0.65);
}
.case-visual-system-light .vs-color-name {
    color: #1E1E1E;
}
.case-visual-system-light .vs-color-role {
    color: rgba(30, 30, 30, 0.6);
}
.case-visual-system-light .vs-color-hex {
    color: rgba(30, 30, 30, 0.45);
}
.case-visual-system-light .vs-type-meta {
    color: rgba(30, 30, 30, 0.5);
}
.case-visual-system-light .vs-type-sample {
    color: #1E1E1E;
}
.case-visual-system-light .vs-type-showcase {
    background: #FFFFFF;
    border: 1px solid rgba(30, 30, 30, 0.08);
}
.case-visual-system-light .vs-type-showcase-label {
    color: rgba(30, 30, 30, 0.5);
}
.case-visual-system-light .vs-type-showcase-aa,
.case-visual-system-light .vs-type-showcase-name {
    color: #1E1E1E;
}
.case-visual-system-light .vs-type-showcase-fallback {
    color: rgba(30, 30, 30, 0.5);
}
.case-visual-system-light .vs-effect {
    color: #1E1E1E;
}
.case-visual-system-light .vs-effect-dark {
    background: #1E1E1E;
    color: #FFFFFF;
}
.case-visual-system-light .vs-component {
    background: #FFFFFF;
    border: 1px solid rgba(30, 30, 30, 0.06);
    box-shadow: 0 4px 20px rgba(30, 30, 30, 0.04);
}
.case-visual-system-light .vs-comp-preview {
    background: #FAF8F4;
    border: 1px solid rgba(30, 30, 30, 0.04);
}
.case-visual-system-light .vs-comp-title {
    color: #1E1E1E;
}
.case-visual-system-light .vs-comp-desc {
    color: rgba(30, 30, 30, 0.6);
}
.case-visual-system-light .vs-effect-check {
    background: #AEB8A0;
    box-shadow: 0 0 40px rgba(174, 184, 160, 0.5);
}

.case-vs-title {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-bg);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.case-vs-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    max-width: 720px;
    margin: 0 auto var(--space-4xl);
    text-align: center;
}

.vs-block {
    margin-bottom: var(--space-5xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.vs-section-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-md);
}

.vs-section-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--color-bg);
    margin-bottom: var(--space-md);
}

.vs-section-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 640px;
    margin-bottom: var(--space-2xl);
}

/* 01 COLOR */
.vs-colors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .vs-colors {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-lg);
    }
}

.vs-color {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vs-swatch {
    aspect-ratio: 1;
    border-radius: 24px;
    margin-bottom: var(--space-md);
}

.vs-color-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-bg);
}

.vs-color-role {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.vs-color-hex {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* 02 TYPOGRAPHY */
.vs-type-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    min-width: 0;
}

.vs-type-grid > * {
    min-width: 0;
}

@media (min-width: 1024px) {
    .vs-type-grid {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-2xl);
        align-items: start;
    }
}

.vs-type-samples {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0; /* allow flex children to shrink below content size */
}

.vs-type-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.vs-type-meta {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.vs-type-sample {
    color: var(--color-bg);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.vs-type-showcase {
    background: var(--color-surface-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.vs-type-showcase-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-lg);
}

.vs-type-showcase-aa {
    font-size: clamp(120px, 18vw, 200px);
    font-weight: 700;
    line-height: 1;
    color: var(--color-bg);
    letter-spacing: -0.04em;
    margin-bottom: var(--space-md);
}

.vs-type-showcase-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-bg);
    margin-bottom: 4px;
}

.vs-type-showcase-fallback {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

/* 00 LOGO SHOWCASE */
.vs-logo-showcase {
    background: #FFFFFF;
    border: 1px solid rgba(30, 30, 30, 0.08);
    border-radius: var(--radius-lg);
    padding: clamp(48px, 6vw, 80px) var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    min-height: 320px;
}

.vs-logo-mark {
    max-width: min(280px, 60%);
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.vs-logo-caption {
    font-size: 13px;
    color: rgba(30, 30, 30, 0.5);
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* 03 SIGNATURE EFFECTS */
.vs-effects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .vs-effects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.vs-effect {
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--color-bg);
    position: relative;
    overflow: hidden;
}

.vs-effect-dark {
    background: var(--color-surface-dark);
    align-items: center;
    justify-content: center;
}

.vs-effect-check {
    width: 80px;
    height: 80px;
    background: #AEB8A0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xl);
    box-shadow: 0 0 40px rgba(45, 255, 154, 0.5);
}

.vs-effect-dark .vs-effect-name,
.vs-effect-dark .vs-effect-desc {
    text-align: center;
}

.vs-effect-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.vs-effect-desc {
    font-size: 14px;
    opacity: 0.8;
}

/* 04 COMPONENTS */
.vs-components-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    min-width: 0;
}

.vs-components-grid > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .vs-components-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

.vs-component {
    background: var(--color-surface-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-height: 320px;
    min-width: 0;
    overflow: hidden;
}

.vs-comp-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.vs-comp-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vs-comp-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-bg);
}

.vs-comp-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* Component: Ticket Card */
.comp-ticket-card {
    background: #0F1115;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    color: var(--color-bg);
}

.comp-verified-badge {
    display: inline-block;
    background: var(--color-purple);
    color: var(--color-bg);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
}

.comp-event-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.comp-event-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-md);
}

.comp-price-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.comp-price {
    font-size: 28px;
    font-weight: 800;
}

.comp-fair-price {
    font-size: 11px;
    font-weight: 700;
    color: #AEB8A0;
    letter-spacing: 0.1em;
}

/* Component: Buttons */
.comp-btn-gradient {
    width: 100%;
    background: linear-gradient(135deg, #7B4DFF 0%, #FF3D5C 100%);
    color: var(--color-bg);
    border: none;
    padding: 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

.comp-btn-ghost {
    width: 100%;
    background: transparent;
    color: var(--color-bg);
    border: 1.5px solid var(--color-bg);
    padding: 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
}

/* Component: Status Badges */
.comp-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.comp-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.comp-badge-verified {
    background: rgba(45, 255, 154, 0.15);
    color: #AEB8A0;
}

.comp-badge-ocr {
    background: rgba(123, 77, 255, 0.2);
    color: #B8A3FF;
}

.comp-badge-action {
    background: rgba(255, 61, 92, 0.15);
    color: var(--color-coral);
}

.comp-badge-fair {
    background: #AEB8A0;
    color: #0F4A2E;
}

/* Component: Price Range Slider */
.comp-slider-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.comp-slider-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.comp-slider-bounds {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.comp-slider-track {
    height: 6px;
    background: linear-gradient(90deg, #7B4DFF 0%, #AEB8A0 100%);
    border-radius: 3px;
    position: relative;
}

.comp-slider-thumb {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: var(--color-bg);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.comp-slider-prices {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-bg);
}

.comp-slider-status {
    font-size: 13px;
    font-weight: 600;
    color: #AEB8A0;
}

/* ============================================================
   COZZY - VISUAL LANGUAGE COMPONENTS (LIGHT THEME)
   Mint #AEB8A0 (from original brochure), Wood #C9A57B,
   Charcoal #1E1E1E, Cream #F5F2EC
   ============================================================ */

/* Cozzy Solution section - QA overrides */
.cozzy-solution {
    background: #F5F2EC;
}

.cozzy-solution .case-principles-title {
    font-size: clamp(36px, 5vw, 64px);
    max-width: 880px;
}

.cozzy-solution .principle-block {
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

@media (min-width: 1024px) {
    .cozzy-solution .principle-block {
        gap: var(--space-4xl);
        margin-bottom: var(--space-4xl);
        align-items: center;
    }
}

.cozzy-solution .principle-image {
    aspect-ratio: 4 / 3;
    background: #FFFFFF;
    padding: 0;
    box-shadow: 0 8px 32px rgba(30, 30, 30, 0.08);
}

.cozzy-solution .principle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none;
}

.cozzy-solution .principle-number {
    color: #AEB8A0;
}

.cozzy-solution .principle-number::before {
    background: #AEB8A0;
}

.cozzy-solution .principle-title {
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-md);
}

.cozzy-solution .principle-text-block {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text);
    max-width: 460px;
}

@media (min-width: 1024px) {
    .cozzy-solution .principle-text-block {
        font-size: 17px;
    }
}

/* Supplier Card */
.comp-cozzy-supplier-card {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 16px;
    color: #1E1E1E;
    width: 100%;
    max-width: 280px;
    border: 2px solid #AEB8A0;
    box-shadow: 0 2px 12px rgba(30, 30, 30, 0.04);
}

.comp-cozzy-supplier-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(30, 30, 30, 0.06);
}

.comp-cozzy-supplier-name {
    font-size: 15px;
    font-weight: 700;
    color: #1E1E1E;
    letter-spacing: 0.02em;
}

.comp-cozzy-supplier-rating {
    font-size: 13px;
    font-weight: 600;
    color: #AEB8A0;
}

.comp-cozzy-supplier-stats {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.comp-cozzy-supplier-stats > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.comp-cozzy-supplier-stats .num {
    font-size: 20px;
    font-weight: 800;
    color: #1E1E1E;
    line-height: 1;
    letter-spacing: -0.01em;
}

.comp-cozzy-supplier-stats .lbl {
    font-size: 10px;
    color: #6E7280;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Buttons - ORDER button mint style from the brochure */
.comp-cozzy-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    background: #AEB8A0;
    color: #1E1E1E;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms ease;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comp-cozzy-btn-primary:hover {
    background: #3CC287;
    transform: translateY(-1px);
}

.comp-cozzy-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: transparent;
    color: #1E1E1E;
    border: 1.5px solid rgba(30, 30, 30, 0.2);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    margin-top: 12px;
    letter-spacing: 0.02em;
}

.comp-cozzy-btn-ghost:hover {
    border-color: #AEB8A0;
    color: #AEB8A0;
}

/* Status Pills */
.comp-cozzy-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.comp-cozzy-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.comp-cozzy-pill-mint {
    background: rgba(174, 184, 160, 0.18);
    color: #AEB8A0;
    border: 1px solid rgba(174, 184, 160, 0.45);
}

.comp-cozzy-pill-wood {
    background: rgba(201, 165, 123, 0.18);
    color: #8C6A3F;
    border: 1px solid rgba(201, 165, 123, 0.45);
}

.comp-cozzy-pill-dark {
    background: rgba(30, 30, 30, 0.06);
    color: #1E1E1E;
    border: 1px solid rgba(30, 30, 30, 0.12);
}

/* Price & Time Display - AI estimate card (light) */
.comp-cozzy-pricetime {
    background: #FFFFFF;
    border: 1px solid rgba(30, 30, 30, 0.08);
    border-radius: 14px;
    padding: 16px;
    width: 100%;
    max-width: 320px;
}

.comp-cozzy-pricetime-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(30, 30, 30, 0.5);
    margin-bottom: 12px;
}

.comp-cozzy-pricetime-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(30, 30, 30, 0.06);
}

.comp-cozzy-pricetime-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.comp-cozzy-pricetime-cell .big {
    font-size: 24px;
    font-weight: 800;
    color: #1E1E1E;
    line-height: 1;
    letter-spacing: -0.01em;
}

.comp-cozzy-pricetime-cell .small {
    font-size: 10px;
    color: rgba(30, 30, 30, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.comp-cozzy-pricetime-status {
    font-size: 11px;
    font-weight: 700;
    color: #AEB8A0;
}

/* ============================================================
   COZZY - CASE STUDY SPECIFIC SECTIONS
   ============================================================ */

/* Problem stats grid */
.problem-stats-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .problem-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .problem-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.problem-stat {
    padding: var(--space-lg);
    background: #FAFAFA;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.problem-stat:hover {
    transform: translateY(-4px);
    border-color: #4DBFA3;
}

.problem-stat-num {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: #4DBFA3;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.problem-stat-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

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

/* Cozzy variant - sage tone */
.problem-stats-grid-mint .problem-stat-num {
    color: #AEB8A0;
}

.problem-stats-grid-mint .problem-stat:hover {
    border-color: #AEB8A0;
}

/* Tech Flow Grid (5 steps) */
.tech-flow-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .tech-flow-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tech-flow-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-md);
    }
}

.tech-step {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    position: relative;
    transition: background 300ms, border-color 300ms, transform 300ms;
}

.tech-step:hover {
    background: rgba(174, 184, 160, 0.08);
    border-color: #AEB8A0;
    transform: translateY(-4px);
}

.tech-step-num {
    font-size: 13px;
    font-weight: 700;
    color: #AEB8A0;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.tech-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
    line-height: 1.3;
}

.tech-step-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
}

/* Market Stats */
.case-market {
    padding: var(--space-3xl) 0;
}

.case-market-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: var(--space-md);
}

.case-market-sub {
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 720px;
    margin-bottom: var(--space-2xl);
}

.market-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .market-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

.market-stat {
    padding: var(--space-lg);
    background: #FAFAFA;
    border-radius: var(--radius-md);
    border-left: 4px solid #AEB8A0;
}

.market-stat-large {
    background: linear-gradient(135deg, rgba(174, 184, 160, 0.12), rgba(174, 184, 160, 0.02));
    border-left-width: 6px;
}

.market-stat-num {
    font-size: 48px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 8px;
}

.market-stat-large .market-stat-num {
    font-size: 64px;
    color: #AEB8A0;
}

.market-stat-label {
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ========================================
   CASE STUDY - shared utilities (FIX 2026)
   These classes were referenced in HTML but
   not defined in CSS, causing white-on-white
   text bugs in cozzy/eagle case studies.
   ======================================== */

/* Dark section wrapper - sets dark bg + light text */
.case-section-dark {
    background: var(--color-bg-dark);
    color: var(--color-bg);
}

/* Eyebrow label - small uppercase tag with fuchsia dot */
.case-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.case-eyebrow .pink-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-fuchsia);
    display: inline-block;
}

/* Light variant for use on dark backgrounds */
.case-eyebrow-light {
    color: rgba(255, 255, 255, 0.7);
}

/* Business Model - now correctly inherits dark bg from case-section-dark */
.case-business {
    padding: var(--space-3xl) 0;
}

/* Business Model section explicit padding when dark wrapper is applied */
.case-business.case-section-dark,
.case-roadmap.case-section-dark {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

@media (min-width: 1024px) {
    .case-business.case-section-dark,
    .case-roadmap.case-section-dark {
        padding-top: var(--space-5xl);
        padding-bottom: var(--space-5xl);
    }
}

.business-model-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .business-model-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.business-model-card {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: border-color 300ms, transform 300ms;
}

.business-model-card-highlight {
    background: linear-gradient(135deg, rgba(174, 184, 160, 0.15), rgba(174, 184, 160, 0.03));
    border-color: #AEB8A0;
}

.business-model-card:hover {
    transform: translateY(-6px);
    border-color: #AEB8A0;
}

.business-model-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.business-model-value {
    font-size: 56px;
    font-weight: 800;
    color: #AEB8A0;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.business-model-card-highlight .business-model-value {
    color: #FFFFFF;
}

.business-model-desc {
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

.business-model-desc strong {
    color: #AEB8A0;
    font-weight: 700;
}

.business-model-card-highlight .business-model-desc strong {
    color: #AEB8A0;
}

/* Team Section */
.case-team {
    padding: var(--space-3xl) 0;
}

.team-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-lg);
    }
}

.team-card {
    padding: var(--space-lg);
    background: #FAFAFA;
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform 300ms, background 300ms;
}

.team-card:hover {
    transform: translateY(-4px);
    background: #FFFFFF;
    box-shadow: var(--shadow-card);
}

.team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.team-avatar-coral { background: var(--color-coral); }
.team-avatar-purple { background: var(--color-purple); }
.team-avatar-teal { background: #AEB8A0; color: #0F4A4A; }
.team-avatar-yellow { background: var(--color-yellow); color: var(--color-text); }

.team-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.team-role {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Advisory Block */
.advisory-block {
    margin-top: var(--space-3xl);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border);
}

.advisory-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-coral);
    margin-bottom: var(--space-md);
}

.advisory-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

@media (min-width: 1024px) {
    .advisory-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.advisory-card {
    padding: var(--space-md);
    border-left: 3px solid #AEB8A0;
    padding-left: var(--space-md);
}

.advisory-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.advisory-role {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Roadmap */
.case-roadmap {
    padding: var(--space-3xl) 0;
}

.roadmap-track {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    position: relative;
}

@media (min-width: 1024px) {
    .roadmap-track {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
    }
}

.roadmap-step {
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    position: relative;
    transition: background 300ms, transform 300ms;
}

.roadmap-step:hover {
    background: rgba(174, 184, 160, 0.08);
    transform: translateY(-4px);
}

.roadmap-year {
    font-size: 13px;
    font-weight: 700;
    color: #AEB8A0;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.roadmap-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.roadmap-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   EAGLE - CASE STUDY SPECIFIC SECTIONS
   ============================================================ */

/* NDA notice card */
.case-nda-notice {
    padding: var(--space-lg) 0 var(--space-xl);
}

.nda-card {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.15), rgba(255, 217, 61, 0.04));
    border: 1px solid rgba(255, 217, 61, 0.5);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
}

@media (min-width: 768px) {
    .nda-card {
        flex-direction: row;
        align-items: center;
        padding: var(--space-2xl);
        gap: var(--space-xl);
    }
}

.nda-card-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    background: var(--color-yellow);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}

.nda-card-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.nda-card-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.nda-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    transition: color 200ms;
}

.nda-card-cta:hover {
    color: var(--color-coral);
}

/* EAGLE - Three surfaces grid */
.eagle-surfaces-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .eagle-surfaces-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.eagle-surface {
    padding: var(--space-lg);
    background: #FAFAFA;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform 300ms var(--ease-out), border-color 300ms;
}

.eagle-surface:hover {
    transform: translateY(-4px);
    border-color: var(--color-yellow);
}

.eagle-surface-icon {
    font-size: 36px;
    margin-bottom: var(--space-md);
}

.eagle-surface-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.2;
}

.eagle-surface-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* EAGLE - Ownership list (numbered) */
.eagle-ownership-list {
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 920px;
}

.eagle-ownership-item {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.eagle-ownership-item:last-child {
    border-bottom: none;
}

.eagle-ownership-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-yellow);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.eagle-ownership-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

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

/* EAGLE - Metrics grid (dark) */
.eagle-metrics-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .eagle-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.eagle-metric {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: background 300ms, border-color 300ms, transform 300ms;
}

.eagle-metric:hover {
    background: rgba(255, 217, 61, 0.08);
    border-color: var(--color-yellow);
    transform: translateY(-4px);
}

.eagle-metric-num {
    font-size: 72px;
    font-weight: 800;
    color: var(--color-yellow);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.eagle-metric-label {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
    line-height: 1.3;
}

.eagle-metric-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   EAGLE - REAL CASE STUDY STYLES
   ============================================================ */

/* EAGLE title - dark navy serif style */
.eagle-title {
    color: #1F2D3D;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.eagle-tagline {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

/* EAGLE hero visual - clean white background since brochure cover is busy */
.eagle-hero-visual {
    background: #1F2D3D !important;
    padding: 0;
    aspect-ratio: 3 / 4;
}

.eagle-hero-visual img {
    object-fit: cover !important;
    object-position: center;
    background: #1F2D3D;
}

/* Dark sections use navy instead of pure black for EAGLE */
.eagle-dark {
    background: #1F2D3D !important;
}

/* Capabilities grid - 6 items */
.eagle-capabilities-grid {
    margin-top: var(--space-2xl);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 640px) {
    .eagle-capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .eagle-capabilities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

.eagle-capability {
    padding: var(--space-xl);
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform 300ms var(--ease-out), border-color 300ms, box-shadow 300ms;
}

.eagle-capability:hover {
    transform: translateY(-4px);
    border-color: var(--color-coral);
    box-shadow: var(--shadow-card-hover);
}

.eagle-capability-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--color-coral-soft);
    color: var(--color-coral);
    margin-bottom: var(--space-md);
    transition: transform 300ms var(--ease-out);
}

.eagle-capability-icon svg {
    width: 26px;
    height: 26px;
}

.eagle-capability:hover .eagle-capability-icon {
    transform: scale(1.06) rotate(-3deg);
}

.eagle-capability-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.eagle-capability-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Showcase frame - dashboard image */
.eagle-showcase-frame {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: 0 24px 60px rgba(31, 45, 61, 0.12);
    overflow: hidden;
}

.eagle-showcase-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

/* Feature list (3 items, with numbers) */
.eagle-feature-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 920px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .eagle-feature-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.eagle-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.eagle-feature-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #1F2D3D;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #FFFFFF;
}

.eagle-feature-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.eagle-feature-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* Terminals showcase (lineup hero image) */
.eagle-terminals-showcase {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow: hidden;
}

.eagle-terminals-showcase img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

/* Terminals grid (entry / payment / exit) */
.eagle-terminals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .eagle-terminals-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .eagle-terminal-card-large {
        grid-column: span 1;
    }
}

.eagle-terminal-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: background 300ms, border-color 300ms, transform 300ms;
}

.eagle-terminal-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 217, 61, 0.5);
    transform: translateY(-4px);
}

.eagle-terminal-image {
    aspect-ratio: 3/4;
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eagle-terminal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.eagle-terminal-name {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.eagle-terminal-spec {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-yellow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.eagle-terminal-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eagle-terminal-features li {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    padding-left: 16px;
    position: relative;
}

.eagle-terminal-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-yellow);
    font-weight: 600;
}

/* Principles list */
.eagle-principles-list {
    margin-top: var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 920px;
}

.eagle-principle-row {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.eagle-principle-row:last-child {
    border-bottom: none;
}

.eagle-principle-num {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: #1F2D3D;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
}

.eagle-principle-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-coral);
    margin-bottom: 8px;
}

.eagle-principle-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.2;
}

.eagle-principle-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* Deployment tags */
.eagle-deployment-grid {
    margin-top: var(--space-2xl);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.eagle-deployment-tag {
    padding: 12px 20px;
    background: #1F2D3D;
    color: #FFFFFF;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    transition: background 300ms, transform 300ms;
}

.eagle-deployment-tag:hover {
    background: var(--color-coral);
    transform: translateY(-2px);
}

/* ============================================================
   TIIKITI HERO - 3 PHONES COMPOSITION
   ============================================================ */

.tiikiti-hero-visual {
    background: linear-gradient(135deg, rgba(123, 77, 255, 0.06) 0%, rgba(123, 77, 255, 0.01) 100%) !important;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: visible !important;
    position: relative;
}

.tiikiti-phones-trio {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tiikiti-phone {
    position: absolute;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tiikiti-phone img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* Center phone - largest, forward, dead center */
.tiikiti-phone-center {
    height: 100%;
    z-index: 3;
    transform: translateY(0);
}

/* Left phone - smaller, behind, tilted slightly */
.tiikiti-phone-left {
    height: 78%;
    z-index: 2;
    transform: translateX(-55%) translateY(8%);
    opacity: 0.95;
}

/* Right phone - smaller, behind, tilted slightly */
.tiikiti-phone-right {
    height: 78%;
    z-index: 2;
    transform: translateX(55%) translateY(8%);
    opacity: 0.95;
}

/* Hover effect - phones fan out */
@media (hover: hover) and (pointer: fine) {
    .tiikiti-hero-visual:hover .tiikiti-phone-center {
        transform: translateY(-8px);
    }
    .tiikiti-hero-visual:hover .tiikiti-phone-left {
        transform: translateX(-60%) translateY(4%) rotate(-3deg);
    }
    .tiikiti-hero-visual:hover .tiikiti-phone-right {
        transform: translateX(60%) translateY(4%) rotate(3deg);
    }
}

/* Mobile - stack vertically with center prominent */
@media (max-width: 767px) {
    .tiikiti-hero-visual {
        aspect-ratio: 3/4;
    }
    .tiikiti-phone-center {
        height: 85%;
    }
    .tiikiti-phone-left {
        height: 70%;
        transform: translateX(-40%) translateY(15%) rotate(-5deg);
    }
    .tiikiti-phone-right {
        height: 70%;
        transform: translateX(40%) translateY(15%) rotate(5deg);
    }
}

/* TIIKITI prototype - two buttons */
.prototype-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: center;
    margin: var(--space-lg) 0;
}

@media (min-width: 640px) {
    .prototype-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

.btn-prototype-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-pill);
    font-size: 16px;
    font-weight: 700;
    transition: background 250ms, color 250ms, transform 250ms;
    text-decoration: none;
}

.btn-prototype-secondary:hover {
    background: var(--color-text);
    color: var(--color-bg);
    transform: translateY(-2px);
}

/* ============================================================
   TIIKITI - VIDEO PLAYER (Flow in Action)
   ============================================================ */

.case-flow-video {
    margin-top: var(--space-2xl);
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    transform: perspective(2000px) rotateX(4deg);
    transform-origin: center bottom;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
    .case-flow-video:hover {
        transform: perspective(2000px) rotateX(0deg) translateY(-8px);
    }
}

.case-flow-video video {
    width: 100%;
    height: auto;
    display: block;
    background: #0F1115;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Mobile - remove tilt for better UX */
@media (max-width: 767px) {
    .case-flow-video {
        transform: none;
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }
    .case-flow-video video {
        aspect-ratio: 9/16;
        max-height: 70vh;
    }
}

/* ============================================================
   LIGHT BOX CASE STUDY - DEDICATED STYLES
   Mint #4DBFA3 (LB primary), Coral #FF6F5C (accent),
   Charcoal #1E1E1E, Warm Cream #FAF8F4
   ============================================================ */

/* Section variants */
.case-section {
    padding: var(--space-3xl) 0;
}

@media (min-width: 1024px) {
    .case-section {
        padding: var(--space-4xl) 0;
    }
}

.case-section-cream {
    background: #FAF8F4;
}

.case-section-dark {
    background: var(--color-bg-dark);
    color: var(--color-bg);
    padding: var(--space-4xl) 0;
}

@media (min-width: 1024px) {
    .case-section-dark {
        padding: var(--space-5xl) 0;
    }
}

.case-eyebrow-light {
    color: rgba(255, 255, 255, 0.65);
}

.case-section-title {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    max-width: 920px;
}

.case-section-lead {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.72);
    margin-bottom: var(--space-2xl);
    max-width: 760px;
}

.case-section-title-light {
    color: #FFFFFF;
}

.case-section-lead-light {
    color: rgba(255, 255, 255, 0.75);
}

.case-source {
    font-size: 12px;
    color: rgba(30, 30, 30, 0.5);
    margin-top: var(--space-md);
    font-style: italic;
}

.case-source-light {
    color: rgba(255, 255, 255, 0.5);
}

/* Stakes block (20% dies block) */
.stakes-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .stakes-block {
        grid-template-columns: auto 1fr;
        gap: var(--space-3xl);
    }
}

.stakes-stat {
    font-size: clamp(96px, 14vw, 180px);
    font-weight: 200;
    line-height: 0.9;
    color: #4DBFA3;
    letter-spacing: -0.04em;
}

.stakes-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--space-md);
    color: #FFFFFF;
    letter-spacing: -0.02em;
}

.stakes-desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-md);
}

/* Hero - solution image */
.lightbox-solution-image {
    margin-top: var(--space-2xl);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.12);
}

.lightbox-solution-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Subtitle for sub-sections */
.lightbox-subtitle {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin-top: var(--space-4xl);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.lightbox-sub-desc {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.7);
    margin-bottom: var(--space-2xl);
    max-width: 720px;
}

/* CAD image */
.lightbox-cad-block {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.08);
}

.lightbox-cad-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product shot - opened box with food */
.lightbox-product-shot {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.08);
}

.lightbox-product-shot img {
    width: 100%;
    height: auto;
    display: block;
}

.lightbox-product-caption {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.62);
    padding: var(--space-lg) var(--space-xl);
    margin: 0;
    border-top: 1px solid rgba(30, 30, 30, 0.06);
    font-style: italic;
}

/* Tech block - for exploded views, x-ray, color variants */
.lightbox-tech-block {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.08);
}

.lightbox-tech-block img {
    width: 100%;
    height: auto;
    display: block;
}

.lightbox-tech-caption {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.62);
    padding: var(--space-lg) var(--space-xl);
    margin: 0;
    border-top: 1px solid rgba(30, 30, 30, 0.06);
    font-style: italic;
}

.lightbox-tech-block-spaced {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

/* Lifestyle block - more prominent, larger margin, transparent feel */
.lightbox-lifestyle-block {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-4xl);
}

/* Dual grid - two product shots side by side */
.lightbox-dual-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (min-width: 768px) {
    .lightbox-dual-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

.lightbox-dual-item {
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.08);
    display: flex;
    flex-direction: column;
}

.lightbox-dual-item img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.lightbox-dual-caption {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.62);
    padding: var(--space-md) var(--space-lg);
    margin: 0;
    border-top: 1px solid rgba(30, 30, 30, 0.06);
    font-style: italic;
    text-align: center;
}

/* Sensors grid */
.lightbox-sensors-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (min-width: 640px) {
    .lightbox-sensors-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .lightbox-sensors-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.lightbox-sensor {
    background: #FFFFFF;
    padding: var(--space-lg);
    border-radius: 16px;
    border: 1px solid rgba(30, 30, 30, 0.06);
    box-shadow: 0 4px 16px rgba(30, 30, 30, 0.03);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.lightbox-sensor:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 30, 30, 0.06);
}

.lightbox-sensor-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4DBFA3 0%, #4DBFA3 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    box-shadow: 
        0 4px 12px rgba(77, 191, 163, 0.32),
        0 0 24px rgba(77, 191, 163, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.lightbox-sensor-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.lightbox-sensor:hover .lightbox-sensor-icon {
    box-shadow: 
        0 6px 18px rgba(77, 191, 163, 0.45),
        0 0 32px rgba(77, 191, 163, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.lightbox-sensor-icon svg {
    position: relative;
    z-index: 1;
    stroke-width: 2.2;
}

.lightbox-sensor-name {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--color-text);
}

.lightbox-sensor-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.65);
}

/* App feature grid */
.lightbox-app-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
    align-items: center;
}

@media (min-width: 1024px) {
    .lightbox-app-feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3xl);
    }
}

.lightbox-app-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.lightbox-app-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.lightbox-app-feature-bullet {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4DBFA3;
    margin-top: 7px;
}

.lightbox-app-feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-text);
}

.lightbox-app-feature-desc {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.65);
}

.lightbox-app-hero-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.1);
}

.lightbox-app-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* App screens block */
.lightbox-screens-block {
    margin-top: var(--space-xl);
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.08);
}

.lightbox-screens-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Market quadrant */
.lightbox-market-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
    align-items: start;
}

@media (min-width: 1024px) {
    .lightbox-market-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-3xl);
    }
}

.lightbox-market-axis h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.lightbox-competitor-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lightbox-competitor-list li {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.7);
    padding-left: 16px;
    position: relative;
}

.lightbox-competitor-list li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: #4DBFA3;
    font-weight: 800;
    font-size: 20px;
    top: -3px;
}

.lightbox-market-note {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.85);
    padding: var(--space-md);
    background: rgba(77, 191, 163, 0.1);
    border-radius: 12px;
    border-left: 3px solid #4DBFA3;
}

/* Quadrant chart */
.lightbox-market-position {
    display: flex;
    justify-content: center;
}

.lightbox-quadrant {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    padding: 40px 40px 50px 60px;
}

.quadrant-axis-y {
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translateX(50%);
    transform-origin: left center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(30, 30, 30, 0.55);
    white-space: nowrap;
}

.quadrant-axis-x {
    position: absolute;
    left: 60px;
    right: 40px;
    bottom: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(30, 30, 30, 0.55);
}

.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    border-left: 2px solid rgba(30, 30, 30, 0.18);
    border-bottom: 2px solid rgba(30, 30, 30, 0.18);
    position: relative;
}

.quadrant-grid::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    right: 0;
    height: 1px;
    background: rgba(30, 30, 30, 0.08);
}

.quadrant-grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 1px;
    background: rgba(30, 30, 30, 0.08);
}

.quadrant-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.competitor {
    font-size: 13px;
    font-weight: 600;
    color: rgba(30, 30, 30, 0.65);
    text-align: center;
    padding: 4px 10px;
    background: rgba(30, 30, 30, 0.04);
    border-radius: 999px;
}

.competitor-lightbox {
    background: #4DBFA3;
    color: #1E1E1E;
    font-weight: 800;
    padding: 8px 18px;
    font-size: 15px;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 16px rgba(77, 191, 163, 0.35);
}

/* Business model grid */
.lightbox-business-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

@media (min-width: 768px) {
    .lightbox-business-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .lightbox-business-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lightbox-business-card {
    background: #FFFFFF;
    padding: var(--space-lg);
    border-radius: 16px;
    border: 1px solid rgba(30, 30, 30, 0.06);
    box-shadow: 0 4px 16px rgba(30, 30, 30, 0.03);
}

.lightbox-business-card-highlight {
    background: #1E1E1E;
    color: #FFFFFF;
    box-shadow: 0 8px 32px rgba(30, 30, 30, 0.2);
}

.lightbox-business-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 6px;
}

.lightbox-business-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4DBFA3;
    margin-bottom: var(--space-md);
}

.lightbox-business-card-highlight .lightbox-business-tag {
    color: #4DBFA3;
}

.lightbox-business-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.7);
}

.lightbox-business-card-highlight .lightbox-business-desc {
    color: rgba(255, 255, 255, 0.75);
}

/* Five Years Later section */
.lightbox-future-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
    min-width: 0;
}

.lightbox-future-grid > * {
    min-width: 0;
}

@media (min-width: 1024px) {
    .lightbox-future-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.lightbox-future-block {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: var(--space-xl);
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.lightbox-future-block-highlight {
    background: linear-gradient(135deg, rgba(77, 191, 163, 0.16) 0%, rgba(77, 191, 163, 0.04) 100%);
    border: 1px solid rgba(77, 191, 163, 0.3);
}

@media (min-width: 1024px) {
    .lightbox-future-block-highlight {
        grid-column: 1 / -1;
    }
}

.lightbox-future-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4DBFA3;
    margin-bottom: var(--space-lg);
}

.lightbox-future-stat {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lightbox-future-stat:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.lightbox-future-num {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 200;
    line-height: 1;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-sm);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.lightbox-future-num-arrow {
    color: #4DBFA3;
    margin: 0 8px;
    font-weight: 300;
}

.lightbox-future-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-sm);
}

.lightbox-future-desc-caveat {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #4DBFA3;
    padding: var(--space-md);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

.lightbox-future-desc-caveat em {
    color: #4DBFA3;
    font-style: normal;
    font-weight: 600;
}

.lightbox-future-source {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    line-height: 1.4;
}

/* LIGHT BOX 2.0 features */
.lightbox-future-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .lightbox-future-features {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .lightbox-future-features {
        grid-template-columns: repeat(3, 1fr);
    }
    /* First two cards span full width on top row, rest in 3-col */
    .lightbox-future-features .lightbox-future-feature:nth-child(1),
    .lightbox-future-features .lightbox-future-feature:nth-child(2) {
        grid-column: span 1;
    }
}

.lightbox-future-feature {
    background: #FFFFFF;
    padding: var(--space-lg);
    border-radius: 16px;
    border: 1px solid rgba(30, 30, 30, 0.06);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: 0 4px 16px rgba(30, 30, 30, 0.03);
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.lightbox-future-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 30, 30, 0.06);
}

.lightbox-future-feature-num {
    font-size: 13px;
    font-weight: 700;
    color: #4DBFA3;
    background: rgba(77, 191, 163, 0.14);
    padding: 6px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    line-height: 1;
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 4px;
}

.lightbox-future-feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.lightbox-future-feature-desc {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(30, 30, 30, 0.7);
}

/* ========================================
   DESIGN PHILOSOPHY CALLOUT
   Forward-looking UX message
   ======================================== */

.lightbox-philosophy {
    margin-top: var(--space-4xl);
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
    background: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%);
    color: #FFFFFF;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
}

.lightbox-philosophy::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle, rgba(77, 191, 163, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.lightbox-philosophy::after {
    content: "";
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle, rgba(77, 191, 163, 0.10) 0%, transparent 60%);
    pointer-events: none;
}

.lightbox-philosophy > * {
    position: relative;
    z-index: 1;
}

.lightbox-philosophy-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #4DBFA3;
    margin: 0 0 var(--space-lg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lightbox-philosophy-sparkle {
    color: #4DBFA3;
    font-size: 14px;
    font-style: normal;
}

.lightbox-philosophy-title {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: var(--space-lg);
    max-width: 600px;
}

.lightbox-philosophy-lead {
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: var(--space-2xl);
    max-width: 720px;
}

/* Comparison grid - retrospective vs forward-looking */
.lightbox-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
    .lightbox-philosophy-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }
}

.lightbox-philosophy-card {
    padding: var(--space-xl);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: transform 200ms ease, border-color 200ms ease;
}

.lightbox-philosophy-card-old {
    opacity: 0.65;
}

.lightbox-philosophy-card-old::before {
    content: "";
    position: absolute;
    top: var(--space-xl);
    left: var(--space-xl);
    right: var(--space-xl);
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-8px);
    display: none;
}

.lightbox-philosophy-card-new {
    background: linear-gradient(135deg, rgba(77, 191, 163, 0.18) 0%, rgba(77, 191, 163, 0.06) 100%);
    border-color: rgba(77, 191, 163, 0.32);
    box-shadow: 0 0 32px rgba(77, 191, 163, 0.12);
}

.lightbox-philosophy-card-new:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 191, 163, 0.5);
}

.lightbox-philosophy-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 var(--space-md);
    color: rgba(255, 255, 255, 0.5);
}

.lightbox-philosophy-card-new .lightbox-philosophy-card-label {
    color: #4DBFA3;
}

.lightbox-philosophy-card-quote {
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    margin: 0 0 var(--space-md);
}

.lightbox-philosophy-card-old .lightbox-philosophy-card-quote {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-decoration-thickness: 1px;
}

.lightbox-philosophy-card-meta {
    font-size: 13px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.lightbox-philosophy-card-new .lightbox-philosophy-card-meta {
    color: rgba(77, 191, 163, 0.85);
    font-style: normal;
    font-weight: 600;
}

/* Three principles */
.lightbox-philosophy-principles {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
    .lightbox-philosophy-principles {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }
}

.lightbox-philosophy-principle {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.lightbox-philosophy-principle-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4DBFA3 0%, #4DBFA3 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(77, 191, 163, 0.32);
}

.lightbox-philosophy-principle-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px;
    line-height: 1.3;
}

.lightbox-philosophy-principle-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
}

/* Closing reflection */
.lightbox-closing {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.lightbox-closing-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4DBFA3;
    margin-bottom: var(--space-md);
}

.lightbox-closing-title {
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--space-xl);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.lightbox-closing-text {
    font-size: 17px;
    line-height: 1.7;
    color: rgba(30, 30, 30, 0.75);
    margin-bottom: var(--space-lg);
}

.lightbox-closing-text strong {
    color: var(--color-text);
}

.lightbox-closing-meta {
    margin-top: var(--space-xl);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(30, 30, 30, 0.45);
}

/* Number pair (e.g., $5.06B → $28.36B) - responsive */
.lightbox-future-num-pair {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    font-size: clamp(32px, 4.5vw, 52px);
}

.lightbox-future-num-pair .lightbox-future-num-arrow {
    font-size: 0.7em;
    opacity: 0.85;
}

/* ============================================================
   LIGHT BOX - NEW CONTENT MOCKUPS (2026 native, not slides)
   ============================================================ */

/* Solution Pillars (replaces lb_solution-03.jpg) */
.lightbox-solution-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
    .lightbox-solution-pillars {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-xl);
    }
}

.lightbox-pillar {
    background: #FFFFFF;
    padding: var(--space-xl);
    border-radius: 20px;
    border: 1px solid rgba(30, 30, 30, 0.06);
    box-shadow: 0 4px 16px rgba(30, 30, 30, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lightbox-pillar-accent {
    background: linear-gradient(135deg, rgba(77, 191, 163, 0.08) 0%, rgba(77, 191, 163, 0.02) 100%);
    border: 1px solid rgba(77, 191, 163, 0.25);
}

.lightbox-pillar-num {
    font-size: 14px;
    font-weight: 700;
    color: #4DBFA3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lightbox-pillar-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.lightbox-pillar-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.7);
}

/* App grid - hero mockup beside features */
.lightbox-app-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    align-items: center;
    min-width: 0;
}

@media (min-width: 1024px) {
    .lightbox-app-grid {
        grid-template-columns: auto 1fr;
        gap: var(--space-3xl);
    }
}

/* Phone frame mockup (large) */
.lightbox-phone-frame {
    width: 280px;
    aspect-ratio: 9 / 19.5;
    background: #1E1E1E;
    border-radius: 38px;
    padding: 12px;
    box-shadow:
        0 20px 60px rgba(30, 30, 30, 0.18),
        0 0 0 2px rgba(255, 255, 255, 0.04) inset;
    position: relative;
    margin: 0 auto;
    flex-shrink: 0;
}

.lightbox-phone-frame-sm {
    width: 230px;
    aspect-ratio: 9 / 19.5;
}

.lightbox-phone-notch {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 22px;
    background: #1E1E1E;
    border-radius: 999px;
    z-index: 2;
}

.lightbox-phone-screen {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Mockup header (time + brand + dots) */
.lightbox-mockup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 8px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(30, 30, 30, 0.55);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* Small phone frame variant - smaller notch + tighter header */
.lightbox-phone-frame-sm .lightbox-phone-notch {
    width: 60px;
    height: 16px;
    top: 18px;
}

.lightbox-phone-frame-sm .lightbox-mockup-header {
    padding: 10px 18px 6px;
    justify-content: center;
    font-size: 9px;
}

.lightbox-phone-frame-sm .lightbox-mockup-brand {
    font-size: 8px;
    /* Push brand text to one side, away from notch */
    margin-right: 65px;
}

.lightbox-mockup-time {
    font-weight: 700;
    color: #1E1E1E;
}

.lightbox-mockup-brand {
    font-weight: 300;
    letter-spacing: 0.12em;
    color: #4DBFA3;
    font-size: 9px;
}

.lightbox-mockup-icons {
    font-size: 8px;
    letter-spacing: 1px;
}

/* Mockup content */
.lightbox-mockup-content {
    flex: 1;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.lightbox-mockup-content-tight {
    gap: 10px;
    padding: 14px 16px;
}

.lightbox-mockup-eyebrow {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4DBFA3;
}

.lightbox-mockup-question {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1;
    color: #1E1E1E;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.lightbox-mockup-cta {
    margin: 0 22px 22px;
    padding: 12px;
    background: #1E1E1E;
    color: #FFFFFF;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

/* Goal list */
.lightbox-goal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lightbox-goal-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(30, 30, 30, 0.04);
    border: 1px solid rgba(30, 30, 30, 0.06);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1E1E1E;
    text-align: left;
    cursor: pointer;
}

.lightbox-goal-selected {
    background: rgba(77, 191, 163, 0.14);
    border-color: #4DBFA3;
    color: #1E1E1E;
    font-weight: 600;
}

.lightbox-goal-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(77, 191, 163, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #4DBFA3;
    font-weight: 700;
    flex-shrink: 0;
}

.lightbox-goal-selected .lightbox-goal-icon {
    background: #4DBFA3;
    color: #FFFFFF;
}

.lightbox-goal-check {
    margin-left: auto;
    color: #4DBFA3;
    font-weight: 800;
}

/* App features list (numbered, replaces bullets) */
.lightbox-app-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.lightbox-app-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
    align-items: start;
}

.lightbox-app-feature-num {
    font-size: 13px;
    font-weight: 700;
    color: #4DBFA3;
    background: rgba(77, 191, 163, 0.14);
    padding: 6px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.lightbox-app-feature-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-text);
}

.lightbox-app-feature-desc {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(30, 30, 30, 0.65);
}

/* Flow mockups (3 small phones side-by-side) */
.lightbox-flow-mockups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    justify-items: center;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .lightbox-flow-mockups {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-sm);
    }
    /* Smaller phones on tablet to fit 3 across */
    .lightbox-flow-mockups .lightbox-phone-frame-sm {
        width: 100%;
        max-width: 200px;
    }
}

@media (min-width: 1024px) {
    .lightbox-flow-mockups {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-lg);
    }
}

/* Calorie display (mockup A) */
.lightbox-calorie-display {
    text-align: center;
    margin-top: 8px;
}

.lightbox-calorie-num {
    font-size: 56px;
    font-weight: 200;
    color: #4DBFA3;
    letter-spacing: -0.04em;
    line-height: 1;
    display: block;
}

.lightbox-calorie-formula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(30, 30, 30, 0.5);
    letter-spacing: 0.04em;
}

.lightbox-formula-op {
    color: rgba(30, 30, 30, 0.35);
    font-weight: 300;
}

.lightbox-calorie-bar {
    margin-top: 12px;
    height: 6px;
    background: rgba(30, 30, 30, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.lightbox-calorie-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4DBFA3 0%, #4DBFA3 100%);
    border-radius: 999px;
}

.lightbox-calorie-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: rgba(30, 30, 30, 0.5);
    margin-top: 6px;
    letter-spacing: 0.03em;
}

/* Meal list (mockup B) */
.lightbox-meal {
    padding: 10px 0;
    border-bottom: 1px solid rgba(30, 30, 30, 0.06);
}

.lightbox-meal:last-child {
    border-bottom: none;
}

.lightbox-meal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lightbox-meal-name {
    font-size: 13px;
    font-weight: 600;
    color: #1E1E1E;
}

.lightbox-meal-cal {
    font-size: 13px;
    font-weight: 300;
    color: #4DBFA3;
}

.lightbox-meal-items {
    font-size: 10px;
    color: rgba(30, 30, 30, 0.5);
    margin-top: 3px;
    line-height: 1.4;
}

.lightbox-meal-empty .lightbox-meal-name {
    color: rgba(30, 30, 30, 0.4);
    font-weight: 400;
}

.lightbox-meal-add {
    color: #4DBFA3;
    font-size: 18px;
    font-weight: 300;
}

/* Category list (mockup C) */
.lightbox-category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lightbox-category {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(30, 30, 30, 0.03);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #1E1E1E;
}

.lightbox-cat-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty header (just space for notch) */
.lightbox-mockup-header-empty {
    padding: 24px 0 4px;
    min-height: 28px;
}

/* ============================================================
   LIGHT BOX LOGO MARK (uses original brochure typography)
   ============================================================ */

/* Accessibility - visually hidden but readable by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* LIGHT BOX hero visual - mint gradient bg (case study brand) */
.lightbox-hero-visual {
    background: linear-gradient(135deg, rgba(77, 191, 163, 0.14) 0%, rgba(77, 191, 163, 0.02) 100%);
}

/* LIGHT BOX - 4 column meta grid (only this page has 4 items) */
@media (min-width: 768px) and (max-width: 1023px) {
    .case-meta-grid.lightbox-meta-grid-4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .case-meta-grid.lightbox-meta-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   DOLLYBOOK - Character Gallery
   ============================================================ */

/* Section spacing */
/* ============================================================
   DOLLYBOOK GALLERY - asymmetric pastel approach
   Each card has a tinted backdrop matching the toy's accent.
   Photos sit on object-fit: contain so proportions are preserved
   (the giraffe is tall, the goat is wide - both should breathe).
   ============================================================ */

/* Per-tint backgrounds - echo the yarn colors on each toy */
:root {
    --db-tint-yellow: #FFF8E6;
    --db-tint-green: #E8F5E0;
    --db-tint-mint: #E4F6F2;
    --db-tint-coral: #FCEAE1;
    --db-tint-purple: #F0E8F5;
    --db-tint-cream: #FAF6EE;
}

.db-tint-yellow .db-gallery-card-stage { background: var(--db-tint-yellow); }
.db-tint-green .db-gallery-card-stage { background: var(--db-tint-green); }
.db-tint-mint .db-gallery-card-stage { background: var(--db-tint-mint); }
.db-tint-coral .db-gallery-card-stage { background: var(--db-tint-coral); }
.db-tint-purple .db-gallery-card-stage { background: var(--db-tint-purple); }
.db-tint-cream .db-gallery-card-stage { background: var(--db-tint-cream); }

.db-gallery-section {
    margin-top: var(--space-4xl);
}

.db-gallery-section-header {
    max-width: 720px;
    margin-bottom: var(--space-2xl);
}

.db-gallery-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #C9302C;
    margin: 0 0 var(--space-md);
}

.db-gallery-section-title {
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

.db-gallery-section-sub {
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.6;
    color: rgba(30, 30, 30, 0.7);
    margin: 0;
}

/* Hero - the all-characters shot */
.db-gallery-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: var(--db-tint-cream);
    box-shadow: 0 20px 60px rgba(30, 30, 30, 0.06);
    margin-bottom: var(--space-2xl);
}

.db-gallery-hero img {
    width: 100%;
    height: auto;
    display: block;
}

.db-gallery-hero-caption {
    padding: var(--space-xl) var(--space-2xl);
    border-top: 1px solid rgba(30, 30, 30, 0.06);
    background: #FFFFFF;
}

.db-gallery-hero-text {
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.55;
    color: rgba(30, 30, 30, 0.78);
    margin: 0;
    max-width: 720px;
}

/* Card base - now uses a stage child for the image */
.db-gallery-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(30, 30, 30, 0.04);
    margin: 0;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 350ms ease;
    display: flex;
    flex-direction: column;
}

.db-gallery-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(30, 30, 30, 0.08);
}

/* The stage - the tinted area that holds the image.
   object-fit: contain means NO cropping. Padding gives
   the toy room to breathe like a museum piece. */
.db-gallery-card-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    min-height: 0;
    overflow: hidden;
    background: var(--db-tint-cream); /* default fallback */
    transition: background 300ms ease;
}

.db-gallery-card-stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* The toy photos have a white studio background.
       multiply blend mode makes the white "disappear"
       so only the wood + yarn show against the pastel tint. */
    mix-blend-mode: multiply;
}

.db-gallery-card:hover .db-gallery-card-stage img {
    transform: scale(1.04);
}

/* Caption - two-line label with name + accent description */
.db-gallery-card figcaption {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(30, 30, 30, 0.06);
    background: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.db-cast-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.db-cast-accent {
    font-size: 12px;
    font-weight: 500;
    color: rgba(30, 30, 30, 0.5);
    letter-spacing: 0.01em;
}

/* Parts grid - 2x2 on desktop, 1 col mobile.
   Wider aspect because parts are laid out horizontally. */
.db-gallery-parts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.db-gallery-parts-grid .db-gallery-card-stage {
    aspect-ratio: 16 / 10;
    padding: 24px 28px;
}

@media (min-width: 768px) {
    .db-gallery-parts-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* Cast grid - giraffe takes the tall column,
   the other animals fill 2 stacks of 2. */
.db-gallery-cast-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.db-gallery-cast-grid .db-gallery-card-stage {
    aspect-ratio: 4 / 3;
}

.db-gallery-cast-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .db-gallery-cast-grid {
        grid-template-columns: 1.15fr 1fr 1fr;
        gap: var(--space-xl);
        align-items: stretch;
    }

    /* The giraffe stands tall - portrait stage that
       respects how vertical the actual piece is. */
    .db-gallery-card-tall {
        height: 100%;
    }

    .db-gallery-card-tall .db-gallery-card-stage {
        aspect-ratio: auto;
        flex: 1;
        min-height: 480px;
        padding: 32px 24px;
    }

    /* The 2 stacks become vertical (1 col, 2 rows each). */
    .db-gallery-cast-stack {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
        gap: var(--space-xl);
    }

    .db-gallery-cast-stack .db-gallery-card {
        height: 100%;
    }

    .db-gallery-cast-stack .db-gallery-card-stage {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
}

/* Human grid - 2 columns side by side */
.db-gallery-human-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.db-gallery-card-vertical .db-gallery-card-stage {
    aspect-ratio: 3 / 4;
    padding: 32px 24px;
}

@media (min-width: 768px) {
    .db-gallery-human-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

/* Anchor scroll offset so jump targets clear the sticky nav */
main section[id], #contact { scroll-margin-top: 96px; }

/* ===== EAGLE flagship (ivory) - text overrides for light background ===== */
.bento-flagship-yellow .bento-flagship-sub { color: var(--color-text); font-weight: 600; }
.bento-flagship-yellow .bento-flagship-question { color: rgba(26, 26, 26, 0.72); }
.bento-flagship-yellow .bento-flagship-title { color: var(--color-text); }

/* ===== Four-project tile row ===== */
.bento-quad { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .bento-quad { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .bento-quad { grid-template-columns: repeat(4, 1fr); }
  .bento-quad .bento-tile { min-height: 440px; padding: var(--space-lg); }
  .bento-quad .bento-tile-title { font-size: clamp(32px, 3vw, 46px); }
  .bento-quad .bento-tile-sub { font-size: 15px; }
}

/* ===== LIGHT BOX tile - warm amber ===== */
.bento-tile-amber { background: #4DBFA3; color: #FFFFFF; }
.bento-tile-amber .tile-tag .pink-dot { background: var(--color-tile-ivory); }

/* ===== EAGLE exhibition gallery (real photos) ===== */
.eagle-exhibit-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 768px) { .eagle-exhibit-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.eagle-exhibit-figure { margin: 0; }
.eagle-exhibit-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.eagle-exhibit-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }

/* ===== EAGLE screens stage (floating UI composition) ===== */
.eagle-stage {
  position: relative;
  margin-top: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #0E1118 0%, #1B2233 100%);
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}
.eagle-stage::before {
  content: "";
  position: absolute;
  width: 65%; height: 75%; top: -12%; left: -8%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.eagle-stage::after {
  content: "";
  position: absolute;
  width: 55%; height: 65%; bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(255, 61, 92, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.eagle-stage .eagle-screen { margin: 0; position: relative; }
.eagle-stage .eagle-screen img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.eagle-screen-hero { transform: rotate(-3deg); transition: transform 450ms var(--ease-out); z-index: 2; }
.eagle-screen-hero img { box-shadow: 0 44px 90px rgba(0, 0, 0, 0.6); }
.eagle-screen-hero:hover { transform: rotate(0deg) scale(1.02); }

.eagle-stack { display: block; }
.eagle-stack .eagle-screen { width: 84%; transition: transform 400ms var(--ease-out); }
.eagle-stack .eagle-screen:nth-child(1) { transform: rotate(2.5deg); margin-left: auto; z-index: 1; }
.eagle-stack .eagle-screen:nth-child(2) { transform: rotate(-2.5deg); margin-top: -16%; z-index: 3; }
.eagle-stack .eagle-screen:nth-child(3) { transform: rotate(3deg); margin-top: -16%; margin-left: auto; z-index: 2; }
.eagle-stack .eagle-screen:hover { transform: rotate(0deg) scale(1.04); z-index: 6; }

@media (min-width: 900px) {
  .eagle-stage { grid-template-columns: 1.4fr 1fr; align-items: center; gap: var(--space-3xl); padding: var(--space-3xl) var(--space-2xl); }
}

/* Mobile: calm it down, no overlap/clipping */
@media (max-width: 767px) {
  .eagle-screen-hero { transform: none; }
  .eagle-stack .eagle-screen { width: 100%; }
  .eagle-stack .eagle-screen:nth-child(1),
  .eagle-stack .eagle-screen:nth-child(2),
  .eagle-stack .eagle-screen:nth-child(3) { transform: none; margin: var(--space-md) 0 0 0; }
}

/* ===== EAGLE operations section - full blue immersive background ===== */
.eagle-dash-blue {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #0B1E3F 0%, #163A6B 55%, #0E2347 100%);
}
.eagle-dash-blue::before {
  content: ""; position: absolute; width: 55%; height: 60%; top: -8%; left: -8%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.eagle-dash-blue::after {
  content: ""; position: absolute; width: 55%; height: 60%; bottom: -12%; right: -10%;
  background: radial-gradient(circle, rgba(255, 61, 92, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.eagle-dash-blue .container { position: relative; z-index: 1; }
/* light text on blue */
.eagle-dash-blue .case-principles-title { color: #FFFFFF; }
.eagle-dash-blue .case-principles-sub { color: rgba(255, 255, 255, 0.78); }
.eagle-dash-blue .case-eyebrow { color: rgba(255, 255, 255, 0.72); }
.eagle-dash-blue .eagle-feature-title { color: #FFFFFF; }
.eagle-dash-blue .eagle-feature-desc { color: rgba(255, 255, 255, 0.62); }
.eagle-dash-blue .eagle-feature-num { background: var(--color-coral); color: #FFFFFF; }
/* stage transparent - screens float directly on the blue section */
.eagle-dash-blue .eagle-stage { background: transparent; padding: var(--space-lg) 0 var(--space-xl); }
.eagle-dash-blue .eagle-stage::before,
.eagle-dash-blue .eagle-stage::after { display: none; }
/* spacing */
.eagle-dash-blue .eagle-feature-list { margin-top: var(--space-3xl); }

/* ===== Industrial & Product Design section - light variant ===== */
.eagle-light-section { background: #FFFFFF !important; color: var(--color-text); }
.eagle-light-section .case-flow-title { color: var(--color-text); }
.eagle-light-section .case-flow-sub { color: var(--color-text-muted); }
.eagle-light-section .eagle-terminal-card { background: #FAFAFA; border: 1px solid var(--color-border); }
.eagle-light-section .eagle-terminal-card:hover { background: #FFFFFF; border-color: var(--color-coral); box-shadow: var(--shadow-card); transform: translateY(-4px); }
.eagle-light-section .eagle-terminal-name { color: var(--color-text); }
.eagle-light-section .eagle-terminal-spec { color: var(--color-coral); }
.eagle-light-section .eagle-terminal-features li { color: var(--color-text-muted); }
.eagle-light-section .eagle-terminal-features li::before { color: var(--color-coral); }
.eagle-light-section .eagle-terminals-showcase { background: #FAFAFA; border: 1px solid var(--color-border); }

/* ===== Terminal cards - image bleeds edge-to-edge, continuous background ===== */
.eagle-light-section .eagle-terminal-card {
  background: #EDEEF1;
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.eagle-light-section .eagle-terminal-image {
  background: transparent;
  border-radius: 0;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
}
.eagle-light-section .eagle-terminal-image img { object-fit: cover; }

/* ===== EAGLE aerial + live data card (hero & flagship) ===== */
.eagle-hero-aerial { position: relative; overflow: hidden; }
.eagle-hero-aerial > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eagle-live-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 16px;
  padding: 15px 17px; box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
@media (min-width: 1024px) { .eagle-live-card { left: 22px; bottom: 22px; right: auto; width: 300px; } }
.eagle-live-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); }
.eagle-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2DD46F; box-shadow: 0 0 0 0 rgba(45,212,111,0.5); animation: eaglePulse 2s infinite; }
.eagle-live-site { margin-left: auto; color: var(--color-text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.eagle-live-occ { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; }
.eagle-live-occ span { font-size: 13px; color: var(--color-text-muted); }
.eagle-live-occ strong { font-size: 30px; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; }
.eagle-live-bar { height: 8px; border-radius: 999px; background: #E9EBEF; margin-top: 8px; overflow: hidden; }
.eagle-live-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-coral); }
.eagle-live-stats { display: flex; gap: 20px; margin-top: 14px; }
.eagle-live-stats div { display: flex; flex-direction: column; }
.eagle-live-stats strong { font-size: 18px; font-weight: 800; color: var(--color-text); line-height: 1.1; }
.eagle-live-stats small { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
@keyframes eaglePulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,111,0.5); } 70% { box-shadow: 0 0 0 8px rgba(45,212,111,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,111,0); } }
@media (prefers-reduced-motion: reduce) { .eagle-live-dot { animation: none; } }

/* ===== EAGLE Visual Language - icons & status chips ===== */
.eagle-icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 560px; margin-top: var(--space-lg); }
@media (min-width: 768px) { .eagle-icon-row { grid-template-columns: repeat(6, 1fr); } }
.eagle-icon { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.eagle-icon-badge { width: 54px; height: 54px; border-radius: 15px; background: rgba(47,182,163,0.14); color: #34C2AE; display: flex; align-items: center; justify-content: center; }
.eagle-icon-badge svg { width: 25px; height: 25px; }
.eagle-icon span { font-size: 11px; color: rgba(255,255,255,0.6); text-align: center; letter-spacing: 0.02em; }
.eagle-status-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-xl); }
.eagle-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); font-size: 13px; color: rgba(255,255,255,0.85); }
.eagle-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }