/* ===========================
   BiLLU Theme – Layout CSS
   All section styles, responsive, dark mode overrides
   =========================== */

/* ── HERO ────────────────────────────────────────────────── */
.section-hero {
    position: relative;
    background: linear-gradient(135deg, #0B2430 0%, #0f3340 50%, #143845 100%);
    color: #fff;
    padding: 100px 0 120px;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
}
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; border-radius: 50%; }
.shape-1 { width: 600px; height: 600px; top: -200px; right: -100px; background: rgba(0,143,143,.08); }
.shape-2 { width: 400px; height: 400px; bottom: -150px; left: -100px; background: rgba(136,45,97,.08); }
.shape-3 { width: 200px; height: 200px; top: 40%; left: 40%; background: rgba(192,192,192,.05); }

.hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    margin-bottom: 24px;
}
.badge-dot {
    width: 8px; height: 8px;
    background: var(--accent-1);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 20px;
}
.hero-title-accent { color: var(--accent-1); }
.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,.72);
    line-height: 1.7;
    margin-bottom: 36px;
    max-width: 520px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.65);
}
.trust-item svg { color: var(--accent-1); }

/* Dashboard mockup */
.hero-visual { display: flex; justify-content: flex-end; }
.dashboard-mockup {
    background: #132d3a;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    width: 100%;
    max-width: 520px;
    border: 1px solid rgba(255,255,255,.06);
}
.mockup-header {
    background: #0B2430;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: #882D61; }
.mockup-dot:nth-child(2) { background: #C0C0C0; }
.mockup-dot:nth-child(3) { background: #008F8F; }
.mockup-url { margin-left: 10px; font-size: 11px; color: rgba(255,255,255,.35); font-family: monospace; }
.mockup-body { display: flex; min-height: 260px; }
.mockup-sidebar { width: 130px; background: #0B2430; padding: 16px 0; flex-shrink: 0; }
.sidebar-item { padding: 10px 16px; font-size: 12px; color: rgba(255,255,255,.4); cursor: default; white-space: nowrap; }
.sidebar-item.active { background: rgba(0,143,143,.2); color: var(--accent-1); }
.mockup-main { flex: 1; padding: 16px; }
.mockup-stat-row { display: flex; gap: 8px; margin-bottom: 14px; }
.mockup-stat { flex: 1; padding: 10px 8px; border-radius: 8px; text-align: center; }
.mockup-stat.green { background: rgba(0,143,143,.15); color: var(--accent-1); }
.mockup-stat.orange { background: rgba(245,158,11,.15); color: #fbbf24; }
.mockup-stat.red { background: rgba(136,45,97,.15); color: #c76b9b; }
.mockup-stat .stat-num { font-size: 1.4rem; font-weight: 700; }
.mockup-stat .stat-lbl { font-size: 10px; margin-top: 2px; }
.mockup-table { font-size: 11px; }
.mockup-row { display: grid; grid-template-columns: 1fr 80px 70px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.05); color: rgba(255,255,255,.5); align-items: center; }
.mockup-row.header-row { color: rgba(255,255,255,.3); font-weight: 600; }
.tag { padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; display: inline-block; }
.tag-green { background: rgba(0,143,143,.15); color: var(--accent-1); }
.tag-orange { background: rgba(245,158,11,.15); color: #fbbf24; }
.tag-red { background: rgba(136,45,97,.15); color: #c76b9b; }

/* ── PROBLEM ─────────────────────────────────────────────── */
.section-problem { background: var(--bg-secondary); }
.problem-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 56px;
}
.comparison-col {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.comparison-before { border-top: 4px solid #dc2626; }
.comparison-after { border-top: 4px solid var(--accent-1); }
.comparison-label { margin-bottom: 20px; }
.label-before { display: inline-block; background: #fef2f2; color: #dc2626; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.label-after { display: inline-block; background: rgba(0,143,143,.08); color: var(--accent-1); padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
[data-theme="dark"] .label-before { background: rgba(220,38,38,.15); }
[data-theme="dark"] .label-after { background: rgba(0,143,143,.15); }
.problem-list li, .solution-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--border-color); }
.problem-list li:last-child, .solution-list li:last-child { border-bottom: none; }
.icon-x { color: #dc2626; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.icon-check { color: var(--accent-1); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.comparison-arrow { display: flex; align-items: center; justify-content: center; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-box { background: var(--bg-card); border-radius: var(--radius-md); padding: 32px 24px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.stat-number { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--accent-1); line-height: 1; margin-bottom: 12px; }
.stat-desc { font-size: 14px; color: var(--text-main); line-height: 1.4; }
.stat-desc small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ── BENEFITS (TABS) ─────────────────────────────────────── */
.section-benefits { background: var(--bg-secondary); }
.benefits-tabs { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid var(--border-color); }
.tabs-nav { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
.tab-btn { flex: 1; padding: 16px 24px; background: none; border: none; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: all var(--transition); }
.tab-btn:hover { color: var(--accent-1); }
.tab-btn.active { color: var(--accent-1); border-bottom-color: var(--accent-1); background: var(--bg-card); }
.tab-panel { display: none; padding: 40px; }
.tab-panel.active { display: block; }
.benefits-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.benefits-text h3 { font-size: 1.5rem; margin-bottom: 16px; }
.benefits-text > p { font-size: 15px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.7; }
.benefits-list { display: flex; flex-direction: column; gap: 14px; }
.benefits-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; }
.benefit-icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.benefits-list strong { color: var(--text-heading); }

/* Illustrations */
.illus-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; font-size: 13px; }
.illus-header { font-weight: 700; color: var(--text-heading); margin-bottom: 14px; font-size: 14px; }
.illus-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.illus-row:last-of-type { border-bottom: none; }
.illus-company { flex: 1; font-weight: 500; color: var(--text-heading); }
.illus-badge { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.illus-badge.green { background: rgba(0,143,143,.1); color: var(--accent-1); }
.illus-badge.blue { background: rgba(136,45,97,.1); color: var(--accent-2); }
.illus-badge.orange { background: rgba(245,158,11,.1); color: #d97706; }
.illus-badge.grey { background: rgba(107,114,128,.1); color: var(--text-muted); }
.illus-btn { background: var(--accent-1); color: #fff; text-align: center; padding: 10px; border-radius: var(--radius-sm); margin-top: 12px; font-weight: 600; font-size: 13px; }
.illus-invoice .inv-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.illus-invoice .inv-row:last-child { border-bottom: none; }
.illus-invoice .inv-row span:first-child { flex: 1; color: var(--text-heading); font-weight: 500; }
.inv-btn { padding: 5px 10px; border: none; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: default; font-family: var(--font-body); }
.inv-btn.accept { background: rgba(0,143,143,.1); color: var(--accent-1); }
.inv-btn.reject { background: #fef2f2; color: #dc2626; }
.illus-progress { margin-top: 14px; }
.illus-progress span { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 6px; }
.progress-bar { height: 6px; background: var(--border-color); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent-1); border-radius: 3px; }

/* ── HOW IT WORKS ────────────────────────────────────────── */
.section-how-it-works { background: var(--bg-card); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; position: relative; }
.steps-grid::before { content: ''; position: absolute; top: 36px; left: calc(12.5% + 20px); right: calc(12.5% + 20px); height: 2px; background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); z-index: 0; }
.step-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 28px 22px 24px; text-align: center; box-shadow: var(--shadow-sm); position: relative; z-index: 1; transition: all var(--transition); border: 1px solid var(--border-color); }
.step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step-num { width: 48px; height: 48px; background: linear-gradient(135deg, var(--brand-navy), var(--accent-1)); color: #fff; border-radius: 50%; font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 4px 12px rgba(0,143,143,.3); font-family: var(--font-body); }
.step-card h3 { font-size: 1rem; margin-bottom: 8px; }
.step-card p { font-size: .86rem; color: var(--text-muted); line-height: 1.55; }

/* ── FEATURES ────────────────────────────────────────────── */
.section-features { background: var(--bg-primary); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--border-color); transition: all var(--transition); }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(0,143,143,.3); }
.feature-card-wide { grid-column: span 2; }
.feature-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature-icon-teal { background: rgba(0,143,143,.1); color: var(--accent-1); }
.feature-icon-bordo { background: rgba(136,45,97,.1); color: var(--accent-2); }
.feature-icon-navy { background: rgba(11,36,48,.08); color: var(--brand-navy); }
[data-theme="dark"] .feature-icon-navy { background: rgba(0,143,143,.12); color: var(--accent-1); }
.feature-icon-orange { background: rgba(245,158,11,.1); color: #d97706; }
.feature-icon-green { background: rgba(16,185,129,.1); color: #059669; }
.feature-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.feature-detail-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.feature-detail-list li { font-size: 13px; display: flex; align-items: center; gap: 8px; }
.feature-detail-list li::before { content: "\2192"; color: var(--accent-1); flex-shrink: 0; }

/* ── KSeF ────────────────────────────────────────────────── */
.section-ksef { background: linear-gradient(135deg, #0B2430 0%, #143845 60%, #0f3040 100%); color: #fff; }
.ksef-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.ksef-content h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); color: #fff; margin: 16px 0; }
.ksef-subtitle { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.7; margin-bottom: 36px; }
.ksef-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ksef-feature { display: flex; gap: 14px; align-items: flex-start; }
.ksef-feature-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; margin-top: 2px; }
.ksef-feature strong { color: #fff; display: block; margin-bottom: 4px; font-size: 14px; font-family: var(--font-body); }
.ksef-feature p { color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.5; margin: 0; }
.ksef-badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 32px; text-align: center; }
.ksef-logo-area { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.ksef-logo-circle { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; font-family: var(--font-body); }
.ksef-logo-circle.billu { background: rgba(0,143,143,.25); border-color: var(--accent-1); }
.ksef-connected { color: var(--accent-1); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.ksef-methods { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.ksef-methods span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 4px 12px; border-radius: 20px; font-size: 12px; color: rgba(255,255,255,.75); }
.ksef-stat-row { display: flex; gap: 24px; justify-content: center; }
.ksef-stat { text-align: center; }
.ksef-stat strong { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; font-family: var(--font-heading); }
.ksef-stat small { color: rgba(255,255,255,.55); font-size: 12px; }

/* ── SECURITY ────────────────────────────────────────────── */
.section-security { background: var(--bg-secondary); }
.security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; }
.security-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 24px; border: 1px solid var(--border-color); transition: all var(--transition); }
.security-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sec-icon { font-size: 1.8rem; margin-bottom: 12px; }
.security-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; font-family: var(--font-body); }
.security-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.security-compliance-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.compliance-badge { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-heading); box-shadow: var(--shadow-sm); }
.compliance-icon { font-size: 1.2rem; }

/* ── PRICING ─────────────────────────────────────────────── */
.section-pricing { background: var(--bg-primary); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 860px; margin: 0 auto 28px; }
.pricing-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 36px 28px; border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 24px; position: relative; transition: all var(--transition); }
.pricing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pricing-card-featured { border-color: var(--accent-1); box-shadow: 0 0 0 2px var(--accent-1), var(--shadow-lg); }
.pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent-1); color: #fff; padding: 5px 18px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pricing-header .pricing-icon { font-size: 2rem; display: block; margin-bottom: 10px; }
.pricing-header h3 { font-size: 1.4rem; margin-bottom: 6px; }
.pricing-target { font-size: 13px; color: var(--text-muted); }
.pricing-price { border-top: 1px solid var(--border-color); padding-top: 20px; }
.price-label { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.price-amount { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--text-heading); line-height: 1; margin-bottom: 6px; }
.price-period { font-size: 13px; color: var(--text-muted); }
.pricing-features { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pricing-features li { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; }
.pricing-features li span { color: var(--accent-1); font-weight: 700; flex-shrink: 0; }
.pricing-note-bottom { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.pricing-price-alert { display: flex; align-items: flex-start; gap: 14px; background: rgba(0,143,143,.06); border: 1px solid rgba(0,143,143,.2); border-radius: var(--radius-md); padding: 18px 24px; margin: 0 auto 20px; max-width: 860px; font-size: 14px; color: var(--text-main); line-height: 1.6; }
.pricing-alert-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }

/* ── TESTIMONIALS ────────────────────────────────────────── */
.section-testimonials { background: var(--bg-card); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.testimonial-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 28px 24px; position: relative; border: 1px solid var(--border-color); }
.testimonial-card::before { content: '\201C'; position: absolute; top: 16px; right: 20px; font-size: 5rem; color: var(--accent-1); opacity: .12; font-family: Georgia, serif; line-height: 1; }
.stars { color: #f5a623; font-size: .9rem; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-text { font-size: .9rem; line-height: 1.65; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-navy), var(--accent-1)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .88rem; flex-shrink: 0; font-family: var(--font-body); }
.author-name { font-size: .88rem; font-weight: 700; color: var(--text-heading); }
.author-company { font-size: .78rem; color: var(--text-muted); }

/* ── CTA ─────────────────────────────────────────────────── */
.section-cta { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); padding: 80px 0; }
.cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.cta-content h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin-bottom: 16px; }
.cta-content p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin-bottom: 32px; line-height: 1.7; }
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.cta-checklist { display: flex; flex-direction: column; gap: 14px; }
.cta-check-item { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,.85); font-size: 15px; }
.cta-check-item span { color: #fff; font-weight: 700; font-size: 18px; }

/* ── CONTACT ─────────────────────────────────────────────── */
.section-contact { background: var(--bg-secondary); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); margin-bottom: 24px; }
.contact-info-card h3 { font-size: 1.1rem; margin-bottom: 20px; }
.contact-detail { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.contact-detail:last-child { margin-bottom: 0; }
.contact-detail-icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.contact-detail strong { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; font-family: var(--font-body); }
.contact-detail a, .contact-detail span { font-size: 14px; color: var(--text-heading); }
.contact-detail a:hover { color: var(--accent-1); }
.contact-mailto { text-align: center; margin-top: 24px; }
.contact-mailto .btn { font-size: 16px; padding: 16px 36px; }

/* FAQ */
.contact-faq { background: var(--bg-card); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.contact-faq h3 { font-size: 1.1rem; margin-bottom: 16px; }
.contact-faq details { border-bottom: 1px solid var(--border-color); padding: 14px 0; }
.contact-faq details:last-child { border-bottom: none; }
.contact-faq summary { font-size: 14px; font-weight: 600; color: var(--text-heading); padding-right: 20px; list-style: none; position: relative; font-family: var(--font-body); }
.contact-faq summary::-webkit-details-marker { display: none; }
.contact-faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--accent-1); font-size: 1.2rem; }
.contact-faq details[open] summary::after { content: "\2212"; }
.contact-faq details p { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: 10px; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer { background: var(--brand-navy); color: rgba(255,255,255,.6); padding: 60px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.footer-logo .logo-text { color: #fff; }
.footer-tagline { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.footer-contact-info a { color: rgba(255,255,255,.55); font-size: 14px; }
.footer-contact-info a:hover { color: #fff; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; font-family: var(--font-body); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 14px; color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--accent-1); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 13px; color: rgba(255,255,255,.3); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-container { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .section-hero { min-height: auto; padding: 80px 0; }
    .problem-comparison { grid-template-columns: 1fr; }
    .comparison-arrow { transform: rotate(90deg); }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-card-wide { grid-column: span 1; }
    .security-grid { grid-template-columns: repeat(2, 1fr); }
    .ksef-inner { grid-template-columns: 1fr; }
    .ksef-features { grid-template-columns: 1fr; }
    .ksef-badge { max-width: 400px; margin: 0 auto; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
    .cta-inner { grid-template-columns: 1fr; gap: 32px; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .benefits-content { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid::before { display: none; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    section { padding: 64px 0; }
    .header-inner { height: 60px; }
    .site-nav { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: var(--bg-card); flex-direction: column; align-items: flex-start; padding: 24px; gap: 8px; border-top: 1px solid var(--border-color); overflow-y: auto; z-index: 99; }
    .site-nav.open { display: flex; }
    .nav-list { flex-direction: column; width: 100%; }
    .nav-list a { display: block; font-size: 16px; padding: 12px 16px; }
    .nav-actions { width: 100%; justify-content: space-between; margin-top: 8px; }
    .nav-cta { flex: 1; text-align: center; }
    .nav-hamburger { display: flex; }
    .hero-cta { flex-direction: column; }
    .hero-trust { gap: 12px; }
    .features-grid { grid-template-columns: 1fr; }
    .tabs-nav { flex-direction: column; }
    .tab-panel { padding: 24px 20px; }
    .security-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .cta-buttons { flex-direction: column; }
    .pricing-grid { max-width: 100%; }
    .steps-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .security-grid { grid-template-columns: 1fr; }
    .hero-badge { font-size: 11px; }
    .security-compliance-row { flex-direction: column; }
    .compliance-badge { width: 100%; justify-content: center; }
}