/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Zerooon Professional Brand Colors */
    --primary-blue: #0066cc;
    --primary-cyan: #00a8cc;
    --primary-purple: #6c5ce7;
    --primary-green: #00b894;
    --primary-orange: #fdcb6e;
    --primary-red: #e17055;
    --deep-black: #000000;
    --primary-white: #ffffff;
    
    /* Professional Gradient combinations */
    --gradient-primary: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-cyan) 50%, var(--primary-purple) 100%);
    --gradient-secondary: linear-gradient(45deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
    --gradient-text: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-cyan) 50%, var(--primary-purple) 100%);
    --gradient-security: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-blue) 100%);
    
    /* Neutral colors */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3);
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--deep-black);
    overflow-x: hidden;
}
@media (max-width: 1024px) { html { overflow-x: hidden; } }

/* Automatische Silbentrennung (de) und korrekter Zeilenumbruch */
:where(p, li, .section-subtitle, .download-subtitle, .content p, .pillar-item p, .cookieDescription, .hero-subtitle) {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-break: normal;          /* keine harten Trennungen in der Wortmitte */
    overflow-wrap: break-word;   /* bricht nötig, bevorzugt an Silbengrenzen */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84px;
}
@media (max-width: 768px) { .nav-container { overflow: hidden; } }

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--primary-white);
}

.logo-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 12px rgba(0, 168, 204, 0.45));
}

.nav-links {
    display: flex;
    gap: var(--spacing-8);
}

.nav-links a { color: var(--gray-300); text-decoration: none; font-weight: 500; transition: color .3s ease; position: relative; }
.nav-links a:hover { color: var(--primary-blue); }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gradient-primary); transition: width .3s ease; }
.nav-links a:hover::after { width: 100%; }

/* Language switch icon (right of nav links) */
.lang-switch { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #8fbffb; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,153,255,0.25); border-radius: 12px; cursor: pointer; text-decoration: none; transition: all .3s ease; }
.lang-switch:hover { color: #00eaff; box-shadow: inset 0 0 12px 2px rgba(0,238,255,0.25), 0 0 12px rgba(0,238,255,0.12); border-color: rgba(0,238,255,0.6); }
.lang-switch svg { width: 20px; height: 20px; }

/* language dropdown */
.lang-wrapper { position: relative; display: inline-block; }
.lang-menu { position: absolute; right: 0; top: 36px; background: rgba(0,0,0,0.9); border: 1px solid rgba(0,153,255,0.25); border-radius: 12px; backdrop-filter: blur(10px); padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 6px; z-index: 2000; pointer-events: auto; }
.lang-item { color: #cfe9ff; text-decoration: none; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(0,153,255,0.2); background: rgba(255,255,255,0.02); font-size: 14px; }
.lang-item { cursor: pointer; }
.lang-item:hover { background: rgba(0,153,255,0.15); color: #fff; }
/* enforce hidden */
.lang-menu[hidden] { display: none !important; }

/* Hero Section */
.hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    background: radial-gradient(ellipse at center, rgba(0, 102, 204, 0.1) 0%, transparent 70%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%230066cc" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px var(--spacing-6) 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    max-width: 600px;
}

.hero-visual { perspective: 1200px; position: relative; min-height: 420px; height: auto; display: flex; align-items: center; justify-content: center; }

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-inline-size: 26ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-6);
    color: var(--primary-white);
}

/* Mobile-only: force the last segment of hero title ('.hero-tail') to start on a new line */
@media (max-width: 768px) {
    .hero-title .hero-tail { display: block; }
}

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease-in-out infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: var(--gray-300);
    margin-bottom: var(--spacing-8);
    line-height: 1.7;
    max-inline-size: 36ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.hero-buttons { display: flex; gap: var(--spacing-4); margin-top: var(--spacing-6); }

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
}

.badge {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 102, 204, 0.35);
    color: var(--gray-300);
    font-size: 0.85rem;
    background: rgba(255,255,255,0.04);
}

