/* style.css */

/* Reset & Variables */
:root {
    --color-dark: #0f0f0f;
    --color-light: #ffffff;
    --color-brand: #e0e0e0;
    --color-accent: #333333;
    
    --theme-bg: var(--color-dark);
    --theme-text: var(--color-light);

    --font-primary: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.theme-light {
    --theme-bg: var(--color-light);
    --theme-text: var(--color-dark);
}

.theme-dark {
    --theme-bg: var(--color-dark);
    --theme-text: var(--color-light);
}

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

body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
    font-family: var(--font-secondary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background-color 1.5s cubic-bezier(0.4, 0, 0.2, 1), color 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== TYPOGRAPHIC ORPHAN PREVENTION ===== */
h1, h2, h3, h4, h5, h6,
.section-heading,
.problem-statement,
.problem-conclusion,
.hero-title,
.result-highlight {
    text-wrap: balance;
}

p, li, .hero-subtitle, .solution-lead, .problem-card p, .node-sat p {
    text-wrap: pretty;
}

a, button {
    color: inherit;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* GSAP Helper Classes */
.reveal-text-wrap {
    overflow: hidden;
}

.reveal-text {
    display: block;
    transform: translateY(100%);
}

.fade-text {
    opacity: 0;
    transform: translateY(20px);
}

/* Lenis CSS */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Navbar */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    color: var(--theme-text);
    transition: color 0.8s ease;
}

.logo {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dotcom {
    color: rgba(0, 0, 0, 0.65);
}
.theme-dark .dotcom {
    color: rgba(255, 255, 255, 0.65); /* Adaptive for dark footer */
}

.nav-links {
    display: flex;
    gap: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 30px;
    border-radius: 50px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    z-index: 1001;
}
.theme-light .nav-links {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03);
}
.nav-links a {
    font-size: 1.1rem;
    font-weight: 500;
    transition: opacity 0.3s;
}
.nav-links a:hover {
    opacity: 0.6;
}

.header-action {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 20px;
    right: 40px;
    z-index: 1001;
}

/* Language switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 4px 6px;
}
.theme-light .lang-switcher {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.lang-btn {
    background: transparent;
    border: none;
    border-radius: 50px;
    font-family: var(--font-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: opacity 0.25s, background 0.25s;
    line-height: 1;
}
.lang-btn:hover {
    opacity: 0.8;
}
.lang-btn.active {
    background: var(--theme-text);
    color: var(--theme-bg);
    opacity: 1;
}

/* Telegram button */
.btn-telegram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #229ED9;
    color: #fff !important;
    border-color: #229ED9;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(34, 158, 217, 0.35);
    white-space: nowrap;
}
.btn-telegram:hover {
    background: #1a8ab9 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 158, 217, 0.5);
}
/* Force white text even when btn-sm class overrides */
.btn-sm.btn-telegram,
.btn-sm.btn-telegram:hover {
    background: #229ED9;
    color: #fff !important;
    border-color: #229ED9;
}
.btn-sm.btn-telegram:hover {
    background: #1a8ab9 !important;
}
.tg-icon {
    flex-shrink: 0;
    transition: transform 0.3s;
}
.btn-telegram:hover .tg-icon {
    transform: rotate(-10deg) scale(1.1);
}

/* Compact telegram: icon + 24/7 label only */
.btn-telegram--compact {
    gap: 5px;
    padding: 9px 14px 9px 10px;
    border-radius: 50px;
}
.btn-telegram--compact .tg-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Icon-only telegram button (circle) */
.btn-telegram--icon-only {
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    justify-content: center;
    border-radius: 50% !important;
    flex-shrink: 0;
    border: none !important;
}

/* Tooltip on hover */
.tg-tooltip-wrap {
    position: relative;
}
.tg-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(15, 15, 15, 0.92);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
}
.tg-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15, 15, 15, 0.92);
}
.tg-tooltip-wrap:hover .tg-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Submit row: button full width, TG icon centered below */
.form-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}
.form-submit-btn {
    width: 100%;
    padding: 18px 28px;
}
/* TG wrapper: centered under submit button */
.form-tg-wrap {
    display: flex;
    justify-content: center;
}
/* Full-width Telegram button (matches submit button style) */
.btn-telegram--full {
    width: 100%;
    padding: 18px 28px;
    font-size: 1.1rem;
    font-weight: 500;
    justify-content: center;
    gap: 10px;
    border-radius: 50px;
    letter-spacing: 0;
}
.btn-telegram--full .tg-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

/* TG icon: compact circle, auto width (legacy, kept for nav) */
.form-submit-row .btn-telegram--icon-only {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    position: static;
    transform: none;
}

/* Button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    border: 1px solid currentColor;
    border-radius: 50px;
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
    background: transparent;
}

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

.btn-sm {
    padding: 12px 24px;
    font-size: 1rem;
    background: var(--theme-text);
    color: var(--theme-bg);
}
.btn-sm:hover {
    background: transparent;
    color: var(--theme-text);
}

/* Typography Scale */
.section-heading {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 60px;
}

.section-heading span {
    margin-bottom: 5px;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: #fff;
}

.blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(100,100,100,0.8) 0%, rgba(0,0,0,0) 70%);
    transform: translate(-50%, -50%);
    animation: blobAnim 10s infinite alternate ease-in-out;
    filter: blur(80px);
}

@keyframes blobAnim {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-40%, -60%) scale(1.2); }
}

