/* --- Basic Setup & Variables --- */
:root {
    --bg-dark: #0A0A10;
    --bg-light: #161625;
    --primary-pink: #FF50DE;
    --primary-purple: #7F00FF;
    --text-light: #FFFFFF;
    --text-medium: #A1A1A6;
    --border-color: rgba(255, 255, 255, 0.1);
    --font-family: 'Inter', sans-serif;
    --glow-shadow: 0 0 15px rgba(255, 80, 222, 0.6), 0 0 25px rgba(255, 80, 222, 0.4);
    --success-green: #00ff89;
}

::selection {
    background-color: var(--primary-pink);
    color: var(--bg-dark);
}

html { scroll-behavior: smooth; }

*:focus {
    outline: none;
}

body {
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--bg-dark);
    color: var(--text-light);
    overflow-x: hidden;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="white" fill-opacity="0.7"/></svg>') 12 12, auto;
}
body.menu-open,
body.modal-open {
    overflow: hidden;
}

/* --- Interactive Spotlight Cursor --- */
.spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 80, 222, 0.1), transparent 60%);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s ease-out;
    will-change: transform;
}
@media (max-width: 767px) {
    .spotlight { display: none; }
    body { cursor: auto; }
}

/* --- Animated Aurora Background Glows --- */
.aurora-glow {
    position: fixed;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.15;
    z-index: -2;
}
.aurora-1 { width: 600px; height: 600px; background: var(--primary-pink); top: -10%; left: -15%; }
.aurora-2 { width: 500px; height: 500px; background: var(--primary-purple); top: 40%; right: -20%; animation-duration: 25s; }
.aurora-3 { width: 400px; height: 400px; background: #00AFFF; bottom: -15%; left: 20%; animation-duration: 18s; }
@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.2); }
}

/* --- Particle Background --- */
#particles-js { position: fixed; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; }

/* --- Reusable Components --- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }
section { padding: 9rem 0; position: relative; }
.section-header { text-align: center; max-width: 750px; margin: 0 auto 4rem auto; }
.section-title { font-size: 3rem; font-weight: 900; margin-bottom: 1rem; line-height: 1.2; }
.section-title-small { font-weight: 600; color: var(--text-medium); text-align: center; margin-bottom: 2.5rem; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.9rem; }
.section-subtitle { font-size: 1.1rem; color: var(--text-medium); line-height: 1.7; max-width: 600px; margin: 0 auto; }

/* --- Gradient Button --- */
.btn { display: inline-block; padding: 1rem 2rem; border-radius: 100px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; border: 2px solid transparent; -webkit-user-select: none; user-select: none; position: relative; overflow: hidden; }
.btn-primary { z-index: 1; color: var(--text-light); background: linear-gradient(90deg, var(--primary-pink), var(--primary-purple)); background-size: 200% 200%; animation: gradient-pan 4s ease infinite; box-shadow: 0 5px 20px rgba(255, 80, 222, 0.3); }
.btn-primary:hover { transform: scale(1.08) translateY(-3px); box-shadow: 0 10px 35px rgba(255, 80, 222, 0.5); animation-duration: 2s; }
@keyframes gradient-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-secondary { color: var(--text-medium); font-weight: 600; }
.btn-secondary:hover { color: var(--text-light); }
.btn-large { font-size: 1.1rem; padding: 1.2rem 3rem; }

