/* =========================================
   XAFE — Cognitive Data Privacy Platform
   Apple/Entiovi-inspired · Cinematic scroll
   Primary: #b10f1a
   ========================================= */

:root {
    /* Brand */
    --primary: #b10f1a;
    --primary-soft: #b10f1a;   /* Alias kept = pure primary */
    --primary-deep: #7a0a12;
    --primary-glow: rgba(177, 15, 26, 0.45);
    --primary-dim: rgba(177, 15, 26, 0.10);

    /* Pure black / pure white — bold corporate contrast */
    --bg-dark: #000000;
    --bg-dark-2: #050507;
    --bg-dark-3: #0a0a0c;
    --text-on-dark: #ffffff;
    --text-on-dark-dim: rgba(255, 255, 255, 0.65);
    --text-on-dark-mute: rgba(255, 255, 255, 0.42);
    --line-on-dark: rgba(255, 255, 255, 0.10);
    --line-on-dark-strong: rgba(255, 255, 255, 0.20);

    --bg-light: #ffffff;
    --bg-light-2: #f5f5f7;
    --bg-light-3: #ebebed;
    --text-on-light: #000000;
    --text-on-light-dim: rgba(0, 0, 0, 0.62);
    --text-on-light-mute: rgba(0, 0, 0, 0.40);
    --line-on-light: rgba(0, 0, 0, 0.08);
    --line-on-light-strong: rgba(0, 0, 0, 0.18);

    /* Legacy aliases */
    --bg-deep: #000000;
    --bg-0: #000000;
    --bg-1: #050507;
    --bg-2: #0a0a0c;
    --bg-3: #14141a;
    --bg-4: #1c1c22;

    --font-sans: 'Manrope', sans-serif;
    --font-display: 'Manrope', sans-serif;
    --font-accent: 'Manrope', sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --nav-h: 96px;
    --maxw: clamp(1280px, 85vw, 1800px);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}
body { overflow-x: clip; }

body {
    font-family: var(--font-sans);
    background: #000000;
    color: var(--text-on-dark);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: clip;
    font-weight: 400;
    letter-spacing: -0.005em;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { border: none; background: none; color: inherit; font-family: inherit; cursor: pointer; }
img, svg { max-width: 100%; display: block; }

em {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: inherit;
}
.dark-section em,
.light-section em { color: var(--primary); }

.container {
    max-width: min(var(--maxw), 100%);
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 760px) {
    .container { padding: 0 20px; }
}

/* =========================================
   SECTION THEMES — White ↔ Light off-white ↔ Black
   Bold corporate contrast with subtle alternation
   ========================================= */
.dark-section {
    background: #000000;
    color: var(--text-on-dark);
    position: relative;
}
.dark-section em { color: var(--primary); }

.light-section {
    background: #ffffff;
    color: var(--text-on-light);
    position: relative;
}
.light-section em { color: var(--primary); }

/* Privacy by Design — off-white tone for visual rhythm:
   Overview (white) → Privacy by Design (light) → Why Xafe (white) */
.capabilities.light-section { background: #f5f5f7; }

/* Hero is now light — nav should auto-detect via .hero having light feel.
   Add a synthetic light-section hint on the hero so the nav switches. */
.hero { /* the nav script reads parent section's class — handled in JS */ }

/* =========================================
   SCROLL PROGRESS BAR
   ========================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--primary);
    z-index: 9999;
    width: 0%;
    box-shadow: 0 0 14px var(--primary-glow);
    transition: width 0.05s linear;
}

/* =========================================
   LOADER — Simple, with logo
   ========================================= */
.loader {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.loader.done { opacity: 0; visibility: hidden; }

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

.loader-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 28px;
    animation: loaderPulse 1.4s var(--ease) infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

.loader-bar {
    width: 220px;
    height: 1px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
    margin: 0 auto;
}
.loader-bar-fill {
    height: 100%;
    background: var(--primary);
    animation: loaderFill 1.2s var(--ease-cinema) forwards;
}
@keyframes loaderFill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* =========================================
   NAVIGATION
   ========================================= */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 0;
    transition: padding 0.4s var(--ease), background 0.5s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease);
    background: transparent;
    border-bottom: 1px solid transparent;
}
.nav.scrolled {
    padding: 6px 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom-color: var(--line-on-dark);
}
.nav.scrolled.nav-on-light {
    background: rgba(255, 255, 255, 0.82);
    border-bottom-color: var(--line-on-light);
}
.nav.hidden { transform: translateY(-100%); }

.nav-inner {
    max-width: min(var(--maxw), 100%);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    position: relative;
    transition: opacity 0.3s var(--ease);
}
.nav-logo:hover { opacity: 0.85; }

/* Brand logo image — two variants swap based on section theme */
.brand-logo {
    display: block;
    height: 72px;
    width: auto;
    max-width: none;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.35s var(--ease);
    /* Pull flush left so any baked-in transparent padding in the PNG
       doesn't make the logo look indented. */
    margin-left: -8px;
}

/* Stack the two variants so swap is seamless (no layout shift) */
.nav-logo .brand-logo--on-light {
    position: absolute;
    top: 0;
    left: 0;
    height: 72px;
    width: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

/* When nav is on a light section, fade in the dark logo, fade out the white one */
.nav.nav-on-light .nav-logo .brand-logo--on-dark  { opacity: 0; }
.nav.nav-on-light .nav-logo .brand-logo--on-light { opacity: 1; }

.nav-links { display: flex; list-style: none; gap: 2px; align-items: center; }

.nav-links a {
    padding: 8px 14px;
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    transition: color 0.3s var(--ease);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-on-light .nav-links a { color: rgba(0,0,0,0.65); }
.nav-links a:hover { color: #ffffff; }
.nav-on-light .nav-links a:hover { color: #000000; }

.nav-links a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 1px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.caret { font-size: 0.6rem; opacity: 0.6; }

.nav-dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--line-on-dark);
    border-radius: 14px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s var(--ease);
    display: flex;
    flex-direction: column;
}
.nav-on-light .dropdown-menu {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--line-on-light);
}
.dropdown-menu a {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.75);
}
.nav-on-light .dropdown-menu a { color: var(--text-on-light-dim); }
.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover { background: var(--primary-dim); color: #ffffff; }
.nav-on-light .dropdown-menu a:hover { color: var(--primary); }
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-cta {
    padding: 10px 20px;
    background: #ffffff;
    color: #000000;
    border-radius: 999px;
    font-size: 0.83rem;
    font-weight: 600;
    transition: all 0.4s var(--ease);
}
.nav-on-light .nav-cta {
    background: #000000;
    color: #ffffff;
}
.nav-cta:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--primary-glow);
}

.nav-burger {
    display: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 1001;
}
.nav-burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #ffffff;
    transition: all 0.35s var(--ease);
}
.nav-on-light .nav-burger span { background: #000000; }
.nav-burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu open — burger bars must be visible on dark overlay regardless of nav theme */
body.menu-open .nav-burger span,
body.menu-open .nav-on-light .nav-burger span {
    background: #ffffff;
}

@media (max-width: 1080px) {
    .nav-links, .nav-cta { display: none; }
    .nav-burger { display: flex; }
}

/* =========================================
   REVEAL ANIMATIONS
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s var(--ease-cinema), transform 1s var(--ease-cinema);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Directional slide variants */
.reveal--from-left  { transform: translateX(-80px); }
.reveal--from-right { transform: translateX(80px); }
.reveal--from-left.in,
.reveal--from-right.in { transform: translateX(0); }

.reveal-line {
    display: block;
    overflow: hidden;
    /* Pad enough room so descenders (g, y, p, j, comma) don't clip,
       compensated by negative margin so layout doesn't shift. */
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
}
.reveal-line span {
    display: inline-block;
    transform: translateY(120%);
    transition: transform 1.1s var(--ease-cinema);
    /* Match the same compensation inside so the visible glyph
       lines up at rest without being clipped at the top either. */
    padding-top: 0.02em;
}
.reveal-line.in span { transform: translateY(0); }
.reveal-line:nth-child(2) span { transition-delay: 0.10s; }
.reveal-line:nth-child(3) span { transition-delay: 0.20s; }
.reveal-line:nth-child(4) span { transition-delay: 0.30s; }

.reveal-word {
    display: inline-block;
    opacity: 0.18;
    transition: opacity 0.5s var(--ease), color 0.5s var(--ease);
}
.reveal-word.in { opacity: 1; }

/* =========================================
   BUTTONS
   ========================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    transition: all 0.45s var(--ease);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    letter-spacing: -0.005em;
}
.btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 36px var(--primary-glow);
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s var(--ease);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px var(--primary-glow);
    background: var(--primary);
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-ghost {
    background: transparent;
    color: #ffffff;
    border-color: var(--line-on-dark-strong);
}
.btn-ghost:hover {
    background: rgba(255,255,255,0.06);
    border-color: #ffffff;
    transform: translateY(-3px);
}
.light-section .btn-ghost {
    color: #000000;
    border-color: var(--line-on-light-strong);
}
.light-section .btn-ghost:hover {
    background: rgba(0,0,0,0.04);
    border-color: #000000;
}

.btn-arrow { transition: transform 0.4s var(--ease); display: inline-block; font-size: 1.05rem; }
.btn:hover .btn-arrow { transform: translateX(6px); }

/* =========================================
   HERO — Refined professional
   ========================================= */
.hero {
    position: relative;
    min-height: auto;
    aspect-ratio: 21 / 9;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--nav-h) 0 12vh;
    overflow: hidden;
    background: #faf8f4;
    color: #0a0a0a;
    isolation: isolate;
}

/* Bottom blend — soft fade into the white next section */
.hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 60%,
        #ffffff 100%);
    z-index: 2;
    pointer-events: none;
}

/* Entiovi-style light hero — off-white cream base, transitions cleanly into the next white section */

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* Soft white overlay above the video so hero text stays legible */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 1;
}

/* Subtle grid — faint dark lines on cream */
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 25%, transparent 88%);
    opacity: 0.85;
}

/* Glow disabled */
.hero-glow { display: none; }

/* Overlay — light cream wash, video stays visible */
.hero-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(250, 248, 244, 0.32) 0%, rgba(250, 248, 244, 0.38) 50%, rgba(250, 248, 244, 0.45) 100%);
    z-index: 1;
}

/* Corner frames — dark on light */
.hero-frame {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(0,0,0,0.18);
    z-index: 1;
    pointer-events: none;
}
.hero-frame.top-left     { top: calc(var(--nav-h) + 8px); left: 32px;  border-right: none; border-bottom: none; }
.hero-frame.top-right    { top: calc(var(--nav-h) + 8px); right: 32px; border-left: none;  border-bottom: none; }
.hero-frame.bottom-left  { display: none; }
.hero-frame.bottom-right { display: none; }

.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    will-change: transform, opacity;
    display: flex;
    justify-content: center;
    text-align: center;
}
.hero-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 980px;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 18px;
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.85);
    margin-bottom: 36px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
    animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin-bottom: 28px;
    color: #0a0a0a;
    max-width: 100%;
    text-shadow: 0 1px 24px rgba(255,255,255,0.6), 0 2px 6px rgba(255,255,255,0.4);
}
.hero-line { display: block; }
.hero-line em {
    color: var(--primary);
    font-weight: 600;
}

.hero-subtitle {
    font-size: clamp(1.15rem, 1.55vw, 1.45rem);
    line-height: 1.5;
    color: rgba(0,0,0,0.82);
    max-width: 960px;
    margin: 0 auto 40px;
    font-weight: 500;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 14px rgba(255,255,255,0.55);
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
    justify-content: center;
}

/* Trust indicators — professional badge row */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hero-trust-label {
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    font-weight: 600;
    padding-right: 18px;
    border-right: 1px solid rgba(0,0,0,0.12);
}
.hero-trust-list {
    list-style: none;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}
.hero-trust-list li {
    font-size: 0.84rem;
    color: rgba(0,0,0,0.7);
    font-weight: 500;
    letter-spacing: 0.005em;
    position: relative;
    transition: color 0.3s var(--ease);
}
.hero-trust-list li:hover { color: var(--primary); }
.hero-trust-list li:last-child { color: rgba(0,0,0,0.45); }

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    z-index: 3;
    font-weight: 500;
}
.scroll-line {
    width: 1px;
    height: 42px;
    background: rgba(255,255,255,0.14);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--primary);
    animation: scrollLine 2.2s var(--ease-cinema) infinite;
}
@keyframes scrollLine {
    0% { top: -50%; }
    100% { top: 100%; }
}

@media (max-width: 760px) {
    .hero-frame { width: 24px; height: 24px; }
    .hero-frame.top-left, .hero-frame.top-right { top: calc(var(--nav-h) + 4px); }
    .hero-frame.top-left, .hero-frame.bottom-left { left: 20px; }
    .hero-frame.top-right, .hero-frame.bottom-right { right: 20px; }
    .hero-frame.bottom-left, .hero-frame.bottom-right { bottom: 20px; }
    .hero-trust { gap: 12px; }
    .hero-trust-label { padding-right: 12px; }
    .hero-trust-list { gap: 14px; }
}

/* =========================================
   HERO VISUAL — Privacy Engine Console
   ========================================= */
/* Full-bleed hero video — covers the entire hero bg */
.hero-bg .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    z-index: 0;
    opacity: 1;
}

.hv-panel {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: #0a0a0a;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.25), 0 16px 32px -16px rgba(0,0,0,0.15);
    animation: panelFloat 7s ease-in-out infinite;
}

@keyframes panelFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* (Glow removed) */

/* Header */
.hv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
}
.hv-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hv-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hv-pill {
    padding: 4px 12px;
    border: 1px solid rgba(177,15,26,0.45);
    background: rgba(177,15,26,0.10);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-feature-settings: 'tnum';
}
.hv-status-dot {
    width: 7px;
    height: 7px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--primary);
    animation: dotPulse 1.6s ease-in-out infinite;
}
.hv-title {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.hv-version {
    color: rgba(255,255,255,0.4);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    font-family: var(--font-sans);
}

/* === Main Graph: Privacy vs Utility === */
.hv-graph {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    padding: 4px 4px 8px;
    overflow: visible;
}
.hv-graph-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.hv-graph-title {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.hv-graph-legend {
    display: flex;
    gap: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 0.66rem;
    font-weight: 500;
}
.hv-graph-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hv-graph-legend .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.hv-graph-legend .dot-red   { background: var(--primary); box-shadow: 0 0 6px var(--primary); }
.hv-graph-legend .dot-white { background: #ffffff; box-shadow: 0 0 6px rgba(255,255,255,0.6); }

.hv-graph-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* =========================================
   NOISE ENGINE — 3-channel waveform + histogram
   ========================================= */
.hv-noise-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.hv-legend-pill {
    padding: 3px 10px;
    border: 1px solid rgba(177,15,26,0.45);
    background: rgba(177,15,26,0.08);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-feature-settings: 'tnum';
}

.noise-row-label {
    fill: rgba(255,255,255,0.55);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}
.noise-row-label-soft {
    fill: rgba(255,255,255,0.38);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
    font-feature-settings: 'tnum';
}

/* Lines — draw in then continuously march/breathe */
.noise-line {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}
.noise-line.raw {
    animation:
        noiseDraw 2s var(--ease-cinema) 0.4s forwards,
        rawFlow 6s linear 2.6s infinite;
}
.noise-line.noise {
    animation:
        noiseDraw 2.2s var(--ease-cinema) 0.7s forwards,
        noiseMarch 1.4s linear 3s infinite,
        noiseGlow 3s ease-in-out 3s infinite;
    stroke-dasharray: 6 4;
}
.noise-line.output {
    animation:
        noiseDraw 2.6s var(--ease-cinema) 1.1s forwards,
        outputBreath 4s ease-in-out 4s infinite;
}
@keyframes noiseDraw { to { stroke-dashoffset: 0; } }
@keyframes rawFlow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -120; }
}
@keyframes noiseMarch {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -20; }
}
@keyframes noiseGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(177,15,26,0.4)); }
    50%      { filter: drop-shadow(0 0 8px rgba(177,15,26,0.9)); }
}
@keyframes outputBreath {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(177,15,26,0.3)); }
    50%      { filter: drop-shadow(0 0 10px rgba(177,15,26,0.7)); }
}

/* + and = symbols between rows */
.noise-sym {
    opacity: 0;
    animation: fadeIn 0.6s var(--ease) 2s forwards;
}

/* Output cursor pulses */
.noise-cursor {
    opacity: 0;
    animation: fadeIn 0.5s var(--ease) 3.5s forwards;
    filter: drop-shadow(0 0 8px var(--primary));
}

/* Histogram bins — animate height pulse */
.noise-histo .bin {
    fill: rgba(177,15,26,0.55);
    transform-origin: bottom;
    transform: scaleY(0);
    animation:
        binRise 0.6s var(--ease-cinema) forwards,
        binBreath 3s ease-in-out infinite;
}
.noise-histo .bin.tall { fill: var(--primary); }
.noise-histo .bin:nth-child(2)  { animation-delay: 2.0s, 3.6s; }
.noise-histo .bin:nth-child(3)  { animation-delay: 2.1s, 3.7s; }
.noise-histo .bin:nth-child(4)  { animation-delay: 2.2s, 3.8s; }
.noise-histo .bin:nth-child(5)  { animation-delay: 2.3s, 3.9s; }
.noise-histo .bin:nth-child(6)  { animation-delay: 2.4s, 4.0s; }
.noise-histo .bin:nth-child(7)  { animation-delay: 2.5s, 4.1s; }
.noise-histo .bin:nth-child(8)  { animation-delay: 2.6s, 4.2s; }
.noise-histo .bin:nth-child(9)  { animation-delay: 2.7s, 4.3s; }
.noise-histo .bin:nth-child(10) { animation-delay: 2.8s, 4.4s; }
.noise-histo .bin:nth-child(11) { animation-delay: 2.9s, 4.5s; }
.noise-histo .bin:nth-child(12) { animation-delay: 3.0s, 4.6s; }
.noise-histo .bin:nth-child(13) { animation-delay: 3.1s, 4.7s; }

@keyframes binRise { to { transform: scaleY(1); } }
@keyframes binBreath {
    0%, 100% { filter: brightness(0.85); }
    50%      { filter: brightness(1.4); }
}

/* Slider on histogram — sweeps left-right to indicate noise scanning */
.noise-slider,
.noise-slider-dot {
    opacity: 0;
    animation:
        fadeIn 0.5s var(--ease) 3.6s forwards,
        sliderSweep 5s ease-in-out 4.2s infinite;
    transform-origin: center;
}
@keyframes sliderSweep {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-70px); }
}

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

/* === Block heads (shared by both Noise + Stream blocks) === */
.hv-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}
.hv-block-title {
    color: rgba(255,255,255,0.78);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.hv-block-meta {
    color: rgba(255,255,255,0.55);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-feature-settings: 'tnum';
}
.hv-block-meta b {
    color: #ffffff;
    font-weight: 700;
    margin-right: 2px;
}

/* === Live Stream — real-time throughput chart === */
.hv-stream {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 0;
    overflow: hidden;
}
.hv-stream-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.hv-stream-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hv-live-dot {
    width: 7px;
    height: 7px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
    animation: dotPulse 1.4s ease-in-out infinite;
}
.hv-stream-label {
    color: rgba(255,255,255,0.85);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.hv-stream-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}
.hv-stream-meta b {
    color: #ffffff;
    font-weight: 600;
    font-feature-settings: 'tnum';
    margin-left: 4px;
}
.hv-stream-metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.m-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.m-dot.m-red   { background: var(--primary); box-shadow: 0 0 6px var(--primary); }
.m-dot.m-white { background: #ffffff; box-shadow: 0 0 6px rgba(255,255,255,0.5); }

/* Stream chart SVG */
.hv-stream-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Line shimmer/breath animations */
.hv-stream-lineA {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation:
        streamDraw 2.2s var(--ease-cinema) 0.4s forwards,
        streamGlow 4s ease-in-out 2.6s infinite;
    filter: drop-shadow(0 0 4px rgba(177,15,26,0.5));
}
.hv-stream-lineB {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: streamDraw 2.4s var(--ease-cinema) 0.7s forwards;
}
.hv-stream-areaA,
.hv-stream-areaB {
    opacity: 0;
    animation: fadeIn 0.8s var(--ease) 1.6s forwards;
}
@keyframes streamDraw { to { stroke-dashoffset: 0; } }
@keyframes streamGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(177,15,26,0.3)); }
    50%      { filter: drop-shadow(0 0 10px rgba(177,15,26,0.7)); }
}

