/*
=============================================================================
   IPRIVACY - MAIN STYLESHEET
=============================================================================
   Author: IPrivacy Frontend Team
   Last Updated: 2025
   Description: Core styles for the IPrivacy landing page, including
                responsive layouts, glassmorphism effects, and utilities.

   TABLE OF CONTENTS
   -----------------
   1.  Global Reset & Variables ..... Line 20
   2.  Background Logic ............. Line 60
   3.  Utilities .................... Line 80
   4.  Header & Navigation .......... Line 120
   5.  Hero Section ................. Line 380
   6.  Buttons & Components ......... Line 420
   7.  Use Cases (Services) ......... Line 560
   8.  Pricing Page Styles .......... Line 1200
   9.  About Section ................ Line 1800
   10. Contact Section .............. Line 1850
   11. Footer ....................... Line 1950
   12. Responsive Design ............ Line 2000
=============================================================================
*/

/* 1. Global Reset & Variables */
:root {
    --bg-color: #f8f9fa;
    /* Light Gray/White - Main Background */
    --text-color: #1a202c;
    /* Dark Slate - Primary Text */
    --primary-color: #0d9488;
    /* Teal 600 - Brand Primary */
    --secondary-color: #059669;
    /* Emerald 600 - Brand Secondary */
    --accent-color: #14b8a6;
    /* Teal 500 - Highlights */

    --glass-surface: rgba(255, 255, 255, 0.1);
    /* Base Translucency */
    --glass-border: rgba(255, 255, 255, 0.2);
    /* Unified Border */
    --glass-highlight: rgba(255, 255, 255, 0.5);
    /* Bevel Highlight */
    --glass-blur: 20px;
    --glass-saturation: 180%;

    --glass-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
    --glass-shadow-md: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    --glass-shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);

    --font-main: 'Outfit', sans-serif;
    --transition-speed: 0.3s;
}

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

html {
    scroll-behavior: smooth;
}

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

/* 2. Background Network Canvas */
#network-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--bg-color);
    /* Fallback/Base */
}

@keyframes pulse {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

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

.highlight-text {
    color: var(--primary-color);
    /* Subtle shadow for depth */
    text-shadow: 0 2px 10px rgba(13, 148, 136, 0.2);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-color);
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
}

/* 4. Header & Navigation */
.glass-header {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
    pointer-events: none;
    /* Let clicks pass through empty space */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 100%;
    /* Full width for positioning */
    padding: 0 1rem;
    /* Equal to top padding (1rem) */
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    /* Remove underline */

    /* Fixed Positioning */
    pointer-events: auto;

    /* Unified Glass Effect (Matching .glass-btn) */
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

    padding: 0.5rem 1rem;
    border-radius: 50px;

    /* Liquid Physics: Thick Rim Light & Volume */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    /* Strong top specular */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        /* Inner Volume Glow */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
        inset 0 -4px 10px rgba(0, 0, 0, 0.05),
        /* Subtle depth at bottom */
        /* Drop Shadow */
        var(--glass-shadow-sm);

    transition: box-shadow 0.3s ease;
}

.logo:hover {
    /* Lift Removed */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        inset 0 -4px 10px rgba(0, 0, 0, 0.05),
        var(--glass-shadow-md);
    /* Lifted shadow */
}

.logo img {
    height: 40px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Navigation Links - Desktop Default */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.5rem;
    /* Pill padding */

    /* Ensure Interaction */
    pointer-events: auto;

    /* Visuals: Glass Pill to match Logo */
    background: var(--glass-surface);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--glass-shadow-sm);

    /* Explicit Visibility */
    opacity: 1;
    visibility: visible;
}

.nav-links li {
    width: auto;
}

.nav-item {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
    /* Hit area */
}

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

.nav-icon {
    display: none;
    /* Hidden on desktop */
}

/* Specific overrides for User Login */
.user-login-item .nav-icon {
    display: block;
    /* Show user icon on desktop */
}

.user-login-item {
    gap: 0.5rem;
}

/* User Dropdown */
.user-menu-container {
    position: relative;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    overflow: hidden;
    transform-origin: top right;
    animation: dropdownFadeIn 0.2s ease-out;
}

.user-dropdown.active {
    display: block;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dropdown-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.dropdown-item:hover {
    background: rgba(13, 148, 136, 0.1);
    color: var(--primary-color);
}

.dropdown-list .divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 0.5rem 0;
}

.dropdown-item.text-danger {
    color: #ef4444;
}

.dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Mobile Menu Button Removed */
.mobile-menu-btn {
    display: none !important;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.hero-content p {
    font-size: 1.25rem;
    color: rgba(26, 32, 44, 0.7);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}



.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.primary-btn {
    padding: 1rem 2rem;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: all var(--transition-speed);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.primary-btn:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.35);
}

