/* Reset e Base */
* {margin:0; padding:0; box-sizing:border-box;}
:root {
    --primary:#6366f1; --primary-dark:#4f46e5; --secondary:#10b981;
    --dark:#1e293b; --light:#f8fafc; --gray:#64748b;
}
body {font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; line-height:1.6; color:var(--dark);}
.container {max-width:1200px; margin:0 auto; padding:0 20px;}

/* Hero */
.hero {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding-bottom:80px;}
.navbar {padding:20px 0;}
.navbar .container {display:flex; justify-content:space-between; align-items:center;}
.nav-brand h1 {font-size:1.5rem;}
.nav-links {display:flex; gap:30px; align-items:center;}
.nav-links a {color:white; text-decoration:none; transition:opacity 0.3s;}
.nav-links a:hover {opacity:0.8;}
.btn-nav {
    background:white !important; 
    color:var(--primary) !important; 
    padding:10px 20px; 
    border-radius:8px; 
    font-weight:600;
    transition:all 0.3s;
}
.btn-nav:hover {
    background:#f8fafc !important;
    opacity:1 !important;
}
.hero-content {text-align:center; padding:80px 20px;}
.hero-title {font-size:3.5rem; font-weight:800; margin-bottom:20px;}
.gradient {background:linear-gradient(to right,#fbbf24,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.hero-subtitle {font-size:1.25rem; margin-bottom:40px; opacity:0.9;}

/* Buttons */
.btn {
    display:inline-block; 
    padding:12px 30px; 
    border-radius:8px; 
    text-decoration:none; 
    font-weight:600; 
    transition:all 0.3s; 
    border:2px solid transparent;
    cursor:pointer;
    text-align:center;
}
button.btn {
    border:none;
    cursor:pointer;
}
.btn-primary {
    background:var(--primary); 
    color:white;
    border:2px solid var(--primary);
}
.btn-primary:hover {
    background:var(--primary-dark); 
    border-color:var(--primary-dark);
    transform:translateY(-2px); 
    box-shadow:0 10px 20px rgba(0,0,0,0.2);
}
.btn-secondary {
    background:white; 
    color:var(--primary);
}
.btn-secondary:hover {
    background:var(--light);
}
.hero-buttons {
    display:flex; 
    gap:20px; 
    justify-content:center; 
    margin-bottom:40px;
}
.btn-block {
    width:100%; 
    display:block;
    margin-top:10px;
}
.btn-outline {
    background:transparent; 
    border:2px solid var(--primary); 
    color:var(--primary);
}
.btn-outline:hover {
    background:var(--primary); 
    color:white;
}
.btn-large {
    padding:15px 40px; 
    font-size:1.1rem;
}

/* Demo Section */
.demo-section {padding:80px 20px; background:var(--light);}
.section-title {font-size:2.5rem; text-align:center; margin-bottom:50px;}
.demo-grid {display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:1000px; margin:0 auto;}
.demo-form, .demo-result {background:white; padding:30px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1);}

/* Form */
.form-group {margin-bottom:15px;}
.form-group label {display:block; margin-bottom:5px; font-weight:600; color:var(--dark);}
.form-control {width:100%; padding:12px; border:2px solid #e2e8f0; border-radius:8px; margin-bottom:15px; font-size:1rem;}
.form-control:focus {outline:none; border-color:var(--primary);}
.demo-apikey {background:#f1f5f9; padding:15px; border-radius:8px; margin-top:15px; text-align:center;}
.demo-apikey code {display:inline-block; background:white; padding:8px 12px; border-radius:6px; font-size:0.9rem; color:#0ea5e9; font-weight:600; margin:8px 0; word-break:break-all;}
.btn-copy {background:#0ea5e9; color:white; border:none; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:0.85rem; margin-left:10px; transition:background 0.3s;}
.btn-copy:hover {background:#0284c7;}
.demo-info {display:block; margin-top:15px; text-align:center; color:var(--gray);}

/* Results */
.result-container {min-height:200px; padding:20px; background:#f8fafc; border-radius:8px;}
.placeholder {color:var(--gray); text-align:center; padding:60px 20px;}
.result-success {background:#ecfdf5; border:2px solid var(--secondary); border-radius:8px; padding:20px;}
.result-success h4 {color:var(--secondary); margin-bottom:15px;}
.result-item {padding:8px 0; border-bottom:1px solid #d1fae5;}
.result-item:last-child {border-bottom:none;}
.result-error {background:#fef2f2; border:2px solid #ef4444; border-radius:8px; padding:20px; color:#991b1b;}
.loading {text-align:center; padding:40px;}
.spinner {border:4px solid #f3f3f3; border-top:4px solid var(--primary); border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:0 auto 20px;}
@keyframes spin {0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}

/* Code Example */
.code-example {max-width:900px; margin:60px auto 0; background:white; padding:30px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.code-tabs {display:flex; gap:10px; margin-bottom:20px; justify-content:center;}
.tab-btn {padding:10px 20px; background:#f1f5f9; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.3s;}
.tab-btn.active {background:var(--primary); color:white;}
.code-block {display:none; background:#1e293b; border-radius:8px; padding:20px;}
.code-block.active {display:block;}
.code-block pre {margin:0; overflow-x:auto;}
.code-block code {color:#e2e8f0; font-family:'Courier New',monospace; font-size:0.9rem; line-height:1.6;}

/* Features */
.features-section {padding:80px 20px;}
.features-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; max-width:1000px; margin:0 auto;}
.feature-card {background:white; padding:30px; border-radius:12px; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:transform 0.3s;}
.feature-card:hover {transform:translateY(-5px);}
.feature-card .icon {font-size:3rem; margin-bottom:15px;}

/* How It Works */
.how-section {padding:80px 20px; background:white;}
.steps-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; max-width:900px; margin:0 auto;}
.step-card {text-align:center;}
.step-number {width:60px; height:60px; background:var(--primary); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; margin:0 auto 20px;}

/* Pricing Preview */
.pricing-preview {padding:80px 20px; background:var(--light);}
.pricing-mini-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; max-width:1000px; margin:0 auto;}
.pricing-mini-card {background:white; padding:40px 30px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); text-align:center; transition:transform 0.3s; position:relative;}
.pricing-mini-card:hover {transform:translateY(-5px);}
.pricing-mini-card.featured {border:3px solid var(--primary); transform:scale(1.05);}
.pricing-mini-card .badge {position:absolute; top:-12px; right:20px; background:var(--primary); color:white; padding:4px 12px; border-radius:20px; font-size:0.85rem; font-weight:600;}
.pricing-mini-card h3 {margin-bottom:15px; font-size:1.5rem;}
.pricing-mini-card .price {font-size:2.5rem; font-weight:800; color:var(--primary); margin-bottom:5px;}
.pricing-mini-card .period {color:var(--gray); margin-bottom:25px;}
.pricing-mini-card ul {list-style:none; text-align:left; margin-bottom:25px;}
.pricing-mini-card ul li {padding:8px 0; color:var(--dark);}

/* CTA */
.cta-section {background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; padding:80px 20px; text-align:center;}
.cta-section h2 {font-size:2.5rem; margin-bottom:30px;}

/* Footer */
.footer {background:var(--dark); color:white; padding:40px 20px; text-align:center;}
.footer a {color:var(--secondary); text-decoration:none;}
.footer-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:40px; margin-bottom:40px;}
.footer-col h4 {margin-bottom:15px; color:white;}
.footer-col ul {list-style:none;}
.footer-col ul li {margin-bottom:10px;}
.footer-col ul li a {color:#94a3b8; transition:color 0.3s;}
.footer-col ul li a:hover {color:var(--secondary);}
.footer-bottom {border-top:1px solid #334155; padding-top:30px; text-align:center; color:#94a3b8;}

/* Responsive */
@media (max-width:768px) {
    .hero-title {font-size:2rem;}
    .demo-grid {grid-template-columns:1fr;}
    .nav-links {flex-direction:column; gap:10px;}
    .hero-buttons {flex-direction:column;}
    .pricing-mini-card.featured {transform:scale(1);}
    .steps-grid {grid-template-columns:1fr;}
}

/* Estilos específicos para formulários */
input.form-control, textarea.form-control {
    width:100%;
    padding:12px 15px;
    border:2px solid #e2e8f0;
    border-radius:8px;
    font-size:1rem;
    font-family:inherit;
    transition:border-color 0.3s;
}

input.form-control:focus, textarea.form-control:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.1);
}

button[type="submit"] {
    cursor:pointer;
    font-family:inherit;
}

button[type="submit"]:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* Classes do Cadastro.cshtml */
.cadastro-page .btn-primary {
    background:var(--primary);
    color:white;
    border:none;
    padding:15px 30px;
    font-size:1.1rem;
    font-weight:700;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.3s;
}

.cadastro-page .btn-primary:hover {
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(99,102,241,0.3);
}

.cadastro-page .btn-block {
    width:100%;
    display:block;
}
.footer-col ul li a {color:#94a3b8; transition:color 0.3s;}
.footer-col ul li a:hover {color:var(--secondary);}
.footer-bottom {border-top:1px solid #334155; padding-top:30px; text-align:center; color:#94a3b8;}

/* Responsive */
@media (max-width:768px) {
    .hero-title {font-size:2rem;}
    .demo-grid {grid-template-columns:1fr;}
    .nav-links {flex-direction:column; gap:10px;}
    .hero-buttons {flex-direction:column;}
    .pricing-mini-card.featured {transform:scale(1);}
    .steps-grid {grid-template-columns:1fr;}
}

/* Estilos específicos para formulários */
input.form-control, textarea.form-control {
    width:100%;
    padding:12px 15px;
    border:2px solid #e2e8f0;
    border-radius:8px;
    font-size:1rem;
    font-family:inherit;
    transition:border-color 0.3s;
}

input.form-control:focus, textarea.form-control:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(99,102,241,0.1);
}

button[type="submit"] {
    cursor:pointer;
    font-family:inherit;
}

button[type="submit"]:disabled {
    opacity:0.6;
    cursor:not-allowed;
}

/* Classes específicas do Cadastro */
.cadastro-page .btn-primary {
    background:var(--primary);
    color:white;
    border:none;
    padding:15px 30px;
    font-size:1.1rem;
    font-weight:700;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.3s;
}

.cadastro-page .btn-primary:hover {
    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(99,102,241,0.3);
}

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

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

.cadastro-page .form-group label {
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--dark);
}

.cadastro-page .form-group input {
    width:100%;
    padding:14px;
    border:2px solid #e2e8f0;
    border-radius:8px;
    font-size:1rem;
    transition:all 0.3s;
}

.cadastro-page .form-group input:focus {
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(99,102,241,0.1);
}

/* Estilos específicos para página de Planos */
.planos-page {
    background:#f8fafc; 
    min-height:100vh; 
    padding:60px 20px;
}

.planos-page .btn {
    display:inline-block;
    padding:12px 30px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:all 0.3s;
    text-align:center;
}

.planos-page .btn-primary {
    background:var(--primary);
    color:white;
    border:2px solid var(--primary);
}

.planos-page .btn-primary:hover {
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(99,102,241,0.3);
}

.planos-page .btn-outline {
    background:white;
    border:2px solid var(--primary);
    color:var(--primary);
}

.planos-page .btn-outline:hover {
    background:var(--primary);
    color:white;
}

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

.planos-page .btn-large {
    padding:15px 40px;
    font-size:1.1rem;
}

/* Botão de ação geral */
a.btn, button.btn {
    cursor:pointer;
    user-select:none;
}

a.btn:active, button.btn:active {
    transform:translateY(0);
}

/* Estilos adicionais para Planos */
.planos-page .btn-secondary {
    background:white;
    color:var(--primary);
    border:2px solid white;
}

.planos-page .btn-secondary:hover {
    background:#f8fafc;
    transform:translateY(-2px);
}

/* Cards de planos completos */
.pricing-full-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
    max-width:1200px;
    margin:0 auto 80px;
}

.pricing-full-card {
    background:white;
    border-radius:16px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
    transition:all 0.3s;
    position:relative;
}

.pricing-full-card:hover {
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.pricing-full-card.featured {
    border:4px solid var(--primary);
    transform:scale(1.05);
}

.pricing-full-card.featured:hover {
    transform:scale(1.05) translateY(-10px);
}

.pricing-full-card .badge {
    position:absolute;
    top:-15px;
    right:30px;
    background:var(--primary);
    color:white;
    padding:8px 20px;
    border-radius:25px;
    font-weight:700;
    font-size:0.9rem;
    box-shadow:0 4px 10px rgba(99,102,241,0.3);
}

.plan-header {
    text-align:center;
    margin-bottom:30px;
}

.plan-header h2 {
    font-size:2rem;
    margin-bottom:10px;
    color:var(--dark);
}

.plan-price {
    text-align:center;
    margin-bottom:30px;
}

.plan-price .amount {
    font-size:3.5rem;
    font-weight:800;
    color:var(--primary);
}

.plan-price .period {
    color:var(--gray);
    font-size:1.1rem;
}

.plan-features {
    list-style:none;
    margin-bottom:30px;
    padding:0;
}

.plan-features li {
    padding:15px 0;
    border-bottom:1px solid #e2e8f0;
    display:flex;
    align-items:flex-start;
}

.plan-features li:last-child {
    border-bottom:none;
}

.plan-features li::before {
    content:'✓';
    color:var(--secondary);
    font-weight:800;
    margin-right:10px;
    font-size:1.2rem;
    flex-shrink:0;
}

.plan-button {
    text-align:center;
}

/* Tabela de comparação */
.comparison-section {
    max-width:1200px;
    margin:80px auto;
    background:white;
    padding:40px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.comparison-section h2 {
    text-align:center;
    margin-bottom:40px;
    font-size:2rem;
    color:var(--dark);
}

.comparison-table {
    width:100%;
    border-collapse:collapse;
}

.comparison-table th {
    background:var(--primary);
    color:white;
    padding:15px;
    text-align:left;
    font-weight:700;
}

.comparison-table td {
    padding:15px;
    border-bottom:1px solid #e2e8f0;
}

.comparison-table tbody tr:hover {
    background:#f8fafc;
}

/* FAQ */
.faq-section {
    max-width:900px;
    margin:80px auto;
}

.faq-section h2 {
    text-align:center;
    margin-bottom:40px;
    font-size:2rem;
    color:var(--dark);
}

.faq-item {
    background:white;
    padding:25px;
    border-radius:12px;
    margin-bottom:15px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    transition:box-shadow 0.3s;
}

.faq-item:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.faq-item summary {
    cursor:pointer;
    font-weight:700;
    font-size:1.1rem;
    padding:10px;
    color:var(--dark);
    user-select:none;
}

.faq-item summary:hover {
    color:var(--primary);
}

.faq-item p {
    margin-top:15px;
    color:var(--gray);
    line-height:1.8;
    padding-left:20px;
}

/* Responsive adicional */
@media (max-width:768px) {
    .pricing-full-grid {
        grid-template-columns:1fr;
    }
    .pricing-full-card.featured {
        transform:scale(1);
    }
    .comparison-table {
        font-size:0.9rem;
    }
    .plan-price .amount {
        font-size:2.5rem;
    }
}