/* ===========================
   WOW! Gallery B2B Website
   Main Stylesheet - brands'n mind Theme
   =========================== */

/* Font loaded via <link> tags in HTML for optimal preloading */

/* CSS Variables - brands'n mind Color Theme */
:root {
    --primary-color: #26b3e8;
    --secondary-color: #3ea8b8;
    --dark-bg: #4e4e56;
    --light-bg: #f5f5f5;
    --text-dark: #2b2b2b;
    --text-light: #666;
    --accent-color: #1a4d9e;
    --brand-blue: #1a4d9e;
    --brand-green: #6EC829;
    --brand-purple: #7d73a3;
    --brand-pink: #E44486;
    --brand-red: #C3002F;
    --dark-gray: #373737;
    --footer-gradient-start: #373737;
    --footer-gradient-end: #2b2b2b;
    --border-radius: 8px;
    --transition: all 0.3s ease;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* New background color variables */
    --bg-soft-white: #fafbfc;
    --bg-soft-blue: #f0f7fb;
    --bg-soft-cyan: #e8f5f9;
    --bg-soft-teal: #e0f2f1;
}

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

html {
    scroll-behavior: smooth;
    overflow-y: scroll;  /* Always show scrollbar to prevent layout shift */
}

body {
    font-family: 'Montserrat', 'Open Sans', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    background-color: #fff;
    line-height: 1.6;
    font-weight: 400;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
    font-family: 'Montserrat', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    font-weight: 900;
    line-height: 1.2;
    background: linear-gradient(135deg, #1a4d9e 0%, #26b3e8 50%, #3ea8b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.1);
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    font-weight: 700;
}

p {
    margin-bottom: 15px;
    color: var(--text-light);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

/* ===========================
   HEADER & NAVIGATION
   =========================== */

.header {
    background: #ffffff;
    color: var(--text-dark);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    will-change: background-color, box-shadow;
}

.header.scrolled {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(62, 168, 184, 0.2);
}

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

.logo a {
    text-decoration: none;
}

.logo h1 {
    background: linear-gradient(135deg, #1a4d9e 0%, #26b3e8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.8rem;
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.header.scrolled .logo h1 {
    color: white;
    -webkit-text-fill-color: white;
}

.nav-menu {
    display: flex;
}

.nav-menu ul {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    color: var(--text-dark);
    font-weight: 600;
    transition: color 0.3s ease;
    text-decoration: none;
    font-size: 0.95rem;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

.header.scrolled .nav-menu a {
    color: white;
}

.header.scrolled .nav-menu a:hover {
    color: var(--accent-color);
}


.language-toggle {
    display: flex;
    gap: 10px;
}

.lang-btn {
    background: transparent;
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    transition: var(--transition);
    font-size: 0.85rem;
}

.lang-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.lang-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.header.scrolled .lang-btn {
    border-color: white;
    color: white;
}

.header.scrolled .lang-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--text-dark);
}

.header.scrolled .lang-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    margin: 5px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

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

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

.header.scrolled .hamburger span {
    background: white;
}

/* ===========================
   HERO SECTION
   =========================== */

.hero {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, var(--bg-soft-blue) 50%, var(--bg-soft-cyan) 100%);
    /* gradientShift animation removed for performance - background-position animations are not GPU-accelerated */
}

.hero::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(38, 179, 232, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    top: -50px;
    left: 10%;
    animation: float1 20s ease-in-out infinite;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(62, 168, 184, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    bottom: 50px;
    right: 15%;
    animation: float2 25s ease-in-out infinite;
    z-index: 1;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.hero-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 900;
    background: linear-gradient(135deg, #1a4d9e 0%, #26b3e8 50%, #3ea8b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--text-light);
}

.cta-button {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid var(--primary-color);
    cursor: pointer;
}

.cta-button:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(38, 179, 232, 0.2), 0 12px 32px rgba(38, 179, 232, 0.15);
}

.hero-image img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    animation: slideInRight 0.8s ease-out;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Floating shapes animations */
@keyframes float1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -30px) rotate(90deg); }
    50% { transform: translate(0, -60px) rotate(180deg); }
    75% { transform: translate(-30px, -30px) rotate(270deg); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-40px, 40px) rotate(120deg); }
    66% { transform: translate(40px, -40px) rotate(240deg); }
}

@keyframes float3 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-50px) rotate(180deg); }
}

@keyframes float4 {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(60px) rotate(180deg); }
}

@keyframes float5 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-50px, 50px); }
}

/* gradientShift keyframes removed - background-position animations cause expensive repaints */

/* GPU Acceleration for Floating Shapes - Limited to hero and overview for performance */
.hero::before,
.hero::after,
.overview::before,
.overview::after {
    will-change: transform;
    transform: translateZ(0);
}