/* --- Header & Navigation --- */
.header { position: fixed; top: 2rem; left: 0; width: 100%; z-index: 1001; }
.header-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; }
.header-logo-wrapper, .header-menu-button { background: rgba(30, 30, 30, 0.5); border: 1px solid var(--border-color); border-radius: 50px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all 0.3s ease; }
.header-logo-wrapper { padding: 0.5rem 0.8rem; }
.header-logo-wrapper:hover { border-color: var(--text-light); }
.logo-svg { height: 35px; width: auto; display: block; }
.logo-svg .cls-1 { fill: var(--text-light); }
.logo-svg .cls-3 { fill: var(--primary-pink); }
.header-menu-button { cursor: pointer; padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.header-menu-button:hover { border-color: var(--text-light); }
.header-menu-button .line { width: 24px; height: 2px; background-color: var(--text-light); display: block; transition: all 0.3s ease-in-out; }
.menu-open .header-menu-button .line1 { transform: rotate(45deg) translate(4px, 5px); }
.menu-open .header-menu-button .line2 { transform: rotate(-45deg) translate(3px, -4px); }
.nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 16, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.menu-open .nav-overlay { opacity: 1; visibility: visible; }
.nav-fullscreen { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.nav-link { font-size: 2.5rem; font-weight: 700; color: var(--text-medium); text-decoration: none; padding: 0.5rem 1rem; transition: all 0.3s ease; }
.nav-link:hover { color: var(--text-light); transform: scale(1.1); }
.nav-link.cta { color: var(--primary-pink); margin-top: 2rem; }

/* --- Section 1: Hero --- */
.hero { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding-top: 6rem; padding-bottom: 6rem; }
.hero-preheadline { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(90deg, var(--primary-pink), var(--primary-purple), var(--primary-pink)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-pan 6s linear infinite; }
.hero-headline { font-size: 4.5rem; font-weight: 900; margin: 0 0 1.5rem 0; line-height: 1.1; }
.hero-subheading { font-size: 1.2rem; color: var(--text-medium); margin: 0 auto 2.5rem auto; line-height: 1.7; max-width: 550px; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.hero-image-wrapper { display: flex; justify-content: center; align-items: center; }
.hero-image { max-width: none; width: 700px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); margin-right: -150px; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); mask-image: linear-gradient(to bottom, black 80%, transparent 100%); }

/* --- Section 2: Social Proof --- */
.social-proof { 
    background: var(--bg-light); 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
    padding-top: 6rem; 
    padding-bottom: 0; 
    position: relative; 
    z-index: 2; 
    margin-top: -150px; 
    overflow: hidden; 
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Client Reel */
.client-reel-container { 
    width: 100%; 
    padding: 3rem 0; 
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); 
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); 
    background: linear-gradient(90deg, rgba(255, 80, 222, 0.8), rgba(127, 0, 255, 0.8), rgba(255, 80, 222, 0.8));
    background-size: 200% 200%;
    animation: gradient-pan 8s ease infinite;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 50%, black 50%, transparent 100%);
}
.client-reel { display: flex; flex-wrap: nowrap; align-items: center; gap: 5rem; animation: scroll 40s linear infinite; }
.client-reel img { height: 80px; max-width: 180px; flex-shrink: 0; filter: grayscale(1); opacity: 0.7; transition: all 0.3s ease-in-out; }
.client-reel-container:hover .client-reel { animation-play-state: paused; }
.client-reel img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.2); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Testimonials Wrapper */
.testimonials-wrapper {
    background: rgba(10, 10, 16, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
}
.testimonials {
    display: block; /* Override the grid display */
    grid-template-columns: none;
    gap: 0;
}
/* Adjust the testimonial card for the horizontal reel */
.testimonial-card {
    width: 400px; /* Give cards a consistent width */
    flex-shrink: 0; /* Prevent cards from shrinking */
    background: var(--bg-dark); 
    padding: 2.5rem;
    border-radius: 16px; 
    border: 1px solid var(--border-color);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer; /* Indicate card is clickable */
    position: relative; /* Needed for icon positioning */
}

/* The "Glow Up" Hover Effect */
.testimonial-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 80, 222, 0.5);
    box-shadow: var(--glow-shadow);
}
.testimonial-card blockquote { font-size: 1.3rem; font-weight: 500; line-height: 1.6; margin: 0 0 1.5rem 0; color: var(--text-light); }
.testimonial-card cite { color: var(--text-medium); font-style: normal; font-weight: 600; }
.testimonial-card cite span { display: block; color: var(--text-light); font-weight: 700; margin-bottom: 0.25rem; }
.testimonial-reel-container {
    width: 100%;
    overflow: hidden;
    padding: 4rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonial-reel {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    width: max-content;
    animation: scroll-reverse 60s linear infinite;
    align-items: flex-start;
}

/* This is the key: pause the animation when hovering the container */
.testimonial-reel-container:hover .testimonial-reel {
    animation-play-state: paused;
}

/* Define the reverse scroll animation */
@keyframes scroll-reverse {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* --- Section 3: Problem --- */
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Default to a single column on mobile */
    gap: 2rem;
}
.problem-card { background: var(--bg-light); padding: 2rem; border-radius: 16px; border: 1px solid var(--border-color); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.problem-icon { width: 70px; height: 70px; transition: filter 0.3s ease; }
.problem-card h3 { font-size: 1.3rem; margin: 1rem 0; }
.problem-card p { color: var(--text-medium); line-height: 1.7; margin: 0; }
.problem-card:hover {
    transform: translateY(-8px);
    border-color: transparent; 
    box-shadow: var(--glow-shadow); 
}
.problem-card:hover .problem-icon { filter: drop-shadow(var(--glow-shadow)); }

/* --- Section 4: Solution --- */
.solution { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.solution .section-subtitle { margin-bottom: 2rem; }
.solution-image-wrapper img { width: 100%; border-radius: 16px; }

/* --- Section 5: Feature Grid (Glassmorphism) --- */
.features { background: transparent; border: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.features .section-header .section-title { text-shadow: 0 0 25px rgba(255, 80, 222, 0.3); }
.feature-card:hover { 
    transform: translateY(-8px) 
    scale(1.05); 
    border-color: transparent; 
    box-shadow: var(--glow-shadow);
}
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.feature-card {
    background: var(--bg-dark);
    padding: 3rem 2rem; /* Increased top/bottom padding */
    border-radius: 16px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center; /* Center everything */
    position: relative; /* Crucial for the absolute icon */
    overflow: hidden; /* Hides the icon when it's outside */
 }
.feature-card h4 { font-size: 1.2rem; margin: 0 0 0.5rem 0; }
.feature-card p { color: var(--text-medium); margin: 0; line-height: 1.6; }

.feature-card .feature-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
    position: absolute; /* Key for positioning */
    top: 2rem;
    left: 50%;
    transform: translate(-50%, -150%); /* Start hidden above */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* A smooth, premium ease */
}
.feature-card h4, .feature-card p {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* On hover... */
.feature-card:hover .feature-icon {
    transform: translate(-50%, 0); /* Icon slides down into view */
    opacity: 1;
}

.feature-card:hover h4 {
    transform: translateY(35px); /* Title slides down */
}

.feature-card:hover p {
    transform: translateY(40px); /* Paragraph slides down */
    opacity: 0.7; /* Subtly fade the text to focus on the icon/title */
}

/* --- NEW: Floating Animation --- */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* --- Section 6: Deep Dive Scrollytelling --- */
.deep-dive { padding-bottom: 0rem; }
/* Hide mobile layout by default */
.deep-dive-mobile { display: none; }
.deep-dive-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: flex-start; }
.sticky-col { position: sticky; top: 15vh; height: 70vh; }
.sticky-content-wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    gap: 2rem;
    perspective: 1500px;
}
.step-title-container { position: relative; flex-shrink: 0; min-height: 5rem; }
.step-title { font-size: 2rem; line-height: 1.3; font-weight: 900; position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; }
.mockup-container { 
    position: relative; 
    top: 10vh; 
    width: 100%; 
    flex-grow: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    will-change: transform; 
    transform-style: preserve-3d;
    filter: blur(0px);
}
.mockup-screen { position: absolute; max-width: 90%; max-height: 90%; opacity: 0; visibility: hidden; }
.scroll-step { min-height: 75vh; display: flex; flex-direction: column; justify-content: center; }
.step-content { background: var(--bg-light); padding: 2.5rem; border-radius: 16px; border: 1px solid var(--border-color); transition: all 0.4s ease; }
.step-content.glowing { border-color: rgba(255, 80, 222, 0.6); box-shadow: var(--glow-shadow); transform: scale(1.02); }
.step-content h4 { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem 0; color: var(--primary-pink); }
.step-content p { color: var(--text-medium); margin: 0 0 1.5rem 0; line-height: 1.7; }
.step-content ul { list-style: none; padding: 0; margin: 0 0 1.5rem 0; color: var(--text-medium); }
.step-content ul li { padding-left: 25px; position: relative; margin-bottom: 0.75rem; line-height: 1.6; }
.step-content ul li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--primary-pink); font-weight: 700; }
.step-icon { width: 48px; height: 48px; display: block; margin-top: 1rem; }
.scroll-step:first-child {
    margin-top: 10vh;
}

