:root {
    /* The site renders light only, so native chrome (scrollbars, autofill,
       <select> popups, form controls) must not follow a dark OS preference. */
    color-scheme: light;

    /* Base palette. Overridden in full by :root[data-theme="light"] further
       down, which every page activates -- see "Theme System" there. */
    --bg-main: #0a0a0c;
    --bg-alt: #111116;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;

    /* Accents */
    --accent-primary: #4a5a9c;
    /* Brand Owl Blue */
    --accent-secondary: #6e7ebd;
    /* Lighter Owl Blue */
    --accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));

    /* Semantic */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing & Layout */
    --container-width: 1200px;
    --section-gap: 3.5rem;
    --border-radius: 16px;
    --border-radius-sm: 8px;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
    /* Offset for fixed navbar */
}

html {
    /* Clip horizontal overflow at the root so the off-canvas mobile menu
       (position:fixed) cannot create a pannable scroll on mobile. Using
       hidden (not clip): hidden makes overflow-y compute to auto so vertical
       scrolling is preserved, whereas clip would also clip the y axis. */
    overflow-x: hidden;
}

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

/* Typography Basics */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Launch Badge */

@media (max-width: 992px) {
    .hidden-mobile {
        display: none !important;
    }
}

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

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

p {
    color: var(--text-muted);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Layout Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.container-narrow {
    max-width: 800px;
}

.section-padding {
    padding: var(--section-gap) 0;
}

.bg-alt {
    background-color: var(--bg-alt);
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    align-items: center;
}

.col-half {
    flex: 1;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Glassmorphism Classes */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius);
}

.hover-lift {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(74, 90, 156, 0.3);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(74, 90, 156, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(110, 126, 189, 0.6);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}

.btn-outline:hover {
    background: var(--glass-bg);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-full {
    width: 100%;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 1320px;
    border-radius: 100px;
    padding: 1rem 1.5rem;
    z-index: 100;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
    /* ensure absolute children are relative to this */
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
}

.logo-img {
    height: 32px;
    width: auto;
}

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

.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 100px;
}

.lang-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.3rem 0.6rem;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    color: var(--text-main);
}

.lang-btn.active {
    background: var(--accent-gradient);
    color: white;
    box-shadow: 0 2px 10px rgba(74, 90, 156, 0.3);
}

/* ── Language Dropdown ── */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 0.45rem 0.85rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-body);
    min-width: 88px;
    justify-content: center;
}

.lang-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-dropdown-toggle .lang-caret {
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.lang-dropdown.open .lang-dropdown-toggle {
    background: var(--accent-gradient);
    color: #fff;
    border-color: var(--accent-primary);
    box-shadow: 0 2px 10px rgba(74, 90, 156, 0.3);
}

.lang-dropdown.open .lang-caret {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 170px;
    background: rgba(15, 20, 35, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 300;
    max-height: 70vh;
    overflow-y: auto;
}

.lang-dropdown.open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.lang-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.lang-dropdown-item.active {
    background: var(--accent-gradient);
    color: #fff;
    font-weight: 600;
}

.lang-dropdown-item .lang-code {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.65;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.lang-dropdown-item.active .lang-code {
    opacity: 0.9;
}

.nav-links {
    display: flex;
    gap: 2rem;
    margin-right: 0;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:hover,
.nav-links a.active {
    color: white;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 8rem;
    /* Account for navbar */
    position: relative;
    overflow: hidden;
}

.hero-bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 1;
    opacity: 0.4;
    animation: drift 15s infinite alternate ease-in-out;
}

.glow-1 {
    width: 500px;
    height: 500px;
    background: rgba(74, 90, 156, 0.3);
    top: -100px;
    left: -100px;
}

.glow-2 {
    width: 600px;
    height: 600px;
    background: rgba(110, 126, 189, 0.2);
    bottom: -200px;
    right: -100px;
}

.solution-bg-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 50%;
    filter: blur(80px);
    left: -100px;
    top: 30%;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 30px) scale(1.1);
    }
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.hero-text {
    flex: 1;
}

.badge-wrapper {
    margin-bottom: 1.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.badge i {
    width: 14px;
    height: 14px;
}

.badge.green {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--success);
}

.hero-headline {
    font-size: 4.5rem;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    max-width: 90%;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hero-trust {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Dashboard Mockup in Hero */
.hero-visual {
    flex: 1;
    perspective: 1000px;
}

.dashboard-mockup {
    width: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    transform: rotateY(-5deg) rotateX(5deg);
    box-shadow: 20px 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: rotateY(-5deg) rotateX(5deg) translateY(0px);
    }

    50% {
        transform: rotateY(-5deg) rotateX(5deg) translateY(-15px);
    }

    100% {
        transform: rotateY(-5deg) rotateX(5deg) translateY(0px);
    }
}

.mockup-header {
    background: rgba(0, 0, 0, 0.4);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
}

.traffic-lights {
    display: flex;
    gap: 6px;
}

.traffic-lights span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4b5563;
}

.traffic-lights span:nth-child(1) {
    background: #ef4444;
}

.traffic-lights span:nth-child(2) {
    background: #f59e0b;
}

.traffic-lights span:nth-child(3) {
    background: #10b981;
}

.url-bar {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 4px 0;
    margin: 0 2rem;
    font-size: 0.8rem;
    color: var(--success);
    font-family: monospace;
}

.mockup-body {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.chat-sim .msg {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
}

.msg.bot {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--text-muted);
}

.msg.user {
    background: rgba(74, 90, 156, 0.1);
    border-left: 3px solid var(--accent-primary);
}

.msg.user span {
    display: block;
    font-size: 0.8rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.arrow-down {
    text-align: center;
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.msg.sowa-output {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--success);
}

.msg.sowa-output span {
    color: var(--success);
}

/* ChatGPT Window - iOS Style */
.chatgpt-window {
    border-radius: 20px;
    overflow: hidden;
    background: #2f2f2f;
    display: flex;
    flex-direction: column;
    min-height: 480px;
    max-height: 520px;
    height: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.chatgpt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #2f2f2f;
}

.chatgpt-model {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #e0e0e0;
    font-size: 1rem;
}

.chatgpt-model strong {
    font-weight: 700;
    color: #fff;
}

.model-version {
    color: #9a9a9a;
    font-weight: 400;
}

/* Chat Demo Shared Container */
.chat-demo-container {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.chat-demo-container>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
}

.chat-demo-container>div.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
    pointer-events: none;
}

.chat-demo-container>div.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

/* Claude Window Styles */
.claude-window {
    display: flex;
    flex-direction: column;
    background: #252321;
    color: #e2dfd8;
    font-family: var(--font-main);
    border-radius: 12px;
}

.claude-header {
    display: none;
}

.claude-plan {
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.claude-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 24px 0;
    overflow-y: auto;
}

.claude-greeting {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.claude-logo {
    width: 32px;
    height: 32px;
    color: #d88961;
}

.claude-greeting h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 500;
    color: #e2dfd8;
    margin: 0;
}

.claude-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

.claude-input-container {
    padding: 12px 24px 16px;
}

.claude-input-area {
    background: #33312f;
    border-radius: 16px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.claude-input-box {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: #e2dfd8;
    margin-bottom: 8px;
    position: relative;
}

.claude-placeholder {
    color: #8b8884;
    position: absolute;
    pointer-events: none;
}

.claude-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #d88961;
    margin-left: 1px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: middle;
}

.claude-cursor.hidden {
    display: none;
}

.claude-typing-text {
    font-size: 1.05rem;
    color: #e2dfd8;
}

.claude-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8b8884;
}

.claude-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claude-model-selector {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
}

.claude-send-btn {
    background: #d88961;
    color: #fff;
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

.claude-send-btn[disabled] {
    opacity: 0.5;
    background: #504d4a;
    color: #8b8884;
}

.claude-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    font-size: 0.75rem;
    color: #8b8884;
    padding: 0 4px;
}

.claude-tools {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 12px;
}

/* Gemini Window Styles */
.gemini-window {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    color: #e3e3e3;
    font-family: var(--font-main);
    border-radius: 12px;
}

.gemini-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.gemini-brand {
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 400;
    color: #e3e3e3;
}

.gemini-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px 28px 0;
    overflow-y: auto;
}

.gemini-greeting {
    margin-bottom: 20px;
}

.gemini-sparkle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.gemini-sparkle {
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.gemini-hello {
    font-size: 2rem;
    font-weight: 400;
    color: #5f6368;
    font-family: var(--font-heading);
}

.gemini-greeting h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    color: #e3e3e3;
    margin: 0;
}

.gemini-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

.gemini-input-container {
    padding: 12px 20px 20px;
}

.gemini-input-area {
    background: #282828;
    border-radius: 24px;
    padding: 14px 18px;
    border: 1px solid #3c3c3c;
}

.gemini-input-box {
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #e3e3e3;
    margin-bottom: 8px;
    position: relative;
}

.gemini-placeholder {
    color: #8a8a8a;
    position: absolute;
    pointer-events: none;
}

.gemini-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #4285f4;
    margin-left: 1px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: middle;
}

.gemini-cursor.hidden {
    display: none;
}

.gemini-typing-text {
    font-size: 1rem;
    color: #e3e3e3;
}

.gemini-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8a8a8a;
}

.gemini-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gemini-tools-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.gemini-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gemini-model-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: #e3e3e3;
}

.gemini-send-btn {
    background: #3c3c3c;
    color: #8a8a8a;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gemini-send-btn.active {
    background: #4285f4;
    color: #fff;
}

.chatgpt-header-actions {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #9a9a9a;
}

.chatgpt-body {
    flex: 1;
    padding: 16px 18px;
    overflow-y: auto;
    background: #212121;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chatgpt-input-area {
    padding: 10px 12px 14px;
    background: #2f2f2f;
}

.chatgpt-input-box {
    background: #3e3e3e;
    border-radius: 22px;
    padding: 12px 18px;
    min-height: 44px;
    display: flex;
    align-items: center;
    position: relative;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.chatgpt-placeholder {
    color: #b0b0b0;
    pointer-events: none;
    font-size: 0.95rem;
}

/* Hide the placeholder once typing starts. We can't use `:not(:empty)`
   anymore because the cursor element now lives INSIDE the typing-text
   span so it can follow line wraps – which means the typing-text is
   never truly :empty. Instead JS toggles `.has-typing` on the typing-
   text whenever a typeWriter run is in progress. */
.chatgpt-input-box .chat-typing-text.has-typing~.chatgpt-placeholder {
    display: none;
}

.chatgpt-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 6px 0;
}

.chatgpt-toolbar-left,
.chatgpt-toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chatgpt-toolbar-left i {
    width: 20px;
    height: 20px;
    color: #9a9a9a;
}

.chatgpt-toolbar-right i {
    color: #9a9a9a;
}

.toolbar-version {
    color: #9a9a9a;
    font-size: 0.85rem;
    font-weight: 500;
}

.chatgpt-send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #676767;
    color: #2f2f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
}

.chatgpt-send-btn i {
    width: 16px;
    height: 16px;
    color: #2f2f2f;
}

.chatgpt-send-btn.active {
    background: #fff;
}

/* Chat Messages - ChatGPT Style */
.chat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    opacity: 0;
    animation: chatMsgIn 0.3s ease forwards;
}

@keyframes chatMsgIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #444;
}

.chat-avatar i {
    width: 16px;
    height: 16px;
    color: #ccc;
}

.chat-message.user .chat-avatar {
    background: var(--accent-primary);
}