.hero .container { margin-top: 10vh; }

.hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 6.5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
}

em { font-style: italic; font-weight: 400; }

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    max-width: 800px;
    opacity: 0.8;
}

/* ===== PROBLEM BLOCK — CONCEPT 2 ===== */
.problem {
    padding: 0;
    overflow: hidden;
}

/* Kinetic intro statement */
.problem-intro {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 40px 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.problem-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 40px;
    font-family: var(--font-secondary);
}

.problem-statement {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.22em;
    opacity: 0;
    transform: translateY(30px);
}

.ps-word {
    display: inline-block;
    position: relative;
    transition: opacity 0.4s ease;
}

.ps-highlight {
    color: #ff4444;
}

.ps-strikethrough {
    opacity: 0.35;
    position: relative;
}

.ps-strikethrough::after {
    content: '';
    position: absolute;
    left: 0;
    top: 55%;
    width: 0;
    height: 3px;
    background: rgba(255, 68, 68, 0.7);
    transition: width 1.2s cubic-bezier(0.77, 0, 0.18, 1);
}

.ps-strikethrough.is-crossed::after {
    width: 100%;
}

/* Problem Cards */
.problem-cards-wrap {
    padding: 80px 0 140px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.problem-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
}

.problem-card {
    background: #0a0a0a;
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: background 0.4s ease;
    cursor: default;
}

.problem-card:hover {
    background: #111;
}

.problem-card:hover .pcard-icon svg {
    color: #ff4444;
    stroke: currentColor;
}

.pcard-num {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    opacity: 0.25;
}

.pcard-icon {
    color: rgba(255,255,255,0.5);
    width: 48px;
    height: 48px;
    transition: color 0.4s ease;
}

.pcard-icon svg {
    transition: color 0.4s ease;
}

.problem-card h3 {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
}

.problem-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.55;
}

.pcard-loss {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff4444;
    margin-top: 10px;
}

/* Unified weak-spots banner below the cards grid */
.weak-spots-banner {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ff4444;
    margin-top: 28px;
    display: inline-block;
    border: 1.5px solid rgba(255, 68, 68, 0.35);
    border-radius: 50px;
    padding: 10px 28px;
    letter-spacing: 0.01em;
}

.problem-conclusion {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.3;
    max-width: 800px;
    margin-top: 60px;
    opacity: 0.9;
}

.problem-conclusion strong {
    color: #fff;
}

/* ===== RESULTS block — light theme overrides ===== */

/* Green accent for kinetic statement in Results */
.ps-highlight-green {
    color: #1a8a2e;
}

/* Light theme: problem-intro inherits light bg */
.results .problem-intro {
    background: #fff;
}

.results .problem-eyebrow {
    color: rgba(0, 0, 0, 0.4);
}

/* rs-statement: same kinetic text but dark text on white */
.rs-statement .ps-word {
    color: #0f0f0f;
}

/* Cards in light theme */
.rs-card {
    background: #f8f8f8 !important;
    border-right: 1px solid rgba(0,0,0,0.06) !important;
}

.results .problem-cards {
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.08);
}

.results .problem-cards-wrap {
    border-top: 1px solid rgba(0,0,0,0.07);
    background: #fff;
}

.rs-card:hover {
    background: #f0f0f0 !important;
}

.rs-card .pcard-icon {
    color: rgba(0,0,0,0.4);
}

.rs-card:hover .pcard-icon svg {
    color: #1a8a2e;
    stroke: currentColor;
}

.rs-card h3 {
    color: #0f0f0f;
}

.rs-card p {
    color: rgba(0,0,0,0.55) !important;
    opacity: 1 !important;
}

/* rs-conclusion: dark text on light bg */
.rs-conclusion {
    color: #0f0f0f;
    margin-top: 50px;
}

.rs-conclusion strong {
    color: #0f0f0f;
}

/* CTA inline link inside conclusion */
.rs-cta-link {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 500;
    color: #0f0f0f;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(0,0,0,0.25);
    padding-bottom: 2px;
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

.rs-cta-link:hover {
    border-color: #0f0f0f;
    opacity: 0.65;
}

/* ===== SOLUTION BLOCK — CONCEPT 2 ===== */
.solution {
    padding: 120px 0 0;
    overflow: hidden;
    position: relative;
}

.solution-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.35;
    margin-bottom: 30px;
    font-family: var(--font-secondary);
}

.solution-lead {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    max-width: 700px;
    opacity: 0.65;
    line-height: 1.6;
    margin-top: -20px;
    margin-bottom: 0;
}

/* Node System */
.node-system-wrap {
    position: relative;
    width: 100%;
    height: 620px;
    margin: 80px 0 60px;
}

.node-canvas {
    position: relative;
    width: 100%;
    height: 100%;
}

/* SVG connector lines */
.node-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.nl {
    stroke: rgba(255,255,255,0.12);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    transition: stroke 0.6s ease;
}

.nl.active {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-dasharray: none;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

/* Central node */
.node-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 3;
    cursor: default;
}

.node-pulse {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.4; }
}

.node-core {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a, #333);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(255,255,255,0.1), inset 0 0 20px rgba(255,255,255,0.03);
    position: relative;
    z-index: 1;
}

.node-center > span {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.4;
    white-space: nowrap;
    font-family: var(--font-secondary);
}

/* Satellite nodes */
.node-sat {
    position: absolute;
    width: 220px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 28px 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
    opacity: 0;
    transform: translateY(14px);
}

