/* Global Styles */
:root {
    --primary-color: #f64f59;
    /* Red-Orange */
    --secondary-color: #ff7b54;
    /* Red-Orange to match theme */
    --accent-color: #ff9966;
    /* Orange */

    /* New Red/Orange Scheme Override */
    --primary-brand: #ff4d4d;
    --secondary-brand: #ff9f43;

    --dark-bg: #0f172a;
    --card-bg: #1e293b;
    --card-bg: rgba(15, 23, 42, 0.8);
    --card-bg-alt: #171122;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --container-width: 1200px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --gradient-main: linear-gradient(135deg, #ff416c, #ff4b2b);
    /* Strong Red Gradient */
    --gradient-glow: linear-gradient(135deg, rgba(255, 65, 108, 0.5), rgba(255, 75, 43, 0.5));
}

.btn-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
    text-shadow: none !important
}

.btn-loading:after {
    content: '';
    -webkit-animation: loader .5s infinite linear;
    animation: loader .5s infinite linear;
    border: 2px solid #fff;
    border-radius: 50%;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    display: block;
    height: 1.4em;
    width: 1.4em;
    position: absolute;
    left: calc(50% - (1.4em / 2));
    top: calc(50% - (1.4em / 2));
    -webkit-transform-origin: center;
    transform-origin: center;
    position: absolute !important
}