/* Reference Style Button (Matte Charcoal) */
.glass-btn.dark-btn {
    width: 100%;
    text-align: center;
    background: #2d3440;
    /* Matte Charcoal */
    color: white;
    border: none;
    box-shadow: none;
    /* Flat look per image */
    font-weight: 500;
    border-radius: 6px;
    /* Slightly tighter radius */
    padding: 0.8rem 1.5rem;
}

.glass-btn.dark-btn:hover {
    background: #1a202c;
    /* Darker on hover */
    transform: none;
    /* Stable */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Subtle lift */
}

.secondary-btn {
    padding: 1rem 2rem;
    background: transparent;
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    backdrop-filter: blur(5px);
    transition: all var(--transition-speed);
}

.secondary-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--text-color);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 0.8s ease-out forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

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

/* Services */
.services-section {
    padding: 5rem 0;
    position: relative;
}

/* --- Cards Grid --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

/* --- Tech-Glass Card Design --- */
/* --- Tech-Glass Card Design --- */
.glass-card {
    /* Smoked/Black Tinted Glass Base */
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.06) 0%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

    /* Shape & Bevel */
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;

    /* Physical Bevel (Unified with Button) */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-top-color: rgba(255, 255, 255, 0.8);

    box-shadow:
        /* Sharp Highlight */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
        /* Deeper Shadow (Matched opacity) */
        var(--glass-shadow-lg);
}

/* Card Sheen & Lift Interaction */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.6),
            transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
    pointer-events: none;
    z-index: 1;
}

.glass-card:hover {
    /* transform: translateY(-10px) scale(1.02); REMOVED */
    /* Clean Raise Up */
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.7),
        /* Unify highlight opacity */
        inset -1px -1px 0 rgba(0, 0, 0, 0.2),
        /* Unify bevel opacity */
        0 25px 50px rgba(0, 0, 0, 0.15);
    /* Deep shadow */
    border-color: #fff;
    z-index: 10;
}

.glass-card:hover::before {
    left: 150%;
    transition: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Match button ease */
}

/* Physical Beveled Glass Button */
/* Base Button (Secondary - Flat/Outline Minimal) */
.glass-btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    /* Matched to Pricing */
    transition: all 0.2s ease;

    /* Minimal Outline Style */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    border: 1px solid rgba(26, 32, 44, 0.2);
    /* Subtle Border */
    color: var(--text-color);
    box-shadow: none;
    /* No glass shadow */
    position: relative;
    overflow: hidden;
}

.glass-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    /* Subtle grey fill on hover */
    border-color: var(--text-color);
    box-shadow: none;
}

/* Primary Button (Matches Pricing: Matte Charcoal) */
.glass-btn.primary {
    background: #2d3440;
    /* Matte Charcoal */
    color: white;
    border: 1px solid transparent;
    /* No visible border */
    box-shadow: none;
    /* Flat */
}

.glass-btn.primary:hover {
    background: #1a202c;
    /* Darker */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Subtle lift */
    color: white;
}

/* Remove Sheen Animation */
.glass-btn::before,
.glass-btn.primary::before {
    display: none;
}



.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    /* Top accent bar */
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    transition: background 0.4s ease;
}

.glass-card:hover {
    /* Lift Removed */
    /* Clean Raise Up */
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.7),
        /* Unify highlight opacity */
        inset -1px -1px 0 rgba(0, 0, 0, 0.2),
        /* Unify bevel opacity */
        var(--glass-shadow-lg);
    /* Deep shadow */
    border-color: #fff;
    z-index: 10;
}

/* Tier Specifics */
.tier-1 {
    --tier-color: #64748b;
}

.tier-2 {
    --tier-color: #0ea5e9;
}

.tier-3 {
    --tier-color: #7c3aed;
}

.tier-1:hover {
    border-color: var(--tier-color);
}

.tier-2:hover {
    border-color: var(--tier-color);
}

.tier-3:hover {
    border-color: var(--tier-color);
}

.tier-1::before {
    background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.4), transparent);
}

.tier-2::before {
    background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.4), transparent);
}

.tier-3::before {
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.4), transparent);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    /* Gradient Text for Icon */
    background: linear-gradient(135deg, var(--text-color), var(--tier-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.4s ease;
}

/* New Side-by-Side Header Layout */
.service-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.service-header .card-icon {
    margin-bottom: 0;
    font-size: 2.5rem;
    /* Slightly compact for side-by-side */
}

.service-header h3 {
    margin-bottom: 0;
}

.glass-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

.glass-card h3 {
    font-size: 1.5rem;
    color: var(--text-color);
}

.glass-card p {
    color: rgba(26, 32, 44, 0.8);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--primary-color);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
}