/* --- Section 7: White-Label --- */
.white-label { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: -30vh;}
.white-label .white-label-content { order: -1; }
.white-label .section-subtitle { margin-bottom: 2rem; }
.white-label-image-wrapper img { width: 100%; border-radius: 16px; }
.use-case-grid {
    /* This ensures a 4-column layout on large screens, and responsive wrapping on smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem; /* A bit more spacing */
}

.use-case-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
    position: relative; /* Needed for the gradient border */
    overflow: hidden; /* Keeps the gradient border neat */
    border: 1px solid var(--border-color); /* The default border */
}

.use-case-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.use-case-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.use-case-card p {
    color: var(--text-medium);
    margin: 0;
    line-height: 1.7;
    transition: color 0.3s ease-in-out;
}

.use-case-card:hover p {
    color: var(--text-light);
}

/* The "Diamond Standard" Hover Effect */
.use-case-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -1px; /* To sit behind the border */
    border-radius: 17px; /* Matches the card's border-radius + border width */
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.use-case-card:hover {
    transform: translateY(-10px); /* Lift the card */
    border-color: transparent; /* Hide the default border to reveal the gradient */
}

.use-case-card:hover::before {
    opacity: 1; /* Show the glowing gradient border on hover */
}

.use-case-grid-wrapper {
    max-width: 1000px; /* Constrain the width for a more balanced look */
    margin: 0 auto; /* Center the grid container */
}