.hero-metrics {
    display: flex;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-value { color: var(--primary-blue); font-weight: 800; font-size: 1.5rem; }
.metric-label { color: var(--gray-400); font-size: 0.85rem; }

/* removed old zl-* word spinner (now using zw-words) */

/* Circular loader (adapted from Uiverse) */
.zs-loader { display: flex; gap: 10px; align-items: center; margin-bottom: var(--spacing-6); }
.zs-svg { stroke: url(#zs-grad); filter: drop-shadow(0 0 8px rgba(0,212,255,.35)); }
.zs-svg .dash { stroke: rgba(0, 212, 255, 0.55); animation: dashArray 2s ease-in-out infinite, dashOffset 2s linear infinite; }
.zs-svg .spin { stroke: rgba(139, 92, 246, 0.8); animation: spinDashArray 2s ease-in-out infinite, spin 8s ease-in-out infinite, dashOffset 2s linear infinite; transform-origin: center; }

@keyframes dashArray { 0% { stroke-dasharray: 0 1 359 0; } 50% { stroke-dasharray: 0 359 1 0; } 100% { stroke-dasharray: 359 1 0 0; } }
@keyframes spinDashArray { 0% { stroke-dasharray: 270 90; } 50% { stroke-dasharray: 0 360; } 100% { stroke-dasharray: 270 90; } }
@keyframes dashOffset { 0% { stroke-dashoffset: 365; } 100% { stroke-dashoffset: 5; } }
@keyframes spin { 0% { rotate: 0deg; } 12.5%,25% { rotate: 270deg; } 37.5%,50% { rotate: 540deg; } 62.5%,75% { rotate: 810deg; } 87.5%,100% { rotate: 1080deg; } }

/* Ripple Logo Loader (adapted) */
.zr-section { padding: var(--spacing-24) 0; background: var(--primary-black); display: flex; justify-content: center; }
.zr-loader { --size: 220px; --duration: 2.6s; --logo-color: #bfe3ff; --background: linear-gradient(0deg, rgba(0,102,204,0.18) 0%, rgba(108,92,231,0.18) 100%); height: var(--size); aspect-ratio: 1; position: relative; }
.zr-loader .box { position: absolute; background: var(--background); border-radius: 50%; border-top: 1px solid rgba(0, 212, 255, 0.7); box-shadow: rgba(0, 0, 0, 0.35) 0 10px 10px -0px; backdrop-filter: blur(6px); animation: zr-ripple var(--duration) infinite ease-in-out; }
.zr-loader .box:nth-child(1){ inset: 40%; z-index: 99; }
.zr-loader .box:nth-child(2){ inset: 30%; z-index: 98; border-color: rgba(0, 212, 255, 0.55); animation-delay: .2s; }
.zr-loader .box:nth-child(3){ inset: 20%; z-index: 97; border-color: rgba(0, 212, 255, 0.4); animation-delay: .4s; }
.zr-loader .box:nth-child(4){ inset: 10%; z-index: 96; border-color: rgba(139, 92, 246, 0.35); animation-delay: .6s; }
.zr-loader .box:nth-child(5){ inset: 0%;  z-index: 95; border-color: rgba(139, 92, 246, 0.25); animation-delay: .8s; }
.zr-loader .logo { position: absolute; inset: 0; display: grid; place-content: center; padding: 26%; }
.zr-logo-img { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(0,212,255,.4)); animation: zr-logo-pulse var(--duration) infinite ease-in-out; }
@keyframes zr-ripple { 0% { transform: scale(1); box-shadow: rgba(0,0,0,.35) 0 10px 10px -0px; } 50% { transform: scale(1.28); box-shadow: rgba(0,0,0,.35) 0 30px 20px -0px; } 100% { transform: scale(1); box-shadow: rgba(0,0,0,.35) 0 10px 10px -0px; } }
@keyframes zr-logo-pulse { 0% { filter: drop-shadow(0 0 6px rgba(0,212,255,.35)); } 50% { filter: drop-shadow(0 0 16px rgba(139,92,246,.5)); } 100% { filter: drop-shadow(0 0 6px rgba(0,212,255,.35)); } }

/* Space Planet Banner (adapted) */
.space-banner { position: relative; height: 260px; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(0, 102, 204, 0.08) 0%, transparent 70%); overflow: hidden; }
.zb-planet { height: 250px; width: 250px; position: relative; transition: left .3s linear; background: url("data:image/jpeg;base64,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" ); background-size: cover; background-position: left; bottom: 0; border-radius: 50%; animation: zb-rotate 30s linear infinite; box-shadow: 0 0 20px rgba(255,255,255,.2), -5px 0 8px #c3f4ff inset, 15px 2px 25px #000 inset, -24px -2px 34px #c3f4ff99 inset, 250px 0 44px #00000066 inset, 150px 0 38px #000000aa inset; }
@keyframes zb-rotate { 0% { background-position: 0 0; } 100% { background-position: 400px 0; } }
.zb-stars { position: absolute; inset: 0; }
.zb-star { position: absolute; animation: zb-twinkle 3s infinite; }
@keyframes zb-twinkle { 0%,100% { opacity: .12; } 50% { opacity: 1; } }
#zb-star-1 { left: -20px; top: 10px; }
#zb-star-2 { left: -40px; top: 30px; animation-duration: 2s; }
#zb-star-3 { left: 350px; top: 90px; animation-duration: 4s; }
#zb-star-4 { left: 200px; top: 210px; animation-duration: 3s; }
#zb-star-5 { left: 50px; top: 190px; animation-duration: 1.5s; }
#zb-star-6 { left: 250px; top: -50px; animation-duration: 4s; }
#zb-star-7 { left: 290px; top: 60px; animation-duration: 2s; }

/* Pillars section (two-column with circle animation) */
.pillars { padding: var(--spacing-6) 0 calc(var(--spacing-24) - 40px); background: var(--primary-black); margin-top: -90px; }
.pillars-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--spacing-12); align-items: start; }
.pillars-left { display: grid; grid-template-rows: repeat(4, auto); }
.pillars-right { position: sticky; top: 50%; align-self: center; transform: translateY(-50%); height: auto; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.pillars-left .section-title { text-align: left; }
.pillars-left .section-subtitle { text-align: left; margin-bottom: var(--spacing-8); }
.pillars-list { display: flex; flex-direction: column; gap: var(--spacing-6); }
.pillar-item { display: flex; gap: var(--spacing-4); align-items: flex-start; background: rgba(255,255,255,0.04); border: 1px solid rgba(0,102,204,0.25); border-radius: var(--radius-xl); padding: var(--spacing-4) var(--spacing-6); color: var(--gray-300); }
.pillar-item h3 { color: var(--primary-white); margin-bottom: 6px; font-size: var(--font-size-xl); }
.pi-icon { width: 44px; height: 44px; display: grid; place-content: center; background: rgba(0,102,204,0.2); border: 1px solid rgba(0,102,204,0.35); border-radius: 12px; }
.pillars-right { position: relative; height: 100%; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.pillars-right .zb-planet { position: absolute; right: 40px; }

/* Concentric circle animation used in original design */
.circle-anim { position: relative; width: 360px; height: 360px; top: 0; }
.circle-anim .ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(139,92,246,.2) 0%, rgba(13,16,32,0.85) 70%); box-shadow: 0 0 40px rgba(0,0,0,.5) inset, 0 0 60px rgba(31,41,55,.6); animation: ca-pulse 6s ease-in-out infinite; }
.circle-anim .r2 { inset: 30px; filter: brightness(1.05); animation-delay: .8s; }
.circle-anim .r3 { inset: 60px; filter: brightness(1.1); animation-delay: 1.6s; }
.circle-anim .core { position: absolute; inset: 80px; border-radius: 50%; background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(17,24,39,.95)); box-shadow: 0 0 20px rgba(139,92,246,.35) inset; }
.circle-anim .label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #dbeafe; font-weight: 800; font-size: 36px; text-shadow: 0 2px 16px rgba(191,227,255,.4); letter-spacing: .5px; }
@keyframes ca-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.03); opacity: 1; } }

