@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Poppins:wght@200;300;400;500;600&family=Sen:wght@400;500;600;700;800&display=swap');

/* ===== DESIGN TOKENS — RISONIQ DESIGN SYSTEM ===== */
:root {
    /* Brand */
    --cyan: #14B4F3;
    --cyan-rgb: 20, 180, 243;
    --teal: #18F1F2;
    --orange: #FF7704;
    --navy: #0F2E4A;
    --deep-blue: #172671;
    --dark-red: #7F1B12;

    /* Design System tokens (dark, always-on) */
    --primary: 195 90% 52%;
    --secondary: 181 89% 52%;
    --accent: 27 100% 51%;
    --muted-foreground: 215 20% 65%;

    /* Backgrounds */
    --bg: hsl(209 70% 8%);
    --bg-alt: hsl(209 66% 11%);
    --bg-card: rgba(15, 46, 74, 0.35);
    --bg-card-hover: rgba(20, 60, 90, 0.45);
    --gradient-background: linear-gradient(135deg, hsl(209 70% 8%) 0%, hsl(209 66% 17%) 50%, hsl(209 55% 22%) 100%);

    /* Borders */
    --border: rgba(20, 180, 243, 0.07);
    --border-hover: rgba(20, 180, 243, 0.22);

    /* Glass */
    --glass-bg: hsl(209 50% 12% / 0.75);
    --glass-border: hsl(0 0% 100% / 0.10);
    --glass-highlight: rgba(255,255,255,0.12);
    --glass-caustic: rgba(255,255,255,0.04);
    --glass-shadow: rgba(0,0,0,0.4);
    --glass-blur: 40px;

    /* Shadows */
    --shadow: 0 4px 24px rgba(0,0,0,0.35);
    --shadow-hover: 0 8px 40px rgba(20,180,243,0.12);
    --shadow-glass: 0 8px 32px hsl(0 0% 0% / 0.25);
    --shadow-widget:
        0 4px 24px -4px hsl(195 90% 52% / 0.15),
        0 8px 32px -8px hsl(0 0% 0% / 0.3),
        inset 0 1px 1px hsl(0 0% 100% / 0.1);

    /* Text */
    --text: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.3);

    /* Misc */
    --nav-bg: rgba(8,14,26,0.85);
    --glow: 0 0 60px rgba(20,180,243,0.12);
    --blur: 10px;
    --radius: 20px;
    --radius-sm: 12px;

    /* Spot background */
    --spot-center: 195 75% 38%;
    --spot-top-left: 209 80% 6%;
    --spot-mid-right: 195 80% 35%;
    --spot-bottom-left: 209 85% 5%;
    --spot-bottom-right: 200 65% 30%;
    --spot-dark-1: 209 90% 4%;
    --spot-dark-2: 209 85% 6%;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@media (hover: hover) and (pointer: fine) {
    *, *::before, *::after { cursor: none !important; }
}
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
    font-weight: 400;
    background: var(--gradient-background);
    background-attachment: fixed;
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background 0.5s ease, color 0.5s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
}
/* iOS Safari: background-attachment:fixed causes scroll jank on momentum scroll */
@supports (-webkit-touch-callout: none) {
    body { background-attachment: scroll; }
}

/* ===== CUSTOM CURSOR ===== */
.cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cyan);
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    box-shadow: 0 0 10px rgba(var(--cyan-rgb), 0.5);
}
.cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9998;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid rgba(var(--cyan-rgb), 0.35);
    pointer-events: none;
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}
.cursor-dot.hover { transform: scale(2); }
.cursor-ring.hover {
    width: 50px; height: 50px;
    border-color: rgba(var(--cyan-rgb), 0.6);
}

/* ===== PAGE TRANSITIONS ===== */
.page-transition {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--bg);
    transform: scaleY(0);
    transform-origin: bottom;
    pointer-events: none;
}
.page-transition.entering {
    animation: page-in 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes page-in {
    0% { transform: scaleY(0); transform-origin: bottom; }
    100% { transform: scaleY(1); transform-origin: bottom; }
}
body { animation: page-fade-in 0.3s ease; }

/* ===== VIEWPORT VIGNETTE (disabled — approach replaced by section mask-image) ===== */
.vignette-top, .vignette-bottom { display: none; }
@keyframes page-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }

h1, h2, h3, h4 { font-family: 'Inter', 'Sen', -apple-system, sans-serif; line-height: 1.15; }
h1 { font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -0.025em; }
h2 { font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.025em; }
h3 { font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.35rem); letter-spacing: -0.015em; }
a { text-decoration: none; color: inherit; }

.gradient-text {
    background: linear-gradient(120deg, #14B4F3 0%, #18F1F2 30%, #a78bfa 60%, #14B4F3 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: grad-flow 3.5s linear infinite;
}
@keyframes grad-flow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 2rem; border-radius: 50px;
    font-family: 'Inter', 'Poppins', -apple-system, sans-serif; font-weight: 700; font-size: 0.9rem;
    cursor: pointer; border: none; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, background 0.3s ease, opacity 0.3s ease;
    letter-spacing: 0.02em;
    position: relative; overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute; top: -50%; left: -80%;
    width: 55%; height: 200%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
    transform: skewX(-20deg);
    transition: left 0.55s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-lg { padding: 1rem 2.4rem; font-size: 0.95rem; }
.btn-sm { padding: 0.65rem 1.4rem; font-size: 0.82rem; min-height: 44px; }

.btn-glow {
    background: linear-gradient(135deg, var(--cyan) 0%, #11C4E8 50%, var(--teal) 100%);
    background-size: 200% 100%;
    color: #fff;
    box-shadow: 0 4px 20px rgba(var(--cyan-rgb), 0.35), 0 0 0 0 rgba(var(--cyan-rgb), 0.2);
}
.btn-glow:hover {
    box-shadow: 0 8px 36px rgba(var(--cyan-rgb), 0.5), 0 0 60px rgba(var(--cyan-rgb), 0.15);
    background-position: right center;
    color: #fff;
}

.btn-ghost {
    border: 1px solid rgba(20,180,243,0.25);
    color: var(--text-secondary);
    background: transparent;
}
.btn-ghost:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(var(--cyan-rgb), 0.06);
    box-shadow: 0 0 24px rgba(var(--cyan-rgb), 0.12), inset 0 0 20px rgba(var(--cyan-rgb), 0.04);
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed; top: 0.8rem; left: 50%; transform: translateX(-50%); width: calc(100% - 3rem); max-width: 1200px; z-index: 1000;
    padding: 0.7rem 1.5rem;
    background: rgba(15, 35, 65, 0.45);
    backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 1.5rem;
    box-shadow:
        0 8px 32px -8px rgba(0,0,0,0.4),
        0 4px 16px -4px rgba(0,0,0,0.3),
        inset 0 1px 2px -1px rgba(255,255,255,0.12),
        inset 0 -1px 2px -1px rgba(255,255,255,0.04),
        inset 0 0 0 1px rgba(255,255,255,0.08);
    transition: all 0.5s ease;
    overflow: hidden;
}
.navbar::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20,180,243,0.65) 25%, rgba(24,241,242,0.55) 50%, rgba(167,139,250,0.38) 75%, transparent);
    background-size: 200% 100%;
    animation: nav-shimmer 3.5s linear infinite;
}
@keyframes nav-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.navbar.scrolled {
    background: rgba(10, 22, 45, 0.80);
    backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 8px 40px -8px rgba(0,0,0,0.5),
        inset 0 1px 2px -1px rgba(255,255,255,0.10),
        inset 0 0 0 1px rgba(255,255,255,0.07),
        0 0 30px rgba(20,180,243,0.06);
    padding: 0.6rem 1.5rem;
    top: 0.5rem;
}
.nav-container {
    max-width: 100%; margin: 0 auto; padding: 0;
    display: flex; justify-content: space-between; align-items: center;
    position: relative;
}
.logo { display: flex; align-items: center; gap: 0.6rem; flex: 1; }
.logo-img { height: 42px; width: auto; }
.logo-light { display: none; }
.logo-dark { display: block; }
.logo-text {
    font-weight: 800; font-size: 1.3rem; letter-spacing: 4px;
    color: var(--text); transition: color 0.4s;
}

.nav-links {
    display: flex; gap: 2.2rem; list-style: none; align-items: center;
    position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
    color: var(--text-secondary); font-weight: 600; font-size: 0.88rem;
    transition: color 0.3s; position: relative;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0;
    height: 2px; background: var(--cyan); border-radius: 1px; transition: width 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; flex: 1; justify-content: flex-end; }
.nav-btn {
    background: rgba(var(--cyan-rgb), 0.06); border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer;
    border-radius: 10px; padding: 0.4rem 0.65rem;
    font-size: 0.78rem; font-family: 'Inter', 'Poppins', -apple-system, sans-serif; font-weight: 700;
    transition: all 0.3s; display: flex; align-items: center;
}
.nav-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.nav-actions .btn-sm { display: none; }

@media (min-width: 769px) {
    .nav-actions .btn-sm { display: inline-flex; }
}

.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; background: none; border: none; padding: 4px; }
.hamburger span { width: 22px; height: 2px; background: var(--text); transition: 0.3s; border-radius: 2px; display: block; }

/* ===== HERO ===== */
.hero {
    background: radial-gradient(ellipse at 50% 80%, rgba(20,180,243,0.15) 0%, transparent 60%), radial-gradient(ellipse at 30% 20%, rgba(24,241,242,0.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(255,119,4,0.05) 0%, transparent 50%);
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; padding: 10rem 2rem 4rem;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}
.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../assets/hero-bg.jpg) center bottom/cover no-repeat;opacity:0.55;z-index:0;}



/* Stars */
.hero-stars { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-stars .star { opacity: 1 !important; }
.star {
    position: absolute; border-radius: 50%; background: #fff;
    animation: twinkle var(--dur) ease-in-out infinite alternate;
}
@keyframes twinkle {
    0% { opacity: var(--o1); }
    100% { opacity: var(--o2); }
}
.stars-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.stars-bg .star { position: absolute; }

.hero-gradient {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(var(--cyan-rgb), 0.08) 0%, transparent 70%),
        linear-gradient(180deg, rgba(7,17,32,0.95) 0%, transparent 22%, transparent 70%, transparent 100%);
}

.hero-grid-bg {
    position: absolute; inset: 0; z-index: 1;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 20%, transparent 70%);
}