.glass-card p {
    color: rgba(26, 32, 44, 0.7);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.text-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.text-link:hover {
    border-color: var(--primary-color);
}

/* 9. About Section */
.about-section {
    padding: 3rem 0;
    /* Reduced from 5rem */
    position: relative;
    overflow: hidden;
    /* Ensure circle doesn't overflow */
}

.about-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    /* Reduced gap */
    position: relative;
}

.about-text p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: rgba(26, 32, 44, 0.8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Make visual circle a background element */
.visual-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--secondary-color) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
    /* Moved inside */
}

/* Contact Section */
.contact-section {
    padding: 5rem 0 8rem;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    box-shadow: var(--glass-shadow-lg);
    backdrop-filter: blur(var(--glass-blur));
}

.contact-info h2 {
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.contact-info p {
    color: rgba(26, 32, 44, 0.7);
}

.info-list {
    list-style: none;
    margin-top: 2rem;
}

.info-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
}

/* Form */
.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: rgba(26, 32, 44, 0.6);
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: #f1f5f9;
    /* Light input bg */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    color: var(--text-color);
    font-family: inherit;
    transition: border-color 0.3s, background 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.error-msg {
    color: #dc2626;
    /* Darker red */
    font-size: 0.8rem;
    display: block;
    margin-top: 0.25rem;
    height: 1.2rem;
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
}

.submit-btn:hover {
    opacity: 0.9;
}

/* 11. Footer */
.main-footer {
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.9rem;
    color: rgba(26, 32, 44, 0.5);
}

.footer-links a {
    color: rgba(26, 32, 44, 0.7);
    text-decoration: none;
    margin: 0 5px;
}

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

/* 12. Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

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

/* Mobile Devices */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    /* Navigation */
    /* Navigation - Bottom Bar */
    .nav-links {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        height: auto;

        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: none;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);

        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        padding: 0.8rem 0.5rem calc(0.8rem + env(safe-area-inset-bottom));
        /* Safe Area for iPhone Home Bar */
        z-index: 1000;
        border-radius: 0;

        /* Visibility Reset */
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .nav-links li {
        width: auto;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .nav-item {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        font-size: 0.7rem;
        color: rgba(26, 32, 44, 0.6);
        padding: 0.5rem;
        border-radius: 12px;
        width: 100%;
        text-align: center;
    }

    /* Active/Hover State for Mobile */
    .nav-item:active,
    .nav-item:hover,
    .nav-item:focus {
        background: rgba(13, 148, 136, 0.08);
        /* Subtle touch feedback */
        color: var(--primary-color);
        transform: scale(0.95);
        /* Click feedback */
    }

    .nav-icon {
        display: block;
        /* Show Icon */
    }

    .nav-text {
        font-weight: 600;
    }

    .nav-container {
        padding: 0 1rem;
    }

    .mobile-menu-btn .bar {
        background: var(--text-color);
    }

    /* Hero Section */
    .hero-section {
        padding-top: 100px;
        height: auto;
        min-height: 100vh;
    }

    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .hero-content p {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        padding: 0 2rem;
    }

    .glass-btn {
        width: 100%;
        text-align: center;
    }

    /* Cards */
    .cards-grid {
        grid-template-columns: 1fr;
        /* Force single column on smaller phones */
        gap: 2rem;
    }

    /* About Section */
    .about-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .visual-circle {
        width: 200px;
        height: 200px;
    }

    /* Contact Modal */
    .glass-panel {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        gap: 2rem;
    }

    .modal-container {
        width: 95%;
        padding: 1.5rem;
    }

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

    .info-list li {
        justify-content: center;
    }
}

/* --- Contact Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-container {
    background: #fff;
    /* Fallback */
    /* Use glass styles via class, but override specific dimensions */
    width: 90%;
    max-width: 500px;
    padding: 2rem;
    /* Compact padding */
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

.close-modal-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
    line-height: 1;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: var(--primary-color);
}

/* 8. Pricing Page Styles */

/* Hero Adjustments */
.hero-section.center-text {
    text-align: center;
    padding: 120px 0 1rem;
    /* Top padding for header, minimal bottom */
    height: auto;
    /* Override 100vh */
    min-height: 0;
}

/* Billing Toggle (Segmented Pill) */
.pricing-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.pill-checkbox {
    display: none;
}

.pill-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    /* Glass base */
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 0.25rem;
    cursor: pointer;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
    user-select: none;
}

.pill-option {
    position: relative;
    z-index: 2;
    padding: 0.6rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(26, 32, 44, 0.6);
    transition: color 0.3s;
    text-align: center;
    min-width: 140px;
    /* Consistent width */
}

/* Active Text Colors */
.pill-checkbox:not(:checked)+.pill-container .monthly {
    color: var(--primary-color);
}

.pill-checkbox:checked+.pill-container .yearly {
    color: var(--primary-color);
}

