:root {
    --primary: #00f2ea;
    --secondary: #ff0050;
    --dark-bg: #0a0a12;
    --card-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.05);
    --text-main: #ffffff;
    --text-muted: #a0a0b0;
    --gradient-hero: linear-gradient(135deg, #00f2ea 0%, #00a8f2 100%);
    --container-max: 1200px;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --transition: all 0.3s ease;
}

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

html {
    overflow-y: scroll;
    /* Forces scrollbar to prevent layout shift ("shaking") */
}

body {
    font-family: var(--font-body);
    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);
}

ul {
    list-style: none;
}

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

/* Global Background & Spacing */
.global-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a12 100%);
    overflow: hidden;
}

.global-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 242, 234, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

.page-padding {
    padding-top: 150px !important;
}

/* Header */
.header {
    padding: 0;
    height: 90px;
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 23, 0.8);
    /* Consistent starting background */
    backdrop-filter: blur(10px);
    /* consistent glass effect */
    transition: all 0.3s ease;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: var(--container-max);
    /* Aligns logo with content text */
    padding: 0 20px;
    /* Standard container padding */
    margin: 0 auto;
    /* Centers the block */
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-list {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-link {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
    /* Made slightly bold */
    padding: 8px 18px;
    border-radius: 50px;
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: #000;
    background: var(--gradient-hero);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.4);
}

.btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-block;
    border: none;
    transition: var(--transition);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
}

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

.btn-primary,
.btn-glow {
    background: var(--gradient-hero);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.3);
}

.btn-primary:hover,
.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 242, 234, 0.5);
}

/* Hero Typography & Layout */
.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    text-align: left;
}

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

.hero-visuals {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #fff;
}

.hero-subtitle-green {
    color: var(--primary);
    display: block;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 500px;
    line-height: 1.6;
}

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

/* Button Customizations */
/* Button Customizations */
.btn-advertiser {
    background: linear-gradient(135deg, #00f2ea 0%, #00a8f2 100%);
    color: #000;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    /* Compact padding */
    font-size: 0.95rem;
    /* Smaller font */
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.4);
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap;
    /* Force one line */
}

.btn-advertiser:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 242, 234, 0.6);
    filter: brightness(1.1);
}

.btn-affiliate {
    background: rgba(255, 255, 255, 0.03);
    /* Dark Glass */
    backdrop-filter: blur(5px);
    border: 1px solid var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    /* Compact padding */
    font-size: 0.95rem;
    /* Smaller font */
    font-weight: 600;
    border-radius: 50px;
    /* Full pill shape */
    transition: all 0.3s ease;
    white-space: nowrap;
    /* Force one line */
}

.btn-affiliate:hover {
    background: rgba(0, 242, 234, 0.1);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.2);
    transform: translateY(-2px);
}

/* Status Dots */
.btn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.dot-yellow {
    background-color: #ffd700;
    box-shadow: 0 0 8px #ffd700;
    animation: pulse-yellow 2s infinite;
}

.dot-green {
    background-color: #00fa9a;
    box-shadow: 0 0 8px #00fa9a;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-yellow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 250, 154, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(0, 250, 154, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 250, 154, 0);
    }
}

.btn-affiliate:hover {
    background: rgba(0, 242, 234, 0.05);
    color: var(--primary);
    transform: translateY(-2px);
}

.btn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-yellow {
    background-color: #ffd700;
    box-shadow: 0 0 5px #ffd700;
}

.dot-green {
    background-color: #2ecc71;
    box-shadow: 0 0 5px #2ecc71;
}

/* Image Grid (Collage) */
/* Single Hero Image Logic */
.hero-image-container {
    width: 100%;
    max-width: 1000px;
    /* Increased from 800px for larger impact */
    margin-left: auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    /* Monitor-like shadow */
    transition: transform 0.3s ease;
}

.hero-slider {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
    height: auto;
}

.hero-slide {
    grid-area: stack;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Slider Controls */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--primary);
    border: 1px solid var(--glass-border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    backdrop-filter: blur(5px);
    opacity: 0;
}

.hero-image-container:hover .slider-btn {
    opacity: 1;
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.slider-btn:hover {
    background: var(--primary);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.5);
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slider-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.slider-dot.active,
.slider-dot:hover {
    background: var(--primary);
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.5);
    transform: scale(1.2);
}

.hero-image-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 242, 234, 0.15), 0 0 0 1px rgba(0, 242, 234, 0.3);
    /* Subtle glow on hover */
}





.text-gradient {
    background: var(--gradient-hero);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.section {
    padding: 80px 0;
}

.section-compact {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 0 !important;
}

.fade-in {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

/* Responsive adjustments */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        margin-bottom: 3rem;
    }

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

    .hero-title {
        font-size: 3rem;
    }

    .hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
}

/* About Page Specifics */
.about-hero {
    padding-top: 60px;
    padding-bottom: 60px;
}

.bg-glass {
    position: relative;
}