.hero-content {
    position: relative; z-index: 2; text-align: center; max-width: 850px; margin: 0 auto; padding-bottom: 6rem;
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(var(--cyan-rgb), 0.08);
    border: 1px solid rgba(var(--cyan-rgb), 0.15);
    border-radius: 50px; padding: 0.45rem 1.2rem;
    font-size: 0.78rem; font-weight: 700; color: var(--cyan);
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 2rem;
    position: relative; z-index: 2;
}
.badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
    animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.hero-title { margin-bottom: 1.5rem; }

.hero-desc {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--text-secondary);
    max-width: 560px; margin: 0 auto 2.5rem;
    line-height: 1.8;
}

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3.5rem; }

.hero-metrics {
    display: inline-flex; gap: 0; justify-content: center; align-items: center;
    background: radial-gradient(circle at center, rgba(30,70,105,0.6), rgba(12,32,55,0.7));
    backdrop-filter: blur(var(--blur));
    border: 1px solid var(--border);
    border-radius: 16px; padding: 1.2rem 2rem;
    box-shadow: var(--shadow);
}
.metric { text-align: center; padding: 0 1.8rem; }
.metric-value { display: block; font-weight: 800; font-size: 1.3rem; color: var(--cyan); }
.metric-label { display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; }
.metric-divider { width: 1px; height: 36px; background: var(--border); }

.hero-scroll {
    position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
}
.scroll-line {
    width: 1px; height: 48px; background: linear-gradient(180deg, var(--cyan), transparent);
    animation: scroll-anim 2s ease infinite;
}
@keyframes scroll-anim {
    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ===== MARQUEE ===== */
.industry-strip {
    padding: 2.5rem 0;
    background: transparent;
}
.industry-grid {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.industry-pill {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 1.4rem; border-radius: 50px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}
.industry-pill:hover {
    border-color: var(--cyan);
    background: rgba(var(--cyan-rgb), 0.06);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(var(--cyan-rgb), 0.12);
}
.industry-pill span {
    font-weight: 700; font-size: 0.78rem; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 2px;
    transition: color 0.3s;
}
.industry-pill:hover span { color: var(--cyan); }
.industry-icon {
    width: 18px; height: 18px; stroke: var(--cyan); opacity: 0.6;
    transition: all 0.4s; flex-shrink: 0;
}
.industry-pill:hover .industry-icon {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--cyan));
}
/* Staggered entrance */
.industry-pill:nth-child(1) { animation: pill-in 0.5s 0.1s both; }
.industry-pill:nth-child(2) { animation: pill-in 0.5s 0.15s both; }
.industry-pill:nth-child(3) { animation: pill-in 0.5s 0.2s both; }
.industry-pill:nth-child(4) { animation: pill-in 0.5s 0.25s both; }
.industry-pill:nth-child(5) { animation: pill-in 0.5s 0.3s both; }
.industry-pill:nth-child(6) { animation: pill-in 0.5s 0.35s both; }
@keyframes pill-in {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== SECTIONS ===== */
.section {
    padding: clamp(5rem, 10vw, 8rem) 0;
    position: relative;
}
/* Section backgrounds — subtle differentiation */
.section:nth-of-type(odd) {
    background: transparent;
}
.section:nth-of-type(even) {
    background: hsl(209 55% 10% / 0.5);
}

/* ===== SECTION FADE TRANSITIONS via mask-image ===== */
/* Fades section content (text, cards, bg) in at top and out at bottom */
.section {
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        black 140px,
        black calc(100% - 140px),
        transparent 100%
    );
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        black 140px,
        black calc(100% - 140px),
        transparent 100%
    );
}
/* Exempt 3D carousel section — mask-image flattens preserve-3d */
.dbc-section {
    -webkit-mask-image: none;
    mask-image: none;
}

.section > .container { position: relative; }

/* ===== SECTION FADES (kept for footer) ===== */
.fade-out-bottom { display: none; }
.fade-out-top    { display: none; }
.fade-in-footer  { display: none; }

/* Section dividers */
.section-divider {
    position: relative; width: 100%; height: 0; overflow: hidden;
    background: transparent;
    display: none;
}
.section-divider .divider-star {
    display: none;
}

.section-header { text-align: center; margin-bottom: 4rem; }
.tag {
    display: inline-block;
    font-size: 0.75rem; font-weight: 700; color: var(--cyan);
    text-transform: uppercase; letter-spacing: 4px;
    margin-bottom: 1rem;
}
.section-desc {
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    color: var(--text-secondary); max-width: 520px; margin: 1rem auto 0;
    line-height: 1.7;
}

/* ===== FEATURE CARDS ===== */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border-radius: 2rem;
    padding: 2.5rem;
    box-shadow:
        0 8px 32px -8px var(--glass-shadow),
        0 4px 16px -4px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 -1px 2px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
    will-change: transform;
    position: relative; overflow: hidden;
}
.feature-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--teal), transparent);
    background-size: 200% 100%;
    animation: stripe-slide 3s linear infinite;
    opacity: 0.7;
}
.feature-card::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
    transition: left 0.55s;
    pointer-events: none;
}
.feature-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px -12px rgba(20,180,243,0.2), 0 8px 32px -8px rgba(0,0,0,0.5), inset 0 1px 2px -1px rgba(255,255,255,0.15), inset 0 0 0 1px rgba(20,180,243,0.15); }
.feature-card:hover::after { left: 160%; }
@keyframes stripe-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.feature-icon {
    width: 56px; height: 56px; min-width: 56px; border-radius: 16px;
    background: radial-gradient(circle, rgba(20,180,243,0.15), rgba(20,180,243,0.03));
    border: 1px solid rgba(20,180,243,0.1);
    box-shadow: 0 0 15px rgba(20,180,243,0.05);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.4rem;
}
.feature-icon svg { stroke: var(--cyan); width: 24px; height: 24px; display: block; }

.feature-card h3 { margin-bottom: 0.6rem; }
.feature-card p { color: var(--text-secondary); line-height: 1.7; font-size: 0.92rem; }

/* ===== PRODUCTS STACK ===== */
.products-stack { display: flex; flex-direction: column; gap: 0; }

.product-row {
    display: grid; grid-template-columns: 80px 1fr 2fr auto; align-items: center; gap: 2rem;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
    cursor: pointer;
}
.product-row:first-child { border-top: 1px solid var(--border); }
.product-row:hover { background: rgba(var(--cyan-rgb), 0.03); }

.product-number {
    font-size: 2.5rem; font-weight: 800;
    color: rgba(var(--cyan-rgb), 0.15);
    line-height: 1;
}
.product-row:hover .product-number { color: var(--cyan); }

.product-info h3 { margin-bottom: 0.2rem; }
.product-type {
    font-size: 0.72rem; font-weight: 700; color: var(--cyan);
    letter-spacing: 2px; text-transform: uppercase;
}

.product-desc { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }

/* Product detail (sub-page) */
.product-detail {
    background: radial-gradient(circle at center, rgba(30,70,105,0.9), rgba(12,32,55,0.95), rgba(9,24,40,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.3);
    margin-bottom: 1.5rem;
    transition: all 0.4s;
}
.product-detail:hover { border-color: rgba(20,180,243,0.15); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(20,180,243,0.12); transform: translateY(-3px) scale(1.02); }
.product-detail .tag { margin-bottom: 0.5rem; }
.product-detail h2 { margin-bottom: 1rem; }
.product-detail p { color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 600px; }

.product-arrow {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
    color: var(--text-muted);
}
.product-row:hover .product-arrow { border-color: var(--cyan); color: var(--cyan); background: rgba(var(--cyan-rgb), 0.06); }

/* ===== PRODUCT CARDS GRID (index.html) ===== */
.prod-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }

.prod-card {
    background: rgba(20, 44, 80, 0.50);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 20px;
    padding: 2rem;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 0;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
    text-decoration: none; color: inherit;
    will-change: transform;
    box-shadow:
        0 8px 32px -8px rgba(0,0,0,0.45),
        inset 0 1px 2px -1px rgba(255,255,255,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.08);
}
.prod-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--teal), transparent);
    background-size: 200% 100%;
    animation: stripe-slide 3s linear infinite;
    opacity: 0.7;
}
.prod-card::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
    transition: left 0.55s; pointer-events: none;
}
.prod-card:hover { transform: translateY(-7px) scale(1.02); box-shadow: 0 20px 60px -12px rgba(20,180,243,0.2), 0 8px 32px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(20,180,243,0.18); }
.prod-card:hover::after { left: 160%; }

.prod-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; }
.prod-card-num { font-size: 0.78rem; font-weight: 800; color: var(--cyan); opacity: 0.65; letter-spacing: 1px; }
.prod-card-type { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 99px; padding: 0.22rem 0.7rem; }
.prod-card .feature-icon { margin-bottom: 1.2rem; }
.prod-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.6rem; }
.prod-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; flex: 1; margin-bottom: 1.4rem; }
.prod-card-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--cyan); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid rgba(20,180,243,0.2); border-radius: 50px;
    padding: 0.4rem 1rem; background: rgba(20,180,243,0.05);
    transition: background 0.3s, border-color 0.3s, gap 0.3s, box-shadow 0.3s;
    width: fit-content; margin-top: auto;
}
.prod-card:hover .prod-card-link,
.prod-bento-featured:hover .prod-card-link,
.prod-bento-small:hover .prod-card-link {
    background: rgba(20,180,243,0.12); border-color: rgba(20,180,243,0.45);
    gap: 0.7rem; box-shadow: 0 0 16px rgba(20,180,243,0.15);
}