/* Performance optimization: Disable animations on most sections to reduce rendering load
   Only hero and overview sections have floating animations for visual impact
   This reduces from 18 animated elements to 4, dramatically improving scroll performance */

/* Scroll to top button styles */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1a4d9e;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(26, 77, 158, 0.4);
    transition: all 0.3s ease;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    pointer-events: none;
}

#scrollToTop.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================
   OVERVIEW SECTION
   =========================== */

.overview {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-white) 0%, var(--bg-soft-blue) 100%);
    position: relative;
    overflow: hidden;
}

.overview::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(38, 179, 232, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    top: 100px;
    right: 5%;
    animation: float3 22s ease-in-out infinite;
    z-index: 0;
}

.overview::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(26, 77, 158, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -50px;
    left: 10%;
    animation: float4 28s ease-in-out infinite;
    z-index: 0;
}

.overview-intro {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(38, 179, 232, 0.08), rgba(62, 168, 184, 0.06));
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overview-intro p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.overview-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.overview-card:nth-child(2) {
    border-left-color: #3ea8b8;
}

.overview-card:nth-child(3) {
    border-left-color: var(--accent-color);
}

.overview-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(38, 179, 232, 0.2);
}

.overview-card h3 {
    background: linear-gradient(135deg, var(--primary-color), #3ea8b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.3rem;
    white-space: nowrap;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===========================
   PRODUCT COMPARISON
   =========================== */

.product-comparison {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-cyan) 0%, var(--bg-soft-teal) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.comparison-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}

.comparison-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(38, 179, 232, 0.1);
    transition: var(--transition);
}

.comparison-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(38, 179, 232, 0.18);
}

.comparison-card.wow-box {
    border-top: 5px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.comparison-card.wow-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.15);
}

.comparison-card.wow-cube {
    border-top: 5px solid var(--secondary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.comparison-card.wow-cube:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.15);
}

.card-header {
    padding: 25px;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.card-header h3 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
}

.card-header .subtitle {
    margin: 0;
    color: var(--text-light);
    font-size: 0.95rem;
}

.card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f0f0f0;
    aspect-ratio: 16 / 9;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    padding: 25px;
}

.card-content h4 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.card-content ul {
    list-style: none;
    margin-bottom: 25px;
}

.card-content li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: var(--text-light);
}

.card-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.specs {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.specs p {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.card-cta {
    display: block;
    text-align: center;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border-radius: 6px;
    font-weight: 700;
    transition: var(--transition);
    border: 2px solid var(--primary-color);
}

.card-cta:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(38, 179, 232, 0.2);
}

/* ===========================
   PRODUCT DETAIL SECTIONS
   =========================== */

.product-detail {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.product-detail:nth-child(odd) {
    background: linear-gradient(135deg, var(--bg-soft-white) 0%, var(--bg-soft-blue) 100%);
}

.product-detail:nth-child(even) {
    background: linear-gradient(135deg, var(--bg-soft-cyan) 0%, var(--bg-soft-teal) 100%);
}

/* Floating shapes removed for performance optimization */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.gallery img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.1);
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.detail-right h3 {
    margin-top: 30px;
    color: var(--primary-color);
}

.specs-list {
    list-style: none;
    margin-bottom: 30px;
}

.specs-list li {
    padding: 12px;
    background: var(--light-bg);
    margin-bottom: 10px;
    border-left: 4px solid var(--secondary-color);
    border-radius: 4px;
}

.applications-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.applications-list li {
    padding: 12px;
    background: var(--light-bg);
    border-radius: 4px;
    border-left: 4px solid var(--primary-color);
}

/* ===========================
   SERVICES SECTION
   =========================== */

.services {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-white) 0%, var(--bg-soft-blue) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.service-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    border-top: 4px solid var(--primary-color);
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(38, 179, 232, 0.15);
}

.service-card .price {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.1rem;
    margin-top: 15px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rental-process {
    margin-top: 60px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius);
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.rental-process h3 {
    text-align: center;
    margin-bottom: 40px;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    position: relative;
}

.step {
    text-align: center;
    position: relative;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(38, 179, 232, 0.2), 0 4px 16px rgba(38, 179, 232, 0.3);
    position: relative;
    z-index: 2;
}

.step h4 {
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
}

/* Arrow connector between steps */
.step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 12px;
    right: -16px;
    width: 30px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.5rem;
    z-index: 1;
}

/* ===========================
   USE CASES SECTION
   =========================== */

.use-cases {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-cyan) 0%, var(--bg-soft-teal) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.usecases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.usecase-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.usecase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(38, 179, 232, 0.15);
}

.usecase-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f0f0f0;
    aspect-ratio: 16 / 10;
}

