/* CSS Variables from Candy Palette */
:root {
    /* Branding */
    --primary: #1fddff;
    /* Candy Blue */
    --primary-rgb: 31, 221, 255;

    --secondary: #E95096;
    /* Candy Pink */
    --secondary-rgb: 233, 80, 150;

    --dark: #000000;
    --light: #f8f9fa;
    --white: #ffffff;
    --gray: #6c757d;
    --text-color: #212529;

    /* Spacing */
    --container-width: 1200px;
    --section-padding: 80px 20px;

    /* Typography */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Semantic Colors (Light Default) */
    --bg-body: var(--white);
    --bg-card: var(--white);
    --bg-section-alt: var(--light);
    --text-main: var(--text-color);
    --text-muted: var(--gray);
    --border-color: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --hero-overlay: rgba(255, 255, 255, 0.55);
    --btn-text-color: #000000;
}

[data-theme="dark"] {
    --primary: #E95096;
    /* Candy Pink in Dark Mode */
    --primary-rgb: 233, 80, 150;

    --secondary: #1fddff;
    /* Candy Blue (Swapped) */
    --secondary-rgb: 31, 221, 255;

    --bg-body: #0f1115;
    --bg-card: #181b21;
    --bg-section-alt: #13161c;
    --text-main: #f0f0f0;
    --text-muted: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --hero-overlay: rgba(15, 17, 21, 0.55);
    --btn-text-color: #ffffff;
}

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

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

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

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

.section {
    padding: var(--section-padding);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-main);
}

.bg-light {
    background-color: var(--bg-section-alt);
}

/* Theme Toggle */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-main);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    /* Hack to make emoji monochrome */
    color: transparent;
    text-shadow: 0 0 0 black;
}

.theme-toggle:hover {
    transform: rotate(15deg);
    text-shadow: 0 0 0 var(--primary);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--btn-text-color);
}

.btn-primary:hover {
    background-color: var(--secondary);
    color: var(--btn-text-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--text-main);
}

.btn-secondary:hover {
    background-color: var(--text-main);
    color: var(--bg-body);
}

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

.btn-lg {
    padding: 15px 35px;
    font-size: 1.1rem;
}

/* Navbar */
.navbar {
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: padding 0.3s ease;
}

.navbar.shrink {
    padding: 10px 0;
}

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

.logo {
    display: block;
}

.logo img {
    height: 40px;
    width: auto;
    transition: height 0.3s ease;
}

.navbar.shrink .logo img {
    height: 30px;
}

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

.nav-links a {
    font-weight: 500;
    color: var(--text-main);
}

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