.pill-slider {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: calc(50% - 0.25rem);
    /* Half width minus padding */
    height: calc(100% - 0.5rem);
    background: #fff;
    border-radius: 50px;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Slide Logic */
.pill-checkbox:checked+.pill-container .pill-slider {
    transform: translateX(100%) translateX(0.25rem);
    /* Move full width + adjust gap */
    /* Easier way: width is ~140px + padding. 
       Actually with flex, width is dynamic.
       Let's use layout-independent sliding: 100% of its own width approx?
       Visual trick: Use left:0 and translateX.
       If container is flex, and slider is absolute, `left: 0.25rem`. 
       Move it by `calc(100% + some gap)`.
       Wait, simpler: Transform 100% usually moves it by its own width. 
       If wrapper has 2 items of equal width, moving by 100% works perfectly + gap adjustment.
     */
    transform: translateX(calc(100% + 0px));
    /* Fits if widths match */
}

/* Ensure slider width matches option width */
/* We set min-width 140px on options. Slider should be 50% of container? */
/* Yes, `width: calc(50% - ...)` works if options are even. */

.discount-badge {
    background: var(--accent-color);
    /* Teal 500 */
    color: #fff;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Pricing Cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    /* Reduced gap */
    margin-bottom: 2rem;
    /* Reduced margin */
    align-items: start;
    /* Align tops */
}

.pricing-card {
    position: relative;
    height: 100%;
    /* No padding or flex here, strictly a wrapper */
}

/* Inner Glass Card (Visuals) */
.inner-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    height: 100%;
    position: relative;
    /* Maintain relative for absolute sheen */
}

/* Popular Wrapper - Just z-index for stacking */
.pricing-card.popular {
    z-index: 2;
}

/* Tint on Inner Card */
.pricing-card.popular .inner-card {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* "Raise Out" Effect */
.glass-card:hover {
    /* transform: scale(1.05); REMOVED */
    /* Raise Out toward user */
    background: rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.7),
        inset -1px -1px 0 rgba(0, 0, 0, 0.2),
        0 30px 60px rgba(0, 0, 0, 0.2);
    /* Deeper shadow for "out" feel */
    border-color: #fff;
    z-index: 10;
}

.popular-tag {
    display: inline-block;
    background: rgba(13, 148, 136, 0.15);
    /* Primary Tint */
    color: var(--primary-color);
    border: 1px solid rgba(13, 148, 136, 0.3);
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1px;
}

.card-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
}

.card-header h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.currency {
    font-size: 1.5rem;
    margin-right: 5px;
}

.period {
    font-size: 1rem;
    color: rgba(66, 75, 90, 0.7);
    font-weight: 400;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    flex-grow: 1;
    /* Push button to bottom */
}

.feature-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.feature-list li:last-child {
    border-bottom: none;
}



/* FAQ Section */
.faq-section {
    padding: 2rem 0 4rem;
    /* Compact padding */
}

.faq-grid {
    display: grid;
    gap: 1rem;
    /* Compact gap */
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 1.5rem;
    /* Explicit compact padding */
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
}

.toggle-icon {
    font-size: 1.5rem;
    font-weight: 300;
    transition: transform 0.3s;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    opacity: 0.8;
}

.faq-answer p {
    margin-top: 1rem;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    /* Approximate max height */
}

.faq-item.active .toggle-icon {
    transform: rotate(45deg);
}

/* Mobile Pricing Adjustments */
@media (max-width: 768px) {
    .pricing-toggle-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .pricing-card.popular {
        transform: none;
        /* Remove scale on mobile */
        margin-bottom: 1rem;
    }

    .comparison-section {
        display: none;
        /* Simplify for mobile, maybe hide table */
    }

    /* Swipeable Pricing Carousel */
    .pricing-grid.cards-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1.5rem;
        padding-bottom: 2rem;
        /* Space for drag */
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: -1rem;
        /* Negative margin to pull to edge */
        margin-right: -1rem;
        width: calc(100% + 2rem);
        grid-template-columns: none;
        /* Reset grid */

        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -webkit-overflow-scrolling: touch;
    }

    .pricing-grid.cards-grid::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .pricing-card {
        min-width: 85vw;
        /* Show peeking next card */
        scroll-snap-align: center;
        height: auto;
        /* Allow full height */
    }
}

/* Pricing Toggle Animations */
.price .amount {
    display: inline-block;
    transition: none;
    /* Handled by animation classes */
    position: relative;
    white-space: nowrap;
    /* Prevent wrapping during slide */
}

.anim-slide-out-left {
    animation: slideOutLeft 0.3s forwards cubic-bezier(0.4, 0.0, 0.2, 1);
}

.anim-slide-in-right {
    animation: slideInRight 0.3s forwards cubic-bezier(0.4, 0.0, 0.2, 1);
}

.anim-slide-out-right {
    animation: slideOutRight 0.3s forwards cubic-bezier(0.4, 0.0, 0.2, 1);
}