/* Anomaly markers blink */
.hv-anomalies .anom {
    opacity: 0;
    animation: anomBlink 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 4px var(--primary));
}
.hv-anomalies .anom:nth-child(1) { animation-delay: 2.0s; }
.hv-anomalies .anom:nth-child(2) { animation-delay: 2.4s; }
.hv-anomalies .anom:nth-child(3) { animation-delay: 2.8s; }
@keyframes anomBlink {
    0%, 100% { opacity: 0.4; transform: scale(1); transform-origin: center; }
    50%      { opacity: 1;   transform: scale(1.6); }
}

.hv-cursor {
    opacity: 0;
    animation: fadeIn 0.5s var(--ease) 2.6s forwards;
}

/* Stream foot — live metric inline strip */
.hv-stream-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.66rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    letter-spacing: 0.04em;
}
.hv-stream-foot b {
    color: var(--primary);
    font-weight: 700;
    margin-left: 4px;
    font-feature-settings: 'tnum';
}

@media (max-width: 1080px) {
    .hv-stream-meta { display: none; }
}

/* Footer stats */
.hv-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    position: relative;
    z-index: 1;
}
.hv-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hv-stat-num {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-feature-settings: 'tnum';
    animation: statShimmer 4s ease-in-out infinite;
}
.hv-stat:nth-child(2) .hv-stat-num { animation-delay: 0.6s; }
.hv-stat:nth-child(3) .hv-stat-num { animation-delay: 1.2s; }
@keyframes statShimmer {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 12px rgba(177,15,26,0.4); }
}
.hv-stat-num i {
    color: var(--primary);
    font-style: normal;
    font-size: 0.75em;
    margin-left: 1px;
}
.hv-stat-label {
    color: rgba(255,255,255,0.42);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Hero responsive */
@media (max-width: 1080px) {
    .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { max-width: 460px; margin: 0 auto; }
    .hero-title { font-size: clamp(2rem, 6vw, 3.6rem); max-width: 100%; }
}
@media (max-width: 600px) {
    .hero-visual { display: none; }
}

/* =========================================
   MARQUEE
   ========================================= */
.marquee {
    padding: 26px 0;
    background: var(--bg-dark-2);
    border-top: 1px solid var(--line-on-dark);
    border-bottom: 1px solid var(--line-on-dark);
    overflow: hidden;
    position: relative;
}
.marquee-track {
    display: flex;
    gap: 44px;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    color: rgba(255,255,255,0.6);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.marquee-track span:not(.marquee-dot) { flex-shrink: 0; }
.marquee-dot { color: var(--primary); flex-shrink: 0; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================================
   COMMON SECTION ELEMENTS
   ========================================= */
section { position: relative; }

.section-head { margin-bottom: 40px; max-width: 980px; }

.section-tag {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 600;
}
.section-tag.light { color: var(--primary); }

.section-title {
    font-size: clamp(2.2rem, 5.2vw, 4.6rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.038em;
}
.light-section .section-title { color: #000000; }
.dark-section  .section-title { color: #ffffff; }

.section-sub {
    margin-top: 28px;
    font-size: 1.05rem;
    max-width: 720px;
    line-height: 1.55;
}
.light-section .section-sub { color: var(--text-on-light-dim); }
.dark-section  .section-sub { color: var(--text-on-dark-dim); }

/* =========================================
   INTRO / OVERVIEW — text left, animated chart right
   ========================================= */
.intro {
    padding: 40px 0 40px;
    position: relative;
    background: #ffffff;
}
/* Hero fades into pure white at its bottom — intro starts in pure white, no top strip needed */
.intro > .container,
.intro > * { position: relative; z-index: 1; }

.intro-main {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* Left column: tag + headline + body + keypoints */
.intro-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.intro-text .section-tag { margin-bottom: 18px; }

.intro-headline {
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: #000000;
    margin-bottom: 26px;
}
.intro-headline em { color: var(--primary); font-style: normal; font-weight: 600; }

.intro-body {
    font-size: 1.04rem;
    color: var(--text-on-light-dim);
    line-height: 1.6;
    margin-bottom: 32px;
}

.intro-keypoints {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.intro-keypoints li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--line-on-light);
    font-size: 0.96rem;
    font-weight: 500;
    color: #000000;
    letter-spacing: -0.005em;
}
.intro-keypoints li:last-child { border-bottom: 1px solid var(--line-on-light); }
.intro-keypoints .kp-num {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
    font-size: 0.88rem;
    min-width: 26px;
}

/* Right column: chart — no background card */
.intro-chart {
    margin: 0;
    padding: 0;
    position: relative;
}
.intro-chart-title {
    display: block;
    color: #0a0a0a;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    text-align: center;
}

.trade-off-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Chart on white bg — dark/black ink */
.chart-grid line {
    stroke: rgba(0, 0, 0, 0.08);
}
.chart-axis-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    fill: rgba(0, 0, 0, 0.55);
}
.chart-tick {
    font-family: var(--font-sans);
    fill: rgba(0, 0, 0, 0.55);
}
.chart-legend rect {
    fill: rgba(255, 255, 255, 0.85);
    stroke: rgba(0, 0, 0, 0.12);
    stroke-width: 1;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.06));
}
.chart-legend text { fill: #0a0a0a; }

/* Curve drawing animation — slowed for a deliberate, cinematic feel
   so the trade-off relationship is clearly read by the viewer */
.chart-curve {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 3.2s var(--ease-cinema);
}
.intro-chart.in .chart-curve.privacy { stroke-dashoffset: 0; transition-delay: 0.5s; }
.intro-chart.in .chart-curve.utility { stroke-dashoffset: 0; transition-delay: 1.0s; }

/* Crossover dot — appears after both curves finish drawing */
.chart-cross {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.8s var(--ease) 4.2s;
    filter: drop-shadow(0 0 6px rgba(177,15,26,0.6));
}
.intro-chart.in .chart-cross { opacity: 1; }

/* Legend, axis labels and ticks ease in after curves begin */
.chart-legend,
.chart-axis-label,
.chart-tick text {
    opacity: 0;
    transition: opacity 1s var(--ease) 3.6s;
}
.intro-chart.in .chart-legend,
.intro-chart.in .chart-axis-label,
.intro-chart.in .chart-tick text { opacity: 1; }

/* Grid fades in first, setting the stage */
.chart-grid line {
    opacity: 0;
    transition: opacity 0.9s var(--ease) 0.2s;
}
.intro-chart.in .chart-grid line { opacity: 1; }

/* Slower crossover dot pulse for a calmer feel */
.chart-cross animate { }

@media (max-width: 960px) {
    .intro-main { grid-template-columns: 1fr; gap: 50px; }
    .intro-headline { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}

.intro-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.intro-card {
    padding: 44px 36px 50px;
    border: 1px solid var(--line-on-light);
    border-radius: 22px;
    background: #ffffff;
    transition: all 0.6s var(--ease);
    position: relative;
    overflow: hidden;
}
.intro-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at center top, var(--primary-dim), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}
.intro-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 30px 60px -20px rgba(177,15,26,0.18);
}
.intro-card:hover::before { opacity: 1; }
.intro-card-num {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 70px;
    font-weight: 600;
}
.intro-card h3 {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: #000000;
}
.intro-card p {
    color: var(--text-on-light-dim);
    line-height: 1.55;
    font-size: 0.98rem;
}

@media (max-width: 960px) {
    .intro-grid { grid-template-columns: 1fr; gap: 30px; }
    .intro-cards { grid-template-columns: 1fr; }
}

/* Statement section removed (was: Why Differential Privacy) */

/* =========================================
   CAPABILITIES — PINNED SCROLL SECTION
   Cinematic 5-step content cycling
   ========================================= */
.capabilities {
    position: relative;
    overflow: visible;
}

.capabilities-track {
    height: 400vh; /* 4 panels × 100vh */
    position: relative;
}

.capabilities-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: calc(var(--nav-h) + 4px) 0 24px;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 80px;
    width: 100%;
    align-items: center;
}

.capabilities-left {
    display: flex;
    flex-direction: column;
}

.capabilities-title {
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.036em;
    line-height: 1.08;
    color: #000000;
    margin-bottom: 18px;
}
.capabilities-title em { color: var(--primary); }

.capabilities-intro {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-on-light-dim);
    max-width: 440px;
    margin-bottom: 28px;
}

.capabilities-progress {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 14px;
}
.cap-current {
    font-size: 2.4rem;
    line-height: 1;
    color: #000000;
    transition: opacity 0.4s var(--ease);
}
.cap-divider { font-size: 1.25rem; color: var(--text-on-light-mute); }
.cap-total { font-size: 1.25rem; color: var(--text-on-light-mute); }

.capabilities-progress-bar {
    width: 280px;
    height: 2px;
    background: var(--line-on-light);
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    max-width: none;
    align-self: flex-start;
    display: block;
}
.cap-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary));
    transform: none;
    transition: width 0.6s var(--ease);
    box-shadow: 0 0 12px var(--primary-glow);
}
#capBarFill { height: 100%; transform: none !important; width: 0%; transition: width 0.6s var(--ease); }

.capabilities-nav { margin-top: 8px; }
.cap-label {
    font-size: 0.92rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-on-light-dim);
    font-weight: 500;
    transition: color 0.4s var(--ease);
}

/* Right panel area — grid keeps visual flexible while meta gets its natural height */
.capabilities-right {
    position: relative;
    height: clamp(440px, 72vh, 640px);
}

.cap-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 24px;
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    transition: opacity 0.7s var(--ease-cinema), transform 0.9s var(--ease-cinema);
    pointer-events: none;
}
.cap-panel.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.cap-visual {
    /* grid 1fr handles the size; min-height: 0 lets it shrink when needed */
    min-height: 0;
    height: 100%;
    border-radius: 24px;
    background: #000000;
    border: 1px solid var(--line-on-light);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18);
}

.cap-meta { margin-top: 0; }
.cap-num {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 14px;
}
.cap-meta h3 {
    font-size: clamp(1.4rem, 2.1vw, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.18;
}
.cap-meta p {
    color: var(--text-on-light-dim);
    font-size: 0.96rem;
    line-height: 1.5;
    max-width: 580px;
    margin-bottom: 14px;
}

.cap-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #000000;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--line-on-light-strong);
    transition: all 0.4s var(--ease);
}
.cap-link span {
    color: var(--primary);
    transition: transform 0.4s var(--ease);
    display: inline-block;
}
.cap-link:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.cap-link:hover span { transform: translateX(6px); }

@media (max-width: 1080px) {
    .capabilities-track { height: auto; }
    .capabilities-sticky { position: relative; height: auto; padding: 60px 0; overflow: visible; }
    .capabilities-grid { grid-template-columns: 1fr; gap: 30px; }

    /* Horizontal swipe slider — 4 cap-panels in a row, scroll-snap centered */
    .capabilities-right {
        height: auto;
        display: flex;
        flex-direction: row;
        gap: 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 4px 0 22px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .capabilities-right::-webkit-scrollbar { display: none; }

    .cap-panel {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    .cap-visual {
        aspect-ratio: 4 / 3;
        min-height: 0;
        height: auto;
        width: 100%;
    }
    .graph-card { inset: 14px; padding: 14px; }

    /* Slider dot indicators below */
    .capabilities-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 6px;
    }
    .cap-dot {
        width: 7px; height: 7px;
        border-radius: 50%;
        background: rgba(0,0,0,0.2);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
    }
    .cap-dot.is-active {
        background: var(--primary);
        width: 22px;
        border-radius: 999px;
    }
}
@media (min-width: 1081px) {
    .capabilities-dots { display: none; }
}

/* =========================================
   GRAPH CARDS — Algorithm-themed data visuals
   Each panel shows a real graph related to a
   xafe.ai algorithm: Obfuscation, Anonymization,
   Privatization, Generalization.
   ========================================= */
.cap-visual { padding: 18px; }

.graph-card {
    position: absolute;
    inset: 18px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    padding: 18px 20px;
    background: #000000;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
}

.graph-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.graph-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid rgba(177,15,26,0.45);
    border-radius: 999px;
    color: #b10f1a;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(177,15,26,0.10);
}
.graph-meta {
    color: rgba(255,255,255,0.55);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-feature-settings: 'tnum';
}

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

/* === Shared draw animations === */
.graph-line,
.graph-noise-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2.6s var(--ease-cinema);
}
.cap-panel.active .graph-line,
.cap-panel.active .graph-noise-line { stroke-dashoffset: 0; }
.cap-panel.active .graph-line.utility { transition-delay: 0.4s; }

/* Continuous marching dash on the noise envelope curve (after initial draw) */
.cap-panel.active .graph-noise-line {
    stroke-dasharray: 3 3;
    animation: noiseLineMarch 1.6s linear infinite, noiseLineGlow 3s ease-in-out infinite;
    animation-delay: 3s, 3s;
}
@keyframes noiseLineMarch {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -24; }
}
@keyframes noiseLineGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); }
    50%      { filter: drop-shadow(0 0 8px rgba(255,255,255,0.85)); }
}

/* Bars rising — initial draw + continuous noise wobble for DP panel */
.graph-bars-true rect,
.graph-bars-noisy rect {
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1.2s var(--ease-cinema);
}
.cap-panel.active .graph-bars-true rect { transform: scaleY(1); }
.cap-panel.active .graph-bars-noisy rect { transform: scaleY(1); transition-delay: 0.25s; }
.cap-panel.active .graph-bars-noisy rect:nth-child(2n) { transition-delay: 0.35s; }
.cap-panel.active .graph-bars-noisy rect:nth-child(3n) { transition-delay: 0.45s; }

/* Continuous noise re-application animation on noisy bars
   (only after initial rise — kicks in via animation-delay) */
.cap-panel.active .graph-bars-noisy rect {
    animation: barNoiseWobble 3.2s ease-in-out infinite;
    animation-delay: 1.8s;
}
.cap-panel.active .graph-bars-noisy rect:nth-child(2)  { animation-delay: 1.9s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(3)  { animation-delay: 2.0s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(4)  { animation-delay: 2.1s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(5)  { animation-delay: 2.2s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(6)  { animation-delay: 2.3s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(7)  { animation-delay: 2.4s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(8)  { animation-delay: 2.5s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(9)  { animation-delay: 2.6s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(10) { animation-delay: 2.7s;  }
.cap-panel.active .graph-bars-noisy rect:nth-child(11) { animation-delay: 2.8s;  }
@keyframes barNoiseWobble {
    0%, 100% { transform: scaleY(1)    translateY(0);    filter: brightness(1); }
    25%      { transform: scaleY(1.08) translateY(-2px); filter: brightness(1.25); }
    50%      { transform: scaleY(0.94) translateY(2px);  filter: brightness(0.85); }
    75%      { transform: scaleY(1.04) translateY(-1px); filter: brightness(1.15); }
}

/* Subtle glow shimmer on the bars to feel "live" */
.cap-panel.active .graph-bars-noisy {
    animation: barsGlowPulse 4s ease-in-out infinite;
    animation-delay: 2s;
}
@keyframes barsGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(177,15,26,0.2)); }
    50%      { filter: drop-shadow(0 0 12px rgba(177,15,26,0.6)); }
}

/* Scanning vertical line — sweeps left to right continuously */
.graph-scanner {
    opacity: 0;
    transform: translateX(40px);
}
.cap-panel.active .graph-scanner {
    animation: scannerFadeIn 0.6s var(--ease) 2.4s forwards, scannerSweep 4.5s ease-in-out 3s infinite;
}
@keyframes scannerFadeIn { to { opacity: 1; } }
@keyframes scannerSweep {
    0%   { transform: translateX(40px); }
    100% { transform: translateX(440px); }
}

/* Live query result label fades in */
.graph-result {
    opacity: 0;
    transition: opacity 0.6s var(--ease) 2s;
}
.cap-panel.active .graph-result { opacity: 1; }
#dpResult {
    animation: dpResultPulse 2s ease-in-out infinite;
    animation-delay: 3.5s;
}
@keyframes dpResultPulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(177,15,26,0.4)); }
    50%      { filter: drop-shadow(0 0 8px rgba(177,15,26,0.9)); }
}

/* Scatter points + clusters */
.graph-points circle,
.graph-centroids circle {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.4);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-spring);
}
.cap-panel.active .graph-points circle { opacity: 1; transform: scale(1); }
.cap-panel.active .graph-centroids circle { opacity: 1; transform: scale(1); transition-delay: 0.9s; }
.cap-panel.active .graph-points circle:nth-child(3n)  { transition-delay: 0.1s; }
.cap-panel.active .graph-points circle:nth-child(5n)  { transition-delay: 0.25s; }
.cap-panel.active .graph-points circle:nth-child(7n)  { transition-delay: 0.4s; }

.graph-clusters circle {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    transition: stroke-dashoffset 1.4s var(--ease-cinema);
}
.cap-panel.active .graph-clusters circle { stroke-dashoffset: 0; transition-delay: 0.6s; }

/* Area fill fade */
.graph-area,
.graph-band {
    opacity: 0;
    transition: opacity 1s var(--ease) 1s;
}
.cap-panel.active .graph-area,
.cap-panel.active .graph-band { opacity: 1; }

/* Query dots pop */
.graph-querydots circle {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.4);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-spring);
}
.cap-panel.active .graph-querydots circle { opacity: 1; transform: scale(1); }
.cap-panel.active .graph-querydots circle:nth-child(1) { transition-delay: 0.6s; }
.cap-panel.active .graph-querydots circle:nth-child(2) { transition-delay: 0.9s; }
.cap-panel.active .graph-querydots circle:nth-child(3) { transition-delay: 1.2s; }
.cap-panel.active .graph-querydots circle:nth-child(4) { transition-delay: 1.5s; }
.cap-panel.active .graph-querydots circle:nth-child(5) { transition-delay: 1.8s; }
.cap-panel.active .graph-querydots circle:nth-child(6) { transition-delay: 2.1s; }

.graph-cross {
    opacity: 0;
    transition: opacity 0.6s var(--ease) 2.6s;
}
.cap-panel.active .graph-cross { opacity: 1; }

.graph-legend {
    opacity: 0;
    transition: opacity 0.6s var(--ease) 2.2s;
}
.cap-panel.active .graph-legend { opacity: 1; }

/* (Removed) old abstract visuals — visual-grid-lines unused */
.visual-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    display: none;
}

.visual-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 100px var(--primary);
    animation: visualPulse 2.4s var(--ease-cinema) infinite;
}
@keyframes visualPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.5; }
}

.visual-wave {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 12px,
            rgba(177,15,26,0.55) 12px,
            rgba(177,15,26,0.55) 13px
        );
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
    animation: waveShift 6s linear infinite;
}
@keyframes waveShift {
    from { background-position: 0 0; }
    to { background-position: 120px 0; }
}