.use-case-grid {
    grid-template-columns: repeat(2, 1fr); /* A deliberate 2x2 grid */
    gap: 2.5rem; /* Increase gap for a more premium feel */
}

.use-case-card {
    background: var(--bg-light); /* Give cards a slightly different background */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px; /* More rounded corners */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Smooth transitions */
}

.use-case-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1.5rem;
}

.use-case-card h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.use-case-card p {
    color: var(--text-medium);
    margin: 0;
    line-height: 1.7;
}

.use-case-card p strong {
    color: var(--text-light);
    font-weight: 600;
}

/* The "Diamond Standard" Hover Effect */
.use-case-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    margin: -1px;
    border-radius: inherit; /* Inherit the card's border-radius */
    background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple));
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.use-case-card > * {
    position: relative; /* Ensure card content sits above the gradient pseudo-element */
    z-index: 1;
}

.use-case-card:hover {
    transform: translateY(-12px); /* Lift the card more */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: transparent;
}

.use-case-card:hover::before {
    opacity: 1; /* Show the glowing gradient border */
}

.use-case-image-wrapper {
    max-width: 800px; /* Or whatever size feels right */
    margin: 0 auto 5rem auto; /* Center it and add 5rem of space below it */
}

.use-case-image-wrapper img {
    width: 100%;
    border-radius: 16px; /* Match the site's aesthetic */
}

/* --- Section 8 & 9 --- */
.contact-section .container { text-align: center; }
.contact-section .hero-headline { font-size: 3.5rem; }
.contact-section .hero-subheading { max-width: 700px; margin: 0 auto; }
.form-container {
    max-width: 800px;
    margin: 3rem auto 0 auto;
    position: relative; /* Crucial for positioning the glows */
    border-radius: 20px;
    padding: 0; /* Padding is now on the wrapper */
    background: transparent; /* No background color here */
    border: none; /* The glow will create the border */
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
.form-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    z-index: 1; /* Sits just behind the wrapper */
    pointer-events: none;
    animation: breathing-glow-pink 7s ease-in-out infinite;
}

.form-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    z-index: 1;
    pointer-events: none;
    animation: breathing-glow-purple 5s ease-in-out 1s infinite;
}

/* 5. The animation keyframes (no changes here, they are correct) */
@keyframes breathing-glow-pink {
    0% {
        box-shadow: 0 0 10px 0px var(--primary-pink),
                    0 0 20px 0px var(--primary-pink);
    }
    50% {
        box-shadow: 0 0 25px 5px var(--primary-pink),
                    0 0 50px 10px var(--primary-pink);
    }
    100% {
        box-shadow: 0 0 10px 0px var(--primary-pink),
                    0 0 20px 0px var(--primary-pink);
    }
}