.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.mission-card,
.vision-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.mission-card h2,
.vision-card h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--secondary);
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00ff88;
}

/* Core Values Grid */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.value-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    text-align: center;
    transition: var(--transition);
}

.value-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.1);
}

.value-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

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

/* Philosophy Section */
.philosophy-box {
    background: rgba(10, 10, 18, 0.8);
    border: 1px dashed var(--glass-border);
    padding: 4rem;
    text-align: center;
    border-radius: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.philosophy-box h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.philosophy-box p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;

}

/* Payment Section Heading */
.section-heading-payment {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(0, 242, 234, 0.08);
    /* Adjustment color background */
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    border: 1px solid rgba(0, 242, 234, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 3rem;
    position: relative;
    backdrop-filter: blur(5px);
}


/* High-Performing Formats Modern Redesign */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.format-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.format-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 242, 234, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.format-image {
    width: 250px;
    height: 185px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    transition: transform 0.4s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.format-card:hover .format-image {
    transform: scale(1.05);
}

.format-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.format-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

footer {
    padding: 5rem 0 2rem;
    border-top: 1px solid var(--glass-border);
    margin-top: 5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    align-items: start;
}

.footer-grid>div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        text-align: left;
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }

    .footer-brand .company-bio {
        text-align: left;
        margin: 1rem 0;
        max-width: 100%;
    }

    .footer-brand .footer-address {
        justify-content: flex-start;
    }

    .footer-links h4 {
        text-align: left;
        font-size: 1rem;
        padding-bottom: 5px;
        margin-bottom: 1rem;
        color: #008080;
        /* Teal color base */
    }

    /* Target the pseudo-element underline for the yellow color */
    .footer-links h4::after {
        background-color: #ffba08 !important;
        width: 100%;
        /* Full width of the word */
        height: 2px;
    }

    .footer-links h4 {
        color: #009688;
        /* Matching the teal in screenshot */
    }

    .footer-links ul li {
        justify-content: flex-start;
        text-align: left;
    }

    .footer-links ul li a {
        justify-content: flex-start;
        font-size: 0.8rem;
        /* Smaller font for links */
        white-space: nowrap;
        /* Prevent wrapping if possible, or let it wrap naturally */
    }
}

.footer-brand {
    flex: 1.5 !important;
    /* Keep brand column wider */
}

.footer-brand .logo {
    margin-bottom: 0;
    /* Removed gap as requested */
}

.footer-brand {
    gap: 0 !important;
    justify-content: flex-start !important;
    height: 100%;
}

.footer-brand .footer-address {
    margin-top: auto;
    padding-top: 1rem;
}

/* Custom Footer Typography */
.company-bio {
    font-size: 0.85rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5rem;
    margin-bottom: auto;
    /* Push subsequent content down if needed, but flex justify-between handles main structure */
    font-weight: 300;
    max-width: 90%;
}

.footer-address {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}

/* Ensure links lists usually sit at top, but if we want strictly equal bottom line, the container flex-between does it. 
   However, lists might be short. Let's make sure H4 stays at top and UL content fills or sits naturally. 
   If user wants "last line of each column equal", it means the bottom-most element of each column aligns.
   Space-between on the column container achieves this if there are at least 2 items (content top, something bottom).
   Most columns have Title + List. The list is the bottom thing. 
   The brand column has Logo + Bio + Address. Address is bottom.
   So Address and the last <li> or the bottom of <ul> will align.
*/

.footer-links h4 {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary);
    /* Cyan underline */
}

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

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
    /* Space between icon and text */
}

.footer-links a i {
    color: var(--primary);
    /* Icon color */
    font-size: 0.9rem;
    width: 20px;
    /* Fixed width for alignment */
    text-align: center;
}

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

.copyright {
    text-align: center;
    border-top: 1px solid var(--glass-border);
    padding-top: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(10, 10, 18, 0.95);
        backdrop-filter: blur(10px);
        padding: 20px 0;
        gap: 15px;
        border-bottom: 1px solid var(--glass-border);
    }

    .nav-list.active {
        display: flex;
    }

    /* Center items on mobile */
    .nav-link {
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

    .menu-toggle {
        display: block;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .about-split,
    .grid-4,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 2.5rem !important;
    }
}

@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}