/* ===== COMPARISON ===== */
.comparison-grid {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem;
    align-items: start;
}
.comp-col {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.comp-risoniq { border-color: rgba(var(--cyan-rgb), 0.2); box-shadow: var(--glow); }

.comp-header {
    font-weight: 800; font-size: 1.1rem; margin-bottom: 1.5rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}
.comp-header-glow { color: var(--cyan); border-bottom-color: rgba(var(--cyan-rgb), 0.2); }

.comp-col ul { list-style: none; }
.comp-col li {
    padding: 0.7rem 0; font-size: 0.92rem;
    color: var(--text-secondary);
    display: flex; align-items: flex-start; gap: 0.6rem;
    border-bottom: 1px solid rgba(var(--cyan-rgb), 0.04);
}
.comp-col li:last-child { border-bottom: none; }
.comp-rest li::before {
    content: '✕'; color: var(--dark-red); font-weight: 800; font-size: 0.8rem;
    min-width: 16px; display: inline-flex; margin-top: 2px;
}
.comp-risoniq li::before {
    content: '✓'; color: var(--cyan); font-weight: 800; font-size: 0.8rem;
    min-width: 16px; display: inline-flex; margin-top: 2px;
}

.comp-divider {
    display: flex; align-items: center; justify-content: center;
    align-self: center;
}
.comp-divider span {
    font-weight: 800; font-size: 1rem; color: var(--text-muted);
    letter-spacing: 2px;
}

/* ===== VOICE SHOWCASE ===== */
.voice-showcase {
    max-width: 700px; margin: 0 auto; text-align: center;
}
.voice-comparison {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem;
    align-items: center; margin-bottom: 2.5rem;
}
.voice-side {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem 1.5rem; text-align: center;
    box-shadow: var(--shadow);
}
.voice-new { border-color: rgba(var(--cyan-rgb), 0.2); box-shadow: var(--glow); }
.voice-label {
    display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 1.2rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;
}
.voice-label-glow { color: var(--cyan); }
.voice-wave-static { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.voice-wave-static svg { width: 100%; height: 40px; }
.voice-wave-live { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.voice-tag-bad { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.voice-tag-good { font-size: 0.78rem; color: var(--cyan); font-weight: 700; }
.voice-divider-v span {
    font-weight: 800; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 2px;
}
.voice-player-row { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.voice-visual { position: relative; display: inline-block; }
.voice-ring {
    position: absolute; inset: -12px; border-radius: 50%;
    border: 2px solid rgba(var(--cyan-rgb), 0.15);
    animation: ring-pulse 3s ease infinite;
    animation-play-state: paused;
    pointer-events: none;
}
.voice-ring-2 {
    inset: -24px; border-width: 1px; animation-delay: 1.5s;
    border-color: rgba(var(--cyan-rgb), 0.08);
}
@keyframes ring-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0; }
}

/* Playing state */
.voice-btn.playing {
    background: linear-gradient(135deg, var(--cyan), var(--teal));
    animation: btn-pulse 1.5s ease infinite;
    box-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.5), 0 0 60px rgba(var(--cyan-rgb), 0.2);
}
@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.4), 0 0 40px rgba(var(--cyan-rgb), 0.15); }
    50% { box-shadow: 0 0 40px rgba(var(--cyan-rgb), 0.6), 0 0 80px rgba(var(--cyan-rgb), 0.3); }
}

.voice-showcase.is-playing .voice-new {
    border-color: var(--cyan);
    box-shadow: 0 0 30px rgba(var(--cyan-rgb), 0.15), 0 0 60px rgba(var(--cyan-rgb), 0.05);
    animation: card-glow 2s ease infinite;
}
@keyframes card-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.1); }
    50% { box-shadow: 0 0 40px rgba(var(--cyan-rgb), 0.25), 0 0 80px rgba(var(--cyan-rgb), 0.1); }
}

.voice-showcase.is-playing .voice-ring {
    animation: ring-pulse-fast 1.5s ease infinite;
    animation-play-state: running;
    border-color: rgba(var(--cyan-rgb), 0.4);
}
.voice-showcase.is-playing .voice-ring-2 {
    animation: ring-pulse-fast 1.5s ease infinite 0.75s;
    animation-play-state: running;
    border-color: rgba(var(--cyan-rgb), 0.25);
}
@keyframes ring-pulse-fast {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

.voice-showcase.is-playing .voice-label-glow {
    animation: text-glow 1.5s ease infinite;
}
@keyframes text-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.3); }
    50% { text-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.6); }
}
.voice-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), var(--teal));
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all 0.3s;
    box-shadow: 0 4px 24px rgba(var(--cyan-rgb), 0.3);
    position: relative; z-index: 2;
}
.voice-btn:hover { transform: scale(1.06); box-shadow: 0 8px 36px rgba(var(--cyan-rgb), 0.4); }
.voice-btn svg { fill: #fff; stroke: none; }

.voice-bars {
    display: flex; height: 40px; gap: 2px; justify-content: center; align-items: flex-end;
    margin: 1.2rem auto; opacity: 0; transition: opacity 0.4s;
}
.voice-wave-live .voice-bars { opacity: 1; }
.voice-bars.active { opacity: 1; }
.voice-bars span {
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), var(--teal));
    animation: vbar 0.6s ease-in-out infinite alternate;
    height: 4px;
}
.voice-bars span:nth-child(1) { animation-delay: 0s; }
.voice-bars span:nth-child(2) { animation-delay: 0.05s; }
.voice-bars span:nth-child(3) { animation-delay: 0.1s; }
.voice-bars span:nth-child(4) { animation-delay: 0.15s; }
.voice-bars span:nth-child(5) { animation-delay: 0.2s; }
.voice-bars span:nth-child(6) { animation-delay: 0.25s; }
.voice-bars span:nth-child(7) { animation-delay: 0.3s; }
.voice-bars span:nth-child(8) { animation-delay: 0.35s; }
.voice-bars span:nth-child(9) { animation-delay: 0.4s; }
.voice-bars span:nth-child(10) { animation-delay: 0.45s; }
.voice-bars span:nth-child(11) { animation-delay: 0.4s; }
.voice-bars span:nth-child(12) { animation-delay: 0.35s; }
.voice-bars span:nth-child(13) { animation-delay: 0.3s; }
.voice-bars span:nth-child(14) { animation-delay: 0.25s; }
.voice-bars span:nth-child(15) { animation-delay: 0.2s; }
.voice-bars span:nth-child(16) { animation-delay: 0.15s; }
.voice-bars span:nth-child(17) { animation-delay: 0.1s; }
.voice-bars span:nth-child(18) { animation-delay: 0.05s; }
.voice-bars span:nth-child(19) { animation-delay: 0s; }
.voice-bars span:nth-child(20) { animation-delay: 0.05s; }
@keyframes vbar { to { height: 32px; } }

.voice-hint { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.8rem; }

/* ===== CTA ===== */
.section-cta {
    background: transparent;
    text-align: center;
    position: relative; overflow: hidden;
    padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem);
}
.section-cta::before {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--cyan-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.cta-content { position: relative; z-index: 1; }
.cta-content h2 { margin-bottom: 1.5rem; }
.cta-content p { color: var(--text-secondary); max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.7; font-size: 1.02rem; }

/* ===== FOOTER ===== */
footer {
    background: linear-gradient(to bottom, transparent 0%, rgba(5,12,24,0.7) 160px, rgba(5,12,24,0.85) 100%);
    padding: 4rem 0 1.5rem;
    color: #fff;
    position: relative;
    border: none;
    margin-top: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 140px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 140px, black 100%);
}