/* removed unused components: spinning numbers, cursor demo, rising neon rings */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-lg);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--primary-white);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px) rotateX(2deg) rotateY(-2deg);
    box-shadow: var(--shadow-glow), var(--shadow-xl);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-white);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: var(--primary-black);
    transform: translateY(-2px) rotateX(2deg) rotateY(2deg);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    padding-top: var(--spacing-6);
}

.stat {
    text-align: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0, 212, 255, 0.16);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.18);
    box-sizing: border-box;
    min-width: 0; /* allow grid items to shrink inside columns */
}

.stat-number {
    display: block;
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    font-weight: 800;
    color: #7dd3fc;
    text-shadow: 0 0 12px rgba(125, 211, 252, .3);
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Phone Mockup */
.phone-mockup {
    position: relative;
    width: 300px;
    height: 600px;
    margin: 0 auto;
    background: var(--gray-800);
    border-radius: 40px;
    padding: 20px;
    box-shadow: var(--shadow-xl), var(--shadow-glow);
    border: 2px solid var(--primary-blue);
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    animation: heroIn 700ms cubic-bezier(.2,.8,.2,1) 200ms forwards;
    will-change: transform;
    transform-style: preserve-3d;
}

/* Ensure hero content doesn't collide with navbar and visuals */
.hero-container { padding-top: 96px; }
.hero-content { margin-top: 14px; }

.phone-screen {
    width: 100%;
    height: 100%;
    background: var(--primary-black);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.phone-screenshot { width: 100%; height: 100%; object-fit: cover; display: block; }

.app-interface {
    padding: var(--spacing-6);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--gray-700);
}

.contact-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
}

.contact-info {
    flex: 1;
}

.contact-name {
    height: 16px;
    background: var(--gray-600);
    border-radius: var(--radius-sm);
    width: 80px;
    margin-bottom: var(--spacing-1);
}

.contact-status {
    height: 12px;
    background: var(--gray-700);
    border-radius: var(--radius-sm);
    width: 60px;
}

.chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.message {
    display: flex;
    max-width: 80%;
}

.message.received {
    align-self: flex-start;
}

.message.sent {
    align-self: flex-end;
}

.message-bubble {
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--gray-700);
}

.message.received .message-bubble {
    width: 120px;
}

.message.sent .message-bubble {
    width: 100px;
    background: var(--gradient-primary);
}

/* Features Section */
.features {
    padding: calc(var(--spacing-24) - 75px) 0 var(--spacing-24);
    background: var(--primary-black);
    position: relative;
}

.features::before { content: none; }

.section-title {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-6);
    color: var(--primary-white);
    position: relative;
    z-index: 1;
}

.section-subtitle {
    font-size: var(--font-size-xl);
    text-align: center;
    color: var(--gray-300);
    margin-bottom: var(--spacing-16);
    position: relative;
    z-index: 1;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-6);
    position: relative;
    z-index: 1;
    margin-top: -2px;
}

/* Wave cards */
.e-card { margin: 0 auto; background: transparent; box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45); position: relative; width: 100%; max-width: 240px; height: 255px; border-radius: 16px; overflow: hidden; }
.e-card .wave { position: absolute; width: 540px; height: 700px; opacity: .6; left: 0; top: 0; margin-left: -50%; margin-top: -70%; background: linear-gradient(744deg,#af40ff,#5b42f3 60%,#00ddeb); border-radius: 40%; animation: wave 55s infinite linear; }
.e-card .wave:nth-child(2), .e-card .wave:nth-child(3) { top: 210px; }
.e-card .wave:nth-child(2){ animation-duration: 50s; }
.e-card .wave:nth-child(3){ animation-duration: 45s; }
.e-card .content { position: relative; z-index: 1; text-align: center; padding: 14px; color: var(--gray-300); }
/* Smaller typography on wave cards */
.e-card h3 { color: var(--primary-white); margin-top: var(--spacing-6); margin-bottom: var(--spacing-2); font-size: 1.05rem; }
.e-card p { font-size: 0.88rem; line-height: 1.6; }
/* Monochrome icons to match background */
.e-card .feature-icon { width: 56px; height: 56px; margin: 0 auto var(--spacing-4); background: transparent; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.e-card .feature-icon svg { stroke: rgba(255,255,255,0.9); }
@keyframes wave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.feature-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    border: 1px solid transparent;
    background-image: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)),
                      linear-gradient(135deg, rgba(0,102,204,0.35), rgba(108,92,231,0.35));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 0.1;
}

.feature-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--primary-blue);
    box-shadow: 0 18px 55px rgba(0, 102, 204, 0.25);
}

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-6);
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-white);
    position: relative;
    z-index: 1;
}

.feature-card h3 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
    color: var(--primary-white);
    position: relative;
    z-index: 1;
}