/* Comprehensive Mobile Fixes - Strict Rules */
@media (max-width: 768px) {

    /* 1. Mobile Navigation */
    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(10, 10, 18, 0.98);
        backdrop-filter: blur(15px);
        padding: 30px 0;
        gap: 20px;
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .nav-list.active {
        display: flex;
    }

    .nav-link {
        display: block;
        width: fit-content;
        margin: 0 auto;
        font-size: 1.1rem;
    }

    .menu-toggle {
        display: block;
        color: white;
        font-size: 1.8rem;
        cursor: pointer;
    }

    /* 2. Strict Layout & Spacing */
    .section {
        padding: 60px 0;
        /* Keep vertical breathing room */
    }

    .page-padding {
        padding-top: 120px !important;
    }

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

    /* 3. Grid Stacking (1 Column Force) */
    .about-split,
    .grid-4,
    .formats-grid,
    .testimonials-grid,
    .payment-methods-grid,
    .growth-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    /* Top Countries: Allow 2 columns on tablet/large phone, 1 on small */
    .geo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* Feature Split Section */
    .feature-split-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* 4. Footer Fixes - DISABLED to allow specific 3-column grid */
    /* .footer-grid {
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-brand {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .footer-links a {
        justify-content: center;
        font-size: 14px;
        line-height: 1.7;
    }

    .footer-brand .footer-address {
        justify-content: center;
        font-size: 14px;
        line-height: 1.7;
    }

    .company-bio {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 1rem;
    } */

    /* 5. Buttons (Full Width) */
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-advertiser,
    .btn-affiliate,
    .btn-white,
    .btn-teal-outline {
        width: 100% !important;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 16px;
        padding: 0;
        /* height handles it */
        margin-bottom: 10px;
        /* Space if stacked */
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    /* 6. Typography Adjustments */
    .hero-title {
        font-size: 2.8rem !important;
    }

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

    /* Testimonial adjustments */
    .testimonial-card {
        padding: 1.5rem;
    }

    .t-info h4 {
        font-size: 1rem;
    }
}

/* Small Mobile Override */
@media (max-width: 480px) {
    .geo-grid {
        grid-template-columns: 1fr !important;
        /* Force 1 column for countries on small screens */
    }

    .hero-title {
        font-size: 2.2rem !important;
    }

    .section-header h2 {
        font-size: 2rem;
    }
}


/* Process Flow Design - Refined */
.process-container {
    position: relative;
    margin-top: 5rem;
    padding: 0 1rem;
}

.process-line {
    position: absolute;
    top: 60px;
    /* Aligned with center of icon */
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 242, 234, 0.3) 50%, transparent 100%);
    z-index: 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.process-card {
    text-align: center;
    position: relative;
    padding: 1rem;
    background: transparent;
    border: none;
    transition: var(--transition);
}

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

.process-icon-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--dark-bg);
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.2);
    z-index: 2;
}

/* Concentric Ripples */
.process-icon-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(0, 242, 234, 0.03);
    border: 1px solid rgba(0, 242, 234, 0.1);
    z-index: -1;
    transition: var(--transition);
}

.process-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(0, 242, 234, 0.05);
    z-index: -2;
    transition: var(--transition);
}

.process-card:hover .process-icon-wrapper::before {
    background: rgba(0, 242, 234, 0.08);
    width: 170px;
    height: 170px;
}

.process-card:hover .process-icon-wrapper::after {
    width: 220px;
    height: 220px;
    border-color: rgba(0, 242, 234, 0.2);
}

.process-icon {
    font-size: 3rem;
    /* Use gradient text for icon to make it pop */
    background: var(--gradient-hero);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 3;
}

.process-step-badge {
    display: inline-block;
    background: rgba(0, 242, 234, 0.1);
    color: var(--primary);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 242, 234, 0.2);
}

.process-content p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
}

/* Responsive Process */
@media (max-width: 900px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .process-line {
        width: 1px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background: linear-gradient(180deg, transparent 0%, rgba(0, 242, 234, 0.3) 50%, transparent 100%);
    }

    .process-icon-wrapper {
        margin-bottom: 1.5rem;
    }
}



@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 242, 234, 0.7);
    }

    70% {
        box-shadow: 0 0 0 30px rgba(0, 242, 234, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 242, 234, 0);
    }
}

/* Verticals */
/* Verticals Design - Grid Boxes */
.verticals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.verticals-title {
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: 1px;
}

.verticals-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.5);
}

.vertical-box {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(10, 10, 18, 0.4) 100%);
    border: 2px solid rgba(0, 242, 234, 0.3);
    /* Thicker, visible border */
    padding: 2.5rem 1.5rem;
    /* More padding */
    border-radius: 16px;
    font-size: 1.25rem;
    /* Larger text */
    font-weight: 700;
    /* Bold text */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    transition: all 0.3s ease;
    text-align: center;
    color: #fff;
    cursor: default;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.vertical-box:hover {
    border-color: var(--primary);
    box-shadow: 0 0 25px rgba(0, 242, 234, 0.25);
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.05);
}

.btn-primary:hover {
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.4);
    transform: translateY(-2px);
}

.btn-glow {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 12px 36px;
    text-transform: uppercase;
    transition: all 0.4s ease;
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.1);
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--primary);
    z-index: -1;
    transition: width 0.4s ease;
}

.btn-glow:hover {
    color: var(--dark-bg);
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.6);
    transform: translateY(-3px);
}

.btn-glow:hover::before {
    width: 100%;
}

.vertical-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 242, 234, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.vertical-box:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .verticals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Geo Grid */
.geo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.geo-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.geo-flag-img {
    width: 40px;
    height: auto;
    border-radius: 4px;
    margin-right: 1rem;
}