.anim-slide-in-left {
    animation: slideInLeft 0.3s forwards cubic-bezier(0.4, 0.0, 0.2, 1);
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* Clean Layout Attributes (Pricing Redesign) - Re-applied */
.inner-card.clean-layout {
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Strict Left Align */
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.95);
    /* Opaque "Paper" Look */
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    width: 100%;
}

.card-header-row h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.card-desc {
    font-size: 1rem;
    color: rgba(26, 32, 44, 0.7);
    margin-bottom: 2rem;
    line-height: 1.5;
    min-height: 3rem;
    /* Align heights roughly */
}

/* Big Price Block */
.price-block {
    display: flex;
    align-items: baseline;
    /* Align $ and 0 on baseline */
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.amount-large {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    transform: translateY(-15px);
    /* Super-scriptish */
}

.period-text {
    font-size: 0.9rem;
    color: rgba(26, 32, 44, 0.5);
    margin-left: 0.5rem;
}

.card-divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 2rem 0;
    width: 100%;
}

/* Checked List */
.feature-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list-check li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.8rem;
    color: rgba(26, 32, 44, 0.8);
    font-size: 0.95rem;
}

.feature-list-check li::before {
    content: "✓";
    /* Simple checkmark */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--text-color);
    /* Black checkmark as per image */
    font-weight: bold;
}

/* 7. Use Cases (Services) */
.use-cases-section {
    padding: 5rem 0;
    min-height: 80vh;
}

/* Tabs Navigation */
/* Tabs Navigation */
.tabs-nav {
    display: flex;
    justify-content: flex-start;
    /* Changed from space-between to allow scroll */
    gap: 1.5rem;
    margin-bottom: 2rem;

    /* Edge-to-Edge Logic (Global/Desktop) */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* Padding to align content with .container (max-width 1200px + 20px padding) */
    /* Formula: (100vw - 1200px) / 2 + container_padding */
    padding-left: calc(max(20px, (100vw - 1200px) / 2 + 20px));
    padding-right: calc(max(20px, (100vw - 1200px) / 2 + 20px));

    overflow-x: auto;
    padding-bottom: 1.5rem;
    padding-top: 1rem;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */

    /* Optional: Snap behavior */
    scroll-snap-type: x mandatory;
}

.tabs-nav::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari/Webkit */
}

.tab-item {
    background: rgba(0, 0, 0, 0.02);
    /* Very subtle tint for inactive blocks */
    border: 1px solid rgba(0, 0, 0, 0.03);
    cursor: pointer;
    text-align: left;
    padding: 1.25rem;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    min-width: 200px;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.tab-item:hover {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

.tab-item.active {
    background: #db4a39;
    opacity: 1;
    color: white;
    /* transform: translateY(-4px); */
    /* Optional: disable lift if flat look desired */
    box-shadow: none;
    /* Fix: Remove shadow globally per user request */
    border-color: transparent;
}

.tab-item[data-tab="guides"].active {
    background: #d97706;
}

.tab-item[data-tab="concierge"].active {
    background: #0284c7;
}

.tab-item[data-tab="live-qa"].active {
    background: #059669;
}



.tab-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
    /* Default color for inactive */
    transition: color 0.3s ease;
}

.tab-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Inactive Tab Icon Colors (Match Section Color) */
.tab-item[data-tab="vpn"] .tab-icon {
    color: #db4a39;
}

.tab-item[data-tab="guides"] .tab-icon {
    color: #d97706;
}

.tab-item[data-tab="concierge"] .tab-icon {
    color: #0284c7;
}

.tab-item[data-tab="live-qa"] .tab-icon {
    color: #059669;
}


.tab-item.active .tab-icon {
    color: white;
}

.tab-info h3 {
    color: var(--text-color);
    /* Fix: Force dark color for inactive title */
    font-size: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.tab-info p {
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.9;
    color: rgba(26, 32, 44, 0.7);
    /* Fix: Force neutral gray for inactive description */
}

.tab-item.active h3,
.tab-item.active p {
    color: white;
}


/* Tab Content */
.tab-content-container {
    background: rgba(0, 0, 0, 0.04);
    /* Slightly deeper tint */
    border-radius: 32px;
    /* Smoother corners */
    padding: 4.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.05),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    /* Subtle inner light edge */
}

.tab-content {
    display: none;
    animation: fadeInTab 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}

/* Text Content Side */
.text-content .eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #db4a39;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.text-content h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: var(--text-color);
}

.feature-list {
    list-style: none;
    margin-bottom: 2.5rem;
}

.feature-list li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.15rem;
    /* Minimal margin */
    font-size: 1.1rem;
    line-height: 1.2;
    /* Tighter line height */
    color: rgba(26, 32, 44, 0.8);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    /* Explicitly force left alignment */
}