.feature-card p {
    color: var(--gray-300);
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

/* Competitive Advantage Section */
.competitive {
    padding: var(--spacing-24) 0;
    background: var(--gray-900);
}

.comparison-table {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    margin-top: var(--spacing-12);
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    background: var(--gradient-primary);
    color: var(--primary-white);
    font-weight: 600;
    text-align: center;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
}

.table-row:hover {
    background: rgba(0, 102, 204, 0.1);
}

.table-row:last-child {
    border-bottom: none;
}

.feature-column,
.app-column,
.feature-name {
    padding: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.feature-name {
    justify-content: flex-start;
    text-align: left;
    color: var(--primary-white);
    font-weight: 500;
}

.rating {
    font-weight: 700;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
}

.rating.excellent {
    background: var(--primary-green);
    color: var(--primary-white);
}

.rating.good {
    background: var(--primary-orange);
    color: var(--primary-white);
}

.rating.poor {
    background: var(--primary-red);
    color: var(--primary-white);
}

.check {
    color: var(--primary-green);
    font-size: var(--font-size-xl);
}

.cross {
    color: var(--primary-red);
    font-size: var(--font-size-xl);
}

/* removed unused .security section */

/* removed unused capabilities */

/* removed legacy .use-cases layout (now using .usecases) */

/* removed trust badges section */
.faq details { background: rgba(255,255,255,0.04); border: 1px solid rgba(0,102,204,0.25); border-radius: var(--radius-lg); padding: var(--spacing-4) var(--spacing-6); color: var(--gray-300); }
.faq details + details { margin-top: var(--spacing-3); }
.faq summary { cursor: pointer; color: var(--primary-white); font-weight: 600; }

/* removed why-us banner */

/* removed marquee/chips */

/* removed alternating rows */

@keyframes heroIn {
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* removed testimonials */

/* 3D Brand Card (adapted from Uiverse template) */
.z3d-section { padding: var(--spacing-24) 0; background: var(--gray-900); }
.z3d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-8); justify-items: center; }
.z3d-parent { width: 290px; height: 300px; perspective: 1000px; position: relative; }
.z3d-card { height: 100%; border-radius: 32px; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-cyan) 50%, var(--primary-purple) 100%); transition: all .5s ease-in-out; transform-style: preserve-3d; box-shadow: rgba(0, 50, 105, 0) 40px 50px 25px -40px, rgba(0, 50, 105, .25) 0 25px 25px -5px; position: relative; }
.z3d-glass { transform-style: preserve-3d; position: absolute; inset: 8px; border-radius: 36px; border-top-right-radius: 84px; background: linear-gradient(0deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.78) 100%); transform: translate3d(0,0,25px); border-left: 1px solid rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.9); transition: all .5s ease-in-out; }
.z3d-content { padding: 100px 60px 0 30px; transform: translate3d(0,0,26px); }
.z3d-title { display: block; color: #bfe3ff; font-weight: 900; font-size: 20px; letter-spacing: .5px; }
.z3d-text { display: block; color: rgba(191, 227, 255, .8); font-size: 14px; margin-top: 14px; line-height: 1.6; }
.z3d-bottom { padding: 10px 12px; transform-style: preserve-3d; position: absolute; bottom: 20px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; transform: translate3d(0,0,26px); }
.z3d-view-more { display: flex; align-items: center; width: 40%; justify-content: flex-end; transition: all .2s ease-in-out; }
.z3d-view-more:hover { transform: translate3d(0,0,10px); }
.z3d-view-btn { background: none; border: none; color: #bfe3ff; font-weight: 800; font-size: 12px; cursor: pointer; }
.z3d-view-svg { fill: none; stroke: #bfe3ff; stroke-width: 3px; max-height: 15px; }
.z3d-socials { display: flex; gap: 10px; transform-style: preserve-3d; }
.z3d-social { width: 30px; aspect-ratio: 1; padding: 5px; background: #ffffff; border-radius: 50%; border: none; display: grid; place-content: center; box-shadow: rgba(0, 50, 105, 0.45) 0 7px 5px -5px; }
.z3d-social .svg { width: 15px; fill: var(--primary-blue); }
.z3d-social:hover { background: #000; }
.z3d-social:hover .svg { fill: #fff; }
.z3d-logo { position: absolute; right: 0; top: 0; transform-style: preserve-3d; }
.z3d-circle { position: absolute; aspect-ratio: 1; border-radius: 50%; top: 0; right: 0; box-shadow: rgba(100,100,111,.2) -10px 10px 20px 0; backdrop-filter: blur(5px); background: rgba(0, 170, 255, .16); transition: all .5s ease-in-out; }
.z3d-c1 { width: 170px; transform: translate3d(0,0,20px); top: 8px; right: 8px; }
.z3d-c2 { width: 140px; transform: translate3d(0,0,40px); top: 10px; right: 10px; backdrop-filter: blur(1px); transition-delay: .4s; }
.z3d-c3 { width: 110px; transform: translate3d(0,0,60px); top: 17px; right: 17px; transition-delay: .8s; }
.z3d-c4 { width: 80px; transform: translate3d(0,0,80px); top: 23px; right: 23px; transition-delay: 1.2s; }
.z3d-c5 { width: 50px; transform: translate3d(0,0,100px); top: 30px; right: 30px; display: grid; place-content: center; transition-delay: 1.6s; }
.z3d-c5 .svg { width: 20px; fill: #ffffff; }
.z3d-parent:hover .z3d-card { transform: rotate3d(1,1,0,26deg); box-shadow: rgba(0, 50, 105, .3) 30px 50px 25px -40px, rgba(0, 50, 105, .15) 0 25px 30px 0; }
.z3d-parent:hover .z3d-social { transform: translate3d(0,0,50px); box-shadow: rgba(0, 50, 105, .25) -5px 20px 10px 0; }
.z3d-parent:hover .z3d-c2 { transform: translate3d(0,0,60px); }
.z3d-parent:hover .z3d-c3 { transform: translate3d(0,0,80px); }
.z3d-parent:hover .z3d-c4 { transform: translate3d(0,0,100px); }
.z3d-parent:hover .z3d-c5 { transform: translate3d(0,0,120px); }
/* Neon Navigation */
/* removed neon navigation */

@media (max-width: 768px) {
    .nav-container { padding-right: var(--spacing-4); padding-left: var(--spacing-4); }
    .nn-btn { width: 46px; height: 46px; }
    .letters-container { height: 120px; }
    .letter { font-size: 18px; }
}

/* Mobile menu (burger) – mobile-only to avoid desktop changes */
.mobile-toggle { display: none; }
.mobile-overlay { display: none; }
.mobile-drawer { display: none; }
/* Avoid any accidental wide elements breaking layout */
@media (max-width: 768px) { .navbar, .nav-container, .hero, .container, body { max-width: 100%; } }
.security-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-16);
    align-items: center;
}

.security-text h2 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-6);
    color: var(--primary-white);
}

.security-intro {
    font-size: var(--font-size-xl);
    color: var(--gray-300);
    margin-bottom: var(--spacing-8);
    line-height: 1.7;
}

.security-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.security-item {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.security-icon {
    font-size: var(--font-size-2xl);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.security-details h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--primary-white);
}

.security-details p {
    color: var(--gray-300);
    line-height: 1.6;
}

/* Security Diagram */
/* Removed security rings diagram styles */

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Download Section */
.download {
    padding: 5px 0 max(0px, calc(var(--spacing-24) - 200px));
    background: var(--gray-900);
    text-align: center;
    position: relative;
}

.download h1,
.download h2,
.download h3 {
    margin-top: -15px;
}

.download::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
}

.download-content {
    position: relative;
    z-index: 1;
}

.download h2 {
    font-size: var(--font-size-5xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    color: var(--primary-white);
}

/* Make download headline slightly smaller on mobile so it fits in one line */
@media (max-width: 480px) {
    .download h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.15; }
}

.download-subtitle {
    font-size: var(--font-size-xl);
    color: var(--gray-300);
    margin-bottom: calc(var(--spacing-12) - 35px);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    max-inline-size: 36ch;
    line-height: 1.7;
}

.download-buttons {
    margin-bottom: var(--spacing-12);
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6) var(--spacing-10);
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.95) 0%, rgba(108, 92, 231, 0.95) 100%);
    color: var(--primary-white);
    text-decoration: none;
    border-radius: var(--radius-2xl);
    font-weight: 600;
    font-size: var(--font-size-xl);
    transition: all 0.3s ease;
    box-shadow: 0 12px 40px rgba(0, 102, 204, 0.30);
    border: none;
}