/* Formats */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.format-item {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

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

/* Payment Pills */
.payment-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.payment-pill {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
}

/* Media Partners - Dark Theme Integration */
.media-partners-box {
    background: var(--card-bg);
    /* Dark glass background */
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.mp-title {
    color: var(--text-main);
    /* White text */
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 3rem;
    letter-spacing: 1px;
}

.partners-grid-light {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.partner-logo-light {
    max-height: 50px;
    width: auto;
    transition: transform 0.3s ease;
    /* Ensure logos pop on dark background. If they are dark, invite might be needed, but assuming originals are colorful or light enough */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
}

.partner-logo-light:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(0, 242, 234, 0.3));
    /* Primary glow on hover */
}

/* Specific adjustment */
.logo-adjust {
    max-height: 70px;
}

/* Pagination Dots */
.mp-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    display: inline-block;
    transition: var(--transition);
}

.dot.active {
    background-color: var(--primary);
    /* Cyan active dot */
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 242, 234, 0.5);
}

/* Payment Methods - Premium Boxes */
.payment-methods-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.payment-method-box {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(10, 10, 18, 0.4) 100%);
    border: 1px solid var(--glass-border);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 280px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* CTA Bar - CkAds Brand Design */
.cta-section {
    background: linear-gradient(90deg, #0a0a12 0%, rgba(0, 242, 234, 0.05) 50%, #0a0a12 100%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    /* "Box" shape */
    padding: 3rem 2rem;
    margin: 5rem auto;
    /* Centered with surrounding space */
    max-width: 1100px;
    /* Cut at this width */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Subtle glow effect */
.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 242, 234, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.cta-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.cta-heading {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 242, 234, 0.2);
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
}

.btn-white {
    background: var(--primary);
    /* Cyan Background */
    color: #000;
    /* Dark Text */
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    border: 2px solid var(--primary);
    transition: var(--transition);
}

.btn-white:hover {
    background: transparent;
    color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.3);
}

.btn-teal-outline {
    background: transparent;
    color: #fff;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    border: 2px solid #fff;
    transition: var(--transition);
}

.btn-teal-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.2);
}

@media (max-width: 768px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-white,
    .btn-teal-outline {
        display: block;
        text-align: center;
    }
}

.pm-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.pm-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.5px;
}

.growth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.growth-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--glass-border);
    padding: 2rem;
    border-radius: 16px;
}

.growth-icon {
    margin-right: 0.8rem;
    font-size: 1.5rem;
    vertical-align: middle;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
}

.t-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.t-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000;
}

.t-info h4 {
    font-size: 1rem;
}

.t-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.t-rating {
    color: #ffd700;
    margin-top: 0.5rem;
}

.cta-box {
    text-align: center;
    padding: 5rem 0;
}

/* Feature Split */
.feature-split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-list-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.f-icon-box {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.f-content h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.f-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
}