.visual-particles { position: absolute; inset: 0; }
.visual-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    animation: particleFloat 4s ease-in-out infinite;
}
.visual-particles span:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.visual-particles span:nth-child(2) { top: 60%; left: 30%; animation-delay: 0.5s; background: white; box-shadow: 0 0 12px white;}
.visual-particles span:nth-child(3) { top: 35%; left: 50%; animation-delay: 1s; }
.visual-particles span:nth-child(4) { top: 75%; left: 70%; animation-delay: 1.5s; background: white; box-shadow: 0 0 12px white;}
.visual-particles span:nth-child(5) { top: 25%; left: 80%; animation-delay: 0.8s; }
.visual-particles span:nth-child(6) { top: 55%; left: 88%; animation-delay: 2s; }
.visual-particles span:nth-child(7) { top: 80%; left: 20%; animation-delay: 1.2s; background: white; box-shadow: 0 0 12px white;}
.visual-particles span:nth-child(8) { top: 15%; left: 65%; animation-delay: 1.8s; }
.visual-particles span:nth-child(9) { top: 45%; left: 10%; animation-delay: 2.4s; }
.visual-particles span:nth-child(10) { top: 65%; left: 55%; animation-delay: 0.3s; }
.visual-particles span:nth-child(11) { top: 30%; left: 35%; animation-delay: 2.8s; background: white; box-shadow: 0 0 12px white;}
.visual-particles span:nth-child(12) { top: 85%; left: 45%; animation-delay: 1.6s; }
@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50% { transform: translate(20px, -20px) scale(1.4); opacity: 1; }
}

.visual-meter {
    position: absolute;
    inset: 50px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    justify-content: center;
}
.meter-bar {
    height: 12px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.meter-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary));
    border-radius: 999px;
    animation: meterFill 3s var(--ease-cinema) infinite;
}
.meter-bar:nth-child(1) span { animation-delay: 0s; --w: 70%; }
.meter-bar:nth-child(2) span { animation-delay: 0.2s; --w: 90%; }
.meter-bar:nth-child(3) span { animation-delay: 0.4s; --w: 50%; }
.meter-bar:nth-child(4) span { animation-delay: 0.6s; --w: 80%; }
@keyframes meterFill {
    0% { width: 0%; }
    50% { width: var(--w, 80%); }
    100% { width: 0%; }
}

.visual-dial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
}
.dial-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--primary);
    box-shadow: 0 0 40px var(--primary-glow), inset 0 0 30px var(--primary-dim);
    animation: dialRotate 8s linear infinite;
}
.dial-ring-2 {
    inset: 35px;
    border-style: dashed;
    animation: dialRotate 5s linear infinite reverse;
    opacity: 0.6;
}
.dial-dot {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 18px var(--primary);
}
@keyframes dialRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =========================================
   WHY XAFE — Exact content, premium layout
   ========================================= */
.why {
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.why-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* No glow — Why Xafe is now pure white for clean white→light→white rhythm */
}
.why-inner { position: relative; z-index: 1; }

.why-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: center;
}

.why-head-left .section-tag {
    margin-bottom: 36px;
}

.why-headline {
    font-size: clamp(2.2rem, 5.4vw, 4.8rem);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: #000000;
}
.why-headline em { color: var(--primary); }

.why-head-right { padding-bottom: 0; }

/* Editorial blockquote — vertical red bar + larger lead paragraph */
.why-body {
    font-size: clamp(1.45rem, 1.7vw, 1.65rem);
    line-height: 1.55;
    color: #000000;
    margin: 0;
    padding-left: 28px;
    border-left: 2px solid var(--primary);
    max-width: 560px;
    font-weight: 400;
    letter-spacing: -0.008em;
    quotes: none;
}

.why-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border: 1px solid #000000;
    border-radius: 999px;
    color: #000000;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: all 0.4s var(--ease);
    background: transparent;
}
.why-link-arrow {
    transition: transform 0.4s var(--ease);
    color: var(--primary);
    display: inline-block;
}
.why-link:hover {
    background: #000000;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(0,0,0,0.25);
}
.why-link:hover .why-link-arrow {
    color: #ffffff;
    transform: translateX(6px);
}

@media (max-width: 960px) {
    .why-head { grid-template-columns: 1fr; gap: 30px; padding-bottom: 60px; }
    .why-head-right { padding-bottom: 0; }
}

/* =========================================
   USE CASES — Scroll-driven pinned showcase
   Entiovi platforms-inspired · Cinematic
   ========================================= */
.usecases {
    padding: 60px 0 0;
    background: #ffffff;
}
.usecases .section-title em { color: #ffffff; font-style: normal; }
.usecases .section-tag.light { color: #ffffff; opacity: 0.75; }

/* Animated frame — primary bg card that starts container-width and expands to full-width on pin
   IMPORTANT: no overflow:hidden — that would break sticky positioning inside */
.usecases-frame {
    background: var(--primary);
    --frame-shrink: 0;
    margin: 0 calc(var(--frame-shrink) * 64px);
    border-radius: calc(var(--frame-shrink) * 36px);
    position: relative;
    will-change: margin, border-radius;
}
@media (max-width: 1080px) {
    /* Mobile/tablet — always full-width frame, no scroll-driven shrink */
    .usecases-frame {
        --frame-shrink: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* All buttons inside Use Cases — white on red */
.usecases .btn-primary {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 10px 36px rgba(0,0,0,0.18);
}
.usecases .btn-primary:hover {
    background: #0a0a0a;
    color: #ffffff;
}

.usecases .showcase-arrow {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
}
.usecases .showcase-arrow:hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #ffffff;
}

.usecases .usecases-see-all {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
}
.usecases .usecases-see-all .usecases-see-all-arrow { color: var(--primary); }
.usecases .usecases-see-all:hover {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.usecases .usecases-see-all:hover .usecases-see-all-arrow { color: #ffffff; }
.usecases-title {
    font-size: clamp(1.8rem, 3.8vw, 3.4rem) !important;
}

.usecases-head-wrap {
    padding: 70px 32px 30px;
    max-width: var(--maxw);
    margin: 0 auto;
}

.usecases-see-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    padding: 12px 22px;
    border: 1px solid var(--line-on-dark-strong);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.4s var(--ease);
    background: rgba(255,255,255,0.02);
}
.usecases-see-all-arrow {
    color: var(--primary);
    transition: transform 0.4s var(--ease);
    display: inline-block;
}
.usecases-see-all:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--primary-glow);
}
.usecases-see-all:hover .usecases-see-all-arrow {
    color: #ffffff;
    transform: translateX(6px);
}

/* Section track — single-viewport carousel, no scroll-jacking */
.usecases-track {
    height: auto;
    position: relative;
}

.usecases-sticky {
    position: relative;
    top: auto;
    height: auto;
    display: flex;
    align-items: center;
    overflow: visible;
    padding: 20px 0 20px;
}

.usecases-sticky > .container {
    width: 100%;
}

/* SHOWCASE — big featured panel (pinned inside sticky) */
.showcase {
    position: relative;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    margin-bottom: 22px;
    min-height: min(560px, 70vh);
}

.showcase-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.showcase-orb {
    display: none;
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: transparent;
    filter: blur(140px);
    opacity: 0;
    top: -200px;
    right: -200px;
    animation: showcaseOrb 14s ease-in-out infinite;
}

@keyframes showcaseOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-40px, 40px) scale(1.1); }
}

.showcase-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at right top, transparent 0%, black 70%);
    -webkit-mask-image: radial-gradient(ellipse at right top, transparent 0%, black 70%);
    opacity: 0.6;
}

.showcase-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.95fr 1.1fr;
    gap: 60px;
    padding: 60px 60px 50px;
    align-items: stretch;
    min-height: min(560px, 70vh);
}

/* LEFT — static section head (eyebrow + heading + description + See All) */
.showcase-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
}
.showcase-left .section-tag.light {
    color: #ffffff;
    opacity: 0.8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.showcase-left .usecases-title {
    color: #ffffff;
    margin: 0;
    font-size: clamp(1.8rem, 3.4vw, 3rem) !important;
    line-height: 1.08;
    letter-spacing: -0.035em;
}
.showcase-left .usecases-title em {
    color: #ffffff;
    font-style: normal;
    font-weight: 700;
}
.showcase-left .section-sub {
    color: rgba(255,255,255,0.78);
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 520px;
}
.showcase-left .usecases-see-all {
    margin-top: 8px;
}

.showcase-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.showcase-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
}
.counter-current {
    font-size: 2rem;
    line-height: 1;
    color: #ffffff;
}
.counter-sep, .counter-total {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.4);
}

.showcase-label {
    padding: 6px 14px;
    border: 1px solid var(--line-on-dark-strong);
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
}

.showcase-title {
    font-size: clamp(2.5rem, 5.2vw, 4.6rem);
    font-weight: 600;
    letter-spacing: -0.042em;
    line-height: 1;
    color: #ffffff;
    margin-bottom: 22px;
}

.showcase-desc {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.7);
    max-width: 540px;
    margin-bottom: 26px;
}

.showcase-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 30px;
}

.showcase-bullets li {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--line-on-dark);
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.showcase-bullets li:last-child { border-bottom: 1px solid var(--line-on-dark); }

.showcase-bullets .b-num {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    font-size: 0.88rem;
    min-width: 28px;
}

.showcase-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.showcase-nav {
    display: flex;
    gap: 10px;
}

.showcase-arrow {
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-on-dark-strong);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease);
    background: rgba(255,255,255,0.02);
}
.showcase-arrow svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s var(--ease);
}
.showcase-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--primary-glow);
}
.showcase-arrow:hover svg { transform: scale(1.1); }

/* RIGHT — cycling featured industry content (white card on the red section) */
.showcase-right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 36px 38px;
    background:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(252, 228, 211, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(215, 230, 241, 0.55) 0%, transparent 70%),
        #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 30px 70px -22px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    color: #0a0a0a;
}
/* Soft red accent glow on the top-right corner — pulls in the section's brand color */
.showcase-right::before {
    content: '';
    position: absolute;
    top: -90px;
    right: -90px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.10) 0%, rgba(177, 15, 26, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.showcase-right > * { position: relative; z-index: 1; }

/* Icon row — large industry badge + counter/label */
.showcase-icon-row {
    display: flex;
    align-items: center;
    gap: 18px;
}
.showcase-icon {
    position: relative;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 14px 28px -10px rgba(177, 15, 26, 0.55);
}
.showcase-icon svg {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 1;
}
.showcase-icon-ring {
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 1px dashed rgba(177, 15, 26, 0.35);
    animation: useIconRing 22s linear infinite;
}

/* === Dark-on-white text overrides for content inside the white cycling card === */
.showcase-right .counter-current {
    color: #0a0a0a;
}
.showcase-right .counter-sep,
.showcase-right .counter-total {
    color: rgba(0, 0, 0, 0.35);
}
.showcase-right .showcase-label {
    background: rgba(177, 15, 26, 0.08);
    border: 1px solid rgba(177, 15, 26, 0.18);
    color: var(--primary);
}
.showcase-right .showcase-title {
    color: #0a0a0a;
}
.showcase-right .showcase-desc {
    color: rgba(0, 0, 0, 0.62);
}
.showcase-right .showcase-bullets li {
    color: #0a0a0a;
    border-top-color: rgba(0, 0, 0, 0.08);
}
.showcase-right .showcase-bullets li:last-child {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
.showcase-right .showcase-bullets .b-num {
    color: var(--primary);
}

/* Prev / next arrows inside the white card — light gray surface, red icon, red on hover */
.usecases .showcase-right .showcase-arrow {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    color: #0a0a0a;
}
.usecases .showcase-right .showcase-arrow:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(177, 15, 26, 0.32);
}

/* Details button on the white card — solid red so it pops */
.usecases .showcase-right .btn-primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 14px 30px -10px rgba(177, 15, 26, 0.45);
}
.usecases .showcase-right .btn-primary:hover {
    background: #0a0a0a;
    color: #ffffff;
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.4);
}
@keyframes useIconRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.showcase-right.switching {
    animation: showcaseSwap 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes showcaseSwap {
    0%   { transform: translateX(0);   opacity: 1; }
    42%  { transform: translateX(40px); opacity: 0; }
    58%  { transform: translateX(40px); opacity: 0; }
    100% { transform: translateX(0);   opacity: 1; }
}

.showcase-visual {
    position: relative;
    aspect-ratio: auto;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
    border-radius: 22px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    overflow: visible;
    box-shadow: none;
}

/* =========================================
   CONSTELLATION — Differential Privacy Network
   ========================================= */
.cstl {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.cstl-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Outer orbit — slow CCW rotation */
.cstl-orbit-outer {
    transform-origin: 200px 200px;
    animation: cstlSpinSlow 40s linear infinite;
}
/* Inner satellites — opposite direction, faster */
.cstl-orbit-inner {
    transform-origin: 200px 200px;
    animation: cstlSpinFast 14s linear infinite reverse;
}
@keyframes cstlSpinSlow {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@keyframes cstlSpinFast {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* Pulse rings expanding outward from center */
.cstl-pulse {
    transform-origin: 200px 200px;
    opacity: 0;
}
.cstl-pulse-1 { animation: cstlPulse 4s ease-out infinite 0s; }
.cstl-pulse-2 { animation: cstlPulse 4s ease-out infinite 1.3s; }
.cstl-pulse-3 { animation: cstlPulse 4s ease-out infinite 2.6s; }
@keyframes cstlPulse {
    0%   { transform: scale(0.4); opacity: 0.6; stroke-width: 2; }
    60%  { opacity: 0.18; }
    100% { transform: scale(3.4); opacity: 0; stroke-width: 0.5; }
}

/* Connection lines softly pulse */
.cstl-lines line {
    animation: cstlLineFlicker 6s ease-in-out infinite;
}
.cstl-lines line:nth-child(odd)  { animation-delay: -1.5s; }
.cstl-lines line:nth-child(3n)   { animation-delay: -3s; }
@keyframes cstlLineFlicker {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* === Showcase visual — Entiovi-style 3-section card === */
.showcase-visual {
    display: flex !important;
    flex-direction: column;
    padding: 22px 24px 20px;
    gap: 18px;
}

/* =====================================================
   .just-switched — Smooth slide-in from the right
   on every industry change (no 3D flip)
   ===================================================== */

/* Whole panel slides in from the right */
.showcase-visual.just-switched {
    animation: switchSlideIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes switchSlideIn {
    0% {
        opacity: 0;
        transform: translateX(90px);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Center icon spins in slightly after the panel lands */
.showcase-visual.just-switched .entio-center-icon {
    animation: switchCenterFlip 0.7s var(--ease-spring) both;
    animation-delay: 0.25s;
}
@keyframes switchCenterFlip {
    0%   { opacity: 0; transform: translate(195px, 105px) scale(0.85); }
    100% { opacity: 1; transform: translate(155px, 105px) scale(1); }
}

/* Capability cards slide in from right with stagger (no 3D rotate) */
.showcase-visual.just-switched .entio-cap {
    animation: switchCapSlide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    opacity: 0;
}
.showcase-visual.just-switched .entio-cap:nth-child(1) { animation-delay: 0.35s; }
.showcase-visual.just-switched .entio-cap:nth-child(2) { animation-delay: 0.45s; }
.showcase-visual.just-switched .entio-cap:nth-child(3) { animation-delay: 0.55s; }
@keyframes switchCapSlide {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Benefits stagger from right */
.showcase-visual.just-switched .entio-benefit {
    animation: switchBenefitSlide 0.5s var(--ease-cinema) both;
    opacity: 0;
}
.showcase-visual.just-switched .entio-benefit:nth-child(1) { animation-delay: 0.55s; }
.showcase-visual.just-switched .entio-benefit:nth-child(2) { animation-delay: 0.62s; }
.showcase-visual.just-switched .entio-benefit:nth-child(3) { animation-delay: 0.69s; }
.showcase-visual.just-switched .entio-benefit:nth-child(4) { animation-delay: 0.76s; }
@keyframes switchBenefitSlide {
    0%   { opacity: 0; transform: translateX(24px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* TOP: Constellation - center icon + 4 satellite icons with dotted lines */
.entio-constellation {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 18px;
}
.entio-constellation svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.entio-center-icon {
    animation: centerBreathe 3.6s ease-in-out infinite;
}
@keyframes centerBreathe {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)); }
}

/* Animated dots along connection lines */
.entio-dots circle {
    animation: dotTravel 3s ease-in-out infinite;
}
.entio-dots circle:nth-child(1) { animation-delay: 0s;    }
.entio-dots circle:nth-child(2) { animation-delay: 0.4s;  }
.entio-dots circle:nth-child(3) { animation-delay: 0.8s;  }
.entio-dots circle:nth-child(4) { animation-delay: 1.2s;  }
@keyframes dotTravel {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.6); }
    transform-origin: center;
}

/* MIDDLE: "What it does" capability row */
.entio-section-label {
    color: rgba(255,255,255,0.55);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.entio-caps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.entio-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 8px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    transition: all 0.4s var(--ease);
}
.entio-cap:hover {
    border-color: rgba(255,255,255,0.55);
    background: rgba(0,0,0,0.28);
    transform: translateY(-2px);
}
.entio-cap-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #ffffff;
}
.entio-cap-icon svg {
    width: 18px;
    height: 18px;
}
.entio-cap-name {
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

/* BOTTOM: 4 benefit icons */
.entio-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
}
.entio-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 6px 4px;
}
.entio-benefit svg {
    width: 18px;
    height: 18px;
    color: #ffffff;
}
.entio-benefit span {
    color: rgba(255,255,255,0.75);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Top live strip */
.vstage-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.vstage-strip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: dotPulse 1.8s ease-in-out infinite;
}
.vstage-strip-label {
    flex: 1;
    color: rgba(255,255,255,0.75);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.vstage-strip-id {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    font-feature-settings: 'tnum';
}

/* Icon row — industry icon + name + score pill */
.vstage-iconrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
}
.vstage-iconbox {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(177,15,26,0.32);
    border-radius: 14px;
    background: rgba(177,15,26,0.08);
    color: #ffffff;
    flex-shrink: 0;
}
.vstage-iconbox svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
}
.vstage-iconinfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vstage-iconname {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.1;
}
.vstage-iconsub {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.vstage-scorepill {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(177,15,26,0.12);
    border: 1px solid rgba(177,15,26,0.4);
    border-radius: 10px;
    color: #ffffff;
}
.vstage-scorepill-num {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
.vstage-scorepill-unit {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

/* Trend chart */
.vstage-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vstage-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.vstage-chart-title {
    color: rgba(255,255,255,0.78);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.vstage-chart-trend {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-feature-settings: 'tnum';
}
.vstage-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.vstage-trend-line {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation:
        trendDraw 2.2s var(--ease-cinema) 0.3s forwards,
        trendGlow 4s ease-in-out 2.5s infinite;
}
@keyframes trendDraw  { to { stroke-dashoffset: 0; } }
@keyframes trendGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(177,15,26,0.4)); }
    50%      { filter: drop-shadow(0 0 8px rgba(177,15,26,0.9)); }
}
.vstage-trend-area {
    opacity: 0;
    animation: fadeIn 1s var(--ease) 1.6s forwards;
}
.vstage-trend-dots circle {
    opacity: 0;
    animation: fadeIn 0.5s var(--ease) forwards;
}
.vstage-trend-dots circle:nth-child(1) { animation-delay: 1.2s; }
.vstage-trend-dots circle:nth-child(2) { animation-delay: 1.6s; }
.vstage-trend-dots circle:nth-child(3) { animation-delay: 2.0s; }

.vstage-chart-foot {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Privacy Pipeline infographic */
.pipeline { display: flex; flex-direction: column; gap: 10px; }
.pipeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pipeline-title {
    color: rgba(255,255,255,0.78);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.pipeline-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pipeline-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: dotPulse 1.6s ease-in-out infinite;
}

.pipeline-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}

.pipe-node {
    padding: 10px 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s var(--ease);
}
.pipe-node.pipe-dp {
    border-color: rgba(177,15,26,0.45);
    background: rgba(177,15,26,0.08);
}
.pipe-node-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.7);
}
.pipe-node-head svg {
    width: 14px;
    height: 14px;
    color: rgba(255,255,255,0.9);
}
.pipe-dp .pipe-node-head svg { color: var(--primary); }
.pipe-node-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.pipe-node-value {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin-bottom: 2px;
}
.pipe-dp .pipe-node-value { color: var(--primary); }
.pipe-node-sub {
    color: rgba(255,255,255,0.4);
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}

/* Animated arrow connector with flowing particles */
.pipe-arrow {
    position: relative;
    width: 100%;
    height: 24px;
    overflow: hidden;
}
.pipe-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(177,15,26,0.45), rgba(255,255,255,0.10));
    transform: translateY(-50%);
}
.pipe-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--primary);
}
.pipe-particle {
    position: absolute;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    transform: translate(0, -50%);
    animation: pipeFlow 2.4s linear infinite;
}
.pipe-particle:nth-child(2) { animation-delay: 0.8s; }
.pipe-particle:nth-child(3) { animation-delay: 1.6s; }
@keyframes pipeFlow {
    0%   { left: -5px;  opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: calc(100% + 5px); opacity: 0; }
}