.download-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 18px 60px rgba(0, 102, 204, 0.40);
}

/* New Uiverse-style download button */
.download-visual { margin: calc(var(--spacing-8) - 58px) 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--spacing-8); grid-auto-rows: auto; overflow: visible; }
.dl-shot { display: block; }
.dl-phone { position: relative; width: 260px; height: 520px; border-radius: 36px; padding: 11px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(0,212,255,.2); box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 22px rgba(0,212,255,.16); }
.dl-phone::before { content: ""; position: absolute; inset: -15px; border-radius: 44px; background: radial-gradient(ellipse at center, rgba(0, 168, 255, .22) 0%, transparent 70%); z-index: -1; }
.dl-phone-img { width: 100%; height: 100%; border-radius: 28px; object-fit: cover; display: block; background: #000; }
.dl-shot-left { justify-self: end; z-index: 2; }
.dl-shot-right { justify-self: start; z-index: 2; }
.download-visual .dl-container { justify-self: center; z-index: auto; }
.dl-container { position: relative; padding: 5px; background: linear-gradient(90deg, #03a9f4, #f441a5); border-radius: 1.1em; transition: all .4s ease; display: inline-block; }
.dl-container::before { content: ""; position: absolute; inset: 0; margin: auto; border-radius: 1.1em; z-index: -10; background: linear-gradient(90deg, #03a9f4, #f441a5); filter: blur(1.6em); transition: filter .4s ease, opacity .4s ease; opacity: 1; }
.dl-container:hover::before { filter: blur(2em); opacity: 1; }
.dl-container:active::before { filter: blur(.2em); }
.dl-button { font-size: 1.55em; padding: 1.05em 1.6em; border-radius: .75em; border: none; background: #000; color: #fff; cursor: pointer; box-shadow: 2px 2px 4px #000000b4; display: inline-flex; align-items: center; gap: 1.1em; text-decoration: none; }
.dl-button:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 8px 30px rgba(3,169,244,.3), 0 8px 30px rgba(244,65,165,.3); }
.dl-icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); width: 48px; height: 48px; border-radius: .8em; }
.dl-text { display: flex; flex-direction: column; line-height: 1.1; }
.dl-label { font-weight: 700; }
.dl-subtitle { font-size: .9rem; opacity: .9; }

/* Line draw side arrows */
.dl-line { position: absolute; top: 50%; width: 84px; height: 28px; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.dl-left { left: -92px; }
.dl-right { right: -92px; }
.dl-line::before, .dl-line::after { content: ""; position: absolute; height: 2px; background: rgba(255,255,255,.55); border-radius: 2px; width: 0; transition: width .45s ease; }
.dl-line::before { top: 0; }
.dl-line::after { bottom: 0; }
.dl-left::before, .dl-left::after { left: 0; }
.dl-right::before, .dl-right::after { right: 0; }
.dl-container:hover .dl-line::before, .dl-container:hover .dl-line::after { width: 100%; }
.dl-line::after { box-shadow: 0 0 0 0 rgba(255,255,255,.25); }
.dl-container:hover .dl-line::after { box-shadow: 0 0 18px 2px rgba(255,255,255,.25); }

.btn-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-label {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.btn-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.download-visual > .download-features { grid-column: 2 / 3; justify-self: center; margin-top: -200px; }
.download-features { display: flex; justify-content: center; gap: var(--spacing-8); flex-wrap: wrap; }

.download-feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--gray-300);
    font-weight: 500;
}

.download-feature svg {
    color: var(--primary-blue);
}

/* Use Cases section */
.usecases { padding: calc(var(--spacing-24) - 45px) 0 var(--spacing-24) 0; background: var(--primary-black); }
.usecases .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-6); }
.usecases .section-title { margin-bottom: var(--spacing-3); }
.usecases .section-subtitle { margin-bottom: var(--spacing-12); }
.usecases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-4); align-items: stretch; }

