@import url("components/_forms.css");

/* --- General Body & Theme --- */
:root {
    /* --- Colors from the main ABFutureBot application --- */
    --primary-bg: #000018;
    --secondary-bg: #001830;
    --card-bg: #003060;
    --border-color: #1848A8;
    --text-primary: #F0F0F0;
    --text-secondary: #A8D8F0;
    --accent-primary: #18C0F0;
    --accent-secondary: #00A8D8;
    --accent-purple: #4830A8;
    --status-running: #28a745;
    --status-error: #ffc107;
    --status-stopped:  #dc3545;
    --status-disabled: #6c757d;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    line-height: 1.6;
}

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

/* Header & Navigation */
header {
    background-color: rgba(0, 31, 63, 0.8);
    backdrop-filter: blur(10px);
    padding: 0.9375rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align items to the bottom */
}

.logo {
    flex-shrink: 0; /* Prevent the logo from shrinking */
}

.logo {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
}

/* Use viewport width for fluid scaling, with a min/max to prevent it from getting too small or large */
.logo-part { height: clamp(1.75rem, 3vw, 2.1875rem); } /* 28px -> 35px */
.logo-ab { height: clamp(3rem, 5vw, 3.75rem); } /* 48px -> 60px */

/* This container holds the central links: About, Features, Download */
.main-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    flex-grow: 1; /* Allow main-nav to grow and push other items */
    justify-content: center; /* Center its own content */
}

.auth-buttons {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem; /* 20px */
    flex-shrink: 0; /* Prevent this group from shrinking or wrapping on its own */
}

.nav-link, .nav-button {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-link:hover, .nav-button:hover {
    color: var(--accent-primary);
}

.nav-button {
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--accent-primary);
    border-radius: 0.3125rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-button:hover, .nav-button.active:hover {
    background-color: var(--accent-primary);
    color: var(--primary-bg);
}

/* Social Links in Header */
.social-links {
    list-style: none;
    display: flex;
    gap: 1.25rem; /* Increased gap between social icons */
    margin: 0;
    padding: 0; /* Remove padding, gap will handle spacing */
    position: relative; /* Allow for manual position adjustment */
    margin-right: 1.5rem; /* Add space between social links and auth buttons */
    top: 0.5rem; /* Nudge the icons down for better visual alignment with text */
}

.social-links img {
    height: 2.625rem; /* 42px */
    width: 2.625rem;
    transition: transform 0.3s ease;
}

.social-links a:hover img {
    transform: scale(1.15);
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 6.25rem 1.25rem 0.625rem; /* Reduced bottom padding */
    background: linear-gradient(rgba(0, 31, 63, 0.7), var(--primary-bg)), url('../img/hero-bg.jpg') no-repeat center center/cover;
}

.hero h1 {
    font-size: 3.5em;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero .subtitle {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--accent-secondary);
    max-width: 43.75rem;
    margin: 0 auto 2.5rem;
}

.cta-button {
    display: inline-block;
    margin-top: 1.875rem;
    padding: 0.9375rem 1.875rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3a5ba6 0%, #6a9cf3 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    filter: brightness(110%);
}

/* Features Section */
.features-section {
    padding: 3.125rem 1.25rem 5rem; /* Reduced top padding */
    text-align: center;
}

.features-section h2 {
    font-size: 2.5em;
    margin-bottom: 3.125rem;
    color: var(--accent-primary);
}

.features-grid.six-items {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

.feature-card {
    background-color: var(--secondary-bg);
    padding: 1.875rem;
    border-radius: 0.625rem;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    height: 4.375rem;
    width: 4.375rem;
    margin: 0 auto 1.25rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.feature-icon.security { background-image: url('../img/icons/icon-security.png'); }
.feature-icon.risk { background-image: url('../img/icons/icon-risk.png'); }
.feature-icon.tools { background-image: url('../img/icons/icon-tools.png'); }
.feature-icon.insights { background-image: url('../img/icons/icon-insights.png'); }
.feature-icon.windows { background-image: url('../img/icons/icon-windows.png'); }
.feature-icon.stripe { background-image: url('../img/icons/icon-stripe.png'); }

.feature-card p {
    text-align: left;
}

.feature-card h3 {
    color: var(--accent-secondary);
    margin-top: 0;
    font-size: 1.3em;
}

/* How It Works Section */
.how-it-works-section {
    padding: 5rem 1.25rem;
    background-color: var(--secondary-bg);
    text-align: center;
}

.how-it-works-section h2 {
    font-size: 2.5em;
    margin-bottom: 3.125rem;
    color: var(--accent-primary);
}

.steps-container {
    display: flex;
    justify-content: space-around;
    gap: 2.5rem;
}

.step {
    max-width: 18.75rem;
}

.step-number {
    width: 3.75rem;
    height: 3.75rem;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--accent-primary);
    margin: 0 auto 1.25rem;
}

/* Download Section */
.download-section {
    padding: 5rem 1.25rem;
    text-align: center;
}

/* FAQ Section */
.faq-section {
    padding: 5rem 1.25rem;
    background-color: var(--secondary-bg);
}

.faq-section h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 3.125rem;
    color: var(--accent-primary);
}

.faq-container {
    max-width: 50rem;
    margin: 0 auto;
}

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

.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 1.25rem 0;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--accent-secondary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-icon {
    width: 1em;
    height: 1em;
    transition: transform 0.3s ease;
    position: relative;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--accent-primary);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.faq-icon::before { width: 1em; height: 2px; }
.faq-icon::after { width: 2px; height: 1em; }

.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    color: var(--text-secondary);
    padding: 0 1.25rem;
}