/* Capabilities list */
.capabilities-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.caplist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,0.6);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.caplist-count {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-feature-settings: 'tnum';
}
.caplist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}
.caplist li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.caplist li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.cap-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
    flex-shrink: 0;
}
.cap-status {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid rgba(177,15,26,0.4);
    background: rgba(177,15,26,0.10);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Compliance badges (flat row) */
.vstage-compliance {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.comp-badge {
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    color: rgba(255,255,255,0.85);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: all 0.3s var(--ease);
}
.comp-badge:hover {
    border-color: var(--primary);
    color: #ffffff;
    background: rgba(177,15,26,0.12);
}

.visual-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--primary);
    opacity: 0.7;
}
.visual-corner.top-left { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.visual-corner.top-right { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.visual-corner.bottom-left { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.visual-corner.bottom-right { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* Auto-progress bar */
.showcase-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.06);
    z-index: 2;
}
.showcase-progress-fill {
    height: 100%;
    width: 0%;
    background: #ffffff;
    box-shadow: 0 0 14px rgba(255,255,255,0.45);
}

/* (Thumbnail strip removed) */

@media (max-width: 1080px) {
    .usecases-sticky { padding: 40px 0 40px; }

    .showcase-content {
        grid-template-columns: 1fr;
        padding: 40px 32px 50px;
        gap: 30px;
    }
    .showcase { min-height: auto; }
    .showcase-left { align-items: flex-start; }
    .showcase-right { padding: 24px 26px; }
}

@media (max-width: 640px) {
    .usecases-head-wrap { padding: 100px 20px 40px; }
    .showcase-content { padding: 36px 22px 44px; }
    .showcase-meta { flex-wrap: wrap; gap: 12px; }
    .showcase-actions { flex-direction: column; align-items: stretch; }
    .showcase-nav { justify-content: center; }
}

/* Hidden fallback list */
.usecase-list[hidden] { display: none !important; }

@media (max-width: 560px) {
    .usecase-row-title { font-size: 1.6rem; }
}

/* =========================================
   CTA (DARK)
   ========================================= */
.cta {
    padding: 70px 0;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(177,15,26,0.06) 0%, transparent 60%);
}
.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    opacity: 0.7;
}
.cta-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}
.cta-inner .section-tag { margin-bottom: 32px; }
.cta-title {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin-bottom: 28px;
    color: #000000;
}
.cta-title em { color: var(--primary); }
.cta-sub {
    font-size: 1.15rem;
    color: var(--text-on-light-dim);
    margin-bottom: 48px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}
.cta-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Partnership form */
.partnership-form {
    display: flex;
    gap: 10px;
    max-width: 540px;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid var(--line-on-light-strong);
    border-radius: 999px;
    background: #ffffff;
    transition: all 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.partnership-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(177,15,26,0.08);
}
.partnership-form.error {
    border-color: var(--primary);
    animation: shake 0.5s var(--ease);
}
.partnership-form.submitted {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.partnership-form input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 22px;
    font-size: 0.96rem;
    font-family: inherit;
    background: transparent;
    color: #000000;
    letter-spacing: -0.005em;
}
.partnership-form input::placeholder { color: var(--text-on-light-mute); }
.partnership-form .btn {
    padding: 14px 26px;
    font-size: 0.92rem;
    flex-shrink: 0;
}

.partnership-thanks {
    margin-top: 22px;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.partnership-thanks.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 560px) {
    .partnership-form { flex-direction: column; border-radius: 18px; padding: 12px; gap: 12px; }
    .partnership-form .btn { width: 100%; justify-content: center; }
}

/* Partnership CTA button — centered, replaces the email form */
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 24px auto 0;
    padding: 16px 32px;
    font-size: 0.98rem;
}

/* =========================================
   FOOTER — Compact professional layout
   ========================================= */
.footer {
    padding: 0 0 20px;
    border-top: 1px solid var(--line-on-dark);
    position: relative;
}
.footer-accent {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    opacity: 0.7;
}

/* Brand row — compact */
.footer-brand-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: end;
    padding: 36px 0 28px;
    border-bottom: 1px solid var(--line-on-dark);
}
.footer-brand { max-width: 440px; }
.footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 12px;
}
.footer-logo .brand-logo {
    height: 80px;
    margin-left: -10px;
}
.footer-statement {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.footer-statement span {
    color: rgba(255,255,255,0.42);
    margin-left: 4px;
}

.footer-brand-cta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.footer-brand-label {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    font-weight: 600;
}
.footer-mail-large {
    color: #ffffff;
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.016em;
    text-decoration: none;
    transition: color 0.3s var(--ease);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
.footer-mail-large:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Main link/office grid — compact */
.footer-grid {
    display: grid;
    grid-template-columns: 0.9fr 0.9fr 3fr;
    gap: 22px;
    padding: 28px 0 22px;
    border-bottom: 1px solid var(--line-on-dark);
}
.footer-offices {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.footer-office h5 {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-col h4 {
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.footer-tag-pill {
    padding: 1px 7px;
    border: 1px solid rgba(177,15,26,0.45);
    background: rgba(177,15,26,0.12);
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.footer-col a {
    display: block;
    color: rgba(255,255,255,0.7);
    font-size: 0.84rem;
    padding: 3px 0;
    transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
    line-height: 1.5;
    text-decoration: none;
    position: relative;
}
.footer-col a::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: width 0.3s var(--ease);
}
.footer-col a:hover {
    color: #ffffff;
    padding-left: 12px;
}
.footer-col a:hover::before { width: 8px; }

.footer-address {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Bottom row — compact */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    flex-wrap: wrap;
    gap: 14px;
}
.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-bottom-left p {
    color: rgba(255,255,255,0.85);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}
.footer-bottom-left p .footer-legal { font-size: inherit; font-weight: inherit; }
.footer-divider-dot {
    color: rgba(255,255,255,0.22);
    font-size: 0.66rem;
}
.footer-legal {
    color: var(--primary);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}
.footer-legal:hover { color: #ffffff; }

.footer-social {
    display: flex;
    gap: 8px;
    align-items: center;
}
.footer-social-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-on-dark-strong);
    border-radius: 50%;
    color: rgba(255,255,255,0.65);
    transition: all 0.4s var(--ease);
}
.footer-social-icon svg {
    width: 12px;
    height: 12px;
}
.footer-social-icon:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px var(--primary-glow);
}

@media (max-width: 1180px) {
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 880px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .footer-brand-row { grid-template-columns: 1fr; align-items: start; gap: 24px; }
    .footer-brand-cta { text-align: left; }
    .footer-mail-large { font-size: 1.2rem; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .footer-bottom { flex-direction: column; align-items: start; }
}

/* =========================================
   MOBILE MENU
   ========================================= */
/* Hide mobile-only menu items on desktop */
@media (min-width: 1081px) {
    .nav-mobile-only { display: none !important; }
}
/* Explicitly show them inside the mobile menu panel */
@media (max-width: 1080px) {
    body.menu-open .nav-links .nav-mobile-only { display: list-item; }
}

@media (max-width: 1080px) {
    /* Menu panel — full-screen with slide-in + backdrop blur */
    body.menu-open .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(180deg, rgba(8,8,10,0.97) 0%, rgba(0,0,0,0.98) 100%);
        backdrop-filter: blur(28px) saturate(140%);
        -webkit-backdrop-filter: blur(28px) saturate(140%);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        display: flex;
        z-index: 999;
        padding: 22px 26px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        animation: menuPanelIn 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    @keyframes menuPanelIn {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Each li slides in with staggered delay for premium feel */
    body.menu-open .nav-links > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        animation: menuItemIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
    }
    body.menu-open .nav-links > li:nth-child(1) { animation-delay: 0.06s; }
    body.menu-open .nav-links > li:nth-child(2) { animation-delay: 0.12s; }
    body.menu-open .nav-links > li:nth-child(3) { animation-delay: 0.18s; }
    body.menu-open .nav-links > li:nth-child(4) { animation-delay: 0.24s; }
    body.menu-open .nav-links > li:nth-child(5) { animation-delay: 0.30s; }
    body.menu-open .nav-links > li:nth-child(6) { animation-delay: 0.36s; }
    body.menu-open .nav-links > li:nth-child(7) { animation-delay: 0.42s; }
    @keyframes menuItemIn {
        from { opacity: 0; transform: translateX(18px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Top-level link rows */
    body.menu-open .nav-links > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 6px 12px 4px;
        font-size: 1.1rem;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: -0.015em;
        position: relative;
        transition: color 0.25s var(--ease), padding-left 0.3s var(--ease);
    }
    body.menu-open .nav-links > li > a::after {
        content: '\2192';
        font-size: 1rem;
        font-weight: 400;
        color: rgba(255,255,255,0.35);
        transition: transform 0.3s var(--ease), color 0.25s var(--ease);
    }
    body.menu-open .nav-links > li > a:hover,
    body.menu-open .nav-links > li > a:active {
        color: var(--primary);
        padding-left: 8px;
    }
    body.menu-open .nav-links > li > a:hover::after,
    body.menu-open .nav-links > li > a:active::after {
        color: var(--primary);
        transform: translateX(4px);
    }
    body.menu-open .nav-links > li > a.is-active {
        color: var(--primary);
    }
    body.menu-open .nav-links .caret { display: none; }

    /* Algorithms dropdown — expanded inline with red accent rail */
    body.menu-open .nav-dropdown .dropdown-menu {
        position: static;
        display: flex;
        flex-direction: column;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        min-width: 0;
        padding: 4px 0 18px 18px;
        border: none;
        border-left: 2px solid rgba(177,15,26,0.45);
        margin-left: 4px;
        gap: 0;
    }
    body.menu-open .dropdown-menu a {
        font-size: 0.92rem;
        font-weight: 500;
        color: rgba(255,255,255,0.62);
        padding: 6px 8px;
        border-radius: 0;
        transition: color 0.2s ease, padding-left 0.3s ease;
        letter-spacing: -0.005em;
    }
    body.menu-open .dropdown-menu a:hover,
    body.menu-open .dropdown-menu a.is-active {
        background: transparent;
        color: var(--primary);
        padding-left: 12px;
    }

    /* Hide chevron arrow on dropdown trigger when expanded (visual cleanup) */
    body.menu-open .nav-dropdown > a::after {
        content: '\f0d7';
        font-family: inherit;
        content: '+';
        font-size: 1.4rem;
        font-weight: 300;
        line-height: 1;
    }

    /* Contact item — full-width CTA pill at the bottom of the menu list */
    body.menu-open .nav-mobile-only {
        border-bottom: none !important;
        margin-top: 14px;
    }
    body.menu-open .nav-mobile-only > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 16px 24px !important;
        background: var(--primary);
        color: #ffffff !important;
        border-radius: 999px;
        font-size: 1rem !important;
        font-weight: 600;
        text-align: center;
        line-height: 1 !important;
        transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
        box-shadow: 0 10px 28px rgba(177,15,26,0.28);
    }
    body.menu-open .nav-mobile-only > a::after {
        content: '\2192' !important;
        color: #ffffff !important;
        font-size: 1.05rem !important;
        position: static !important;
        transform: none !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        margin: 0 !important;
    }
    body.menu-open .nav-mobile-only > a:hover {
        background: #8a0c14;
        transform: translateY(-2px);
        padding-left: 24px !important;
    }
    body.menu-open .nav-mobile-only > a:hover::after {
        transform: translateX(4px) !important;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 700px) {
    .container { padding: 0 20px; }
    .hero {
        aspect-ratio: auto;
        min-height: 560px;
        padding: calc(var(--nav-h) + 40px) 20px 160px;
    }
    .intro { padding: 30px 0 30px; }
    .intro::before { height: 60px; }
    .cta, .why { padding: 50px 0; }
    .hero-title { font-size: 2.6rem; }
    .section-head { margin-bottom: 28px; }
}

/* =========================================
   SELECTION & SCROLLBAR
   ========================================= */
/* Back to top — fixed bottom-right, appears after scrolling */
.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25), 0 4px 12px rgba(177,15,26,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease), transform 0.35s var(--ease), background 0.25s var(--ease);
    z-index: 9998;
}
.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover {
    background: #8a0c14;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 6px 16px rgba(177,15,26,0.5);
}
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
    .back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
    .back-to-top svg { width: 18px; height: 18px; }
}

/* =============================================================================
   UNIFIED HERO BG ANIMATIONS (.uc-*)
   Shared decorative bg pattern (data curve + dots + lines) applied to any
   *-hero-graphic SVG that uses the .uc-area / .uc-curve / .uc-dots / .uc-lines
   class structure. Mirrors the use-cases.html hero bg look.
   ============================================================================= */
/* Subtler, slower, more refined motion — restrained "designed" feel */
[class*="-hero-graphic"] .uc-area {
    animation: ucAreaBreathe 14s ease-in-out infinite;
    transform-origin: 1180px 300px;
}
@keyframes ucAreaBreathe {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 0.72; }
}
[class*="-hero-graphic"] .uc-curve {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: ucCurveDraw 18s ease-in-out infinite;
}
@keyframes ucCurveDraw {
    0%   { stroke-dashoffset: 900; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -900; }
}
[class*="-hero-graphic"] .uc-dots circle {
    animation: ucDotPulse 8s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
[class*="-hero-graphic"] .uc-dots circle:nth-child(2)  { animation-delay: 0.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(3)  { animation-delay: 1.0s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(4)  { animation-delay: 1.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(5)  { animation-delay: 2.0s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(6)  { animation-delay: 2.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(7)  { animation-delay: 3.0s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(8)  { animation-delay: 3.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(9)  { animation-delay: 4.0s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(10) { animation-delay: 4.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(11) { animation-delay: 5.0s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(12) { animation-delay: 5.5s; }
[class*="-hero-graphic"] .uc-dots circle:nth-child(13) { animation-delay: 6.0s; }
@keyframes ucDotPulse {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.55; }
}
[class*="-hero-graphic"] .uc-lines line {
    animation: ucDashFlow 14s linear infinite;
    opacity: 0.55;
}
@keyframes ucDashFlow {
    to { stroke-dashoffset: -28; }
}

/* Gentle drift on the whole hero graphic — feels alive without being busy */
[class*="-hero-graphic"] {
    animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-8px, 4px, 0); }
}

/* Refined sweep beam — a faint vertical gradient bar travels horizontally
   across the hero bg every 18s, giving a precise architectural feel */
[class*="-hero-bg"] {
    isolation: isolate;
}
[class*="-hero-bg"]::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 320px;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0)   0%,
        rgba(177, 15, 26, 0.05) 35%,
        rgba(177, 15, 26, 0.10) 50%,
        rgba(177, 15, 26, 0.05) 65%,
        rgba(177, 15, 26, 0)   100%);
    mix-blend-mode: multiply;
    animation: heroSweep 18s linear infinite;
    z-index: 1;
}
@keyframes heroSweep {
    0%   { transform: translateX(-360px); opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translateX(60vw); opacity: 0.85; }
    92%  { opacity: 0; }
    100% { transform: translateX(120vw); opacity: 0; }
}

/* Reduce motion preference — respect users who don't want animation */
@media (prefers-reduced-motion: reduce) {
    [class*="-hero-graphic"],
    [class*="-hero-graphic"] .uc-area,
    [class*="-hero-graphic"] .uc-curve,
    [class*="-hero-graphic"] .uc-dots circle,
    [class*="-hero-graphic"] .uc-lines line,
    [class*="-hero-bg"]::after {
        animation: none;
    }
}

::selection {
    background: var(--primary);
    color: white;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    border: 2px solid var(--bg-dark);
}

/* =========================================================================
   USE CASES PAGE  (use-cases.html)
   Standalone page styles — does not affect the home page Use Cases section.
   Prefix: .ucp- (Use Cases Page)
   ========================================================================= */

/* Hero — entiovi-style internal page hero: breadcrumb + editorial headline + supporting line */
.ucp-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 40px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.ucp-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
/* Bottom blend — cream dissolves into the white grid section below */
.ucp-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}

/* Decorative background — subtle data-themed graphic with primary tint */
.ucp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ucp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    opacity: 0.9;
}
.ucp-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.ucp-hero-graphic circle {
    animation: ucpDotPulse 3.6s ease-in-out infinite;
}
.ucp-hero-graphic circle:nth-child(2) { animation-delay: 0.4s; }
.ucp-hero-graphic circle:nth-child(3) { animation-delay: 0.8s; }
.ucp-hero-graphic circle:nth-child(4) { animation-delay: 1.2s; }
.ucp-hero-graphic circle:nth-child(5) { animation-delay: 1.6s; }
.ucp-hero-graphic circle:nth-child(6) { animation-delay: 2.0s; }
.ucp-hero-graphic circle:nth-child(7) { animation-delay: 2.4s; }
.ucp-hero-graphic circle:nth-child(8) { animation-delay: 2.8s; }
@keyframes ucpDotPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.85; }
}

/* Curve — continuous draw/flow animation */
.ucp-hero-graphic .ucp-curve {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: ucpCurveDraw 9s ease-in-out infinite;
}
@keyframes ucpCurveDraw {
    0%   { stroke-dashoffset: 900; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -900; }
}

/* Area — gentle opacity breathing */
.ucp-hero-graphic .ucp-area {
    animation: ucpAreaBreathe 7s ease-in-out infinite;
}
@keyframes ucpAreaBreathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Connector lines — dashes flow along the line */
.ucp-hero-graphic .ucp-lines line {
    animation: ucpDashFlow 6s linear infinite;
}
@keyframes ucpDashFlow {
    to { stroke-dashoffset: -28; }
}

.ucp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.ucp-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.ucp-breadcrumb a:hover { color: var(--primary); }
.ucp-breadcrumb-sep {
    color: rgba(0,0,0,0.28);
    font-size: 0.9rem;
}
.ucp-breadcrumb-current {
    color: #0a0a0a;
    font-weight: 600;
}

.ucp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0 0 24px;
    max-width: 1100px;
}
.ucp-hero-title em {
    color: var(--primary);
    font-style: normal;
    font-weight: 700;
}

.ucp-hero-sub {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    line-height: 1.45;
    color: rgba(0,0,0,0.62);
    max-width: 760px;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.012em;
}

/* Grid section — clean white, blends straight from the hero's bottom fade */
.ucp-grid-section {
    background: #ffffff;
    padding: 40px 0 40px;
    position: relative;
}
.ucp-grid-section .container { max-width: min(1320px, 100%); }

.ucp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ucp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 30px 28px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                box-shadow 0.4s var(--ease),
                transform 0.4s var(--ease);
}
.ucp-card:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 28px 60px -22px rgba(177,15,26,0.45), 0 8px 20px -8px rgba(177,15,26,0.3);
    transform: translateY(-4px);
}