/* Cookie card (adapted) */
.cookieCard {
  width: 100%;
  min-height: 160px;
  background: linear-gradient(to right,rgb(137, 104, 255),rgb(175, 152, 255));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 18px 18px; /* einheitliche Innenabstände */
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

.cookieCard::before {
  width: 150px;
  height: 150px;
  content: "";
  background: linear-gradient(to right,rgb(142, 110, 255),rgb(208, 195, 255));
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  right: -25%;
  top: -25%;
}

.cookieHeading { font-size: 1.05em; font-weight: 700; color: rgb(241, 241, 241); z-index: 2; }
.cookieDescription { font-size: 0.88em; color: rgb(241, 241, 241); z-index: 2; line-height: 1.55; overflow-wrap: break-word; hyphens: auto; }

@media (min-width: 1100px) {
  .usecases-grid { grid-template-columns: repeat(6, 1fr); }
}
.cookieDescription a { color: rgb(241, 241, 241); }
.acceptButton { padding: 11px 20px; background-color: #7b57ff; transition-duration: .2s; border: none; color: rgb(241, 241, 241); cursor: pointer; font-weight: 600; z-index: 2; border-radius: 10px; }
.acceptButton:hover { background-color: #714aff; transition-duration: .2s; }

/* Words card (after Use Cases) */
.zw-words { padding: var(--spacing-16) 0; background: var(--primary-black); margin-top: -145px; }
.zw-words .card { /* color used to softly clip top and bottom of the .words container */ --bg-color: transparent; background-color: transparent; padding: 1rem 2rem; border-radius: 1.25rem; border: 1px solid transparent; display: flex; justify-content: center; align-items: center; }
.zw-words .loader { color: rgb(124, 124, 124); font-family: "Poppins", sans-serif; font-weight: 500; font-size: 25px; box-sizing: content-box; height: 48px; padding: 10px 10px; display: inline-flex; align-items: center; justify-content: flex-start; gap: .5ch; border-radius: 8px; text-align: left; margin: 0 auto; transform: translateX(15px); }
.zw-words .loader p { margin: 0; }
.zw-words .words { overflow: hidden; position: relative; width: 18ch; height: 48px; line-height: 48px; display: inline-block; text-align: left; }
.zw-words .track { display: none; }
.zw-words .words::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg-color) 15%, transparent 40%, transparent 60%, var(--bg-color) 85%); z-index: 20; }
.zw-words .word { position: absolute; left: 0; top: 0; width: 100%; display: block; height: 48px; line-height: 48px; padding-left: 0; color: #956afa; white-space: nowrap; opacity: 0; animation: word_fade 10s linear infinite; }
@keyframes word_fade {
  0% { opacity: 1; }
  18% { opacity: 1; }
  20% { opacity: 0; }
  100% { opacity: 0; }
}
/* stagger timings for each successive word */
.zw-words .word:nth-child(1) { animation-delay: 0s; }
.zw-words .word:nth-child(2) { animation-delay: 2s; }
.zw-words .word:nth-child(3) { animation-delay: 4s; }
.zw-words .word:nth-child(4) { animation-delay: 6s; }
.zw-words .word:nth-child(5) { animation-delay: 8s; }
@keyframes track_spin {
  0%, 19% { transform: translateY(0); }
  20%, 39% { transform: translateY(-48px); }
  40%, 59% { transform: translateY(-96px); }
  60%, 79% { transform: translateY(-144px); }
  80%, 99% { transform: translateY(-192px); }
  100% { transform: translateY(-192px); }
}
@keyframes spin_4991 {
  0%, 19% { transform: translateY(0); }
  20%, 39% { transform: translateY(-100%); }
  40%, 59% { transform: translateY(-200%); }
  60%, 79% { transform: translateY(-300%); }
  80%, 99% { transform: translateY(-400%); }
  100% { transform: translateY(-400%); }
}

/* Footer */
.footer {
    background: var(--primary-black);
    border-top: 1px solid var(--gray-800);
    padding: var(--spacing-16) 0 var(--spacing-8);
    margin-top: 70px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-12);
}

.footer-logo p {
    color: var(--gray-400);
    margin-top: var(--spacing-4);
}

.footer .logo-image {
    width: 72px;
    height: 72px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-8);
}

