:root {
    --bg-main: #f4f7f6;
    --bg-white: #ffffff;
    --text-main: #1a202c;
    --text-muted: #718096;
    --primary: #e32636;
    --primary-hover: #b81f2b;
    --green: #38a169;
    --border-color: #e2e8f0;
    --shadow-sm: 0 4px 6px rgba(0,0,0,0.03);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.05);
    --shadow-lg: 0 20px 40px rgba(227, 38, 54, 0.15);
    --radius: 16px;
    --font: 'Nunito Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font); background: var(--bg-main); color: var(--text-main); line-height: 1.7; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.text-primary { color: var(--primary); }
.text-green { color: var(--green); }
.text-muted { color: var(--text-muted); }
.text-white { color: #fff; }
.text-sm { font-size: 0.85rem; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.bg-white { background: var(--bg-white); }
.bg-gray { background: #edf2f7; }
.bg-dark { background: #2d3748; }

h1, h2, h3 { font-weight: 800; line-height: 1.3; margin-bottom: 1rem; }
h1 { font-size: 2.8rem; letter-spacing: -1px; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
p { margin-bottom: 1rem; }

/* Header */
.app-header { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-color); padding: 15px 0; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; color: var(--text-main); font-size: 1.2rem; }
.logo img { height: 35px; }
.main-nav a { text-decoration: none; color: var(--text-muted); margin-left: 20px; font-weight: 600; transition: 0.3s; }
.main-nav a:hover { color: var(--primary); }

/* Layouts */
.section { padding: 5rem 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.align-center { align-items: center; }

/* Components */
.card { background: var(--bg-white); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); }
.card.border-green { border-top: 4px solid var(--green); }
.card.border-red { border-top: 4px solid var(--primary); }
.mini-card { background: var(--bg-main); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem; }

/* Hero */
.hero { padding: 6rem 0; background: linear-gradient(180deg, #fff 0%, #f4f7f6 100%); }
.hero-container { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 4rem; align-items: center; }
.badge { display: inline-block; background: rgba(227,38,54,0.1); color: var(--primary); padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 800; margin-bottom: 1rem; text-transform: uppercase; }
.subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.warning-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 1rem; border-radius: 4px; font-size: 0.9rem; color: #856404; margin-top: 1.5rem; }
.hero-image img, .shadow-img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-lg); transition: transform 0.4s ease; }
.hero-image:hover img, .image-showcase:hover .shadow-img { transform: translateY(-5px); }
.img-caption { font-size: 0.85rem; color: var(--text-muted); margin-top: 10px; font-style: italic; }

/* Table */
.table-card { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 1.2rem; border-bottom: 1px solid var(--border-color); }
th { background: #f8fafc; color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) { background: #fafafa; }

/* Timeline / Lists */
.timeline { list-style: none; border-left: 2px solid var(--border-color); padding-left: 20px; margin-left: 10px; margin-top: 1.5rem; }
.timeline li { position: relative; margin-bottom: 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; }
.alert-info { background: #e6fffa; color: #234e52; padding: 1rem; border-radius: 8px; font-size: 0.9rem; }
.custom-list { list-style: none; }
.custom-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.8rem; }
.custom-list li::before { content: "•"; color: var(--primary); font-weight: bold; position: absolute; left: 0; font-size: 1.2rem; line-height: 1; }
.check-list-green li::before { content: "✓"; color: var(--green); }
.cross-list-red li::before { content: "✕"; color: var(--primary); }

/* Interactive Tabs */
.tabs-container { background: var(--bg-main); border-radius: 12px; padding: 5px; border: 1px solid var(--border-color); }
.tab-buttons { display: flex; gap: 5px; margin-bottom: 10px; }
.tab-btn { flex: 1; padding: 12px; border: none; background: transparent; border-radius: 8px; font-weight: 600; cursor: pointer; color: var(--text-muted); transition: 0.3s; }
.tab-btn.active { background: var(--bg-white); color: var(--primary); box-shadow: var(--shadow-sm); }
.tab-content { display: none; padding: 1rem; }
.tab-content.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Feature List */
.feature-list { list-style: none; margin-top: 1rem; }
.feature-list li { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.feature-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* Ratings / Progress Bars */
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.rating-item { background: var(--bg-white); padding: 1.5rem; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.rating-info { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 8px; }
.progress-bar { width: 100%; height: 8px; background: #edf2f7; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.progress-fill { height: 100%; background: var(--primary); width: 0; transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rating-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

/* FAQ Accordion */
.faq-wrapper { max-width: 800px; margin: 0 auto; }
.faq-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-sm); transition: 0.3s; }
.faq-btn { width: 100%; padding: 1.2rem; text-align: left; background: none; border: none; font-weight: 600; font-size: 1.05rem; cursor: pointer; display: flex; justify-content: space-between; color: var(--text-main); font-family: inherit; }
.faq-btn::after { content: "+"; color: var(--primary); font-size: 1.5rem; transition: 0.3s; }
.faq-card.active .faq-btn::after { transform: rotate(45deg); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-content p { padding: 0 1.2rem 1.2rem; margin: 0; color: var(--text-muted); }

/* Floating CTA */
.floating-cta { position: fixed; bottom: -100px; right: 30px; background: var(--primary); color: #fff; padding: 15px 30px; border-radius: 30px; font-weight: 800; text-decoration: none; box-shadow: var(--shadow-lg); transition: 0.4s ease; z-index: 999; }
.floating-cta.visible { bottom: 30px; }
.floating-cta:hover { background: var(--primary-hover); transform: scale(1.05); }

/* Footer */
.app-footer { background: var(--bg-white); padding: 3rem 0; border-top: 1px solid var(--border-color); }
.footer-logo { height: 40px; filter: grayscale(1); opacity: 0.6; }

/* Responsive */
@media(max-width: 992px) {
    .grid-2, .hero-container { grid-template-columns: 1fr; }
    .hero-image { order: -1; } /* Image on top for mobile */
    .rating-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2.2rem; }
}
@media(max-width: 768px) {
    .main-nav { display: none; }
    .card { padding: 1.5rem; }
    .section { padding: 3rem 0; }
}