@-webkit-keyframes loader {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes loader {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}


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

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

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

input,
button,
textarea,
select {
    font-family: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Utilities */
.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.95rem;
    transition: var(--transition);
    border: none;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1.1rem;
}

.btn-primary {
    background: var(--gradient-main);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 75, 43, 0.5);
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

body.light-mode .btn-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Theme Icon Toggle Logic */
.theme-icon-dark {
    display: none;
}

.theme-icon-light {
    display: block;
}

body.light-mode .theme-icon-dark {
    display: block;
    color: #0f172a;
}

body.light-mode .theme-icon-light {
    display: none;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Top Bar */
.top-bar {
    background: #0b1120;
    /* Very dark slate, neutral */
    padding: 8px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Light Mode Variables */
body.light-mode {
    --dark-bg: #f8fafc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.05);

    /* Slightly adjust gradients for light mode if needed, but primary brand colors can stay */
}

/* Light Mode specific adjustments */
body.light-mode .top-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

body.light-mode .top-links a:hover {
    color: var(--primary-brand);
}

body.light-mode .main-header {
    background: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .main-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .nav-link {
    color: #475569;
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--primary-brand);
}

body.light-mode .logo-text,
body.light-mode .footer-logo-text {
    color: var(--text-main);
}

body.light-mode .cart-btn {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .hero-section {
    background: radial-gradient(circle at 80% 20%, rgba(255, 123, 84, 0.15), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

body.light-mode .hero-bg-glow {
    opacity: 0.8;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

body.light-mode .feature-box:hover {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .service-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

body.light-mode .service-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode .stat-value,
body.light-mode .service-card h3,
body.light-mode .feature-box h4 {
    color: var(--text-main);
}

body.light-mode .phone-mockup {
    border-color: #e2e8f0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(255, 255, 255, 0.5);
}

body.light-mode .notch {
    background: #1e293b;
}

body.light-mode .notch {
    background: #1e293b;
}

/* Global Alert Styles */
.alert {
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.alert i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alert-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
}

body.light-mode .alert-glass {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.alert-info {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

body.light-mode .screen-content {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
}

body.light-mode .app-post {
    background: #dbdbdb;
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .floating-stat {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode footer {
    background: #f1f5f9;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .link-col h5,
body.light-mode .footer-bottom,
body.light-mode .payment-icons {
    color: var(--text-main);
}

body.light-mode .payment-icons {
    color: #334155;
}

body.light-mode .btn-outline {
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

body.light-mode .btn-outline:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .btn-glass {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

body.light-mode .btn-glass:hover {
    background: rgba(255, 255, 255, 0.8);
}

body.light-mode .stat-number {
    color: var(--text-main);
}



/* Light Mode Section Fixes */
body.light-mode .features-section {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .feature-box h4 {
    color: var(--text-main);
}

body.light-mode .feature-box:hover {
    background: #f1f5f9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Service Card Light Mode Glow Fix */
body.light-mode .service-card::after {
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 0, 0, 0.05), transparent 40%);
}

body.light-mode .service-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .services-section {
    background: #f8fafc;
    /* Light gray background for contrast with white cards */
}

body.light-mode .service-card h3 {
    color: #1e293b;
}

body.light-mode .service-sub {
    color: #64748b;
}


.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.announcement {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.announcement i {
    color: var(--secondary-color);
}

.top-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.top-links a {
    color: var(--text-muted);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

.top-links a i {
    color: var(--secondary-color);
    font-size: 1rem;
}

.top-links a:hover {
    color: white;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--text-muted);
}

/* Main Header */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0;
    transition: var(--transition);
}

.main-header.scrolled {
    padding: 10px 0;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Ensure mega menu positions relative to this */
}

.logo {
    text-decoration: none;
}

.logo-text {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.brand-highlight {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--primary-color);
}


.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.mobile-menu-header,
.mobile-nav-footer {
    display: none;
}

/* Mega Menu Styles */
.nav-item.dropdown {
    position: relative;
    /* Reverted to relative as requested */
    padding: 20px 0;
}

/* Navbar needs relative positioning for full-width dropdown control if desired, 
   but since we want container width, we can keep the absolute positioning but adjust logic.
   However, simpler approach for "container width" is using a fixed max-width similar to container. */

.mega-menu {
    position: fixed;
    /* Fixed to viewport for perfect centering */
    top: 85px;
    /* Matches Top bar + Header height approx */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    /* Container width */
    background: #0f172a;
    /* Solid base fallback */
    background: rgba(15, 23, 42, 0.98);
    /* Almost opaque */
    backdrop-filter: blur(40px) saturate(180%);
    /* Apple Glass Effect */
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 990;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Remove hover effect, use .show class instead */
.nav-item.dropdown.show .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-link.active-dropdown {
    color: var(--primary-brand);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none;
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.mega-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.05);
}

.mega-item i {
    font-size: 1.4rem;
    transition: transform 0.3s;
}

.mega-item:hover i {
    transform: scale(1.1);
}

/* Light Mode for Mega Menu */
body.light-mode .mega-menu {
    background: #ffffff;
    /* Solid base */
    background: rgba(255, 255, 255, 0.98);
    /* Almost opaque */
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

body.light-mode .mega-item {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.02);
}

body.light-mode .mega-item:hover {
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Specific icon overrides for light mode if white */
body.light-mode .mega-item i[style*="#ffffff"] {
    color: #000000 !important;
}



.nav-link {
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
}

.nav-link.active,
.nav-link:hover {
    color: white;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-main);
    transition: var(--transition);
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 0.9rem;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: var(--primary-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: radial-gradient(80% 60% at 50% -10%, rgba(40, 55, 80, 0.5) 0%, transparent 100%);
}

.hero-bg-glow {
    position: absolute;
    top: -30%;
    right: -10%;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(246, 79, 89, 0.25) 0%, rgba(15, 23, 42, 0) 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(60px);
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 50px;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 50px;
    color: var(--primary-brand);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

/* Customers Info Trust Badge */
/* Customers Info - Minimal Global */
.customers-info {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    padding: 10px 0;
    /* Minimal vertical padding */
    /* Removed card styling (bg, border, shadow) */
}

.avatar-group {
    display: flex;
    align-items: center;
}

.avatar-group img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #0f172a;
    /* Match hero bg or use transparent if complex */
    margin-left: -15px;
    object-fit: cover;
}

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

.avatar-plus {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-light, #334155);
    border: 3px solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: -15px;
    color: white;
    z-index: 2;
    position: relative;
}


.trust-details {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
}

.trust-stat {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 15px;
}

.trust-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
}

.trust-number {
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
}

.trust-number i {
    font-size: 1rem;
    opacity: 0.9;
}

.trust-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.trust-rating {
    display: flex;
    flex-direction: column;
}

.rating-score {
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.trust-rating .stars {
    display: flex;
    gap: 2px;
    color: #ffd700;
    /* Gold for stars */
    font-size: 0.8rem;
}

/* Specific Colors for Icons */
.stat-icon-orange {
    color: #ff9f43;
}

/* Orange for Transactions */
.stat-icon-green {
    color: #2ecc71;
}

/* Green for Happiness/Check */
.stat-icon-blue {
    color: #3498db;
}

/* Blue for Support */
/* Light Mode Overrides */

body.light-mode .avatar-group img {
    border-color: white;
}

body.light-mode .trust-number,
body.light-mode .rating-score {
    color: var(--text-main);
}



body.light-mode .trust-stat.border-right {
    border-right-color: rgba(0, 0, 0, 0.1);
}

.hero-text .hero-slogan {
    font-size: 3.5rem;
    /* Reduced from 4rem */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    display: block;
}

body.light-mode .hero-text .hero-slogan {
    color: var(--text-main);
}

.hero-text h1.hero-main-title {
    font-size: 1.1rem;
    padding: 10px 20px;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(255, 77, 77, 0.2);
}

.hero-text p {
    font-size: 1rem;
    /* Reduced from 1.1rem */
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 90%;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 50px;
}

.hero-stats {
    display: flex;
    gap: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.hero-visual {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.visual-circle-bg {
    position: absolute;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: pulse-glow 4s ease-in-out infinite;
}

/* Phone Mockup */
.phone-mockup {
    position: relative;
    width: 280px;
    height: 540px;
    background: #0f172a;
    border: 8px solid #334155;
    border-radius: 35px;
    z-index: 5;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.1);
    transform: rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease;
    overflow: hidden;
}

.phone-mockup:hover {
    transform: rotateY(0) rotateX(0);
}

.notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #334155;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 10;
}

.screen-content {
    padding: 40px 15px 15px;
    height: 100%;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* App UI Mockup */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.app-avatar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-avatar {
    width: 35px;
    height: 35px;
    background: linear-gradient(45deg, #f09433, #bc1888);
    border-radius: 50%;
}

.line {
    height: 6px;
    background: #334155;
    border-radius: 3px;
    margin-bottom: 4px;
}

.w-40 {
    width: 60px;
}

.w-60 {
    width: 40px;
}

.app-post {
    flex: 1;
    background: #1e293b;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Subtle pulsing placeholder gradient */
    background: linear-gradient(110deg, #1e293b 8%, #334155 18%, #1e293b 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

.like-overlay {
    position: absolute;
    color: white;
    font-size: 4rem;
    opacity: 0;
    transform: scale(0.5);
    animation: like-pop 2s infinite 1s;
}

.app-actions {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 1.4rem;
}

.left-actions {
    display: flex;
    gap: 15px;
}

.action-icon:hover {
    color: var(--secondary-color);
}

/* Floating Hearts Stream */
.floating-hearts {
    position: absolute;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 200px;
    pointer-events: none;
}

.floating-hearts i {
    position: absolute;
    bottom: 0;
    font-size: 1.5rem;
    color: #e1306c;
    opacity: 0;
    text-shadow: 0 0 10px rgba(225, 48, 108, 0.5);
}

.h1 {
    left: 10px;
    animation: float-up 3s ease-in infinite;
}

.h2 {
    left: -10px;
    animation: float-up 2.5s ease-in infinite 0.5s;
    font-size: 1.2rem;
}

.h3 {
    left: 20px;
    animation: float-up 3.5s ease-in infinite 1.2s;
    font-size: 1rem;
}

/* Stats Cards */
.floating-stat {
    position: absolute;
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
    min-width: 180px;
}

.stat-followers {
    top: 15%;
    left: 0;
    animation: float-y 5s ease-in-out infinite;
}

.stat-likes {
    bottom: 25%;
    right: -20px;
    animation: float-y 6s ease-in-out infinite 1s;
}

.stat-views {
    top: 45%;
    left: -40px;
    animation: float-y 7s ease-in-out infinite 2s;
}

.stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.stat-icon.instagram {
    background: linear-gradient(45deg, #f09433, #bc1888);
}

.stat-icon.tiktok {
    background: black;
}

.stat-icon.youtube {
    background: red;
}

.stat-details {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-weight: 700;
    color: white;
    font-size: 1rem;
}

.stat-name {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stat-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.stat-badge.success {
    background: rgba(244, 63, 94, 0.2);
    color: #f43f5e;
}

.stat-graph {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 15px;
    margin-left: auto;
}

.stat-graph span {
    width: 3px;
    background: #10b981;
    animation: graph-anim 1s infinite ease-in-out alternate;
}

.stat-graph span:nth-child(1) {
    height: 40%;
    animation-delay: 0.1s;
}

.stat-graph span:nth-child(2) {
    height: 80%;
    animation-delay: 0.3s;
}

.stat-graph span:nth-child(3) {
    height: 60%;
    animation-delay: 0.2s;
}

.stat-graph span:nth-child(4) {
    height: 100%;
    animation-delay: 0.4s;
}

/* Animations */
@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes like-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    20% {
        transform: scale(1.2);
        opacity: 1;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1.2);
        opacity: 0;
    }
}

@keyframes float-y {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.15;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

@keyframes graph-anim {
    0% {
        height: 20%;
    }

    100% {
        height: 100%;
    }
}

/* Services Section */
.services-section {
    padding: 100px 0;
    background: #0f172a;
    /* Keep dark */
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle {
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    /* Bigger gaps for cleaner look */
}

.service-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    /* Slightly tighter radius */
    padding: 25px 20px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Anchor Props */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Minimal Glow on Hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 0;
}

.service-card:hover::after {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.service-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;

    /* REVISED: Colorful by default */
    background: var(--hover-color);
    color: var(--color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: none;

    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Icon Hover Effect - Adjusted */
.service-card:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 10px 25px var(--hover-color-glow, var(--hover-color));
    filter: brightness(1.1);
    /* Slightly brighter on hover */
}

/* Adjust glow opacity for shadow */
/* Adjust glow opacity for shadow */
.service-card[style*="--hover-color"] {
    --hover-color-glow: color-mix(in srgb, var(--hover-color), transparent 40%);
}

/* Light Mode Icon Fix */
body.light-mode .service-icon {
    background: var(--hover-color) !important;
    color: var(--color) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-card h3 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    color: var(--text-main);
    z-index: 1;
    font-weight: 600;
}

.service-card .service-sub {
    color: var(--text-muted);
    font-size: 0.8rem;
    z-index: 1;
    margin-bottom: 15px;
    opacity: 0.7;
}

.service-link {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
    z-index: 1;
    width: 100%;
    max-width: 120px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* Added for span */
    text-align: center;
}

.service-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hover-color);
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.service-card:hover .service-link {
    border-color: transparent;
    color: white;
    /* Text turns white on colored bg */
}

.service-card:hover .service-link::before {
    opacity: 1;
}

/* Light mode adjustments for these specific cards */
body.light-mode .service-icon {
    background: rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .service-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Features Section */
.features-section {
    padding: 60px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.5);
}

.features-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    padding: 20px;
    border-radius: 15px;
    transition: var(--transition);
}

.feature-box:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2rem;
    color: var(--primary-color);
    transition: var(--transition);
}

.feature-box:hover .feature-icon {
    transform: scale(1.1);
    text-shadow: 0 0 15px var(--primary-color);
}

.feature-box h4 {
    color: white;
    font-size: 1.1rem;
}

.feature-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Testimonials Swiper Redesign */
.testimonials-section {
    padding: 100px 0;
    background: #0f172a;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.testimonials-slider {
    padding: 20px 10px 60px;
    /* Space for shadow and pagination */
}

.review-card-modern {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 30px;
    height: 100%;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-card-modern:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.platform-icon i {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.review-card-modern:hover .platform-icon i {
    color: var(--primary-brand);
}


/* Trust Score Badge Coloring */
.trust-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 159, 67, 0.1);
    border: 1px solid rgba(255, 159, 67, 0.2);
    padding: 10px 25px;
    border-radius: 50px;
    margin-top: 25px;
}

.score-stars {
    color: #ff9f43;
    /* Bright Orange for Stars */
    font-size: 1.2rem;
    display: flex;
    gap: 4px;
}

.card-body .stars {
    color: #ff9f43;
    /* Consistent Orange Stars in Cards */
    font-size: 1rem;
    margin-bottom: 15px;
    display: flex;
    gap: 3px;
}

.review-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--primary-brand);
    width: 20px;
    border-radius: 10px;
    transition: all 0.3s;
}

/* Light Mode Overrides */
body.light-mode .review-card-modern {
    background: white;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

body.light-mode .review-card-modern:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-brand);
}

body.light-mode .platform-icon i {
    color: rgba(0, 0, 0, 0.1);
}

body.light-mode .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.1);
}

body.light-mode .swiper-pagination-bullet-active {
    background: var(--primary-brand);
}

/* Re-using avatars but cleaner */
.letter-avatar {
    width: 45px;
    height: 45px;
    background: var(--primary-brand);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.letter-avatar.bg-1 {
    background: linear-gradient(135deg, #FF9966, #FF5E62);
}

.letter-avatar.bg-2 {
    background: linear-gradient(135deg, #56CCF2, #2F80ED);
}

.letter-avatar.bg-3 {
    background: linear-gradient(135deg, #11998e, #38ef7d);
}

.letter-avatar.bg-4 {
    background: linear-gradient(135deg, #8E2DE2, #4A00E0);
}

.letter-avatar.bg-5 {
    background: linear-gradient(135deg, #F2994A, #F2C94C);
}

.reviewer-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.reviewer-name {
    font-weight: 700;
    color: white;
    font-size: 1.1rem;
}


/* Influencers Section */
.influencers-section {
    padding: 100px 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: radial-gradient(circle at 20% 20%, rgba(255, 94, 98, 0.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 153, 102, 0.15), transparent 40%),
        linear-gradient(to bottom, #0f172a, #1a1e2e);
    overflow: hidden;
}

/* Decorative background blur */
.influencers-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Influencer Layout (Split) */
.influencer-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

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

.influencer-content h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 20px;
}

.secondary-desc {
    margin-top: 15px;
    font-size: 1rem;
    opacity: 0.7;
    line-height: 1.6;
}



/* Video Stack Container */
.influencer-visuals {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.video-stack-container {
    position: relative;
    width: 300px;
    height: 533px;
    /* 9:16 aspect ratio base */
}

/* Common Card Styles in Stack */
.influencer-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Removed radius and border as requested */
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    background: #000;
}

/* Card Positioning - Spaced out more */
/* Card Positioning - Spaced out more */
.card-back {
    transform: translateX(180px) translateY(20px) rotate(6deg) scale(0.95);
    z-index: 1;
    opacity: 0.8;
    filter: brightness(0.7);
    cursor: pointer;
}

.card-back:hover {
    transform: translateX(190px) translateY(10px) rotate(8deg) scale(0.95);
    filter: brightness(1);
    opacity: 1;
    z-index: 3;
}

.card-front {
    transform: translateX(-60px) rotate(-3deg);
    z-index: 2;
}

.card-front:hover {
    transform: translateX(-70px) rotate(-3deg) scale(1.05);
    box-shadow: 0 40px 80px rgba(255, 94, 98, 0.3);
    z-index: 4;
}



.influencer-card:hover::after {
    opacity: 1;
}

.video-preview-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.3s;
}

.influencer-card:hover .play-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.play-btn-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s;
}

.influencer-card:hover .play-btn-circle {
    transform: scale(1.1);
    background: var(--primary-brand);
    border-color: var(--primary-brand);
}

.influencer-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    text-align: center;
}

.influencer-info-overlay h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 700;
}

.influencer-info-overlay span {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Video Modal */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.modal-content {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background: black;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-modal.active .modal-content {
    transform: scale(1);
}

.video-container {
    width: 100%;
    height: 100%;
}

.video-container video {
    width: 100%;
    height: 100%;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.close-modal:hover {
    background: var(--primary-brand);
}

/* Light Mode Overrides for Influencers */
body.light-mode .influencers-section {
    background: radial-gradient(circle at 20% 20%, rgba(255, 94, 98, 0.05), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 153, 102, 0.05), transparent 40%),
        linear-gradient(to bottom, #ffffff, #f0fdf4);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

body.light-mode .influencers-section::before {
    opacity: 0.4;
    /* Make noise more visible on light if needed or keep subtle */
    mix-blend-mode: multiply;
}

body.light-mode .influencer-card {
    border-color: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode .influencer-info-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

/* Correcting modal aspect ratio for vertical videos if needed, 
   but usually player handles it. We can set max-height to viewport */
.modal-content {
    max-height: 90vh;
}

body.light-mode .reviewer-name {
    color: var(--text-main);
}



.review-rating {
    color: #ffb400;
}

.review-text {
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.6;
}

.verified-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #10b981;
    font-size: 0.85rem;
    margin-top: auto;
    font-weight: 500;
}

/* FAQ Section */
/* FAQ Section */
.faq-section {
    position: relative;
    padding: 100px 0;
    /* Stylish Dark Gradient & Glow */
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 70%),
        linear-gradient(to bottom, #0f172a 0%, #1e293b 100%);
    overflow: hidden;
}

/* Ambient Glow Element */
.faq-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.1) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.faq-section .container {
    position: relative;
    z-index: 1;
}

/* FAQ Section Redesign - Minimal & Elegant */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    /* Wider columns */
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

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

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    /* Very subtle fill */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.light-mode .faq-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.03);
}

body.light-mode .faq-item:hover {
    border-color: rgba(0, 0, 0, 0.1);
    background: #ffffff;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
}

.faq-item.active {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1);
    /* Subtle primary glow */
}

body.light-mode .faq-item.active {
    background: #ffffff;
    border-color: var(--primary-color);
}

.faq-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-header h3 {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-main);
    transition: color 0.3s ease;
}

.faq-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

body.light-mode .faq-icon {
    background: rgba(0, 0, 0, 0.05);
}

.faq-item.active .faq-header h3 {
    color: var(--primary-color);
}

.faq-item.active .faq-icon {
    background: var(--primary-color);
    color: white;
    transform: rotate(45deg);
    /* Or 180deg if arrow */
}

.faq-body {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.faq-item.active .faq-body {
    padding-bottom: 24px;
    opacity: 1;
    /* max-height handled via JS usually, but here we can rely on JS setting height or use a large value if pure css structure allow, 
       but existing script likely toggles 'active' class. We need JS to set max-height for smooth slide or use grid trick.
       Assuming existing JS toggles 'active' class on .faq-item.
       The previous CSS used max-height transition. Let's keep it. */
    max-height: 500px;
}

.faq-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
    padding-top: 10px;
    /* Space from title */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

body.light-mode .faq-body p {
    border-top-color: rgba(0, 0, 0, 0.05);
}

/* Light Mode Overrides for FAQ & Reviews */
body.light-mode .testimonials-section {
    background: #f8fafc;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

body.light-mode .review-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

body.light-mode .reviewer-name {
    color: var(--text-main);
}

body.light-mode .review-text {
    color: #475569;
}

body.light-mode .trust-score-badge {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .faq-section {
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
        linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}

body.light-mode .faq-section::before {
    background: radial-gradient(circle, rgba(255, 77, 77, 0.05) 0%, transparent 60%);
    opacity: 0.8;
}

body.light-mode .faq-item {
    background: #f8fafc;
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .faq-question h3 {
    color: var(--text-main);
}

body.light-mode .faq-answer {
    color: #475569;
    border-top-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .faq-item.active {
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* Footer */
.main-footer {
    background: #0b1120;
    padding: 80px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-logo-text {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    display: inline-block;
    margin-bottom: 20px;
    text-decoration: none;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand p {
    margin-top: 20px;
    color: var(--text-muted);
    max-width: 350px;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-muted);
    transition: var(--transition);
    font-size: 1.2rem;
}

.footer-social a:hover {
    background: var(--gradient-main);
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(246, 79, 89, 0.3);
}

body.light-mode .footer-social a {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

body.light-mode .footer-social a:hover {
    color: white;
    background: var(--gradient-main);
    box-shadow: 0 8px 20px rgba(246, 79, 89, 0.4);
}

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

.link-col h5 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.link-col a {
    display: block;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.link-col a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.payment-icons {
    display: flex;
    gap: 15px;
    font-size: 2rem;
    color: white;
}





/* Auth Modal Styles */
.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: 20px;
}

.auth-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.auth-modal-content {
    background: var(--card-bg);
    width: 100%;
    max-width: 900px;
    height: 600px;
    /* Fixed height for consistent look */
    border-radius: 30px;
    /* Oval shape requested */
    display: flex;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--glass-border);
}

.auth-modal-overlay.active .auth-modal-content {
    transform: scale(1);
}

.close-auth-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-auth-modal:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(90deg);
}

.auth-modal-left {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: var(--card-bg);
}

/* Button Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    /* Hide text */
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.8s linear infinite;
}

/* Ensure spinner is visible on light backgrounds if needed, though usually buttons are colored/dark */
body.light-mode .btn-loading::after {
    /* If button is white/light, change spinner color. Assuming primary buttons are colored. */
}

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

.auth-modal-right {
    flex: 0.9;
    position: relative;
    background: #000;
}

.auth-modal-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.auth-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: white;
    z-index: 2;
}

.auth-image-overlay h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.auth-image-overlay p {
    font-size: 0.95rem;
    opacity: 0.8;
}

.auth-form-container {
    display: none;
    animation: fadeIn 0.4s ease;
}

.auth-form-container.active {
    display: block;
}

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

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

.auth-header {
    margin-bottom: 30px;
}

.auth-header h2 {
    font-size: 2rem;
    color: var(--text-main);
    margin-bottom: 5px;
}

.auth-header p {
    color: var(--text-muted);
}

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

.auth-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-form input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-family: inherit;
    transition: all 0.3s;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    margin-top: -10px;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    margin-bottom: 0 !important;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    height: 18px;
    width: 18px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    transition: all 0.2s;
}

.custom-checkbox input:checked~.checkmark {
    background-color: var(--primary-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.form-options a {
    color: var(--primary-color);
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 1rem;
    margin-top: 10px;
}

.auth-footer {
    margin-top: 25px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--primary-color);
    font-weight: 500;
}

/* Light Mode Overrides for Auth Modal */
body.light-mode .auth-modal-content {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .auth-form input {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-mode .auth-form input:focus {
    background: #ffffff;
    border-color: var(--primary-color);
}

body.light-mode .close-auth-modal {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

body.light-mode .close-auth-modal:hover {
    background: var(--primary-color);
    color: white;
}

body.light-mode .checkmark {
    background-color: #e2e8f0;
}



.minimal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.minimal-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: rgba(30, 41, 59, 0.4);
    /* Glassy Dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on hover */
.minimal-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.minimal-card:hover::before {
    transform: translateX(100%);
}

.minimal-card:hover {
    transform: translateY(-5px);
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--bg, #e1306c);
    color: var(--color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.minimal-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bg);
    color: var(--color);
    flex-shrink: 0;
    transition: all 0.3s;
}

.minimal-card:hover .minimal-icon-box {
    transform: scale(1.1) rotate(5deg);
    background: var(--bg, #e1306c);
    color: white;
}

.minimal-content {
    flex: 1;
}

.minimal-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.3;
}

.minimal-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.8;
    margin: 0;
    font-weight: 500;
}

.minimal-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: all 0.3s;
    opacity: 0.6;
}

.minimal-card:hover .minimal-arrow {
    opacity: 1;
    border-color: var(--bg);
    color: var(--bg);
    transform: translateX(5px);
}

/* Light Mode Overrides for Category */
body.light-mode .minimal-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

body.light-mode .minimal-card:hover {
    background: #ffffff;
    border-color: var(--bg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

body.light-mode .category-hero h1 {
    background: linear-gradient(to right, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-mode .category-hero p {
    color: #e2e8f0;
}

.breadcrumb-wrapper {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.3);
    backdrop-filter: blur(5px);
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    /* Hide scrollbar for cleaner look if desired, but functionality remains */
    -webkit-overflow-scrolling: touch;
}

.breadcrumb-list::-webkit-scrollbar {
    height: 4px;
}

.breadcrumb-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

body.light-mode .breadcrumb-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    padding-top: 20px;
}

.product-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.product-card.best-seller {
    border-color: var(--primary-color);
    box-shadow: 0 0 20px rgba(246, 79, 89, 0.1);
}

.product-card.best-seller:hover {
    box-shadow: 0 15px 40px rgba(246, 79, 89, 0.2);
}

.badge-best-seller {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-main);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 10px rgba(246, 79, 89, 0.4);
    z-index: 2;
    white-space: nowrap;
}

.badge-discount {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(16, 185, 129, 0.15);
    /* Green tint */
    color: #10b981;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
}

.product-header {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
}

.platform-icon {
    font-size: 2rem;
    color: #E1306C;
    /* Instagram Color default */
    margin-bottom: 5px;
}

.product-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    color: var(--text-main);
}

.product-title span {
    display: block;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

.product-features {
    margin-bottom: 25px;
    flex: 1;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.feature-row i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.product-pricing {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0.7;
}

.current-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -1px;
}

.current-price small {
    font-size: 1rem;
    font-weight: 500;
    margin-left: 2px;
}

.product-actions .btn {
    border-radius: 12px;
    font-weight: 600;
}

/* Light Mode for Products */
body.light-mode .product-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

body.light-mode .product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-brand);
}

body.light-mode .feature-row {
    color: #475569;
}

body.light-mode .current-price {
    color: #0f172a;
}


.breadcrumb-list li {
    display: flex;
    align-items: center;
}

.breadcrumb-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    transition: var(--transition);
    font-weight: 500;
}

.breadcrumb-list a:hover {
    color: var(--primary-color);
}

.breadcrumb-list .separator {
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
}

.breadcrumb-list .active {
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* Light Mode for Breadcrumb */
body.light-mode .breadcrumb-wrapper {
    background: #f8fafc;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .breadcrumb-list .separator {
    color: rgba(0, 0, 0, 0.2);
}

body.light-mode .breadcrumb-list .active {
    color: #1e293b;
}

/* Modern Product Grid Styles */
.product-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.product-card-modern {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 25px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

.product-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #8a3ab9);
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card-modern:hover::before {
    opacity: 1;
}

.product-card-modern:hover {
    transform: translateY(-8px);
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Header */
.modern-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.platform-logo {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.platform-logo.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

.plan-info {
    display: flex;
    flex-direction: column;
}

.plan-qty {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    color: var(--text-main);
    letter-spacing: -0.5px;
    color: white;
}

.plan-type {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Body (Features) */
.modern-card-body {
    flex: 1;
    margin-bottom: 25px;
}

.modern-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modern-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.modern-features li i {
    color: #10b981;
    font-size: 1.2rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    padding: 2px;
}

/* Footer & Pricing */
.modern-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.price-wrapper {
    display: flex;
    flex-direction: column;
}

.old-price-sm {
    font-size: 0.85rem;
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 2px;
}

.current-price-lg {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.current-price-lg span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

.btn-modern-buy {
    background: white;
    color: black;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-modern-buy:hover {
    background: #e1306c;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(225, 48, 108, 0.3);
}

.btn-modern-buy i {
    transition: transform 0.3s;
}

.btn-modern-buy:hover i {
    transform: translateX(4px);
}

/* Best Seller Badge */
.modern-badge-best {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 159, 67, 0.1);
    color: #ff9f43;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 30px;
    border: 1px solid rgba(255, 159, 67, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

/* Light Mode Overrides */
body.light-mode .product-card-modern {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03);
}

body.light-mode .product-card-modern::before {
    opacity: 1;
    /* Always show gradient line in light mode */
}

body.light-mode .product-card-modern:hover {
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.08);
}

body.light-mode .plan-qty {
    color: #0f172a;
}

body.light-mode .current-price-lg {
    color: #0f172a;
}

body.light-mode .btn-modern-buy {
    background: #0f172a;
    color: white;
}

body.light-mode .btn-modern-buy:hover {
    background: #e1306c;
    color: white;
}

/* --- Products Page V2 Styling --- */

/* Hero V2 */
.products-hero-v2 {
    padding: 100px 0 60px;
    background: radial-gradient(circle at top center, rgba(30, 41, 59, 0.4), transparent 70%);
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    text-align: center;
    /* Ensure centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.products-hero-v2 .hero-title {
    font-size: 2.5rem;
}


.hero-glow-effect {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(225, 48, 108, 0.15), transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: var(--primary-brand);
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1.1;
    background: linear-gradient(to bottom, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Trust Badge (Hero) */
/* Trust Badge (Hero) */
.hero-trust-wrapper {
    background: rgba(255, 255, 255, 0.03);
    /* More minimal bg */
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 20px;
    /* Reduced padding */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s;
}

.hero-trust-wrapper:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.trust-score {
    font-size: 1.25rem;
    /* Reduced size */
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -0.5px;
}

.trust-stars {
    display: flex;
    gap: 2px;
    color: #fbbf24;
    font-size: 1rem;
    /* Reduced size */
}

.trust-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
    margin-left: 4px;
    line-height: 1.2;
    text-align: left;
}

.trust-text strong {
    display: block;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Light Mode Overrides for Trust Badge */
body.light-mode .hero-trust-wrapper {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .trust-score {
    color: #0f172a !important;
}

body.light-mode .trust-text {
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .trust-text strong {
    color: #0f172a;
}

body.light-mode .trust-text {
    border-left-color: rgba(0, 0, 0, 0.1) !important;
}

/* Grid V2 */
.product-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* Card V2 - Ultra Clean */
.product-card-v2 {
    background: #0f172a;
    /* Deep Slate */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-card-v2:hover {
    transform: translateY(-5px);
    border-color: rgba(225, 48, 108, 0.5);
    /* Brand color highlight */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Featured glow */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(225, 48, 108, 0.1), transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.product-card-v2.featured-card {
    border-color: rgba(225, 48, 108, 0.3);
    background: linear-gradient(to bottom, rgba(225, 48, 108, 0.03), #0f172a);
}

.product-card-v2:hover .card-glow {
    opacity: 1;
}

.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e1306c;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

/* Top Content */
.card-top-content {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.icon-circle {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    transition: 0.3s;
}

.product-card-v2:hover .icon-circle {
    background: #e1306c;
    border-color: #e1306c;
    color: white;
}

.qty-display h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin: 0;
}

.qty-display span {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Divider */
.card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
    margin-bottom: 25px;
}

/* Features */
.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    flex: 1;
    /* Push price down */
}

.card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.card-features li i {
    color: #10b981;
    /* Success Green */
    font-size: 1.1rem;
}

/* Pricing */
.card-price-area {
    margin-bottom: 20px;
}

.old-price-v2 {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.6;
    height: 20px;
    /* Keep layout consistent */
}

.current-price-v2 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
}

.current-price-v2 span {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}

/* Button */
.btn-card-v2 {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-weight: 600;
    transition: 0.3s;
    text-decoration: none;
}

.btn-card-v2:hover {
    background: white;
    color: black;
    border-color: white;
}

/* Light Mode Overrides for V2 */
body.light-mode .products-hero-v2 {
    background: radial-gradient(circle at top center, #f1f5f9, transparent 70%);
}

body.light-mode .hero-title {
    background: linear-gradient(to bottom, #0f172a, #475569);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .hero-badge {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .product-card-v2 {
    background: white;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

body.light-mode .product-card-v2:hover {
    border-color: #e1306c;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

body.light-mode .product-card-v2.featured-card {
    background: #fff;
    border-color: rgba(225, 48, 108, 0.3);
}

body.light-mode .icon-circle {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .product-card-v2:hover .icon-circle {
    background: #e1306c;
    color: white;
}

body.light-mode .qty-display h3 {
    color: #0f172a;
}

body.light-mode .card-divider {
    background: #e2e8f0;
}

body.light-mode .current-price-v2 {
    color: #0f172a;
}

body.light-mode .btn-card-v2 {
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .btn-card-v2:hover {
    background: #0f172a;
    color: white;
    border-color: #0f172a;
}

/* Minimalist Varied Backgrounds (Cycle through 5 tints) */
/* V2 Grid Spacing */
.product-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding-bottom: 80px;
    /* Suggestion: Add space at bottom */
}

/* Base card adjustment for minimalism */
.product-card-v2 {
    border: 1px solid rgba(255, 255, 255, 0.03);
    /* Lighter border */
    background: #0f172a;
    /* Fallback */
}

/* Subtle Gradient / Tint Cycling */
.product-card-v2:nth-child(5n+1) {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
}

.product-card-v2:nth-child(5n+2) {
    background: linear-gradient(180deg, rgba(51, 65, 85, 0.4), rgba(15, 23, 42, 0.8));
}

.product-card-v2:nth-child(5n+3) {
    background: linear-gradient(180deg, rgba(71, 85, 105, 0.4), rgba(15, 23, 42, 0.8));
}

.product-card-v2:nth-child(5n+4) {
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.2), rgba(15, 23, 42, 0.8));
}

.product-card-v2:nth-child(5n+5) {
    background: linear-gradient(180deg, rgba(88, 28, 135, 0.2), rgba(15, 23, 42, 0.8));
}

/* Highlight Featured Card slightly more */
.product-card-v2.featured-card {
    background: linear-gradient(180deg, rgba(225, 48, 108, 0.15), rgba(15, 23, 42, 0.9));
    border-color: rgba(225, 48, 108, 0.3);
    transform: scale(1.02);
    /* Pop out slightly */
}

/* Button Minimal Adjustment */
.btn-card-v2 {
    border-radius: 8px;
    /* Slightly sharper */
    font-size: 0.85rem;
    padding: 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Light Mode Tint Adjustments */
body.light-mode .product-card-v2:nth-child(n) {
    background: white;
    /* Clean white for light mode usually looks best, but we can add subtle tints */
}

body.light-mode .product-card-v2:nth-child(5n+1) {
    background: linear-gradient(180deg, #f8fafc, #ffffff);
}

body.light-mode .product-card-v2:nth-child(5n+2) {
    background: linear-gradient(180deg, #f1f5f9, #ffffff);
}

body.light-mode .product-card-v2:nth-child(5n+3) {
    background: linear-gradient(180deg, #e2e8f0, #ffffff);
}

body.light-mode .product-card-v2:nth-child(5n+4) {
    background: linear-gradient(180deg, #eff6ff, #ffffff);
}

body.light-mode .product-card-v2:nth-child(5n+5) {
    background: linear-gradient(180deg, #f3e8ff, #ffffff);
}

body.light-mode .product-card-v2.featured-card {
    background: linear-gradient(180deg, #fff1f2, #ffffff);
    border-color: #fda4af;
}

/* --- New V2 Button Group & Icon Styles --- */

/* Colored Platform Icon */
.platform-icon-v2 {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.platform-icon-v2.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}

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

/* Button Group */
.card-actions-v2 {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-action-v2 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    padding: 10px 0;
    /* Vertical padding */
    font-size: 0.8rem;
    /* Smaller font to fit */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    text-transform: uppercase;
    overflow: hidden;
    /* Ensure text truncate works */
}

/* Cart Button (Secondary) */
.btn-cart {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-cart:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Buy Button (Primary) */
.btn-buy {
    background: white;
    color: black;
}

.btn-buy:hover {
    background: #e1306c;
    color: white;
    border-color: #e1306c;
}

/* Light Mode Overrides for New Elements */
body.light-mode .btn-cart {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

body.light-mode .btn-cart:hover {
    background: #e2e8f0;
    color: #0f172a;
}

body.light-mode .btn-buy {
    background: #0f172a;
    color: white;
}

/* --- Package Card Style (User Requested) --- */

.modern-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.package-card {
    position: relative;
    background: white;
    /* Light mode default, will override for dark */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Badge Styles */
.package-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: white;
    white-space: nowrap;
    text-transform: uppercase;
}

.badge i {
    margin-right: 4px;
    font-size: 10px;
}

.badge-popular {
    background: linear-gradient(45deg, #ffb74d, #ffca7a);
    box-shadow: 0 4px 10px rgba(255, 183, 77, 0.4);
}

.badge-discount {
    background: linear-gradient(45deg, #ff5252, #ff7676);
    box-shadow: 0 4px 10px rgba(255, 82, 82, 0.4);
}

/* Package Header */
.package-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.package-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 16px;
    margin-right: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Neutral shadow, or use variable */
}

.package-icon i {
    font-size: 28px;
    color: var(--color);
}

.package-info {
    flex: 1;
}

.package-category {
    color: #7e84a3;
    font-size: 14px;
    margin: 0 0 2px 0;
    font-weight: 500;
}

.package-name {
    color: #252631;
    font-size: 20px;
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
}

/* Pricing */
.package-pricing {
    margin-bottom: 25px;
}

.price-tag {
    display: flex;
    flex-direction: row;
    /* Layout side-by-side */
    align-items: center;
    gap: 8px;
    /* Space between prices */
}

.current-price {
    font-size: 24px;
    font-weight: 800;
    color: #252631;
    display: flex;
    align-items: baseline;
    line-height: 1;
}

.old-price {
    font-size: 14px;
    color: #9e9e9e;
    text-decoration: line-through;
    opacity: 0.8;
    margin: 0;
    /* Align perfectly */
}

/* Divider */
.package-divider {
    height: 1px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03));
    margin: 5px 0 20px;
}

/* Features List */
.package-features {
    margin-bottom: 25px;
    flex: 1;
    /* Push footer down */
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    color: #3e4265;
    font-size: 14px;
    line-height: 1.5;
}

/* Feature Check Icon */
.feature-list li i {
    color: #10b981;
    /* Keep green or change to #e1306c for pink */
    font-size: 16px;
    margin-right: 10px;
}

/* Action Buttons */
.package-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.package-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
    height: 44px;
}

.package-actions .btn i {
    margin-right: 6px;
    font-size: 16px;
}

.btn-buy-now i {
    color: white !important;
}

/* Add to Cart - Theme Soft Style */
/* Add to Cart - Solid Static Color */
.btn-add-cart {
    background-color: #334155;
    /* Solid Slate-700 */
    color: #e2e8f0;
    border: 1px solid #475569;
}

.btn-add-cart:hover {
    background-color: #475569;
    /* Lighter Slate */
    color: white;
    transform: translateY(-2px);
}

/* Buy Now - Solid Static Color */
.btn-buy-now {
    background: #e1306c;
    /* Solid Instagram Pink */
    color: white;
    box-shadow: 0 4px 15px rgba(225, 48, 108, 0.35);
}

.btn-buy-now:hover {
    background: #cc2366;
    /* Darker Pink on Hover */
    box-shadow: 0 6px 20px rgba(225, 48, 108, 0.5);
    transform: translateY(-2px);
    color: white;
}

/* Light Mode Button Overrides */
body.light-mode .btn-add-cart {
    background-color: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

body.light-mode .btn-add-cart:hover {
    background-color: #e2e8f0;
    color: #0f172a;
}


/* --- DARK MODE OVERRIDES (CRITICAL FOR THEME) --- */
/* By default the theme is dark, so usually we'd write dark first. 
   But since I pasted your white-card CSS, I'll override for the actual dark theme here. */

/* Assuming 'body' has default background color from main style, 
   we need to adjust the card itself for the dark background. */

/* Wait, style.css usually defines dark mode as default and light mode with .light-mode class 
   OR vice versa depending on implementation. 
   Checking existing code: .light-mode class exists. So default is DARK.
   The CSS I pasted above is LIGHT by default. 
   I must invert it for the default dark theme, or wrap the above in .light-mode and write dark styles.
   
   Let's wrap the above white styles in .light-mode selector for safety and better integration?
   No, user pasted it as is. 
   I will add the DARK overrides at the bottom which apply when body DOES NOT have light-mode (or simpler, just apply styles for dark logic).
*/

.package-card {
    background: rgba(15, 23, 42, 0.6);
    /* Darker, deeper glass to contrast with glow */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.package-card:hover {
    transform: translateY(-5px);
    background: rgba(15, 23, 42, 0.8);
    border-color: var(--platform-color, #e1306c);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.package-name {
    color: #f8fafc;
}

.package-category {
    color: #94a3b8;
}

.feature-list li {
    color: #cbd5e1;
}

.current-price {
    color: #f8fafc;
}

.package-divider {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}

/* Light Mode Specifics (To match the user's white card request exactly when in light mode) */
body.light-mode .package-card {
    background: white;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

body.light-mode .package-name {
    color: #252631;
}

body.light-mode .package-category {
    color: #7e84a3;
}

body.light-mode .feature-list li {
    color: #3e4265;
}

body.light-mode .current-price {
    color: #252631;
}

body.light-mode .package-divider {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.03));
}

/* --- Products V2 Concept Design (Sidebar + List) --- */

.concept-section {
    padding: 60px 0;
    /* Reduced from 100px */
    position: relative;
    overflow: hidden;
    /* For glow containment */
}

/* Ambient Glow Effect */
.concept-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(225, 48, 108, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

.concept-wrapper {
    position: relative;
    /* Above glow */
    z-index: 1;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 40px;
    align-items: start;
}

/* Add Category Grid Styles nearby or at distinct location? existing location is likely minimal-card area. 
   But user asked for glow. I can just share the rule above. 
   And ensure parent class has position relative. 
*/
.category-grid-section {
    position: relative;
    overflow: hidden;
    padding: 60px 0;
    /* Match concept section if appropriate or keep existing padding? File showed no inline style. */
}

.minimal-grid {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    /* --- 1. UNIFIED MAGAZINE HERO HEADER --- */

    .concept-section {
        padding: 0;
        /* Remove padding for immersive header */
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Hide default header text, we will show it in hero or keep it minimal */
    .content-header {
        position: absolute;
        z-index: 10;
        top: 20px;
        left: 20px;
        text-align: left;
        margin: 0 !important;
        width: auto;
    }

    .concept-title {
        font-size: 1.6rem;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }

    .concept-subtitle {
        display: none;
        /* Too much text for top */
    }

    .concept-wrapper {
        display: block;
    }

    /* Hero Container (Sidebar) */
    .concept-sidebar {
        order: 1;
        position: relative !important;
        width: 100vw;
        /* Full Viewport Width */
        margin-left: -50vw;
        left: 50%;
        margin-bottom: 20px;
        height: 320px;
        /* Fixed Header Height */
        overflow: hidden;
    }

    .concept-image-container {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0;
        /* Full Bleed */
        margin: 0;
        aspect-ratio: auto;
    }

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

    .concept-img-overlay {
        background: linear-gradient(to top, #0f172a 10%, transparent 80%);
        align-items: flex-end;
        padding: 20px;
    }

    /* Hide the old "Premium Hizmet" overlay text if it conflicts with H1 */
    .concept-img-overlay h3 {
        display: none;
    }

    /* Features INSIDE Hero (Glassy Grid at Bottom) */
    .concept-features {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        z-index: 20;
    }

    .features-title {
        display: none;
    }

    .concept-feature-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 Column Short Features */
        gap: 8px;
        padding: 0;
        margin: 0;
    }

    .concept-feature-list li {
        margin: 0;
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        backdrop-filter: blur(5px);
    }

    .concept-feature-list li .icon-box {
        width: 18px;
        height: 18px;
        font-size: 0.8rem;
        background: transparent;
        color: #fbbf24;
        border: none;
        box-shadow: none;
    }

    .concept-feature-list div strong {
        font-size: 0.75rem;
        color: white;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .concept-feature-list div small {
        display: none;
    }


    /* --- 2. 2-COLUMN PRODUCT GRID --- */

    .concept-content {
        order: 2;
        width: 100%;
        padding-bottom: 40px;
    }

    .package-list-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Mobile Card Style (Square Vertical) */
    .package-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 10px;
        gap: 8px;
        background: rgba(30, 41, 59, 0.6);
        border-radius: 14px;
        height: 100%;
        /* Equal Height */
        justify-content: space-between;
    }

    .row-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
        top: 8px;
        right: 8px;
    }

    .pkg-info {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        justify-content: center;
    }

    .pkg-icon-wrap {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        border-radius: 12px;
        margin-bottom: 5px;
    }

    .pkg-details {
        align-items: center;
        width: 100%;
    }

    .pkg-details h3 {
        font-size: 0.9rem;
        line-height: 1.3;
        height: 2.6em;
        /* Limit 2 lines roughly */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 2px;
    }

    .pkg-platform {
        display: none;
    }

    /* Too cluttered */

    .pkg-pricing {
        margin: 0;
        text-align: center;
        width: 100%;
        flex-direction: column;
        /* Stack Price */
        align-items: center;
        border: none;
        padding: 0;
    }

    .pkg-price {
        font-size: 1.1rem;
    }

    .pkg-old-price {
        font-size: 0.7rem;
    }

    /* Minimal 'Buy' Button */
    .pkg-actions {
        width: 100%;
        margin-top: 5px;
        padding: 0;
        border: none;
        gap: 5px;
    }

    .btn-pkg-buy {
        height: 32px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .btn-pkg-buy span {
        display: inline-block;
    }

    .btn-pkg-buy i {
        display: none;
    }

    /* Text only 'Satın Al' */

    .btn-pkg-cart {
        height: 32px;
        width: 32px;
    }

    /* Hide Mobile Footer Trust (Features already in Hero) */
    .mobile-pkg-features {
        display: none !important;
    }
}

/* ... existing media query for 576px - CLEARED to allow 2-Col Grid */


.icon-box {
    width: 36px;
    height: 36px;
    background: transparent;
    color: #fbbf24;
    /* Amber-400 (Yellow/Orange) */
    border-radius: 8px;
    font-size: 1.2rem;
    border: 1px solid rgba(251, 191, 36, 0.3);
    /* Amber border */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



/* Sidebar */
.concept-sidebar {
    position: sticky;
    top: 20px;
    background: transparent;
    /* Cleaner, remove boxy bg */
    padding: 0;
    /* Remove padding */
    border: none;
    /* Remove border */
}

/* Redesign Sidebar to be purely visual/info without container box */
.concept-image-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 30px;
    aspect-ratio: 1/1;
    /* Square is often cleaner */
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

.concept-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.concept-image-container:hover .concept-img {
    transform: scale(1.05);
}

.concept-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 30px;
}

.concept-img-overlay h3 {
    color: white;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0;
    font-weight: 800;
}

/* Minimal Sidebar Features */
.features-title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    color: #94a3b8;
    border-bottom: none;
    /* Remove border */
    padding-bottom: 0;
}

.concept-feature-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    /* Reduced from 25px */
    background: rgba(255, 255, 255, 0.02);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.icon-box {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    /* Golden Amber Gradient */
    color: #0f172a;
    /* Dark Slate/Black for contrast */
    border-radius: 10px;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    /* Golden Glow */
}

.concept-feature-list div strong {
    display: block;
    color: #f1f5f9;
    font-size: 0.95rem;
}

.concept-feature-list div small {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Content Area */
.content-header {
    margin-bottom: 30px;
}

.concept-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.concept-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
}

/* Package List Rows */
.package-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.package-row {
    background: rgba(30, 41, 59, 0.4);
    /* Glassy Dark */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.package-row:hover {
    transform: translateX(10px);
    border-color: rgba(225, 48, 108, 0.3);
    background: rgba(30, 41, 59, 0.6);
}

.row-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fbbf24;
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
}

.best-seller-row {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.5), rgba(251, 191, 36, 0.1));
}

.pkg-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pkg-icon-wrap {
    width: 50px;
    height: 50px;
    background: #e1306c;
    /* Solid Brand Color */
    border-radius: 12px;
    /* Soft Square */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Subtle Shadow */
}

.pkg-details h3 {
    font-size: 1.2rem;
    margin: 0;
    color: white;
    font-weight: 700;
}

.pkg-platform {
    font-size: 0.85rem;
    color: #e1306c;
    font-weight: 600;
    text-transform: uppercase;
}

.pkg-pricing {
    text-align: right;
    margin-left: auto;
    margin-right: 30px;
}

.pkg-old-price {
    font-size: 0.85rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.pkg-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.pkg-price span {
    font-size: 0.9rem;
    font-weight: 600;
    color: #cbd5e1;
}

.pkg-actions {
    display: flex;
    gap: 8px;
    /* Space between buttons */
}

.btn-pkg-action {
    border: none;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

/* Cart Button */
.btn-pkg-cart {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    width: 40px;
    /* Square icon button */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-pkg-cart:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Buy Button */
.btn-pkg-buy {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0 15px;
    /* Wider for text */
    gap: 6px;
}

.btn-pkg-buy span {
    display: inline-block;
    /* Show text */
    font-size: 0.9rem;
}

.package-row:hover .btn-pkg-buy {
    background: #e1306c;
    /* Active Color on Row Hover */
    color: white;
}

/* Light Mode Overrides for V2 Concept & Category Page */
body.light-mode .concept-sidebar {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.light-mode .package-row {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    /* Soft border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    /* Softer shadow */
}

body.light-mode .concept-title,
body.light-mode .category-hero h1 {
    background: linear-gradient(to right, #0f172a, #475569);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.light-mode .concept-subtitle,
body.light-mode .category-hero p {
    color: #475569;
}

body.light-mode .features-title,
body.light-mode .concept-feature-list div strong,
body.light-mode .pkg-details h3,
body.light-mode .pkg-price,
body.light-mode .minimal-content h3 {
    color: #0f172a;
}

body.light-mode .minimal-content p {
    color: #64748b;
}

body.light-mode .best-seller-row {
    background: linear-gradient(90deg, #fff, #fffbeb);
}

body.light-mode .btn-pkg-buy {
    background: #f1f5f9;
    color: #0f172a;
}

/* Mobile Package Features (Hidden on Desktop) */
.mobile-pkg-features {
    display: none;
}



body.light-mode .package-row:hover .btn-pkg-buy {
    background: #e1306c;
    color: white;
}

/* Category Hero Minimal (No Image) */
.category-hero {
    padding: 60px 0;
    padding-bottom: 30px;
    text-align: center;
    position: relative;
    /* No background */
}

.category-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.category-hero p {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}



/* Global Page Glow (Fixed for Long Pages) */
.global-glow-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, rgba(225, 48, 108, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* Force Transparency for Products Page Sections */
.products-hero-v2,
.products-section {
    background: transparent !important;
    position: relative;
    z-index: 1;
    /* Above glow */
}

/* Order Tracking Modal */
.order-inquiry-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
}

.order-inquiry-btn:hover {
    background: transparent;
    transform: none;
    color: white;
}

.order-inquiry-btn i {
    color: var(--secondary-color);
    font-size: 1rem;
}

body.light-mode .order-inquiry-btn {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}

body.light-mode .order-inquiry-btn:hover {
    background: transparent;
    color: var(--text-main);
}

.order-tracking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    padding: 20px;
}

.order-tracking-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.order-tracking-modal-content {
    background: var(--card-bg);
    width: 100%;
    max-width: 500px;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.order-tracking-modal-overlay.active .order-tracking-modal-content {
    transform: scale(1);
}

.close-tracking-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-tracking-modal:hover {
    background: var(--primary-color);
    color: white;
    transform: rotate(90deg);
}

.tracking-modal-header {
    margin-bottom: 30px;
}

.icon-box-modal {
    width: 70px;
    height: 70px;
    background: rgba(246, 79, 89, 0.1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--primary-color);
    font-size: 2rem;
    border: 1px solid rgba(246, 79, 89, 0.2);
}

.tracking-modal-header h3 {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 10px;
}

.tracking-modal-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.tracking-form .form-group {
    margin-bottom: 25px;
    text-align: left;
}

.tracking-form label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
}

.input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
}

.input-wrapper input {
    width: 100%;
    padding: 14px 15px 14px 45px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s;
}

.input-wrapper input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    outline: none;
}

/* Light Mode Overrides */
body.light-mode .order-tracking-modal-content {
    background: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode .close-tracking-modal {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .tracking-modal-header h3 {
    color: #1e293b;
}

body.light-mode .input-wrapper input {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light-mode .input-wrapper input:focus {
    background: white;
    border-color: var(--primary-color);
}

/* =========================================
   RESPONSIVE STYLES
   ========================================= */

/* =========================================
   RESPONSIVE STYLES
   ========================================= */

@media (max-width: 992px) {

    /* Hide Announcement */
    .announcement {
        display: none;
    }

    /* Fix Icon Aliagnment & Sizing */
    .nav-actions {
        gap: 10px;
    }

    .mobile-menu-btn,
    .cart-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        /* Match cart-btn default */
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
        cursor: pointer;
        transition: var(--transition);
        color: white;
        font-size: 1.2rem;
    }

    /* Override Cart Text Sizing to match icon only mode if needed, 
       but keeping .cart-text hidden on mobile usually preferred or handled below */
    .cart-text {
        display: none;
    }

    /* Cart Badge adjustment for icon mode */
    .cart-badge {
        top: -2px;
        right: -2px;
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }

    /* Specific Light Mode overrides for header icons */
    body.light-mode .mobile-menu-btn,
    body.light-mode .cart-btn {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-main);
        border-color: rgba(0, 0, 0, 0.05);
    }

    /* --- MOBILE DRAWER MENU (Left Slide-in) --- */

    /* Layout */
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text .hero-slogan {
        font-size: 2.5rem;
    }

    .hero-btns {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 40px;
    }

    .hero-btns .btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 1rem;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        margin-top: 50px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nav-menu {
        /* Base state: Hidden/Off-canvas */
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        width: 280px;
        height: 100vh;
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 2000;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 5px;
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        overflow-y: auto;
        display: flex;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);

        /* Layout Improvements */
        gap: 0;
        padding-bottom: 100px;
        /* Extra space at bottom to ensure footer buttons are reachable */

        /* Animation Logic - Simple */
        will-change: transform;
        transition: transform 0.3s ease;
    }

    .auth-buttons {
        display: none !important;
    }

    /* Auth Buttons inside Menu? 
       Usually auth buttons are separate. If they are inside .active state, we need to handle them.
       The HTML structure has .auth-buttons OUTSIDE .nav-menu. 
       We need to move them IN or position them similarly. 
       Actually, currently .auth-buttons is sibling to .nav-menu.
       We can slide them in too or keep top right. 
       Let's keep Auth buttons visible in header if they fit, OR hide them and show inside drawer.
       Current styling hides them. Let's make a container style for mobile-active.
    */

    .auth-buttons {
        display: none !important;
        /* Temporarily hide default auth buttons to rely on drawer ones if we moved them, 
                                     but since we can't move HTML easily, we might need a workaround. 
                                     Actually, let's keep them hidden on top bar and append them to drawer via JS or 
                                     just style them if they are separate. 
                                     Wait, the previous CSS hid them. 
                                     Let's show them at the bottom of the drawer via specific selector if possible? 
                                     Hard without HTML change. 
                                     Let's assume user wants menu items first. */
    }

    /* Mobile Menu Header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.light-mode .mobile-menu-header {
        border-bottom-color: rgba(0, 0, 0, 0.1);
    }

    body.light-mode .mobile-menu-header .logo-text {
        color: var(--text-heading);
    }

    .mobile-logo-text {
        font-size: 1.5rem;
    }

    /* Active State (Open) */
    .navbar.mobile-active .nav-menu {
        transform: translateX(0);
        visibility: visible;
        /* Open Transition: Show Visibility immediately (delay 0s), then Slide in (0.3s) */
        transition: transform 0.3s ease, visibility 0s linear 0s;
    }

    /* Light Mode Drawer */
    body.light-mode .nav-menu {
        background: rgba(255, 255, 255, 0.98);
        background: rgba(255, 255, 255, 0.98);
        border-right: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05);
    }

    /* Menu Items - Minimal */
    .nav-menu a.nav-link {
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        /* Very subtle separator */
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        background: transparent !important;
        /* Force transparent */
    }

    .nav-menu a.nav-link:last-child {
        border-bottom: none;
    }

    body.light-mode .nav-menu a.nav-link {
        color: var(--text-main);
        border-bottom-color: rgba(0, 0, 0, 0.05);
    }

    /* Dropdown/Mega Menu on Mobile - Minimal */
    .nav-item.dropdown {
        width: 100%;
        text-align: left;
        padding: 0;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    body.light-mode .nav-item.dropdown {
        border-bottom-color: rgba(0, 0, 0, 0.05);
    }

    .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent !important;
    }

    .mega-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        background: transparent !important;
        /* No background */
        border: none;
        box-shadow: none;
        padding: 0;
        /* Remove padding */
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        display: block !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-item.dropdown.show .mega-menu {
        max-height: 2000px;
        margin-bottom: 10px;
        /* Small indent for hierarchy */
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
        gap: 0;
        /* Remove gap, use padding on items */
    }

    .mega-item {
        background: transparent !important;
        /* No bg */
        padding: 8px 0;
        border-radius: 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.6);
        border: none !important;
        display: flex;
        /* Ensure flex for icons */
        align-items: center;
        gap: 10px;
    }

    body.light-mode .mega-item {
        background: transparent !important;
        color: var(--text-muted);
    }

    .mega-item:hover {
        color: white;
        transform: translateX(5px);
    }

    body.light-mode .mega-item:hover {
        color: var(--primary-color);
    }

    /* Fix to remove shadow/bg from mega menu in mobile light mode */
    body.light-mode .mega-menu {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0;
    }

    /* --- Mobile Nav Footer (Auth & Actions) --- */
    .mobile-nav-footer {
        margin-top: 20px;
        /* Push to bottom if flex container has height, but here just margin top spacing */
        width: 100%;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    body.light-mode .mobile-nav-footer {
        border-top-color: rgba(0, 0, 0, 0.1);
    }

    /* Sipariş Sorgula Link Style */
    .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 1rem;
        text-decoration: none;
        padding: 5px 0;
    }

    .mobile-nav-item i {
        color: var(--secondary-color);
        font-size: 1.1rem;
    }

    body.light-mode .mobile-nav-item {
        color: var(--text-main);
    }

    /* Auth Buttons Group */
    .mobile-auth-group {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .mobile-auth-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        transition: var(--transition);
    }

    .mobile-auth-btn.login {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .mobile-auth-btn.register {
        background: var(--primary-color);
        color: white;
    }

    body.light-mode .mobile-auth-btn.login {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-main);
    }

    /* Add a backdrop overlay when menu is open */
    .navbar.mobile-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 1500;
        /* Behind menu (2000) */
        opacity: 0;
        visibility: hidden;
        transition: 0.3s;
    }

    .navbar.mobile-active::before {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 900px) {
    .influencer-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

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

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



    .video-stack-container {
        margin: 0 auto;
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {

    /* Customers Info - Minimal Mobile */
    .customers-info {
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        /* Remove horizontal padding */
        gap: 15px;
        background: transparent !important;
        /* Force remove bg */
        box-shadow: none !important;
        /* Force remove shadow */
        border: none !important;
        /* Force remove border */
        backdrop-filter: none;
    }

    .trust-details {
        flex-direction: row;
        /* Keep row but maybe center or wrap? Let's try row first or wrap if tight */
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    /* Optional: Make trust stats cleaner if needed */
    .trust-stat {
        padding: 0;
        border: none;
    }

    .trust-stat:not(:last-child)::after {
        display: none;
        /* Hide dividers */
    }

    .avatar-group {
        margin-bottom: 5px;
    }

    /* Footer */
    .footer-links {
        grid-template-columns: 1fr 1fr;
    }

    /* Auth Modal Mobile Fix */
    .auth-modal-overlay {
        align-items: flex-start;
        /* Start from top on mobile to allow scroll */
        padding: 20px 10px;
        overflow-y: auto;
        /* Allow overlay scroll */
    }

    .auth-modal-content {
        flex-direction: column;
        height: auto;
        min-height: auto;
        /* Remove fixed min-height constraints */
        max-height: none;
        border-radius: 20px;
        margin: 20px auto;
        /* give some space */
        overflow: visible;
        /* Let overlay handle scroll or handle internal if strict */
    }

    .auth-modal-right {
        display: none;
    }

    .auth-modal-left {
        padding: 30px 20px;
        width: 100%;
        /* Ensure full width */
    }

    /* Hero V2 */
    .products-hero-v2 {
        padding-top: 40px;
    }

    /* Category Hero */
    .category-hero {
        padding: 40px 0;
    }

    .category-hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .mobile-pkg-features {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed rgba(255, 255, 255, 0.1);
    }

    .mp-feature {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 500;
    }

    .mp-feature i {
        color: #fbbf24;
        font-size: 0.9rem;
    }
}

/* ensure sweet alert is on top of everything */
.swal2-container {
    z-index: 10000 !important;
}

/* --- Related Categories Styles --- */
.related-categories-section {
    position: relative;
    z-index: 2;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.related-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    padding: 15px 20px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.related-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.related-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.related-info {
    flex: 1;
}

.related-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.related-info span {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 3px;
    display: block;
}

.related-card .arrow-icon {
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.related-card:hover .arrow-icon {
    transform: translateX(5px);
    color: var(--primary-color);
}

/* Light Mode Support for Related Categories */
body.light-mode .related-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

body.light-mode .related-card:hover {
    background: #f8fafc;
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .related-info h4 {
    color: var(--text-main);
}

/* Related Categories Section Updates */
.related-categories-section .section-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    /* Added spacing bottom */
}

/* Ensure card styles are consistent */
.related-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.related-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.related-info {
    flex: 1;
}

.related-info h4 {
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.related-info span {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: block;
}

.related-card .arrow-icon {
    color: var(--text-muted);
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.related-card:hover .arrow-icon {
    transform: translateX(5px);
    color: white;
}

/* Light Mode Overrides */
body.light-mode .related-card {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

body.light-mode .related-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .related-info h4 {
    color: var(--text-main);
}

@media (max-width: 992px) {
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .related-categories-section .section-header h3 {
        font-size: 1.3rem;
    }
}

/* --- FIXED & FORCED Modal Close Styles --- */
#authModal .close-auth-modal,
#orderTrackingModal .close-tracking-modal,
.video-modal .close-modal,
button.close-auth-modal,
button.close-tracking-modal,
button.close-modal {
    opacity: 1 !important;
    /* Force visibility */
    visibility: visible !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;

    /* İstenen: Siyah arka plan, Beyaz ikon */
    background: rgba(0, 0, 0, 0.6) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;

    padding: 0 !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    cursor: pointer !important;
    z-index: 100 !important;
    color: #ffffff !important;
    /* Beyaz İkon */
    border-radius: 50%;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#authModal .close-auth-modal i,
#orderTrackingModal .close-tracking-modal i,
.video-modal .close-modal i,
button.close-auth-modal i,
button.close-tracking-modal i,
button.close-modal i {
    font-size: 1.5rem !important;
    /* Biraz küçülttük ki yuvarlak içine otursun */
    color: #ffffff !important;
    /* Beyaz */
    font-weight: 700 !important;
    line-height: 1 !important;
    font-style: normal;
    background: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover State */
#authModal .close-auth-modal:hover,
#orderTrackingModal .close-tracking-modal:hover,
.video-modal .close-modal:hover,
button.close-auth-modal:hover,
button.close-tracking-modal:hover,
button.close-modal:hover {
    transform: rotate(90deg) scale(1.1) !important;
    /* İstenen: Üzerine gelince Kırmızı arka plan */
    background: #ef4444 !important;
    /* Kırmızı */
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4) !important;
    color: #ffffff !important;
}

#authModal .close-auth-modal:hover i,
#orderTrackingModal .close-tracking-modal:hover i,
.video-modal .close-modal:hover i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure light mode doesn't override it adversely, keep dark style for contrast on modal images usually */
body.light-mode .close-auth-modal,
body.light-mode .close-tracking-modal,
body.light-mode .close-modal {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .close-auth-modal:hover,
body.light-mode .close-tracking-modal:hover,
body.light-mode .close-modal:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Fix for Auth Modal Height on Desktop */
@media (min-width: 993px) {
    .auth-modal-content {
        /* Increase height for Register form */
        height: auto !important;
        /* Allow scroll if needed */
    }

    .auth-modal-left {
        padding: 50px;
        /* Ensure enough padding */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .auth-form-container {
        height: 100%;
        display: none;
        /* Default hidden */
        flex-direction: column;
        justify-content: center;
    }

    .auth-form-container.active {
        display: flex;
        /* Show flex when active */
    }
}

/* Legal & Text Pages Styles */
.legal-page-section {
    padding: 60px 0 100px;
    position: relative;
    z-index: 2;
}

.legal-content-wrapper {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 50px;
    backdrop-filter: blur(20px);
}

.legal-content-wrapper h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: white;
    margin-top: 40px;
}

.legal-content-wrapper h2:first-child {
    margin-top: 0;
}

.legal-content-wrapper p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.legal-content-wrapper ul {
    margin-bottom: 20px;
    padding-left: 20px;
    color: var(--text-muted);
}

.legal-content-wrapper ul li {
    margin-bottom: 10px;
}

/* Light Mode for Legal Pages */
body.light-mode .legal-content-wrapper {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

body.light-mode .legal-content-wrapper h2 {
    color: var(--text-heading);
}

body.light-mode .legal-content-wrapper p,
body.light-mode .legal-content-wrapper ul {
    color: var(--text-main);
}

/* FAQ Section Styles */
.faq-grid {
    display: grid;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.faq-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.faq-header {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.faq-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: white;
    flex: 1;
    padding-right: 20px;
}

.faq-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--text-muted);
}

.faq-header:hover .faq-icon {
    background: var(--primary-color);
    color: white;
}

.faq-body {
    height: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
}

.faq-content {
    padding: 0 24px 24px;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.faq-item.active .faq-header h3 {
    color: var(--primary-color);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    background: var(--primary-color);
    color: white;
}

.faq-item.active .faq-body {
    height: auto;
    opacity: 1;
}

/* Light Mode FAQ */
body.light-mode .faq-item {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .faq-header h3 {
    color: var(--text-heading);
}

body.light-mode .faq-icon {
    background: #f1f5f9;
    color: var(--text-muted);
}

body.light-mode .faq-content {
    color: var(--text-main);
}

body.light-mode .faq-item.active {
    border-color: var(--primary-color);
    background: #f8fafc;
}

/* AI Minimal Button - Gemini Style */
.btn-ai-minimal {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: white;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-ai-minimal i {
    font-size: 18px;
    color: white;
}

.btn-ai-minimal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.ai-badge {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    backdrop-filter: blur(10px);
}

/* Light Mode */
body.light-mode .btn-ai-minimal {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}

body.light-mode .btn-ai-minimal:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.btn-ai-special {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: white;
    font-weight: 600;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4),
        0 0 0 0 rgba(102, 126, 234, 0.5);
    animation: ai-pulse 3s ease-in-out infinite;
}

.btn-ai-special:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6),
        0 0 30px rgba(118, 75, 162, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.ai-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-ai-special:hover .ai-icon-wrapper {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(10deg) scale(1.1);
}

.ai-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.ai-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.ai-price {
    font-size: 13px;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    animation: price-glow 2s ease-in-out infinite;
}

.ai-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 30%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 70%);
    transform: rotate(45deg);
    animation: ai-shine 3s ease-in-out infinite;
}

@keyframes ai-pulse {

    0%,
    100% {
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4),
            0 0 0 0 rgba(102, 126, 234, 0.5);
    }

    50% {
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.6),
            0 0 20px 10px rgba(102, 126, 234, 0.3);
    }
}

@keyframes ai-shine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

@keyframes price-glow {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
    }

    50% {
        text-shadow: 0 0 20px rgba(251, 191, 36, 0.8),
            0 0 30px rgba(251, 191, 36, 0.4);
    }
}

/* Responsive AI Button */
@media (max-width: 768px) {
    .btn-ai-special {
        padding: 14px 24px;
        gap: 12px;
    }

    .ai-icon-wrapper {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .ai-title {
        font-size: 13px;
    }

    .ai-price {
        font-size: 12px;
    }
}

/* Light Mode AI Button */
body.light-mode .btn-ai-special {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

body.light-mode .btn-ai-special:hover {
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5);
}

/* --- WHO PREFERS US SECTION --- */
.preferences-section {
    padding-bottom: 80px;
    position: relative;
}

.preferences-section .section-header {
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(255, 77, 77, 0.08);
    color: var(--primary-brand);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 77, 77, 0.15);
    backdrop-filter: blur(5px);
}

.section-description {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.7;
}

.prefs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.pref-card {
    background: transparent;
    border: none;
    padding: 0;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
}

.pref-card:hover {
    transform: translateY(-5px);
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}

.pref-card-media {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pref-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
    filter: grayscale(20%);
}

.pref-card:hover .pref-card-media {
    border-color: var(--primary-brand);
}

.pref-card:hover .pref-card-media img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.pref-card-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1rem;
    transition: color 0.3s;
    letter-spacing: 0.3px;
}

.pref-card:hover .pref-card-title {
    color: var(--primary-brand);
}

/* Light Mode Overrides */
body.light-mode .pref-card {
    background: transparent;
    box-shadow: none;
    border: none;
}

body.light-mode .pref-card:hover {
    background: transparent;
    box-shadow: none;
}

body.light-mode .pref-card-media {
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .section-badge {
    background: rgba(255, 77, 77, 0.05);
    border-color: rgba(255, 77, 77, 0.1);
}

/* Responsive */
@media (max-width: 1200px) {
    .prefs-grid {
        gap: 20px;
    }
}

@media (max-width: 992px) {
    .prefs-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .preferences-section {
        padding: 60px 0 80px;
    }

    .prefs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .pref-card-media {
        border-radius: 18px;
        margin-bottom: 12px;
    }

    .pref-card-title {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .prefs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

.payment-submit-btn {
    margin-top: 20px
}

/* --- Fake Notification Popup --- */
.fake-notification {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transform: translateY(150%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 320px;
    width: auto;
}

.fake-notification.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.fake-notification:hover {
    transform: translateY(-5px);
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

.fake-notif-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    background: #2563eb;
    /* Default fallback */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Platform Specific Colors */
.fake-notif-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.fake-notif-icon.tiktok {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fake-notif-icon.twitter {
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fake-notif-icon.youtube {
    background: #FF0000;
}

.fake-notif-icon.facebook {
    background: #1877F2;
}

.fake-notif-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fake-notif-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 2px;
}

.fake-notif-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
}

.fake-notif-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    font-weight: 500;
}

/* Light Mode Support */
body.light-mode .fake-notification {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode .fake-notification:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .fake-notif-title {
    color: #1e293b;
}

body.light-mode .fake-notif-desc {
    color: #64748b;
}

body.light-mode .fake-notif-time {
    color: #94a3b8;
}