/* Custom Bullet Points */
.feature-list li::before {
    content: '';
    position: static;
    /* Use flex gap instead of absolute positioning */
    flex-shrink: 0;
    margin-top: 0.25rem;
    /* Adjusted for tighter line-height */
    width: 12px;
    height: 12px;
    background: #db4a39;
    /* Default (VPN) */
    border-radius: 1px;
    /* Default square */
    transform: none;
}

/* Bullet Shape Pattern */
.feature-list li:nth-child(3n+1)::before {
    border-radius: 100% 0 0 0;
    /* Top-left Quarter Circle */
}

.feature-list li:nth-child(3n+2)::before {
    border-radius: 50%;
    /* Circle */
}

.feature-list li:nth-child(3n+3)::before {
    border-radius: 1px;
    /* Square */
}

/* Bullet Colors per Section */
#cicd .feature-list li::before {
    background: #d97706;
}

#cloud .feature-list li::before {
    background: #0284c7;
}

#infra .feature-list li::before {
    background: #059669;
}

#zerotrust .feature-list li::before {
    background: #7c3aed;
}

/* Visual Content Side (Placeholder) */
.mockup-container {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mockup-placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .content-grid {
        gap: 2rem;
    }

    .text-content h2 {
        font-size: 2.5rem;
    }

    .tabs-nav {
        /* Edge-to-Edge Logic for Tablet */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        padding-left: 20px;
        padding-right: 20px;
    }
}

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

    .mockup-container {
        order: 1;
        margin-top: 2rem;
    }

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

    /* Mobile Redesign: Chip Tabs Carousel */
    .tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        /* Fix: Prevent wrap for carousel */
        justify-content: flex-start;
        /* Start from left */
        gap: 0.75rem;
        overflow-x: auto;
        /* Enable scroll */
        padding-bottom: 20px;
        /* Space for scrollbar/shadow */
        margin-bottom: 0.5rem;

        /* Edge-to-Edge Logic (Viewport Relative) */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        /* Padding to align content */
        padding-left: 20px;
        padding-right: 20px;

        -webkit-overflow-scrolling: touch;
        /* Smooth scroll */
    }

    .tab-item {
        flex: 0 0 auto;
        /* Don't stretch */
        min-width: 0;
        /* Override previous min-width */
        padding: 0.6rem 1.2rem;
        border-radius: 50px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        display: flex;
        /* Explicitly set display flex */
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .tab-item.active {
        transform: none;
        box-shadow: none !important;
        /* Fix: Remove shadow completely */
    }

    /* Color-Matched Glows Removed per user request */

    /* Hide description on mobile */
    .tab-info p {
        display: none;
    }

    .tab-info h3 {
        margin: 0;
        font-size: 0.95rem;
    }

    .tab-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 0 !important;
        /* Force reset margin */
        flex-shrink: 0;
        /* Prevent icon shrinking */
    }

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

    .tab-content-container {
        padding: 2rem 1.5rem;
        background: #fff;
        /* Solid white card */
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
        backdrop-filter: none;
    }

    .mockup-container {
        order: 1;
        margin-top: 2rem;
    }

    .text-content {
        text-align: left;
        /* Ensure left alignment on mobile */
    }

    .text-content h2 {
        font-size: 2.5rem;
    }


}

/* CTA Section */
.cta-section {
    padding: 2rem 0;
    /* Reduced from 6rem */
}

.cta-container {
    background-color: #1f1f1f;
    border-radius: 24px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

.cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.cta-heading {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
    margin: 0;
    max-width: 600px;
}

.cta-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.btn-cta-primary {
    background-color: #ffffff;
    color: #1f1f1f;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-cta-primary:hover {
    opacity: 0.9;
}

.btn-cta-secondary {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.btn-cta-secondary:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .cta-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .cta-container {
        padding: 2.5rem;
    }

    .cta-heading {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .cta-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================================
   ABOUT PAGE REDESIGN
   ========================================= */

/* Hero Stats */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

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

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #db4a39;
    /* Primary accent color */
    background: linear-gradient(135deg, #db4a39 0%, #ff8a75 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(26, 32, 44, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Vertical Timeline */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 4rem auto 0;
    padding: 2rem 0;
}

/* Central Line */
.timeline::before {
    content: '';
    position: absolute;
    left: 2rem;
    /* Mobile left-aligned */
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(219, 74, 57, 0.2);
    border-radius: 2px;
}

@media (min-width: 768px) {
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    width: 100%;
}

.timeline-content {
    position: relative;
    width: calc(100% - 4rem);
    left: 4rem;
    padding: 2rem;
}

@media (min-width: 768px) {
    .timeline-item {
        display: flex;
        justify-content: flex-end;
        /* Default right side */
        padding-right: 0;
    }

    .timeline-item:nth-child(even) {
        justify-content: flex-start;
        /* Left side */
    }

    .timeline-content {
        width: 45%;
        left: auto;
        /* Reset */
    }

    /* Dot on the line */
    .timeline-content::before {
        content: '';
        position: absolute;
        top: 2rem;
        width: 16px;
        height: 16px;
        background: #db4a39;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(219, 74, 57, 0.2);
        z-index: 10;
    }

    /* Right side dots */
    .timeline-item:nth-child(odd) .timeline-content::before {
        left: -11.5%;
        /* Adjust based on calc(50% width) gap */
    }

    /* Left side dots */
    .timeline-item:nth-child(even) .timeline-content::before {
        right: -11.5%;
    }

    /* Simplified positioning for dot */
    .timeline-item:nth-child(odd) .timeline-content::before {
        left: -3.5rem;
        /* Approximate based on gap */
    }

    .timeline-item:nth-child(even) .timeline-content::before {
        right: -3.5rem;
    }
}

.timeline-year {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(219, 74, 57, 0.1);
    color: #db4a39;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, minmax(280px, auto));
        /* Increased height for better proportions */
    }

    .bento-span-2 {
        grid-column: span 2;
    }

    .bento-span-3 {
        grid-column: span 3;
    }

    .bento-row-span-2 {
        grid-row: span 2;
    }
}

.bento-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem;
    /* More padding */
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bento-card:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(219, 74, 57, 0.3);
}

.bento-card.center-text {
    align-items: center;
    text-align: center;
}

.bento-card h3 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.bento-card p {
    font-size: 1rem;
    color: rgba(26, 32, 44, 0.8);
    line-height: 1.6;
}

/* Featured Card Highlight */
.bento-highlight {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 238, 0.9) 100%);
}

