/* -------------------------------------------------
   GLOBAL DARK THEME – Modern & Unique
   ------------------------------------------------- */
:root {
    /* Primary palette – deep charcoal + neon accents */
    --bg-primary:      #0f0f12;   /* page background */
    --bg-secondary:   #1a1a1f;   /* cards, sections */
    --bg-input:       #212129;   /* textarea, selects */
    --text-primary:   #e0e0e5;   /* main text */
    --text-muted:     #a0a0b0;   /* secondary text */
    --accent:         #ff2e63;   /* neon pink (buttons, links) */
    --accent-hover:   #ff5c7f;
    --success:        #2ed573;   /* green for “Generate” while speaking */
    --border:         #33333a;
}

/* -------------------------------------------------
   BASIC RESET & PAGE
   ------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { 
    margin: 0; 
    padding: 0; 
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

/* -------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5rem;
    font-weight: 700;
    color: #fff;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1rem; color: var(--text-muted); }

/* -------------------------------------------------
   CONTAINER & LAYOUT
   ------------------------------------------------- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* -------------------------------------------------
   HERO SECTION
   ------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, #0f0f12 0%, #1c1c24 100%);
    padding: 4rem 0;
    text-align: center;
}
.hero h1 { 
    background: linear-gradient(90deg, #ff2e63, #ff8fa3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero p { font-size: 1.1rem; }

.hero-buttons .btn {
    margin: 0 .5rem;
    padding: .9rem 1.8rem;
    border-radius: .6rem;
    font-weight: 600;
    transition: all .25s ease;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }

.btn-pink {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
}
.btn-pink:hover {
    background: var(--accent);
    color: #fff;
}

/* -------------------------------------------------
   TTS CONVERTER
   ------------------------------------------------- */
.tts-converter {
    background: var(--bg-secondary);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.converter-container {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
    .converter-container { grid-template-columns: 1fr; }
}

/* Text area */
.text-input-section textarea {
    width: 100%;
    min-height: 180px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: .6rem;
    padding: 1rem;
    color: var(--text-primary);
    font-size: 1rem;
    resize: vertical;
}
.text-input-section textarea::placeholder { color: #666; }

.char-count { 
    text-align: right; 
    font-size: .85rem; 
    color: var(--text-muted); 
}

/* Controls */
.control-group label { 
    display: block; 
    margin-bottom: .4rem; 
    font-weight: 600; 
    color: #ccc; 
}
.control-group select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .6rem .9rem;
    color: var(--text-primary);
    font-size: .95rem;
}

/* Buttons */
.btn-generate {
    margin-top: 1rem;
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease;
}
.btn-generate:hover { background: var(--accent-hover); }
.btn-generate i { margin-right: .5rem; }

/* Clear button */
.btn-clear {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: .4rem .8rem;
    border-radius: .4rem;
    cursor: pointer;
}
.btn-clear:hover { background: rgba(255,255,255,.07); }

/* -------------------------------------------------
   FEATURES, LANGUAGES, TESTIMONIALS, FAQ
   ------------------------------------------------- */
.features,
.languages,
.testimonials,
.faq {
    padding: 4rem 0;
}
.features-grid,
.languages-grid,
.testimonials-grid,
.faq-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Cards */
.feature-card,
.testimonial-card,
.faq-item {
    background: var(--bg-secondary);
    border-radius: .8rem;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    transition: transform .2s ease;
}
.feature-card:hover,
.testimonial-card:hover,
.faq-item:hover { transform: translateY(-4px); }

.feature-icon,
.testimonial-author .avatar {
    width: 48px; height: 48px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .8rem;
}

/* Language flags */
.language-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: var(--text-primary);
}
.language-item .flag { font-size: 1.6rem; }

/* FAQ */
.faq-question {
    background: var(--bg-input);
    color: var(--text-primary);
}
.faq-item.active .faq-question {
    background: var(--accent);
}
.faq-answer {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* -------------------------------------------------
   ALERTS
   ------------------------------------------------- */
.alert-success {
    background: rgba(46,213,115,.15);
    color: var(--success);
    border: 1px solid var(--success);
    border-radius: .5rem;
    padding: .8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    animation: fadeIn .4s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* -------------------------------------------------
   SCROLLBAR (optional modern touch)
   ------------------------------------------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }

/* -------------------------------------------------
   RESPONSIVE TWEAKS
   ------------------------------------------------- */
@media (max-width: 480px) {
    .hero h1 { font-size: 2.2rem; }
    .hero-buttons .btn { display: block; width: 100%; margin: .5rem 0; }
}