.faq-answer p {
    margin: 0;
    padding-bottom: 1.25rem;
}

/* Download Section Additions */
.download-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
.trust-badge { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.trust-badge img.stripe-logo { height: 1.5625rem; vertical-align: middle; }
.download-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--status-running);
    color: white;
    padding: 0.9375rem 2.1875rem;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.download-button:hover {
    background-color: #34c759; /* cta-hover color */
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.icon-windows { width: 1.5rem; height: 1.5rem; background-image: url('../img/icons/icon-windows.png'); background-size: contain; background-repeat: no-repeat; }

/* Inline Logo Styles */
.inline-logo-container {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    vertical-align: text-bottom;
    position: relative;
    top: -0.20em; /* Nudge the logos up slightly for perfect alignment */
}

h2 .inline-logo-container .inline-logo-part {
    height: 0.8em;
}

h2 .inline-logo-container .inline-logo-ab {
    height: 1.2em; /* 0.8em * 1.5 */
}

.footer-logo .inline-logo-ab {
    height: 1.35em; /* 0.9em * 1.5 */
}

.footer-logo .inline-logo-part {
    height: 0.9em;
}

.inline-logo-part {
    height: 1em;
    width: auto;
}

/* Footer */
footer {
    background-color: var(--secondary-bg);
    padding: 1.875rem 1.25rem;
    text-align: center;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.footer-links a {
    color: var(--text-secondary);
    margin: 0 0.625rem;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* --- Content Page Styles --- */
.content-page {
    padding: 3.75rem 1.25rem;
    max-width: 56.25rem;
    margin: 0 auto;
}

.content-page h1, .content-page h2, .content-page h3, .content-page h4 {
    color: var(--accent-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.625rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.content-page h1 { font-size: 2.8em; }
.content-page h2 { font-size: 2.2em; }
.content-page h3 { font-size: 1.8em; }
.content-page h4 { font-size: 1.4em; border-bottom-style: dashed; }

.content-page p {
    color: var(--text-secondary);
    margin-bottom: 1em;
}

.content-page ul, .content-page ol {
    color: var(--text-secondary);
    padding-left: 1.5625rem;
}

.content-page li {
    margin-bottom: 0.8em;
}

.content-page strong {
    color: var(--accent-secondary);
}

.content-page code {
    background-color: var(--secondary-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: "Courier New", Courier, monospace;
    color: var(--accent-primary);
}

/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    header .container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the entire block */
        gap: 1rem; /* Vertical gap between stacked blocks */
        padding-bottom: 1rem; /* Add some padding at the bottom of the header */
    }

    .logo, .main-nav, .social-links, .auth-buttons {
        width: 100%; /* Take full width to allow internal centering */
        justify-content: center; /* Center content within each block */
        flex-grow: 0; /* Don't grow on mobile */
        flex-shrink: 1; /* Allow shrinking */
        gap: 0.5rem; /* Smaller internal gap for mobile */
    }

    .main-nav, .auth-buttons {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align the stacked items */
    }

    .social-links {
        top: 0; /* Reset top adjustment for mobile stacking */
    }
}

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--accent-primary);
    color: var(--primary-bg);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}