.node-sat.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

/* Positions relative to canvas */
#nodeSat0 { top: 6%;  left: 12%; }
#nodeSat1 { top: 6%;  right: 12%; }
#nodeSat2 { bottom: 8%; left: 8%; }
#nodeSat3 { bottom: 8%; right: 8%; }

.node-sat:hover,
.node-sat.active {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 30px rgba(255,255,255,0.06);
}

.node-sat-icon {
    color: rgba(255,255,255,0.5);
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
}

.node-sat h4 {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.node-sat p {
    font-size: 0.875rem;
    line-height: 1.55;
    opacity: 0.55;
}

.node-sat-metric {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Result / CTA */
.result-highlight {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    padding-bottom: 120px;
}

.btn-wrap {
    display: flex;
    align-items: center;
}

/* Services */
.services { padding: 150px 0; }
.services-accordion { border-top: 1px solid rgba(0,0,0,0.1); }
.service-item { border-bottom: 1px solid rgba(0,0,0,0.1); padding: 40px 0; }
.service-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.service-header h3 { font-family: var(--font-primary); font-size: clamp(1.5rem, 4vw, 3rem); font-weight: 600; }
.toggle-icon { font-size: 3rem; font-weight: 300; line-height: 1; transition: transform 0.3s ease; }
.service-item.active .toggle-icon { transform: rotate(45deg); }
.service-body { overflow: hidden; display: none; margin-top: 30px; font-size: 1.2rem;}
.service-body p { margin-bottom: 20px; font-size: 1.5rem; }
.service-body ul { margin-top: 15px; margin-left: 20px; opacity: 0.8;}
.service-body li { margin-bottom: 10px; }

/* Results */
.results { padding: 0 0 0; }
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;}
.result-card { background: rgba(255,255,255,0.03); padding: 40px 20px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,255,255,0.05);}
.result-card h4 { font-family: var(--font-primary); font-size: clamp(1.2rem, 2vw, 1.8rem); margin-bottom: 10px; }
.result-card p { font-size: 0.9rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px;}

/* Cases */
.cases { padding: 60px 0 150px; position: relative; }
.case-list { display: flex; flex-direction: column; gap: 120px; }
.case-item { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;}
.case-image { width: 100%; height: 70vh; border-radius: 20px; overflow: hidden; position: sticky; top: 15vh;}
.case-image img { width: 100%; height: 100%; object-fit: cover; }
.case-info { padding: 20px 0; }
.case-title { font-family: var(--font-primary); font-size: 2.5rem; font-weight: 700; margin-bottom: 50px; }
.case-details { display: flex; flex-direction: column; gap: 50px; }
.case-block strong { display: block; font-size: 1.2rem; margin-bottom: 15px; font-family: var(--font-primary); }
.case-block p, .case-block ul { font-size: 1.1rem; opacity: 0.8; }
.case-block ul { margin-left: 20px; }
.case-block li { margin-bottom: 10px; }
.case-review { padding: 40px; background: rgba(0,0,0,0.03); border-radius: 20px; border-left: 4px solid var(--theme-text); font-style: italic; font-size: 1.3rem; line-height: 1.4; margin-top: 20px;}
.reviewer { font-size: 1.1rem; margin-top: 15px; opacity: 0.7; font-style: normal; font-weight: 500; }

/* How we work (Workflow) */
.workflow { padding: 150px 0; }
.workflow-steps { display: flex; flex-direction: column; gap: 60px; max-width: 900px; }
.step { display: flex; gap: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; }
.step span { display: none; }
.step h4 { font-family: var(--font-primary); font-size: 2.5rem; margin-bottom: 15px; }
.step p { font-size: 1.2rem; opacity: 0.7; }

/* Footer / CTA */
.footer { padding: 15vh 0 5vh; }
.footer-top { margin-bottom: 15vh; }
.footer-title { font-family: var(--font-primary); font-size: clamp(2.5rem, 8vw, 8rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; margin-bottom: 20px;}
.footer-subtitle { font-size: clamp(1.2rem, 2vw, 2rem); opacity: 0.8; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 40px; flex-wrap: wrap; gap: 20px; }
.footer-links { display: flex; gap: 30px; }
.footer-links a { font-weight: 500; transition: opacity 0.3s; }
.footer-links a:hover { opacity: 0.6; }
.footer-copy { opacity: 0.5; font-size: 0.9rem; }
.footer-logo { flex-shrink: 0; }

.form-input {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 15px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: inherit;
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
}
.theme-light .form-input {
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.1);
}
.form-input:focus {
    border-color: currentColor;
    background: transparent;
}
.contact-form .btn:not(.btn-telegram) {
    width: 100%;
    background: var(--theme-text);
    color: var(--theme-bg);
    border: none;
    margin-top: 10px;
}
.contact-form .btn:not(.btn-telegram):hover {
    opacity: 0.8;
}

.form-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.6;
    font-family: var(--font-secondary);
}

.scroll-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background: var(--theme-text);
    color: var(--theme-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    z-index: 10000 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    font-family: var(--font-primary);
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.theme-light .scroll-to-top {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}
.scroll-to-top:hover {
    transform: translateY(-5px);
}

/* ===== PRICING SECTION ===== */
.pricing {
    padding: 0 0 150px;
}

.pricing-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.4;
    margin-bottom: 20px;
    font-family: var(--font-secondary);
}