/* Hero Section */
.hero {
    padding: 180px 0 100px;
    background: url('assets/generated/hero-light.jpg') no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hero-overlay);
    backdrop-filter: blur(2px);
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.text-gradient {
    /* Candy Blue Gradient for Light Mode */
    background: linear-gradient(90deg, #1fddff, #00a8cc);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .text-gradient {
    /* Candy Pink Gradient for Dark Mode */
    background-image: linear-gradient(90deg, #E95096, #ff8bbd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-color);
    /* Was #343a40, changed to var for theme support */
    /* Darker gray for readability */
    margin: 0 auto 40px auto;
    max-width: 500px;
}

[data-theme="dark"] .hero p {
    color: var(--text-main);
    /* Ensure it uses the light text color in dark mode */
}

.hero-btns {
    display: flex;
    gap: 15px;
    justify-content: center;
}

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

/* Hero Logo */
.hero-logo {
    max-width: 100%;
    height: auto;
    max-height: 350px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    animation: float 6s ease-in-out infinite;
    transition: filter 0.3s;
}

/* Dark Mode Hero Background */
[data-theme="dark"] .hero {
    background-image: url('assets/generated/hero-dark.png');
}

/* Dark Mode Form Inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Dark Mode Navigation & Text */
[data-theme="dark"] .logo {
    color: var(--text-main);
    /* Uses semantically swapped color */
}

[data-theme="dark"] .nav-links a {
    color: var(--text-main);
}

[data-theme="dark"] .nav-links a:hover {
    color: var(--primary);
}

[data-theme="dark"] .feature-item h3,
[data-theme="dark"] .step-card h3,
[data-theme="dark"] .section-title {
    color: var(--text-main);
}

/* Hero Logo Inversion */
[data-theme="dark"] .hero-logo {
    filter: drop-shadow(0 10px 20px rgba(255, 255, 255, 0.1)) invert(1) brightness(2);
}

[data-theme="dark"] .navbar {
    background: rgba(15, 17, 21, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .theme-toggle {
    text-shadow: 0 0 0 white;
}

[data-theme="dark"] .theme-toggle:hover {
    text-shadow: 0 0 0 var(--primary);
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

/* Stats Section */
.stats-section {
    padding: 60px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.stats-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Detailed Workflow (Alternating) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 100px;
}

.feature-row:last-child {
    margin-bottom: 0;
}

.feature-row.reverse {
    direction: rtl;
    /* Trick to flip columns visually */
}

.feature-row.reverse .feature-text {
    direction: ltr;
    /* Reset text direction */
}

.feature-text {
    padding: 20px;
}

.step-badge {
    display: inline-block;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.feature-text h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--text-main);
    line-height: 1.2;
}

.feature-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.check-list {
    list-style: none;
}

.check-list li {
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    font-weight: 500;
    color: var(--text-main);
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 800;
}

.feature-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-image:hover {
    transform: translateY(-10px);
}

.feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Dark Mode Features */
.bg-dark {
    background-color: #111;
}

.text-white {
    color: #fff !important;
}

.feature-item.dark-mode {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.feature-item.dark-mode h3 {
    color: var(--white);
}

.feature-item.dark-mode p {
    color: #aaa;
}

.feature-item.dark-mode .icon-box {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Responsive updates for new layout */
@media (max-width: 900px) {
    .feature-row {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        margin-bottom: 60px;
    }

    .feature-row.reverse {
        direction: ltr;
    }

    .feature-text {
        padding: 0;
    }

    .check-list li {
        display: inline-block;
        margin-right: 15px;
        text-align: left;
    }
}

/* How It Works */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.step-card {
    padding: 40px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: transform 0.3s;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.step-number {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.05);
    /* Stays subtle */
    line-height: 1;
    margin-bottom: 20px;
}

[data-theme="dark"] .step-number {
    color: rgba(255, 255, 255, 0.05);
}

.step-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-main);
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.feature-item {
    padding: 30px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.icon-box {
    font-size: 2rem;
    margin-bottom: 20px;
    width: 60px;
    height: 60px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    filter: grayscale(100%);
}

.feature-item h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}



/* Who It's For */
.target-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

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

.target-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

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

.target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(var(--primary-rgb), 0.1);
    padding-bottom: 20px;
}

.target-header h3 {
    font-size: 1.8rem;
    color: var(--text-main);
    margin: 0;
}

.target-icon {
    font-size: 2.5rem;
    filter: grayscale(100%);
}

.target-card h4 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.target-card p {
    color: var(--text-muted);
    margin-bottom: 15px;
    line-height: 1.6;
}

.target-list {
    list-style: none;
    margin-top: 25px;
}

.target-list li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    color: var(--text-main);
    font-weight: 500;
}

.target-list li::before {
    content: "\eb7b";
    font-family: 'remixicon';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1;
}

/* Trusted By (Logos) */
.logo-marquee {
    overflow: hidden;
    padding: 60px 0;
    background: var(--bg-section-alt);
    position: relative;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    animation: marquee 60s linear infinite;
    align-items: center;
}

.brand-logo {
    height: 50px;
    width: auto;
    max-width: 160px;
    margin: 0 40px;
    opacity: 0.5;
    transition: all 0.3s ease;
    object-fit: contain;
    /*
       Assumes most logos are white/transparent.
       Light Mode: Invert to make them dark, grayscale for uniformity.
    */
    filter: invert(1) grayscale(100%);
}

[data-theme="dark"] .brand-logo {
    /* Dark Mode: Revert invert (keep them white), reduce opacity */
    filter: grayscale(100%) brightness(1.2);
    opacity: 0.6;
}

/*
   Visual Balancing for specific logos that appear smaller due to aspect ratio
   (Marker, Dalbello, Völkl, Ride)
*/
.brand-logo[src*="marker"],
.brand-logo[src*="dalbello"],
.brand-logo[src*="volkl"],
.brand-logo[src*="ride"] {
    height: 70px;
    /* Increase height for these specific logos */
    max-width: 180px;
    /* Allow them to be slightly wider if needed */
    margin: 0 30px;
    /* Adjust margin to compensate for larger size */
}

/* Specific adjustment for Atlas */
.brand-logo[src*="atlas"] {
    height: 60px;
    margin: 0 35px;
}

/* Specific adjustment for Tubbs */
.brand-logo[src*="tubbs"] {
    height: 40px;
    margin: 0 45px;
}

.brand-logo:hover {
    opacity: 1;
    transform: scale(1.05);
    /* Light Mode Hover: Show original color (inverted back if needed, but grayscale(0) gives color) */
    /* Since we inverted to get black, un-inverting gives white, which is invisible on white bg.
       So for hover in light mode, if the original was white, we want to KEEP it inverted but maybe add color?
       If the original is white, we can't really "reveal color" by un-inverting on a white background.
       So we'll keep them dark (inverted) but remove grayscale.
    */
    filter: invert(1) grayscale(0%);
}

[data-theme="dark"] .brand-logo:hover {
    /* Dark Mode Hover: Show original white/color */
    filter: grayscale(0%) brightness(1.2);
    opacity: 1;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

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

.testimonial-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    position: relative;
}

.quote-icon {
    font-size: 3rem;
    color: var(--primary);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: serif;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-main);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gray);
    /* Placeholder */
    display: flex;
    /* Remove if image */
}

.author-info h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-main);
}

