/* ============================================
   DESIGN SYSTEM & VARIABLES
   ============================================ */
:root {
    --color-primary: #e66018;
    --color-text: #1A1A1A;
    --color-secondary-text: #6B7280;
    --color-secondary-bg: #FFF7ED;
    --color-green: #059669;
    --color-red: #DC2626;
    --color-bg-white: #FFFFFF;
    --color-ink-dark: #17110e;   /* warm near-black for full-bleed dark sections (rebuild) */

    --anim-duration: 4.5s;
    --brand-color-rgb: 230, 96, 24;
    --highlight-color: #C74D11;
    --highlight-color-rgb: 199, 77, 17;

    /* Shadows */
    --shadow-subtle:   0 2px 12px rgba(0,0,0,0.04);
    --shadow-card:     0 2px 8px rgba(0,0,0,0.06);
    --shadow-cta:      0 4px 24px rgba(230,96,24,0.35);
    --shadow-cta-hover: 0 6px 28px rgba(230,96,24,0.35);

    /* Radii */
    --radius-card:  12px;
    --radius-panel: 16px;
    --radius-pill:  60px;

    /* Transitions */
    --transition-lift:      transform 0.3s, box-shadow 0.3s;
    --transition-lift-fast: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
    --transition-lift-slow: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s cubic-bezier(.4,0,.2,1);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--color-text);
    background: var(--color-bg-white);
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3 {
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
p { font-size: clamp(1rem, 1.5vw, 1.2rem); }

@keyframes gradient-pulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.gradient-text {
    background: linear-gradient(90deg, #d93d1a, #e66018, #f5821f, #e66018, #d93d1a);
    background-size: 200% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-pulse 4s ease-in-out infinite;
}

.mobile-br { display: none; }

.section-header {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
}
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--color-secondary-text); font-size: clamp(1rem, 1.8vw, 1.25rem); }

/* ============================================
   NAVIGATION
   ============================================ */
#main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 12px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#main-nav .nav-logo { height: 60px; width: auto; display: block; }
/* Read-progress bar — grows left→right along the navbar's bottom edge as you scroll */
#read-progress {
    position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
    background: #e66018; z-index: 1; pointer-events: none; will-change: width;
}
@media (prefers-reduced-motion: no-preference) {
    #read-progress { transition: width 80ms linear; }
}
.nav-cta {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition-lift);
}
.nav-cta:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-cta);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}
.nav-links a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--color-primary); }
.nav-login {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.nav-login:hover { color: var(--color-primary); }

/* ============================================
   HAMBURGER MENU
   ============================================ */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    gap: 6px;
    z-index: 1100;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.25s ease, width 0.3s ease;
    transform-origin: center;
}
.hamburger.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    opacity: 0;
    width: 0;
}
.hamburger.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile menu backdrop */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.mobile-menu-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

/* Mobile dropdown */
.mobile-menu {
    display: none;
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 24px 24px 32px;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}
.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}
.mobile-menu a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover { color: var(--color-primary); }
.mobile-menu .mobile-menu-cta {
    margin-top: 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition-lift);
    text-align: center;
    width: 100%;
}
.mobile-menu .mobile-menu-cta:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-cta);
}
.mobile-menu .mobile-login-link {
    margin-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* ============================================
   SECTION: HERO
   ============================================ */
#hero {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    position: relative;
    overflow: hidden;
    padding: 100px 40px 60px;
    z-index: 2;
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    max-width: 1200px;
    width: 100%;
}
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#hero-slogan {
    margin-top: 0;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-align: left;
}
.hero-subtext {
    margin-top: 20px;
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--color-secondary-text);
    line-height: 1.6;
    max-width: 480px;
}
.hero-cta-wrap {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.hero-cta-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 14px 36px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: var(--transition-lift-fast);
}
.hero-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(230, 96, 24, 0.38);
}
.hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}
.video-wrapper { overflow: hidden; border-radius: var(--radius-panel); }
.video-wrapper video { width: 85%; height: auto; display: block; margin: 0 auto; }
.hero-img { width: 100%; height: auto; display: block; border-radius: var(--radius-panel); }
.hero-media-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 360px;
    background: linear-gradient(135deg, rgba(230, 96, 24, 0.06) 0%, rgba(230, 96, 24, 0.02) 100%);
    border: 2px dashed rgba(230, 96, 24, 0.25);
    border-radius: var(--radius-panel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary-text);
    font-size: 1rem;
}

/* Hero scroll indicator (chevron down) – orange circle, white arrow */
.hero-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #E66018;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    animation: hero-chevron-bounce 2s ease-in-out infinite;
}
.hero-scroll-indicator:hover {
    background: #c95414;
    color: #fff;
}
.hero-scroll-indicator svg {
    width: 24px;
    height: 24px;
    opacity: 1;
}
@keyframes hero-chevron-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* Logo animation keyframes (from anim.html) */
.arrow-path { stroke: var(--color-primary); stroke-width: 6.25px; }
.arrow-dot { fill: var(--color-primary); }
.arrow-path-highlight {
    stroke: var(--highlight-color);
    stroke-width: 8px;
    fill: none;
    pointer-events: none;
    animation-duration: var(--anim-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    stroke-dasharray: var(--path-len);
}
.arrow-dot-highlight {
    transform-origin: center;
    transform-box: fill-box;
    opacity: 0;
    animation-duration: var(--anim-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
#Outer-arrow-1 { --path-len: 120px; }
#Outer-arrow-2 { --path-len: 170px; }
#Outer-arrow-3 { --path-len: 100px; }
#Inner-arrow-1 { --path-len: 140px; }
#Inner-arrow-2 { --path-len: 140px; }
#Outer-arrow-1 .arrow-path-highlight,
#Outer-arrow-3 .arrow-path-highlight { animation-name: drawOuterShort; }
#Outer-arrow-1 .arrow-dot-highlight,
#Outer-arrow-3 .arrow-dot-highlight { animation-name: pulseOuterShort; }
#Outer-arrow-2 .arrow-path-highlight { animation-name: drawOuterLong; }
#Outer-arrow-2 .arrow-dot-highlight { animation-name: pulseOuterLong; }
#Inner-arrow-1 .arrow-path-highlight,
#Inner-arrow-2 .arrow-path-highlight { animation-name: drawInner; stroke-dasharray: var(--path-len) var(--path-len); }
#Inner-arrow-1 .arrow-dot-highlight,
#Inner-arrow-2 .arrow-dot-highlight { animation-name: pulseInner; }

@keyframes drawOuterShort {
    0% { stroke-dashoffset: var(--path-len); opacity: 0; }
    1% { opacity: 1; }
    33% { stroke-dashoffset: 0; opacity: 1; }
    45% { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pulseOuterShort {
    0%, 8% { transform: scale(1); opacity: 0; filter: drop-shadow(0 0 0 transparent); fill: var(--highlight-color); }
    36% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--highlight-color-rgb), 0.9)); }
    46% { transform: scale(1); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes drawOuterLong {
    0% { stroke-dashoffset: var(--path-len); opacity: 0; }
    1% { opacity: 1; }
    20% { stroke-dashoffset: 0; opacity: 1; }
    45% { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pulseOuterLong {
    0%, 15% { transform: scale(1); opacity: 0; filter: drop-shadow(0 0 0 transparent); fill: var(--highlight-color); }
    25% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--highlight-color-rgb), 0.9)); }
    45% { transform: scale(1); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes drawInner {
    0%, 30% { stroke-dashoffset: var(--path-len); opacity: 0; }
    31% { opacity: 1; }
    75% { stroke-dashoffset: calc(var(--path-len) * 2); opacity: 1; }
    85% { stroke-dashoffset: calc(var(--path-len) * 2); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes pulseInner {
    0%, 70% { transform: scale(1); opacity: 0; filter: drop-shadow(0 0 0 transparent); fill: var(--highlight-color); }
    75% { transform: scale(1.5); opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--highlight-color-rgb), 0.9)); }
    89% { transform: scale(1); opacity: 0; }
    100% { opacity: 0; }
}

/* ============================================
   SECTION: NERVOUS SYSTEM DIAGRAM
   ============================================ */
#spiderweb {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-white);
    padding: 120px 40px 80px;
    box-sizing: border-box;
}
.spiderweb-inner {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}
.ns-header {
    text-align: center;
    max-width: 1000px;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-text);
}
.ns-diagram {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 200px;
}
.ns-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ns-right {
    gap: 32px;
}
.ns-left {
    align-items: center;
}
.ns-right {
    align-items: center;
}
.ns-node {
    background: var(--color-bg-white);
    border: 1.5px solid #E2E8F0;
    border-radius: 20px;
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    text-align: center;
    box-shadow: var(--shadow-subtle);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.ns-output {
    display: flex;
    align-items: center;
    justify-content: center;
}
#ns-r1 { background: #FEE2E2; color: #DB2526; }
#ns-r2 { background: #FEFAC3; color: #CA8A04; }
#ns-r3 { background: #D2FAE5; color: #029669; }
.ns-center-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ns-logo-carousel-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}
.ns-logo-carousel-wrap::before,
.ns-logo-carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    z-index: 1;
    pointer-events: none;
}
.ns-logo-carousel-wrap::before { left: 0; background: linear-gradient(to right, #fff 60%, transparent); }
.ns-logo-carousel-wrap::after  { right: 0; background: linear-gradient(to left,  #fff 60%, transparent); }
.ns-logo-carousel {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}
.ns-logo-tile {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 14px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    white-space: nowrap;
    letter-spacing: 0.01em;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.ns-logo-tile i { font-size: 14px; }
@keyframes ns-logo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes ns-node-float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -4px); } }
@keyframes ns-node-float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, 3px); } }
@keyframes ns-node-float-c { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, 5px); } }
@keyframes ns-node-float-d { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -5px); } }
@keyframes ns-node-float-e { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -2px); } }
#ns-l1 { animation: ns-node-float-a 3.4s ease-in-out infinite; }
#ns-l2 { animation: ns-node-float-b 4.0s ease-in-out infinite; }
#ns-l3 { animation: ns-node-float-c 3.8s ease-in-out infinite; }
#ns-l4 { animation: ns-node-float-d 4.3s ease-in-out infinite; }
#ns-l5 { animation: ns-node-float-e 3.6s ease-in-out infinite; }
#ns-r1 { animation: ns-node-float-b 4.6s ease-in-out infinite 0.5s; }
#ns-r2 { animation: ns-node-float-d 3.5s ease-in-out infinite 1.1s; }
#ns-r3 { animation: ns-node-float-a 4.1s ease-in-out infinite 0.8s; }
#ns-emblem {
    width: 200px;
    height: 200px;
    background-image: url('img/how-it-works/motor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 8px 30px rgba(230,96,24,0.35));
    animation: ns-emblem-float 4s ease-in-out infinite;
    position: relative;
    z-index: 2;
    --color-primary: #ffffff;
    --highlight-color: #FAE9D5;
    --highlight-color-rgb: 255, 247, 237;
}
#ns-emblem svg {
    width: 56%;
    height: auto;
    max-width: none;
    display: block;
    margin-bottom: 4px;
}
@keyframes ns-emblem-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
#ns-lines-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}
.ns-node {
    position: relative;
    z-index: 1;
}

/* ============================================
   SECTIONS: CHAT UI  (Microsoft Teams style)
   ============================================ */
.chat-section {
    width: 100%;
    padding: 120px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#feature-chat-1 {
    background: var(--color-secondary-bg);
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}
#feature-chat-2 { background: var(--color-bg-white); }
#feature-chat-2 .section-header { max-width: 1040px; }

.section-subheader {
    margin-top: 12px;
    color: var(--color-secondary-text);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.5;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Floating speech bubbles — one per row, avatar + name inside bubble (platform-agnostic) */
.floating-bubbles-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
}
.float-bubble {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 18px;
    border-radius: var(--radius-panel);
    max-width: 85%;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
.float-bubble:not(.float-bubble-cat) {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: var(--shadow-card);
    align-self: flex-start;
}
.float-bubble-cat {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 12px rgba(230, 96, 24, 0.35);
    align-self: flex-end;
}
.float-bubble-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #e5e7eb;
}
.float-bubble-avatar img {
    width: 150%;
    height: 150%;
    object-fit: cover;
}
.float-bubble-avatar.avatar-bot {
    background: none; /* rgba(255,255,255,0.25); rgba(230,96,24,1); */
    display: flex;
    align-items: center;
    justify-content: center;
}
.float-bubble-avatar.avatar-bot img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.float-bubble-body { flex: 1; min-width: 0; }
.float-bubble-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
}
.float-bubble-cat .float-bubble-name { color: #fff; }
.float-bubble-time {
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--color-secondary-text);
    margin-left: 6px;
}
.float-bubble-cat .float-bubble-time { color: rgba(255,255,255,0.85); }
.float-bubble-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}
.float-bubble-text + .float-bubble-text { margin-top: 8px; }
.float-bubble-cat .float-bubble-text { color: rgba(255,255,255,0.95); }