.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem;
    padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-logo { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.footer-logo .logo-text { color: #fff; font-size: 1.1rem; letter-spacing: 3px; }
.footer-logo-img { height: 44px; width: auto; }
.footer-tagline { color: rgba(255,255,255,0.4); font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.2rem; }
.footer-locations {
    display: flex; gap: 1rem; flex-wrap: wrap;
}
.footer-locations span {
    font-size: 0.78rem; color: rgba(255,255,255,0.3);
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}

.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col h4 { font-size: 0.78rem; color: var(--cyan); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; }
.footer-col a { color: rgba(255,255,255,0.45); font-size: 0.88rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
    padding-top: 1.5rem; text-align: center;
    font-size: 0.78rem; color: rgba(255,255,255,0.2);
}

/* ===== PRODUCT SHOWCASE ===== */
.product-showcase {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 3rem; box-shadow: var(--shadow);
}
.product-showcase-header {
    display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem;
}
.product-number-lg {
    font-size: 3.5rem; font-weight: 800; color: rgba(var(--cyan-rgb), 0.12);
    line-height: 1;
}
.product-showcase-header .tag { margin-bottom: 0.3rem; }
.product-showcase-desc {
    color: var(--text-secondary); line-height: 1.8; font-size: 1rem;
    max-width: 700px; margin-bottom: 2rem;
}
.product-features {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
    margin-bottom: 2rem;
}
.pf-item {
    display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.5rem;
    background: radial-gradient(circle at center, rgba(30,70,105,0.7), rgba(12,32,55,0.8));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1.5rem;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.2);
    transition: all 0.4s ease;
}
.pf-item:hover {
    border-color: rgba(20,180,243,0.12);
    transform: translateY(-2px) scale(1.01);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(20,180,243,0.08);
}
.pf-item h4 { font-size: 0.95rem; margin-bottom: 0.4rem; color: #fff; }
.pf-item .feature-icon { min-width: 48px; width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.pf-item p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.6; }

/* ===== MANIFESTO ===== */
.manifesto { max-width: 700px; }
.manifesto-quote { margin-bottom: 2rem; position: relative; }
.quote-mark {
    font-size: 5rem; font-weight: 800; color: rgba(var(--cyan-rgb), 0.15);
    line-height: 1; position: absolute; top: -1.5rem; left: -0.5rem;
}
.manifesto-quote blockquote {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700;
    line-height: 1.4; padding-left: 2rem;
}
.manifesto-text {
    color: var(--text-secondary); line-height: 1.9; font-size: 1rem;
}

/* ===== PROCESS FLOW ===== */
.process-flow {
    display: flex; align-items: stretch; justify-content: center; gap: 1.2rem;
    flex-wrap: wrap;
}
.process-step {
    background: radial-gradient(circle at center, rgba(30,70,105,0.9), rgba(12,32,55,0.95), rgba(9,24,40,0.98));
    border: 1px solid rgba(255,255,255,0.08); border-radius: 2rem;
    padding: 2rem; text-align: center; flex: 1; min-width: 180px; display: flex; flex-direction: column; justify-content: flex-start;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.3); transition: all 0.4s;
}
.process-step:hover { border-color: rgba(20,180,243,0.15); transform: translateY(-3px) scale(1.02); box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(20,180,243,0.12); }
.process-num {
    font-size: 1.8rem; font-weight: 800; color: rgba(var(--cyan-rgb), 0.2);
    margin-bottom: 0.5rem;
}
.process-step:hover .process-num { color: var(--cyan); }
.process-step h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.process-step p { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; }
.process-arrow {
    display: flex; align-items: center; padding-top: 2rem;
}

/* ===== LEGAL PAGES ===== */
.legal { max-width: 700px; margin: 0 auto; padding: 8rem 2rem 4rem; }
.legal h1 { margin-bottom: 2rem; }
.legal h2 { color: var(--cyan); margin: 2.5rem 0 0.8rem; font-size: 1.3rem; }
.legal h3 { margin: 1.5rem 0 0.5rem; }
.legal p, .legal li { color: var(--text-secondary); line-height: 1.8; margin-bottom: 0.7rem; font-size: 0.92rem; }
.legal ul { margin-left: 1.5rem; }
.legal a { color: var(--cyan); }

/* ===== REVEAL ANIMATION ===== */
.reveal {
    opacity: 0;
    transform: perspective(900px) rotateX(9deg) translateY(32px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal[data-dir="left"]  { transform: perspective(900px) rotateY(-10deg) translateX(-44px); opacity: 0; }
.reveal[data-dir="right"] { transform: perspective(900px) rotateY(10deg) translateX(44px); opacity: 0; }
.reveal[data-dir="scale"] { transform: perspective(900px) scale(0.88) translateY(20px); filter: blur(6px); opacity: 0; }
.reveal.visible { opacity: 1; transform: none; filter: none; }

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
    background: linear-gradient(90deg, var(--cyan), var(--teal), var(--orange));
    width: 0%; pointer-events: none;
    transition: width 0.08s linear;
    box-shadow: 0 0 8px rgba(20,180,243,0.6);
}

/* ===== WHY ROW ===== */
.why-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.why-item {
    background: radial-gradient(160% 120% at 0% 0%, rgba(20,60,100,0.6) 0%, rgba(9,22,42,0.98) 60%);
    border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem 2rem 2rem;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
}
.why-item::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.why-item:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 18px 52px rgba(0,0,0,0.45), 0 0 40px rgba(20,180,243,0.09); border-color: rgba(20,180,243,0.18); }
.why-item:hover::after { transform: scaleX(1); }

.why-item-2::after { background: linear-gradient(90deg, var(--teal), #00d4a8); }
.why-item-3::after { background: linear-gradient(90deg, var(--orange), #ffb347); }
.why-item-2 { border-color: rgba(24,241,242,0.08); }
.why-item-3 { border-color: rgba(255,119,4,0.08); }
.why-item-2:hover { border-color: rgba(24,241,242,0.2); box-shadow: 0 18px 52px rgba(0,0,0,0.45), 0 0 40px rgba(24,241,242,0.08); }
.why-item-3:hover { border-color: rgba(255,119,4,0.2); box-shadow: 0 18px 52px rgba(0,0,0,0.45), 0 0 40px rgba(255,119,4,0.08); }

.why-item-big-num {
    font-size: 5.5rem; font-weight: 800; line-height: 0.85;
    color: rgba(20,180,243,0.08); letter-spacing: -4px;
    margin-bottom: 1rem; pointer-events: none; user-select: none;
    transition: color 0.4s;
}
.why-item-2 .why-item-big-num { color: rgba(24,241,242,0.08); }
.why-item-3 .why-item-big-num { color: rgba(255,119,4,0.08); }
.why-item:hover .why-item-big-num { color: rgba(20,180,243,0.14); }
.why-item-2:hover .why-item-big-num { color: rgba(24,241,242,0.14); }
.why-item-3:hover .why-item-big-num { color: rgba(255,119,4,0.14); }

.why-item .feature-icon { margin-bottom: 1.3rem; }
.why-item-2 .feature-icon { background: radial-gradient(circle, rgba(24,241,242,0.12), rgba(24,241,242,0.02)); border-color: rgba(24,241,242,0.12); }
.why-item-3 .feature-icon { background: radial-gradient(circle, rgba(255,119,4,0.12), rgba(255,119,4,0.02)); border-color: rgba(255,119,4,0.12); }
.why-item-2 .feature-icon svg { stroke: var(--teal); }
.why-item-3 .feature-icon svg { stroke: var(--orange); }
.why-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.6rem; }
.why-item p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.72; flex: 1; }

/* ===== STATS STRIP ===== */
.stats-strip { padding: 3rem 0; background: transparent; position: relative; }
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
}
.stat-item {
    padding: 2.2rem 2rem; text-align: center; position: relative;
    border-right: 1px solid var(--border);
    background: radial-gradient(circle at center bottom, rgba(20,180,243,0.04) 0%, transparent 70%);
    transition: background 0.4s;
}
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: radial-gradient(circle at center, rgba(20,180,243,0.08) 0%, transparent 70%); }
.stat-value {
    display: block; font-size: 2.8rem; font-weight: 800;
    line-height: 1; margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #fff 40%, rgba(20,180,243,0.8));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.stat-item:nth-child(2) .stat-value { background: linear-gradient(135deg, #fff 40%, var(--teal)); -webkit-background-clip: text; background-clip: text; }
.stat-item:nth-child(4) .stat-value { background: linear-gradient(135deg, #fff 40%, var(--orange)); -webkit-background-clip: text; background-clip: text; }
.stat-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; }

/* ===== PRODUCT BENTO ===== */
.prod-bento { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; }
.prod-bento-featured {
    background: rgba(20, 44, 80, 0.52);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 24px; padding: 3rem;
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem;
    text-decoration: none; color: inherit;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
    will-change: transform;
    box-shadow:
        0 8px 32px -8px rgba(0,0,0,0.45),
        inset 0 1px 2px -1px rgba(255,255,255,0.12),
        inset 0 0 0 1px rgba(255,255,255,0.09);
}
.prod-bento-featured::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--teal), var(--orange), transparent);
    background-size: 200% 100%;
    animation: stripe-slide 3s linear infinite;
}
.prod-bento-featured::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
    transition: left 0.55s; pointer-events: none;
}
.prod-bento-featured:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 20px 60px -12px rgba(20,180,243,0.2), 0 8px 32px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(20,180,243,0.18); }
.prod-bento-featured:hover::after { left: 160%; }
.prod-bento-featured:hover .prod-card-link { opacity: 1; gap: 0.65rem; }

.prod-bento-num {
    position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%);
    font-size: 9rem; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, rgba(20,180,243,0.08), transparent);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    pointer-events: none; user-select: none; display: none; /* shown via right column */
}
.prod-bento-left { display: flex; flex-direction: column; gap: 0; }
.prod-bento-right {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1rem;
}
.prod-bento-right-num {
    font-size: 8rem; font-weight: 800; line-height: 0.9;
    color: rgba(20,180,243,0.07); letter-spacing: -4px;
    pointer-events: none; user-select: none;
}

.prod-bento-featured .prod-card-header { margin-bottom: 1.2rem; }
.prod-bento-featured .feature-icon { margin-bottom: 1.2rem; }
.prod-bento-featured h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.75rem; }
.prod-bento-featured p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.4rem; }

.prod-bento-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prod-bento-small {
    background: radial-gradient(circle at top left, rgba(20,55,90,0.85), rgba(9,22,42,0.99));
    border: 1px solid var(--border);
    border-radius: 20px; padding: 2rem;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 0;
    text-decoration: none; color: inherit;
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
}
.prod-bento-small::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    opacity: 0; transition: opacity 0.4s;
}
.prod-bento-small:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 44px rgba(0,0,0,0.5), 0 0 30px rgba(20,180,243,0.1); border-color: rgba(20,180,243,0.18); }
.prod-bento-small:hover::before { opacity: 1; }
.prod-bento-small:hover .prod-card-link { opacity: 1; gap: 0.65rem; }
.prod-bento-small .prod-card-header { margin-bottom: 1.2rem; }
.prod-bento-small .feature-icon { margin-bottom: 1rem; }
.prod-bento-small h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.prod-bento-small p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.65; flex: 1; margin-bottom: 1.2rem; }

/* ===== CTA REDESIGN ===== */
.cta-card {
    border: 1px solid rgba(20,180,243,0.15);
    border-radius: 28px; padding: 5rem 4rem;
    text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(20,100,180,0.12) 0%, transparent 70%);
}
.cta-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 28px;
    background: linear-gradient(135deg, rgba(20,180,243,0.06) 0%, transparent 50%, rgba(255,119,4,0.04) 100%);
    pointer-events: none;
}
.cta-card .cta-orb {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(20,180,243,0.07) 0%, transparent 70%);
    pointer-events: none; animation: ctaOrb 6s ease-in-out infinite;
}
@keyframes ctaOrb {
    0%,100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-55%) scale(1.12); }
}

/* ===== CONTACT FORM ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-group label {
    font-size: 0.78rem; color: var(--text-muted); font-weight: 700;
    font-family: 'Inter', 'Poppins', -apple-system, sans-serif;
    text-transform: uppercase; letter-spacing: 1.5px;
}
.form-group input, .form-group textarea {
    width: 100%; padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-family: 'Inter', 'Poppins', -apple-system, sans-serif; font-size: 0.92rem;
    transition: all 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), 0.08);
}
.form-group textarea { min-height: 130px; resize: vertical; }

.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2rem; box-shadow: var(--shadow);
}
.contact-card h3 { margin-bottom: 0.3rem; font-size: 1rem; }
.contact-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }
.contact-card a { color: var(--cyan); font-weight: 700; font-size: 0.95rem; }
.contact-icon-row { display: flex; align-items: flex-start; gap: 1rem; }

/* ===== SUB-PAGE HERO ===== */
.page-hero {
    padding: 10rem 2rem 4rem; text-align: center;
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(7,17,32,0.85) 0%, rgba(7,17,32,0.4) 60%, transparent 100%);
}
.page-hero::before { display: none; }
.page-hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(7,17,32,0.85));
    pointer-events: none;
}
.page-hero h1 { margin-bottom: 1rem; position: relative; }
.page-hero p { color: var(--text-secondary); max-width: 520px; margin: 0 auto; position: relative; font-size: 1.05rem; }