.footer-socials { margin-top: calc(var(--spacing-8) - 15px); display: flex; gap: 18px; justify-content: flex-start; }
.fs-icon { width: 46px; height: 46px; color: #fff; border-radius: 50%; outline: 2px solid #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: outline-offset .25s, outline-color .25s, background-color .25s; }
.fs-icon svg { width: 26px; height: 26px; }
.fs-icon:hover { outline-offset: 4px; }
.fs-yt:hover { background: #ff0033; outline-color: #ff0033; }
.fs-ig:hover { background: #e1306c; outline-color: #e1306c; }
.fs-x:hover { background: #111; outline-color: #111; }
.fs-reddit:hover { background: #ff4500; outline-color: #ff4500; }
.fs-icon:hover svg { animation: fs-shake .25s; }
@keyframes fs-shake { 10% { transform: rotate(12deg);} 20% { transform: rotate(-12deg);} }

.footer-column h4 {
    color: var(--primary-white);
    font-weight: 600;
    margin-bottom: var(--spacing-4);
}

.footer-column a {
    display: block;
    color: var(--gray-400);
    text-decoration: none;
    margin-bottom: var(--spacing-2);
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: var(--primary-blue);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--gray-800);
    color: var(--gray-500);
}

.footer-bottom p {
    margin-bottom: var(--spacing-2);
}

/* Screens Carousel */
.screens { padding: var(--spacing-24) 0; background: var(--primary-black); }
/* Collage */
.screen-collage { position: relative; height: 360px; margin-top: var(--spacing-6); margin-bottom: var(--spacing-10); display: flex; align-items: center; justify-content: center; }
.phone-frame { position: absolute; width: 220px; height: 440px; border-radius: 32px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(0,212,255,.2); box-shadow: 0 18px 60px rgba(0,0,0,.5), 0 0 24px rgba(0,212,255,.15); transform: translateX(var(--x)) translateY(var(--y)) rotate(var(--r)); transition: transform .4s ease, box-shadow .3s ease; backdrop-filter: blur(8px); }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; }
.phone-frame.prominent { z-index: 3; box-shadow: 0 28px 90px rgba(0,0,0,.6), 0 0 32px rgba(108,92,231,.22); transform: translateX(var(--x)) translateY(var(--y)) scale(1.02) rotate(var(--r)); }
.phone-frame:hover { transform: translateX(var(--x)) translateY(calc(var(--y) - 6px)) rotate(calc(var(--r) * .9)); }

/* Ensure equal stacking so seitliche Bilder sind gleich sichtbar */
.hero-collage .phone-frame { z-index: 1; }
.hero-collage .phone-frame:nth-child(2),
.hero-collage .phone-frame:nth-child(4) { z-index: 2; }
.hero-collage .phone-frame.prominent { z-index: 3; }

/* Slider (removed) */

/* Ripple Loader (Uiverse, adapted) */
.loader-section { display: none; }
.loader { --size: 320px; --duration: 2.5s; --logo-color: #dbeafe; --background: linear-gradient(0deg, rgba(0,102,204,.22) 0%, rgba(0,168,255,.22) 100%); height: var(--size); aspect-ratio: 1; position: relative; pointer-events: none; }
.loader-overlay { position: absolute; inset: 0; margin: auto; height: 320px; z-index: 0; transform: none; }
.hero-visual { position: relative; }
.loader-overlay .logo { padding: 26%; }
.loader .box { position: absolute; background: var(--background); border-radius: 50%; box-shadow: rgba(0,0,0,.5) 0 10px 10px 0, inset rgba(0,168,255,.45) 0 5px 10px -7px; animation: ripple var(--duration) infinite ease-in-out; inset: var(--inset); animation-delay: calc(var(--i) * .15s); z-index: calc(var(--i) * -1); pointer-events: all; transition: all .3s ease; }
.loader .box:last-child { filter: blur(30px); }
.loader .box:not(:last-child):hover { filter: brightness(2.5) blur(5px); }
.loader .logo { position: absolute; inset: 0; display: grid; place-content: center; padding: 30%; }
.loader .logo svg { fill: var(--logo-color); width: 100%; animation: color-change var(--duration) infinite ease-in-out; }
.loader .logo svg text { fill: inherit; }
@keyframes ripple { 0% { transform: scale(1); box-shadow: rgba(0,0,0,.5) 0 10px 10px 0, inset rgba(0,168,255,.45) 0 5px 10px -7px; } 65% { transform: scale(1.4); box-shadow: rgba(0,0,0,0) 0 0 0 0; } 100% { transform: scale(1); box-shadow: rgba(0,0,0,.5) 0 10px 10px 0, inset rgba(0,168,255,.45) 0 5px 10px -7px; } }
@keyframes color-change { 0% { fill: var(--logo-color);} 50% { fill: #ffffff;} 100% { fill: var(--logo-color);} }

@media (max-width: 768px) {
  .loader-section { margin-top: 0; padding: var(--spacing-12) 0; }
  .loader-section .loader { transform: none; }
  .download-visual { grid-template-columns: 1fr; gap: var(--spacing-6); }
  /* Show phone mockups stacked */
  .dl-shot { display: block; }
  .dl-shot-left { order: 1; justify-self: center; }
  .dl-shot-right { order: 2; justify-self: center; }
  .dl-container { order: 3; justify-self: center; }
  .download-visual > .download-features { order: 4; grid-column: auto; justify-self: center; margin-top: var(--spacing-6); }
  /* Adaptive phone size on mobile */
  .dl-phone { width: clamp(220px, 70vw, 320px); height: calc(2 * clamp(220px, 70vw, 320px)); }
}

/* Mobile language selector in drawer */
@media (max-width: 768px) {
  .mobile-lang-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 10px; border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.12); font-weight: 700; text-transform: uppercase; }
  .mobile-lang-list { display: none; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding-top: 8px; }
  .mobile-lang-block.open .mobile-lang-list { display: grid; }
  /* Override generic drawer link styles for language chips */
  .mobile-drawer .mobile-lang-list a { padding: 0; background: transparent; border: none; }
  .mobile-drawer .mobile-lang-list .lang-chip { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 6px !important; border-radius: 8px; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #e5e7eb; font-weight: 700; }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero { overflow: visible; }
    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
        text-align: center;
    }
    
    .security-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }
    .hero-container { padding-bottom: 36px; }
    .screen-collage { height: clamp(280px, 44vw, 340px); }
    .phone-frame { width: clamp(180px, 28vw, 220px); height: calc(clamp(180px, 28vw, 220px) * 2); }
}

@media (max-width: 768px) {
    .hero-title { font-size: clamp(2rem, 6.5vw, 3rem); max-inline-size: 22ch; margin-inline: auto; }
    .hero-subtitle { font-size: clamp(1rem, 3.2vw, 1.125rem); }
    /* Security Pillars mobile stacking like Download section */
    .pillars-wrap { grid-template-columns: 1fr; gap: var(--spacing-8); }
    .pillars-left .section-title, .pillars-left .section-subtitle { text-align: center; }
    .pillars-right { position: static; transform: none; min-height: 280px; order: 2; }
    .pillars-left { order: 1; }
    .circle-anim { width: clamp(240px, 70vw, 360px); height: clamp(240px, 70vw, 360px); margin: 0 auto; }
    .pillars-list { gap: var(--spacing-4); }
    .pillar-item { padding: var(--spacing-3) var(--spacing-4); }
    .nav-links {
        display: none;
        max-width: 100%;
    }

    /* Burger toggle button */
    .mobile-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; margin-left: auto; }
    .mobile-toggle svg { width: 24px; height: 24px; }

    /* Drawer + overlay */
    .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1500; display: block; }
    .mobile-drawer { position: fixed; top: 0; right: 0; width: min(84vw, 380px); max-width: 100vw; height: 100vh; background: #0b0b0c; border-left: 1px solid rgba(255,255,255,.08); box-shadow: -18px 0 50px rgba(0,0,0,.5); transform: translateX(100%); transition: transform .25s ease; z-index: 1600; display: flex; flex-direction: column; padding: 18px; gap: 12px; overflow-x: hidden; }
    .mobile-drawer .mobile-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
    .mobile-drawer > .mobile-list > a { color: #e5e7eb; text-decoration: none; font-weight: 600; padding: 12px 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
    /* Ensure language block does not inherit nav item card style */
    .mobile-drawer .mobile-lang-block { background: transparent; border: none; padding: 0; }
    .mobile-drawer .mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .mobile-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
    body.mm-open { overflow: hidden; }
    .mobile-overlay.open { opacity: 1; pointer-events: auto; }
    .mobile-drawer.open { transform: translateX(0); }
    /* prevent horizontal scroll on body when drawer open */
    body.mm-open { overflow-x: hidden; }
    
    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-stats { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "c c"; gap: var(--spacing-3); justify-items: center; padding-bottom: var(--spacing-4); }
    .hero-stats .stat { width: 100%; }
    .hero-stats .stat:nth-child(1) { grid-area: a; }
    .hero-stats .stat:nth-child(2) { grid-area: b; }
    /* Third card centered and same visual width as a single column */
    .hero-stats .stat:nth-child(3) { grid-area: c; justify-self: center; width: calc((100% - var(--spacing-3, 12px)) / 2); max-width: 340px; }
    .hero-collage .phone-frame { transform: translateX(calc(var(--x) * .6)) translateY(calc(var(--y) * .7)) rotate(calc(var(--r) * .85)); }
    /* Guard long titles on small tablets */
    .section-title { word-break: normal; hyphens: none; overflow-wrap: break-word; }
    .features .section-title { hyphens: none; word-break: normal; }
    .hero-title { word-break: break-word; hyphens: auto; overflow-wrap: anywhere; }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .download-features {
        flex-direction: column;
        align-items: center;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-socials { justify-content: center; }
    .footer-logo, .footer .logo, .footer .logo-image, .footer .logo-text, .footer-logo p { margin-left: auto; margin-right: auto; text-align: center; display: block; }
    
    .phone-mockup {
        width: 250px;
        height: 500px;
    }
    
    .comparison-table {
        overflow-x: auto;
    }
    
    .table-header,
    .table-row {
        min-width: 600px;
    }
    .screen-collage { height: clamp(260px, 56vw, 320px); }
    .phone-frame { width: clamp(150px, 32vw, 190px); height: calc(clamp(150px, 32vw, 190px) * 2); }

    /* Fix download features negative offset on mobile */
    .download-visual > .download-features { margin-top: var(--spacing-6); }
    /* Lower download title slightly on mobile */
    .download h1, .download h2, .download h3 { margin-top: -10px; }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-4);
    }
    .hero { overflow: visible; }
    .hero-title {
        font-size: var(--font-size-3xl);
        word-break: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
    
    .section-title { font-size: clamp(28px, 7.5vw, var(--font-size-4xl)); line-height: 1.1; word-break: normal; hyphens: none; overflow-wrap: break-word; max-inline-size: 28ch; margin-inline: auto; }
    .features .section-title { word-break: normal; hyphens: none; }
    
    /* Ensure CTA fits on very small widths */
    .hero-buttons { width: 100%; }
    .dl-container { width: 100%; display: block; }
    .dl-button { width: 100%; justify-content: center; }
    .dl-text { text-align: center; }
    .dl-label, .dl-subtitle { white-space: normal; }
    /* Ensure consistent offset also on very small screens */
    .download h1, .download h2, .download h3 { margin-top: -10px; }

    .logo-image { width: 60px; height: 60px; }
    .phone-mockup { width: 200px; height: 400px; }
    .screen-collage { height: clamp(200px, 60vw, 260px); }
    .phone-frame { width: clamp(120px, 38vw, 160px); height: calc(clamp(120px, 38vw, 160px) * 2); }
    .hero-collage .phone-frame { transform: translateX(calc(var(--x) * .5)) translateY(calc(var(--y) * .65)) rotate(calc(var(--r) * .85)); }
}

/* Very small devices (e.g., iPhone 5 width) */
@media (max-width: 360px) {
    .hero { overflow: visible; }
    .hero-title { font-size: clamp(22px, 8.5vw, 28px); line-height: 1.2; word-break: break-word; overflow-wrap: anywhere; hyphens: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-subtitle, .download-subtitle { font-size: 0.95rem; line-height: 1.5; }
    .btn, .dl-button { font-size: 0.95rem; }
    .hero-buttons { width: 100%; }
    .dl-container { width: 100%; display: block; }
    .dl-button { width: 100%; justify-content: center; padding: 0.95em 1.1em; white-space: normal; }
    .dl-text { text-align: center; }
    .dl-label, .dl-subtitle { white-space: normal; }
    .dl-icon { width: 36px; height: 36px; }
    .screen-collage { height: clamp(180px, 64vw, 240px); }
    .phone-frame { width: clamp(110px, 42vw, 140px); height: calc(clamp(110px, 42vw, 140px) * 2); }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--spacing-3); justify-items: center; grid-template-areas: "a b" "c c"; }
    .hero-stats .stat { width: 100%; }
    .hero-stats .stat:nth-child(1) { grid-area: a; }
    .hero-stats .stat:nth-child(2) { grid-area: b; }
    /* Third card centered and same visual width as a single column */
    .hero-stats .stat:nth-child(3) { grid-area: c; justify-self: center; width: calc((100% - var(--spacing-3, 12px)) / 2); max-width: 320px; }
    .stat-number { font-size: 1.05rem; }
    .stat-label { font-size: 0.72rem; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content > * {
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
.hero-content > *:nth-child(3) { animation-delay: 0.3s; }
.hero-content > *:nth-child(4) { animation-delay: 0.4s; }

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

/* Strong overrides to ensure compact language selector in mobile drawer */
@media (max-width: 768px) {
    .mobile-lang-list { display: none !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding-top: 8px; }
    .mobile-lang-block.open .mobile-lang-list { display: grid !important; }
    .mobile-drawer .mobile-lang-list a { padding: 0 !important; background: transparent !important; border: none !important; }
    .mobile-drawer .mobile-lang-list .lang-chip { display: inline-flex !important; align-items: center; justify-content: center; padding: 8px 6px !important; border-radius: 8px; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #e5e7eb; font-weight: 700; }
}

::-webkit-scrollbar-track {
    background: var(--gray-900);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-blue);
}