/* Chat 1: AI "behind the scenes" process block (between Dennis and Cat) */
.chat-ai-process-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
.chat-ai-process {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: var(--radius-card);
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    font-size: 0.85rem;
    color: var(--color-secondary-text);
}
.chat-ai-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 22px;
}
.chat-ai-step .chat-ai-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-ai-step .chat-ai-icon .fa-spinner {
    font-size: 0.95rem;
    color: var(--color-primary);
}
.chat-ai-step .chat-ai-check {
    display: none;
    width: 18px;
    height: 18px;
    color: #0E8C72;
}
.float-bubble-text,
.float-bubble-name {
    text-align: left;
}
.chat-ai-step.done .chat-ai-icon .fa-spinner { display: none; }
.chat-ai-step.done .chat-ai-check { display: block; }
.chat-ai-step.chat-ai-step-next { display: none; }
.chat-ai-step.chat-ai-step-next.visible { display: flex; }

/* Channel wrapper (Slack/Teams-style) for feature-chat-1 */
.channel-window {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-card);
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.06);
    overflow: hidden;
}
.channel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
    font-size: 0.9rem;
}
.channel-hash {
    color: #64748B;
    font-weight: 600;
    font-size: 1rem;
}
.channel-name {
    font-weight: 600;
    color: var(--color-text);
}
.channel-header-meta {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-secondary-text);
    font-weight: 400;
}
.channel-bubbles-viewport {
    overflow: hidden;
    background: #fff;
    will-change: height;
    min-height: 0;
    position: relative;
}
#chat1-bubbles-viewport {
    height: 0;
    min-height: 0;
}
/* Keep chat1 wrap out of flow so it cannot force viewport height */
#chat1-bubbles-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.channel-window .floating-bubbles-wrap {
    padding: 16px;
    background: #fff;
}

/* Workflow chat 2: two DM channel windows stacked */
.workflow-chat-wrap {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.channel-dm-icon {
    display: flex;
    align-items: center;
    color: #64748B;
}
/* Cat's bubble aligned left when Cat is the initiator in a DM */
.float-bubble-cat-left {
    align-self: flex-start;
}
.chat-thread-separator {
    padding: 20px 0;

    /*
    margin: 28px 0 20px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    border-bottom: 1px dashed rgba(0,0,0,0.15);
    */
    text-align: center;
}
.chat-thread-separator-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary-text);
    letter-spacing: 0.02em;
}

/* Response sent confirmation — matches ai-process box style */
.chat-result-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 22px;
    font-size: 0.85rem;
    color: var(--color-secondary-text);
}
.chat-result-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #0E8C72;
    opacity: 0;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
}
#chat2-separator-back.animate-check .chat-result-check {
    opacity: 1;
    animation: chat-result-check-draw 0.35s ease forwards;
}
#chat2-separator-back.animate-check #chat2-result-2 .chat-result-check {
    animation-delay: 0.3s;
}
@keyframes chat-result-check-draw {
    to { stroke-dashoffset: 0; }
}

.dpo-thread-wrap {
    background: rgba(14, 140, 114, 0.06);
    border: 1px solid rgba(14, 140, 114, 0.2);
    border-radius: var(--radius-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dpo-thread-wrap .float-bubble { max-width: 100%; }
.float-bubble.float-bubble-dpo {
    background: #fff;
    border: 1px solid rgba(14, 140, 114, 0.25);
    box-shadow: var(--shadow-card);
    align-self: flex-end;
}
.float-bubble .chat-mention { color: var(--color-primary); font-weight: 600; }

.chat-window {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border: 1px solid #EDEBE9;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    position: relative;
}
.chat-window::before {
    content: '';
    display: block;
    height: 3px;
    background: #6264A7;
    flex-shrink: 0;
}
#feature-chat-2 .chat-window {
    background: #fff;
    border-color: #EDEBE9;
}

.chat-window-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #EDEBE9;
    background: #FAFAFA;
}
.chat-window-topbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6264A7;
}
.chat-window-topbar-icon svg {
    width: 18px;
    height: 18px;
}
.chat-window-topbar-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #242424;
}
.chat-window-topbar-members {
    font-size: 0.72rem;
    color: #8A8886;
    margin-left: auto;
}

.chat-messages {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.chat-bubble {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 100%;
    padding: 8px 20px;
    opacity: 0;
    transition: background 0.12s ease;
}
.chat-bubble:hover {
    background: none;
}
.chat-bubble.right {
    flex-direction: row;
    align-self: flex-start;
}
.chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    margin-top: 2px;
}
.chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-person1 { background: #6264A7; }
.avatar-person2 { background: #8B8CC7; }
.avatar-bot { background: var(--color-primary); }
.avatar-user { background: #4F6BED; }
.avatar-dpo { background: #0E8C72; }

.chat-body { flex: 1; }
.chat-name {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: #242424;
}
.chat-name .chat-time {
    font-weight: 400;
    font-size: 0.7rem;
    color: #8A8886;
    margin-left: 8px;
}
.chat-bubble.right .chat-name { text-align: left; }
.chat-msg {
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    background: transparent;
    color: #424242;
}
.chat-bubble.right .chat-msg {
    background: transparent;
    border-bottom-right-radius: 0;
}
.chat-bubble.left .chat-msg {
    border-bottom-left-radius: 0;
}
.chat-bubble.bot .chat-msg {
    background: transparent;
    border: none;
}
.chat-bubble.dpo .chat-msg {
    background: transparent;
    border: none;
}
.chat-mention {
    color: #e8590c;
    font-weight: 600;
}

.chat-compose {
    padding: 12px 16px;
    border-top: 1px solid #EDEBE9;
    background: #fff;
}
.chat-compose-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #C8C6C4;
    border-radius: 6px;
    padding: 8px 12px;
    background: #fff;
}
.chat-compose-placeholder {
    flex: 1;
    font-size: 0.82rem;
    color: #A19F9D;
    font-family: inherit;
}
.chat-compose-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.chat-compose-icons svg {
    width: 16px;
    height: 16px;
    color: #605E5C;
    opacity: 0.7;
}
.chat-compose-send {
    width: 18px;
    height: 18px;
    color: #6264A7;
    margin-left: 4px;
}

/* ============================================
   SECTION: VALUE PROPOSITION
   ============================================ */
#value-prop {
    width: 100%;
    padding: 140px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    background: var(--color-bg-white);
}
.value-block {
    max-width: 960px;
    text-align: center;
    opacity: 0;
}
.value-block h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    line-height: 1.25;
}

/* ============================================
   SECTION: FEATURES STACK
   ============================================ */
#features-stack {
    width: 100%;
    position: relative;
}
.fs-sticky {
    background: var(--color-bg-white);
    padding: 60px 24px 80px;
}
.fs-layout {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.fs-heading {
    text-align: center;
}
.fs-row {
    display: flex;
    align-items: center;
    gap: 60px;
}
.fs-left {
    flex: 0 0 38%;
}
.fs-bullet-list {
    display: flex;
    flex-direction: column;
}
.fs-bullet {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 28px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    opacity: 0.3;
    transition: opacity 0.5s ease;
    cursor: pointer;
}
.fs-bullet:last-child {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.fs-bullet.active {
    opacity: 1;
}
.fs-bullet-bar {
    width: 3px;
    border-radius: 2px;
    background: rgba(0,0,0,0.12);
    flex-shrink: 0;
    transition: background 0.5s ease;
    min-height: 56px;
}
.fs-bullet.active .fs-bullet-bar {
    background: var(--color-primary);
}
.fs-bullet-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fs-bullet-content h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    color: var(--color-secondary-text);
    transition: color 0.5s ease;
}
.fs-bullet.active .fs-bullet-content h3 {
    color: var(--color-text);
}
.fs-bullet-content p {
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    color: var(--color-secondary-text);
    line-height: 1.5;
}
.fs-right {
    flex: 1;
    min-width: 0;
}
.fs-image-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 60px rgba(0,0,0,0.12);
}
.fs-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.fs-img.active {
    opacity: 1;
}
/* Scroll space that lets ScrollTrigger drive the switcher */
.fs-spacer {
    height: 100vh;
}
.fs-carousel-dots {
    display: none;
}
.fs-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    transition: background 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.fs-carousel-dot.active {
    background: var(--color-primary);
    transform: scale(1.3);
}
.fs-tap-hint {
    display: none;
}

/* Lightbox */
.fs-lightbox-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.fs-lightbox-overlay.active { opacity: 1; visibility: visible; }
.fs-lightbox-img {
    max-width: 100%; max-height: 90vh;
    object-fit: contain; border-radius: 8px;
    touch-action: pinch-zoom;
    user-select: none;
}
.fs-lightbox-close {
    position: absolute; top: 16px; right: 20px;
    font-size: 36px; color: white; background: none;
    border: none; cursor: pointer; line-height: 1;
    opacity: 0.8; padding: 8px;
}
.fs-lightbox-close:hover { opacity: 1; }

/* ============================================
   SECTION: SOCIAL PROOF
   ============================================ */
#social-proof {
    width: 100%;
    padding: 120px 24px;
    background: var(--color-bg-white);
}
.proof-grid {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.proof-card {
    background: var(--color-bg-white);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    transition: var(--transition-lift-slow);
    display: flex;
    flex-direction: column;
}
.proof-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.proof-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
    margin-bottom: 24px;
}
.proof-quote {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 20px;
    font-style: italic;
    flex: 1;
}
.proof-author {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-secondary-text);
}

/* Social proof — scroll animations */
/* Social proof — scroll animations */
@media (prefers-reduced-motion: no-preference) {
    .proof-card {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s cubic-bezier(.4,0,.2,1);
    }
    .proof-card:nth-child(2).proof-visible { transition-delay: 0.13s; }
    .proof-card:nth-child(3).proof-visible { transition-delay: 0.26s; }
    .proof-card.proof-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .proof-card:hover { transition-delay: 0s; }
}

/* ============================================
   SECTION: CTA
   ============================================ */
#cta {
    width: 100%;
    padding: 140px 24px;
    background: var(--color-text);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
#cta h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    max-width: 600px;
}
.cta-button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 20px 52px;
    border-radius: var(--radius-pill);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    animation: ctaFloat 3s ease-in-out infinite;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1);
}
.cta-button:hover {
    animation-play-state: paused;
    transform: scale(1.06) translateY(0);
    box-shadow: 0 0 50px rgba(230,96,24,0.45);
}
@keyframes ctaFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 24px rgba(230,96,24,0.35), 0 0 60px rgba(230,96,24,0.12);
    }
    50% {
        transform: translateY(-14px);
        box-shadow: 0 0 40px rgba(230,96,24,0.55), 0 0 90px rgba(230,96,24,0.2);
    }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    width: 100%;
    margin-top: auto;
    padding: 32px 40px;
    background: var(--color-text);
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
}

footer a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s ease; }
footer a:hover { color: rgba(255,255,255,0.8); text-decoration: none; }
.br-desktop { display: inline; }
@media (max-width: 768px) { .br-desktop { display: none; } }
.br-mobile { display: none; }
@media (max-width: 768px) { .br-mobile { display: inline; } }

.footer-heart {
    color: #e74c3c;
    animation: heartGlow 2s ease-in-out infinite;
}
@keyframes heartGlow {
    0%, 100% { color: #e74c3c; text-shadow: 0 0 5px rgb(231 76 60 / .3); }
    50%       { color: #c0392b; text-shadow: 0 0 10px rgb(192 57 43 / .6); }
}

/* ============================================
   MODAL: WAITLIST
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-card {
    background: var(--color-bg-white);
    border-radius: 24px;
    padding: 48px 40px 40px;
    width: 90vw;
    max-width: 460px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.modal-close:hover {
    background: #E2E8F0;
    transform: scale(1.1);
}
.modal-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-text);
    stroke-width: 2;
}
.modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.25;
}
.modal-subtitle {
    font-size: 0.95rem;
    color: var(--color-secondary-text);
    margin-bottom: 32px;
}
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary-text);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 12px 16px;
    border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-card);
    background: #FAFBFC;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(230, 96, 24, 0.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #B0B8C4; }

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.form-error {
    font-size: 0.78rem;
    color: var(--color-red);
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.form-error svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: var(--color-red);
    stroke-width: 2;
    fill: none;
}
.form-group.has-error .form-error { display: flex; }

.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}
.form-group-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    background: #FAFBFC;
    cursor: pointer;
    margin-top: 2px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-group-checkbox input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.form-group-checkbox input[type="checkbox"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(230, 96, 24, 0.12);
}
.form-group-checkbox label {
    font-size: 0.82rem;
    color: var(--color-secondary-text);
    line-height: 1.45;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.form-consent-note {
    font-size: 0.82rem;
    color: var(--color-secondary-text);
    line-height: 1.45;
    font-weight: 500;
    margin: 0;
}
.form-group-checkbox.has-error input[type="checkbox"] {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.form-group-checkbox .form-error {
    font-size: 0.78rem;
    color: var(--color-red);
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}
.form-group-checkbox .form-error svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: var(--color-red);
    stroke-width: 2;
    fill: none;
}
.form-group-checkbox.has-error .form-error { display: flex; }

@keyframes spin { to { transform: rotate(360deg); } }
.modal-submit {
    margin-top: 8px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: var(--transition-lift-fast);
}
.modal-submit:hover:not(:disabled) {
    transform: scale(1.03);
    box-shadow: var(--shadow-cta-hover);
}
.modal-submit:active:not(:disabled) { transform: scale(0.98); }
.modal-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}
.modal-submit .btn-text,
.modal-submit .btn-loading { transition: opacity 0.2s; }
.modal-submit .btn-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.modal-submit .btn-loading .spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
.modal-submit.loading .btn-text { display: none; }
.modal-submit.loading .btn-loading { display: flex; }
.modal-success {
    display: none;
    text-align: center;
    padding: 20px 0 8px;
}
.modal-success.visible { display: block; }
.modal-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: #ECFDF5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-success-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--color-green);
    stroke-width: 2.5;
    fill: none;
}
.modal-success h3 {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
.modal-success p {
    color: var(--color-secondary-text);
    font-size: 0.95rem;
}

/* ============================================
   DUAL CHAT LAYOUT (Workflows section — Teams style)
   ============================================ */
.dual-chat-wrap {
    display: flex;
    gap: 24px;
    max-width: 1100px;
    width: 100%;
    align-items: stretch;
}
.dual-chat-wrap .chat-window {
    flex: 1;
    min-width: 0;
}
#chat2-window2 {
    opacity: 0;
}
.chat-window-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #EDEBE9;
    background: #FAFAFA;
}
.chat-window-header .chat-window-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.chat-window-dot.orange { background: var(--color-primary); }
.chat-window-dot.green { background: #0E8C72; }
.chat-window-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #242424;
    letter-spacing: 0;
}