.pricing-group {
    margin-bottom: 80px;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 50px;
}

.pricing-group-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 36px;
}

.pricing-group-num {
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.25;
    text-transform: uppercase;
}

.pricing-group-title {
    font-family: var(--font-primary);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f0f0f;
}

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

.pricing-cards--duo {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.6%;
}

.pricing-card {
    position: relative;
    background: #f8f8f8;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                background 0.35s ease;
    overflow: hidden;
}

.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%);
    pointer-events: none;
    border-radius: inherit;
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    background: #fff;
}

.pricing-card--featured {
    background: #0f0f0f;
    border-color: transparent;
    color: #fff;
}

.pricing-card--featured::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 60%);
}

.pricing-card--featured:hover {
    background: #111;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.pricing-card--featured .pricing-group-title,
.pricing-card--featured .pricing-card-name,
.pricing-card--featured .pricing-card-desc {
    color: #fff;
}

.pricing-card-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.78rem;
    font-family: var(--font-secondary);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
    width: fit-content;
}

.pricing-card-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-card-name {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f0f0f;
    line-height: 1.2;
}

.pricing-card-price {
    font-family: var(--font-primary);
    font-size: 1rem;
    opacity: 0.5;
    font-weight: 400;
}

.pricing-card-price span {
    font-size: 2rem;
    font-weight: 700;
    opacity: 1;
    color: inherit;
    letter-spacing: -0.03em;
}

.pricing-card--featured .pricing-card-price {
    color: rgba(255,255,255,0.65);
}

.pricing-card--featured .pricing-card-price span {
    color: #fff;
}

.pricing-card-price small {
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.6;
    font-family: var(--font-secondary);
}

.pricing-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(0,0,0,0.55);
    flex: 1;
}

.pricing-card--featured .pricing-card-desc {
    color: rgba(255,255,255,0.55);
}

.pricing-card-cta {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 500;
    color: #0f0f0f;
    border-bottom: 1.5px solid rgba(0,0,0,0.2);
    padding-bottom: 2px;
    width: fit-content;
    margin-top: 8px;
    transition: border-color 0.3s, opacity 0.3s;
}

.pricing-card-cta:hover {
    border-color: #0f0f0f;
    opacity: 0.6;
}

.pricing-card--featured .pricing-card-cta {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.3);
}

.pricing-card--featured .pricing-card-cta:hover {
    border-bottom-color: #fff;
    opacity: 0.8;
}

.pricing-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding: 16px 24px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    font-size: 0.95rem;
    color: rgba(0,0,0,0.55);
    max-width: 600px;
}

.pricing-note svg {
    flex-shrink: 0;
    opacity: 0.5;
}

/* Contact form */
.contact-form {
    overflow: visible;
}

/* ===== FORM STATUS ===== */
.form-status {
    font-size: 1rem;
    margin-top: 12px;
    min-height: 24px;
    transition: opacity 0.3s;
}

.form-status.success {
    color: #1a8a2e;
}

.form-status.error {
    color: #e53e3e;
}