.chat-message.user .chat-avatar i {
    color: #fff;
}

.chat-bubble {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e0e0e0;
    position: relative;
    max-width: 100%;
}

.interception-overlay {
    display: none;
}

.sowa-indicator {
    display: none;
    font-size: 0.7rem;
    color: var(--success);
    margin-top: 4px;
    gap: 4px;
    align-items: center;
}

.sowa-indicator i {
    width: 12px;
    height: 12px;
}

.chat-bubble.show-indicator .sowa-indicator {
    display: flex;
}

.chat-bubble.intercepting {
    border-left: 2px solid var(--success);
    padding-left: 8px;
}

.sensitive-data {
    transition: all 0.4s ease;
}

.sensitive-data.highlighted {
    background: rgba(239, 68, 68, 0.25);
    color: #ef4444;
    padding: 1px 4px;
    border-radius: 3px;
}

.sensitive-data.anonymized {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-weight: 600;
    font-size: 0.85rem;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.chat-cursor {
    display: inline-block;
    width: 2px;
    height: 16px;
    background: #10a37f;
    margin-left: 1px;
    animation: cursorBlink 1s step-end infinite;
    vertical-align: middle;
}

.chat-cursor.hidden {
    display: none;
}

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

.highlight-anon {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
}

/* Sections Default */
.section-header {
    margin-bottom: 4rem;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Problem Cards */
.card {
    padding: 2rem;
}

.card-icon {
    width: 60px;
    height: 60px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--danger);
}

/* Feature List */
.feature-list {
    list-style: none;
    margin-top: 2rem;
}

.feature-list li {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.feature-list i,
.feature-list svg {
    color: var(--accent-primary);
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    margin-top: 1px; /* optical: align icon to the heading's glyph centre, not its line box */
}

.feature-list strong {
    font-size: 1.1rem;
    line-height: 26px;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

/* Architecture Diagram */
.architecture-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 3rem 2rem;
}

.node {
    width: 100%;
    padding: 1.5rem;
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.node i {
    margin-bottom: 0.5rem;
    color: var(--text-muted);
}

.node span {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.5rem;
}

.node.highlighted {
    background: rgba(74, 90, 156, 0.1);
    border-color: rgba(74, 90, 156, 0.3);
    box-shadow: 0 0 30px rgba(74, 90, 156, 0.2);
}

.node.highlighted i {
    color: var(--accent-primary);
}

.connector {
    color: var(--text-muted);
    opacity: 0.5;
    display: flex;
    justify-content: center;
}

.connector i {
    transform: rotate(90deg);
}

/* Industry Grid */
.industry-card {
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.industry-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
}

.industry-card i {
    width: 40px;
    height: 40px;
    color: var(--accent-secondary);
    margin-bottom: 1rem;
}

.industry-card h3 {
    margin-bottom: 0.5rem;
}

.industry-card p {
    font-size: 0.9rem;
}

/* ── Use Cases Section ── */
.uc-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.uc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.uc-tab:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    background: var(--glass-bg);
}

.uc-tab.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: var(--accent-primary);
}

.uc-tab.active svg {
    stroke: #fff;
}

.uc-panels {
    position: relative;
}

.uc-panel {
    display: none;
    animation: ucFadeIn 0.4s ease;
}

.uc-panel.active {
    display: block;
}

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

.uc-context {
    text-align: center;
    margin-bottom: 1.75rem;
}

.uc-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-secondary);
    background: rgba(110, 126, 189, 0.1);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.uc-context p {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.uc-compare {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.uc-box {
    flex: 1;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.uc-box p {
    margin: 0;
}

.uc-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.uc-label.uc-safe {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

mark.uc-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    padding: 1px 4px;
    border-radius: 3px;
}

mark.uc-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.88em;
}

.uc-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    opacity: 0.4;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .uc-compare {
        flex-direction: column;
    }
    .uc-arrow {
        justify-content: center;
        transform: rotate(90deg);
        padding: 0.25rem 0;
    }
    .uc-tabs {
        gap: 0.35rem;
    }
    .uc-tab {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }
}

/* ── Homepage Pricing Grid ── */
.hp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
    text-align: left;
}

.hp-price-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius);
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hp-price-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(74, 90, 156, 0.3);
}

.hp-price-card.hp-featured {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary), 0 12px 40px rgba(74, 90, 156, 0.25);
}

.hp-pop-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-gradient);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-heading);
    padding: 3px 14px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.hp-tier-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.hp-tier-name {
    font-size: 1.9rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-main);
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.hp-price {
    margin: 0.25rem 0 0.75rem;
}

.hp-amount {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--font-heading);
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hp-period {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Homepage Pro billing toggle ── */
.hp-toggle-wrap {
    display: inline-flex;
    margin: 0 0 0.6rem;
}

.hp-toggle-btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hp-toggle-btn:first-child {
    border-radius: 999px 0 0 999px;
}

.hp-toggle-btn:last-child {
    border-radius: 0 999px 999px 0;
}

.hp-toggle-btn:focus-visible {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 2px;
}

.hp-toggle-btn.active {
    background: var(--accent-gradient);
    color: #fff;
    border-color: var(--accent-primary);
}

.hp-price-annual {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}

.hp-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    min-height: 40px;
}

.hp-features {
    list-style: none;
    flex: 1;
    margin-bottom: 1.25rem;
    padding: 0;
}

.hp-features li {
    padding: 4px 0;
    font-size: 0.82rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--text-muted);
}

.hp-features li::before {
    content: '';
    min-width: 16px;
}

.hp-features li.yes::before {
    content: '\2713';
    /* Text, not an icon: the tick is generated content and needs 4.5:1.
       var(--success) gives 2.38:1 on the light card. */
    color: var(--success-text);
    font-weight: 700;
}