@keyframes breathing-glow-purple {
    0% {
        box-shadow: 0 0 12px 0px var(--primary-purple),
                    0 0 25px 0px var(--primary-purple);
    }
    50% {
        box-shadow: 0 0 30px 6px var(--primary-purple),
                    0 0 60px 12px var(--primary-purple);
    }
    100% {
        box-shadow: 0 0 12px 0px var(--primary-purple),
                    0 0 25px 0px var(--primary-purple);
    }
}
.form-row { display: flex; gap: 2rem; }
.input-group { position: relative; margin-bottom: 2rem; text-align: left; width: 100%; }
.input-group input, .input-group textarea { width: 100%; padding: 1rem 0 0.5rem 0; background: transparent; border: none; border-bottom: 2px solid var(--border-color); color: var(--text-light); font-size: 1rem; font-family: inherit; transition: border-color 0.3s; position: relative; background-image: linear-gradient(90deg, var(--primary-pink), var(--primary-purple)); background-repeat: no-repeat; background-size: 0% 2px; background-position: left bottom; }
.input-group textarea { resize: vertical; }
.input-group label { position: absolute; left: 0; top: 1rem; color: var(--text-medium); pointer-events: none; transition: all 0.3s ease; }
.input-group input:focus, .input-group textarea:focus { outline: none; border-bottom-color: transparent; background-size: 100% 2px; }
.input-group input:focus + label, .input-group textarea:focus + label, .input-group input:valid + label, .input-group textarea:valid + label { top: -0.5rem; font-size: 0.8rem; color: var(--primary-pink); }
#contact-form button { margin-top: 1rem; width: 100%; }
.form-wrapper {
    position: relative;
    z-index: 2; /* Sits on top of the pseudo-elements */
    background: rgba(22, 22, 37, 0.8); /* The dark, semi-transparent background */
    padding: 3rem; /* Padding is moved here */
    border-radius: 20px; /* Match the container's radius */
    overflow: hidden; /* Keeps everything neat */
}
.form-wrapper .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 5px solid rgba(255, 255, 255, 0.2); border-top-color: var(--primary-pink); border-radius: 50%; opacity: 0; visibility: hidden; transition: all 0.3s; animation: spin 1s linear infinite; }
.form-wrapper.sending #contact-form { filter: blur(5px); opacity: 0.5; }
.form-wrapper.sending .spinner { opacity: 1; visibility: visible; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    background: rgba(22, 22, 37, 0.8);
    padding: 3rem;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
}
.success-icon { width: 80px; height: 80px; fill: #00C853; margin-bottom: 1rem; }
.form-success h3 { font-size: 2rem; color: var(--text-light); margin: 0 0 0.5rem 0; }
.form-success p { color: var(--text-medium); margin: 0; max-width: 300px; }
.form-container::before,
.form-container::after {
    transition: box-shadow 0.5s ease-in-out;
}

/* This is the class we will add with JavaScript */
/* It overrides the default pink/purple animations */
.form-container.form-success-glow::before {
    animation: breathing-glow-green-1 4s ease-in-out infinite;
}
.form-container.form-success-glow::after {
    animation: breathing-glow-green-2 6s ease-in-out 0.5s infinite;
}

/* Keyframes for the FIRST green glow layer */
@keyframes breathing-glow-green-1 {
    0% {
        box-shadow: 0 0 10px 0px var(--success-green),
                    0 0 20px 0px var(--success-green);
    }
    50% {
        box-shadow: 0 0 25px 5px var(--success-green),
                    0 0 50px 10px var(--success-green);
    }
    100% {
        box-shadow: 0 0 10px 0px var(--success-green),
                    0 0 20px 0px var(--success-green);
    }
}

/* Keyframes for the SECOND green glow layer */
@keyframes breathing-glow-green-2 {
    0% {
        box-shadow: 0 0 12px 0px var(--success-green),
                    0 0 25px 0px var(--success-green);
    }
    50% {
        box-shadow: 0 0 30px 6px var(--success-green),
                    0 0 60px 12px var(--success-green);
    }
    100% {
        box-shadow: 0 0 12px 0px var(--success-green),
                    0 0 25px 0px var(--success-green);
    }
}

/* --- Footer --- */
.footer { padding: 2.5rem 0; text-align: center; color: var(--text-medium); }
.footer p { margin: 0; font-size: 0.9rem; }

/* --- Responsive Design --- */
@media (min-width: 992px) { .section-title { font-size: 3.5rem; } .hero-headline { font-size: 5.5rem; } }

@media (min-width: 768px) { 
    .testimonials { grid-template-columns: 1fr 1fr; } /* Apply two-column grid */
    .solution { grid-template-columns: 1fr 1fr; } 
    .white-label { grid-template-columns: 1fr 1fr; } 
    .white-label .white-label-content { order: -1; } 
}

@media (max-width: 991px) { .hero { display: block; text-align: center; padding-top: 10rem; padding-bottom: 0; margin-bottom: 0; min-height: unset; } .hero-cta { align-items: center; } .hero-image-wrapper { margin-top: -3rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%); mask-image: linear-gradient(to bottom, transparent 0%, black 40%); } .hero-image { width: 90%; max-width: 500px; margin: 0 auto; } .social-proof { margin-top: -150px; } .solution-image-wrapper img, .white-label-image-wrapper img { width: 100%; margin-left: 0; } }
@media (max-width: 767px) { 
    .hero-image-wrapper { margin-top: -3rem; } .hero-image { max-width: 450px; } .social-proof { margin-top: -100px; } section { padding: 6rem 0; } .hero-headline { font-size: 3rem; } .section-title { font-size: 2.5rem; } .contact-section .hero-headline { font-size: 2.8rem; } .solution, .white-label { gap: 3rem; } .white-label .white-label-image-wrapper { order: -1; } .nav-link { font-size: 2rem; } .client-reel { gap: 3rem; } .client-reel img { height: 60px; } .form-row { flex-direction: column; gap: 0; } .form-wrapper { padding: 2rem; } 
    .problem-grid  {
        display: grid;
        grid-template-columns: 1fr; /* Default to a single column on mobile */
        gap: 2rem;
    }
    .use-case-grid {
        display: grid;
        grid-template-columns: 1fr; /* Default to a single column on mobile */
        gap: 2rem;
    }
    .solution {
        grid-template-columns: 1fr; /* Stack the columns */
        text-align: center;
    }
    
    .solution-image-wrapper {
        order: 2; /* Move the image below the text */
    }
    
    .solution-content {
        order: 1;
    }
    /* --- NEW RULES FOR DEEP DIVE MOBILE --- */
    .deep-dive-desktop {
        display: none; /* Hide the entire desktop grid */
    }
    .deep-dive-mobile {
        display: block; /* Show the mobile container */
    }
    .mobile-step {
        margin-bottom: 4rem; /* Space between each feature step */
    }
    .step-title-mobile {
        font-size: 1.8rem;
        font-weight: 900;
        margin-bottom: 2rem;
        text-align: center;
    }
    .mobile-mockup-screen {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 2rem auto;
        border-radius: 12px;
    }
    .deep-dive-mobile .step-content {
        border-color: rgba(255, 80, 222, 0.6);
        box-shadow: var(--glow-shadow);
        transform: scale(1.02);
    }
    .testimonial-card {
        width: 300px; /* Significantly smaller card for mobile */
        padding: 2rem; /* Reduce the padding */
    }

    .testimonial-card blockquote {
        font-size: 1rem; /* Smaller text for better readability */
        line-height: 1.5;
    }

    .testimonial-reel {
        gap: 1.5rem; /* Reduce the gap between cards */
        animation-duration: 80s; /* Slow down the animation slightly on mobile */
    }
    
    /* Also adjust the client reel on mobile */
    .client-reel {
        gap: 3rem;
    }
    .client-reel img {
        height: 60px;
    }
}
@media (min-width: 992px) and (max-width: 1542px) {
    .hero {
        /* Change from a grid to a single-column block */
        display: block;
        text-align: center;
        padding-top: 10rem;
        padding-bottom: 0;
        min-height: unset;
    }

    .hero-cta {
        /* Center the buttons in their container */
        align-items: center;
    }

    .hero-image-wrapper {
        /* Create the overlap effect */
        margin-top: -3rem;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
    }

    .hero-image {
        /* Resize and center the image below the text */
        width: 90%;
        max-width: 650px; /* A bit larger than mobile for better proportions */
        margin: 0 auto; /* This handles the centering */
    }

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

    /* Explicitly keep the 'White-Label' section as two columns */
    .white-label {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Testimonial Modal Styles --- */
.testimonial-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 16, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 1002; /* Higher than header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.testimonial-modal-overlay.modal-visible {
    opacity: 1;
    visibility: visible;
}
.testimonial-modal-content {
    background: var(--bg-light);
    padding: 3rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    max-width: 650px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), var(--glow-shadow);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.4s ease;
}
.testimonial-modal-overlay.modal-visible .testimonial-modal-content {
    transform: scale(1);
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-medium);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.modal-close-btn:hover {
    color: var(--primary-pink);
    transform: rotate(90deg);
}
#modal-quote {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 2rem 0;
    color: var(--text-light);
}
#modal-cite {
    color: var(--text-medium);
    font-style: normal;
    font-weight: 600;
}
#modal-cite span {
    display: block;
    color: var(--text-light);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
@media (max-width: 767px) {
    .testimonial-modal-content {
        padding: 2rem;
    }
    #modal-quote {
        font-size: 1.2rem;
    }
}
.testimonial-expand-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 24px;
    height: 24px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2; /* Sits above card content */
}
.testimonial-expand-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--text-medium);
    transition: fill 0.3s ease;
}
.testimonial-card:hover .testimonial-expand-icon {
    opacity: 1;
    transform: scale(1);
    animation: icon-pulse 2s ease-in-out infinite;
}
.testimonial-card:hover .testimonial-expand-icon svg {
    fill: var(--text-light);
}
@keyframes icon-pulse {
    0% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    }
}