/* Legal & Content Pages */
.legal-container,
.terms-container,
.privacy-container {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    padding: 4rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.legal-content h1,
.terms-content h1,
.privacy-content h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

.legal-intro,
.terms-intro {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.term-item,
.policy-section {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.term-item {
    display: flex;
    gap: 1.5rem;
}

.term-number {
    background: var(--primary);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.term-text h3,
.policy-section h2,
.policy-section h3 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.policy-section h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.term-text h3 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.term-text p,
.term-text ul,
.policy-section p,
.policy-section ul {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.term-text ul,
.policy-section ul {
    padding-left: 1.5rem;
}

.term-text li,
.policy-section li {
    margin-bottom: 0.3rem;
}

@media (max-width: 768px) {

    .legal-container,
    .terms-container,
    .privacy-container {
        padding: 1.5rem;
    }

    .term-item {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* FAQ & Helpdesk Styles */
.help-hero {
    text-align: center;
    padding: 4rem 1rem;
    margin-bottom: 2rem;
}

.help-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

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

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.topic-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s ease, background 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.topic-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
}

.topic-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.topic-card h3 {
    margin-bottom: 0.5rem;
    color: #fff;
}

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

.faq-section {
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.faq-category-title {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: #fff;
    border-left: 4px solid var(--primary);
    padding-left: 1rem;
}

details {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

details:hover {
    background: rgba(255, 255, 255, 0.04);
}

details[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(64, 224, 208, 0.3);
}

summary {
    padding: 1.2rem;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    color: #fff;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

details[open] summary::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.2rem 1.2rem 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0;
    padding-top: 1rem;
}

.support-cta {
    background: linear-gradient(135deg, rgba(64, 224, 208, 0.1), rgba(147, 112, 219, 0.1));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.support-cta h2 {
    margin-bottom: 1rem;
}

/* Vertical Timeline (Redesign) */
.timeline-section {
    position: relative;
    padding: 60px 0;
}

.timeline-vertical {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

.timeline-vertical::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
}

.v-timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.v-timeline-item:nth-child(odd) {
    left: 0;
    text-align: right;
}

.v-timeline-item:nth-child(even) {
    left: 50%;
    text-align: left;
}

.v-node {
    position: absolute;
    top: 24px;
    width: 40px;
    height: 40px;
    background: var(--dark-bg);
    border: 2px solid var(--primary);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--primary);
}

.v-timeline-item:nth-child(odd) .v-node {
    right: -20px;
}

.v-timeline-item:nth-child(even) .v-node {
    left: -20px;
}

.v-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    position: relative;
    transition: var(--transition);
}

.v-content:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}

.v-content h3 {
    margin-bottom: 0.5rem;
    color: #fff;
}

.v-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .timeline-vertical::before {
        left: 20px;
    }

    .v-timeline-item {
        width: 100%;
        padding-left: 60px;
        padding-right: 0;
    }

    .v-timeline-item:nth-child(odd),
    .v-timeline-item:nth-child(even) {
        left: 0;
        text-align: left;
    }

    .v-timeline-item:nth-child(odd) .v-node,
    .v-timeline-item:nth-child(even) .v-node {
        left: 0;
        right: auto;
    }
}


/* Contact Page Redesign */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info-grid {
    display: grid;
    gap: 1.5rem;
}

.contact-card-modern {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: var(--transition);
}

.contact-card-modern:hover {
    border-color: var(--primary);
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.05);
}

.contact-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(0, 242, 234, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary);
    flex-shrink: 0;
}

.contact-details h4 {
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
    color: #fff;
}

.contact-details p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.contact-details a {
    color: var(--primary);
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

.form-modern {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 3rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

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

.form-modern input,
.form-modern select,
.form-modern textarea {
    width: 100%;
    background: rgba(10, 10, 18, 0.6);
    border: 1px solid var(--glass-border);
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    font-family: var(--font-body);
    transition: var(--transition);
    font-size: 1rem;
}

.form-modern input:focus,
.form-modern select:focus,
.form-modern textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.1);
}

@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Process Flow Design - Refined */
.process-container {
    position: relative;
    margin-top: 5rem;
    padding: 0 1rem;
}

.process-line {
    position: absolute;
    top: 60px;
    /* Aligned with center of icon */
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 0;
}

/* Add arrows to line using pseudo-elements on the line container is tricky with fluid width. 
   Instead, we can add arrow markers to the content if needed, but a clean line is often better for modern layouts. 
   We will make the line more subtle. */

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.process-card {
    text-align: center;
    position: relative;
    padding: 1rem;
    /* Removed card border/bg to match the clean 'floating' look of the screenshot */
    background: transparent;
    border: none;
    transition: var(--transition);
}

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

.process-icon-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--primary);
    /* Main circle color - Cyan */
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
    z-index: 2;
}

/* Concentric Ripples */
.process-icon-wrapper::before,
.process-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(0, 242, 234, 0.2);
    z-index: -1;
}

.process-icon-wrapper::before {
    width: 160px;
    height: 160px;
    background: rgba(0, 242, 234, 0.05);
}

.process-icon-wrapper::after {
    width: 200px;
    height: 200px;
    border: 1px solid rgba(0, 242, 234, 0.1);
}

.process-icon {
    font-size: 3rem;
    color: var(--dark-bg);
    /* Icon color matches bg for contrast against cyan */
    z-index: 3;
}

.process-step-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--glass-border);
}

.process-content p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 300px;
    margin: 0 auto;
}

/* Arrows between steps (Desktop only) */
.process-card:not(:last-child)::after {
    content: '\2192';
    position: absolute;
    top: 50px;
    right: -1rem;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.1);
    font-family: monospace;
    display: none;
    /* Hidden by default, difficult to position perfectly grid-wise without absolute tweaks */
}

/* Responsive Process */
@media (max-width: 900px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .process-line {
        width: 2px;
        height: 100%;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.1);
    }

    .process-icon-wrapper {
        margin-bottom: 2rem;
    }
}

/* refined_typography.css */
.process-content h3 {
    color: var(--text-main);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.process-content p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto;
}

/* Ensure legibility on smaller screens */
@media (max-width: 480px) {
    .process-content p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .process-content h3 {
        font-size: 1.15rem;
    }

    .process-icon-wrapper {
        width: 100px;
        height: 100px;
    }

    .process-icon-wrapper::before {
        width: 140px;
        height: 140px;
    }

    .process-icon-wrapper::after {
        width: 180px;
        height: 180px;
    }

    .process-icon {
        font-size: 2.5rem;
    }
}

/* =========================================
   About Us Redesign - New Styles
   ========================================= */

/* Hero Redesign */
.about-hero-redesign {
    padding: 180px 0 100px;
    text-align: center;
    background: radial-gradient(circle at 50% 30%, rgba(0, 242, 234, 0.05) 0%, transparent 60%);
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #fff;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.btn-outline-glow {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 12px 36px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-block;
}