.bento-highlight::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(219, 74, 57, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.5rem;
    color: #db4a39;
}

.mobile-only-logout {
    display: none;
    /* Hidden by default (Desktop) */
}

/* Use Case Graphics */
.use-case-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* =========================================
   12. RESPONSIVE DESIGN (MOBILE OPTIMIZATION)
   ========================================= */

@media (max-width: 768px) {

    /* --- 1. TYPOGRAPHY & SPACING --- */
    html {
        font-size: 14px;
        /* Scale down base size */
    }

    .container {
        padding: 0 1.5rem;
    }

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

    .hero-content h1 {
        font-size: 2.5rem;
        /* Reduced from 4rem */
    }

    .hero-content p {
        font-size: 1.1rem;
    }

    /* --- 2. GLOBAL NAVIGATION (BOTTOM BAR) --- */
    /* Hide Desktop Nav */
    .nav-links {
        display: none !important;
    }

    /* Unfix Header to save space */
    .glass-header {
        position: absolute;
        /* Scrolls away */
        background: transparent;
        /* Keep transparent */
    }

    /* Hide Top User Menu (Redundant with Bottom Bar) */
    .user-login-item {
        display: none !important;
    }

    /* Bottom Bar Container */
    body::after {
        /* Pseudo-element to create space at bottom so content isn't covered */
        content: '';
        display: block;
        height: 80px;
    }

    .mobile-bottom-nav {
        display: flex !important;
        /* Force show */
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        border-radius: 50px;
        padding: 0.8rem 1.5rem;
        justify-content: space-between;
        align-items: center;
        z-index: 9999;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 500;
        gap: 4px;
        opacity: 0.7;
        transition: all 0.2s;
    }

    .mobile-nav-item.active,
    .mobile-nav-item:hover {
        color: var(--primary-color);
        opacity: 1;
    }

    .mobile-nav-icon {
        width: 24px;
        height: 24px;
        stroke-width: 2px;
    }

    .mobile-only-logout {
        display: block;
        /* Show on mobile */
    }

    /* --- 3. DASHBOARD LAYOUT --- */
    .dashboard-section {
        padding-top: 20px;
        /* Reduced since header is not fixed overlaying it */
        padding-bottom: 100px;
        /* Space for bottom bar */
    }

    .dashboard-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* Horizontal Scroll Sidebar */
    .sidebar {
        width: 100vw;
        margin-left: -1.5rem;
        /* Break container padding */
        margin-right: -1.5rem;
        padding: 1rem 1.5rem;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: sticky;
        top: 0;
        /* Updated: stick to top of viewport now */
        z-index: 900;
    }

    .sidebar-menu {
        display: flex;
        gap: 10px;
        width: max-content;
        /* Ensure items align horizontally */
    }

    .sidebar-item {
        margin-bottom: 0;
    }

    .sidebar-link {
        white-space: nowrap;
        padding: 0.6rem 1.2rem;
        background: #f1f5f9;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    .sidebar-link.active {
        background: var(--primary-color);
        color: white;
    }

    /* --- 4. FORMS & INPUTS --- */
    input,
    select,
    textarea {
        font-size: 16px !important;
        /* Prevent iOS zoom */
    }

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

    /* --- 5. PAGE SPECIFIC --- */
    .bento-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    .bento-span-2,
    .bento-span-3,
    .bento-row-span-2 {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .timeline::before {
        left: 20px;
    }

    .timeline-content {
        width: 100%;
        left: 40px;
        padding: 1.5rem 0;
    }

    .timeline-item:nth-child(even) .timeline-content::before,
    .timeline-item:nth-child(odd) .timeline-content::before {
        left: -28px;
        right: auto;
    }

}

/* Helper Class for Mobile Nav Visibility */
.mobile-bottom-nav {
    display: none;
    /* Hidden on desktop */
}

/* ==============================================
   WAITLIST PAGE STYLES
   ============================================== */
.waitlist-page {
    overflow-x: hidden;
}

.waitlist-hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 50px;
    position: relative;
}