/* ===== ABOUT PAGE ===== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text { }
.about-text h3 { margin-bottom: 1rem; }
.about-text p { color: var(--text-secondary); line-height: 1.8; font-size: 0.95rem; }

.markets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.market-card {
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.8rem; text-align: center; box-shadow: var(--shadow);
    transition: all 0.3s;
}
.market-card:hover { transform: translateY(-3px); border-color: var(--border-hover); }
.market-card h4 { font-size: 0.92rem; }

/* ===== WORLD MAP ===== */
.world-map {
    max-width: 800px; margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1rem; box-shadow: var(--shadow);
    overflow: hidden;
}
.map-dot {
    width: 14px !important; height: 14px !important;
    background: var(--cyan);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 12px rgba(var(--cyan-rgb), 0.6), 0 0 24px rgba(var(--cyan-rgb), 0.3);
    animation: map-ping 2s ease-out infinite;
}
.map-dot { border-color: rgba(255,255,255,0.3); }
@keyframes map-ping {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.6); }
    50% { box-shadow: 0 0 20px rgba(var(--cyan-rgb), 0.8), 0 0 40px rgba(var(--cyan-rgb), 0.3); }
}
.map-label {
    background: rgba(var(--cyan-rgb), 0.1) !important;
    border: 1px solid rgba(var(--cyan-rgb), 0.25) !important;
    color: var(--text) !important;
    font-family: 'Inter', 'Sen', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 3px 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.map-label { color: #fff !important; background: rgba(var(--cyan-rgb), 0.15) !important; }
.map-label::before { border-top-color: rgba(var(--cyan-rgb), 0.25) !important; }
.leaflet-container { background: var(--bg-alt) !important; }

.locations-row {
    display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
}
.location-tag {
    display: flex; align-items: center; gap: 0.4rem;
    font-weight: 700; font-size: 0.92rem; color: var(--text-secondary);
}
.location-tag svg { width: 16px; height: 16px; stroke: var(--cyan); fill: none; stroke-width: 1.5; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .why-row { grid-template-columns: 1fr; }
    .prod-bento-featured { grid-template-columns: 1fr; }
    .prod-bento-right { display: none; }
    .prod-bento-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-top: 1px solid var(--border); }
    .stat-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
    .features-grid { grid-template-columns: 1fr; }
    .comparison-grid { grid-template-columns: 1fr; gap: 1rem; }
    .comp-divider { padding: 0.5rem 0; }
    .comp-divider span { font-size: 0.85rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .product-row { grid-template-columns: 60px 1fr; gap: 1rem; }
    .product-desc { display: none; }
    .markets-grid { grid-template-columns: repeat(2, 1fr); }
    .product-features { grid-template-columns: 1fr; }
    .product-showcase { padding: 2rem; }
    .process-arrow { display: none; }
    .process-flow { flex-direction: column; gap: 1rem; }
    .about-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
        background: var(--bg);
        flex-direction: column; justify-content: center; align-items: center;
        gap: 2rem; transform: translateX(-100%); transition: transform 0.35s ease;
        z-index: 999;
    }
    .nav-links.open { transform: translateX(0); }
    .nav-links a { font-size: 1.2rem; }
    .hamburger { display: flex; z-index: 1001; }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .logo { flex: unset; }
    .nav-actions { flex: unset; }
    /* Navbar always solid on mobile — reset float pill to full-width bar so nav-links (position:fixed) uses viewport as containing block */
    .navbar { background: var(--nav-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); left: 0; width: 100%; transform: none; top: 0; border-radius: 0; overflow: visible; }

    /* Hero */
    .hero { padding: 8rem 1.5rem 3rem; min-height: 100svh; overflow: hidden; }
    .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
    h1 { font-size: clamp(2rem, 8vw, 3.5rem); }
    .hero-badge { font-size: 0.65rem; padding: 0.4rem 1rem; margin-bottom: 1.5rem; letter-spacing: 1.5px; }
    .hero-desc { font-size: 0.95rem; margin-bottom: 2rem; }
    .hero-actions { gap: 0.8rem; margin-bottom: 2.5rem; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-metrics {
        flex-direction: row; gap: 0; padding: 1rem 1.2rem;
        width: 100%; justify-content: space-around;
    }
    .metric { padding: 0 0.6rem; }
    .metric-value { font-size: 1.1rem; }
    .metric-label { font-size: 0.72rem; letter-spacing: 0.5px; }
    .metric-divider { width: 1px; height: 32px; }
    .hero-scroll { display: none; }

    /* Marquee */

    /* Sections */
    .section { padding: 3rem 0; }
    .section-header { margin-bottom: 2rem; }
    .section-header h2 { font-size: 1.6rem; }
    .section-desc { font-size: 0.9rem; }
    .tag { font-size: 0.68rem; letter-spacing: 3px; }
    .container { padding: 0 1.25rem; }

    /* Feature cards */
    .features-grid { gap: 0.8rem; }
    .feature-card {
        padding: 1.5rem; display: flex; gap: 1rem; align-items: flex-start;
        flex-direction: row;
    }
    .feature-card .feature-icon { margin-bottom: 0; min-width: 44px; }
    .feature-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
    .feature-card p { font-size: 0.85rem; }
    .feature-card::before { height: 2px; }

    /* Products */
    .product-row {
        grid-template-columns: 1fr; gap: 0.5rem; padding: 1.2rem 1.5rem;
    }
    .product-number { display: none; }
    .product-info h3 { font-size: 1.05rem; }
    .product-type { font-size: 0.65rem; }
    .product-arrow { display: none; }
    .prod-cards-grid { grid-template-columns: 1fr; gap: 1rem; }
    .prod-card { padding: 1.5rem; }
    .prod-card h3 { font-size: 1.1rem; }
    /* Why bento mobile */
    .why-row { grid-template-columns: 1fr; }
    /* Stats strip mobile */
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .stat-item:nth-child(2) { border-right: none; }
    .stat-item:nth-child(3) { border-right: 1px solid var(--border); border-top: 1px solid var(--border); }
    .stat-item:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
    .stat-value { font-size: 2rem; }
    /* Prod bento mobile */
    .prod-bento-featured { grid-template-columns: 1fr; }
    .prod-bento-right { align-items: flex-start; }
    .prod-bento-right-num { font-size: 5rem; }
    .prod-bento-row { grid-template-columns: 1fr; }
    .prod-bento-featured h3 { font-size: 1.3rem; }

    /* Comparison */
    .comparison-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .comp-col { padding: 1.5rem; border-radius: 16px; }
    .comp-header { font-size: 0.95rem; margin-bottom: 1rem; padding-bottom: 0.8rem; }
    .comp-col li { font-size: 0.85rem; padding: 0.5rem 0; }
    .comp-divider { padding: 0.3rem 0; }
    .comp-divider span { font-size: 0.75rem; }

    /* Voice */
    .voice-showcase { max-width: 100%; }
    .voice-comparison { grid-template-columns: 1fr; gap: 0.8rem; }
    .voice-side { padding: 1.2rem; border-radius: 16px; }
    .voice-label { font-size: 0.68rem; margin-bottom: 0.8rem; }
    .voice-tag-bad, .voice-tag-good { font-size: 0.72rem; }
    .voice-divider-v { padding: 0.2rem 0; }
    .voice-btn { width: 64px; height: 64px; }

    /* CTA */
    .cta-content h2 { font-size: 1.6rem; }
    .cta-content p { font-size: 0.92rem; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-brand-col { text-align: center; }
    .footer-locations { justify-content: center; }
    .footer-logo { justify-content: center; }
    .footer-tagline { text-align: center; }

    /* Map */
    .world-map { padding: 0.5rem; }
    #mapContainer { height: 260px !important; }

    /* Product showcase (sub-pages) */
    .product-showcase { padding: 1.8rem; border-radius: 16px; }
    .product-showcase-header { gap: 1rem; }
    .product-number-lg { font-size: 2.5rem; }
    .product-features { grid-template-columns: 1fr; gap: 1rem; }
    .pf-item { gap: 0.8rem; }
    .pf-item .feature-icon { min-width: 44px; }

    /* Process flow */
    .process-arrow { display: none; }
    .process-flow { flex-direction: column; gap: 0.8rem; }
    .process-step { padding: 1.5rem; border-radius: 16px; }

    /* Contact */
    .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
    .contact-card { padding: 1.5rem; border-radius: 16px; }

    /* Manifesto */
    .manifesto-quote blockquote { font-size: 1.2rem; padding-left: 1.5rem; }
    .quote-mark { font-size: 3.5rem; top: -1rem; }

    /* Page hero */
    .page-hero { padding: 8rem 1.5rem 3rem; }
    .page-hero h1 { font-size: 1.8rem; }
    .page-hero p { font-size: 0.92rem; }

    /* Locations */
    .locations-row { gap: 1rem; }
    .location-tag { font-size: 0.85rem; }

    /* Markets */
    .markets-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .market-card { padding: 1.3rem; border-radius: 16px; }
    .market-card h4 { font-size: 0.85rem; }
    .market-card p { font-size: 0.75rem; }

    /* About page grids — force single column */
    .steps-grid { grid-template-columns: 1fr !important; }
    .about-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .vision-block { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .market-grid { grid-template-columns: 1fr !important; }
    .prod-bento-grid { grid-template-columns: 1fr !important; }
}

/* ===== LIQUID GLASS AMBIENT ORBS ===== */
.liquid-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.liquid-orb {
    position: absolute; border-radius: 50%;
    filter: blur(80px); will-change: transform;
}
.liquid-orb-1 {
    width: min(55vw, 800px); height: min(55vw, 800px);
    background: rgba(20, 180, 243, 0.18);
    top: -15%; left: -10%;
    animation: orb-float-1 22s ease-in-out infinite;
}
.liquid-orb-2 {
    width: min(45vw, 650px); height: min(45vw, 650px);
    background: rgba(24, 241, 242, 0.12);
    bottom: -10%; right: -8%;
    animation: orb-float-2 28s ease-in-out infinite;
}
.liquid-orb-3 {
    width: min(38vw, 550px); height: min(38vw, 550px);
    background: rgba(255, 119, 4, 0.07);
    top: 35%; left: 35%;
    animation: orb-float-3 34s ease-in-out infinite;
}
.liquid-orb-4 {
    width: min(30vw, 450px); height: min(30vw, 450px);
    background: rgba(167, 139, 250, 0.10);
    top: -5%; right: 5%;
    animation: orb-float-4 30s ease-in-out infinite;
}
.liquid-orb-5 {
    width: min(22vw, 300px); height: min(22vw, 300px);
    background: rgba(34, 197, 94, 0.06);
    bottom: 5%; left: 5%;
    animation: orb-float-5 36s ease-in-out infinite;
}
@keyframes orb-float-1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(40px,30px) scale(1.04); }
    66%       { transform: translate(-20px,50px) scale(0.97); }
}
@keyframes orb-float-2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    40%       { transform: translate(-50px,-35px) scale(1.05); }
    70%       { transform: translate(30px,-55px) scale(0.96); }
}
@keyframes orb-float-3 {
    0%, 100% { transform: translate(0,0) scale(1); }
    30%       { transform: translate(30px,-40px) scale(1.06); }
    60%       { transform: translate(-40px,25px) scale(0.95); }
}
@keyframes orb-float-4 {
    0%, 100% { transform: translate(0,0) scale(1); }
    45%       { transform: translate(-30px,40px) scale(1.04); }
    75%       { transform: translate(20px,60px) scale(0.97); }
}
@keyframes orb-float-5 {
    0%, 100% { transform: translate(0,0) scale(1); }
    35%       { transform: translate(50px,-30px) scale(1.08); }
    65%       { transform: translate(-25px,-45px) scale(0.94); }
}

/* ===== FONT NUMBERS ===== */
.metric-value, .stat-value, .why-item-big-num, .prod-bento-right-num {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ===== LIQUID GLASS UTILITIES ===== */
.liquid-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    box-shadow:
        0 8px 32px -8px var(--glass-shadow),
        0 4px 16px -4px var(--glass-shadow),
        inset 0 1px 2px -1px var(--glass-highlight),
        inset 0 -1px 2px -1px var(--glass-caustic),
        inset 0 0 0 1px var(--glass-border);
    transition: all 0.5s ease;
}
.liquid-glass-reflection {
    position: relative;
}
.liquid-glass-reflection::before {
    content: '';
    position: absolute; top: 1px; left: 1px; right: 1px;
    height: 46%; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none; z-index: 1;
}

/* ===== CARD EFFECTS (reusable) ===== */
.card-stripe { position: relative; overflow: hidden; }
.card-stripe::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--teal), transparent);
    background-size: 200% 100%;
    animation: stripe-slide 3s linear infinite;
    opacity: 0.75;
}
.card-shimmer { position: relative; overflow: hidden; }
.card-shimmer::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
    transition: left 0.55s; pointer-events: none;
}
.card-shimmer:hover::after { left: 160%; }