/* ============================================
   TYPING ANIMATION CURSOR
   ============================================ */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: var(--color-primary);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: blink-cursor 0.6s step-end infinite;
}
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #main-nav { padding: 10px 20px; }
    .nav-right { display: none; }
    .hamburger { display: flex; }
    .mobile-menu { display: flex; }
    .mobile-menu-backdrop { display: block; }
    .mobile-br { display: block; }
    h2 { font-size: clamp(1.5rem, 5vw, 1.8rem); }

    .ns-header { font-size: clamp(1.5rem, 5vw, 1.8rem); line-height: 1.25; }
    .chat-section { padding: 80px 16px; }
    .channel-window { border-radius: 10px; }
    .channel-window .floating-bubbles-wrap { padding: 12px; }
    .chat-window { border-radius: 8px; }
    .chat-bubble { padding: 6px 14px; }
    .floating-bubbles-wrap { padding: 0 12px; gap: 10px; }
    .float-bubble { padding: 12px 14px; max-width: 92%; }
    .chat-thread-separator { margin: 20px 0 16px; }
    .chat-thread-separator-label { font-size: 0.75rem; }
    .chat-response-sent { padding: 12px 14px; margin: 10px 0; }
    .chat-response-sent-label { font-size: 0.85rem; }
    .dpo-thread-wrap { padding: 12px; }
    .float-bubble-avatar { width: 32px; height: 32px; }
    .float-bubble-avatar.avatar-bot img { width: 36px; height: 36px; }
    .float-bubble-text { font-size: 0.875rem; }
    .fs-sticky { position: static; padding: 40px 20px; }
    .fs-spacer { display: none; }
    .fs-layout { gap: 28px; min-height: unset; }
    .fs-row { flex-direction: column; gap: 28px; }
    .fs-left { flex: none; width: 100%; }
    .fs-right { width: 100%; order: -1; }
    .fs-bullet { display: none; opacity: 1; }
    .fs-bullet.active { display: flex; }
    .fs-bullet-content h3 { color: var(--color-text); }
    .fs-image-stack {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: relative;
        height: auto;
        aspect-ratio: unset;
    }
    .fs-tap-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 10px;
        right: 12px;
        background: rgba(0,0,0,0.45);
        color: white;
        border-radius: 6px;
        width: 30px;
        height: 30px;
        font-size: 13px;
        pointer-events: none;
        z-index: 1;
    }
    .fs-image-stack::-webkit-scrollbar { display: none; }
    .fs-img {
        flex: 0 0 100%;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        scroll-snap-align: start;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    .fs-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 14px;
    }
    .proof-grid { grid-template-columns: 1fr; max-width: 480px; }
    #value-prop { padding: 100px 20px; gap: 60px; }
    #cta { padding: 100px 20px; }
    .cta-button { padding: 16px 40px; font-size: 1rem; }
    .hide-mobile { display: none; }
    .hero-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .hero-content { align-items: center; order: 2; margin-top: -12px; }
    .hero-media { order: 1; }
    #hero-slogan { text-align: center; }
    .hero-subtext { text-align: center; max-width: none; }
    .hero-cta-wrap { align-items: center; }
    .hero-media-placeholder { max-height: 240px; }
    .hero-scroll-indicator { display: none; }
    .dual-chat-wrap { flex-direction: column; gap: 20px; }
    .ns-diagram { display: flex; flex-direction: column; align-items: center; gap: 52px; }
    .ns-col.ns-left {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        max-width: 360px;
        background: var(--color-bg-white);
        border: 1.5px solid #E2E8F0;
        border-radius: 20px;
        padding: 14px 18px;
        box-shadow: var(--shadow-subtle);
        gap: 0;
        position: relative;
        z-index: 2;
    }
    .ns-col.ns-left .ns-node {
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 5px 0 5px 18px;
        font-size: 13px;
        white-space: nowrap;
        position: relative;
    }
    .ns-col.ns-left .ns-node::before { content: '•'; position: absolute; left: 0; top: 3px; color: var(--color-primary); font-size: 16px; line-height: 1.4; }
    .ns-col.ns-left .ns-node::after { content: ''; }
    #ns-l1, #ns-l2, #ns-l3, #ns-l4, #ns-l5 { animation: none; transform: none; }
    #ns-emblem { width: 160px; height: 160px; background-image: none; }
    #ns-emblem::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('img/how-it-works/motor.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(90deg);
        z-index: -1;
    }
    .ns-col.ns-right {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: space-between;
        width: 100%;
        max-width: 340px;
        gap: 12px;
    }
    .ns-col.ns-right .ns-node { font-size: 13px; padding: 12px 16px; justify-content: center; }
    #ns-r3 { grid-column: 1 / -1; justify-self: center; }
    .modal-card { padding: 40px 24px 32px; }
}

.break-xs { display: none; }
@media (max-width: 480px) { .break-xs { display: block; } }

/* ============================================
   ABOUT PAGE
   ============================================ */
#about-hero {
    padding: 160px 40px 80px;
    max-width: 860px;
    margin: 0 auto;
}
#about-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 48px;
}
.about-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.about-body p {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    color: #374151;
    line-height: 1.75;
}
.about-team {
    padding: 80px 40px 120px;
    max-width: 960px;
    margin: 0 auto;
    border-top: 1px solid #E5E7EB;
}
.about-team h3 {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9CA3AF;
    text-align: center;
    margin-bottom: 32px;
}
.linkedin-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 24px 20px;
    border: 1px solid #E5E7EB;
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.linkedin-card:hover {
    border-color: #e66018;
    box-shadow: 0 4px 20px rgba(230, 96, 24, 0.1);
    transform: translateY(-2px);
}
.linkedin-card:hover .li-icon { opacity: 1; }
.li-icon { opacity: 0.35; transition: opacity 0.15s; margin-top: 16px; }
.card-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 6px; }
.card-name { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; line-height: 1.3; }
.card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}
.card-avatar-company {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 16px;
    overflow: hidden;
    flex-shrink: 0;
}
.card-avatar-company img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 680px) {
    .card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
    .card-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   NEW SECTIONS — Risk Service Desk copy overhaul (April 2026)
   ============================================================ */

/* ---- Shared: section label chip ---- */
.section-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-secondary-bg);
    background: var(--color-secondary-text);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    margin-bottom: 20px;
}

/* ---- Shared: section description ---- */
.section-desc {
    color: var(--color-secondary-text);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    max-width: 680px;
    margin: 16px auto 0;
}

/* ---- Hero: CTA note ---- */
.hero-cta-note {
    font-size: 0.88rem;
    color: var(--color-secondary-text);
    margin-top: 4px;
    line-height: 1.5;
}

/* ============================================================
   SECTION 2 — PROBLEM
   ============================================================ */
#problem {
    padding: 120px 40px;
    background: var(--color-secondary-bg);
    text-align: center;
}
.problem-inner {
    max-width: 1100px;
    margin: 0 auto;
}
#problem .section-header {
    margin-bottom: 60px;
}
.problem-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
    text-align: left;
}
.problem-card {
    background: var(--color-bg-white);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--radius-panel);
    padding: 36px 28px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-lift-slow);
}
.problem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
}
.problem-card-icon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.problem-card-icon img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.problem-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 18px;
    text-align: center;
}
.problem-card p {
    font-size: 0.97rem;
    color: var(--color-secondary-text);
    line-height: 1.65;
}
.problem-closing {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 700;
    color: var(--color-text);
    margin-top: 12px;
}
@media (max-width: 768px) {
    #problem { padding: 80px 20px; }
    .problem-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   SECTION 3 — HOW IT WORKS
   ============================================================ */
#how-it-works {
    padding: 120px 40px;
    background: var(--color-bg-white);
    text-align: center;
}
.hiw-inner {
    max-width: 1100px;
    margin: 0 auto;
}
#how-it-works .section-header {
    margin-bottom: 72px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.hiw-flow {
    display: flex;
    flex-direction: column;
    gap: 80px;
    text-align: left;
}
.hiw-flow-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header media"
        "body   media";
    column-gap: 64px;
    row-gap: 0;
}
.hiw-flow-step-reverse {
    grid-template-areas:
        "media header"
        "media body";
}
.hiw-flow-header {
    grid-area: header;
    align-self: end;
    margin-top: 60px;
}
.hiw-flow-body {
    grid-area: body;
    align-self: start;
}
.hiw-flow-media {
    grid-area: media;
    display: flex;
    align-items: center;
}
.hiw-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 20px;
}
.hiw-flow-header h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 14px;
    line-height: 1.25;
}
.hiw-flow-body p {
    font-size: 0.97rem;
    color: var(--color-secondary-text);
    line-height: 1.7;
}
.hiw-flow-img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-panel);
    display: block;
}
/* Chat demo — centered below step 03 */
.hiw-chat-demo {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* How it works — scroll-triggered animations */
@media (prefers-reduced-motion: no-preference) {
    .hiw-flow-step .hiw-flow-header,
    .hiw-flow-step .hiw-flow-body,
    .hiw-flow-step .hiw-flow-media {
        opacity: 0;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    /* Normal step: text left → slide from left, media right → slide from right */
    .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-header,
    .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-body {
        transform: translateX(-40px);
    }
    .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-media {
        transform: translateX(40px);
    }
    /* Reversed step: media left → slide from left, text right → slide from right */
    .hiw-flow-step-reverse .hiw-flow-header,
    .hiw-flow-step-reverse .hiw-flow-body {
        transform: translateX(40px);
    }
    .hiw-flow-step-reverse .hiw-flow-media {
        transform: translateX(-40px);
    }
    /* Visible state */
    .hiw-flow-step.hiw-visible .hiw-flow-header,
    .hiw-flow-step.hiw-visible .hiw-flow-body,
    .hiw-flow-step.hiw-visible .hiw-flow-media {
        opacity: 1;
        transform: translateX(0);
    }
    /* Stagger body slightly after header */
    .hiw-flow-step.hiw-visible .hiw-flow-body {
        transition-delay: 0.12s;
    }
}

@media (max-width: 768px) {
    #how-it-works { padding: 80px 20px; }
    .workflow-chat-wrap { padding: 0 8px; }
    .hiw-flow { gap: 56px; }
    .hiw-flow-step,
    .hiw-flow-step-reverse {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .hiw-flow-header { margin-top: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; text-align: center; }
    /* On mobile, slide up instead of sideways */
    @media (prefers-reduced-motion: no-preference) {
        .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-header,
        .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-body,
        .hiw-flow-step-reverse .hiw-flow-header,
        .hiw-flow-step-reverse .hiw-flow-body,
        .hiw-flow-step:not(.hiw-flow-step-reverse) .hiw-flow-media,
        .hiw-flow-step-reverse .hiw-flow-media {
            transform: translateY(30px);
        }
        .hiw-flow-step.hiw-visible .hiw-flow-header,
        .hiw-flow-step.hiw-visible .hiw-flow-body,
        .hiw-flow-step.hiw-visible .hiw-flow-media {
            transform: translateY(0);
        }
    }
}

/* ============================================================
   SECTIONS 4–6 — VALUE BY AUDIENCE
   ============================================================ */
.value-section {
    padding: 120px 40px;
    background: var(--color-bg-white);
    overflow-x: hidden;
}
.value-section-alt {
    background: var(--color-secondary-bg);
}
.value-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.value-inner-reverse {
    direction: rtl;
}
.value-inner-reverse > * {
    direction: ltr;
}
.value-text .section-label {
    display: inline-block;
}
.value-text h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.15;
    margin-bottom: 24px;
    margin-top: 8px;
    letter-spacing: -0.02em;
}
.value-text p {
    font-size: clamp(0.97rem, 1.2vw, 1.05rem);
    color: var(--color-secondary-text);
    line-height: 1.7;
    margin-bottom: 14px;
}
.value-proof {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.value-proof-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-bg-white);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid rgba(0,0,0,0.05);
}
.value-section-alt .value-proof-item {
    background: var(--color-bg-white);
}
.value-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-green);
    margin-top: 2px;
}
.value-proof-item div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.value-proof-item strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}
.value-proof-item span {
    font-size: 0.88rem;
    color: var(--color-secondary-text);
    line-height: 1.5;
}
@media (max-width: 900px) {
    .value-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .value-inner-reverse {
        direction: ltr;
    }
}
@media (max-width: 768px) {
    .value-section { padding: 80px 20px; }
}