@media (max-width: 1024px) {
    .case-item { grid-template-columns: 1fr; gap: 40px; }
    .case-image { height: 50vh; position: relative; top: 0;}
    .problem-cards { grid-template-columns: repeat(2, 1fr); }
    .node-system-wrap { height: auto; min-height: 500px; }
    .node-sat { width: 180px; padding: 20px; }
    #nodeSat0 { top: 4%; left: 6%; }
    #nodeSat1 { top: 4%; right: 6%; }
    #nodeSat2 { bottom: 4%; left: 3%; }
    #nodeSat3 { bottom: 4%; right: 3%; }
    .pricing-cards { grid-template-columns: repeat(2, 1fr); }
    .pricing-cards--duo { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

@media (max-width: 1500px) {
    /* Navbar wraps: logo left, header-action right on first row; nav-links on second row below */
    .navbar {
        position: relative;
        padding: 12px 20px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        background: #fff;
        border-bottom: 1px solid rgba(0,0,0,0.07);
        row-gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }
    body.theme-dark .navbar {
        background: #0f0f0f;
        border-bottom-color: rgba(255,255,255,0.07);
    }
    /* logo: always first, left side */
    .logo {
        order: 1;
        flex-shrink: 0;
    }
    /* header-action: same row as logo, pushed to the right */
    .header-action {
        position: relative;
        top: auto;
        right: auto;
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 6px;
        order: 2;
        flex-shrink: 0;
    }
    /* Invisible zero-height row-breaker between header-action and nav-links */
    .navbar::after {
        content: '';
        order: 3;
        flex: 0 0 100%;
        height: 0;
    }
    /* nav-links: sits after the row-breaker, stays compact as a pill */
    .nav-links {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 12px;
        justify-content: center;
        order: 4;              /* after the ::after row-breaker (order:3) */
        width: fit-content;
        align-self: center;
        margin: 0 auto;
    }
    .nav-links a {
        font-size: 0.88rem;
        padding: 6px 10px;
    }
    .hero { height: auto; min-height: 80vh; }
    .hero .container { margin-top: 0 !important; padding-top: 20px; padding-bottom: 48px; }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-copy { margin-top: 20px; text-align: left !important; }
    .step { flex-direction: column; gap: 15px; }
    .nav-links { gap: 0; }
    .nav-links a { font-size: 0.78rem; padding: 5px 8px; }
    .pricing-cards, .pricing-cards--duo { grid-template-columns: 1fr; max-width: 100%; }
    .pricing { padding: 0 0 80px; }
    .pricing-group { margin-bottom: 50px; }
    .problem-intro { padding: 80px 20px 60px; }
    .problem-statement { font-size: clamp(2rem, 8vw, 3.5rem); }
    .problem-cards { grid-template-columns: 1fr; }
    .problem-cards-wrap { padding: 60px 0 100px; }
    /* Stack node system for mobile */
    .node-system-wrap { display: none; }
    .solution .container { padding-bottom: 80px; }
    .solution .section-heading { margin-bottom: 30px; }
    .solution-lead { margin-bottom: 40px; }
    /* Mobile fallback grid for nodes */
    .node-sat { position: static; width: 100%; opacity: 1 !important; transform: none !important; }
    .node-canvas {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 20px;
        height: auto;
    }
    .node-center, .node-lines { display: none; }
}

@media (max-width: 480px) {
    .node-canvas { grid-template-columns: 1fr; }
}

/* ===== CONTACT FORM SUBMIT BUTTON ===== */
.contact-form .form-submit-btn {
    width: 100%;
    background: var(--theme-text);
    color: var(--theme-bg);
    border: 1px solid var(--theme-text);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s, background 0.3s;
}
.contact-form .form-submit-btn:hover {
    opacity: 0.85;
}

/* ===== AI CHAT WIDGET ===== */
.ai-chat-widget {
    position: fixed;
    bottom: 100px; /* above scroll-to-top */
    right: 40px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

/* Icon (collapsed state) */
.ai-chat-icon {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
    flex-direction: column;
    gap: 3px;
}
.ai-chat-icon:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 40px rgba(79, 172, 254, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ai-chat-icon svg {
    width: 38px;
    height: 38px;
}
.ai-chat-icon-badge {
    font-family: var(--font-primary);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #4facfe;
    line-height: 1;
    text-align: center;
}

/* Tooltip */
.ai-chat-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,15,30,0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateY(-50%) translateX(6px);
}
.ai-chat-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(15,15,30,0.95);
}
.ai-chat-icon:hover .ai-chat-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Hide icon when chat is open */
.ai-chat-widget.is-open .ai-chat-icon {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s, transform 0.2s;
}

/* Chat window */
.ai-chat-window {
    width: 360px;
    max-height: 520px;
    background: rgba(12, 12, 28, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.5),
        0 0 0 0.5px rgba(255,255,255,0.06) inset,
        0 1px 0 rgba(255,255,255,0.12) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.34,1.56,0.64,1), visibility 0s linear 0.3s;
    pointer-events: none;
}
.ai-chat-widget.is-open .ai-chat-window {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: all;
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.34,1.56,0.64,1), visibility 0s linear 0s;
}

/* Chat header */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03);
    flex-shrink: 0;
}
.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}
.ai-chat-name {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.ai-chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
}
.ai-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.ai-chat-close {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.ai-chat-close:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Messages */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.ai-chat-messages::-webkit-scrollbar {
    width: 4px;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
.ai-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-msg-bot {
    align-items: flex-start;
}
.ai-msg-user {
    align-items: flex-end;
}
.ai-msg-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    word-break: break-word;
}
.ai-msg-bot .ai-msg-bubble {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border-bottom-left-radius: 4px;
}
.ai-msg-user .ai-msg-bubble {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}
.ai-msg-time {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.3);
    padding: 0 4px;
}

/* Typing indicator */
.ai-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.ai-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: typingBounce 1.2s infinite;
}
.ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40% { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.ai-chat-input-area {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
}
.ai-chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 8px 8px 8px 14px;
    transition: border-color 0.25s;
}
.ai-chat-input-wrap:focus-within {
    border-color: rgba(79, 172, 254, 0.5);
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.08);
}
.ai-chat-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.9);
    font-family: var(--font-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}
.ai-chat-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.ai-chat-send {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}
.ai-chat-send:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(79, 172, 254, 0.55);
}
.ai-chat-send:active {
    transform: scale(0.95);
}
.ai-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.ai-chat-powered {
    text-align: center;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
    margin-top: 8px;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .ai-chat-window {
        width: calc(100vw - 24px);
        right: 0;
    }
    .ai-chat-widget {
        right: 12px;
        bottom: 80px;
    }
}