/* ===== FADE-UP ENTRANCE ===== */
@keyframes fade-up {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) both; }
.fade-up-d1 { animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 80ms both; }
.fade-up-d2 { animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 160ms both; }
.fade-up-d3 { animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 240ms both; }
.fade-up-d4 { animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 320ms both; }

.liquid-bg-scan { display: none; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: rgba(20,180,243,0.20); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(20,180,243,0.35); }

/* ===== TEXT SELECTION ===== */
::selection { background: rgba(20,180,243,0.22); color: inherit; }

@media (max-width: 380px) {
    .hero-title { font-size: 1.9rem; }
    .hero-metrics { flex-direction: column; gap: 0; padding: 0.8rem; }
    .metric { padding: 0.5rem 0; }
    .metric-divider { width: 80%; height: 1px; margin: 0 auto; }
    .markets-grid { grid-template-columns: 1fr; }
}
.section-divider.footer-divider {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(10,20,40,0.95) 100%);
}

/* ===== MOBILE POLISH ===== */
@media (max-width: 768px) {
    /* Industry pills - wrap nicely */
    .industry-grid { gap: 0.6rem; justify-content: center; }
    .industry-pill { padding: 0.5rem 1rem; }
    .industry-pill span { font-size: 0.65rem; letter-spacing: 1.5px; }
    .industry-icon { width: 14px; height: 14px; }

    /* Dividers smaller on mobile */
    .section-divider { height: 60px; }
    .section-divider.footer-divider { height: 70px; }

    /* Kontakt map bigger */
    .contact-layout #mapContainer,
    .world-map #mapContainer { height: 300px !important; border-radius: 12px; }

    /* Voice demo tighter */
    .voice-wave-static, .voice-wave-live { margin: 0.5rem 0; }
    .voice-bars { height: 30px; margin: 0.8rem auto; }
    .voice-player-row { gap: 0.8rem; margin-top: 1rem; }
    .voice-hint { font-size: 0.78rem; }

    /* Product showcase desc */
    .product-showcase-desc { font-size: 0.9rem; line-height: 1.6; }

    /* Tech stack items */
    .tech-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .tech-item { padding: 1.2rem; }

    /* Footer bottom */
    .footer-bottom { font-size: 0.75rem; padding-top: 1.2rem; }

    /* Comparison divider */
    .comp-divider { padding: 0.5rem 0; }
    .comp-divider span { font-size: 0.85rem; }

    /* Stars fewer on mobile */
    .stars-bg .star:nth-child(n+25) { display: none; }
}

@media (max-width: 380px) {
    .industry-grid { gap: 0.5rem; }
    .industry-pill { padding: 0.45rem 0.8rem; }
    .industry-pill span { font-size: 0.6rem; }
    .section-divider { height: 40px; }
}


.section::before, .section::after { display: none; }
.section > .container { position: relative; z-index: 2; }

/* ===== PAGE HERO PILLS ===== */


/* ===== DASHBOARD CAROUSEL ===== */
.dbc-section { overflow: visible; }