/* ============================================================
   SECTION 7 — USE CASES
   ============================================================ */
#use-cases {
    padding: 120px 40px;
    background: var(--color-bg-white);
    text-align: center;
}
.uc-inner {
    max-width: 1100px;
    margin: 0 auto;
}
#use-cases .section-header {
    margin-bottom: 60px;
}
.uc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.uc-card {
    background: var(--color-bg-white);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: var(--radius-panel);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: var(--transition-lift-slow);
}
.uc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.09);
}
.uc-card:nth-child(4),
.uc-card:nth-child(5) {
    grid-column: auto;
}
.uc-card-icon {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    margin: 0 auto 20px;
}
.uc-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}
.uc-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.3;
    text-align: center;
}
.uc-card-quote {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-secondary-text);
    border-left: 3px solid var(--color-primary);
    padding-left: 14px;
    line-height: 1.55;
    margin: 0;
}
.uc-card p:last-child {
    font-size: 0.93rem;
    color: var(--color-secondary-text);
    line-height: 1.65;
    margin: 0;
}
@media (max-width: 900px) {
    .uc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    #use-cases { padding: 80px 20px; }
    .uc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 8 — SECURITY
   ============================================================ */
#security {
    padding: 120px 40px;
    background: var(--color-secondary-bg);
    text-align: center;
}
.security-inner {
    max-width: 1100px;
    margin: 0 auto;
}
#security .section-header {
    margin-bottom: 60px;
}
.security-callouts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.security-callout {
    background: var(--color-bg-white);
    border-radius: var(--radius-panel);
    padding: 36px 28px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-lift-slow);
}
.security-callout:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 36px rgba(0,0,0,0.08);
}
.security-callout-icon {
    width: auto;
    height: 150px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.security-callout-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}
.security-callout h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 10px;
    text-align: center;
}
.security-callout p {
    font-size: 0.95rem;
    color: var(--color-secondary-text);
    line-height: 1.65;
}
@media (max-width: 768px) {
    #security { padding: 80px 20px; }
    .security-callouts { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 10 — CTA (extended with body copy and note)
   ============================================================ */
.cta-body {
    color: rgba(255,255,255,0.72);
    font-size: clamp(0.97rem, 1.2vw, 1.05rem);
    line-height: 1.7;
    max-width: 780px;
    text-align: center;
    margin: -20px 0 0;
}
.cta-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.42);
    margin-top: -24px;
    letter-spacing: 0.02em;
}

/* ============================================================
   SECTION 11 — ABOUT
   ============================================================ */
#about {
    padding: 80px 40px;
    background: #F8F8F6;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.about-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.about-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 64px;
    align-items: center;
    margin-top: 8px;
}
.about-text h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 28px;
    margin-top: 10px;
}
.about-text p {
    font-size: clamp(0.95rem, 1.1vw, 1.02rem);
    color: var(--color-secondary-text);
    line-height: 1.75;
    margin-bottom: 16px;
}
.about-visual {
    position: sticky;
    top: 100px;
}
.about-founders {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.about-founder {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-bg-white);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,0.05);
    text-decoration: none;
    transition: var(--transition-lift-fast);
}
.about-founder:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
}
.about-founder img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.about-founder > div {
    flex: 1;
}
.about-founder-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    display: block;
}
.about-founder-role {
    font-size: 0.82rem;
    color: var(--color-secondary-text);
    display: block;
    margin-top: 2px;
}
.about-founder-li {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.about-founder:hover .about-founder-li {
    opacity: 1;
}
@media (max-width: 900px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-visual {
        position: static;
    }
}
@media (max-width: 768px) {
    #about { padding: 60px 20px; }
}

/* About — scroll animations */
@media (prefers-reduced-motion: no-preference) {
    .about-text {
        opacity: 0;
        transform: translateX(-36px);
        transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .about-visual {
        opacity: 0;
        transform: translateX(36px);
        transition: opacity 0.65s ease, transform 0.65s ease;
        transition-delay: 0.12s;
    }
    .about-text.about-visible,
    .about-visual.about-visible {
        opacity: 1;
        transform: translateX(0);
    }
    .about-visual.about-visible { transition-delay: 0.18s; }
}

/* ============================================================
   REBUILD (Milestone 1) — multi-page components
   Marketing pages, use-case grid + detail, columned footer.
   Uses existing brand tokens; --color-text is the dark surface.
   ============================================================ */

/* --- shared marketing page shell --- */
.mktg-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.mktg-hero {
    padding: 140px 0 56px;
    background: radial-gradient(900px 380px at 78% -10%, rgba(var(--brand-color-rgb), 0.10), transparent 60%);
}
.mktg-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 800;
    max-width: 16ch;
    margin: 14px 0 0;
    color: var(--color-text);
}
.mktg-lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--color-secondary-text);
    max-width: 52ch;
    margin: 22px 0 0;
    line-height: 1.55;
}
.mktg-section { padding: 56px 0; }
.mktg-hero + .mktg-section { padding-top: 8px; }
.roadmap-note {
    font-size: 1rem;
    color: var(--color-secondary-text);
    background: var(--color-secondary-bg);
    border: 1px solid rgba(var(--brand-color-rgb), 0.15);
    border-radius: var(--radius-card);
    padding: 18px 22px;
    max-width: 64ch;
}
.mktg-cta-strip { text-align: center; }
.mktg-cta-strip h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--color-text);
    margin-bottom: 22px;
}

/* primary button usable as <a> or <button> */
.btn-primary {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 14px 30px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    margin-top: 28px;
    transition: var(--transition-lift);
}
.btn-primary:hover { transform: scale(1.03); box-shadow: var(--shadow-cta); }

/* nav/mobile CTA now anchors — kill underline, keep pill */
a.nav-cta { text-decoration: none; display: inline-block; line-height: 1.2; }
.mobile-menu a.mobile-menu-cta { text-decoration: none; display: block; }

/* --- use-case banded grid (home + hub) --- */
.uc-band { margin-top: 42px; }
.uc-band:first-child { margin-top: 0; }
.uc-band .band-title {
    font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-primary); font-weight: 800; margin-bottom: 4px;
}
.uc-band .band-sub { color: var(--color-secondary-text); font-size: 0.95rem; margin-bottom: 16px; }
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uc-card {
    display: block;
    background: var(--color-bg-white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-lift-fast);
}
.uc-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(var(--brand-color-rgb), 0.10);
    transform: translateY(-3px);
}
.uc-card h3 {
    font-size: 1.05rem; font-weight: 700; margin: 0; text-align: left; line-height: 1.3;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
}
.uc-card h3 .arr, .uc-card h3 .badge { margin-left: auto; }
.uc-card h3 .arr { color: var(--color-primary); opacity: 0; transition: opacity 0.18s; }
.uc-card:hover h3 .arr { opacity: 1; }
.uc-card p { color: var(--color-secondary-text); font-size: 0.9rem; margin: 9px 0 0; }
.uc-card-illus { display: block; width: 104px; height: 104px; max-width: 100%; object-fit: contain; margin-bottom: 8px; }
.uc-card.soon { opacity: 0.72; }

/* use-case hub: one full-bleed section per band, alternating backgrounds */
.uc-section { padding: 64px 0; }
.uc-section--tint { background: var(--color-secondary-bg); }
.uc-section-head {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    align-items: center; margin-bottom: 34px;
}
.uc-section-copy { min-width: 0; grid-column: 1 / 3; max-width: 60ch; }
.uc-section-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.08; margin: 0;
}
.uc-section-sub { font-size: 1.15rem; font-weight: 600; color: var(--color-text); margin: 14px 0 0; }
.uc-section-intro { font-size: 1rem; color: var(--color-secondary-text); line-height: 1.6; margin: 10px 0 0; }
.uc-section-art { grid-column: 3; display: flex; justify-content: center; }
.uc-section-art img { width: 250px; height: 250px; object-fit: contain; }
@media (max-width: 880px) {
    .uc-section { padding: 44px 0; }
    .uc-section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
    .uc-section-copy { grid-column: auto; }
    .uc-section-art { grid-column: auto; order: -1; justify-content: flex-start; }
    .uc-section-art img { width: 120px; height: 120px; }
}
.uc-card .badge {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-primary); background: var(--color-secondary-bg);
    padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}

/* --- use-case detail --- */
.crumb { font-size: 0.85rem; color: var(--color-secondary-text); padding-top: 120px; }
.crumb a { color: var(--color-secondary-text); text-decoration: none; }
.crumb a:hover { color: var(--color-primary); }
.uc-hero {
    display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 52px); align-items: center;
    margin: 132px 0 0;
    background: linear-gradient(135deg, #FFFCF7 0%, #FFF1E1 48%, #FCE2C8 100%);
    border: 1px solid rgba(230, 96, 24, 0.14);
    border-radius: 22px;
    padding: clamp(28px, 4vw, 52px);
}
.uc-hero-copy { min-width: 0; }
.uc-hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 800; letter-spacing: -0.02em;
    max-width: 16ch; margin: 8px 0 0; color: var(--color-text);
}
.uc-hero-sub { font-size: 1.2rem; color: var(--color-secondary-text); max-width: 54ch; margin-top: 16px; }
.uc-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.uc-chip {
    font-size: 0.78rem; font-weight: 600; color: #8a4a1e;
    background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(230, 96, 24, 0.18);
    border-radius: 999px; padding: 6px 12px;
}
.uc-hero-cta { margin-top: 24px; }
.uc-hero-media { flex: none; }
.uc-hero-media img { width: 320px; height: 320px; object-fit: contain; }
@media (max-width: 760px) {
    .uc-hero { grid-template-columns: 1fr; gap: 22px; margin-top: 104px; }
    .uc-hero-media { order: -1; justify-self: center; }
    .uc-hero-media img { width: 160px; height: 160px; }
}
/* reading column matches the hero container width (1120px, inherited from .mktg-container; sidebar retired — related + CTA are full-width bands below) */
/* .mktg-container.uc-body (0,2,0) so the mobile `.mktg-container { padding: 0 20px }`
   shorthand can't silently reset the top gap to 0 */
.mktg-container.uc-body { padding-top: 40px; padding-bottom: 56px; }
.uc-main p { font-size: 1.05rem; color: var(--color-text); line-height: 1.6; }

/* --- use-case detail: prose paired with a contextual illustration, alternating sides --- */
.uc-fig { display: grid; grid-template-columns: 1fr 200px; gap: 34px; align-items: center; margin: 40px 0; }
.uc-fig--flip { grid-template-columns: 200px 1fr; }
.uc-fig--flip .uc-fig-copy { order: 2; }
.uc-fig--flip .uc-fig-art  { order: 1; }
.uc-fig-copy { min-width: 0; }
.uc-fig-copy h2 { margin-top: 0; }
.uc-fig-copy p:last-child { margin-bottom: 0; }
.uc-fig-art { display: flex; justify-content: center; }
.uc-fig-art img { width: 100%; max-width: 200px; height: auto; object-fit: contain; }
.uc-fig--noart { display: block; }
.uc-fig--noart .uc-fig-art { display: none; }