.waitlist-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 900px;
}

.hero-text-center {
    text-align: center;
    max-width: 700px;
}

.eyebrow-accent {
    display: inline-block;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    background: rgba(20, 184, 166, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.waitlist-page h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-subtext {
    font-size: 1.25rem;
    color: rgba(26, 32, 44, 0.8);
    line-height: 1.6;
}

/* --- REFINED WAITLIST FORM --- */
.waitlist-form-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Glass Wrapper around the inputs */
.glass-form-container {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 1rem;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
    width: 100%;
    max-width: 500px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-form-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.inline-input-group {
    display: flex;
    gap: 0.5rem;
}

.waitlist-form .form-status {
    text-align: center;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    min-height: 1.5em;
    /* Prevent jump */
}

#waitlist-email {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    /* Slightly squarer to match btn */
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    transition: all 0.2s ease;
}

#waitlist-email:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.glow-btn {
    padding: 0 2rem;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    background: var(--primary-color);
    /* Fallback */
    background: radial-gradient(circle at center, #0f766e, #0d9488);
    /* Deep Teal Gradient */
    border: none;
    color: #fff;
    box-shadow: 0 4px 6px rgba(13, 148, 136, 0.2);
}

.glow-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(13, 148, 136, 0.3);
}

.glow-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: shine 4s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.loading-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- Social Proof Centered --- */
.social-proof-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    animation: fadeIn 1s ease-out 0.5s forwards;
    /* Slight delay */
    opacity: 0;
}

.avatars-cluster {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    padding: 4px 8px 4px 4px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    border: 2px solid #fff;
    margin-left: -10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar:first-child {
    margin-left: 0;
}

.avatar-count {
    margin-left: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-color);
}

.proof-text {
    font-size: 0.9rem;
    color: rgba(26, 32, 44, 0.6);
}

/* Features/Pain Points */
/* --- STORYBOARD LAYOUT --- */
.story-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 800px;
    margin: 0 auto;
}

.glass-story-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.glass-story-card:hover {
    transform: translateY(-5px);
}

.story-content {
    flex: 1;
}

.story-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(26, 32, 44, 0.5);
    margin-bottom: 0.5rem;
}

.story-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.story-content p {
    font-size: 1.1rem;
    color: rgba(26, 32, 44, 0.7);
    line-height: 1.6;
}

/* Specific Card Styles */
.problem-card {
    border-left: 4px solid #ef4444 !important;
    /* Visual Cue: Danger */
}

.limitation-card {
    border-left: 4px solid #f59e0b !important;
    /* Visual Cue: Warning */
}

.solution-card {
    background: var(--primary-color);
    /* Invert for impact */
    background: radial-gradient(circle at top right, #0d9488, #0f766e);
    color: white;
    border: none;
    box-shadow: 0 20px 50px rgba(13, 148, 136, 0.3);
}

.solution-card .story-label {
    color: rgba(255, 255, 255, 0.7);
}

.solution-card h2,
.solution-card p,
.solution-card .highlight-text {
    color: white;
}

.solution-card .highlight-text {
    background: rgba(255, 255, 255, 0.2);
    padding: 0 5px;
}

/* Visual Badges */
.story-visual {
    flex-shrink: 0;
}

.visual-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    gap: 5px;
}

.visual-badge.bad {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.visual-badge.warn {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.visual-badge.good {
    background: white;
    color: var(--primary-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.badge-icon {
    font-size: 2rem;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .waitlist-page h1 {
        font-size: 2.5rem;
    }

    .waitlist-content {
        gap: 2rem;
    }

    .inline-input-group {
        flex-direction: column;
    }

    .glow-btn {
        width: 100%;
        padding: 1rem;
    }

    /* Stack Story Cards */
    .glass-story-card {
        flex-direction: column-reverse;
        /* Visual on top? Or bottom? Let's keep bottom for flow */
        text-align: center;
        padding: 2rem;
        gap: 1.5rem;
    }

    .story-visual {
        margin: 0 auto;
    }

    .problem-card,
    .limitation-card {
        border-left: none !important;
        border-top: 4px solid;
    }
}