.author-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Contact */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    background: #0f1115;
    /* Explicit dark background to ensure consistency */
    color: var(--white);
    padding: 60px;
    border-radius: 30px;
}

.contact-text h2 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--white);
}

.contact-text p {
    font-size: 1.2rem;
    opacity: 0.8;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
}

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

.btn-block {
    width: 100%;
}

.hidden {
    display: none;
}

#form-message {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
}

#form-message.success {
    background: rgba(32, 201, 151, 0.2);
    color: #20c997;
    border: 1px solid rgba(32, 201, 151, 0.3);
}

/* Footer */
footer {
    background: var(--bg-body);
    padding: 40px 0;
    margin-top: 60px;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.footer-legal {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

details {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

summary {
    padding: 15px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-main);
    list-style: none;
    /* Hide default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

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

summary:hover {
    background: rgba(0, 0, 0, 0.02);
}

summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--primary);
}

details[open] summary::after {
    content: '-';
}

[data-theme="dark"] summary:hover {
    background: rgba(255, 255, 255, 0.02);
}

.legal-text {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    text-align: left;
}

.legal-text h4 {
    color: var(--text-main);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.legal-text h4:first-child {
    margin-top: 0;
}

.legal-text p {
    margin-bottom: 15px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);
}

.form-group textarea {
    height: 120px;
    resize: vertical;
}

#form-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}

#form-message.success {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.hidden {
    display: none;
}

/* Footer */
footer {
    padding: 40px 0;
    text-align: center;
    color: var(--gray);
    font-size: 0.9rem;
}

/* Mobile Responsive */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--text-main);
    margin: 5px 0;
    transition: 0.3s;
}

@media (max-width: 900px) {
    .menu-toggle {
        display: block;
        z-index: 1001;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        background: var(--bg-body);
        flex-direction: column;
        justify-content: center;
        transition: 0.3s ease;
    }

    .nav-links.active {
        right: 0;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

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

    .hero p {
        margin: 0 auto 40px;
    }

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

    .contact-wrapper {
        grid-template-columns: 1fr;
        padding: 40px;
    }
}