/* --- use-case detail: "How Catalsy helps" — dark spotlight band --- */
.uc-help-spot {
    position: relative; margin: 40px 0; border-radius: 18px; overflow: hidden; text-align: center;
    padding: clamp(30px, 4vw, 48px) clamp(24px, 4vw, 52px) clamp(32px, 4vw, 46px);
    background: radial-gradient(120% 150% at 50% 0%, #241a13 0%, var(--color-ink-dark) 62%);
    border: 1px solid rgba(255,255,255,0.08);
}
.uc-help-halo {
    position: relative; width: clamp(112px, 16vw, 150px); aspect-ratio: 1;
    margin: 0 auto 20px; display: grid; place-items: center;
}
.uc-help-halo::before {
    content: ""; position: absolute; inset: -14px; border-radius: 50%;
    background: radial-gradient(circle, rgba(230,96,24,0.30), transparent 68%);
}
.uc-help-halo img {
    position: relative; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(230,96,24,0.35));
}
.uc-main .uc-help-spot h2 { color: #fff; margin: 0 0 12px; text-align: center; }
.uc-main .uc-help-spot p {
    color: #cec2b6; text-align: center; max-width: 64ch; margin: 0 auto 12px;
    font-size: 1.02rem; line-height: 1.62;
}
.uc-main .uc-help-spot p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
    .uc-help-spot { margin: 28px 0; }
    /* keep hero→first-card gap equal to the 28px card-to-card gap on mobile */
    .mktg-container.uc-body { padding-top: 28px; }
}
@media (max-width: 640px) {
    .uc-fig, .uc-fig--flip { grid-template-columns: 1fr; gap: 12px; margin: 28px 0; }
    .uc-fig--flip .uc-fig-copy, .uc-fig--flip .uc-fig-art { order: 0; }
    .uc-fig-art { justify-content: flex-start; }
    .uc-fig-art img { max-width: 140px; }
}

/* --- use-case detail: tension pair — "The moment" (situation) beside "What usually goes wrong" (friction).
   Warm card + orange accent for the setup; a cool slate card + muted-terracotta ✕ marks for the friction,
   deliberately NOT the brand orange so "what breaks" reads as a different register. --- */
.uc-tension { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; margin: 40px 0; }
.uc-tp-card { border-radius: 18px; padding: clamp(24px, 3vw, 34px); }
.uc-tp-card > h2:first-of-type { margin-top: 0; }
.uc-tp-moment { background: #F4F5F7; border: 1px solid #e2e5ea; }
.uc-tp-wrong  { background: linear-gradient(160deg, #FFF9F3, #FFF1E4); border: 1px solid rgba(230,96,24,0.12); }
.uc-tp-moment h2 { color: #3f4653; }
.uc-tp-well {
    height: 168px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
    background: #fff; border: 1px solid #e2e5ea;
}
.uc-tp-wrong .uc-tp-well { border-color: rgba(230,96,24,0.12); }
.uc-tp-well img { width: 148px; height: 148px; object-fit: contain; }
/* time-back belongs to the value-icon family (1024 canvas, lightly padded), so in
   the friction well it renders shorter than the 640-canvas situation icon beside it.
   Bump only here so the two illustrations share an optical height (~130px object).
   The hourglass is bottom-heavy (lower bulb + sand), so nudge it up to sit on the
   same optical line as the situation icon opposite. */
.uc-tp-wrong .uc-tp-well img { width: 190px; height: 190px; transform: translateY(-14px); }
.uc-tp-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.uc-tp-moment .uc-tp-eyebrow { color: #3f4653; opacity: 0.7; }
.uc-tp-wrong .uc-tp-eyebrow  { color: var(--color-primary); }
/* ✕ list — overrides the default orange-dot bullet inside the friction card */
.uc-main .uc-xlist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 13px; }
.uc-main .uc-xlist li { padding-left: 0; margin-bottom: 0; display: flex; gap: 12px; font-size: 0.97rem; line-height: 1.5; color: #4a4034; }
.uc-main .uc-xlist li::before { content: none; }
.uc-xmark {
    flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 7px;
    background: var(--color-primary);
}
@media (max-width: 760px) {
    .uc-tension { grid-template-columns: 1fr; gap: 18px; margin: 28px 0; }
    .uc-tp-well { height: 148px; }
}

/* --- use-case detail: related use cases, full-width band below the article --- */
.uc-related { background: var(--color-secondary-bg); border-top: 1px solid rgba(0,0,0,0.06); padding: 56px 0 60px; }
.uc-related-title {
    font-size: clamp(1.4rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em;
    color: var(--color-text); margin: 0 0 24px;
}
.uc-rel-grid { grid-template-columns: repeat(3, 1fr); }
.uc-rel-grid .uc-card { box-shadow: var(--shadow-card); }
@media (max-width: 880px) { .uc-rel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .uc-rel-grid { grid-template-columns: 1fr; } }

/* --- use-case detail: closing CTA strip --- */
.uc-cta { background: var(--color-ink-dark); }
.uc-cta h2 { color: #fff; max-width: 30ch; margin-left: auto; margin-right: auto; }

/* --- use-case detail: main-column prose --- */
.uc-main h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em;
    color: var(--color-text); margin: 34px 0 12px;
}
.uc-main > :first-child { margin-top: 0; }
.uc-main p { margin: 0 0 12px; }
.uc-main ul { list-style: none; margin: 6px 0 12px; padding: 0; }
.uc-main li {
    position: relative; padding-left: 24px; margin-bottom: 9px;
    font-size: 1.05rem; color: var(--color-text); line-height: 1.6;
}
.uc-main li::before {
    content: ""; position: absolute; left: 2px; top: 10px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary);
}

/* --- use-case detail: FAQ --- */
.uc-main .faq { margin-top: 10px; }
.uc-main .faq .q { font-weight: 700; font-size: 1.05rem; color: var(--color-text); margin-top: 18px; }
.uc-main .faq .a { color: var(--color-secondary-text); font-size: 1rem; line-height: 1.55; margin-top: 5px; }

/* --- use-case detail: questions list (Q&A page) --- */
.uc-main .q-list { display: grid; gap: 9px; margin: 8px 0 6px; }
.uc-main .q-list .ql {
    background: var(--color-secondary-bg); border-radius: 10px; padding: 11px 15px;
    font-size: 0.97rem; color: var(--color-text); font-weight: 500;
}

/* --- use-case detail: Slack chat glimpse --- */
.uc-main .chat {
    background: var(--color-bg-white); border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px; padding: 20px 20px 16px; margin: 10px 0 6px;
    box-shadow: 0 24px 60px rgba(20,10,5,0.07);
}
.uc-main .chat-h {
    font-size: 0.7rem; font-weight: 700; color: var(--color-secondary-text);
    letter-spacing: 0.06em; text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 11px; margin-bottom: 15px;
}
.uc-main .msg { display: flex; gap: 10px; margin-bottom: 13px; align-items: flex-start; }
.uc-main .av {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
}
.uc-main .av.cat { background: var(--color-primary); }
.uc-main .av.u1  { background: #3a6ea5; }
.uc-main .av.u2  { background: #3f8f6b; }
.uc-main .av.av-img { overflow: hidden; }
.uc-main .av.av-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.uc-main .bub {
    background: var(--color-secondary-bg); border-radius: 5px 13px 13px 13px;
    padding: 9px 13px; font-size: 0.87rem; line-height: 1.4; color: var(--color-text);
}
.uc-main .bub .who {
    font-size: 0.68rem; color: var(--color-secondary-text); font-weight: 700;
    margin-bottom: 3px; letter-spacing: 0.02em;
}
.uc-main .chat-sys {
    text-align: center; font-size: 0.75rem; font-weight: 700; color: #1f7a4d;
    background: rgba(63,143,107,0.14); border-radius: 9px; padding: 9px; margin-top: 8px;
}

/* --- columned footer --- */
.site-footer { text-align: left; padding: 0; }
.footer-inner {
    max-width: 1120px; margin: 0 auto; padding: 54px 40px 0;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px;
}
.footer-brand { max-width: 30ch; }
.footer-logo { height: 90px; width: auto; position: relative; left: -25px; display: block; margin-bottom: 8px; }
.footer-tagline { font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.5; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 44px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
    font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.9); margin: 0 0 4px; font-weight: 700;
}
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.55); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
    max-width: 1120px; margin: 34px auto 0; padding: 20px 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: 0.8rem;
}

@media (max-width: 880px) {
    .uc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .mktg-container { padding: 0 20px; }
    .mktg-hero { padding: 120px 0 40px; }
    .uc-grid { grid-template-columns: 1fr; }
    .footer-inner, .footer-bottom { padding-left: 20px; padding-right: 20px; }
    /* logo shows on desktop only; hidden here to keep the mobile footer compact */
    .footer-logo { display: none; }
    /* fixed 2-col grid so column 2 (Use cases / Legal) lines up regardless of content width */
    .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}

/* ============================================================
   NAV DROPDOWN (Use cases) — desktop panel + mobile accordion
   ============================================================ */
.nav-caret {
    font-size: 1.85em;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    bottom: 2px;
    left: 4px;
}

/* --- desktop --- */
.nav-item-dd { position: relative; display: flex; align-items: center; }
.nav-dd-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.85rem; font-weight: 600; color: var(--color-text);
    text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
    transition: color 0.2s;
}
.nav-item-dd:hover .nav-dd-trigger,
.nav-item-dd:focus-within .nav-dd-trigger { color: var(--color-primary); }
.nav-item-dd:hover .nav-caret,
.nav-item-dd:focus-within .nav-caret { transform: rotate(180deg); bottom: -2px; }

.nav-dd-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.97);
    transform-origin: top center;
    width: 360px;
    background: var(--color-bg-white);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(20,10,5,0.14);
    padding: 18px 20px;
    opacity: 0; visibility: hidden; pointer-events: none;
    /* closing: quick and out of the way */
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    z-index: 1200;
}
/* transparent bridge so the cursor can cross the gap without closing */
.nav-dd-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav-item-dd:hover .nav-dd-panel,
.nav-item-dd:focus-within .nav-dd-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    /* opening: slower, eased-out, with a short delay so brushing past doesn't flash it */
    transition:
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        visibility 0s linear 0.06s;
}
@media (prefers-reduced-motion: reduce) {
    .nav-dd-panel { transform: translateX(-50%); transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
    .nav-item-dd:hover .nav-dd-panel,
    .nav-item-dd:focus-within .nav-dd-panel {
        transform: translateX(-50%);
        transition: opacity 0.15s ease, visibility 0s;
    }
}
.nav-dd-cols { display: flex; flex-direction: column; gap: 14px; }
.nav-dd-title {
    display: block; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-primary); font-weight: 800; margin-bottom: 4px;
}
.nav-dd-col a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 0.82rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--color-text);
    padding: 5px 0; line-height: 1.3; transition: color 0.15s;
}
.nav-dd-col a:hover { color: var(--color-primary); }
.nav-dd-soon {
    flex: none;
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-primary); background: var(--color-secondary-bg);
    padding: 1px 6px; border-radius: 5px; margin-left: auto; vertical-align: middle;
}
.nav-dd-all {
    display: block; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.82rem; font-weight: 700; text-transform: none; letter-spacing: 0;
    color: var(--color-primary);
}

/* --- mobile accordion --- */
.mobile-nav-group { display: flex; flex-direction: column; }
.mobile-group-toggle {
    font-size: 1.1rem; font-weight: 600; color: var(--color-text);
    text-transform: uppercase; letter-spacing: 0.06em;
    padding: 16px 0; border: none; border-bottom: 1px solid rgba(0,0,0,0.06);
    background: none; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.mobile-group-toggle:hover { color: var(--color-primary); }
.mobile-nav-group.open .mobile-group-toggle .nav-caret { transform: rotate(180deg); bottom: -2px; }
.mobile-submenu { display: none; flex-direction: column; padding-left: 12px; }
.mobile-nav-group.open .mobile-submenu { display: flex; }
.mobile-submenu a.mobile-subnav-link {
    font-size: 0.95rem; text-transform: none; letter-spacing: 0; font-weight: 500;
    color: var(--color-secondary-text); padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mobile-submenu a.mobile-subnav-link:hover { color: var(--color-primary); }
.mobile-submenu a.mobile-subnav-all { font-weight: 700; color: var(--color-text); }

/* ============================================================
   REBUILD (Milestone 2) — HOME PAGE COMPONENTS
   New narrative home, rendered in the existing design language.
   Components here are reused by Product/Security/Privacy pages (M3):
   .flow, .detect, .glimpse, .sec-grid, .pgrid, .persona, .vgrid.
   Uses existing brand tokens; --color-ink-dark is the warm dark surface.
   ============================================================ */

/* --- shared bits --- */
.eyebrow {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-primary);
}
.home-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.home2 section { padding: 92px 0; }
.home2 .lead {
    font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--color-secondary-text);
    line-height: 1.55; margin-top: 14px;
}
/* breathing room under each section headline */
.home2 .home-wrap > h2 { margin-bottom: 22px; }
/* fade-up reveal (progressive enhancement; visible by default without JS) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* --- hero --- */
.home2 .home-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 104px 0 96px;
    overflow: hidden;
    background: var(--color-bg-white);
}
.home2 .home-hero > .home-wrap { position: relative; z-index: 2; width: 100%; }

/* hero background: large, soft gradient circles in the secondary bg colour that
   drift slowly, fading out toward white. */