/* --- PHASE 1 ENHANCEMENT: Accessibility & Performance --- */

/* 1. Custom, branded focus state for keyboard navigation */
a, button, .testimonial-card, .header-menu-button, .header-logo-wrapper {
    transition: box-shadow 0.3s ease; /* Smooth appearance of the focus ring */
}

/* Apply a glowing ring only when an element is focused via keyboard */
a:focus-visible,
button:focus-visible,
.testimonial-card:focus-visible,
.header-menu-button:focus-visible,
.header-logo-wrapper:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 4px var(--primary-pink);
}

/* Ensure the primary button's existing shadow is enhanced, not replaced */
.btn-primary:focus-visible {
    box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 4px var(--primary-pink), 0 10px 35px rgba(255, 80, 222, 0.5);
}


/* 2. Adaptive experience for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Stop the background glows from moving */
    .aurora-glow {
        transform: none !important;
    }
    /* Stop the 3D hero image from tilting */
    .hero-image {
        transform: none !important;
    }
    .spotlight {
        display: none;
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    /* The transition now only controls the final fade-out */
    transition: opacity 0.5s ease-in-out 0.2s, visibility 0.5s ease-in-out 0.2s;
}

/* This class, added by JS, is the ONLY trigger now */
body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
}

#preloader-logo {
    width: 120px;
    overflow: visible;
}