.dbc-outer {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    overflow: visible;
}
.dbc-glow {
    position: absolute;
    width: 900px; height: 500px;
    background: radial-gradient(ellipse, rgba(20,180,243,0.11) 0%, transparent 65%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 0;
}
@keyframes dbFloat {
    0%, 100% { transform: translate(-50%,-50%) scale(1); }
    50% { transform: translate(-50%,-55%) scale(1.06); }
}

/* 3D Stage */
.dbc-stage-wrap {
    position: relative;
    perspective: 1400px;
    perspective-origin: 50% 50%;
    overflow: visible;
    height: 520px;
    z-index: 1;
}
.dbc-stage {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
}

/* Slides */
.dbc-slide {
    position: absolute;
    left: 50%; top: 0;
    width: 800px;
    background: #020810;
    border-radius: 12px;
    border: 1px solid rgba(20,180,243,0.18);
    overflow: hidden;
    transform-origin: center center;
    transition:
        transform 1.2s cubic-bezier(0.77, 0, 0.175, 1),
        opacity   1.0s  cubic-bezier(0.77, 0, 0.175, 1),
        box-shadow 1.2s ease;
    will-change: transform, opacity;
}
.dbc-slide[data-state="active"] {
    transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1; z-index: 5; cursor: default;
    box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 60px rgba(20,180,243,0.1), 0 0 0 1px rgba(20,180,243,0.12);
}
.dbc-slide[data-state="right"] {
    transform: translateX(5%) translateZ(-150px) rotateY(-22deg) scale(0.8);
    opacity: 0.58; z-index: 3; cursor: pointer;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.dbc-slide[data-state="left"] {
    transform: translateX(-105%) translateZ(-150px) rotateY(22deg) scale(0.8);
    opacity: 0.58; z-index: 3; cursor: pointer;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.dbc-slide[data-state="hidden"] {
    transform: translateX(-50%) translateZ(-350px) scale(0.5);
    opacity: 0; z-index: 1; pointer-events: none;
}
.dbc-slide[data-state="right"]:hover {
    opacity: 0.78;
    transform: translateX(5%) translateZ(-100px) rotateY(-16deg) scale(0.84);
}
.dbc-slide[data-state="left"]:hover {
    opacity: 0.78;
    transform: translateX(-105%) translateZ(-100px) rotateY(16deg) scale(0.84);
}

/* Browser chrome bar */
.dbc-chrome {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: #010609;
    border-bottom: 1px solid rgba(20,180,243,0.1);
    flex-shrink: 0;
}
.dbc-dots { display: flex; gap: 7px; }
.dbc-d1, .dbc-d2, .dbc-d3 { width: 12px; height: 12px; border-radius: 50%; display: block; flex-shrink: 0; }
.dbc-d1 { background: #FF5F57; }
.dbc-d2 { background: #FEBC2E; }
.dbc-d3 { background: #28C840; }
.dbc-url {
    flex: 1; text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px;
    padding: 4px 14px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.38);
    max-width: 280px; margin: 0 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Screenshot image */
.dbc-img-wrap { overflow: hidden; line-height: 0; }
.dbc-img { width: 100%; height: auto; display: block; max-height: 478px; object-fit: cover; object-position: top; }


/* Labels */
.dbc-labels {
    position: relative; height: 32px;
    margin-top: 2rem; text-align: center;
}
.dbc-lbl {
    position: absolute; left: 0; right: 0;
    font-size: 1rem; font-weight: 600; letter-spacing: 0.03em;
    color: rgba(255,255,255,0.65);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}
.dbc-lbl.active { opacity: 1; transform: none; }

/* Nav dots */
.dbc-nav {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 1.25rem;
}
.dbc-dot {
    height: 8px; width: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none; cursor: pointer; padding: 0;
    transition: background 0.35s, width 0.35s, border-radius 0.35s, box-shadow 0.35s;
}
.dbc-dot.active {
    background: var(--cyan);
    width: 26px; border-radius: 4px;
    box-shadow: 0 0 12px rgba(20,180,243,0.5);
}

/* Reveal entrance — one-shot via JS class, never on state switch */
.dbc-slide.dbc-entering {
    animation: dbcEntrance 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes dbcEntrance {
    from { transform: translateX(-50%) translateZ(-80px) scale(0.9); opacity: 0; }
    to   { transform: translateX(-50%) translateZ(0) rotateY(0deg) scale(1); opacity: 1; }
}

@media (max-width: 960px) {
    .dbc-slide { width: 620px; }
    .dbc-stage-wrap { height: 400px; }
    .dbc-slide[data-state="right"] { transform: translateX(6%) translateZ(-110px) rotateY(-20deg) scale(0.78); }
    .dbc-slide[data-state="left"]  { transform: translateX(-106%) translateZ(-110px) rotateY(20deg) scale(0.78); }
}
@media (max-width: 768px) {
    .dbc-slide { width: 90vw; }
    .dbc-stage-wrap { height: auto; min-height: 150px; overflow: hidden; }
    .dbc-screen { min-height: 0; }
    .dbc-slide[data-state="active"] { transform: translateX(-50%) translateZ(0) scale(1); }
    .dbc-slide[data-state="right"],
    .dbc-slide[data-state="left"] { opacity: 0; pointer-events: none; }
    /* Hide footer video on mobile — save 2.1MB */
    #footerVideo { display: none; }
}

/* ===== CAROUSEL CSS SCREENS ===== */
.dbc-screen {
    background: linear-gradient(160deg, #0C1830 0%, #0A1528 50%, #070F1E 100%);
    min-height: 460px;
    overflow: hidden;
    user-select: none;
}

/* ── Workspace Screen ── */
.dbc-ws {
    display: flex; flex-direction: row; min-height: 460px; overflow: hidden;
}
.dbc-ws-sidenav {
    width: 54px; flex-shrink: 0;
    background: rgba(3,7,18,0.96);
    border-right: 1px solid rgba(20,180,243,0.08);
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 0 12px; gap: 5px;
}
.dbc-ws-snlogo {
    margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 8px;
}
.dbc-ws-snicon {
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.28);
}
.dbc-ws-snactive { background: rgba(20,180,243,0.14); color: #14B4F3; }
.dbc-ws-snbottom { margin-top: auto; }
.dbc-ws-body {
    flex: 1; padding: 1.35rem 1.5rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.9rem; min-width: 0;
}
.dbc-ws-welcome {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, rgba(14,38,80,0.95) 0%, rgba(10,26,58,0.95) 100%);
    border: 1px solid rgba(20,180,243,0.18);
    border-radius: 50px; padding: 11px 20px;
    width: 100%;
    color: rgba(255,255,255,0.85); font-size: 0.84rem; font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
}
.dbc-ws-wicon {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg,rgba(20,180,243,0.18),rgba(20,180,243,0.06));
    border: 1px solid rgba(20,180,243,0.28);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 0 12px rgba(20,180,243,0.15);
}
.dbc-ws-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.9rem; width: 100%; }
.dbc-ws-card {
    background: linear-gradient(155deg, rgba(14,40,85,0.85) 0%, rgba(9,26,60,0.9) 100%);
    border: 1px solid rgba(20,180,243,0.12);
    border-radius: 16px; padding: 1.1rem 0.9rem 0.9rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.dbc-ws-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: rgba(20,180,243,0.42);
    box-shadow: 0 18px 44px rgba(20,180,243,0.18), 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.dbc-ws-cname { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.9); align-self: flex-start; letter-spacing: 0.01em; }
.dbc-ws-cicon { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.3rem 0; min-height: 58px; }
.dbc-ws-btn {
    background: linear-gradient(135deg,#14B4F3 0%,#18F1F2 100%); color: #030810;
    border: none; border-radius: 50px; padding: 7px 0; width: 100%;
    font-size: 0.72rem; font-weight: 700; font-family: 'Inter', 'Poppins', -apple-system, sans-serif; letter-spacing: 0.02em;
    cursor: default; box-shadow: 0 4px 14px rgba(20,180,243,0.35);
}

/* ── Call Agents Screen ── */
.dbc-ag {
    padding: 1.5rem 1.75rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.1rem;
}
.dbc-ag-title { font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: 0.01em; }
.dbc-ag-sub { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 3px; }
.dbc-ag-badge {
    background: rgba(20,180,243,0.15); color: #14B4F3;
    border-radius: 50px; padding: 2px 9px; font-size: 0.7rem; font-weight: 700; margin-left: 6px;
    border: 1px solid rgba(20,180,243,0.25);
}
.dbc-ag-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.dbc-ag-card {
    background: linear-gradient(155deg, rgba(12,32,72,0.9) 0%, rgba(8,20,50,0.95) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 1.25rem 1rem 1rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.dbc-ag-card:hover {
    transform: translateY(-5px) scale(1.025);
    border-color: rgba(255,203,60,0.38);
    box-shadow: 0 16px 38px rgba(255,203,60,0.12), 0 6px 16px rgba(0,0,0,0.45);
}
.dbc-ag-av {
    width: 68px; height: 68px; border-radius: 50%;
    border: 3px solid #FFCB3C;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: 0;
    box-shadow: 0 0 0 5px rgba(255,203,60,0.1), 0 0 20px rgba(255,203,60,0.15);
    flex-shrink: 0;
}
.dbc-ag-name { font-size: 0.88rem; font-weight: 700; color: #fff; }
.dbc-ag-co { font-size: 0.66rem; color: rgba(255,255,255,0.4); text-align: center; line-height: 1.3; }
.dbc-ag-stats {
    display: flex; gap: 0; width: 100%;
    padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 0.1rem;
}
.dbc-ag-stats > div { flex: 1; text-align: center; }
.dbc-ag-sl { font-size: 0.58rem; color: rgba(255,255,255,0.35); display: block; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px; }
.dbc-ag-sv { font-size: 1rem; font-weight: 800; color: #fff; display: block; }
.dbc-ag-rrow { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 0.1rem; }
.dbc-ag-rl { font-size: 0.6rem; color: rgba(255,255,255,0.35); white-space: nowrap; }
.dbc-ag-rbar { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.dbc-ag-rfill { height: 100%; background: linear-gradient(90deg,#14B4F3,#18F1F2); border-radius: 2px; }
.dbc-ag-rv { font-size: 0.75rem; font-weight: 800; color: #14B4F3; }

/* Deep Dive Screen */
.dbc-dd { display: flex; flex-direction: column; min-height: 460px; }
.dbc-dd-topbar {
    display: flex; align-items: center; gap: 0;
    padding: 0 1.25rem;
    background: rgba(4,10,22,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dbc-dd-tab {
    display: flex; align-items: center; gap: 5px;
    padding: 10px 14px; font-size: 0.75rem;
    color: rgba(255,255,255,0.4); cursor: default;
    border-bottom: 2px solid transparent;
}
.dbc-dd-active {
    color: #14B4F3;
    border-bottom-color: #14B4F3;
}
.dbc-dd-body { display: flex; flex: 1; overflow: hidden; }
.dbc-dd-sidebar {
    width: 175px; flex-shrink: 0;
    background: rgba(5,10,22,0.6);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 1rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.dbc-dd-stitle { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.7); }
.dbc-dd-ssub { font-size: 0.62rem; color: rgba(255,255,255,0.3); line-height: 1.4; }
.dbc-dd-search {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 7px; padding: 6px 8px;
    font-size: 0.65rem; color: rgba(255,255,255,0.25);
    margin-top: 0.25rem;
}
.dbc-dd-camp {
    padding: 8px 10px; border-radius: 8px;
    font-size: 0.68rem; color: rgba(255,255,255,0.5);
    cursor: default; display: flex; flex-direction: column; gap: 2px;
    transition: background 0.3s, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}
.dbc-dd-camp:not(.dbc-dd-cactive):hover {
    background: rgba(20,180,243,0.08);
    color: rgba(255,255,255,0.75);
    transform: translateX(4px);
}
.dbc-dd-calls { font-size: 0.6rem; color: rgba(255,255,255,0.3); }
.dbc-dd-cactive {
    background: linear-gradient(135deg,#14B4F3,#0a8fd6);
    color: #fff; border-radius: 8px;
}
.dbc-dd-cactive .dbc-dd-calls { color: rgba(255,255,255,0.65); }
.dbc-dd-main {
    flex: 1; padding: 1rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.65rem; overflow: hidden;
}
.dbc-dd-mtitle {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.88rem; font-weight: 700; color: #fff;
}
.dbc-dd-campaign-name { font-size: 0.68rem; color: rgba(255,255,255,0.4); font-weight: 400; margin-left: auto; }
.dbc-dd-msub { font-size: 0.65rem; color: rgba(255,255,255,0.35); line-height: 1.4; }
.dbc-dd-qbubble {
    align-self: flex-end;
    background: linear-gradient(135deg,#14B4F3,#18F1F2);
    color: #040A14; border-radius: 14px 14px 4px 14px;
    padding: 8px 14px; font-size: 0.72rem; font-weight: 600;
    max-width: 80%;
}
.dbc-dd-abubble {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 4px 14px 14px 14px;
    padding: 10px 14px; font-size: 0.68rem; color: rgba(255,255,255,0.75);
    line-height: 1.55;
}
.dbc-dd-input {
    margin-top: auto;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50px; padding: 9px 16px;
    font-size: 0.68rem; color: rgba(255,255,255,0.25);
}

/* ===== PRODUCT SECTIONS ===== */
.prod-section { position: relative; padding: 5rem 0; overflow: hidden; }
.prod-section::before, .prod-section::after { display: none; }

.prod-split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
}
.prod-flip .prod-split { direction: rtl; }
.prod-flip .prod-split > * { direction: ltr; }

.prod-info { position: relative; }
.prod-num {
    font-size: 7rem; font-weight: 800; line-height: 1;
    color: rgba(20,180,243,0.06);
    position: absolute; top: -1.5rem; left: -1rem;
    pointer-events: none; user-select: none; letter-spacing: -0.04em;
}
.prod-info .tag { margin-bottom: 0.75rem; display: inline-block; }
.prod-info h2 { font-size: 2.4rem; margin-bottom: 1rem; line-height: 1.15; }
.prod-desc { color: var(--text-secondary); line-height: 1.75; margin-bottom: 1.5rem; font-size: 1rem; }

.prod-metrics {
    display: flex; align-items: center; gap: 0;
    background: rgba(20,180,243,0.04);
    border: 1px solid rgba(20,180,243,0.1);
    border-radius: 14px; padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.prod-metric { text-align: center; flex: 1; }
.pm-val { display: block; font-size: 1.6rem; font-weight: 800; color: #fff; line-height: 1.1; }
.pm-lbl { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.prod-metric-div { width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

.prod-feats { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
.prod-feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.88rem; color: var(--text-secondary);
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s;
}
.prod-feat:hover { background: rgba(20,180,243,0.05); color: rgba(255,255,255,0.8); }
.pf-icon { display: inline-flex; color: var(--cyan); flex-shrink: 0; }

/* Product Visual Window */
.prod-visual { perspective: 800px; }
.pv-window {
    background: linear-gradient(145deg, #080F20, #0B1830);
    border: 1px solid rgba(20,180,243,0.16);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(20,180,243,0.06);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.pv-window:hover {
    transform: translateY(-4px) rotateX(1.5deg);
    box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 50px rgba(20,180,243,0.1);
}
.pv-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(3,8,18,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.75rem;
}
.pv-live { color: #ff4444; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; }
.pv-timer { color: rgba(255,255,255,0.5); font-size: 0.72rem; margin-left: auto; }

/* Call UI */
.pv-caller {
    display: flex; align-items: center; gap: 12px;
    padding: 1.1rem 1.25rem 0.75rem;
}
.pv-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg,#14B4F3,#0a8fd6);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.pv-caller-name { font-size: 0.9rem; font-weight: 700; color: #fff; }
.pv-caller-co { font-size: 0.72rem; color: rgba(255,255,255,0.45); }

.pv-wave {
    display: flex; align-items: center; justify-content: center;
    gap: 3px; height: 48px; padding: 0 1.25rem;
}
.pv-wave span {
    display: block; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg,#14B4F3,#18F1F2);
    animation: pvWave 1.2s ease-in-out infinite;
    animation-play-state: paused;
}
.prod-split.visible .pv-wave span,
.pv-window:hover .pv-wave span { animation-play-state: running; }
.pv-wave span:nth-child(odd) { animation-delay: calc(var(--i,0) * 0.08s); }
@keyframes pvWave {
    0%,100% { height: 6px; }
    50% { height: 32px; }
}
.pv-wave span:nth-child(1){animation-delay:.0s}
.pv-wave span:nth-child(2){animation-delay:.08s}
.pv-wave span:nth-child(3){animation-delay:.16s}
.pv-wave span:nth-child(4){animation-delay:.24s}
.pv-wave span:nth-child(5){animation-delay:.32s}
.pv-wave span:nth-child(6){animation-delay:.4s}
.pv-wave span:nth-child(7){animation-delay:.48s}
.pv-wave span:nth-child(8){animation-delay:.4s}
.pv-wave span:nth-child(9){animation-delay:.32s}
.pv-wave span:nth-child(10){animation-delay:.24s}
.pv-wave span:nth-child(11){animation-delay:.16s}
.pv-wave span:nth-child(12){animation-delay:.08s}
.pv-wave span:nth-child(13){animation-delay:.0s}
.pv-wave span:nth-child(14){animation-delay:.08s}
.pv-wave span:nth-child(15){animation-delay:.16s}

.pv-transcript {
    padding: 0 1.25rem; font-size: 0.78rem;
    color: rgba(255,255,255,0.5); font-style: italic; margin-bottom: 0.75rem;
}
.pv-sentiment { padding: 0 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.pv-sent-row { display: flex; align-items: center; gap: 8px; flex: 1; }
.pv-sent-lbl { font-size: 0.68rem; color: rgba(255,255,255,0.4); white-space: nowrap; }
.pv-sent-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
.pv-sent-fill { height: 100%; background: linear-gradient(90deg,#14B4F3,#18F1F2); border-radius: 2px; }
.pv-sent-val { font-size: 0.72rem; font-weight: 700; color: #14B4F3; }
.pv-intent-chip {
    background: rgba(24,241,242,0.1); border: 1px solid rgba(24,241,242,0.2);
    color: #18F1F2; border-radius: 50px; padding: 2px 10px;
    font-size: 0.65rem; font-weight: 700;
}
.pv-actions {
    display: flex; gap: 0.5rem; padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.pv-btn {
    flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55);
    font-size: 0.7rem; font-weight: 600; font-family: 'Inter', 'Poppins', -apple-system, sans-serif; cursor: default;
}
.pv-btn-end { background: rgba(255,68,68,0.12); border-color: rgba(255,68,68,0.25); color: #ff6666; }

/* Analytics UI */
.pv-metrics-row { display: flex; gap: 0.75rem; padding: 0.75rem 1.25rem; }
.pv-mcard {
    flex: 1; text-align: center;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px; padding: 0.6rem 0.4rem;
}
.pv-mval { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.pv-mlbl { display: block; font-size: 0.62rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
.pv-chart { padding: 0 1.25rem 0.75rem; height: 90px; display: flex; align-items: flex-end; gap: 0; position: relative; }
.pv-bar-group { display: flex; align-items: flex-end; gap: 5px; flex: 1; height: 100%; }
.pv-bar {
    flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px;
    background: rgba(20,180,243,0.25); border: 1px solid rgba(20,180,243,0.3);
    animation: pvBarIn 0.8s ease both;
}
.pv-bar-accent { background: linear-gradient(180deg,#18F1F2,#14B4F3); border-color: #18F1F2; }
@keyframes pvBarIn { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); } }
.pv-insights { padding: 0 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.pv-insight {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.72rem; color: rgba(255,255,255,0.5);
    padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.03);
}
.pv-insight-up { color: #18F1F2; background: rgba(24,241,242,0.05); }
.pv-ab-badge {
    background: rgba(255,119,4,0.15); color: #FF7704;
    border-radius: 4px; padding: 1px 6px;
    font-size: 0.65rem; font-weight: 700; margin-left: auto;
}

/* Pipeline UI */
.pv-pipeline { display: flex; gap: 0.6rem; padding: 0.75rem 1rem 1rem; overflow: hidden; }
.pv-stage { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.pv-stage-name { font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; }
.pv-won { color: #18F1F2; }
.pv-lead {
    padding: 6px 8px; border-radius: 7px;
    font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-lead-a { border-color: rgba(20,180,243,0.2); }
.pv-lead-b { border-color: rgba(255,119,4,0.2); }
.pv-lead-win { background: rgba(24,241,242,0.07); border-color: rgba(24,241,242,0.25); color: #18F1F2; }

/* Notetaker UI */
.pv-transcript-lines { padding: 0.75rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.pv-tline { display: flex; gap: 8px; align-items: flex-start; }
.pv-speaker { font-size: 0.65rem; font-weight: 700; padding: 2px 7px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; }
.pv-sp-s { background: rgba(20,180,243,0.15); color: #14B4F3; }
.pv-sp-t { background: rgba(24,241,242,0.12); color: #18F1F2; }
.pv-ttext { font-size: 0.72rem; color: rgba(255,255,255,0.55); line-height: 1.45; padding-top: 2px; }
.pv-actions-box {
    margin: 0 1.25rem 0.75rem;
    background: rgba(24,241,242,0.05); border: 1px solid rgba(24,241,242,0.15);
    border-radius: 10px; padding: 0.65rem 0.9rem;
}
.pv-actions-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 700; color: #18F1F2; margin-bottom: 0.4rem;
}
.pv-action-item { font-size: 0.68rem; color: rgba(255,255,255,0.6); padding: 2px 0; }
.pv-note-actions {
    display: flex; gap: 0.5rem; padding: 0.5rem 1.25rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.pv-nbtn {
    padding: 6px 14px; border-radius: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5); font-size: 0.68rem; font-weight: 600;
    font-family: 'Inter', 'Poppins', -apple-system, sans-serif; cursor: default;
}
.pv-nbtn-share { background: rgba(20,180,243,0.1); border-color: rgba(20,180,243,0.25); color: #14B4F3; }

/* Responsive product sections */
@media (max-width: 900px) {
    .prod-split { grid-template-columns: 1fr; gap: 2.5rem; }
    .prod-flip .prod-split { direction: ltr; }
    .prod-num { font-size: 5rem; }
    .prod-info h2 { font-size: 1.9rem; }
}
@media (max-width: 600px) {
    .prod-metrics { padding: 0.8rem 1rem; gap: 0; }
    .pm-val { font-size: 1.3rem; }
    .prod-section { padding: 3rem 0; }
    .dbc-ws-cards { grid-template-columns: 1fr; }
    .dbc-ag-cards { grid-template-columns: 1fr; }
    .dbc-dd-sidebar { display: none; }
}

/* Drag transition smoothing */
.dbc-stage { transition: transform 0.42s cubic-bezier(0.16,1,0.3,1); }
.dbc-stage-wrap { cursor: grab; }
.dbc-stage-wrap:active { cursor: grabbing; }

/* Improved deep dive */
.dbc-dd-topbar {
    display: flex; align-items: center; gap: 0;
    padding: 0 1rem;
    background: rgba(4,9,20,0.7);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.dbc-dd-tab {
    display: flex; align-items: center; gap: 5px;
    padding: 11px 15px; font-size: 0.73rem;
    color: rgba(255,255,255,0.38); cursor: default;
    border-bottom: 2px solid transparent;
    transition: color 0.2s;
}
.dbc-dd-active { color: #14B4F3 !important; border-bottom-color: #14B4F3 !important; }
.dbc-dd-campaign-name { font-size: 0.66rem; color: rgba(255,255,255,0.35); font-weight: 400; margin-left: auto; white-space: nowrap; }

/* Swipe hint arrows on mobile */
@media (max-width: 900px) {
    .dbc-stage-wrap::after {
        content: '‹  ›';
        position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%);
        color: rgba(255,255,255,0.2); font-size: 1.1rem; letter-spacing: 0.4em;
        pointer-events: none;
    }
}

/* ===== PERFORMANCE: COMPOSITING HINTS ===== */
.about-hero-glow, .k-hero-glow, .cta-orb, .about-cta-orb, .about-cta-orb2 {
    will-change: opacity;
}
.dbc-slide, .feature-card, .prod-card, .why-item, .k-card, .step-card, .market-item {
    transform: translateZ(0); /* promote to own layer cheaply */
}

/* ===== PREVENT HORIZONTAL OVERFLOW ===== */
html { overflow-x: hidden; }

/* ===== MOBILE PERFORMANCE + LAYOUT ===== */
@media (max-width: 768px) {
    /* Disable expensive animated glows — just static */
    .about-hero-glow, .k-hero-glow { animation: none !important; }
    /* Simpler reveals on mobile — no 3D perspective (costly on low-end GPU) */
    .reveal {
        transform: translateY(18px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .reveal[data-dir="left"]  { transform: translateX(-18px); }
    .reveal[data-dir="right"] { transform: translateX(18px); }
    .reveal[data-dir="scale"] { transform: translateY(12px) scale(0.97); filter: none !important; }
    /* Free up VRAM by disabling will-change on hover elements (no hover on touch) */
    .why-item, .feature-card, .prod-card, .k-card, .step-card, .market-item,
    .prod-bento-card, .about-stat { will-change: auto; transform: none; }
    /* Hero metrics smaller */
    .hero-metrics { backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* About page mobile */
    .about-stats { margin-bottom: 4rem; }
    .manifesto-quote-big { font-size: 1.4rem; }
    .manifesto-body { font-size: 0.95rem; }
    .vision-pill { padding: 0.9rem 1.1rem; }
    .vision-pill-text { font-size: 0.85rem; }
    .about-cta-card { padding: 2.5rem 1.5rem; }
    .about-cta-card h2 { font-size: 1.6rem; }
    .about-cta-card p { font-size: 0.9rem; }
    .about-cta-btns .btn { width: 100%; justify-content: center; }
    /* Kontakt page mobile */
    .k-chips { flex-direction: column; align-items: center; }
    .k-btn-wrap .btn { width: 100%; justify-content: center; }
    /* Disable orb animations (cheap to just hide on mobile) */
    .cta-orb, .about-cta-orb, .about-cta-orb2 { display: none; }
    /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
    input, textarea, select { font-size: max(1rem, 16px) !important; }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1ms !important;
    }
    .reveal { transform: none !important; opacity: 0; transition: opacity 0.3s ease !important; }
    .reveal.visible { opacity: 1; }
}

/* ===== PERFORMANCE: MOBILE — disable GPU-expensive effects ===== */
@media (max-width: 768px) {
    /* Kill blur-80px orb animations — biggest GPU killer */
    .liquid-orb { animation: none !important; filter: blur(30px) !important; will-change: auto !important; }

    /* Reduce backdrop-filter from 40px to 8px */
    :root { --glass-blur: 8px; }
    .navbar { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
    .feature-card, .prod-card, .prod-bento-featured, .liquid-glass {
        backdrop-filter: blur(8px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
    }

    /* Simplify box-shadows — multiple spread shadows are very slow */
    .feature-card:hover, .prod-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; }

    /* Disable 3D perspective reveal on mobile — replace with simple fade */
    .reveal { transform: translateY(16px) !important; }

    /* Disable animated glow pulses */
    .btn-pulse, [class*="glow"] { animation: none !important; }
}

/* ===== PERFORMANCE: LOW-POWER MODE (set via JS on weak devices) ===== */
body.low-perf .liquid-bg { display: none; }
body.low-perf .stars-bg { display: none; }
body.low-perf * { animation: none !important; transition: none !important; }
body.low-perf .reveal { transform: none !important; opacity: 1 !important; }
body.low-perf .navbar,
body.low-perf .feature-card,
body.low-perf .prod-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 46, 74, 0.9) !important;
}