.hp-cta {
    display: block;
    width: 100%;
    padding: 0.7rem 0;
    text-align: center;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

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

.hp-cta-outline {
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    background: transparent;
}
.hp-cta-outline:hover {
    background: var(--glass-bg);
    border-color: rgba(255, 255, 255, 0.2);
}

.hp-cta-solid {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 4px 15px rgba(74, 90, 156, 0.4);
}
.hp-cta-solid:hover {
    box-shadow: 0 6px 20px rgba(110, 126, 189, 0.6);
}

.hp-cta-purple {
    background: linear-gradient(135deg, #7c3aed, #9b59b6);
    color: #fff;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}
.hp-cta-purple:hover {
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
}

@media (max-width: 1200px) {
    .hp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .hp-pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

/* Homepage pricing groups (B2C/B2B sections) */
.hp-pricing-group {
    margin-top: 3rem;
    text-align: left;
}

.hp-group-title {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: var(--text-main);
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: -0.5px;
}

.hp-group-sub {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hp-group-sub a {
    color: var(--accent-secondary);
    text-decoration: none;
    border-bottom: 1px solid rgba(110, 126, 189, 0.3);
    transition: color 0.2s, border-color 0.2s;
}

.hp-group-sub a:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.hp-pricing-grid.b2c-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.hp-pricing-grid.b2b-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 700px) {
    .hp-pricing-grid.b2c-grid,
    .hp-pricing-grid.b2b-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* Pricing Cards */
.pricing-cards {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
    text-align: left;
}

.pricing-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pricing-card.highlighted {
    border-color: var(--accent-primary);
    box-shadow: 0 10px 40px rgba(74, 90, 156, 0.15);
    background: linear-gradient(180deg, rgba(74, 90, 156, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.card-header {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 2rem;
}

.card-header h3 {
    font-size: 1.5rem;
}

.price {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.pricing-features {
    list-style: none;
    margin-bottom: 3rem;
    flex: 1;
}

.pricing-features li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
}

.pricing-features i {
    width: 20px;
    color: var(--success);
}

.pricing-features i[data-lucide="minus"] {
    color: #4b5563;
}

/* Footer / Form */
.contact-form {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin: 3rem auto 1rem;
    max-width: 500px;
    border-radius: 100px;
}

.contact-form .input-light {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 0 1rem;
    font-size: 1rem;
    outline: none;
}

.contact-form .btn {
    border-radius: 100px;
}

.sub-text {
    font-size: 0.85rem;
}

.footer-bottom {
    margin-top: 5rem;
    padding: 2rem 0;
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Die 5rem trennen .footer-bottom vom CTA-Block, mit dem der Footer sonst
   oeffnet ("Machen Sie Ihren KI-Einsatz souveraen." plus Button). Auf 298 der
   379 Seiten mit Footer fehlt dieser Block - dort ist .footer-bottom das erste
   Kind, und die 5rem haengen im Leeren: gemessen 80px zusaetzlicher Abstand
   zwischen dem letzten Inhalt der Seite und der Fusszeile.
   :first-child greift deshalb nur, solange wirklich nichts darueber steht;
   kommt der CTA-Block auf einer Seite zurueck, sind die 5rem automatisch
   wieder da. */
footer > .footer-bottom:first-child { margin-top: 0; }

/* Links in Rechts- und Langtextseiten (.policy-content: Impressum,
   Datenschutz, Changelog, Anwendungsfaelle) erbten bisher die Textfarbe und
   trugen keine Unterstreichung: gemessen 1:1 Kontrast gegen den Fliesstext,
   gleiche Schriftstaerke - sie waren schlicht nicht als Links erkennbar
   (SC 1.4.1). Im Impressum betraf das E-Mail-Adresse, Telefonnummer und den
   ODR-Verweis, also genau die Angaben, deretwegen die Seite existiert.
   Unterstreichung in currentColor: das Signal haengt damit nicht am
   Farbsehen, und die Linie erbt denselben Kontrast wie der Linktext. */
.policy-content a {
    color: var(--accent-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.policy-content a:hover { color: var(--accent-primary); }

/* Ein Abstand fuer alle Seiten: 1rem hier plus die 34px Polster des Footers
   ergeben 50px zwischen dem letzten Inhalt und der Fusszeile. Das Polster des
   letzten Abschnitts bleibt bewusst ungleich null - bei 0 wuerden die
   Aussenraender seiner Kinder durch die Kante kollabieren und der Abstand
   haengte wieder vom Inhalt ab.
   Gemessen lag er vorher je nach Layout zwischen 88px und 136px:
   .contact-section und .faq schlossen mit 56px, .uc-section mit 48px,
   .about mit 36px, .cmp-section mit 64px, .policy-content mit 80px, und
   security holte sich seine 80px ueber den Aussenrand von <main>.
   Betroffen ist nur das letzte Kind von <main> - dort trennt der Abstand
   nichts mehr ausser der Fusszeile. Sektionen tragen ihren Abstand als
   Polster, alles andere als Aussenrand, deshalb zwei Regeln.
   Unbedenklich, weil body.subpage jede .bg-alt-Sektion transparent stellt:
   es endet keine Seite mit einem eingefaerbten Block, der dadurch an der
   Fusszeile kleben wuerde. */
/* main[class] zusaetzlich, weil security.html sein <main> als .sec-content
   fuehrt und deren 5rem sonst gewinnen (0,1,0 schlaegt 0,0,1). */
main, main[class] { margin-bottom: 0; }
main > *:last-child { margin-bottom: 1rem; }
main > section:last-child { margin-bottom: 0; padding-bottom: 1rem; }

/* Das obere Polster des Footers haengt sonst am --section-gap der jeweiligen
   Seite: about.html setzt es auf 2.25rem herunter, der Abstand zur Fusszeile
   waere dort 68px statt 88px. Der Footer folgt deshalb dem Standardwert. */
footer.section-padding { padding-top: 34px; }

.footer-bottom .flex-between {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    text-align: center;
}

.footer-bottom .social-links {
    width: 100%;
    justify-content: center;
}

.footer-bottom .copyright {
    width: 100%;
    text-align: center;
}

.logo-small {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: white;
}

.logo-small .logo-img {
    height: 20px;
    width: auto;
}

.logo-small i {
    color: var(--accent-primary);
    width: 18px;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-links a {
    color: var(--text-muted);
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
}

.social-links a:hover {
    color: var(--accent-secondary);
    transform: translateY(-2px);
}

.social-links i,
.social-links svg {
    width: 18px;
    height: 18px;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

/* ============================================
   RESPONSIVE – Mobile Optimisation
   ============================================ */

/* Hamburger toggle (hidden on desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 200;
    position: relative;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-main);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ---- Phones + small tablets (≤ 900px) – drawer nav ---- */
@media (max-width: 900px) {

    .hidden-mobile {
        display: none !important;
    }

    .hero-content,
    .flex-row {
        flex-direction: column;
        text-align: center;
    }

    .col-half,
    .hero-visual {
        width: 100%;
    }

    .hero-headline {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        margin: 0 auto 2.5rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .section-description.text-left {
        text-align: center;
        margin: 0 auto;
    }

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

    .about-row,
    .about-row.reverse {
        flex-direction: column;
        gap: 2rem;
    }

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

    .feature-list {
        text-align: left;
    }

    .chat-demo-container {
        height: 460px;
        max-width: 600px;
        margin: 0 auto;
        overflow: hidden;
    }

    .chat-demo-container>div {
        width: 100%;
        max-width: 100%;
    }

    .chatgpt-window {
        min-height: 420px;
        max-height: 460px;
    }

    /* Force all fade-up elements visible at stacked layout – observer may not trigger below fold */
    .fade-up {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}

/* ---- Phones & small tablets (≤ 768px) ---- */
@media (max-width: 768px) {

    :root {
        --section-gap: 1.75rem;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    /* Show hamburger */
    .menu-toggle {
        display: block;
    }

    /* Mobile nav drawer */
    .nav-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: rgba(10, 10, 12, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        gap: 2rem;
        z-index: 150;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid var(--glass-border);
        overflow-y: auto;
    }

    .nav-right.open {
        right: 0;
    }

    /* Overlay behind drawer */
    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 140;
    }

    .nav-overlay.active {
        display: block;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }

    .nav-links a {
        font-size: 1.15rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--glass-border);
        width: 100%;
        display: block;
    }

    .nav-cta {
        width: 100%;
    }

    .nav-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .lang-switch {
        align-self: flex-start;
    }

    /* Navbar mobile */
    .navbar {
        width: calc(100% - 1rem);
        padding: 0.75rem 1rem;
        top: 0.5rem;
        border-radius: 16px;
        z-index: 200;
    }

    /* Hero */
    .hero {
        min-height: auto;
        padding-top: 7.5rem;
        padding-bottom: 0;
    }

    .hero-content {
        gap: 1.5rem;
    }

    .hero-headline {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    /* .hero-actions stacking moved to @media (max-width: 600px) so tablet
       (601-768px) gets side-by-side buttons. The btn-large compression
       below stays here – smaller buttons are still appropriate on tablet. */
    .hero-actions .btn-large {
        padding: 0.6rem 1.25rem;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    /* Grids → single column */
    .grid-3,
    .grid-4,
    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-cards {
        flex-direction: column;
    }

    /* Chat demo */
    .chat-demo-container {
        min-height: 380px;
        max-height: 420px;
        overflow: hidden;
        border-radius: var(--border-radius-sm);
    }

    .chat-demo-container>div {
        width: 100%;
        max-width: 100%;
    }

    .chatgpt-window {
        min-height: 340px;
        max-height: 400px;
    }

    .chatgpt-input-box {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .chatgpt-input-area {
        padding: 8px;
    }

    .chatgpt-toolbar {
        gap: 0.5rem;
    }

    .chatgpt-toolbar-left i,
    .chatgpt-toolbar-right i {
        width: 16px;
        height: 16px;
    }

    .claude-window,
    .gemini-window {
        min-height: 340px;
        max-height: 400px;
    }

    .claude-input-area,
    .gemini-input-area {
        padding: 8px;
    }

    .chat-demo-container .claude-greeting h3,
    .chat-demo-container .gemini-greeting h3 {
        font-size: 1.3rem;
    }

    /* Hero visual column */
    .hero-visual {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .col-half {
        width: 100%;
    }

    /* Sub-hero */
    .sub-hero {
        min-height: auto;
        padding-top: 5.5rem;
        padding-bottom: 1rem;
    }

    .section-title {
        font-size: 1.85rem;
        margin-bottom: 0.75rem;
    }

    .section-description {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* Contact */
    .contact-form {
        flex-direction: column;
        border-radius: var(--border-radius-sm);
        padding: 1.5rem;
    }

    .contact-form .btn {
        border-radius: var(--border-radius-sm);
    }

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

    .contact-hero {
        padding: 5rem 0 1rem;
    }

    .contact-form-card {
        padding: 1.5rem;
    }

    /* FAQ */
    .faq-question {
        font-size: 0.95rem;
        padding: 1rem 1.25rem;
    }

    .faq-grid {
        gap: 0.6rem;
    }

    /* Footer */
    .footer-bottom {
        margin-top: 2rem;
        padding: 1.5rem 0;
    }

    .footer-bottom .flex-between {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .social-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* About page */
    .about-detail .about-row,
    .about-detail .about-row.reverse {
        flex-direction: column;
        margin-bottom: 2rem;
    }

    .about-detail .about-text h3 {
        font-size: 1.6rem;
        margin-bottom: 0.75rem;
    }

    .about-text p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .about-logo-img {
        max-width: 150px;
    }

    /* Values grid */
    .values-grid {
        grid-template-columns: 1fr;
    }

    /* Feature list */
    .feature-list {
        margin-top: 1rem;
    }

    .feature-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .feature-list li i,
    .feature-list li svg {
        margin: 0 auto;
        width: 26px;
        height: 26px;
    }

    .feature-list strong {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .feature-list li p {
        font-size: 0.9rem;
    }

    /* Cards tighter */
    .card {
        padding: 1.25rem;
    }

    .problem-grid .card {
        text-align: center;
    }

    .problem-grid .card-icon {
        margin-left: auto;
        margin-right: auto;
    }

    .card-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
    }

    /* Values */
    .value-card {
        padding: 1.25rem;
    }

    .value-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 1rem;
    }

    .value-card h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    /* Pricing tighter */
    .pricing-card {
        padding: 1.5rem;
    }

    .card-header {
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .pricing-features li {
        padding: 0.35rem 0;
    }

    /* Industry cards */
    .industry-card {
        padding: 1.25rem 1rem;
    }

    .industry-card i {
        width: 32px;
        height: 32px;
        margin-bottom: 0.5rem;
    }

    /* Container tighter */
    .container {
        padding: 0 1.25rem;
    }
}

/* ---- Small phones (≤ 480px) ---- */
@media (max-width: 480px) {

    .hero-headline {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .section-title {
        font-size: 1.65rem;
    }

    .section-description {
        font-size: 0.95rem;
    }

    .btn-large {
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
    }

    .chat-demo-container {
        min-height: 350px;
    }

    .chatgpt-window {
        min-height: 320px;
        max-height: 350px;
    }

    .claude-greeting h3 {
        font-size: 1.1rem;
    }

    .faq-question {
        font-size: 0.9rem;
        padding: 1rem;
    }

    .navbar {
        padding: 0.6rem 0.75rem;
    }

    .logo span {
        font-size: 1rem;
    }

    .logo-img {
        height: 26px;
    }

    .sub-hero {
        padding-top: 6rem;
    }
}

/* FAQ Section */
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    background: var(--glass-bg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
}

.faq-question i {
    color: var(--accent-secondary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1.5rem;
    color: var(--text-muted);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* arbitrary large value for transition */
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* About Us Section */
.about-grid {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.about-row {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.about-row.reverse {
    flex-direction: row-reverse;
}

.about-image {
    flex: 1;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-image img.about-logo-img {
    width: 60%;
    max-width: 240px;
    margin: 2rem auto;
    display: block;
}

.about-image:has(.about-logo-img),
.about-image.no-frame {
    border: none;
    box-shadow: none;
    background: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-row:hover .about-image img {
    transform: scale(1.05);
}

.about-text {
    flex: 1.2;
}

.about-text h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    padding: 2rem;
    text-align: center;
}

.value-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 1.5rem;
    background: rgba(74, 90, 156, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
}

.value-card h4 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* Subpage Styles */
.sub-hero {
    min-height: 60vh;
    padding-top: 10rem;
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0) 0%, rgba(17, 17, 22, 1) 100%);
}

.about-detail .about-row {
    margin-bottom: 6rem;
}

.about-detail .about-text h3 {
    font-size: 2.5rem;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Contact / Get Started Page */
.contact-hero {
    position: relative;
    padding: 11rem 0 3rem;
    text-align: center;
    overflow: hidden;
}

.contact-hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(74, 90, 156, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.contact-hero-content h1 {
    margin-bottom: 1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 640px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.contact-section {
    padding-top: 2rem;
}

.contact-form-card {
    padding: 2.5rem;
    border-radius: var(--border-radius);
}

.get-started-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Auth pages (signup, login, forgot/reset password, create-org) – more
   generous vertical rhythm than the marketing contact form. */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.auth-form .form-group {
    gap: 0.6rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.78;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    padding: 0.95rem 1rem;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    width: 100%;
}

/* Light-mode form: solid white inputs for clearer contrast */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .form-group input:hover,
html[data-theme="light"] .form-group select:hover,
html[data-theme="light"] .form-group textarea:hover {
    border-color: rgba(0, 0, 0, 0.22);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    /* This rule outranks the generic [data-theme="light"] ::placeholder below
       (0,2,1 vs 0,1,1), so it is the one that actually paints on every
       .form-group field. At rgba(148,163,184,0.5) - a mid grey-blue at half
       alpha, chosen for a near-black field - it measured 1.54:1 on the light
       form surface. Same value as the generic rule: 5.7:1. */
    color: rgba(20, 25, 50, 0.68);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(74, 90, 156, 0.15);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-group select option {
    background: var(--bg-alt);
    color: var(--text-main);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-full {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 1rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    padding: 1.5rem;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-icon {
    width: 40px;
    height: 40px;
    background: rgba(74, 90, 156, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.info-icon i {
    width: 20px;
    height: 20px;
}

.info-card h2 {
    font-size: 1rem;
    color: var(--text-main);
}

.info-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Blog Section ── */
.blog-section {
    position: relative;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 960px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.75rem;
}

.blog-category {
    color: var(--accent-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blog-date {
    color: var(--text-muted);
    font-weight: 500;
}

.blog-card h3 {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.blog-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;
    margin-bottom: 1.25rem;
}

.blog-read-more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.blog-card:hover .blog-read-more {
    color: var(--accent-primary);
    transform: translateX(4px);
}

/* Blog Article Page */
.blog-article {
    padding: 9rem 0 4rem;
}

.blog-article-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.blog-article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    align-items: center;
    flex-wrap: wrap;
}

.blog-article h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--text-main);
}

.blog-article-lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
}

/* Author byline – shown between the title and the lead paragraph. */
.blog-byline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.blog-byline-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(74, 90, 156, 0.3);
}
.blog-byline-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.3;
}
.blog-byline-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}
.blog-byline-role {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.blog-article-body h2 {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
    color: var(--text-main);
}

.blog-article-body h3 {
    font-size: 1.25rem;
    margin: 2rem 0 0.75rem;
    color: var(--text-main);
}

.blog-article-body p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.blog-article-body ul,
.blog-article-body ol {
    margin: 0 0 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-article-body li {
    margin-bottom: 0.5rem;
}

.blog-article-body blockquote {
    border-left: 3px solid var(--accent-secondary);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-main);
}

.blog-article-body strong {
    color: var(--text-main);
}

/* Inline links in article prose. Without this they inherit --text-muted with
   no underline, i.e. they render identically to the surrounding sentence and
   are undiscoverable (and fail WCAG 1.4.1, which forbids colour as the only
   distinguishing cue - here there was not even that).

   The affordance is the underline, not a colour of its own, so the link
   tracks whatever the surrounding prose is doing in either theme.

   `transition: none` was load-bearing when the site had a theme toggle:
   the global `a` rule (top of this file) carries `transition: color 0.2s
   ease`, which did not retrigger when the toggle swapped the custom
   properties, leaving the link painted in the previous theme's colour.
   The toggle is gone and the colours no longer change at runtime, so this
   now only guarantees the link resolves its colour from `inherit` with no
   transition of its own. Kept because it costs nothing and the rule above
   depends on `color: inherit` landing immediately. */
.blog-article-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: none;
}

.blog-article-body a:hover,
.blog-article-body a:focus-visible {
    text-decoration-thickness: 2px;
}

/* Footnote markers: the raised number is already a distinct visual token, so
   an underline under a single digit reads as noise rather than affordance. */
.blog-article-body sup a {
    text-decoration: none;
    font-weight: 700;
    padding-left: 0.1em;
}

.blog-article-body sup a:hover,
.blog-article-body sup a:focus-visible {
    text-decoration: underline;
}

.blog-article-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.blog-back-link {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 600;
}

.blog-back-link:hover {
    color: var(--accent-primary);
}

/* ── Use Cases Page ── */
.uc-intro-wrap {
    max-width: 780px;
    margin: 2rem auto 0;
}

.uc-intro-wrap p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.uc-section .section-title {
    margin-bottom: 0.75rem;
}

.uc-section {
    padding-top: 0;
}

.uc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 0;
}

@media (max-width: 880px) {
    .uc-grid {
        grid-template-columns: 1fr;
    }
}

.uc-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uc-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.uc-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(110, 126, 189, 0.15);
    color: var(--accent-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.uc-card-icon svg {
    width: 24px;
    height: 24px;
}

.uc-card h3 {
    font-size: 1.2rem;
    margin: 0;
    color: var(--text-main);
}

.uc-card-number {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--accent-secondary);
    opacity: 0.65;
    margin-bottom: 0.25rem;
}

.uc-card-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

.uc-data-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-top: 0.5rem;
}

.uc-data-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.uc-pill {
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}
/* ── Chatbot Animation Polish ── */
.claude-input-box .claude-typing-text.has-typing~.claude-placeholder,
.gemini-input-box .gemini-typing-text.has-typing~.gemini-placeholder {
    display: none;
}

.gemini-hello {
    background: linear-gradient(135deg, #4285f4 0%, #9b72cb 35%, #d96570 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sensitive-data.highlighted {
    animation: sensitivePulse 0.6s ease-out;
}

@keyframes sensitivePulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    100% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.sensitive-data.anonymized {
    animation: anonymizedIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes anonymizedIn {
    /* Scale-only bounce – opacity stays at 1 throughout. Earlier the
       opacity dipped to 0.5 at 0%, which created a brief flash of
       barely-visible text right when the user is supposed to read
       the new green placeholder. */
    0%   { transform: scale(0.85); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.chat-bubble.intercepting {
    background: rgba(16, 185, 129, 0.05);
    border-radius: 6px;
    transition: background 0.3s ease, border-left-color 0.3s ease;
}

.chat-message {
    will-change: opacity, transform;
}

.typing-dot {
    will-change: transform, opacity;
}

/* ── Install Section (FAQ page) ── */
.install-section { padding-top: 0; }
.install-section .section-header { margin-bottom: 2.75rem; }
.install-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 0.85rem;
}
.install-requirements {
    padding: 2rem 2.25rem;
    margin-bottom: 3rem;
    border-radius: 16px;
}
.install-requirements h3,
.install-requirements h2 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: var(--text-main);
}
.install-requirements-lead {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}
.install-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem 1.75rem;
    align-items: start;
}
@media (max-width: 960px) {
    .install-req-list { grid-template-columns: repeat(2, 1fr); }
    .install-req-list > li:last-child { grid-column: 1 / -1; max-width: 32rem; margin-inline: auto; }
}
@media (max-width: 720px) {
    .install-req-list { grid-template-columns: 1fr; }
    .install-req-list > li:last-child { max-width: none; margin-inline: 0; }
    .install-requirements { padding: 1.5rem; }
    .install-step { padding: 1.25rem 1.25rem !important; }
}
.install-req-list li {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.install-req-list svg {
    color: #10b981;
    flex-shrink: 0;
    margin-top: 2px;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 50%;
    padding: 3px;
    width: 24px;
    height: 24px;
}
.install-req-list > li > div > strong {
    display: block;
    color: var(--text-main);
    font-size: 0.96rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.install-req-list span strong {
    color: var(--text-main);
    font-weight: 600;
}
.install-req-list span {
    display: block;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}
.install-steps-heading {
    font-size: 1.35rem;
    margin: 0 0 1.5rem;
    color: var(--text-main);
    text-align: center;
    font-family: var(--font-heading);
}
.install-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.install-step {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    align-items: flex-start;
    border-radius: 14px;
}
.install-step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    box-sizing: border-box;
    padding-top: 1px; /* optically centre the digit (Outfit baseline sits high) */
    box-shadow: 0 4px 12px rgba(110, 126, 189, 0.35);
}
.install-step-body { flex: 1; min-width: 0; }
.install-step-body h4,
.install-step-body h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--text-main);
    font-weight: 600;
}
.install-step-body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
}
.install-step-body em {
    color: var(--text-main);
    font-style: normal;
    font-weight: 600;
    background: rgba(110, 126, 189, 0.12);
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
}
.install-cta { margin-top: 2rem; }
.install-cta-help {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.install-cta-help a {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════
   Theme System – light only
   ════════════════════════════════════════════════════════════════
   The site ships one theme. Every page hard-codes
   <html data-theme="light">, so the :root[data-theme="light"] block
   below, and the [data-theme="light"] rules that follow it, are
   always in force.

   The bare :root palette they override is the site's former dark
   theme. It is kept rather than folded in because the light layer
   only restates what actually differs: hundreds of component rules
   above read var(--glass-bg) / var(--text-main) from :root, and a
   number of them hardcode rgba(255,255,255,…) tints that only the
   light layer corrects. Collapsing the two means re-auditing every
   one of those rules; nothing reaches the :root values at runtime.

   The chatbot demo windows in the hero (chatgpt/claude/gemini) keep
   their hardcoded dark colours intentionally – they are product
   simulations, not site chrome.
   ════════════════════════════════════════════════════════════════ */

:root {
    /* navbar scroll-state colours, used via the .navbar-scrolled class
       (set by the scroll handler in script.js). */
    --navbar-scrolled-bg: rgba(10, 10, 12, 0.8);
    --navbar-scrolled-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* drop-shadow tint used on the brand owl logo + decorative glows */
    --logo-glow: rgba(74, 90, 156, 0.4);
}

:root[data-theme="light"] {
    /* Core palette – soft blue-tinted off-white instead of warm cream */
    --bg-main:   #e7ecf6;
    --bg-alt:    #d6dff0;
    --text-main: #14172a;
    --text-muted: #4a5163;
    --accent-primary:   #2f3d75;
    --accent-secondary: #4a5a9c;

    /* Glassmorphism – frosted white card on soft-blue off-white */
    --glass-bg:     rgba(255, 255, 255, 0.62);
    --glass-border: rgba(20, 35, 75, 0.12);
    --glass-shadow: 0 8px 32px 0 rgba(20, 35, 75, 0.08);

    /* Semantic colours, text-safe.
       --success/--warning/--danger are tuned to glow on a near-black
       background and fall to 1.9-3.4:1 as text on these light surfaces
       (WCAG 1.4.3 wants 4.5:1). Keep the bright originals for fills,
       borders and the rgba(...,0.12) badge grounds, where they are
       correct; use these wherever the colour is applied to TEXT. */
    --success-text: #036a4a;
    --warning-text: #7d5210;
    --danger-text:  #a81e14;

    /* Navbar scrolled */
    --navbar-scrolled-bg: rgba(231, 236, 246, 0.85);
    --navbar-scrolled-shadow: 0 4px 24px rgba(20, 35, 75, 0.08);

    --logo-glow: rgba(74, 90, 156, 0.30);
}

/* Navbar scrolled state – driven by .navbar-scrolled class instead of
   inline JS styles, so colours stay mode-aware. */
.navbar.navbar-scrolled {
    background: var(--navbar-scrolled-bg);
    box-shadow: var(--navbar-scrolled-shadow);
}

/* ── Light-mode targeted overrides ──────────────────────────────────
   Rules above that hardcoded rgba(255,255,255,…) go invisible on a light
   background. These flip them to dark tints. They stay keyed on the
   [data-theme="light"] attribute that every page now sets, so they keep
   their specificity relative to the rules they correct. */

/* Buttons */
[data-theme="light"] .btn-primary {
    color: #fff;
}
[data-theme="light"] .btn-primary:hover {
    border-color: rgba(20, 25, 50, 0.10);
}
[data-theme="light"] .btn-outline {
    background: rgba(15, 20, 30, 0.03);
}
[data-theme="light"] .btn-outline:hover {
    background: rgba(15, 20, 30, 0.07);
    border-color: rgba(20, 25, 50, 0.15);
}

/* Cards / surfaces that hardcoded white tints */
[data-theme="light"] .feature-card,
[data-theme="light"] .value-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .blog-card,
[data-theme="light"] .info-card,
[data-theme="light"] .step-card,
[data-theme="light"] .install-step,
[data-theme="light"] .install-requirements,
[data-theme="light"] .uc-card,
[data-theme="light"] .faq-item {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

[data-theme="light"] .uc-pill {
    background: rgba(20, 25, 50, 0.05);
    border-color: rgba(20, 25, 50, 0.10);
    color: var(--text-main);
}

/* Use-cases comparison – without/with SOWA boxes
   Dark-mode mark colours (red-300 #fca5a5, emerald-300 #6ee7b7) are
   pale on purpose to glow on dark glass; on light backgrounds they
   wash out. Swap to red-700 / emerald-700 with slightly stronger pill
   tints so the PII tokens and anonymized placeholders stay legible
   in both themes. */
[data-theme="light"] .uc-label {
    background: rgba(239, 68, 68, 0.14);
    color: #b91c1c;
}
[data-theme="light"] .uc-label.uc-safe {
    background: rgba(16, 185, 129, 0.16);
    /* #047857 measured 4.47:1 on this tint -- just under the floor. */
    color: var(--success-text);
}
[data-theme="light"] mark.uc-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}
[data-theme="light"] mark.uc-ok {
    background: rgba(16, 185, 129, 0.20);
    color: #047857;
}

/* Hero ambient background glows – softer in light mode */
[data-theme="light"] .hero-bg-glow {
    opacity: 0.4;
    filter: blur(120px);
}

/* Logo owl – drop-shadow tint adapts via --logo-glow */
[data-theme="light"] .logo-img {
    filter: drop-shadow(0 0 30px var(--logo-glow));
}

/* Form fields visible on light bg */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select {
    background: #ffffff;
    border: 1px solid rgba(15, 20, 30, 0.12);
    color: var(--text-main);
}
[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="tel"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 0 3px rgba(74, 90, 156, 0.18);
    outline: none;
}
/* 0.45 alpha measured 2.83:1. 0.68 gives 5.7:1 and still reads as
   clearly secondary to an entered value. */
[data-theme="light"] ::placeholder { color: rgba(20, 25, 50, 0.68); }

/* Lang dropdown surfaces */
[data-theme="light"] .lang-dropdown-toggle {
    background: rgba(15, 20, 30, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}
[data-theme="light"] .lang-dropdown-toggle:hover {
    background: rgba(15, 20, 30, 0.07);
}
[data-theme="light"] .lang-dropdown-menu {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
[data-theme="light"] .lang-dropdown-item:hover {
    background: rgba(15, 20, 30, 0.05);
}

/* FAQ accordion */
[data-theme="light"] .faq-question:hover {
    background: rgba(15, 20, 30, 0.03);
}

/* Footer – keep readable */
[data-theme="light"] .footer .copyright,
[data-theme="light"] .footer-links a,
[data-theme="light"] .social-links a {
    color: var(--text-muted);
}
[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .social-links a:hover {
    color: var(--accent-primary);
}

/* Mobile nav drawer */
[data-theme="light"] .nav-overlay {
    background: rgba(15, 20, 30, 0.35);
}

.nav-right {
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════
   Readability passes – navbar contrast + gradient-text legibility
   ════════════════════════════════════════════════════════════════ */

/* Headline gradient text – kept identical in dark and light mode so
   the brand-blue accent reads the same way on every page regardless
   of theme. */
:root,
:root[data-theme="light"] {
    --headline-gradient: linear-gradient(135deg, #4a5a9c 0%, #6e7ebd 100%);
}
.gradient-text {
    background: var(--headline-gradient);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Force the button gradient to use the same brand-blue endpoints in
   light mode as in dark mode. We override --accent-gradient itself
   (rather than the underlying --accent-primary / --accent-secondary
   tokens) so text uses still get the deeper #2f3d75 contrast on cards,
   while buttons keep the lively dark-mode blue. */
:root[data-theme="light"] {
    --accent-gradient: linear-gradient(135deg, #4a5a9c 0%, #6e7ebd 100%);
}

/* Navbar – give it a real backdrop instead of the near-transparent
   glass default. Hero glows can drift behind the bar, so the text needs
   a slightly opaque surface so it doesn't dissolve into the glow. */
.navbar {
    background: rgba(15, 18, 28, 0.55);
}
[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.72);
}

/* Logo "SOWA Privacy" – was hardcoded white, swap to a theme-aware
   token and add a subtle text-shadow so the wordmark stays readable
   when the navbar happens to overlay a bright spot of the hero glow. */
.logo {
    color: var(--text-main);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .logo {
    color: var(--text-main);
    text-shadow: none;
}

/* Nav links – brighter default + a more distinct hover/active. */
.nav-links a {
    color: rgba(226, 232, 240, 0.88);
    position: relative;
    padding: 0.4rem 0.1rem;
    transition: color 180ms ease;
}
[data-theme="light"] .nav-links a {
    color: rgba(20, 23, 42, 0.72);
}

.nav-links a:hover {
    color: #ffffff;
}
[data-theme="light"] .nav-links a:hover {
    color: var(--text-main);
}

/* Active page: brighter colour + a small accent underline so it's
   clearly distinguishable from the hover state at a glance. */
.nav-links a.active {
    color: #ffffff;
}
[data-theme="light"] .nav-links a.active {
    color: var(--accent-primary);
}
.nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0.1rem;
    right: 0.1rem;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-secondary);
    opacity: 0.95;
}
[data-theme="light"] .nav-links a.active::after {
    background: var(--accent-primary);
}

/* Sub-hero gradient overlay – was hardcoded as a dark→darker fade,
   which painted black over light-mode subpages. Make it transparent
   so the page background shows through, with a small ambient gradient
   that adapts per mode. */
.sub-hero {
    background: linear-gradient(to bottom, transparent 0%, rgba(10, 10, 12, 0.55) 100%);
}
[data-theme="light"] .sub-hero {
    background: linear-gradient(to bottom, transparent 0%, rgba(20, 23, 42, 0.04) 100%);
}

/* ── Footer wordmark in light mode ─────────────────────────────────
   `.logo-small` was hardcoded `color: white` for dark mode, which
   becomes invisible against the cream footer in light mode. Make it
   theme-aware. */
.logo-small {
    color: var(--text-main);
}

/* ── ChatGPT mockup toolbar icons ──────────────────────────────────
   The original rule targeted <i> elements but the markup actually uses
   <svg> with `stroke="currentColor"`, so the icons never picked up the
   intended grey and inherited dark-text from the chat window – making
   them effectively invisible. Set colour on the SVGs directly so they
   match the real ChatGPT UI's medium-grey tone. */
.chatgpt-toolbar-left  > svg,
.chatgpt-toolbar-right > svg,
.chatgpt-send-btn      > svg {
    color: #9a9a9a;
}
.chatgpt-send-btn:not(:disabled) > svg,
.chatgpt-send-btn.active         > svg {
    color: #1a1a1a;
}

/* ════════════════════════════════════════════════════════════════
   CTA blue + ambient blue light-mode backdrop
   ════════════════════════════════════════════════════════════════
   - Light-mode primary buttons (.btn-primary) use the same brand
     blue as dark mode. We override --accent-gradient directly so
     other usages of --accent-primary / --accent-secondary (active
     nav underline, badge text, etc.) can stay deeper for contrast
     against the cream page background.
   - Light mode also gets two soft blue radial-gradient blobs +
     stronger hero glow so the page reads as designed-for-light,
     not stark-white.
   ════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
    /* CTA blue. The end stop was #6e7ebd, matching the old dark theme
       exactly -- but white label text over it measures 3.90:1, under the
       4.5:1 floor, and the label spans the full width of the button.
       #5f6ea9 is a point on that same brand ramp and holds white at
       4.90:1, so every pixel of the gradient now passes. */
    --accent-gradient: linear-gradient(135deg, #4a5a9c 0%, #5f6ea9 100%);
}

/* Ambient blue backdrop for light mode – fixed to viewport so the
   gradients drift behind every section, not just the hero. Stronger
   tint than the previous off-white pass so the blue is unmistakable. */
[data-theme="light"] body {
    background-color: var(--bg-main);
    background-image:
        radial-gradient(ellipse 65% 55% at 10% 5%, rgba(74, 90, 156, 0.30), transparent 60%),
        radial-gradient(ellipse 60% 50% at 95% 30%, rgba(110, 126, 189, 0.24), transparent 60%),
        radial-gradient(ellipse 75% 55% at 50% 100%, rgba(122, 138, 207, 0.22), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* bg-alt sections (industries, how-it-works alt strip, about, etc.)
   sit on top of the body's radial gradients – give them a slightly
   deeper blue surface so the section rhythm is still visible. */
[data-theme="light"] .bg-alt {
    background-color: var(--bg-alt);
}

/* Bring the ambient hero glows back up in light mode – they were
   dimmed too aggressively for the originally-pure-white look. */
[data-theme="light"] .hero-bg-glow {
    opacity: 0.65;
    filter: blur(110px);
}
[data-theme="light"] .glow-1 { background: rgba(74, 90, 156, 0.45); }
[data-theme="light"] .glow-2 { background: rgba(110, 126, 189, 0.35); }

/* Cards/glass in light mode now sit over a tinted backdrop, so let a
   bit of saturation through by warming the glass white and softening
   the frost – keeps the surface clearly elevated without blocking the
   ambient blue underneath. */
[data-theme="light"] .glass {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Slightly stronger drop on light-mode primary CTA so the brand blue
   pops against the new tinted backdrop. */
[data-theme="light"] .btn-primary {
    box-shadow: 0 4px 18px rgba(74, 90, 156, 0.35);
}
[data-theme="light"] .btn-primary:hover {
    box-shadow: 0 6px 22px rgba(74, 90, 156, 0.45);
}

/* ── Navbar overflow fix for longer locales (DE: "Wie es funktioniert",
   "Anwendungsfälle", "Über uns", "Jetzt starten") ──
   With the Blog link added, six nav items + CTA + lang dropdown +
   theme toggle exceed the navbar's flex track in languages with longer
   labels and wrap mid-word. Tightens spacing and pins each item to a
   single line. */
.navbar .nav-right { gap: 0.85rem; }
.navbar .nav-right > :first-child { margin-left: 1rem; }
.navbar .nav-links { gap: 0.9rem; flex-wrap: nowrap; }
.navbar .nav-links a { font-size: 0.9rem; }
.navbar .nav-links a { white-space: nowrap !important; }
.navbar .nav-cta .btn, .navbar .nav-cta-group .btn, .navbar .nav-cta-group .btn-ghost { white-space: nowrap !important; }
.navbar .nav-cta-group { flex-shrink: 0; }
.navbar .lang-current { white-space: nowrap !important; }
/* Logo must never compress or wrap mid-word. The flex track in
   .nav-content uses justify-content: space-between, which lets the
   logo shrink when the right-hand cluster (long German nav labels +
   theme toggle + lang dropdown + Sign-in link + CTA) demands more
   width. Pinning flex-shrink to 0 and forbidding line-breaks inside
   the logo span keeps "SOWA Privacy" on one line at every viewport
   above the mobile hamburger threshold. */
.navbar .logo { flex-shrink: 0; white-space: nowrap; }
.navbar .logo span { white-space: nowrap !important; }

/* Trigger the mobile menu slightly earlier so we don't try to fit a
   crowded German/Polish nav into a desktop pill that's only ~1100px wide. */
@media (max-width: 1080px) {
    .navbar .nav-links { gap: 1.1rem; }
    .navbar .nav-right { gap: 1rem; }
    .navbar .nav-links a { font-size: 0.9rem; }
}

/* ── Blog landing layout: featured article + sidebar ──────────────── */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 880px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}

/* Featured (latest) card */
.blog-featured {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 2.5rem 2.25rem 2.25rem;
    text-decoration: none;
    color: inherit;
}

.blog-featured-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-secondary);
}

.blog-featured .blog-card-meta {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
    align-items: center;
    margin: 0;
}

.blog-featured .blog-category {
    color: var(--accent-secondary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.blog-featured h2 {
    font-size: 2.1rem;
    line-height: 1.15;
    color: var(--text-main);
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

@media (max-width: 720px) {
    .blog-featured h2 { font-size: 1.7rem; }
}

.blog-featured-excerpt {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0;
}

.blog-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-secondary);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.4rem;
    transition: gap 0.2s ease, color 0.2s ease;
}

.blog-featured:hover .blog-featured-cta {
    gap: 0.85rem;
    color: var(--accent-primary);
}

[data-theme="light"] .blog-featured-cta {
    color: var(--accent-primary);
}

/* Sidebar list */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.blog-sidebar-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0.25rem 0 0.6rem;
    padding-left: 0.25rem;
}

.blog-sidebar-item {
    display: block;
    padding: 1.05rem 1.2rem;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blog-sidebar-item:hover {
    background: rgba(110, 126, 189, 0.08);
    border-color: rgba(110, 126, 189, 0.30);
    transform: translateX(2px);
}

[data-theme="light"] .blog-sidebar-item:hover {
    background: rgba(74, 90, 156, 0.06);
    border-color: rgba(74, 90, 156, 0.25);
}

.blog-sidebar-item-meta {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    margin-bottom: 0.35rem;
    color: var(--text-muted);
    align-items: center;
}

.blog-sidebar-item-meta .blog-category {
    color: var(--accent-secondary);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-sidebar-item h4 {
    font-size: 0.96rem;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0;
    font-weight: 600;
}

/* ── Blog landing layout: align eyebrows and card tops ─────────────
   Wrap the featured card + its eyebrow in a column, and use a shared
   .blog-eyebrow rule so "LATEST ARTICLE" and "MORE ARTICLES" sit on
   the same baseline. Same margin-bottom on both eyebrows means the
   featured card top and the first sidebar item top start at the same Y. */
.blog-featured-column {
    display: flex;
    flex-direction: column;
}

.blog-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
    padding-left: 0.25rem;
    line-height: 1.3;
}

.blog-eyebrow--accent {
    color: var(--accent-secondary);
}

/* Override prior rules that put space above the sidebar title */
.blog-sidebar > .blog-eyebrow {
    margin: 0 0 0.85rem;
}

/* ── Blog landing: equal-height columns ───────────────────────────
   Drop align-items so grid cells stretch to the taller column.
   Make the featured card fill the remaining vertical space and
   anchor its CTA to the bottom so content distributes naturally. */
.blog-layout {
    align-items: stretch;
}
.blog-featured-column {
    height: 100%;
}
.blog-featured {
    flex: 1;
}
.blog-featured-cta {
    margin-top: auto;
}

/* ── Blog landing: distribute sidebar items to fill column height ──
   With align-items: stretch on the grid, both columns share the same
   height – but the four sidebar items only take their natural sizes,
   leaving empty space at the bottom of the column. Make each item
   flex-grow so the four cards collectively fill the column, matching
   the featured bubble's bottom edge. */
.blog-sidebar {
    height: 100%;
}
.blog-sidebar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   Accessibility
   ════════════════════════════════════════════════════════════════ */

/* Skip-to-content link – invisible until focused. Lets keyboard and
   screen-reader users jump past the navbar. */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
    transform: translateY(-150%);
    transition: transform 180ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Honour user motion preferences. Disables non-essential animations
   without breaking layout. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .fade-up { opacity: 1 !important; transform: none !important; }
    .hero-bg-glow { animation: none !important; }
    .chat-demo-container { animation: none !important; }
    .chat-cursor, .claude-cursor, .gemini-cursor { animation: none !important; opacity: 0.5; }
}

/* ──────────────────────────────────────────────────────────────────────
   Hero chat-demo: visual upgrades (Tier-1 + Tier-2 polish bundle).

   What changes vs. the baseline:
   1. SOWA shield overlay swoops in on the user bubble during the
      interception phase, naming the actor that's protecting the data.
   2. Intercepted bubble now glows + shows a left-to-right scan line
      so the moment reads as a deliberate action, not a stylistic tint.
   3. Each active window gets a brand-tinted drop shadow so the
      ChatGPT/Claude/Gemini transitions feel distinct.
   4. Window enter/exit uses a slight scale + lift with a bounce ease
      curve, replacing the previous flat fade.
   The scramble effect on the placeholder swap is JS-only (script.js).
   ────────────────────────────────────────────────────────────────────── */

/* The existing .sowa-indicator (rendered inside every user bubble by
   createMessageBubble) was previously a static green text line that
   appeared via .show-indicator. The animations below give it punch
   during the interception phase: a brief slide-in/bounce when it first
   becomes visible, plus a pulsing icon that signals "SOWA is acting on
   this message right now". An earlier attempt added a separate shield
   overlay above the bubble – that element got clipped by chat-body's
   overflow on the first message. Reusing the indicator avoids that
   class of bug and keeps the bubble self-contained. */
.chat-bubble.show-indicator .sowa-indicator {
    display: flex;
    animation: sowaIndicatorIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-bubble.intercepting .sowa-indicator {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    padding: 2px 9px 2px 6px;
    width: fit-content;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.66rem;
}
.chat-bubble.intercepting .sowa-indicator img {
    animation: sowaIconPulse 1.2s ease-in-out infinite;
}
@keyframes sowaIndicatorIn {
    from { opacity: 0; transform: translateY(6px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes sowaIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.2); filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.7)); }
}

/* Bubble is the positioning context for the scan-line pseudo-element. */
.chat-bubble { position: relative; }

/* Glow + scan-line during interception. Stronger than the first pass:
   glow alpha 0.4→0.6, scan-line alpha 0.22→0.32, glow ring 6px→8px so
   the moment is unmistakable. */
.chat-bubble.intercepting {
    overflow: hidden;
    animation: interceptGlow 1.6s ease-out;
}
.chat-bubble.intercepting::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.32) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: scanLine 1.5s ease-in-out;
    pointer-events: none;
    border-radius: inherit;
}
@keyframes interceptGlow {
    0%   { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
    40%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.6); }
    100% { box-shadow: 0 0 0 0   rgba(16, 185, 129, 0); }
}
@keyframes scanLine { to { transform: translateX(100%); } }

/* Brand-tinted drop shadow for the active bot window. Replaces the
   neutral grey shadow from .chatgpt-window / .claude-window /
   .gemini-window when the window is the one currently on stage. */
.chatgpt-window.active { box-shadow: 0 18px 50px -12px rgba(16, 163, 127, 0.45); }
.claude-window.active  { box-shadow: 0 18px 50px -12px rgba(216, 137, 97, 0.45); }
.gemini-window.active  { box-shadow: 0 18px 50px -12px rgba(66, 133, 244, 0.45); }

/* Smoother window enter/exit – bounce ease + tiny vertical lift. The
   existing rules at lines 784–805 already handle scale via transition;
   we override the keyframes and add a subtle translate so the change
   reads as motion, not a flat opacity fade. */
.chat-demo-container > div {
    transition: opacity 0.6s ease,
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                visibility 0.6s,
                box-shadow 0.6s ease;
}
.chat-demo-container > div.hidden { transform: scale(0.95) translateY(8px); }
.chat-demo-container > div.active { transform: scale(1) translateY(0); }

/* responsive-cleanup: hero-actions stack at 600px */
@media (max-width: 600px) {
    .hero-actions {
        flex-direction: column;
        gap: 0.4rem;
    }
    .hero-actions .btn {
        width: 100%;
    }
}

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

/* Heading anchor offset so in-page links don't hide under sticky nav */
:where(h1, h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: 6rem;
}

/* Tabular numerals for countdowns and numeric tables */
.tabular-nums,
.countdown,
.p-price,
[data-tabular] {
    font-variant-numeric: tabular-nums;
}

/* Balanced heading wrap on large headings */
h1, h2, .hero h1, .hero h2 {
    text-wrap: balance;
}

/* ─── Subpage unified background ────────────────────────────────
   Subpages (body.subpage) should feel like one continuous canvas –
   no banded color changes between sections. Neutralize all section
   backgrounds that paint a different color on top of the body. */
body.subpage {
    background-color: var(--bg-main);
    background-image:
        radial-gradient(ellipse 65% 50% at 12% 8%, rgba(74, 90, 156, 0.16), transparent 70%),
        radial-gradient(ellipse 55% 45% at 92% 38%, rgba(110, 126, 189, 0.13), transparent 70%),
        radial-gradient(ellipse 70% 55% at 50% 92%, rgba(122, 138, 207, 0.12), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
body.subpage main {
    background-color: transparent;
    background-image: none;
}

/* Light mode: stronger ambient blue wash that stretches across the entire page,
   not just the hero. Three large, fully-fading radials anchored to the viewport
   so the tint stays put as the user scrolls. */
[data-theme="light"] body.subpage {
    background-color: var(--bg-main);
    background-image:
        radial-gradient(ellipse 75% 60% at 8% 5%, rgba(74, 90, 156, 0.42), transparent 65%),
        radial-gradient(ellipse 70% 55% at 95% 30%, rgba(110, 126, 189, 0.36), transparent 65%),
        radial-gradient(ellipse 85% 65% at 50% 70%, rgba(122, 138, 207, 0.32), transparent 65%),
        radial-gradient(ellipse 65% 55% at 20% 100%, rgba(94, 110, 178, 0.28), transparent 65%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Neutralize section-level background swaps on subpages and the homepage.
   Listing every section class we use so any backgrounded section gets a
   transparent painting layer, letting the body's solid color show through. */
body.subpage .bg-alt,
body.subpage .sub-hero,
body.subpage .contact-hero,
body.subpage .contact-section,
body.subpage .about-detail,
body.subpage .about,
body.subpage .values,
body.subpage .problem,
body.subpage .blog-section,
body.subpage .use-cases,
body.subpage .enterprise,
body.subpage .pricing-faq-section,
body.subpage .pricing-hero,
body.subpage .pricing-section,
body.subpage .industries,
body.subpage .faq-section,
body.subpage .cta-section,
body.subpage .footer {
    background-color: transparent;
    background-image: none;
}

/* Light-mode parity: same neutralization */
[data-theme="light"] body.subpage .bg-alt,
[data-theme="light"] body.subpage .sub-hero {
    background-color: transparent;
    background-image: none;
}

/* Light-mode subpage body keeps its ambient gradients – already
   defined by [data-theme="light"] body above. Nothing else needed. */

/* Hero containers stop clipping their own glow children. Combined with
   the soft, fully-faded gradient on the glows themselves (below) this
   eliminates the hard horizontal seam where a clipped glow used to end. */
body.subpage .pricing-hero,
body.subpage .contact-hero,
body.subpage .sub-hero,
body.subpage .hero {
    overflow: visible;
}

/* Re-enable the ambient blue blur, but rebuild it as a soft radial that
   fades fully to transparent (no hard edge), so the glow blends into the
   uniform page background instead of cutting a band. */
body.subpage .hero-bg-glow,
body.subpage .contact-hero-glow {
    display: block;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.55;
    background: radial-gradient(circle, rgba(74, 90, 156, 0.45) 0%, rgba(74, 90, 156, 0) 70%) !important;
    z-index: 0;
}

/* Variant tints for the second glow on pages that include glow-2 */
body.subpage .hero-bg-glow.glow-2 {
    background: radial-gradient(circle, rgba(110, 126, 189, 0.35) 0%, rgba(110, 126, 189, 0) 70%) !important;
}

/* Reduced-motion users still see the glow – it's static – but spec compliance:
   skip animation on any glow that may have one. */
@media (prefers-reduced-motion: reduce) {
    body.subpage .hero-bg-glow,
    body.subpage .contact-hero-glow {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   Nav v2 – dropdown menu (Product, Solutions, Resources, Company)
   + Sign in / Install free CTA cluster
   Append-only; doesn't touch existing .nav-links / .nav-cta rules.
   ════════════════════════════════════════════════════════════════ */

/* Main nav-menu row, sits between logo and nav-right (space-between in .nav-content). */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-item {
    position: relative;
}

/* Trigger button – text styling mirrors existing .nav-links a (line ~3868). */
.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(226, 232, 240, 0.88);
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease;
}
[data-theme="light"] .nav-trigger {
    color: rgba(20, 23, 42, 0.72);
}

.nav-trigger:hover,
.nav-trigger:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
[data-theme="light"] .nav-trigger:hover,
[data-theme="light"] .nav-trigger:focus-visible {
    color: var(--text-main);
    background: rgba(20, 25, 50, 0.05);
}

.nav-caret {
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.nav-item.open .nav-trigger {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .nav-item.open .nav-trigger {
    color: var(--text-main);
    background: rgba(20, 25, 50, 0.06);
}
.nav-item.open .nav-caret {
    transform: rotate(180deg);
}

/* Active-page indicator on a flat trigger (Pricing) – match .nav-links a.active treatment. */
.nav-trigger-flat.active {
    color: #ffffff;
}
[data-theme="light"] .nav-trigger-flat.active {
    color: var(--accent-primary);
}
.nav-trigger-flat.active::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-secondary);
    opacity: 0.95;
}
[data-theme="light"] .nav-trigger-flat.active::after {
    background: var(--accent-primary);
}

/* Active dropdown – the nav-item containing the current page gets a subtle indicator. */
.nav-item.has-active > .nav-trigger {
    color: #ffffff;
}
[data-theme="light"] .nav-item.has-active > .nav-trigger {
    color: var(--accent-primary);
}
.nav-item.has-active > .nav-trigger::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 1.5rem;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-secondary);
    opacity: 0.7;
}
[data-theme="light"] .nav-item.has-active > .nav-trigger::after {
    background: var(--accent-primary);
}

/* Dropdown panel – glassmorphic surface matching .lang-dropdown-menu recipe. */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 320px;
    background: rgba(15, 20, 35, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 300;
}
[data-theme="light"] .nav-dropdown {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.nav-item.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown items – flex row with icon tile + body. */
.nav-dropdown a {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.12s ease;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
[data-theme="light"] .nav-dropdown a:hover,
[data-theme="light"] .nav-dropdown a:focus-visible {
    background: rgba(20, 25, 50, 0.05);
}

/* Trennt die beiden Produkte von den erklaerenden Seiten darunter. Die Linie
   liegt als Pseudoelement IM Abstand, nicht als border-top am Link: ein
   border-top haette dessen Polster vergroessert, und die Hover-Flaeche waere
   hoeher geworden als bei allen anderen Eintraegen. Eingerueckt auf 0.7rem,
   damit sie am Text beginnt und nicht am Kachelrand. */
.nav-dropdown a.nav-dropdown-divide {
    position: relative;
    margin-top: 0.75rem;
}

.nav-dropdown a.nav-dropdown-divide::before {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    top: -0.38rem;
    border-top: 1px solid var(--glass-border);
}

.nav-dropdown-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--accent-secondary);
}
[data-theme="light"] .nav-dropdown-icon {
    background: rgba(20, 25, 50, 0.04);
    color: var(--accent-primary);
}

.nav-dropdown-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.nav-dropdown-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.nav-dropdown-title {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-main);
}
.nav-dropdown-desc {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    display: block;
}

/* CTA cluster – Sign in (ghost) + Install free (primary). */
.nav-cta-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 0;
    border-radius: 100px;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-ghost:focus-visible {
    background: rgba(20, 25, 50, 0.06);
}

.nav-cta-group .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ── Mobile drawer accordions (inside .nav-right.open) ─────────── */
.nav-mobile-sections {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
}
.nav-mobile-sections details {
    border-bottom: 1px solid var(--glass-border);
}
.nav-mobile-sections summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.nav-mobile-sections summary::-webkit-details-marker { display: none; }
.nav-mobile-sections summary::marker { display: none; }
.nav-mobile-sections summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.nav-mobile-sections details[open] summary::after {
    transform: rotate(225deg);
}
.nav-mobile-sublinks {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.25rem 0 0.85rem 0;
}
.nav-mobile-sublinks a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-mobile-sublinks a:hover {
    color: var(--text-main);
}
.nav-mobile-flat {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
}
.nav-mobile-flat:hover {
    color: var(--accent-secondary);
}

/* ── Responsive: collapse the desktop nav-menu below 900px ─────── */
/* At <=900px the desktop dropdown row disappears and the hamburger
   drawer surfaces the .nav-mobile-sections accordions instead.
   Override the existing 768px drawer breakpoint so the menu hides
   earlier (it would otherwise overlap the right cluster between
   769-900px).                                                       */
@media (max-width: 900px) {
    .nav-menu {
        display: none;
    }
    .nav-cta-group {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .nav-cta-group .btn-ghost,
    .nav-cta-group .btn-primary {
        justify-content: center;
        text-align: center;
        padding: 0.85rem 1rem;
    }
    /* Surface the drawer + hamburger at 900px instead of the existing 768.  */
    .menu-toggle {
        display: block;
    }
    .nav-right {
        position: fixed;
        top: 0;
        right: -100%;
        width: 78%;
        max-width: 340px;
        height: 100vh;
        height: 100dvh;
        background: rgba(10, 10, 12, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: stretch;
        padding: 5rem 1.5rem 2rem;
        gap: 1.25rem;
        z-index: 150;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid var(--glass-border);
        overflow-y: auto;
    }
    [data-theme="light"] .nav-right {
        background: rgba(231, 236, 246, 0.97);
    }
    .nav-right.open {
        right: 0;
    }
    .nav-mobile-sections {
        display: flex;
    }
    .lang-dropdown-menu {
        right: auto;
        left: 0;
    }
    .navbar {
        width: calc(100% - 1rem);
        padding: 0.75rem 1rem;
        top: 0.5rem;
        border-radius: 16px;
        z-index: 200;
    }
}

/* ════════════════════════════════════════════════════════════════
   3-layer pipeline cards on how-it-works.html
   Append-only; no existing rules touched.
   ════════════════════════════════════════════════════════════════ */
.pipeline-section { padding: 4rem 0 5rem; }
.pipeline-section .section-header {
    max-width: 720px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}
.pipeline-section .section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.pipeline-section .section-description {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}
.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.pipeline-card {
    padding: 2rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pipeline-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(74, 90, 156, 0.25);
}
[data-theme="light"] .pipeline-card:hover {
    border-color: rgba(20, 25, 50, 0.18);
    box-shadow: 0 12px 40px rgba(20, 35, 75, 0.10);
}
.pipeline-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 16px rgba(74, 90, 156, 0.35);
}
.pipeline-card-icon svg { width: 24px; height: 24px; display: block; }
.pipeline-card-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-secondary);
    margin-bottom: 0.35rem;
}
[data-theme="light"] .pipeline-card-eyebrow { color: var(--accent-primary); }
.pipeline-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-main);
}
.pipeline-card-subhead {
    font-size: 0.92rem;
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
    line-height: 1.45;
}
.pipeline-card ul {
    margin: 0;
    padding-left: 1.15rem;
    list-style: disc;
}
.pipeline-card ul li {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.65;
    margin-bottom: 0.5rem;
}
.pipeline-card ul li:last-child { margin-bottom: 0; }
.pipeline-card ul li strong { color: var(--text-main); font-weight: 600; }
.pipeline-meta {
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
}
.pipeline-meta strong { color: var(--text-main); }
.pipeline-cta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}
@media (max-width: 768px) {
    .pipeline-section { padding: 2.5rem 0 3rem; }
    .pipeline-card { padding: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   Brand-name styling – every "SOWA Privacy" mention in body content
   renders in the company gradient. The navbar logo is intentionally
   excluded (no .sowa-brand wrap inside the nav block).
   ════════════════════════════════════════════════════════════════ */
.sowa-brand {
    background: var(--headline-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: inherit;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════
   App-shell nav – for logged-in dashboard pages (account, billing,
   accept-invite). 4 app nav items + Upgrade CTA + help icon + avatar.
   No marketing links.
   ════════════════════════════════════════════════════════════════ */
.app-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.app-nav-link {
    position: relative;
    padding: 0.55rem 0.9rem;
    color: rgba(226, 232, 240, 0.85);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 10px;
    transition: color 180ms ease, background 180ms ease;
}
[data-theme="light"] .app-nav-link {
    color: rgba(20, 23, 42, 0.72);
}
.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}
[data-theme="light"] .app-nav-link:hover,
[data-theme="light"] .app-nav-link:focus-visible {
    color: var(--text-main);
    background: rgba(20, 25, 50, 0.05);
}
.app-nav-link.active {
    color: #fff;
    font-weight: 600;
}
[data-theme="light"] .app-nav-link.active {
    color: var(--accent-primary);
}
.app-nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-secondary);
}
[data-theme="light"] .app-nav-link.active::after {
    background: var(--accent-primary);
}

/* Right cluster: Upgrade + help + avatar */
.app-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.btn-upgrade {
    padding: 0.55rem 1.1rem;
    border-radius: 100px;
    background: var(--accent-gradient);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(74, 90, 156, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-upgrade:hover,
.btn-upgrade:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(110, 126, 189, 0.55);
    outline: none;
}
.btn-upgrade:active {
    transform: translateY(0);
}

.icon-btn-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.icon-btn-circle:hover,
.icon-btn-circle:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    outline: none;
}
[data-theme="light"] .icon-btn-circle {
    background: rgba(20, 25, 50, 0.04);
}
[data-theme="light"] .icon-btn-circle:hover,
[data-theme="light"] .icon-btn-circle:focus-visible {
    background: rgba(20, 25, 50, 0.08);
    border-color: rgba(20, 25, 50, 0.15);
}

.avatar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-gradient);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 0;
    box-shadow: 0 2px 10px rgba(74, 90, 156, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.avatar-btn:hover,
.avatar-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(74, 90, 156, 0.5);
    outline: none;
}

/* Avatar dropdown – tucks theme toggle + sign out behind the avatar so the
   visual nav stays clean per the mockup (no theme toggle / sign out chips). */
.avatar-wrap { position: relative; display: inline-flex; }
.avatar-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: rgba(15, 20, 35, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 0.4rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 300;
}
[data-theme="light"] .avatar-menu {
    background: rgba(255, 255, 255, 0.96);
}
.avatar-wrap.open .avatar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1;
    font-weight: 500;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
}
.avatar-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .avatar-menu-item:hover {
    background: rgba(20, 25, 50, 0.05);
}
.avatar-menu-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 0.3rem 0;
}

/* Mobile – keep the 4 app-nav links inline but allow horizontal scroll on
   very narrow screens so they don't push out the right cluster. */
@media (max-width: 768px) {
    .navbar .container.nav-content { gap: 0.5rem; }
    .app-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .app-nav-link {
        white-space: nowrap;
        font-size: 0.88rem;
        padding: 0.45rem 0.7rem;
    }
    .btn-upgrade { padding: 0.5rem 0.85rem; font-size: 0.85rem; }
}

/* Upgrade item inside the avatar dropdown – keep it visually distinct from
   plain menu items (Profile / Sign out) so it still reads as a CTA. */
.avatar-menu-upgrade {
    background: linear-gradient(135deg, rgba(74, 90, 156, 0.18), rgba(110, 126, 189, 0.18));
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.avatar-menu-upgrade svg {
    color: var(--accent-secondary);
}
[data-theme="light"] .avatar-menu-upgrade svg {
    color: var(--accent-primary);
}
.avatar-menu-upgrade:hover {
    background: linear-gradient(135deg, rgba(74, 90, 156, 0.32), rgba(110, 126, 189, 0.32));
}

/* ════════════════════════════════════════════════════════════════
   Team page – contributor cards (team.html)
   ════════════════════════════════════════════════════════════════ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.team-card {
    padding: 2rem 1.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--glass-shadow);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 40px rgba(74, 90, 156, 0.25);
}
[data-theme="light"] .team-card:hover {
    border-color: rgba(20, 25, 50, 0.18);
    box-shadow: 0 12px 40px rgba(20, 35, 75, 0.10);
}
.team-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 1.1rem;
    background: var(--accent-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(74, 90, 156, 0.35);
}
.team-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: var(--text-main);
}
.team-role {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-secondary);
    margin: 0 0 0.85rem;
}
[data-theme="light"] .team-role { color: var(--accent-primary); }
.team-bio {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 1.1rem;
}
.team-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.team-link:hover { color: var(--accent-secondary); }
[data-theme="light"] .team-link:hover { color: var(--accent-primary); }

/* ════════════════════════════════════════════════════════════════
   Contact page – department email directory
   ════════════════════════════════════════════════════════════════ */
.dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0.5rem auto 0;
}
.dept-grid .info-card {
    text-align: left;
    padding: 1.5rem;
}
.dept-grid .info-card h2 {
    margin: 0.75rem 0 0.35rem;
    font-size: 1.05rem;
}
.dept-email {
    display: inline-block;
    font-weight: 600;
    color: var(--accent-secondary);
    text-decoration: none;
    word-break: break-all;
    margin-bottom: 0.4rem;
}
.dept-email:hover { text-decoration: underline; }
[data-theme="light"] .dept-email { color: var(--accent-primary); }
.dept-grid .info-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.dept-grid .info-card p a {
    color: var(--accent-secondary);
    text-decoration: none;
    font-weight: 500;
}
.dept-grid .info-card p a:hover { text-decoration: underline; }
[data-theme="light"] .dept-grid .info-card p a { color: var(--accent-primary); }

/* Text-only desktop nav dropdowns – hide the glyph icons. */
.nav-dropdown-icon { display: none; }

/* ════════════════════════════════════════════════════════════════
   Polish pass (Web Interface Guidelines)
   ════════════════════════════════════════════════════════════════ */

/* 1. Visible focus rings – these elements previously nulled outline on
   :focus-visible and only swapped background (same as hover). Give keyboard
   focus a distinct, more-prominent ring. */
.nav-trigger:focus-visible,
.nav-dropdown a:focus-visible,
.btn-ghost:focus-visible,
.app-nav-link:focus-visible,
.btn-upgrade:focus-visible,
.icon-btn-circle:focus-visible,
.avatar-btn:focus-visible,
.dept-email:focus-visible,
.team-link:focus-visible {
    outline: 2px solid var(--accent-secondary);
    outline-offset: 2px;
}
[data-theme="light"] .nav-trigger:focus-visible,
[data-theme="light"] .nav-dropdown a:focus-visible,
[data-theme="light"] .btn-ghost:focus-visible,
[data-theme="light"] .app-nav-link:focus-visible,
[data-theme="light"] .btn-upgrade:focus-visible,
[data-theme="light"] .icon-btn-circle:focus-visible,
[data-theme="light"] .avatar-btn:focus-visible {
    outline-color: var(--accent-primary);
}

/* 2. In-page anchor offset – ToC links on documentation.html target
   .policy-card[id] (divs), which the heading[id] scroll-margin rule misses.
   Keep section tops clear of the fixed navbar. */
.policy-card[id] { scroll-margin-top: 6rem; }

/* 3. Remove the 300ms tap delay on primary interactive controls. */
.btn, .btn-ghost, .btn-upgrade, .nav-trigger, .app-nav-link,
.avatar-btn, .icon-btn-circle, .nav-dropdown a, .dept-email,
.team-link, .lang-dropdown-toggle, .menu-toggle {
    touch-action: manipulation;
}

/* 4. Headings: balance wrapping to avoid widows/orphans. */
.policy-hero h1, .section-title, .hero-headline, .pipeline-card-title { text-wrap: balance; }
.policy-card p, .pipeline-card p, .term-group p { text-wrap: pretty; }

/* 4b. Orphan control: never strand a single word on the last line.
   Short subtitles get balanced (even) lines; all other paragraphs use
   pretty (keeps lines full, just avoids a lone last word). */
p { text-wrap: pretty; }
.section-description, .section-description--narrow, .hero-subtitle { text-wrap: balance; }

/* 5. Tabular figures for version numbers + comparison data. */
.release-entry .date, .version-pill { font-variant-numeric: tabular-nums; }
.policy-card table td, .policy-card table th { font-variant-numeric: tabular-nums; }

/* 6. Heading-tag style mirrors – keep visual size when tags change to fix
   heading-order skips (release entries h3→h2, term cards h4→h3). */
.release-entry h2 {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.term-group h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 0.4rem;
    letter-spacing: 0.02em;
}

/* Marketing-nav account avatar (link form of .avatar-btn). */
.nav-avatar { text-decoration: none; }
.nav-avatar[hidden] { display: none !important; }

/* "SOWA Privacy" (open the extension app) item at the top of the nav avatar
   menu: real logo in front + brand-gradient text (.sowa-brand). Same weight as
   the other items so the menu typography stays uniform. */
.avatar-menu-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   Owl watermark – a fixed, very faint brand shadow behind all content.
   Stays static while scrolling (position: fixed). Built as a mask so the
   owl shape can be tinted per theme; opacity keeps it minimally visible.
   pointer-events:none and z-index:-1 keep it purely decorative and behind
   the page (main is transparent site-wide, so it shows through).
   ════════════════════════════════════════════════════════════════ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #ffffff;
    -webkit-mask-image: url('assets/logo-clean.png');
    mask-image: url('assets/logo-clean.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* Place the owl's eye on the right side of the logo (image fraction
       0.7062, 0.3588) at viewport fraction (0.937, 0.50) – the right side,
       vertically centred – matching the marked spot. Offsets are derived from
       the mask size so the eye tracks that point as the watermark scales. */
    -webkit-mask-size: auto 90vh;
    mask-size: auto 90vh;
    -webkit-mask-position: calc(93.7vw - 60.01vh) calc(50vh - 32.29vh);
    mask-position: calc(93.7vw - 60.01vh) calc(50vh - 32.29vh);
    opacity: 0.06;
}
[data-theme="light"] body::before {
    background-color: var(--accent-primary);
    opacity: 0.08;
}
@media (max-width: 768px) {
    body::before {
        -webkit-mask-size: auto 60vh;
        mask-size: auto 60vh;
        -webkit-mask-position: calc(93.7vw - 40.01vh) calc(50vh - 21.53vh);
        mask-position: calc(93.7vw - 40.01vh) calc(50vh - 21.53vh);
    }
}

/* Mobile: wide data/comparison tables scroll horizontally instead of being clipped off-screen. */
@media (max-width: 768px) {
    .policy-card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Team avatar headshots – optional <img> overlay, clipped to the circle; falls back to initials when no file is present. */
.team-avatar { position: relative; overflow: hidden; }
.team-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.team-avatar-initials { line-height: 1; }

/* Blog byline avatar: optional author headshot overlay; falls back to initials if the file is absent. */
.blog-byline-avatar { position: relative; overflow: hidden; }
.blog-byline-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Visually-hidden utility (screen-reader-only text) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* about.html heading-order fix: match prior h3/h4 sizing on the promoted tags */
.about-text h2 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--text-main); }
.value-card h3 { margin-bottom: 1rem; font-size: 1.25rem; }

/* nav one-line fit */
.navbar .container.nav-content, .navbar .nav-content { max-width: none; }
.navbar .nav-links a, .navbar .nav-trigger, .navbar .btn-ghost, .navbar .nav-cta-group .btn-primary, .navbar .lang-current { font-size: 0.875rem; }

/* Merged Vision + Core Values section (about.html) */
.values .vision-lead {
    max-width: 640px;
    margin: 0 auto;
}
.values .vision-lead p {
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.values .vision-lead p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    
}

/* ── Barrierefreiheit: Inhalts-Links erkennbar machen (WCAG 1.4.1) ──────
   Der globale Reset `a { color: inherit }` weiter oben macht klassenlose
   Links im Fliesstext farbgleich mit dem Text - sie waren buchstaeblich
   nicht als Link zu sehen. Und selbst mit Akzentfarbe blieben es nur
   1,22:1 gegenueber dem Textgrau; SC 1.4.1 verlangt 3:1, wenn Farbe das
   einzige Unterscheidungsmerkmal ist. Deshalb eine Unterstreichung.
   Spezifitaet (0,1,3) schlaegt bewusst die seitenlokalen .policy-card a
   und .sec-card a (je 0,1,1). */
main :is(p, li, td, dd, dt) a:not([class]) {
    color: var(--accent-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
main :is(p, li, td, dd, dt) a:not([class]):hover {
    color: var(--accent-primary);
}

/* ── Pausentaste der Chat-Demo (WCAG 2.2 SC 2.2.2) ─────────────────────
   Die Demo startet von selbst und laeuft endlos neben dem Hero-Text, also
   braucht sie eine Moeglichkeit zum Anhalten. Sie sitzt AUSSERHALB des
   Mockup-Fensters, in der Luecke darunter: jede Position innerhalb hat den
   nachgebauten Senden-Knopf ueberdeckt - gemessen 14 px Mittelpunktabstand -
   und ausserhalb liest sie sich ohnehin als unsere Bedienung statt als Teil
   der nachgebauten Oberflaeche. 32x32 liegt ueber der Mindestzielgroesse
   von SC 2.5.8.

   Zwei Positionen, weil die Geometrie sich unterscheidet: am Desktop fuellt
   das Fenster den Container vollstaendig aus, die Taste muss also mit
   negativem Versatz darunter (.hero-visual hat dort overflow:visible). Unter
   768px bleibt im Container eine Luecke von rund 70px unter dem Fenster, und
   .hero-visual setzt overflow:hidden - ein negativer Versatz wuerde dort
   abgeschnitten, es gaebe auf dem Handy also gar keine Stopp-Moeglichkeit. */
.chat-demo-pause {
    position: absolute;
    right: 2px;
    bottom: -38px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(20, 35, 75, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #2f3d75;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.chat-demo-pause:hover,
.chat-demo-pause:focus-visible {
    opacity: 1;
    background: #ffffff;
}

.chat-demo-pause:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .chat-demo-pause { transition: none; }
}

/* Unter 768px setzt .hero-visual overflow:hidden. Die Taste haengt 38px
   unter dem Container, wuerde dort also abgeschnitten - und auf dem Handy
   gaebe es gar keine Stopp-Moeglichkeit mehr. Der Aussenabstand schafft
   genau diesen Platz INNERHALB von .hero-visual, ohne die Geometrie des
   Mockup-Fensters anzufassen. Eine zweite Position waere die naheliegende
   Loesung gewesen, scheitert aber daran, dass die Luecke unter dem Fenster
   je nach Breite zwischen 0 und 60px schwankt.

   Warum Innenabstand am Elternelement und nicht Aussenabstand am Container:
   dessen bottom-margin kollabiert mit dem der .hero-visual, die waechst also
   nicht, und die Taste blieb weiterhin ausserhalb des abschneidenden Kastens.
   Padding kollabiert nicht. */
@media (max-width: 768px) {
    .hero-visual { padding-bottom: 42px; }
}