.usecase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.usecase-card h3 {
    padding: 20px 20px 10px;
    margin: 0;
    color: var(--primary-color);
}

.usecase-card p {
    padding: 0 20px 20px;
    margin: 0;
    font-size: 0.95rem;
}

/* ===========================
   WHY US SECTION
   =========================== */

.why-us {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-white) 0%, var(--bg-soft-blue) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 1;
}

.why-card {
    padding: 30px;
    background: white;
    border-radius: var(--border-radius);
    border-right: 4px solid var(--secondary-color);
    transition: var(--transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.why-card:hover {
    transform: translateX(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(62, 168, 184, 0.18);
}

.why-card h3 {
    color: var(--primary-color);
}

/* ===========================
   PRICING SECTION
   =========================== */

.pricing {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-cyan) 0%, var(--bg-soft-teal) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.pricing-note {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.tab-btn {
    background: white;
    border: 2px solid #ddd;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    transition: var(--transition);
    color: var(--text-dark);
}

.tab-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(38, 179, 232, 0.3);
}

.tab-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.pricing-tables {
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.pricing-table {
    display: none;
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.1);
}

.pricing-table.active {
    display: block;
}

.pricing-section {
    margin-bottom: 40px;
}

.pricing-section h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.pricing-section table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.pricing-section table tr {
    border-bottom: 1px solid #eee;
}

.pricing-section table tr:last-child {
    border-bottom: none;
}

.pricing-section table td {
    padding: 15px;
    font-size: 0.95rem;
}

.pricing-section table td:first-child {
    font-weight: 500;
}

.pricing-section table td:last-child {
    text-align: right;
    color: var(--secondary-color);
    font-weight: 600;
}

.pricing-services {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.pricing-services h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
}

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

.services-pricing div {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 6px;
}

.services-pricing span:last-child {
    color: var(--secondary-color);
    font-weight: 600;
}

/* ===========================
   CONTACT SECTION
   =========================== */

.contact {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--bg-soft-white) 0%, var(--bg-soft-blue) 100%);
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.contact-form {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(38, 179, 232, 0.1);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(38, 179, 232, 0.15);
}

.submit-btn:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(38, 179, 232, 0.2), 0 12px 32px rgba(38, 179, 232, 0.15);
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    display: none;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.contact-info {
    padding: 30px;
    background: linear-gradient(135deg, var(--footer-gradient-start), var(--footer-gradient-end));
    border-radius: var(--border-radius);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.15);
}

.contact-info h3 {
    color: var(--accent-color);
    margin-bottom: 30px;
}

.info-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-item p {
    margin: 0;
    color: inherit;
}

.info-item a {
    color: var(--secondary-color);
}

.info-item a:hover {
    color: var(--primary-color);
}

/* Contact Info Center Layout */
.contact-info-center {
    max-width: 600px;
    margin: 40px auto 0;
    background: white;
    padding: 50px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    z-index: 1;
}

.info-item-large {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
}

.info-item-large:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-item-large h3 {
    color: var(--primary-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-weight: 600;
}

.info-item-large p {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.contact-name {
    font-size: 1.5rem !important;
    font-weight: 600;
    color: var(--accent-color);
}

.contact-email,
.contact-phone {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.contact-email:hover,
.contact-phone:hover {
    color: var(--primary-color);
    transform: scale(1.05);
}

/* ===========================
   FOOTER
   =========================== */

.footer {
    background: linear-gradient(135deg, var(--footer-gradient-start), var(--footer-gradient-end));
    color: white;
    padding: 50px 0 20px;
    position: relative;
    overflow: hidden;
}

/* Floating shapes removed for performance optimization */

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.footer-section h4 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.footer-section a {
    color: white;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

.footer-bottom a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* ===========================
   LEGAL PAGES (Impressum, Datenschutz)
   =========================== */

.legal-page {
    padding: 80px 0;
    background: white;
}

.legal-page h1 {
    font-size: 2.8rem;
    margin-bottom: 50px;
    background: linear-gradient(135deg, #1a4d9e 0%, #26b3e8 50%, #3ea8b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-content h2 {
    font-size: 1.8rem;
    margin-top: 50px;
    margin-bottom: 30px;
    background: linear-gradient(135deg, #1a4d9e 0%, #26b3e8 50%, #3ea8b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-section {
    margin-bottom: 35px;
    padding: 25px;
    background: #f9f9f9;
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
}

.legal-section h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.legal-section p {
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    transition: color 0.3s ease;
}

.legal-section a:hover {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

.legal-content strong {
    color: var(--text-dark);
    font-weight: 700;
}

/* ===========================
   ANIMATIONS
   =========================== */

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

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

.section-animated {
    animation: slideInUp 0.6s ease-out;
}

/* ===========================
   UTILITY CLASSES
   =========================== */

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

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}