:root {
    --primary: #1473e6; /* Adobe Blue */
    --primary-hover: #0d66d0;
    --bg-dark: #1E1E1E;
    --bg-card: #2B2B2B;
    --text-light: #F5F5F5;
    --text-dim: #B3B3B3;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- NAVBAR STYLES --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px; 
    background-color: rgba(30, 30, 30, 0.95);
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo a {
    display: flex;          
    align-items: center;    
    gap: 12px;              
    text-decoration: none;  
    color: white;           
    font-weight: 700;
    font-size: 1.3rem;
}

.logo-img {
    height: 32px;           
    width: auto;            
    display: block;
}

.nav-links { display: flex; align-items: center; }

/* --- SECTIONS --- */
.hero {
    text-align: center;
    padding: 120px 20px;
    background: radial-gradient(circle at center, #2a2a2a 0%, #1e1e1e 100%);
}
.hero h1 { font-size: 3.5rem; margin-bottom: 15px; }
.hero p { font-size: 1.25rem; color: var(--text-dim); max-width: 700px; margin: 0 auto 30px auto; }
.highlight { color: var(--primary); }

.btn-primary {
    background-color: var(--primary);
    color: white;
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
    display: inline-block;
    font-size: 1.1rem;
}
.btn-primary:hover { background-color: var(--primary-hover); }
.sub-text { font-size: 0.9rem; color: #666; margin-top: 20px; }

/* Standard Section Styles */
.features, .how-it-works { 
    padding: 100px 0;
}

.features { background-color: #252525; }
.features h2, .how-it-works h2, .products-section h2 { 
    text-align: center; 
    margin-bottom: 60px; 
    font-size: 2.2rem; 
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.card {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #333;
}
.icon { font-size: 2.5rem; margin-bottom: 20px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-dim); font-size: 1rem; }

.how-it-works { padding: 100px 0; }
.steps {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}
.step {
    flex: 1;
    min-width: 250px;
    text-align: center;
}
.step-num {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 20px;
    opacity: 0.8;
}

/* Legal Page */
.legal-content { padding-top: 80px; padding-bottom: 80px; max-width: 800px; }
.legal-content h1 { font-size: 2.5rem; margin-bottom: 10px; }
.legal-content h2 { margin-top: 40px; font-size: 1.4rem; color: white; }
.legal-content p, .legal-content li { color: #ccc; margin-bottom: 15px; }
.legal-content a { color: var(--primary); }

/* Footer */
footer {
    border-top: 1px solid #333;
    padding: 60px 0;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}
.footer-links { margin-top: 15px; }
.footer-links a { color: #666; text-decoration: none; margin: 0 15px; }
.footer-links a:hover { text-decoration: underline; color: var(--primary); }

/* --- PRODUCTS / DOWNLOADS SECTION STYLES --- */

.products-section {
    padding: 120px 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.product-card {
    background-color: var(--bg-card);
    padding: 50px;
    border-radius: 16px;
    border: 1px solid #333;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 500px;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}

.product-card h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: white;
}

.product-card p {
    color: var(--text-dim);
    margin-bottom: 35px;
    font-size: 1.1rem;
    flex-grow: 1;
    line-height: 1.7;
}

.product-icon {
    font-size: 3.5rem;
    margin-bottom: 25px;
    display: block;
}

/* --- HIGHLIGHTING VARIANTS --- */

.card-plugin { border-top: 8px solid #1473e6; }
.btn-plugin-card {
    background-color: #1473e6;
    color: white;
}
.btn-plugin-card:hover { background-color: #0d66d0; }

.card-web { border-top: 8px solid #10b981; }
.text-web { color: #10b981; }
.btn-web-card {
    background-color: #10b981;
    color: white;
}
.btn-web-card:hover { background-color: #059669; }

.card-api { border-top: 8px solid #8b5cf6; }
.text-api { color: #8b5cf6; }
.btn-api-card {
    background-color: #8b5cf6;
    color: white;
}
.btn-api-card:hover { background-color: #7c3aed; }

/* Generic Card Button Style */
.btn-card {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 18px 0;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: background 0.2s, opacity 0.2s; /* Added opacity transition */
    margin-top: auto;
    cursor: pointer; /* Default cursor for active buttons */
}

/* --- NEW: DISABLED BUTTON STATE --- */
.btn-disabled {
    opacity: 0.5;           /* Make it look faded */
    cursor: not-allowed;    /* Show 'no-entry' cursor */
    pointer-events: none;   /* Prevents any clicks entirely (for extra safety) */
}

/* Ensure hover effects don't happen on disabled buttons if pointer-events isn't supported */
.btn-disabled:hover {
    opacity: 0.5;
}