.btn-outline-glow:hover {
    background: var(--primary);
    color: var(--dark-bg);
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
    transform: translateY(-2px);
}

/* Mission & Vision Grid */
.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.mv-card {
    background: rgba(10, 10, 18, 0.6);
    border: 1px solid var(--glass-border);
    padding: 3.5rem;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.mv-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* Top border accents */
.mv-card:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--secondary);
    /* Orange/Red for Mission */
    box-shadow: 0 0 10px var(--secondary);
}

.mv-card:last-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00f2ea, #00ff88);
    /* Cyan/Green for Vision */
    box-shadow: 0 0 10px #00f2ea;
}

.mv-icon {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    background: -webkit-linear-gradient(45deg, #fff, #888);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Specific icon colors based on screenshot hints */
.mv-card:first-child .mv-icon {
    background: none;
    -webkit-text-fill-color: initial;
    color: var(--secondary);
}

.mv-card:last-child .mv-icon {
    background: none;
    -webkit-text-fill-color: initial;
    color: #ffd700;
    /* Eye icon looked golden/whitish, using gold/white mix or just let it be white */
    color: #fff;
}

.mv-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
}

.mv-card p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 1rem;
}


/* Core Values Redesign */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.value-box {
    background: rgba(15, 15, 25, 0.5);
    /* Slightly lighter than bg */
    border: 1px solid var(--glass-border);
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
}

.value-box:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--primary);
    transform: translateY(-5px);
}

.v-icon-wrapper {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-box:nth-child(1) .v-icon-wrapper {
    color: #00f2ea;
}

/* Globe - Cyan */
.value-box:nth-child(2) .v-icon-wrapper {
    color: #f1c40f;
}

/* Heart - Gold/Yellow */
.value-box:nth-child(3) .v-icon-wrapper {
    color: #eebb44;
}

/* Bulb - Yellow */
.value-box:nth-child(4) .v-icon-wrapper {
    color: #9b59b6;
}

/* Clock - Purple */

.value-box h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    color: #fff;
}

.value-box p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Philosophy Section */
.philosophy-section {
    text-align: center;
    padding: 100px 0;
    position: relative;
}