.hero-spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-spot-base, .hero-spot-glow {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.hero-spot-base {
    width: 90vw; height: 90vw; max-width: 1200px; max-height: 1200px;
    top: -30%; right: -18%;
    background: radial-gradient(circle at center, var(--color-secondary-bg) 0%, rgba(255, 247, 237, 0) 66%);
    animation: hero-drift-a 28s ease-in-out infinite alternate;
}
.hero-spot-glow {
    width: 75vw; height: 75vw; max-width: 1000px; max-height: 1000px;
    bottom: -34%; left: -14%;
    background: radial-gradient(circle at center, var(--color-secondary-bg) 0%, rgba(255, 247, 237, 0) 70%);
    animation: hero-drift-b 36s ease-in-out infinite alternate;
}
@keyframes hero-drift-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-6%, 5%, 0) scale(1.08); }
}
@keyframes hero-drift-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    100% { transform: translate3d(7%, -4%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-spot-base, .hero-spot-glow { animation: none; }
}

/* hero scroll indicator (bouncing orange chevron) */
.hero-scroll-indicator {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-primary); color: #fff; text-decoration: none;
    box-shadow: 0 10px 24px rgba(var(--brand-color-rgb), 0.35);
    transition: background 0.2s ease;
    animation: hero-chevron-bounce 2s ease-in-out infinite;
}
.hero-scroll-indicator:hover { background: #c95414; color: #fff; }
.hero-scroll-indicator svg { width: 24px; height: 24px; }
@keyframes hero-chevron-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll-indicator { animation: none; }
}
.tag-pill {
    display: inline-block; background: var(--color-secondary-bg); color: var(--color-primary);
    font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 7px 14px; border-radius: var(--radius-pill); margin-bottom: 22px;
    border: 1px solid rgba(var(--brand-color-rgb), 0.18); transition: var(--transition-lift-fast);
}
a.tag-pill:hover { background: #fff; box-shadow: var(--shadow-card); transform: translateY(-1px); }
.home-hero h1 {
    font-size: clamp(2.4rem, 4.8vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em;
    font-weight: 800; max-width: 18ch;
}
/* Product hero matches the security/privacy/about heroes; the only difference is
   an uncapped headline width, because its own <br> controls the two-row break. */
.product-hero h1 { max-width: none; }
.home-hero .sub {
    font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--color-secondary-text);
    max-width: 48ch; margin-top: 22px;
}
.hero-actions { margin-top: 32px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero-actions .btn-primary { margin-top: 0; }
.scrollcue { font-size: 0.95rem; color: var(--color-secondary-text); font-weight: 600; }
.scrollcue:hover { color: var(--color-primary); }
.cred { margin-top: 22px; font-size: 0.9rem; color: var(--color-secondary-text); font-weight: 500; }
.cred b { color: var(--color-text); font-weight: 700; }

/* --- belief --- */
.belief { background: var(--color-secondary-bg); scroll-margin-top: 84px; }
.belief h2 {
    font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; font-weight: 800;
    max-width: 18ch; letter-spacing: -0.015em; margin-top: 14px;
}
.belief p { max-width: 60ch; }
.belief p + p { margin-top: 12px; }

/* --- dark full-bleed sections (problem, secure) --- */
.problem, .secure { background: var(--color-ink-dark); color: #f3efec; }
.problem .eyebrow, .secure .eyebrow { color: #ff8a5c; }
.problem h2, .secure h2 {
    font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; max-width: 16ch;
    margin-top: 10px; letter-spacing: -0.015em; color: #fff;
}
.problem p, .secure .lead { color: #c8bfb8; max-width: 60ch; }
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
.moment { border: 1px solid #3a302a; border-radius: var(--radius-card); padding: 20px 18px; background: rgba(255,255,255,0.03); }
.moment .n { color: #ff8a5c; font-weight: 800; font-size: 0.85rem; }
.moment p { color: #e7ded8; font-size: 0.95rem; margin-top: 8px; }

/* --- how-it-works teaser (condensed 3-step) --- */
.how-teaser { scroll-margin-top: 84px; }
.how-teaser h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; margin-top: 10px; }
.how-teaser .kernel { margin-top: 12px; font-size: 1.1rem; color: var(--color-text); max-width: 62ch; line-height: 1.5; }
.how-teaser .kernel b { font-weight: 700; }
.flow { position: relative; margin-top: 34px; padding: 6px 0 4px; }
.prog-track { position: absolute; left: 23px; top: 34px; bottom: 34px; width: 3px; background: rgba(0,0,0,0.08); border-radius: 3px; }
.prog-fill {
    position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 3px;
    background: linear-gradient(var(--color-primary), #f0a884); transition: height 0.25s ease;
}
.step {
    display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: start; padding: 15px 0;
    opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.step.in { opacity: 1; transform: none; }
.node {
    justify-self: center; width: 48px; height: 48px; border-radius: 50%; background: #fff;
    border: 2px solid var(--color-primary); display: flex; align-items: center; justify-content: center;
    color: var(--color-primary); z-index: 1; box-shadow: 0 0 0 6px var(--color-bg-white); transition: 0.35s;
}
.step.in .node { background: var(--color-primary); color: #fff; box-shadow: 0 0 0 6px var(--color-secondary-bg); }
.step-name { font-weight: 800; font-size: 1.15rem; }
.step .desc { color: var(--color-secondary-text); font-size: 0.95rem; margin-top: 3px; max-width: 58ch; }
.chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.chips span {
    font-size: 0.78rem; color: var(--color-text); background: var(--color-secondary-bg);
    border-radius: 6px; padding: 4px 10px; font-weight: 500;
}
.flow-more { margin-top: 26px; }
.flow-more a { font-weight: 700; color: var(--color-primary); }
.flow-more a:hover { text-decoration: none; }

/* --- proactive glimpse + detection card --- */
.glimpse { background: var(--color-secondary-bg); }
.glimpse-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; margin-top: 10px; }
.glimpse-copy h2 { font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 800; letter-spacing: -0.015em; max-width: 16ch; }
.glimpse-copy .lead { margin: 14px 0 24px; max-width: 46ch; }
.persona { border-left: 3px solid var(--color-primary); padding: 3px 0 3px 16px; margin-bottom: 16px; }
.persona h4 { font-size: 1rem; }
.persona p { font-size: 0.9rem; color: var(--color-secondary-text); margin-top: 3px; }

/* "What each team gets" — persona cards on use-case detail pages.
   Deliberately unlike .uc-card (which is a link): warm tint, no border, no
   hover, icon beside the copy — so these read as information, not navigation. */
.uc-personas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
    margin: 16px 0 8px;
}
.uc-main .persona {
    display: flex; align-items: center; gap: 18px;
    background: var(--color-secondary-bg);
    border: none; border-radius: var(--radius-card);
    padding: 22px; margin: 0;
}
.uc-main .persona-ico { width: 84px; height: 84px; flex: none; }
.uc-main .persona-ico img { width: 100%; height: 100%; object-fit: contain; }
.uc-main .persona-txt { min-width: 0; }
.uc-main .persona-badge {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; flex: none; border-radius: 12px;
    background: var(--color-bg-white); color: var(--color-primary);
    font-size: 1.3rem; font-weight: 800; line-height: 1;
}
.uc-main .persona h4 { font-size: 1rem; font-weight: 700; margin: 0; color: var(--color-text); }
.uc-main .persona p { font-size: 0.9rem; color: var(--color-secondary-text); margin-top: 6px; line-height: 1.5; }

.detect {
    background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel);
    overflow: hidden; box-shadow: 0 24px 60px rgba(20,10,5,0.08);
}
.detect-h { display: flex; align-items: center; gap: 9px; background: var(--color-ink-dark); color: #fff; padding: 13px 18px; font-size: 0.82rem; font-weight: 600; }
.detect-h .pulse { width: 9px; height: 9px; border-radius: 50%; background: #5fd08a; animation: detect-pulse 2.2s infinite; flex: none; }
@keyframes detect-pulse { 0% { box-shadow: 0 0 0 0 rgba(95,208,138,0.55); } 70% { box-shadow: 0 0 0 8px rgba(95,208,138,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,138,0); } }
.detect-h .src { margin-left: auto; font-weight: 500; color: #bdb3ab; font-size: 0.75rem; }
.detect-title { font-size: 1.1rem; font-weight: 800; padding: 15px 18px 2px; }
.detect-rows { padding: 2px 18px 6px; }
.drow { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08); align-items: start; }
.drow:last-child { border-bottom: none; }
.drow .stage { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-primary); }
.drow.act .stage { color: var(--color-text); }
.drow .val { font-size: 0.85rem; color: var(--color-text); line-height: 1.4; }
.detect-foot { background: var(--color-secondary-bg); color: #5a2f1c; font-weight: 700; font-size: 0.8rem; padding: 12px 18px; }

/* --- value props --- */
.value h2 { font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; max-width: none; margin-top: 10px; }
.value .lead { max-width: 58ch; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.vcard { border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel); padding: 26px 24px; background: #fff; transition: var(--transition-lift-fast); }
.vcard:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(var(--brand-color-rgb), 0.08); }
.vcard .vico { width: 46px; height: 46px; border-radius: 12px; background: var(--color-secondary-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.vcard h3 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.vcard p { color: var(--color-secondary-text); font-size: 0.95rem; margin-top: 8px; line-height: 1.5; }

/* --- use-case band grid on home --- */
.uc-teaser { background: var(--color-secondary-bg); }
.uc-teaser h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; margin-top: 10px; }
.uc-teaser .lead { max-width: 50ch; }
.uc-teaser .uc-groups { margin-top: 42px; }
.uc-teaser .more { margin-top: 26px; }
.uc-teaser-inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.uc-teaser-art { display: flex; justify-content: center; }
.uc-teaser-art img { width: 100%; max-width: 400px; height: auto; }
@media (max-width: 768px) {
    .uc-teaser-inner { grid-template-columns: 1fr; gap: 20px; }
    .uc-teaser-art { max-width: 240px; margin: 0 auto; }
    .uc-teaser-art img { max-width: 240px; }
}

/* --- secure teaser grid --- */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.sec-card { border: 1px solid #3a302a; border-radius: 14px; padding: 22px; background: rgba(255,255,255,0.03); transition: var(--transition-lift-fast); }
.sec-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.35); border-color: #4a3f38; }
.sec-card .si { color: #ff8a5c; margin-bottom: 12px; }
.sec-card h4 { font-size: 1rem; color: #fff; }
.sec-card p { color: #c8bfb8; font-size: 0.9rem; margin-top: 7px; line-height: 1.45; }
.sec-more { margin-top: 28px; }
.sec-more a { font-weight: 700; color: #ff8a5c; }
.sec-more a:hover { text-decoration: underline; }

/* --- privacy principles teaser --- */
.principles { background: var(--color-bg-white); }
.principles h2 { font-size: clamp(1.7rem, 3.4vw, 2.15rem); font-weight: 800; letter-spacing: -0.015em; max-width: 18ch; margin-top: 10px; }
.principles .lead { max-width: 60ch; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.pcard { background: var(--color-secondary-bg); border: 1px solid rgba(var(--brand-color-rgb), 0.10); border-radius: 14px; padding: 22px; }
.pcard h4 { font-size: 1rem; margin-top: 7px; }
.pcard p { font-size: 0.9rem; color: var(--color-secondary-text); margin-top: 7px; line-height: 1.5; }
.principles .more { margin-top: 26px; }
.principles .more a { font-weight: 700; color: var(--color-primary); }
.principles .more a:hover { text-decoration: underline; }

/* --- proof: quotes + founders --- */
.proof { background: var(--color-secondary-bg); }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; }
.quote { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel); padding: 26px; }
.quote p { font-size: 1.05rem; line-height: 1.5; color: var(--color-text); }
.quote .by { font-size: 0.85rem; color: var(--color-secondary-text); font-weight: 700; margin-top: 16px; }
.from { margin-top: 44px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 36px; }
.from h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.015em; }
.from p { color: var(--color-secondary-text); font-size: 1rem; max-width: 74ch; margin-top: 12px; line-height: 1.55; }
.founders { display: flex; gap: 30px 40px; flex-wrap: wrap; margin-top: 22px; align-items: center; }
.founder { display: flex; align-items: center; gap: 12px; }
.founder img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.founder b { display: block; font-size: 0.95rem; }
.founder span { color: var(--color-secondary-text); font-size: 0.85rem; }
.from-more { margin-top: 28px; }
.from-more a { font-weight: 700; color: var(--color-primary); }
.from-more a:hover { text-decoration: underline; }

/* --- beta CTA --- */
.beta { text-align: center; }
.beta h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 800; max-width: 26ch; letter-spacing: -0.015em; margin: 10px auto 0; }
.beta .lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
.beta .btn-primary { margin-top: 30px; }
.beta-secondary { margin-top: 16px; font-size: 0.9rem; }
.beta-secondary a { color: var(--color-secondary-text); font-weight: 600; }
.beta-secondary a:hover { color: var(--color-primary); }

/* outlined secondary button (e.g. How-it-works -> product page) */
.btn-secondary {
    display: inline-block; padding: 12px 22px; border-radius: var(--radius-pill);
    border: 1.5px solid rgba(var(--brand-color-rgb), 0.35);
    color: var(--color-primary); font-weight: 700; font-size: 0.95rem;
    text-decoration: none; transition: var(--transition-lift-fast);
}
.btn-secondary:hover { background: var(--color-secondary-bg); border-color: var(--color-primary); transform: translateY(-1px); }

/* ============================================================
   IMAGERY RE-INTEGRATION (home) — glossy-ceramic spot art back
   into the hero, personas, value + security cards. All spot-art
   PNGs are true-alpha cutouts, so the ceramic floats on any
   background with no blend-mode trick; on the dark secure section
   each image sits on a light rounded tile instead.
   ============================================================ */

/* two-column hero (copy + ceramic product art on a warm stage) */
.hero-grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: 44px; align-items: center; }
/* product hero: wider copy column */
.product-hero .hero-grid { grid-template-columns: 1.3fr 1.02fr; }
.hero-copy { min-width: 0; }
.hero-art { position: relative; display: flex; justify-content: center; align-items: center; }
.hero-art::before {
    content: ""; position: absolute; inset: 8% 2%; z-index: 0;
    background: radial-gradient(closest-side, rgba(var(--brand-color-rgb), 0.14), transparent 76%);
    filter: blur(10px);
}
.hero-art img { position: relative; z-index: 1; width: 100%; max-width: 640px; height: auto; }

/* home hero radar — CSS sweep animated over the still ceramic render.
   Geometry is measured from img/hero/radar.png (1024x1024): the display is a
   circle seen at an angle, so it projects to an ellipse centred at
   48.77%/39.08% with a major axis of 45.72% tilted -41.77deg and foreshortened
   to 0.8595 on the minor axis. .radar-disc reproduces that projection, so a
   plain rotation inside it sweeps the screen in correct perspective, including
   the uneven apparent speed a tilted disc should have. The render's screen is
   deliberately empty — every contact is drawn by the script in home.php.
   If you re-generate the artwork, re-measure: the numbers above are specific
   to this file. */
.radar { position: relative; width: 100%; max-width: 640px; margin: 0; line-height: 0; }
.hero-art .radar img { max-width: 100%; }
.radar-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.radar-disc {
    position: absolute; left: 48.770%; top: 39.082%;
    width: 45.722%; aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-41.77deg) scaleY(0.8595);
}
.radar-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    mix-blend-mode: screen;
    /* Trail runs backwards from the leading edge: the disc rotates clockwise,
       so the fade sits at decreasing angles and the bright edge lands on
       0deg/360deg — the same point in a conic, which keeps the blip phase
       delays below valid. */
    background: conic-gradient(from 0deg,
        rgba(226, 96, 24, 0) 0deg,
        rgba(226, 96, 24, 0) 264deg,
        rgba(226, 96, 24, 0.11) 312deg,
        rgba(242, 122, 32, 0.28) 346deg,
        rgba(255, 170, 70, 0.58) 360deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 66%, rgba(0,0,0,0.4) 92%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 0%, #000 66%, rgba(0,0,0,0.4) 92%, transparent 100%);
    animation: radar-spin 7s linear infinite;
}
/* Contacts are spawned by the script in partials/home.php: it watches the
   sweep's phase and drops one at a random bearing the moment the beam reaches
   it, so a different set is found on every revolution. Position and the
   animation shorthand are set inline by that script; with JS off the sweep
   still turns, just with nothing on the screen. */
.radar-blip {
    position: absolute; width: 8.4%; aspect-ratio: 1;
    border-radius: 50%; mix-blend-mode: screen; opacity: 0;
    transform: translate(-50%, -50%);
    /* Hot near-white core so the contact still reads once `screen` has
       lifted it against the bright amber display, falling off into a
       wide amber halo. */
    background: radial-gradient(closest-side,
        rgba(255, 253, 246, 1) 0%,
        rgba(255, 241, 205, 0.96) 16%,
        rgba(255, 208, 126, 0.74) 36%,
        rgba(255, 160, 60, 0.34) 62%,
        rgba(255, 140, 38, 0) 100%);
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
/* Runs over 3/4 of a revolution: a quick ping, then a long decay. */
@keyframes radar-blip {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.45); }
    2%   { opacity: 1;    transform: translate(-50%, -50%) scale(1.22); }
    9%   { opacity: 0.94; transform: translate(-50%, -50%) scale(1.00); }
    45%  { opacity: 0.52; transform: translate(-50%, -50%) scale(0.96); }
    100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.88); }
}
@media (prefers-reduced-motion: reduce) { .radar-fx { display: none; } }

/* ---------------------------------------------------------------
   Secondary hero animations (about / security / privacy)

   Unlike the home radar, these do not loop. Each object performs one
   short move on arrival — the compass needle seeking its bearing, the
   vault handle being turned shut, the aperture setting itself — and
   then settles and stays still for the rest of the visit. Every moving
   part is a real, separate layer, so the object around it never moves.
   Geometry percentages are measured from the 1024x1024 sources;
   re-measure if the artwork changes.
   --------------------------------------------------------------- */
.hero-still { position: relative; width: 100%; max-width: 640px; margin: 0; line-height: 0; }
/* Product hero core sits a touch smaller — 90% of the default still size.
   The grid column is usually narrower than the 640px cap, so width (not
   max-width) is what actually governs the rendered size here. */
.product-hero .hero-still.core { width: 80%; max-width: 512px; }
/* Vault (security), compass (about) and iris (privacy) share the same wider
   grid column, so one 75% rule lands them all at a matched ~390px plate. */
.hero-still.vault,
.hero-still.compass,
.hero-still.iris { width: 75%; max-width: 480px; }
.hero-art .hero-still img { max-width: 100%; }
.hero-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* --- about: the compass ---------------------------------------
   about-hero-plate.png is the compass with the needle removed, so the
   needle here is a real, independent object: an SVG that swings on the
   pivot while the case stays perfectly still. It comes in off-north,
   overshoots twice with each swing smaller than the last, and settles
   pointing north — a compass finding its bearing. Then it stops.
   The pivot is at 50.1%/54.0% of the plate; the SVG box is centred
   there and its viewBox is drawn about its own centre, so rotation
   needs no origin fixing. */
.compass-needle {
    position: absolute; left: 50.1%; top: 54.0%;
    width: 62%; height: auto; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    overflow: visible;
    /* linear here is deliberate: needle-seek sets its own easing per
       keyframe, and a shorthand curve would be re-applied to every
       segment, jerking each of the small settling swings. */
    animation: needle-seek 3.8s linear 0.25s both;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 3px 6px rgba(120, 62, 30, 0.22));
}
.needle-n { fill: var(--brand-color, #E66018); }
.needle-s { fill: #F7EDE6; stroke: rgba(168, 112, 78, 0.22); stroke-width: 0.6; }
.needle-cap { fill: #FCF6F1; stroke: rgba(168, 112, 78, 0.28); stroke-width: 0.8; }

/* --- product: the core ----------------------------------------
   motor.png is the ceramic display — bezel plus a lit orange face with
   an empty centre. The C emblem sits in that centre as live SVG, so its
   arrows draw and its dots pulse on the shared .arrow-* animations
   defined near the top of this file. The whole piece drifts up and down
   on a slow loop, which is the "hovering" from the original.
   The three custom properties below are what those shared animations
   read: the emblem is white-on-orange here, unlike the orange-on-white
   it uses elsewhere, so the colours are set on the figure rather than
   forked into a second set of keyframes. */
.core {
    /* Half the 640px the other hero stills run at. The core reads as an
       instrument rather than a scene, so it holds up small — and the
       shadow tightens with it, since a 30px blur under a 320px object
       would smear instead of ground it. */
    max-width: 400px;
    animation: core-float 4s ease-in-out infinite;
    filter: drop-shadow(0 6px 18px rgba(230, 96, 24, 0.26));
    --color-primary: #ffffff;
    --highlight-color: #FAE9D5;
    --highlight-color-rgb: 250, 233, 213;
}
@keyframes core-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
/* 56% matches the proportion the emblem had inside the original disc.
   The -1.5% nudge is real: the glyph's own optical centre sits low in
   its viewBox, so centring the box leaves it looking dropped. */
.core-emblem {
    position: absolute; left: 50%; top: 48.5%;
    transform: translate(-50%, -50%);
    width: 66%; height: auto;
    overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
    .core { animation: none; }
}

/* --- security: the vault --------------------------------------
   Two layers, so only the handle moves: security-hero-plate.png is the
   door with the handle removed, and security-handle.png is the handle
   cut out of the original render (same artwork, so the ceramic and the
   lighting match). Two beats: the door sits slightly ajar and swings
   shut — a 3D rotateY on the figure, hinged on its left edge, which
   carries the handle with it — and then the handle alone spins up fast
   and brakes to a stop as the bolts seat. The glow only comes up once
   the wheel is still. The timings are a chain; moving one beat moves
   the delays after it. */
.vault { transform-origin: 6% 50%; animation: vault-swing 1.5s cubic-bezier(0.45, 0, 0.2, 1) both; }
.hero-art .vault-handle {
    position: absolute; left: 50%; top: 50%;
    width: 29%; height: auto; max-width: none;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    animation: wheel-turn 1.6s cubic-bezier(0.12, 0.72, 0.15, 1) 1.05s both;
}
/* Sits over the handle: dark while it is still turning, a flash as the
   bolts seat, then a slow breath so the door reads live-locked rather
   than inert. Wider than the handle (29%) so the falloff spills past
   the rim onto the door and reads as light coming off the wheel.
   Deliberately not mix-blend-mode: screen — screen only lifts dark
   pixels, so over the pale ceramic handle it cancelled out and the
   glow appeared to sit behind the wheel. */
.vault-glow {
    position: absolute; left: 50%; top: 50%; z-index: 3;
    width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255, 208, 146, 0.62) 0%,
        rgba(255, 168, 74, 0.34) 42%,
        rgba(255, 140, 38, 0) 100%);
    animation: vault-lock-flash 1.2s ease-out 2.65s both,
               vault-locked-glow 6.5s ease-in-out 3.85s infinite;
}

/* --- privacy: the aperture ------------------------------------
   The iris sets itself on arrival — a 45deg turn, which on an 8-fold
   symmetric render is exactly one blade-step, so it lands back on its
   own artwork with the lighting intact (the same trick as the vault
   handle's 60deg). After that it keeps focusing: the blades hunt by a
   degree and a half while the light through the opening swells and
   contracts with them, so the hole reads as opening and closing. The
   opening is genuinely transparent, which is what lets the warm core
   behind the image show through it. */
.iris img {
    transform-origin: 49.85% 49.95%;
    /* set once on arrival, then never stop hunting — the blades keep
       making tiny corrections, the way a lens breathes while it holds
       focus. iris-set ends at rotate(0) exactly as iris-focus starts
       from rotate(0), so the handoff is invisible. */
    animation: iris-set 2.6s cubic-bezier(0.3, 0.75, 0.25, 1) 0.3s both,
               iris-focus 7.5s ease-in-out 2.9s infinite;
}
/* Sits behind the image and shows through the transparent opening, so
   growing it makes the lit hole read as opening up. Paired with the
   blade hunt above, this is what sells the focusing. */
.iris-core {
    position: absolute; left: 49.85%; top: 49.95%; z-index: 0;
    width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255, 186, 112, 0.50) 0%,
        rgba(255, 152, 54, 0.26) 55%,
        rgba(255, 140, 38, 0) 100%);
    animation: iris-warm 1.6s ease-out 2.3s both,
               iris-breathe 7.5s ease-in-out 2.9s infinite;
}

/* Swings in from well off the mark, two damped overshoots, then rests
   at 30deg — roughly 1 o'clock, which sits better against the printed
   rose than dead north does. */
/* A damped oscillation about north (30deg). Each keyframe carries its
   own easing: the opening throw accelerates off its rest position, and
   every swing after it is ease-in-out, so the needle arrives at each
   turning point with zero velocity and glides through the reversal
   instead of snapping into it. Amplitudes decay by ~0.45 a swing
   (11, 4.8, 2.6, 1.2, 0.5deg), which is what makes the tail dissolve
   into stillness rather than stopping on a visible last move. */
@keyframes needle-seek {
    0%   { transform: translate(-50%, -50%) rotate(-32deg);   animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
    44%  { transform: translate(-50%, -50%) rotate(41deg);    animation-timing-function: ease-in-out; }
    62%  { transform: translate(-50%, -50%) rotate(25.2deg);  animation-timing-function: ease-in-out; }
    77%  { transform: translate(-50%, -50%) rotate(32.6deg);  animation-timing-function: ease-in-out; }
    88%  { transform: translate(-50%, -50%) rotate(28.8deg);  animation-timing-function: ease-in-out; }
    95%  { transform: translate(-50%, -50%) rotate(30.5deg);  animation-timing-function: ease-in-out; }
    100% { transform: translate(-50%, -50%) rotate(30deg); }
}
/* Door starts ajar — swung towards the viewer on its left hinge — and
   closes flat. `perspective()` is inside the transform because the
   figure has no transformed ancestor to inherit it from. */
@keyframes vault-swing {
    0%   { transform: perspective(1600px) rotateY(-24deg) scale(1.03); }
    100% { transform: perspective(1600px) rotateY(0deg) scale(1); }
}
/* Three quarter-turns of the wheel (270deg), spun up fast and braked to
   a dead stop as the bolts seat. One direction only — a wheel does not
   bounce back. What matters is the end, not the start: it finishes at
   0deg, so the handle comes to rest in the artwork's own orientation
   with its baked-in lighting still aligned to the door. Increase the
   travel in whole 360deg steps to add rotations without disturbing
   that landing. */
@keyframes wheel-turn {
    0%   { transform: translate(-50%, -50%) rotate(-270deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}
/* Dark while the wheel is still turning, then a flash on the stop. */
@keyframes vault-lock-flash {
    0%   { opacity: 0; }
    55%  { opacity: 0.95; }
    100% { opacity: 0.34; }
}
/* The resting state: a slow breath, never fully off. */
@keyframes vault-locked-glow {
    0%, 100% { opacity: 0.34; }
    50%      { opacity: 0.62; }
}
/* One blade-step (45deg), easing to a stop — a lens being set. */
@keyframes iris-set {
    0%   { transform: rotate(-45deg); }
    100% { transform: rotate(0deg); }
}
/* The opening warms once the blades have set. */
@keyframes iris-warm {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
/* The hunt: a degree and a half, in and out. Small enough that you
   read it as the lens working rather than as the image moving. */
@keyframes iris-focus {
    0%, 100% { transform: rotate(0deg); }
    35%      { transform: rotate(-1.5deg); }
    72%      { transform: rotate(0.9deg); }
}
/* The light through the opening swells as the blades ease open and
   contracts as they close back — same 7.5s, so they read as one move. */
@keyframes iris-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.55; }
    35%      { transform: translate(-50%, -50%) scale(1.14); opacity: 0.78; }
    72%      { transform: translate(-50%, -50%) scale(0.93); opacity: 0.42; }
}
/* Reduced motion: every part is drawn in its final, settled position —
   needle on its bearing, handle seated, iris set — nothing moving. */
@media (prefers-reduced-motion: reduce) {
    .vault, .iris img { animation: none; transform: none; }
    .compass-needle { animation: none; transform: translate(-50%, -50%) rotate(30deg); }
    /* matches the two-class base rule above, or it loses on specificity */
    .hero-art .vault-handle { animation: none; transform: translate(-50%, -50%) rotate(0deg); }
    .vault-glow { animation: none; opacity: 0.42; }
    .iris-core { animation: none; opacity: 0.55; }
}

.hero-secondary { margin-top: 16px; font-size: 0.9rem; }
.hero-secondary a { color: var(--color-secondary-text); font-weight: 600; }
.hero-secondary a:hover { color: var(--color-primary); text-decoration: underline; }

/* audience icons on the "proactive glimpse" personas */
.glimpse .persona { display: flex; align-items: center; gap: 14px; border-left: none; padding: 0; margin-bottom: 18px; }
.glimpse .persona-ico { width: 52px; height: 52px; flex: none; object-fit: contain; }
.glimpse .persona-txt { min-width: 0; }

/* value-prop card illustrations (replace the old SVG .vico) */
.vcard-illus { display: block; width: 180px; height: 180px; max-width: 100%; object-fit: contain; margin: 0 auto 12px; }

/* secure-by-design illustrations on light tiles (dark section) */
.sec-card .si-illus {
    display: flex; align-items: center; justify-content: center;
    width: 180px; height: 180px; max-width: 100%; margin: 0 auto 14px;
}
.sec-card .si-illus img { width: 100%; height: 100%; object-fit: contain; }

/* home2 ceramic card icons: security "specifics" + privacy principles */
.info-card .ic-illus {
    display: flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; margin-bottom: 14px;
}
.info-card .ic-illus img { width: 100%; height: 100%; object-fit: contain; }
.pcard .pc-illus {
    display: flex; align-items: center; justify-content: flex-start;
    width: 76px; height: 76px; margin-bottom: 4px;
}
.pcard .pc-illus img { width: 100%; height: 100%; object-fit: contain; }

/* WHY section: centered layout + illustrated "moments of change" cards */
.problem.centered .home-wrap { text-align: center; }
.problem.centered .home-wrap > h2 { max-width: none; }
.problem.centered .home-wrap > p { margin-left: auto; margin-right: auto; }
.problem.centered .moment { text-align: center; padding-top: 24px; }
.moment-illus { display: block; width: 180px; height: 180px; max-width: 100%; object-fit: contain; margin: 0 auto 6px; }

/* --- responsive --- */
@media (max-width: 880px) {
    .home2 section { padding: 68px 0; }
    .glimpse-grid { grid-template-columns: 1fr; gap: 32px; }
    .quotes { grid-template-columns: 1fr; }
    .moments { grid-template-columns: 1fr 1fr; }
    .vgrid, .sec-grid, .pgrid { grid-template-columns: 1fr; }
    .home2 .home-hero { min-height: auto; justify-content: flex-start; padding: 108px 0 60px; }
    .hero-grid, .product-hero .hero-grid { grid-template-columns: 1fr; gap: 24px; }
    /* Art above the copy once stacked. Done with order rather than by moving
       the markup, so the h1 stays first in the DOM for screen readers and SEO. */
    .hero-grid .hero-art { order: -1; }
    .hero-art { margin-top: 4px; }
    .hero-art img { max-width: 460px; }
    .radar, .hero-still { max-width: 460px; }
    /* Same halving as desktop. Needs restating because the .hero-still rule
       above shares its specificity and comes later in the file. */
    .core { max-width: 230px; }
    .hero-scroll-indicator { display: none; }
    .hero-spot-base, .hero-spot-glow { background-size: 38px 38px; }
}
@media (max-width: 640px) {
    .home-wrap { padding: 0 20px; }
    .step { grid-template-columns: 44px 1fr; gap: 16px; }
    .prog-track { left: 21px; }
    .node { width: 44px; height: 44px; }
    .vgrid { gap: 14px; }
}

/* ============================================================
   REBUILD (Milestone 3) — PRODUCT / SECURITY / PRIVACY pages
   Deep pages in the existing design language, reusing M2 parts
   (.flow, .detect, .glimpse-grid, .sec-grid, .pgrid, .vgrid,
   .persona). These blocks add what the home teasers didn't need:
   the flow "Event" entry, the compounding note, the always-on
   trio, security info cards, and long-form prose. Pages are
   wrapped in .home2 so its section padding still governs rhythm.
   ============================================================ */

/* hero kernel line (product) */
.home-hero .kernel {
    margin-top: 20px; font-size: 1.05rem; color: var(--color-text);
    max-width: 60ch; line-height: 1.55;
}
.home-hero .kernel b { font-weight: 700; }

/* shared deep-section headings */
.flow-section h2, .trio h2, .demo h2, .sec-trust h2, .practice h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800;
    letter-spacing: -0.015em; margin-top: 10px;
}

/* section backgrounds for alternating rhythm */
.trio, .sec-trust, .practice { background: var(--color-secondary-bg); }

/* --- flow: "Event" entry block above the five steps --- */
.entry { display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: center; padding: 4px 0 6px; }
.entry-node {
    justify-self: center; width: 48px; height: 48px; border-radius: 14px;
    background: var(--color-text); color: #fff; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 0 0 6px var(--color-bg-white);
}
.entry-cap {
    font-weight: 800; font-size: 0.72rem; color: var(--color-secondary-text);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 9px;
}
.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-tags span, .entry-tags a {
    font-size: 0.8rem; font-weight: 600; color: var(--color-text); background: #fff;
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-pill); padding: 6px 14px;
}
/* each event pill links to the use case that handles it */
.entry-tags a { text-decoration: none; transition: var(--transition-lift-fast), border-color 0.18s, color 0.18s; }
.entry-tags a:hover {
    color: var(--color-primary); border-color: var(--color-primary);
    box-shadow: 0 6px 16px rgba(var(--brand-color-rgb), 0.14);
    transform: translateY(-2px);
}

/* --- compounding knowledge note --- */
.compound {
    margin-top: 32px; background: var(--color-ink-dark); color: #f3efec;
    border-radius: var(--radius-panel); padding: 22px 26px;
    display: flex; gap: 15px; align-items: flex-start;
}
.compound .ci { color: #ff8a5c; flex: none; margin-top: 1px; }
.compound p { font-size: 0.98rem; line-height: 1.55; color: #d8cfc8; }
.compound b { color: #fff; font-weight: 700; }

/* --- always-on trio --- */
.always-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.always-card {
    display: block; background: #fff;
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-card); padding: 24px 22px;
}
.always-card .ac-illus { display: block; width: 180px; height: 180px; max-width: 100%; object-fit: contain; margin: 0 auto 8px; }
.always-card h4 { font-size: 1rem; }
.always-card p { font-size: 0.85rem; color: var(--color-secondary-text); margin-top: 4px; line-height: 1.45; }

/* --- long-form prose (security / privacy) --- */
.prose { max-width: 68ch; margin-top: 20px; }
.prose p { font-size: 1.05rem; color: var(--color-text); line-height: 1.65; }
.prose p + p { margin-top: 14px; }
.prose b, .prose strong { font-weight: 700; }
.prose a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* --- security info cards (certifications + data residency) --- */
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 38px; }
.info-card {
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel);
    padding: 30px 28px; background: #fff;
}
.info-card .ic-ico {
    width: 46px; height: 46px; border-radius: 12px; background: var(--color-secondary-bg);
    color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.info-card h3 { font-size: 1.2rem; font-weight: 800; }
.info-card p { color: var(--color-secondary-text); font-size: 0.98rem; margin-top: 10px; line-height: 1.6; }
.info-card p b, .info-card p strong { color: var(--color-text); font-weight: 700; }
.info-card a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.info-card a:hover { text-decoration: underline; }

/* --- "distinct from" callout (privacy principles vs legal notice) --- */
.note-callout {
    margin-top: 26px; background: var(--color-secondary-bg);
    border: 1px solid rgba(var(--brand-color-rgb), 0.15);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-card); padding: 16px 20px; max-width: 64ch;
}
.note-callout p { font-size: 0.95rem; color: var(--color-text); line-height: 1.55; }
.note-callout a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.note-callout a:hover { text-decoration: underline; }

/* --- inline "more" link (matches .sec-more / .principles .more) --- */
.deep-more { margin-top: 28px; }
.deep-more a { font-weight: 700; color: var(--color-primary); }
.deep-more a:hover { text-decoration: underline; }

/* --- responsive --- */
@media (max-width: 880px) {
    .always-bar { grid-template-columns: 1fr; }
    .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .entry { grid-template-columns: 44px 1fr; gap: 16px; }
    .entry-node { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════════
   MILESTONE 6 — About (founder bios) + Beta (application form)
   Built in the .home2 language; reuses existing tokens/components.
   ══════════════════════════════════════════════════════════════ */

/* --- About: founder bios --- */
.team h2 { font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; max-width: 20ch; margin-top: 10px; }
.team .lead { max-width: 58ch; }
.bios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.bio { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel); padding: 28px 26px; background: #fff; transition: var(--transition-lift-fast); }
.bio:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(var(--brand-color-rgb), 0.08); }
.bio-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.bio-name { font-size: 1.15rem; font-weight: 800; margin-top: 16px; letter-spacing: -0.01em; }
.bio-role { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); margin-top: 2px; }
.bio-text { color: var(--color-secondary-text); font-size: 0.95rem; line-height: 1.55; margin-top: 12px; }
.bio-li { display: inline-flex; align-items: center; margin-top: auto; padding-top: 20px; opacity: 1; transition: transform var(--transition-fast, 0.15s) ease; }
.bio-li svg { flex: none; }
.bio-li:hover { transform: translateY(-2px); }
.team-follow { margin-top: 30px; }
.team-follow a { font-weight: 700; color: var(--color-primary); }
.team-follow a:hover { text-decoration: underline; }

/* --- Beta: application form --- */
.beta-apply { background: var(--color-secondary-bg); }
.beta-apply h2 { font-size: clamp(1.7rem, 3.4vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; max-width: 20ch; margin-top: 10px; }
.form-panel {
    margin-top: 34px; max-width: 560px; background: #fff;
    border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius-panel);
    padding: 34px 32px; box-shadow: 0 12px 40px rgba(var(--brand-color-rgb), 0.06);
}
.form-panel .form-group label .opt { color: var(--color-secondary-text); font-weight: 500; }
.form-panel .modal-submit { margin-top: 4px; }

/* --- Beta: "what happens after" (matches .belief type scale, on white) --- */
.beta-after h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; font-weight: 800; max-width: 18ch; letter-spacing: -0.015em; margin-top: 14px; }
.beta-after p { max-width: 60ch; }
.beta-after p + p { margin-top: 12px; }

/* --- single centered proof quote --- */
.quotes-single { grid-template-columns: 1fr; max-width: 640px; }

/* --- responsive --- */
@media (max-width: 880px) {
    .bios { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 640px) {
    .form-panel { padding: 26px 22px; }
}