.ucp-card-num {
    position: absolute;
    top: 28px;
    right: 30px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: rgba(0,0,0,0.32);
    font-family: var(--font-sans);
    transition: color 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-num { color: rgba(255,255,255,0.65); }

.ucp-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(177,15,26,0.06);
    color: var(--primary);
    margin-bottom: 26px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.ucp-card-icon svg { width: 26px; height: 26px; }
.ucp-card:hover .ucp-card-icon {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}

.ucp-card-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 12px;
    line-height: 1.15;
    transition: color 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-title { color: #ffffff; }

.ucp-card-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(0,0,0,0.62);
    margin: 0 0 22px;
    flex-grow: 1;
    transition: color 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-desc { color: rgba(255,255,255,0.88); }

.ucp-card-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 24px;
    padding: 0;
}
.ucp-card-tags li {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(0,0,0,0.65);
    padding: 5px 10px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 999px;
    background: rgba(0,0,0,0.015);
    transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-tags li {
    color: #ffffff;
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.1);
}

.ucp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: auto;
    transition: color 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-link { color: #ffffff; }
.ucp-card-arrow {
    display: inline-block;
    transition: transform 0.4s var(--ease);
}
.ucp-card:hover .ucp-card-arrow { transform: translateX(6px); }

/* Responsive — tablet 2 cols, mobile 1 col */
@media (max-width: 1080px) {
    .ucp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .ucp-hero { padding: calc(var(--nav-h) + 50px) 0 60px; }
    .ucp-breadcrumb { margin-bottom: 36px; font-size: 0.78rem; }
    .ucp-hero-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .ucp-hero-sub { font-size: 1.05rem; }
    .ucp-grid-section { padding: 30px 0 30px; }
    .ucp-grid { grid-template-columns: 1fr; gap: 16px; }
    .ucp-card { padding: 26px 22px 22px; }
    .ucp-card-title { font-size: 1.4rem; }
    .ucp-card-num { top: 22px; right: 22px; }
}

/* =========================================================================
   USE CASE DETAIL PAGE  (use-cases-finance.html etc.)
   Per-industry sub-page styles.
   Prefix: .ucd- (Use Case Detail)
   ========================================================================= */

/* HERO — cream bg, breadcrumb + meta row + headline + supporting paragraph */
.ucd-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 50px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.ucd-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.ucd-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}

/* Subtle data-themed bg layer */
.ucd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ucd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.ucd-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.ucd-hero-graphic circle {
    animation: ucpDotPulse 3.6s ease-in-out infinite;
}
.ucd-hero-graphic circle:nth-child(2) { animation-delay: 0.4s; }
.ucd-hero-graphic circle:nth-child(3) { animation-delay: 0.8s; }
.ucd-hero-graphic circle:nth-child(4) { animation-delay: 1.2s; }

/* Breadcrumb */
.ucd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.ucd-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.ucd-breadcrumb a:hover { color: var(--primary); }
.ucd-breadcrumb-sep { color: rgba(0,0,0,0.28); font-size: 0.9rem; }
.ucd-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

/* Hero meta row — number + tag pill */
.ucd-hero-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.ucd-hero-num {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--primary);
    text-transform: uppercase;
}
.ucd-hero-tag {
    padding: 6px 14px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    background: #ffffff;
}

.ucd-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0 0 28px;
}
.ucd-hero-title em { color: var(--primary); font-style: normal; font-weight: 700; }

.ucd-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.55;
    color: rgba(0,0,0,0.65);
    max-width: 820px;
    margin: 0;
    font-weight: 400;
}

/* PILLARS — three color-blocked capability cards (entiovi-style) */
.ucd-pillars {
    background: #ffffff;
    padding: 40px 0 40px;
}
.ucd-pillars .container { max-width: min(1280px, 100%); }

.ucd-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.ucd-pillar {
    position: relative;
    padding: 44px 36px 44px;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.5s var(--ease);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Top-right icon box — deeper shade of each card's pastel color */
.ucd-pillar-icon {
    position: absolute;
    top: 26px;
    right: 28px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s var(--ease);
}
.ucd-pillar-icon svg { width: 22px; height: 22px; }

/* Variant — Peach (soft warm pastel) */
.ucd-pillar--cream {
    background: #fce4d3;
}
.ucd-pillar--cream:hover {
    background: #fbd7be;
    transform: translateY(-10px);
    box-shadow: 0 30px 50px -24px rgba(200, 122, 69, 0.45);
}
.ucd-pillar--cream .ucd-pillar-num   { color: #c87a45; }
.ucd-pillar--cream .ucd-pillar-title { color: #1a1a1a; }
.ucd-pillar--cream .ucd-pillar-desc  { color: rgba(26, 26, 26, 0.72); }
.ucd-pillar--cream .ucd-pillar-icon  { background: #f6c89e; color: #8a4f25; }

/* Variant — Lavender (soft cool pastel) */
.ucd-pillar--red {
    background: #e5ddf1;
}
.ucd-pillar--red:hover {
    background: #d6c8ec;
    transform: translateY(-10px);
    box-shadow: 0 30px 50px -24px rgba(138, 114, 184, 0.45);
}
.ucd-pillar--red .ucd-pillar-num   { color: #8a72b8; }
.ucd-pillar--red .ucd-pillar-title { color: #1a1a1a; }
.ucd-pillar--red .ucd-pillar-desc  { color: rgba(26, 26, 26, 0.72); }
.ucd-pillar--red .ucd-pillar-icon  { background: #c9b8e3; color: #5a4585; }

/* Variant — Mint (soft sage pastel) */
.ucd-pillar--dark {
    background: #d9e8d3;
}
.ucd-pillar--dark:hover {
    background: #c4dbbb;
    transform: translateY(-10px);
    box-shadow: 0 30px 50px -24px rgba(111, 151, 100, 0.45);
}
.ucd-pillar--dark .ucd-pillar-num   { color: #6f9764; }
.ucd-pillar--dark .ucd-pillar-title { color: #1a1a1a; }
.ucd-pillar--dark .ucd-pillar-desc  { color: rgba(26, 26, 26, 0.72); }
.ucd-pillar--dark .ucd-pillar-icon  { background: #b5d2a8; color: #4a6f41; }

/* Shared inner typography */
.ucd-pillar-num {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    margin-bottom: 32px;
}
.ucd-pillar-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}
.ucd-pillar-desc {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}

/* SUMMARY — centered closing paragraph with a slim top accent rule */
.ucd-summary {
    background: #ffffff;
    padding: 40px 0 40px;
}
.ucd-summary .container { max-width: min(1280px, 100%); }
.ucd-summary-row {
    padding-top: 16px;
    position: relative;
    text-align: center;
}
.ucd-summary-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--primary);
}
.ucd-summary-text {
    margin: 0 auto;
    font-size: clamp(1.15rem, 1.5vw, 1.5rem);
    line-height: 1.55;
    color: #1a1a1a;
    font-weight: 400;
    letter-spacing: -0.012em;
    max-width: 1100px;
    text-align: center;
}

@media (max-width: 880px) {
    .ucd-summary { padding: 0 0 60px; }
    .ucd-summary-row { padding-top: 14px; }
}

/* NEXT — large clickable strip linking back to all industries */
.ucd-next {
    background: #ffffff;
    padding: 40px 0 40px;
}
.ucd-next .container { max-width: min(1280px, 100%); }
.ucd-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 40px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 20px;
    text-decoration: none;
    color: inherit;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                box-shadow 0.4s var(--ease),
                transform 0.4s var(--ease);
}
.ucd-next-card:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 24px 50px -22px rgba(177,15,26,0.4);
    transform: translateY(-3px);
}
.ucd-next-meta { display: flex; flex-direction: column; gap: 6px; }
.ucd-next-label {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #0a0a0a;
    transition: color 0.4s var(--ease);
}
.ucd-next-sub {
    font-size: 0.92rem;
    color: rgba(0,0,0,0.55);
    transition: color 0.4s var(--ease);
}
.ucd-next-card:hover .ucd-next-label,
.ucd-next-card:hover .ucd-next-sub { color: #ffffff; }
.ucd-next-card:hover .ucd-next-sub { opacity: 0.85; }
.ucd-next-arrow {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--primary);
    transition: all 0.4s var(--ease);
    flex-shrink: 0;
}
.ucd-next-arrow svg { width: 22px; height: 22px; transition: transform 0.4s var(--ease); }
.ucd-next-card:hover .ucd-next-arrow {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
}
.ucd-next-card:hover .ucd-next-arrow svg { transform: translateX(4px); }

/* Responsive */
@media (max-width: 880px) {
    .ucd-pillar-grid { grid-template-columns: 1fr; gap: 14px; }
    .ucd-pillar { min-height: auto; padding: 36px 28px; }
}
@media (max-width: 680px) {
    .ucd-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .ucd-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .ucd-hero-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
    .ucd-pillars { padding: 30px 0 30px; }
}

/* =========================================================================
   CONTACT PAGE  (contact.html)
   Standalone page styles — does not affect any other page.
   Prefix: .cp- (Contact Page)
   ========================================================================= */

/* HERO — cream bg, breadcrumb + editorial headline */
.cp-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.cp-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.cp-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}

.cp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.cp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.cp-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.cp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.cp-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.cp-breadcrumb a:hover { color: var(--primary); }
.cp-breadcrumb-sep { color: rgba(0,0,0,0.28); font-size: 0.9rem; }
.cp-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.cp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0;
}
.cp-hero-title em { color: var(--primary); font-style: normal; font-weight: 700; }

/* CONTACT FORM SECTION — form on the left, side panel on the right */
.cp-form-section {
    background: #ffffff;
    padding: 40px 0 40px;
}
.cp-form-section .container { max-width: min(1280px, 100%); }

.cp-form-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    padding-top: 56px;
    border-top: 1px solid rgba(0,0,0,0.1);
    align-items: start;
}

/* Form */
.cp-form { display: block; }
.cp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
}
.cp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cp-field--full { grid-column: 1 / -1; }
.cp-field-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
}
.cp-field input,
.cp-field textarea {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: #0a0a0a;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.18);
    background: transparent;
    width: 100%;
    transition: border-color 0.3s var(--ease);
    resize: vertical;
}
.cp-field input:focus,
.cp-field textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
}
.cp-field input::placeholder,
.cp-field textarea::placeholder {
    color: rgba(0,0,0,0.35);
}
.cp-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    background: #0a0a0a;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.cp-form-submit-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.cp-form-submit:hover {
    background: var(--primary);
    transform: translateY(-2px);
}
.cp-form-submit:hover .cp-form-submit-arrow { transform: translateX(6px); }

.cp-form-thanks {
    margin-top: 24px;
    padding: 18px 22px;
    border-radius: 12px;
    background: #ecf6e8;
    color: #2a5223;
    font-weight: 600;
    font-size: 0.96rem;
}

/* CAPTCHA row — math question + refresh button next to label */
.cp-captcha .cp-field-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #0a0a0a;
}
.cp-captcha-a,
.cp-captcha-b {
    display: inline-block;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--primary);
    font-family: var(--font-display, var(--font-sans));
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}
.cp-captcha-op {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
}
.cp-captcha-refresh {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.6);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-left: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.25s var(--ease),
                border-color 0.25s var(--ease),
                background 0.25s var(--ease),
                transform 0.5s var(--ease);
}
.cp-captcha-refresh:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(177, 15, 26, 0.05);
    transform: rotate(180deg);
}
.cp-captcha input { max-width: 140px; }

/* Inline field-level errors */
.cp-field-error {
    display: block;
    min-height: 1.1em;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
}
.cp-field input.is-invalid,
.cp-field textarea.is-invalid {
    border-bottom-color: var(--primary);
}

/* Submit-button loading state */
.cp-form-submit.is-loading {
    opacity: 0.7;
    cursor: progress;
}
.cp-form-submit:disabled {
    pointer-events: none;
}

/* Banner shown under the submit button after a fetch resolves */
.cp-form-status {
    margin-top: 22px;
    padding: 16px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
}
.cp-form-status--success {
    background: #ecf6e8;
    color: #2a5223;
    border: 1px solid #c7e3bd;
}
.cp-form-status--error {
    background: #fdecec;
    color: #8a1f1f;
    border: 1px solid #f4c6c6;
}

/* Side panel — primary red feature card */
.cp-side {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 26px 50px -28px rgba(177,15,26,0.45);
}
.cp-side-accent {
    position: absolute;
    top: 0;
    left: 36px;
    width: 60px;
    height: 3px;
    background: #ffffff;
}
.cp-side-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 0;
}
.cp-side-block + .cp-side-block {
    border-top: 1px solid rgba(255,255,255,0.18);
}
.cp-side-block:first-of-type { padding-top: 14px; }
.cp-side-block:last-of-type  { padding-bottom: 0; }

.cp-side-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cp-side-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    flex-shrink: 0;
}
.cp-side-icon svg { width: 18px; height: 18px; }

.cp-side-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}
.cp-side-email {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.9vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s var(--ease);
    word-break: break-word;
}
.cp-side-email-arrow {
    color: #ffffff;
    transition: transform 0.3s var(--ease);
    flex-shrink: 0;
    font-size: 1.1rem;
}
.cp-side-email:hover { opacity: 0.85; }
.cp-side-email:hover .cp-side-email-arrow { transform: translateX(6px); }

/* Phone list — one entry per region, label on left, dialable number on right */
.cp-side-phones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cp-side-phones li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cp-side-phones li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.cp-side-region {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.cp-side-phones a {
    color: #ffffff;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: opacity 0.3s var(--ease);
}
.cp-side-phones a:hover { opacity: 0.82; }

.cp-side-social { display: flex; gap: 10px; }
.cp-side-social-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.28);
    color: #ffffff;
    transition: all 0.3s var(--ease);
}
.cp-side-social-icon svg { width: 17px; height: 17px; }
.cp-side-social-icon:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--primary);
    transform: translateY(-2px);
}

/* OFFICES — 3-column grid with pastel cards */
.cp-offices {
    background: #ffffff;
    padding: 40px 0 90px;
}
.cp-offices .container { max-width: min(1280px, 100%); }
.cp-offices-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin: 0 0 44px;
}
.cp-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
}
.cp-offices-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: #0a0a0a;
    margin: 0;
}

.cp-offices-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}
.cp-office {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    overflow: hidden;
    flex: 0 1 calc((100% - 48px) / 3);
    min-width: 280px;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.4s var(--ease);
}
/* First two cards (India HQ, USA) span half-width — row 1; remaining 3 take a third each on row 2 */
.cp-office:nth-child(-n+2) {
    flex: 0 1 calc((100% - 24px) / 2);
}
.cp-office:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, 0.25);
    box-shadow: 0 30px 56px -28px rgba(0,0,0,0.2);
}

/* Map area at the top of each office card */
.cp-office-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f0eee9;
    overflow: hidden;
}
.cp-office-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.25) saturate(0.9);
    transition: filter 0.5s var(--ease);
}
.cp-office:hover .cp-office-map iframe {
    filter: grayscale(0) saturate(1);
}

/* Custom address pill placed over the map to visually replace
   Google's default place overlay. Stretched almost edge-to-edge
   so Google's native pill (which can be wider/taller than ours
   when it includes rating + reviews) is fully covered. */
.cp-office-map .cp-office-map-label {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: 340px;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow:
        0 4px 14px -2px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    z-index: 5;
    pointer-events: none;
}
.cp-office-map-title {
    display: block;
    font: 600 14.5px/1.2 var(--font-sans);
    color: #1d1d1f;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}
.cp-office-map-addr {
    display: block;
    font: 400 12px/1.45 var(--font-sans);
    color: #515154;
    margin: 0;
}

/* Address label — right of the pin, vertically centered with it */
.cp-office-map-pin-label {
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    font: 700 16px/1.35 var(--font-sans);
    color: var(--primary);
    letter-spacing: -0.008em;
    text-shadow:
        0 0 4px #ffffff,
        0 0 4px #ffffff,
        0 0 8px #ffffff,
        0 0 8px #ffffff;
    z-index: 4;
    pointer-events: none;
    white-space: nowrap;
}
.cp-office-map-pin-label strong {
    display: inline-block;
    margin-bottom: 2px;
}

.cp-office-body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.cp-office-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}
.cp-office-flag {
    display: inline-flex;
    width: 34px;
    height: 22px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.cp-office-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cp-office-country {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0;
}
.cp-office-tag {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: var(--primary);
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}
.cp-office-address {
    font-size: 0.96rem;
    line-height: 1.6;
    margin: 0 0 22px;
    color: rgba(0,0,0,0.65);
    flex-grow: 1;
}
.cp-office-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: gap 0.3s var(--ease);
}
.cp-office-directions:hover { gap: 14px; }

/* Responsive */
@media (max-width: 980px) {
    .cp-form-row { grid-template-columns: 1fr; gap: 50px; padding-top: 40px; }
    .cp-side { order: -1; padding: 28px 26px; }
}
@media (max-width: 880px) {
    .cp-offices-grid { gap: 18px; }
    .cp-office,
    .cp-office:nth-child(-n+2) { flex: 1 1 100%; min-width: 0; }
    .cp-office-body { padding: 22px 22px 24px; }
    .cp-form-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 680px) {
    .cp-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .cp-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .cp-hero-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .cp-form-section { padding: 30px 0 30px; }
    .cp-offices { padding: 30px 0 80px; }
}

/* Hero lede — short paragraph under hero title */
.cp-hero-lede {
    font-size: clamp(1.05rem, 1.45vw, 1.2rem);
    line-height: 1.6;
    color: rgba(0,0,0,0.7);
    margin: 24px 0 0;
    max-width: 640px;
    font-weight: 400;
}

/* Form section head — eyebrow + section title above the form */
.cp-form-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin: 0 0 12px;
}
.cp-form-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.028em;
    color: #0a0a0a;
    margin: 0;
}

/* Side panel note — for the response-time block */
.cp-side-note {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 0.98rem;
    line-height: 1.6;
}
.cp-side-note strong {
    color: #ffffff;
    font-weight: 700;
}

/* Office phone link */
.cp-office-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(0,0,0,0.78);
    font-size: 0.93rem;
    font-weight: 500;
    text-decoration: none;
    margin: -6px 0 18px;
    transition: color 0.25s var(--ease);
}
.cp-office-phone svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--primary);
}
.cp-office-phone:hover { color: var(--primary); }

/* Offices section subtitle */
.cp-offices-sub {
    margin: 4px 0 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.62);
    max-width: 620px;
}

@media (max-width: 680px) {
    .cp-hero-lede { font-size: 1rem; margin-top: 18px; }
    .cp-form-title { font-size: 1.6rem; }
    .cp-offices-sub { font-size: 0.98rem; }
}

/* =========================================================================
   PARTNERSHIP PAGE  (partnership.html)
   Editorial numbered rows for partner types — no colored cards.
   Prefix: .pp- (Partnership Page)
   ========================================================================= */

/* HERO — matches the cream internal-page hero pattern */
.pp-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.pp-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.pp-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.pp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.pp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.pp-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.pp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.pp-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.pp-breadcrumb a:hover { color: var(--primary); }
.pp-breadcrumb-sep { color: rgba(0,0,0,0.28); font-size: 0.9rem; }
.pp-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.pp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0;
}
.pp-hero-title em { color: var(--primary); font-style: normal; font-weight: 700; }

/* Shared section tag (red eyebrow) */
.pp-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
}