/* Performance hint for the browser */
#preloader-logo path {
    will-change: stroke-dashoffset, fill, filter;
}

/* Base styles for both paths */
#preloader-logo #logo-v-pink,
#preloader-logo #logo-v-main {
    fill: transparent;
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1500; /* A value larger than any path length */
    stroke-dashoffset: 1500;
}

/* Individual path animations, now a single, multi-step animation */
#preloader-logo #logo-v-pink {
    stroke: var(--primary-pink);
    /* Animation: draw for 0.8s, then fill & pulse starting after 2s */
    animation: draw 0.8s ease-out forwards, 
               fill-and-pulse-pink 2s ease-in-out 2s infinite;
}

#preloader-logo #logo-v-main {
    stroke: var(--text-light);
    /* Animation: draw for 1.2s starting after 0.6s, then fill starting after 2s */
    animation: draw 1.2s ease-out 0.6s forwards,
               fill-main 0.5s ease-out 2s forwards;
}

/* --- KEYFRAMES --- */

/* Reusable keyframe for the drawing effect */
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* New, combined keyframe for the pink path to fill and then pulse */
@keyframes fill-and-pulse-pink {
    /* At 0%, the fill animation begins */
    0% {
        fill: transparent;
        filter: drop-shadow(0 0 0px var(--primary-pink));
    }
    /* At 25%, the fill is complete, and it holds this state */
    25%, 100% {
        fill: var(--primary-pink);
    }
    /* At 50%, the pulse reaches its peak */
    50% {
        filter: drop-shadow(0 0 20px var(--primary-pink));
    }
}