/* ===== N8N CHAT WIDGET — LIQUIDGLASS REDESIGN ===== */
/* Palette: light blacks / charcoals / frosted glass — site aesthetic */
:root {
    /* Brand / accent */
    --chat--color--primary:            #c8c8c8;
    --chat--color--primary-shade-50:   #b0b0b0;
    --chat--color--primary--shade-100: #989898;
    --chat--color--secondary:          #c8c8c8;
    --chat--color-secondary-shade-50:  #b0b0b0;

    /* Neutral palette */
    --chat--color-white:               #ffffff;
    --chat--color-light:               #f5f5f5;
    --chat--color-light-shade-50:      #e8e8e8;
    --chat--color-light-shade-100:     #d0d0d0;
    --chat--color-medium:              #888888;
    --chat--color-dark:                #1a1a1a;
    --chat--color-disabled:            #555555;
    --chat--color-typing:              #999999;

    /* Layout */
    --chat--spacing:              1rem;
    --chat--border-radius:        16px;
    --chat--transition-duration:  0.25s;
    --chat--font-family:          'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Window geometry */
    --chat--window--width:         370px;
    --chat--window--height:        540px;
    --chat--window--bottom:        110px;
    --chat--window--right:         40px;
    --chat--window--z-index:       9998;
    --chat--window--border:        1px solid rgba(255,255,255,0.18);
    --chat--window--border-radius: 24px;

    /* Header */
    --chat--header--background:    rgba(28, 28, 28, 0.82);
    --chat--header--color:         rgba(255,255,255,0.93);
    --chat--header--border-bottom: 1px solid rgba(255,255,255,0.08);
    --chat--heading--font-size:    1.05em;
    --chat--subtitle--font-size:   0.75em;
    --chat--subtitle--line-height: 1.5;

    /* Messages */
    --chat--message--font-size:    0.8rem;
    --chat--message--padding:      0.6rem 0.9rem;
    --chat--message--border-radius: 20px;
    --chat--message-line-height:   1.5;
    --chat--message--bot--background:  rgba(255,255,255,0.09);
    --chat--message--bot--color:       rgba(255,255,255,0.88);
    --chat--message--bot--border:      1px solid rgba(255,255,255,0.1);
    --chat--message--user--background: rgba(255,255,255,0.16);
    --chat--message--user--color:      rgba(255,255,255,0.95);
    --chat--message--user--border:     none;

    /* Toggle button */
    --chat--toggle--size:              64px;
    --chat--toggle--border-radius:     50%;
    --chat--toggle--background:        rgba(45,45,45,0.85);
    --chat--toggle--hover--background: rgba(60,60,60,0.9);
    --chat--toggle--active--background:rgba(35,35,35,0.9);
    --chat--toggle--color:             #ffffff;

    /* Input */
    --chat--textarea--height:         40px;
    --chat--input--font-size:         0.8rem;
    --chat--input--border:            0;
    --chat--input--border-radius:     16px;
    --chat--input--padding:           0.65rem 1rem;
    --chat--input--background:        rgba(255,255,255,0.07);
    --chat--input--text-color:        rgba(255,255,255,0.9);
    --chat--input--border-active:     0;

    /* Send button */
    --chat--input--send--button--background:       rgba(255,255,255,0.18);
    --chat--input--send--button--color:            rgba(255,255,255,0.95);
    --chat--input--send--button--background-hover: rgba(255,255,255,0.28);
    --chat--input--send--button--color-hover:      #ffffff;

    /* Body / Footer */
    --chat--body--background:   rgba(18,18,18,0.78);
    --chat--footer--background: rgba(255,255,255,0.03);
    --chat--footer--color:      rgba(255,255,255,0.85);
}

/* ════════════════════════════════════════════════════════════
   DESKTOP — window mode, floating panel
   n8n handles its own toggle/window positioning via CSS vars.
   We add: visual theme + scrollbar visibility + Lenis fix.
   ════════════════════════════════════════════════════════════ */

/* LiquidGlass window shell */
#n8n-chat .chat-window {
    border-radius: 24px !important;
    overflow: hidden !important;
    background: rgba(22, 22, 22, 0.72) !important;
    backdrop-filter: blur(32px) saturate(200%) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.08) !important;
    box-shadow:
        0 32px 80px rgba(0,0,0,0.55),
        0 8px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        inset 1px 0 0 rgba(255,255,255,0.07),
        inset -1px 0 0 rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
}

/* Desktop: keep wrapper at its default n8n position (bottom-right) */
#n8n-chat .chat-window-wrapper {
    bottom: 120px !important;
    right: 40px !important;
}
#n8n-chat .chat-toggle {
    bottom: 120px !important;
    right: 40px !important;
    z-index: 1500 !important;
}

/* Header */
#n8n-chat [class*="chat-header"] {
    background: rgba(30,30,30,0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 18px 20px !important;
}

/* Messages scroll area — desktop
   DO NOT override overflow here; n8n sets it correctly.
   We only improve scrollbar visibility.
   Declaring ::-webkit-scrollbar width forces Chrome/Edge/Safari to use
   a classic (always-visible) non-overlay scrollbar. */
#n8n-chat [class*="chat-messages"] {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(200,200,200,0.55) rgba(255,255,255,0.05) !important;
}
#n8n-chat [class*="chat-messages"]::-webkit-scrollbar {
    width: 5px !important;
    display: block !important;
}
#n8n-chat [class*="chat-messages"]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 3px !important;
}
#n8n-chat [class*="chat-messages"]::-webkit-scrollbar-thumb {
    background: rgba(200,200,200,0.55) !important;
    border-radius: 3px !important;
    min-height: 30px !important;
}
#n8n-chat [class*="chat-messages"]::-webkit-scrollbar-thumb:hover {
    background: rgba(220,220,220,0.8) !important;
}

/* Input area */
#n8n-chat [class*="chat-inputs"],
#n8n-chat [class*="chat-footer"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(30,30,30,0.6) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 0 0 24px 24px !important;
    padding: 12px 16px 16px !important;
    gap: 8px !important;
}
#n8n-chat textarea,
#n8n-chat input[type="text"] {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,0.92) !important;
}
#n8n-chat [class*="send-button"] {
    background: rgba(255,255,255,0.18) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,0.95) !important;
}
#n8n-chat [class*="send-button"]:hover {
    background: rgba(255,255,255,0.28) !important;
}