/* INTRO — small clean paragraph below the hero */
.pp-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.pp-intro .container { max-width: min(1280px, 100%); }
.pp-intro-card {
    position: relative;
    background:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(252, 228, 211, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    padding: 52px 56px 50px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 30px 60px -32px rgba(0,0,0,0.16);
}
.pp-intro-decor {
    position: absolute;
    width: 110px; height: 110px;
    color: var(--primary);
    opacity: 0.12;
    pointer-events: none;
}
.pp-intro-decor svg { width: 100%; height: 100%; }
.pp-intro-decor--tl { top: -18px; left: -18px; transform: rotate(-12deg); }
.pp-intro-decor--br { bottom: -22px; right: -22px; transform: rotate(8deg); }

.pp-intro-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.pp-intro-content .pp-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pp-intro-content .pp-section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
}
.pp-intro-text {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.55;
    color: #0a0a0a;
    font-weight: 400;
    letter-spacing: -0.012em;
    max-width: none;
    position: relative;
}
.pp-intro-text::before,
.pp-intro-text::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin: 0 auto;
    opacity: 0.6;
}
.pp-intro-text::before { margin-bottom: 18px; }
.pp-intro-text::after  { margin-top: 18px; }

@media (max-width: 760px) {
    .pp-intro-card { padding: 36px 24px 32px; border-radius: 16px; }
    .pp-intro-decor { width: 70px; height: 70px; opacity: 0.10; }
    .pp-intro-content { gap: 16px; }
}

/* PARTNER TYPES — bento grid */
.pp-types {
    background: #ffffff;
    padding: 40px 0 40px;
}
.pp-types .container { max-width: min(1280px, 100%); }
.pp-types-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: none;
    margin: 0 0 48px;
}
.pp-types-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0;
}
.pp-types-title em { color: var(--primary); font-style: normal; font-weight: 700; }
.pp-types-sub {
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    color: rgba(0,0,0,0.65);
    margin: 0;
    max-width: none;
}

/* Bento grid — 5 equal tiles, 3 on top, 2 centered below */
.pp-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
.pp-tile {
    position: relative;
    grid-column: span 2;
    padding: 36px 32px 34px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                transform 0.4s var(--ease),
                box-shadow 0.4s var(--ease);
    overflow: hidden;
    cursor: pointer;
}
.pp-tile:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 28px 50px -24px rgba(177, 15, 26, 0.45);
}

/* Bottom row — 2 tiles each spanning half the grid (3 cols of 6) */
.pp-tile:nth-child(4) { grid-column: 1 / span 3; }
.pp-tile:nth-child(5) { grid-column: 4 / span 3; }

.pp-tile-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 16px;
    transition: color 0.4s var(--ease);
}
.pp-tile-desc {
    font-size: 0.96rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.62);
    margin: 0;
    transition: color 0.4s var(--ease);
}
.pp-tile:hover .pp-tile-title { color: #ffffff; }
.pp-tile:hover .pp-tile-desc  { color: rgba(255, 255, 255, 0.88); }

/* BENEFITS — soft pastel gradient, right side kept white */
.pp-benefits {
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(252, 228, 211, 0.65) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 85%, rgba(217, 232, 211, 0.5) 0%, transparent 70%),
        #ffffff;
    padding: 40px 0 40px;
}
.pp-benefits .container { max-width: min(1280px, 100%); }
.pp-benefits-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 800px;
    margin: 0 0 48px;
}
.pp-benefits-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0;
}
.pp-benefits-title em { color: var(--primary); font-style: normal; font-weight: 700; }

.pp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.pp-benefit {
    position: relative;
    padding: 38px 36px 36px;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.5s var(--ease);
}
.pp-benefit-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #1a1a1a;
    margin: 0 0 14px;
}
.pp-benefit-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

/* Variant — Peach */
.pp-benefit--peach { background: #fce4d3; }
.pp-benefit--peach:hover {
    background: #fbd7be;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(200, 122, 69, 0.4);
}
.pp-benefit--peach .pp-benefit-text { color: rgba(26, 26, 26, 0.72); }

/* Variant — Lavender */
.pp-benefit--lavender { background: #e5ddf1; }
.pp-benefit--lavender:hover {
    background: #d6c8ec;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(138, 114, 184, 0.4);
}
.pp-benefit--lavender .pp-benefit-text { color: rgba(26, 26, 26, 0.72); }

/* Variant — Mint */
.pp-benefit--mint { background: #d9e8d3; }
.pp-benefit--mint:hover {
    background: #c4dbbb;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(111, 151, 100, 0.4);
}
.pp-benefit--mint .pp-benefit-text { color: rgba(26, 26, 26, 0.72); }

/* Variant — Sky blue */
.pp-benefit--sky { background: #d7e6f1; }
.pp-benefit--sky:hover {
    background: #c4d7e8;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(95, 130, 165, 0.4);
}
.pp-benefit--sky .pp-benefit-text { color: rgba(26, 26, 26, 0.72); }

/* Responsive */
@media (max-width: 980px) {
    .pp-intro-row { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
    .pp-bento { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .pp-tile { grid-column: span 2; }
    .pp-tile:nth-child(4) { grid-column: 1 / span 2; }
    .pp-tile:nth-child(5) { grid-column: 3 / span 2; }
    .pp-benefits-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 680px) {
    .pp-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .pp-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .pp-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .pp-intro { padding: 30px 0 30px; }
    .pp-types { padding: 30px 0 30px; }
    .pp-bento { grid-template-columns: 1fr; gap: 14px; }
    .pp-tile { grid-column: 1 / -1 !important; }
    .pp-benefits { padding: 30px 0 30px; }
    .pp-benefit { padding: 30px 26px 28px; }
}

/* =========================================================================
   COMPLIANCE PAGE  (compliances.html)
   Privacy regulations list + Security features grid.
   Prefix: .cmp- (Compliance)
   ========================================================================= */

/* HERO — same cream pattern */
.cmp-hero {
    position: relative;
    padding: calc(var(--nav-h) + 50px) 0 30px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.cmp-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.cmp-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.cmp-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.cmp-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.cmp-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.cmp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.cmp-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.cmp-breadcrumb a:hover { color: var(--primary); }
.cmp-breadcrumb-sep { color: rgba(0,0,0,0.28); font-size: 0.9rem; }
.cmp-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.cmp-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0;
}
.cmp-hero-title em { color: var(--primary); font-style: normal; font-weight: 700; }

/* Shared section tag */
.cmp-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
}

/* INTRO paragraph below hero */
.cmp-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.cmp-intro .container { max-width: min(1280px, 100%); }
.cmp-intro-card {
    position: relative;
    background:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(252, 228, 211, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    padding: 52px 56px 50px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 30px 60px -32px rgba(0,0,0,0.16);
}
.cmp-intro-decor {
    position: absolute;
    width: 110px; height: 110px;
    color: var(--primary);
    opacity: 0.12;
    pointer-events: none;
}
.cmp-intro-decor svg { width: 100%; height: 100%; }
.cmp-intro-decor--tl { top: -18px; left: -18px; transform: rotate(-12deg); }
.cmp-intro-decor--br { bottom: -22px; right: -22px; transform: rotate(8deg); }

.cmp-intro-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.cmp-intro-content .cmp-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cmp-intro-content .cmp-section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
}
.cmp-intro-text {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.55;
    color: #0a0a0a;
    font-weight: 400;
    letter-spacing: -0.012em;
    position: relative;
}
.cmp-intro-text::before,
.cmp-intro-text::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin: 0 auto;
    opacity: 0.6;
}
.cmp-intro-text::before { margin-bottom: 18px; }
.cmp-intro-text::after  { margin-top: 18px; }

@media (max-width: 760px) {
    .cmp-intro-card { padding: 36px 24px 32px; border-radius: 16px; }
    .cmp-intro-decor { width: 70px; height: 70px; opacity: 0.10; }
    .cmp-intro-content { gap: 16px; }
}

/* Shared section head */
.cmp-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 48px;
}
.cmp-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0;
}
.cmp-section-title em { color: var(--primary); font-style: normal; font-weight: 700; }
.cmp-section-sub {
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.6;
    color: rgba(0,0,0,0.65);
    margin: 0;
}

/* PRIVACY — regulations list with badges */
.cmp-privacy {
    background: #ffffff;
    padding: 40px 0 40px;
}
.cmp-privacy .container { max-width: min(1280px, 100%); }

.cmp-regs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.cmp-reg {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    padding: 26px 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.cmp-reg-accent {
    display: none;
}
.cmp-reg:hover {
    transform: translateY(-4px);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 28px 56px -24px rgba(177, 15, 26, 0.45);
}

.cmp-reg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cmp-reg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(177, 15, 26, 0.07);
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.4s var(--ease);
}
.cmp-reg-icon svg { width: 26px; height: 26px; }
.cmp-reg:hover .cmp-reg-icon { background: rgba(255,255,255,0.18); color: #ffffff; }
.cmp-reg:hover .cmp-reg-badge { background: rgba(255,255,255,0.18); color: #ffffff; }
.cmp-reg:hover .cmp-reg-title { color: #ffffff; }
.cmp-reg:hover .cmp-reg-desc { color: rgba(255,255,255,0.88); }

.cmp-reg-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--primary);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    border-radius: 999px;
    text-transform: uppercase;
    text-align: center;
}
.cmp-reg-badge--wide { letter-spacing: 0.12em; }

.cmp-reg-body { display: flex; flex-direction: column; gap: 8px; }
.cmp-reg-region {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
}
.cmp-reg-title {
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.24;
    letter-spacing: -0.018em;
    color: #0a0a0a;
    margin: 4px 0 0;
}
.cmp-reg-desc {
    font-size: 0.96rem;
    line-height: 1.65;
    color: rgba(0,0,0,0.65);
    margin: 6px 0 0;
    max-width: none;
}

.cmp-reg-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.cmp-reg-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(0,0,0,0.55);
    letter-spacing: -0.005em;
}
.cmp-reg-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2c8a4a;
    box-shadow: 0 0 0 3px rgba(44, 138, 74, 0.18);
    animation: cmpStatusPulse 2.6s ease-in-out infinite;
}
@keyframes cmpStatusPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(44, 138, 74, 0.18); }
    50%      { box-shadow: 0 0 0 5px rgba(44, 138, 74, 0.10); }
}

.cmp-regs-note {
    margin: 32px 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.55);
    text-align: center;
    padding: 16px 22px;
    background: rgba(177, 15, 26, 0.03);
    border-radius: 12px;
    border: 1px dashed rgba(177, 15, 26, 0.15);
}

@media (max-width: 760px) {
    .cmp-regs { grid-template-columns: 1fr; gap: 16px; }
    .cmp-reg { padding: 22px 22px 18px; }
}

/* SECURITY — features grid */
.cmp-security {
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(252, 228, 211, 0.65) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 85%, rgba(217, 232, 211, 0.5) 0%, transparent 70%),
        #ffffff;
    padding: 40px 0 40px;
}
.cmp-security .container { max-width: min(1280px, 100%); }

.cmp-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.cmp-feature {
    position: relative;
    padding: 36px 32px 32px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.4s var(--ease),
                border-color 0.4s var(--ease),
                transform 0.4s var(--ease),
                box-shadow 0.4s var(--ease);
}
.cmp-feature:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 28px 50px -24px rgba(177, 15, 26, 0.45);
}
.cmp-feature-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--primary);
    margin-bottom: 22px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cmp-feature-icon svg { width: 22px; height: 22px; }