/* A simpler keyframe just for filling the main path */
@keyframes fill-main {
    to {
        fill: var(--text-light);
    }
}

.header {
    /* Add a transition to the transform property for a smooth slide */
    transition: transform 0.4s ease-in-out, background-color 0.3s ease;
}

.header--hidden {
    /* Slide the header up and out of view */
    transform: translateY(-200%);
}

.faq {
    padding-bottom: 6rem;
}

.faq-accordion {
    max-width: 800px;
    margin: 3rem auto 0;
    border-top: 1px solid var(--border-color);
}

.faq-group-title {
    font-size: 0.9rem;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 3rem 0 1.5rem 0;
    font-weight: 600;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    text-align: left;
    cursor: pointer;
    color: var(--text-light);
}

.faq-question span {
    font-size: 1.2rem;
    font-weight: 600;
    padding-right: 1.5rem;
}

.faq-icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--primary-pink);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Horizontal line */
.faq-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical line */
.faq-icon::after {
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    transform: translateX(-50%);
}

.faq-answer {
    /* Hide the answer by default */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
                padding-bottom 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer p {
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
    padding-bottom: 0;
}

/* --- Active State --- */
.faq-item.active .faq-question {
    color: var(--primary-pink);
}

/* Rotate the vertical line of the icon to be horizontal */
.faq-item.active .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
}

.faq-item.active .faq-answer {
    /* Reveal the answer */
    max-height: 300px; /* Adjust if answers are very long */
    padding-bottom: 2rem; /* Add space below the answer text */
}

/* --- Living Interface Enhancement: Step 1 (Image Reveals & Hovers) --- */

/* 1. Shimmer Reveal on Scroll */
.solution-image-wrapper,
.white-label-image-wrapper,
.use-case-image-wrapper {
    position: relative;
}

.solution-image-wrapper:hover,
.white-label-image-wrapper:hover,
.use-case-image-wrapper:hover {
    z-index: 10;
}

/* The shimmer pseudo-element itself */
.solution-image-wrapper::after,
.white-label-image-wrapper::after,
.use-case-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 90%
    );
    transform: translateX(-101%);
    opacity: 0;
}

/* The class added by JS to trigger the animation */
.is-revealed::after {
    opacity: 1;
    animation: shimmer-wipe 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shimmer-wipe {
    /* The shimmer starts its journey, invisible */
    0% {
        transform: translateX(-101%);
        opacity: 0;
    }
    /* As it reaches the middle, it is at its brightest */
    50% {
        transform: translateX(0%);
        opacity: 0.5;
    }
    /* As it leaves, it has faded back to nothing */
    100% {
        transform: translateX(101%);
        opacity: 0;
    }
}


/* 2. 3D Tilt on Hover */
.solution-image-wrapper,
.white-label-image-wrapper,
.use-case-image-wrapper,
.mockup-container { /* Applying to the scrollytelling container too */
    perspective: 1500px; /* This is the key to the 3D effect */
}

/* Target all the images within those wrappers */
.solution-image-wrapper img,
.white-label-image-wrapper img,
.use-case-image-wrapper img,
.mockup-container img {
    will-change: transform; /* Performance hint for the browser */
    transition: transform 0.2s ease; /* A subtle fallback transition */
}

/* Add a smooth transition to the cursor's inner circle */
body {
    /* Target the <circle> element within the SVG cursor */
    --cursor-transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="white" fill-opacity="0.7" style="transition: var(--cursor-transition);" /></svg>') 12 12, auto;
}

/* This class will be added via JS on hover */
body.cursor-active {
    /* Define the expanded state for the cursor's inner circle */
    --cursor-transform: scale(2.5);
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="white" fill-opacity="0.7" style="transition: var(--cursor-transition); transform-origin: center; transform: var(--cursor-transform);" /></svg>') 12 12, auto;
}

/* Prepare the headline containers for the reveal effect */
.hero-headline, .section-title {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* The individual word spans we will create with JS */
.hero-headline span, .section-title span {
    display: inline-block;
    will-change: transform, opacity; /* Performance hint */
}