/* Toggle button — Charcoal LiquidGlass */
#n8n-chat .chat-toggle {
    background: rgba(42, 42, 42, 0.88) !important;
    background-image: none !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.3) !important;
    color: #ffffff !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s !important;
}
#n8n-chat .chat-toggle:hover {
    transform: translateY(-4px) scale(1.06) !important;
    background: rgba(58, 58, 58, 0.92) !important;
}
#n8n-chat .chat-toggle svg,
#n8n-chat .chat-toggle svg * {
    fill: rgba(255,255,255,0.92) !important;
    stroke: none !important;
}

/* Message bubbles */
#n8n-chat [class*="chat-message-bot"] [class*="bubble"],
#n8n-chat [class*="message--from-bot"] {
    background: rgba(255,255,255,0.09) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px 20px 20px 6px !important;
    color: rgba(255,255,255,0.88) !important;
}
#n8n-chat [class*="chat-message-user"] [class*="bubble"],
#n8n-chat [class*="message--from-user"] {
    background: rgba(255,255,255,0.16) !important;
    border-radius: 20px 20px 6px 20px !important;
    color: rgba(255,255,255,0.96) !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE — window mode, but chat-window goes fullscreen
   Strategy: override .chat-window-wrapper to fill the viewport
   (position:fixed, inset:0, transform:none → no stacking context).
   .chat-window then fills 100% of the wrapper.
   The toggle button stays fixed at bottom-right.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── ROOT CAUSE FIX ──────────────────────────────────────────
       iOS Safari keyboard horizontal expansion bug:

       When the iPhone keyboard opens, iOS temporarily widens the *layout*
       viewport (the coordinate system that position:fixed elements use).
       Every fixed/absolute element that uses `right:0`, `width:100%`, or
       `100vw` inherits this widened layout viewport and expands beyond the
       physical screen, pushing the send button and close button off the right
       edge.

       `window.visualViewport.width` is the fix:
       - It always equals the physical screen width (390px on iPhone 14)
       - It does NOT change when the keyboard opens (only height changes)
       - JS sets --chat-viewport-width from it on every visualViewport event
       - CSS uses var(--chat-viewport-width) as width + max-width on .chat-window
       - This hard-caps the chat at the real screen width, regardless of iOS bugs

       Additional protection layers:
       - html.n8n-chat-active { overflow-x:hidden } clamps the html box
         (JS adds this class; :has() selector requires iOS 16+ so we avoid it)
       - font-size:16px on inputs prevents iOS auto-zoom (auto-zoom causes its
         own unrelated horizontal viewport shift)
       - box-sizing:border-box + overflow-x:hidden on every child element
       - flex-shrink:0 on send button so it never collapses off-screen         */

    /* html-level horizontal containment — set by JS via html.n8n-chat-active.
       Works on ALL iOS versions (unlike :has() which needs iOS 16+).          */
    html.n8n-chat-active {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Wrapper: transparent full-viewport layer.
       transform:none removes stacking context so fixed descendants reference
       the viewport directly. pointer-events:none so it doesn't block page
       interaction when chat is closed; restored via body.n8n-chat-open.       */
    #n8n-chat .chat-window-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: var(--chat-viewport-width, 100%) !important;
        max-width: var(--chat-viewport-width, 100%) !important;
        height: 100% !important;
        transform: none !important;
        pointer-events: none !important;
        z-index: 9998 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Restore interaction when chat is open */
    body.n8n-chat-open #n8n-chat .chat-window-wrapper {
        pointer-events: auto !important;
    }

    /* Chat window: fullscreen ONLY when open.
       --chat-viewport-width  = visualViewport.width  (physical screen, JS-set)
       --chat-viewport-height = visualViewport.height (shrinks when kbd opens)
       --chat-viewport-top    = visualViewport.offsetTop (layout-vs-visual offset)

       WHY width:var(--chat-viewport-width) instead of width:100%:
       `100%` on position:fixed resolves to LAYOUT viewport width.
       iOS expands the layout viewport when keyboard opens.
       visualViewport.width is always the physical screen — stable and correct.

       WHY right:auto instead of right:0:
       `right:0` would pin to layout viewport right edge (which moved).
       With left:0 + explicit width from visualViewport, we get exact screen width.

       bottom:auto — cannot use both bottom:0 and explicit height simultaneously;
       they conflict when height < layout-viewport-height (keyboard open).      */
    body.n8n-chat-open #n8n-chat .chat-window {
        position: fixed !important;
        top: var(--chat-viewport-top, 0px) !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--chat-viewport-width, 100%) !important;
        max-width: var(--chat-viewport-width, 100%) !important;
        height: var(--chat-viewport-height, 100dvh) !important;
        max-height: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Visually hide n8n's native toggle on mobile — but NOT with display:none!
       iOS Safari IGNORES element.click() on display:none elements (WebKit bug).
       Instead use opacity:0 + pointer-events:none + size collapse: invisible and
       untouchable, but JS .click() still fires. Our custom open button replaces
       it visually.                                                              */
    #n8n-chat .chat-window-wrapper > button,
    #n8n-chat .chat-window-toggle,
    #n8n-chat [class*="chat-window-toggle"],
    #n8n-chat .chat-toggle {
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: none !important;
        position: fixed !important;
        bottom: 0 !important;
        right: 0 !important;
    }

    /* Header: flex-shrink:0 so it never collapses; width:100%+box-sizing so it
       stays within the window (which is capped at visualViewport.width).       */
    #n8n-chat .chat-window [class*="chat-header"] {
        flex: 0 0 auto !important;
        padding: 14px 56px 14px 16px !important;
        border-radius: 0 !important;
        min-height: 56px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Messages: flex:1+min-height:0 = correct flexbox scroll pattern.
       Without min-height:0, a flex child won't shrink below its content,
       so the container overflows instead of the child scrolling.              */
    #n8n-chat .chat-window [class*="chat-messages"] {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #n8n-chat .chat-window [class*="chat-messages"]::-webkit-scrollbar {
        display: none !important;
    }

    /* Footer: flex-shrink:0 stays at bottom; width+box-sizing prevent widening.
       padding-bottom:max() handles both safe-area and minimum padding.

       display:flex + flex-direction:row + align-items:center: footer is the
       input ROW container. Must be horizontal so input and send button sit
       side-by-side. n8n sets this too, but we explicitly enforce it here so our
       other mobile overrides (overflow, box-sizing) don't accidentally collapse
       it back to block.                                                         */
    #n8n-chat .chat-window [class*="chat-inputs"],
    #n8n-chat .chat-window [class*="chat-footer"] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        border-radius: 0 !important;
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        /* NOTE: overflow-x:hidden removed from footer — in iOS Safari it can
           force a block formatting context that collapses the flex row.        */
        overflow: visible !important;
        gap: 8px !important;
    }

    /* Input wrapper (direct child of footer, wraps the textarea):
       flex:1 1 auto + min-width:0 is the critical combo for flex shrink/grow.
       Without min-width:0 flexbox defaults to min-width:auto (= content size),
       so the textarea never shrinks and squeezes off-screen or goes vertical.
       width:0 + flex:1 guarantees the input fills all remaining space after
       the send button takes its natural width.                                 */
    #n8n-chat .chat-window [class*="chat-inputs"] > *:not([class*="send-button"]),
    #n8n-chat .chat-window [class*="chat-footer"] > *:not([class*="send-button"]) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 0 !important;       /* flex:1 overrides this; width:0 ensures grow */
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Input / textarea:
       font-size MUST be >=16px to prevent iOS auto-zoom on focus.
       writing-mode:horizontal-tb: explicitly force horizontal text direction.
       Some iOS Safari versions can inherit a vertical writing-mode from the
       page or a parent element, making the textarea render vertically.
       width:100%+min-width:0: lets browser auto-size within the flex parent.
       resize:none prevents the textarea from growing outside its container.    */
    #n8n-chat .chat-window textarea,
    #n8n-chat .chat-window input[type="text"] {
        font-size: 16px !important;
        writing-mode: horizontal-tb !important;
        direction: ltr !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        resize: none !important;
        -webkit-appearance: none !important;
    }

    /* Send button: flex-shrink:0 so row compression never hides it.
       margin-left:auto pushes it to the far right of the flex row.     */
    #n8n-chat .chat-window [class*="send-button"] {
        flex-shrink: 0 !important;
        min-width: 36px !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
    }

    /* Hide scroll-to-top button when chat overlay is open */
    body.n8n-chat-open .scroll-to-top {
        display: none !important;
    }

    /* Prevent iOS from scrolling body when keyboard opens.
       This reduces the visualViewport.offsetTop offset, making the
       top-compensation simpler and more reliable.                     */
    body.n8n-chat-open {
        overflow: hidden !important;
    }
}