.cmp-feature:hover .cmp-feature-icon { background: rgba(255, 255, 255, 0.18); color: #ffffff; }

.cmp-feature-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #0a0a0a;
    margin: 0 0 14px;
    transition: color 0.4s var(--ease);
}
.cmp-feature-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.65);
    margin: 0;
    transition: color 0.4s var(--ease);
}
.cmp-feature:hover .cmp-feature-title { color: #ffffff; }
.cmp-feature:hover .cmp-feature-desc  { color: rgba(255, 255, 255, 0.88); }

/* Pastel color variants — each card has a distinct soft tint;
   hover deepens that same hue (no red flip) */
.cmp-feature--peach    { background: #fce4d3; border-color: rgba(0,0,0,0.05); }
.cmp-feature--peach .cmp-feature-icon { background: #f8cfb3; color: #8a4a26; }
.cmp-feature--peach:hover {
    background: #f8cfb3;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 26px 50px -26px rgba(177, 99, 50, 0.4);
}
.cmp-feature--peach:hover .cmp-feature-icon { background: #efb893; color: #6b3618; }

.cmp-feature--lavender { background: #e5ddf1; border-color: rgba(0,0,0,0.05); }
.cmp-feature--lavender .cmp-feature-icon { background: #d2c4e6; color: #56438a; }
.cmp-feature--lavender:hover {
    background: #d2c4e6;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 26px 50px -26px rgba(110, 80, 165, 0.4);
}
.cmp-feature--lavender:hover .cmp-feature-icon { background: #bba8d6; color: #3f2f6a; }

.cmp-feature--mint     { background: #d9e8d3; border-color: rgba(0,0,0,0.05); }
.cmp-feature--mint .cmp-feature-icon { background: #c2dbb8; color: #3d6a2f; }
.cmp-feature--mint:hover {
    background: #c2dbb8;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 26px 50px -26px rgba(111, 151, 100, 0.4);
}
.cmp-feature--mint:hover .cmp-feature-icon { background: #a8c89a; color: #2d521f; }

.cmp-feature--sky      { background: #d7e6f1; border-color: rgba(0,0,0,0.05); }
.cmp-feature--sky .cmp-feature-icon { background: #bdd4e6; color: #2e5a85; }
.cmp-feature--sky:hover {
    background: #bdd4e6;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 26px 50px -26px rgba(95, 130, 165, 0.4);
}
.cmp-feature--sky:hover .cmp-feature-icon { background: #9fc0d8; color: #1d4368; }

/* Variant cards keep their own text color on hover (no white flip) */
.cmp-feature--peach:hover .cmp-feature-title,
.cmp-feature--lavender:hover .cmp-feature-title,
.cmp-feature--mint:hover .cmp-feature-title,
.cmp-feature--sky:hover .cmp-feature-title { color: #0a0a0a; }
.cmp-feature--peach:hover .cmp-feature-desc,
.cmp-feature--lavender:hover .cmp-feature-desc,
.cmp-feature--mint:hover .cmp-feature-desc,
.cmp-feature--sky:hover .cmp-feature-desc { color: rgba(0,0,0,0.7); }

/* Responsive */
@media (max-width: 980px) {
    .cmp-intro-row { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
    .cmp-features { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 680px) {
    .cmp-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .cmp-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .cmp-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .cmp-intro { padding: 30px 0 30px; }
    .cmp-privacy { padding: 30px 0 30px; }
    .cmp-reg { padding: 22px 22px 20px; }
    .cmp-reg-badge { justify-self: start; }
    .cmp-security { padding: 30px 0 30px; }
    .cmp-feature { padding: 28px 24px 26px; }
}

/* =========================================================================
   RESEARCH PAGE  (research.html)
   How It Works steps + Why Choose Xafe benefits.
   Prefix: .res- (Research)
   ========================================================================= */

/* HERO */
.res-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.res-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.res-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.res-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.res-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.res-hero-graphic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.res-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(0,0,0,0.5);
    margin-bottom: 36px;
}
.res-breadcrumb a {
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.res-breadcrumb a:hover { color: var(--primary); }
.res-breadcrumb-sep { color: rgba(0,0,0,0.28); font-size: 0.9rem; }
.res-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.res-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: #0a0a0a;
    margin: 0;
}
.res-hero-title em { color: var(--primary); font-style: normal; font-weight: 700; }

.res-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--primary);
}

/* INTRO paragraph below hero */
.res-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.res-intro .container { max-width: min(1280px, 100%); }
.res-intro-card {
    position: relative;
    background:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(252, 228, 211, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    padding: 52px 56px 50px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 30px 60px -32px rgba(0,0,0,0.16);
}
.res-intro-decor {
    position: absolute;
    width: 110px; height: 110px;
    color: var(--primary);
    opacity: 0.12;
    pointer-events: none;
}
.res-intro-decor svg { width: 100%; height: 100%; }
.res-intro-decor--tl { top: -18px; left: -18px; transform: rotate(-12deg); }
.res-intro-decor--br { bottom: -22px; right: -22px; transform: rotate(8deg); }

.res-intro-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.res-intro-content .res-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.res-intro-content .res-section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
}
.res-intro-text {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.55;
    color: #0a0a0a;
    font-weight: 400;
    letter-spacing: -0.012em;
    position: relative;
}
.res-intro-text::before,
.res-intro-text::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin: 0 auto;
    opacity: 0.6;
}
.res-intro-text::before { margin-bottom: 18px; }
.res-intro-text::after  { margin-top: 18px; }

@media (max-width: 760px) {
    .res-intro-card { padding: 36px 24px 32px; border-radius: 16px; }
    .res-intro-decor { width: 70px; height: 70px; opacity: 0.10; }
    .res-intro-content { gap: 16px; }
}

/* Shared section head */
.res-section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 0 48px;
}
.res-section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    margin: 0;
}
.res-section-title em { color: var(--primary); font-style: normal; font-weight: 700; }

/* STEPS — How It Works */
.res-steps {
    background: #ffffff;
    padding: 40px 0 40px;
}
.res-steps .container { max-width: min(1280px, 100%); }
/* Timeline-style vertical stepper — full width */
.res-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.res-step {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px;
    padding: 0 0 44px;
}
.res-step:last-child { padding-bottom: 0; }

/* Vertical connecting line between markers */
.res-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 31px;
    top: 64px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(177, 15, 26, 0.35) 0%, rgba(177, 15, 26, 0.10) 100%);
}

.res-step-marker {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 0 0 6px rgba(177, 15, 26, 0.08),
        0 14px 32px -8px rgba(177, 15, 26, 0.4);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.res-step-marker-num {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.res-step:hover .res-step-marker {
    transform: scale(1.06);
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, 0.12),
        0 18px 38px -8px rgba(177, 15, 26, 0.5);
}

.res-step-body {
    padding-top: 10px;
}
.res-step-label {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}
.res-step-title {
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.res-step-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(0,0,0,0.65);
    margin: 0;
}
.res-step-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(177, 15, 26, 0.3);
    transition: border-color 0.25s ease;
}
.res-step-link:hover { border-bottom-color: var(--primary); }

@media (max-width: 680px) {
    .res-step { grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 32px; }
    .res-step-marker { width: 48px; height: 48px; box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.08), 0 10px 22px -6px rgba(177, 15, 26, 0.4); }
    .res-step-marker-num { font-size: 1rem; }
    .res-step:not(:last-child)::before { left: 23px; top: 48px; }
    .res-step-body { padding-top: 4px; }
}

/* BENEFITS — Why Choose Xafe (matches partnership benefits soft pastel gradient) */
.res-benefits {
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(252, 228, 211, 0.65) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 85%, rgba(217, 232, 211, 0.5) 0%, transparent 70%),
        #ffffff;
    padding: 40px 0 40px;
}
.res-benefits .container { max-width: min(1280px, 100%); }
.res-benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.res-benefit {
    position: relative;
    padding: 36px 32px 32px;
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.5s var(--ease);
}
.res-benefit-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 22px;
    transition: background 0.4s var(--ease);
}
.res-benefit-icon svg { width: 22px; height: 22px; }
.res-benefit-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: #1a1a1a;
}
.res-benefit-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    color: rgba(26, 26, 26, 0.72);
}

/* Variant — Peach */
.res-benefit--peach { background: #fce4d3; }
.res-benefit--peach:hover {
    background: #fbd7be;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(200, 122, 69, 0.4);
}
.res-benefit--peach .res-benefit-icon { background: #f6c89e; color: #8a4f25; }

/* Variant — Lavender */
.res-benefit--lavender { background: #e5ddf1; }
.res-benefit--lavender:hover {
    background: #d6c8ec;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(138, 114, 184, 0.4);
}
.res-benefit--lavender .res-benefit-icon { background: #c9b8e3; color: #5a4585; }

/* Variant — Mint */
.res-benefit--mint { background: #d9e8d3; }
.res-benefit--mint:hover {
    background: #c4dbbb;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(111, 151, 100, 0.4);
}
.res-benefit--mint .res-benefit-icon { background: #b5d2a8; color: #4a6f41; }

/* Variant — Sky blue */
.res-benefit--sky { background: #d7e6f1; }
.res-benefit--sky:hover {
    background: #c4d7e8;
    transform: translateY(-6px);
    box-shadow: 0 26px 50px -26px rgba(95, 130, 165, 0.4);
}
.res-benefit--sky .res-benefit-icon { background: #b9d0e4; color: #3e5f80; }

/* Responsive */
@media (max-width: 980px) {
    .res-intro-row { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
    .res-steps-grid,
    .res-benefits-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 680px) {
    .res-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .res-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .res-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .res-intro { padding: 30px 0 30px; }
    .res-steps { padding: 30px 0 30px; }
    .res-benefits { padding: 30px 0 30px; }
    .res-step,
    .res-benefit { padding: 28px 24px 26px; }
}


/* =============================================================================
   ALGORITHMS — Shared sub-page styles  (.alg-)
   Used by: anonymization.html, obfuscation.html, privatization.html,
            confidential-computing.html, generalization.html
   ============================================================================= */

/* ---------- HERO ---------- */
.alg-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.alg-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.alg-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.alg-hero-bg {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.alg-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.alg-hero-graphic {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;
}

/* Dots — pulse with staggered timing */
.alg-hero-graphic .alg-dots circle {
    animation: algDotPulse 3.6s ease-in-out infinite;
}
.alg-hero-graphic .alg-dots circle:nth-child(2) { animation-delay: 0.4s; }
.alg-hero-graphic .alg-dots circle:nth-child(3) { animation-delay: 0.8s; }
.alg-hero-graphic .alg-dots circle:nth-child(4) { animation-delay: 1.2s; }
.alg-hero-graphic .alg-dots circle:nth-child(5) { animation-delay: 1.6s; }
.alg-hero-graphic .alg-dots circle:nth-child(6) { animation-delay: 2.0s; }
.alg-hero-graphic .alg-dots circle:nth-child(7) { animation-delay: 2.4s; }
.alg-hero-graphic .alg-dots circle:nth-child(8) { animation-delay: 2.8s; }
@keyframes algDotPulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.85; }
}

/* Curve — continuous draw/flow animation */
.alg-hero-graphic .alg-curve {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: algCurveDraw 9s ease-in-out infinite;
}
@keyframes algCurveDraw {
    0%   { stroke-dashoffset: 900; }
    45%  { stroke-dashoffset: 0; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -900; }
}

/* Area — gentle opacity breathing */
.alg-hero-graphic .alg-area {
    animation: algAreaBreathe 7s ease-in-out infinite;
}
@keyframes algAreaBreathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Connector lines — dashes flow */
.alg-hero-graphic .alg-lines line {
    animation: algDashFlow 6s linear infinite;
}
@keyframes algDashFlow {
    to { stroke-dashoffset: -28; }
}

.alg-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #6b6b6b);
    margin-bottom: 32px;
}
.alg-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.alg-breadcrumb a:hover { color: #b10f1a; }
.alg-breadcrumb-sep { color: rgba(0,0,0,0.3); }
.alg-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.alg-hero-title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: #0a0a0a;
    margin: 0;
}
.alg-hero-title em {
    font-style: normal;
    color: #b10f1a;
}

/* ---------- SECTION HEAD / TAG (shared) ---------- */
.alg-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b10f1a;
    background: rgba(177, 15, 26, 0.08);
    padding: 7px 14px;
    border-radius: 999px;
}
.alg-section-head {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 56px;
    max-width: 760px;
}
.alg-section-head .alg-section-tag { align-self: flex-start; }
.alg-section-title {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #0a0a0a;
    margin: 0;
}
.alg-section-title em { font-style: normal; color: #b10f1a; }

/* ---------- IMAGE PLACEHOLDER (shared) ---------- */
.alg-img-placeholder {
    position: relative;
    width: 100%;
    border-radius: 20px;
    background:
        linear-gradient(135deg, #f7f3ee 0%, #faf6f2 100%);
    border: 1.5px dashed rgba(177, 15, 26, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(177, 15, 26, 0.5);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 30px 60px -32px rgba(177, 15, 26, 0.22);
}
.alg-img-placeholder svg {
    width: 60px; height: 60px;
    stroke: currentColor;
    opacity: 0.7;
}
.alg-img-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(177, 15, 26, 0.7);
}
.alg-img-placeholder--pets {
    aspect-ratio: 4 / 3;
}
.alg-img-placeholder--side {
    aspect-ratio: 4 / 5;
}
.alg-split-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    background: transparent;
    mix-blend-mode: multiply;
}

/* ---------- PETs OVERVIEW (shared top section across all algorithm sub-pages) ---------- */
.alg-pets {
    background: #ffffff;
    padding: 40px 0 40px;
}
.alg-pets-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
    align-items: center;
    padding-top: 50px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.alg-pets-content {
    display: flex; flex-direction: column;
    gap: 22px;
}
.alg-pets-content .alg-section-tag { align-self: flex-start; }
.alg-pets-content .alg-section-title { margin: 0; }
.alg-pets-desc {
    font-family: var(--font-sans);
    font-size: 1.04rem;
    line-height: 1.78;
    color: #3a3a3a;
    margin: 0;
    border-left: 3px solid #b10f1a;
    padding-left: 22px;
}

/* ---------- ALGORITHMS LANDING — Premium statement intro card ---------- */
.alg-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.alg-intro .container { max-width: min(1280px, 100%); }
.alg-intro-card {
    position: relative;
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 40px 0 32px;
    overflow: visible;
    box-shadow: none;
}
.alg-intro-decor { display: none; }
.alg-intro-split {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
}
.alg-intro-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}
.alg-intro-media {
    position: relative;
    z-index: 1;
}
.alg-intro-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    background: transparent;
    mix-blend-mode: multiply;
    object-fit: cover;
}
.alg-intro-content .alg-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.alg-intro-content .alg-section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
}
.alg-intro-heading {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #0a0a0a;
}
.alg-intro-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: #2a2a2a;
    font-weight: 400;
    letter-spacing: -0.005em;
}
.alg-intro-text::before,
.alg-intro-text::after { content: none; }

/* ---------- ALGORITHM CARDS GRID (5 PETs) ---------- */
.alg-cards-section {
    background:
        radial-gradient(ellipse 55% 45% at 10% 15%, rgba(252, 228, 211, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 85%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    padding: 40px 0 60px;
}
.alg-cards-section .container { max-width: min(1280px, 100%); }
.alg-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
/* 3-2 layout: first 3 cards span 2 cols each (row 1), last 2 span 3 cols each (row 2) */
.alg-cards > .alg-card { grid-column: span 2; }
.alg-cards > .alg-card:nth-child(4),
.alg-cards > .alg-card:nth-child(5) { grid-column: span 3; }
.alg-card {
    position: relative;
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 28px 26px 24px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.alg-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}
.alg-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 28px 50px -26px rgba(0,0,0,0.20);
}
.alg-card:hover::before { transform: scaleX(1); }
.alg-card--wide { grid-column: span 4; }

/* Pastel color variants — each card gets its own soft tint */
.alg-card--peach    { background: #fce4d3; border-color: rgba(0,0,0,0.05); }
.alg-card--peach .alg-card-icon { background: #f8cfb3; color: #8a4a26; }
.alg-card--peach:hover { background: #f8cfb3; box-shadow: 0 26px 50px -26px rgba(177, 99, 50, 0.4); }
.alg-card--peach:hover .alg-card-icon { background: #efb893; color: #6b3618; }

.alg-card--lavender { background: #e5ddf1; border-color: rgba(0,0,0,0.05); }
.alg-card--lavender .alg-card-icon { background: #d2c4e6; color: #56438a; }
.alg-card--lavender:hover { background: #d2c4e6; box-shadow: 0 26px 50px -26px rgba(110, 80, 165, 0.4); }
.alg-card--lavender:hover .alg-card-icon { background: #bba8d6; color: #3f2f6a; }

.alg-card--mint     { background: #d9e8d3; border-color: rgba(0,0,0,0.05); }
.alg-card--mint .alg-card-icon { background: #c2dbb8; color: #3d6a2f; }
.alg-card--mint:hover { background: #c2dbb8; box-shadow: 0 26px 50px -26px rgba(111, 151, 100, 0.4); }
.alg-card--mint:hover .alg-card-icon { background: #a8c89a; color: #2d521f; }

.alg-card--sky      { background: #d7e6f1; border-color: rgba(0,0,0,0.05); }
.alg-card--sky .alg-card-icon { background: #bdd4e6; color: #2e5a85; }
.alg-card--sky:hover { background: #bdd4e6; box-shadow: 0 26px 50px -26px rgba(95, 130, 165, 0.4); }
.alg-card--sky:hover .alg-card-icon { background: #9fc0d8; color: #1d4368; }

.alg-card--rose     { background: #f5d6db; border-color: rgba(0,0,0,0.05); }
.alg-card--rose .alg-card-icon { background: #edbfc7; color: #8a2e3e; }
.alg-card--rose:hover { background: #edbfc7; box-shadow: 0 26px 50px -26px rgba(180, 95, 115, 0.4); }
.alg-card--rose:hover .alg-card-icon { background: #dfa2ad; color: #6a1e2a; }

/* Variant cards: hide red top accent (color is the accent now) */
.alg-card--peach::before,
.alg-card--lavender::before,
.alg-card--mint::before,
.alg-card--sky::before,
.alg-card--rose::before { display: none; }

/* Explore link adopts each card's accent color */
.alg-card--peach    .alg-card-link { color: #8a4a26; }
.alg-card--lavender .alg-card-link { color: #56438a; }
.alg-card--mint     .alg-card-link { color: #3d6a2f; }
.alg-card--sky      .alg-card-link { color: #2e5a85; }
.alg-card--rose     .alg-card-link { color: #8a2e3e; }

.alg-card--peach:hover    .alg-card-link { color: #6b3618; }
.alg-card--lavender:hover .alg-card-link { color: #3f2f6a; }
.alg-card--mint:hover     .alg-card-link { color: #2d521f; }
.alg-card--sky:hover      .alg-card-link { color: #1d4368; }
.alg-card--rose:hover     .alg-card-link { color: #6a1e2a; }

.alg-card-num {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(0,0,0,0.35);
    letter-spacing: 0.22em;
}
.alg-card-icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--primary);
    transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.alg-card-icon svg { width: 22px; height: 22px; }
.alg-card:hover .alg-card-icon { background: rgba(177, 15, 26, 0.14); transform: rotate(-4deg); }

.alg-card-title {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.18;
    color: #0a0a0a;
    margin: 4px 0 0;
}
.alg-card-desc {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(0,0,0,0.6);
    margin: 0;
    flex: 1;
}
.alg-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.alg-card-arrow {
    display: inline-block;
    transition: transform 0.35s var(--ease);
}
.alg-card:hover .alg-card-arrow { transform: translateX(4px); }

@media (max-width: 980px) {
    .alg-cards { grid-template-columns: repeat(2, 1fr); }
    .alg-cards > .alg-card,
    .alg-cards > .alg-card:nth-child(4),
    .alg-cards > .alg-card:nth-child(5) { grid-column: span 1; }
    .alg-intro-card { padding: 40px 28px 36px; }
    .alg-intro-split { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
    .alg-cards { grid-template-columns: 1fr; }
    .alg-intro-card { padding: 32px 22px 28px; border-radius: 16px; }
    .alg-intro-decor { width: 70px; height: 70px; opacity: 0.10; }
    .alg-intro-img-placeholder { aspect-ratio: 16 / 10; }
}

/* ---------- TECHNIQUES — image (sticky, left) + numbered editorial list (right) ---------- */
.alg-techniques {
    background: #ffffff;
    padding: 40px 0 40px;
}
.alg-split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 70px;
    align-items: start;
}
.alg-split-media {
    position: sticky;
    top: calc(var(--nav-h) + 30px);
}

/* One image per row — bare image, no card chrome */
.gen-image-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.gen-image {
    position: relative;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transform-origin: left center;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(177, 15, 26, 0));
    transition: transform 0.45s var(--ease),
                filter 0.45s var(--ease);
}
.gen-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    background: transparent;
    mix-blend-mode: multiply;
    transition: filter 0.45s var(--ease);
}
.gen-image.is-active {
    transform: translateY(-3px) scale(1.045);
    /* Red glow that hugs the actual image silhouette (works through transparent PNGs) */
    filter:
        drop-shadow(0 8px 20px rgba(177, 15, 26, 0.45))
        drop-shadow(0 0 18px rgba(177, 15, 26, 0.32));
    z-index: 1;
}
.gen-image.is-active img {
    filter: saturate(1.15) brightness(1.04);
}
.alg-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.alg-list-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 24px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: padding-left 0.35s ease;
}
.alg-list-row:first-child { padding-top: 26px; }
.alg-list-row:hover {
    padding-left: 12px;
}
.alg-list-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, 0.06);
    color: var(--primary);
    border: 1px solid rgba(177, 15, 26, 0.18);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
    margin-top: 2px;
}
.alg-list-icon svg { width: 22px; height: 22px; }
.alg-list-row:hover .alg-list-icon {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    transform: scale(1.05);
}
.alg-list-num {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #b10f1a;
    line-height: 1;
}
.alg-list-content {
    display: flex; flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}
.alg-list-title {
    font-family: var(--font-sans);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #0a0a0a;
    margin: 0;
}
.alg-list-desc {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .alg-pets { padding: 30px 0 30px; }
    .alg-pets-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
    .alg-split { grid-template-columns: 1fr; gap: 40px; }
    .alg-split-media { position: static; }
    .alg-img-placeholder--side { aspect-ratio: 16 / 10; }
    .alg-list-row { grid-template-columns: 48px 1fr; gap: 20px; padding: 28px 0; }
}
@media (max-width: 680px) {
    .alg-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .alg-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .alg-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .alg-pets { padding: 30px 0 30px; }
    .alg-pets-grid { padding-top: 28px; gap: 28px; }
    .alg-img-placeholder--pets { aspect-ratio: 4 / 3; border-radius: 14px; }
    .alg-techniques { padding: 30px 0 30px; }
    .alg-section-head { margin-bottom: 36px; }
    .alg-split { gap: 32px; }
    .alg-img-placeholder--side { aspect-ratio: 4 / 3; border-radius: 14px; }
    .alg-list-row { grid-template-columns: 42px 1fr; gap: 14px; padding: 24px 0; }
    .alg-list-row:hover { padding-left: 0; }
    .alg-list-icon { width: 40px; height: 40px; border-radius: 12px; }
    .alg-list-icon svg { width: 19px; height: 19px; }
    .alg-list-desc { font-size: 0.95rem; }
}

/* Mobile-only interleave: image → content → image → content ... */
@media (max-width: 760px) {
    .alg-split--hover {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    /* Flatten wrappers so figures and articles become direct flex items */
    .alg-split--hover .alg-split-media,
    .alg-split--hover .alg-list,
    .alg-split--hover .gen-image-grid {
        display: contents;
    }
    /* Pair each image with its matching article: alternate orders */
    .alg-split--hover figure:nth-of-type(1)  { order: 1; }
    .alg-split--hover article:nth-of-type(1) { order: 2; }
    .alg-split--hover figure:nth-of-type(2)  { order: 3; }
    .alg-split--hover article:nth-of-type(2) { order: 4; }
    .alg-split--hover figure:nth-of-type(3)  { order: 5; }
    .alg-split--hover article:nth-of-type(3) { order: 6; }
    .alg-split--hover figure:nth-of-type(4)  { order: 7; }
    .alg-split--hover article:nth-of-type(4) { order: 8; }
    .alg-split--hover figure:nth-of-type(5)  { order: 9; }
    .alg-split--hover article:nth-of-type(5) { order: 10; }

    /* Accordion on mobile: tap image to reveal its content */
    .alg-split--hover .gen-image {
        cursor: pointer;
        transform: none;
        margin-left: 0;
    }
    .alg-split--hover .alg-list-row {
        display: none;
        padding: 0 0 0 28px;
        border-bottom: 0;
    }
    .alg-split--hover .alg-list-row.is-open {
        display: grid;
        animation: algRowOpen 0.28s var(--ease) both;
    }
    @keyframes algRowOpen {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* --- Privatization special case: "Differential Privacy" article has no image ---
       Show it at the very top (order 0), always visible (not part of the accordion),
       then pair the remaining images with their articles in the correct order. */
    .alg-split--hover .alg-list-row[data-img="differential"] {
        order: 0;
        display: grid;
    }
    .alg-split--hover figure[data-key="laplace"]      { order: 2; }
    .alg-split--hover article[data-img="laplace"]     { order: 3; }
    .alg-split--hover figure[data-key="gaussian"]     { order: 4; }
    .alg-split--hover article[data-img="gaussian"]    { order: 5; }
    .alg-split--hover figure[data-key="voronoi"]      { order: 6; }
    .alg-split--hover article[data-img="voronoi"]     { order: 7; }
}


/* =============================================================================
   TECHNOLOGY — Page styles  (.tech-)
   Used by technology.html
   ============================================================================= */

/* ---------- HERO ---------- */
.tech-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.tech-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.tech-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.tech-hero-bg {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.tech-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.tech-hero-graphic {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;
}

.tech-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #6b6b6b);
    margin-bottom: 32px;
}
.tech-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.tech-breadcrumb a:hover { color: #b10f1a; }
.tech-breadcrumb-sep { color: rgba(0,0,0,0.3); }
.tech-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.tech-hero-title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: #0a0a0a;
    margin: 0;
}
.tech-hero-title em {
    font-style: normal;
    color: #b10f1a;
}

/* ---------- SHARED SECTION TAG / TITLE ---------- */
.tech-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b10f1a;
    background: rgba(177, 15, 26, 0.08);
    padding: 7px 14px;
    border-radius: 999px;
}
.tech-section-title {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #0a0a0a;
    margin: 0;
}
.tech-section-title em { font-style: normal; color: #b10f1a; }

.tech-section-head {
    display: flex; flex-direction: column; gap: 16px;
    margin-bottom: 48px;
    max-width: 760px;
}
.tech-section-head .tech-section-tag { align-self: flex-start; }

/* ---------- INTRO — premium statement card matching research.html ---------- */
.tech-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.tech-intro .container { max-width: min(1280px, 100%); }
.tech-intro-card {
    position: relative;
    background:
        radial-gradient(ellipse 60% 55% at 0% 0%, rgba(252, 228, 211, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 60% 55% at 100% 100%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 22px;
    padding: 52px 56px 50px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 30px 60px -32px rgba(0,0,0,0.16);
}
.tech-intro-decor {
    position: absolute;
    width: 110px; height: 110px;
    color: var(--primary);
    opacity: 0.12;
    pointer-events: none;
}
.tech-intro-decor svg { width: 100%; height: 100%; }
.tech-intro-decor--tl { top: -18px; left: -18px; transform: rotate(-12deg); }
.tech-intro-decor--br { bottom: -22px; right: -22px; transform: rotate(8deg); }

.tech-intro-content {
    position: relative;
    z-index: 1;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
.tech-intro-content .tech-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}
.tech-intro-content .tech-section-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
}
.tech-intro-text {
    margin: 0;
    padding: 0;
    border: none;
    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    line-height: 1.55;
    color: #0a0a0a;
    font-weight: 400;
    letter-spacing: -0.012em;
    position: relative;
}
.tech-intro-text::before,
.tech-intro-text::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary);
    margin: 0 auto;
    opacity: 0.6;
}
.tech-intro-text::before { margin-bottom: 18px; }
.tech-intro-text::after  { margin-top: 18px; }

@media (max-width: 760px) {
    .tech-intro-card { padding: 36px 24px 32px; border-radius: 16px; }
    .tech-intro-decor { width: 70px; height: 70px; opacity: 0.10; }
    .tech-intro-content { gap: 16px; }
}

/* ---------- PRIVACY MODELS — Global & Local alternating editorial rows ---------- */
.tech-models {
    background:
        radial-gradient(ellipse 55% 45% at 10% 15%, rgba(252, 228, 211, 0.55) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 85%, rgba(215, 230, 241, 0.45) 0%, transparent 70%),
        #ffffff;
    padding: 40px 0 40px;
}
.tech-models .container { max-width: min(1280px, 100%); }
.tech-models-stack {
    display: flex; flex-direction: column;
    gap: 90px;
}
.tech-model {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.tech-model > * { min-width: 0; }
.tech-model--media-left  .tech-model-media { grid-column: 1; grid-row: 1; }
.tech-model--media-left  .tech-model-body  { grid-column: 2; grid-row: 1; }
.tech-model--media-right .tech-model-media { grid-column: 2; grid-row: 1; }
.tech-model--media-right .tech-model-body  { grid-column: 1; grid-row: 1; }

/* ---------- MODEL IMAGE ---------- */
.tech-model-img {
    display: block;
    width: 78%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    mix-blend-mode: multiply;
}

/* ---------- IMAGE PLACEHOLDER ---------- */
.tech-img-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    background:
        linear-gradient(135deg, #f7f3ee 0%, #faf6f2 100%);
    border: 1.5px dashed rgba(177, 15, 26, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: rgba(177, 15, 26, 0.5);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 30px 60px -32px rgba(177, 15, 26, 0.22);
}
.tech-img-placeholder svg {
    width: 60px; height: 60px;
    stroke: currentColor;
    opacity: 0.7;
}
.tech-img-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(177, 15, 26, 0.7);
}

/* ---------- MODEL BODY ---------- */
.tech-model-body {
    display: flex; flex-direction: column;
    gap: 18px;
}
.tech-model-tag {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b10f1a;
    background: rgba(177, 15, 26, 0.08);
    padding: 6px 12px;
    border-radius: 999px;
}
.tech-model--global .tech-model-tag { background: #fce4d3; color: #8a4a26; }
.tech-model--local  .tech-model-tag { background: #d7e6f1; color: #2e5a85; }

.tech-model-title {
    font-family: var(--font-sans);
    font-size: clamp(1.65rem, 2.8vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #0a0a0a;
    margin: 0;
}
.tech-model-def {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    line-height: 1.65;
    color: #2a2a2a;
    margin: 0 0 4px;
    padding: 16px 20px;
    background: rgba(177, 15, 26, 0.04);
    border-left: 3px solid #b10f1a;
    border-radius: 4px;
}

.tech-model-block {
    display: flex; flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.tech-model-block-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b10f1a;
}
.tech-model-block-text {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.7;
    color: #4a4a4a;
    margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .tech-intro { padding: 30px 0 30px; }
    .tech-models { padding: 30px 0 30px; }
    .tech-models-stack { gap: 60px; }
    .tech-model { grid-template-columns: 1fr; gap: 32px; }
    .tech-model--media-left .tech-model-media,
    .tech-model--media-right .tech-model-media { grid-column: 1; grid-row: 1; }
    .tech-model--media-left .tech-model-body,
    .tech-model--media-right .tech-model-body { grid-column: 1; grid-row: 2; }
    .tech-img-placeholder { aspect-ratio: 16 / 10; }
}
@media (max-width: 680px) {
    .tech-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .tech-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .tech-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .tech-intro { padding: 30px 0 30px; }
    .tech-models { padding: 30px 0 30px; }
    .tech-models-stack { gap: 48px; }
    .tech-section-head { margin-bottom: 32px; }
    .tech-img-placeholder { aspect-ratio: 4 / 3; border-radius: 14px; }
    .tech-model-def { font-size: 0.96rem; padding: 14px 16px; }
}


/* =============================================================================
   PRIVACY POLICY — Page styles  (.priv-)
   Used by privacy-policy.html
   ============================================================================= */

/* ---------- HERO ---------- */
.priv-hero {
    position: relative;
    padding: calc(var(--nav-h) + 60px) 0 60px;
    background: #f1e7d4;
    color: #0a0a0a;
    overflow: hidden;
    isolation: isolate;
}
.priv-hero .container { max-width: min(1280px, 100%); position: relative; z-index: 2; }
.priv-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(241, 231, 212, 0) 0%, #ffffff 100%);
    z-index: 1;
    pointer-events: none;
}
.priv-hero-bg {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
}
.priv-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
    opacity: 0.85;
}
.priv-hero-graphic {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;
}

.priv-breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #6b6b6b);
    margin-bottom: 32px;
}
.priv-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.priv-breadcrumb a:hover { color: #b10f1a; }
.priv-breadcrumb-sep { color: rgba(0,0,0,0.3); }
.priv-breadcrumb-current { color: #0a0a0a; font-weight: 600; }

.priv-breadcrumb-trail { color: rgba(0,0,0,0.55); font-weight: 500; }

.priv-hero-title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 5.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: #0a0a0a;
    margin: 0 0 20px;
}
.priv-hero-title em {
    font-style: normal;
    color: #b10f1a;
}
.priv-hero-sub {
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.5;
    color: rgba(0,0,0,0.65);
    max-width: 760px;
    margin: 0;
}

/* ---------- METADATA BAR ---------- */
.priv-meta {
    background: #ffffff;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.priv-meta .container { max-width: min(1280px, 100%); }
.priv-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}
.priv-meta-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.priv-meta-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.priv-meta-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
}
.priv-meta-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0a0a0a;
}

.priv-actions {
    display: flex;
    gap: 10px;
}
.priv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a0a0a;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.priv-action-btn svg {
    width: 16px; height: 16px;
}
.priv-action-btn:hover {
    background: #0a0a0a;
    color: #ffffff;
    border-color: #0a0a0a;
}
.priv-action-btn.is-copied {
    background: #b10f1a;
    color: #ffffff;
    border-color: #b10f1a;
}

/* ---------- INTRO ---------- */
.priv-section-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #b10f1a;
    background: rgba(177, 15, 26, 0.08);
    padding: 7px 14px;
    border-radius: 999px;
}
.priv-intro {
    background: #ffffff;
    padding: 40px 0 40px;
}
.priv-intro .container { max-width: min(1280px, 100%); }
.priv-intro-row {
    display: flex; flex-direction: column;
    gap: 22px;
}
.priv-intro-row .priv-section-tag { align-self: flex-start; }
.priv-intro-text {
    font-family: var(--font-sans);
    font-size: 1.08rem;
    line-height: 1.7;
    color: #2a2a2a;
    margin: 0;
    border-left: 3px solid #b10f1a;
    padding-left: 22px;
}

/* ---------- POLICY SECTIONS w/ STICKY SIDEBAR ---------- */
.priv-sections {
    background: #ffffff;
    padding: 40px 0 60px;
}
.priv-sections .container { max-width: min(1280px, 100%); }
.priv-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

/* Sidebar — refined docs-style */
.priv-sidebar {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-right: 8px;
}

/* TOC — vertical accent line + clean list */
.priv-toc {
    background: transparent;
    border: none;
    padding: 0;
}
.priv-toc-title {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
    margin: 0 0 18px;
    padding-left: 16px;
}
.priv-toc-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.priv-toc-list li { margin: 0; }
.priv-toc-list a {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 14px 9px 16px;
    margin-left: -1px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(0,0,0,0.6);
    text-decoration: none;
    line-height: 1.4;
    border-left: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease;
}
.priv-toc-list a:hover {
    color: #0a0a0a;
    border-left-color: rgba(177, 15, 26, 0.5);
}
.priv-toc-list a.is-active {
    color: #b10f1a;
    border-left-color: #b10f1a;
    font-weight: 600;
}
.priv-toc-num {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(0,0,0,0.35);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    width: 20px;
    transition: color 0.2s ease;
}
.priv-toc-list a:hover .priv-toc-num,
.priv-toc-list a.is-active .priv-toc-num { color: #b10f1a; }
.priv-toc-text { flex: 1; }

/* Privacy enquiries — soft cream card with red top accent */
.priv-enquiries {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.priv-enquiries::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #b10f1a;
}
.priv-enquiries-label {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    margin: 4px 0 6px;
}
.priv-enquiries-mail {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: #0a0a0a;
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.priv-enquiries-mail:hover {
    color: #b10f1a;
    border-bottom-color: #b10f1a;
}
.priv-enquiries-link {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(0,0,0,0.55);
    text-decoration: none;
    margin-top: 10px;
    transition: color 0.2s ease, padding-left 0.25s ease;
}
.priv-enquiries-link:hover {
    color: #b10f1a;
    padding-left: 4px;
}

/* Sections column */
.priv-content {
    min-width: 0;
}
.priv-section {
    padding: 32px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    scroll-margin-top: calc(var(--nav-h) + 20px);
}
.priv-section:first-child { padding-top: 0; border-top: none; }
.priv-section:last-child { padding-bottom: 0; }

.priv-section-head {
    display: flex; align-items: baseline;
    gap: 22px;
    margin-bottom: 22px;
}
.priv-section-num {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #b10f1a;
    line-height: 1;
    flex-shrink: 0;
}
.priv-section-title {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: #0a0a0a;
    margin: 0;
}

.priv-items {
    display: flex; flex-direction: column;
    gap: 20px;
    padding-left: 64px;
}
.priv-item {
    display: flex; flex-direction: column;
    gap: 6px;
}
.priv-item-label {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;
    color: #b10f1a;
    letter-spacing: 0.01em;
}
.priv-item-text,
.priv-text {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.72;
    color: #4a4a4a;
    margin: 0;
}

.priv-link {
    color: #b10f1a;
    text-decoration: none;
    border-bottom: 1px solid rgba(177, 15, 26, 0.35);
    transition: border-color 0.2s ease;
}
.priv-link:hover {
    border-bottom-color: #b10f1a;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .priv-body { grid-template-columns: 1fr; gap: 32px; }
    .priv-sidebar { position: static; gap: 24px; padding-right: 0; }
    .priv-items { padding-left: 52px; }
    .priv-meta-row { gap: 18px; }
    .priv-meta-list { gap: 20px; }
}
@media (max-width: 680px) {
    .priv-hero { padding: calc(var(--nav-h) + 40px) 0 40px; }
    .priv-breadcrumb { margin-bottom: 24px; font-size: 0.78rem; }
    .priv-hero-title { font-size: clamp(2.2rem, 11vw, 3rem); }
    .priv-hero-sub { font-size: 1rem; }
    .priv-meta { padding: 18px 0; }
    .priv-meta-list { gap: 16px; }
    .priv-meta-label { font-size: 0.65rem; }
    .priv-meta-value { font-size: 0.88rem; }
    .priv-actions { width: 100%; }
    .priv-action-btn { flex: 1; justify-content: center; }
    .priv-intro { padding: 30px 0 30px; }
    .priv-sections { padding: 30px 0 30px; }
    .priv-toc-title { padding-left: 14px; }
    .priv-toc-list a { font-size: 0.88rem; padding: 8px 12px 8px 14px; }
    .priv-section { padding: 28px 0; }
    .priv-section-head { gap: 14px; margin-bottom: 18px; }
    .priv-items { padding-left: 0; gap: 18px; }
    .priv-item-text,
    .priv-text { font-size: 0.96rem; }
}


/* =============================================================================
   INDEX.HTML — Comprehensive responsive fixes (mobile-focused)
   Placed at end so they win specificity over earlier rules.
   ============================================================================= */

/* Tablet & smaller (≤ 1080px) */
@media (max-width: 1080px) {
    .hero-content { padding: 0 24px; }
    .intro-main { gap: 36px; }
    .capabilities-sticky { padding: 50px 0; }
    .capabilities-grid { gap: 36px; }
    .capabilities-right { gap: 24px; }
    .cap-visual { min-height: 320px; }
    .marquee-track { gap: 28px; font-size: 0.9rem; }
}

/* Tablet portrait (≤ 880px) */
@media (max-width: 880px) {
    .container { padding: 0 22px; }
    .nav-inner { padding: 0 22px; }
    .hero-content { padding: 0 22px; }
    .hero-title { font-size: clamp(2rem, 7vw, 3.2rem) !important; }
    .hero-subtitle { font-size: 1rem; }
    .intro-headline { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
    .intro-body { font-size: 0.98rem; }
    .intro-chart { padding: 0; }
    .trade-off-chart { width: 100%; height: auto; }
    .why-headline { font-size: clamp(1.8rem, 5.5vw, 3rem); }
    .why-body { font-size: 1.1rem; padding-left: 22px; }
    .showcase-title { font-size: clamp(2rem, 7vw, 3.2rem) !important; }
    .showcase-desc { font-size: 0.96rem; }
    .showcase-meta { flex-wrap: wrap; gap: 12px; }
    .showcase-bullets { gap: 4px; }
    .showcase-bullets li { padding: 7px 0; gap: 12px; }
    .usecases-head-wrap { padding: 50px 22px 30px; }
    .usecases-title { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
    .entio-section-label { font-size: 0.6rem; }
    .entio-cap-name { font-size: 0.65rem; }
    .entio-benefit span { font-size: 0.58rem; }
}

/* Mobile (≤ 680px) */
@media (max-width: 680px) {
    .container { padding: 0 18px; }
    .nav-inner { padding: 0 18px; }
    .hero {
        aspect-ratio: auto;
        min-height: 520px;
        padding: calc(var(--nav-h) + 36px) 0 150px;
    }
    .why { padding: 40px 0 !important; }
    .usecases { padding: 0 !important; }
    .hero-content { padding: 0 18px; gap: 24px; }
    .hero-title { font-size: clamp(2rem, 9vw, 2.8rem) !important; line-height: 1.05; }
    .hero-subtitle { font-size: 0.95rem; line-height: 1.5; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { justify-content: center; width: 100%; }
    .hero-trust { display: none; }
    .hero-frame { display: none; }

    .intro { padding: 30px 0 30px; }
    .intro-main { gap: 24px; padding-top: 0; }
    .intro-headline { font-size: clamp(1.6rem, 7vw, 2.1rem); }
    .intro-keypoints { gap: 0; }

    .capabilities-sticky { padding: 30px 0; }
    .capabilities-grid { gap: 28px; }
    .capabilities-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .capabilities-intro { font-size: 0.92rem; }
    .capabilities-right { gap: 18px; }
    .cap-visual { min-height: 260px; padding: 12px; }
    .cap-meta h3 { font-size: 1.25rem; }
    .cap-meta p { font-size: 0.93rem; line-height: 1.55; }
    .graph-card { padding: 14px; }

    .why-headline { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .why-body { font-size: 1rem; padding-left: 18px; }

    .usecases-head-wrap { padding: 40px 18px 24px; }
    .usecases-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
    .usecases-see-all { padding: 10px 18px; font-size: 0.85rem; }

    .usecases-sticky { padding: 30px 0 50px !important; }
    .showcase-content { padding: 28px 18px 36px !important; gap: 24px !important; }
    .showcase-title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
    .showcase-counter { font-size: 0.85rem; }
    .counter-current { font-size: 1.6rem; }
    .counter-sep, .counter-total { font-size: 1rem; }
    .showcase-label { font-size: 0.68rem; padding: 5px 12px; }
    .showcase-bullets li { font-size: 0.92rem; }
    .showcase-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .showcase-actions .btn { justify-content: center; width: 100%; }
    .showcase-nav { justify-content: center; gap: 8px; }
    .showcase-arrow { width: 42px; height: 42px; }
    .showcase-arrow svg { width: 18px; height: 18px; }

    .showcase-visual { max-width: 360px; padding: 16px 18px 14px; gap: 14px; }
    .entio-constellation { padding-bottom: 12px; }
    .entio-cap { padding: 10px 6px; }
    .entio-cap-icon { width: 30px; height: 30px; }
    .entio-cap-icon svg { width: 16px; height: 16px; }
    .entio-cap-name { font-size: 0.62rem; }
    .entio-benefits { gap: 4px; padding-top: 12px; }
    .entio-benefit svg { width: 16px; height: 16px; }
    .entio-benefit span { font-size: 0.55rem; }

    .marquee { padding: 20px 0; }
    .marquee-track { gap: 22px; font-size: 0.82rem; }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .nav-inner { padding: 0 14px; }
    .hero-content { padding: 0 14px; }
    .hero-title { font-size: clamp(1.8rem, 10vw, 2.3rem) !important; letter-spacing: -0.03em; }
    .intro-headline { font-size: clamp(1.4rem, 8vw, 1.8rem); }
    .capabilities-title { font-size: clamp(1.4rem, 7vw, 1.9rem); }
    .cap-num { font-size: 0.75rem; }
    .why-headline { font-size: clamp(1.4rem, 7.5vw, 1.8rem); }
    .why-body { font-size: 0.95rem; padding-left: 16px; }
    .usecases-head-wrap { padding: 32px 16px 20px; }
    .showcase-content { padding: 24px 14px 30px !important; }
    .showcase-title { font-size: clamp(1.6rem, 9vw, 2.2rem) !important; }
    .showcase-visual { max-width: 100%; padding: 14px 14px 12px; }
    .entio-caps { gap: 6px; }
    .entio-cap { padding: 8px 4px; }
    .entio-cap-icon { width: 28px; height: 28px; }
    .entio-cap-name { font-size: 0.58rem; line-height: 1.1; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 0; padding: 18px 0 12px; }
    .footer-bottom-left { gap: 8px; flex-wrap: wrap; }

    /* Accordion: each column collapses; user taps h4 to expand */
    .footer-col {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0;
    }
    .footer-col:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .footer-col h4 {
        margin: 0 !important;
        padding: 14px 4px;
        cursor: pointer;
        user-select: none;
        justify-content: space-between;
        line-height: 1;
        transition: color 0.25s var(--ease);
    }
    .footer-col h4::after {
        content: '+';
        display: inline-block;
        font-size: 1.1rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.55);
        letter-spacing: 0;
        transition: transform 0.3s var(--ease), color 0.25s var(--ease);
    }
    .footer-col.is-open h4 {
        color: rgba(255, 255, 255, 0.85);
    }
    .footer-col.is-open h4::after {
        content: '\2212'; /* minus */
        color: var(--primary);
        transform: rotate(180deg);
    }
    /* All children except the h4 header collapse by default (display:none takes them
       fully out of layout so there's no residual gap between accordion headers) */
    .footer-col > *:not(h4) {
        display: none;
    }
    .footer-col.is-open > *:not(h4) {
        display: block;
        animation: footerAccordionOpen 0.28s var(--ease) both;
    }
    @keyframes footerAccordionOpen {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .footer-col.is-open a { padding: 6px 0; }
    .footer-col.is-open .footer-address { padding: 4px 0 0; }

    /* Addresses column — stack the 5 offices vertically on mobile */
    .footer-offices {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .footer-office h5 {
        margin-bottom: 6px;
    }
    .footer-office .footer-address {
        padding-bottom: 4px;
        max-height: none;
        opacity: 1;
        overflow: visible;
    }
}


/* =============================================================================
   HEADINGS — Remove red emphasis from <em> across all headings.
   All <em> inside h1-h6 now inherit parent (black) color.
   Placed at end so it wins specificity over earlier theme-specific rules.
   ============================================================================= */
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em,
.hero-title em,
.intro-headline em,
.why-headline em,
.usecases-title em,
.showcase-title em,
.cta-title em,
.section-title em,
[class*="hero-title"] em,
[class*="section-title"] em,
[class*="-title"] em {
    color: inherit !important;
}