/* Dotted line separator before philosophy if needed, or just relying on spacing */
.philosophy-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.philosophy-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.philosophy-section p {
    max-width: 700px;
    margin: 0 auto 3rem;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

/* Responsive Adjustments for About Page */
@media (max-width: 900px) {
    .hero-title {
        font-size: 3rem;
    }

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

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: 2.5rem;
    }

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

/* =========================================
   Advertisers Page Redesign - New Styles
   ========================================= */

/* Hero Specifics */
.adv-hero {
    text-align: center;
    padding: 180px 0 100px;
}

.hero-tag {
    color: var(--primary);
    letter-spacing: 3px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: inline-block;
    border: 1px solid rgba(0, 242, 234, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    background: rgba(0, 242, 234, 0.05);
}

.btn-primary-glow {
    background: var(--primary);
    color: var(--dark-bg);
    padding: 12px 36px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    box-shadow: 0 0 20px rgba(0, 242, 234, 0.4);
    transition: var(--transition);
    display: inline-block;
}

.btn-primary-glow:hover {
    box-shadow: 0 0 40px rgba(0, 242, 234, 0.6);
    transform: translateY(-2px);
}

/* Solutions Grid */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.solution-card {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: 16px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.solution-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--glass-border);
}

.sol-icon {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
    /* All icons cyan based on screenshot look, or text-gradient */
    background: linear-gradient(135deg, #00f2ea 0%, #ffffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.solution-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

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

/* Precision Targeting */
.targeting-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
}

.target-box {
    background: rgba(10, 10, 20, 0.8);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition);
}

.target-box:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.t-icon {
    font-size: 1.8rem;
    color: var(--primary);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 242, 234, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.target-box h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: #fff;
}

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

/* Analytics & Dashboard Mockup */
.analytics-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.analytics-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.analytics-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.analytics-features {
    display: flex;
    gap: 2rem;
}

.af-item {
    font-size: 0.9rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.dashboard-mockup {
    background: #0f0f1a;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    padding: 20px;
    position: relative;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    min-height: 300px;
}

.dashboard-mockup::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 242, 234, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.dm-header {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.dm-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.dm-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dm-graph {
    height: 150px;
    background: linear-gradient(180deg, rgba(0, 242, 234, 0.2) 0%, transparent 100%);
    border-top: 2px solid var(--primary);
    border-radius: 4px;
    position: relative;
}

.dm-row {
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    width: 100%;
}

.dm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    background: rgba(10, 10, 18, 0.3);
    backdrop-filter: blur(2px);
    font-weight: 700;
    gap: 1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Responsive Adv */
@media (max-width: 900px) {
    .analytics-container {
        grid-template-columns: 1fr;
    }

    .targeting-grid,
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .targeting-grid,
    .solutions-grid {
        grid-template-columns: 1fr;
    }

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

/* =========================================
   Publishers Page Redesign - New Styles
   ========================================= */

/* Affiliate Hero */
.affiliate-hero {
    text-align: center;
    padding: 180px 0 100px;
}

/* Flexible Payment Models */
.payment-models-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pm-item {
    background: rgba(10, 20, 30, 0.6);
    border-left: 4px solid var(--primary);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

.pm-item:hover {
    background: rgba(10, 20, 30, 0.9);
    padding-left: 2.5rem;
    border-left-color: #fff;
}

.pm-item h3 {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 800;
}

.pm-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Affiliate Program Features */
.affiliate-program-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 5rem;
}

.program-visual {
    padding-right: 2rem;
}

.program-features-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.feature-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.fr-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.feature-row h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.feature-row p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Responsive Pub */
@media (max-width: 900px) {
    .affiliate-program-grid {
        grid-template-columns: 1fr;
    }

    .program-visual {
        padding-right: 0;
        text-align: center;
        margin-bottom: 2rem;
    }
}

/* =========================================
   Contact Page Redesign - New Styles
   ========================================= */

.contact-section {
    padding-bottom: 5rem;
}

.contact-grid-redesign {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Contact Info Cards */
.contact-methods-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.c-card {
    background: rgba(10, 20, 30, 0.4);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    transition: var(--transition);
}

.c-card:hover {
    background: rgba(15, 25, 40, 0.6);
    border-color: var(--primary);
    transform: translateX(5px);
}

.cc-icon {
    width: 45px;
    height: 45px;
    background: rgba(0, 242, 234, 0.1);
    color: var(--primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.c-card h4 {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 0.3rem;
}

.c-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    line-height: 1.4;
}

.c-link {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Modern Form */
.contact-form-wrapper {
    background: #0b0b14;
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.modern-form .form-group {
    margin-bottom: 1.5rem;
}

.modern-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.modern-form input,
.modern-form select,
.modern-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 12px 15px;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
}

.modern-form input:focus,
.modern-form select:focus,
.modern-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(0, 242, 234, 0.05);
    box-shadow: 0 0 15px rgba(0, 242, 234, 0.1);
}

.modern-form option {
    background-color: #0b0b14;
    color: #fff;
}

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

/* Responsive Contact */
@media (max-width: 900px) {
    .contact-grid-redesign {
        grid-template-columns: 1fr;
    }
}

.feature-box-head {
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-box-body {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.feature-img-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(0, 242, 234, 0.2));
}

.feature-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Specific Header Colors/Gradients */
.head-verticals {
    background: linear-gradient(90deg, #00f2ea 0%, #0072ff 100%);
}

.head-analytics {
    background: linear-gradient(90deg, #8e2de2 0%, #4a00e0 100%);
}

.head-payouts {
    background: linear-gradient(90deg, #f12711 0%, #f5af19 100%);
}

.head-traffic {
    background: linear-gradient(90deg, #ff0099 0%, #493240 100%);
}

/* Restoring Broken Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 2rem;
}

.payment-method-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.payment-method-box:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-3px);
    border-color: var(--primary);
}

.pm-icon {
    font-size: 1.8rem;
}

.pm-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

/* Feature Visual Right Side */
.feature-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.feature-visual img:hover {
    transform: scale(1.02);
}

@media (max-width: 900px) {
    .feature-split-container {
        grid-template-columns: 1fr;
    }

    .feature-visual {
        order: -1;
        margin-bottom: 30px;
    }
}

/* High-Performing Formats: Beautiful Box */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 2rem;
}

.format-item {
    background: rgba(255, 255, 255, 0.03);
    /* Dark Glass */
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.format-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.format-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.format-item:hover::before {
    transform: translateX(100%);
}

.format-item h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-weight: 700;
}

.format-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Payment Methods: Big Friendly Box */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 2rem;
}

.payment-method-box {
    background: linear-gradient(135deg, rgba(16, 24, 60, 0.9), rgba(20, 30, 80, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.payment-method-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 70, 255, 0.2);
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(20, 30, 80, 0.95), rgba(25, 40, 100, 0.95));
}

.pm-icon {
    font-size: 2.5rem;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.pm-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

@media (max-width: 600px) {
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }

    .payment-method-box {
        flex-direction: column;
        padding: 20px;
    }
}

/* Format Icons */
.format-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(0, 242, 234, 0.3));
    transition: transform 0.3s ease;
}

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

/* Enhanced Format Visuals for "User Friendly" & "Beautiful" Look */
.format-item {
    padding: 40px 25px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

.format-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 25px;
    filter: drop-shadow(0 0 20px rgba(0, 242, 234, 0.4));
}

.format-item h3 {
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.format-item p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Specific Glows for each Format */
.formats-grid .format-item:nth-child(1):hover .format-icon {
    filter: drop-shadow(0 0 25px rgba(255, 60, 60, 0.6));
}

.formats-grid .format-item:nth-child(2):hover .format-icon {
    filter: drop-shadow(0 0 25px rgba(0, 150, 255, 0.6));
}

.formats-grid .format-item:nth-child(3):hover .format-icon {
    filter: drop-shadow(0 0 25px rgba(0, 255, 150, 0.6));
}

.formats-grid .format-item:nth-child(4):hover .format-icon {
    filter: drop-shadow(0 0 25px rgba(255, 200, 0, 0.6));
}

/* RECHARGED: High-Performing Formats (Premium Cards) */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 3rem;
}

.format-item {
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    background: #0e0e1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.format-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 242, 234, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.format-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 40px auto 30px auto;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s ease;
    z-index: 2;
}

.format-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    z-index: 1;
    transition: opacity 0.3s;
}

.format-item:hover .format-icon {
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.4));
}

.format-item h3 {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding-top: 10px;
    z-index: 2;
    position: relative;
}

.format-item p {
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    padding-bottom: 30px;
    margin-top: 5px;
    z-index: 2;
    position: relative;
}

.format-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

@media (max-width: 1024px) {
    .formats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .formats-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .format-item {
        flex-direction: column;
    }

    .format-icon {
        width: 80px;
        height: 80px;
        margin: 30px auto 20px auto;
    }

    .format-item h3 {
        font-size: 1.3rem;
    }
}

/* Apple-Style Bento Grid (Premium Mac Aesthetic) */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 3rem;
    padding: 0 10px;
}

.format-item {
    background: #1c1c1e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 32px;
    height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.format-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.format-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    background: #252528;
}

.format-item:hover::before {
    opacity: 0.8;
}

.format-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    margin-bottom: auto;
    margin-top: 30px;
    align-self: center;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.format-item:hover .format-icon {
    transform: scale(1.1) translateY(-10px);
}

.format-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #f5f5f7;
    margin: 0;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
}

.format-item p {
    font-size: 1rem;
    color: #86868b;
    margin: 0;
    line-height: 1.4;
    font-weight: 400;
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .formats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .formats-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .format-item {
        height: auto;
        min-height: 280px;
    }
}



/* HERO LAYOUT SWAP: Image Left, Text Right */
@media (min-width: 901px) {
    .hero-container {
        /* flex-direction: row-reverse !important; Removed to fix layout */
        gap: 6rem !important;
    }

    .hero-content {
        text-align: left !important;
    }

    .hero-image-container {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}

/* Specific Mobile Footer Fixes - Appended for Specificity */
@media (max-width: 600px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        /* Tighter gap for small screens */
        text-align: left !important;
        align-items: start !important;
    }

    .footer-brand {
        grid-column: 1 / -1;
        text-align: left !important;
        align-items: flex-start !important;
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    .footer-brand .logo {
        margin: 0 !important;
    }

    .footer-brand .company-bio {
        text-align: left !important;
        margin: 1rem 0 !important;
    }

    .footer-brand .footer-address {
        justify-content: flex-start !important;
    }

    .footer-links {
        width: auto !important;
        text-align: left !important;
        display: block !important;
        margin: 0 !important;
    }

    .footer-links h4 {
        text-align: left !important;
        font-size: 0.9rem !important;
        /* Slightly smaller for 3 cols */
        margin-bottom: 1rem !important;
        color: #008080 !important;
        position: relative;
        display: inline-block;
    }

    /* Force Yellow Underline */
    .footer-links h4::after {
        background-color: #ffba08 !important;
        width: 100% !important;
        height: 2px !important;
        bottom: -5px !important;
        /* Ensure it's visible */
    }

    .footer-links ul li {
        text-align: left !important;
        justify-content: flex-start !important;
        display: block !important;
    }

    .footer-links ul li a {
        justify-content: flex-start !important;
        font-size: 0.75rem !important;
        /* Compact font */
        white-space: nowrap;
    }
}

/* Mobile Fixes for Formats & Payment Methods */
@media (max-width: 768px) {

    /* Reduce big payment/format headers */
    .section-heading-payment {
        font-size: 0.95rem !important;
        padding: 0.6rem 1.2rem !important;
        margin-bottom: 2rem !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Formats Grid Compactness */
    .format-card {
        padding: 1.5rem 1rem !important;
        min-height: auto;
    }

    .format-card h3 {
        font-size: 1.2rem !important;
    }

    .format-image {
        max-width: 180px !important;
        /* Cap image size */
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    /* Payment Methods Compactness */
    .payment-methods-grid {
        gap: 1rem !important;
        /* Reduce gap */
    }

    .payment-method-box {
        padding: 1rem 1.2rem !important;
        min-width: 0 !important;
        /* Allow shrinking */
        width: 100% !important;
        /* Full width */
        justify-content: center !important;
    }

    .pm-icon {
        font-size: 1.4rem !important;
    }

    .pm-name {
        font-size: 1rem !important;
    }

    /* Section Headers Mobile Adjustment */
    .section-header h2 {
        font-size: 1.8rem !important;
        line-height: 1.3;
    }
}