/* ── Close overlay button (body-level, shown via body.n8n-chat-open) ──── */
#n8n-chat-close-overlay-btn {
    display: none;
    position: fixed !important;
    z-index: 10001 !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(38, 38, 38, 0.85) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.85) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
    padding: 0 !important;
    line-height: 1 !important;
    /* Desktop position: top-right corner of the chat window header */
    top: max(14px, calc(50vh - 317px)) !important;
    right: 54px !important;
}
#n8n-chat-close-overlay-btn:hover {
    background: rgba(60,60,60,0.95) !important;
    color: #fff !important;
    transform: scale(1.12) !important;
}
body.n8n-chat-open #n8n-chat-close-overlay-btn {
    display: flex !important;
}
/* Mobile: close button tracks visualViewport top offset */
@media (max-width: 768px) {
    #n8n-chat-close-overlay-btn {
        top: calc(var(--chat-viewport-top, 0px) + 14px) !important;
        right: 14px !important;
        z-index: 10002 !important;
    }
}

/* ── Mobile open button (body-level, created by JS) ──────────────────────
   Replaces n8n's hidden toggle on mobile. Lives in <body> — completely
   outside the wrapper stacking context, no pointer-events issues.     */
#n8n-chat-mobile-open-btn {
    display: none !important; /* hidden everywhere by default */
    position: fixed !important;
    bottom: 40vh !important;
    right: 16px !important;
    z-index: 9999 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    background: rgba(42, 42, 42, 0.88) !important;
    backdrop-filter: blur(16px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.3) !important;
    color: #ffffff !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.2s !important;
    padding: 0 !important;
}
#n8n-chat-mobile-open-btn:hover {
    background: rgba(58, 58, 58, 0.92) !important;
    transform: scale(1.07) !important;
}
@media (max-width: 768px) {
    /* Show open button on mobile when chat is CLOSED */
    #n8n-chat-mobile-open-btn {
        display: flex !important;
    }
    /* Hide open button when chat is open (close button takes over) */
    body.n8n-chat-open #n8n-chat-mobile-open-btn {
        display: none !important;
    }
}


/* .n8n-badge-247 removed — badge is no longer injected */