@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary: #1A237E;
    --primary-light: #3949AB;
    --accent: #00897B;
    --accent-light: #00BFA5;
    --text: #263238;
    --text-light: #546E7A;
    --bg-white: #ffffff;
    --bg-light: #F8F9FA;
    --card-border: #eee;
    --orange: #FF8A65;
    --radius: 14px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
body { font-family:'Be Vietnam Pro','Inter',-apple-system,sans-serif; color:var(--text); line-height:1.6; overflow-x:hidden; }
kbd { background:rgba(0,0,0,0.08); padding:2px 8px; border-radius:4px; font-size:12px; border:1px solid rgba(0,0,0,0.1); color:var(--text); }

/* ===== SLIDE LAYOUT ===== */
.slide {
    min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center;
    scroll-snap-align:start; position:relative; padding:40px 24px;
}
.slide-content { max-width:1100px; width:100%; position:relative; z-index:1; }

.slide--dark {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B2838 50%, var(--primary) 100%);
    color:white;
}
.slide--light {
    background: var(--bg-white);
    color:var(--text);
}
.slide--accent {
    background: linear-gradient(135deg, #004D40 0%, var(--accent) 50%, #00695C 100%);
    color:white;
}

/* ===== TYPOGRAPHY ===== */
.slide-title {
    font-size:48px; font-weight:800; letter-spacing:-1px; line-height:1.15; margin-bottom:8px;
}
.slide--light .slide-title { color:var(--primary); }
.slide-subtitle { font-size:20px; font-weight:400; opacity:0.8; margin-bottom:8px; }
.slide-text { font-size:16px; line-height:1.7; }
.highlight { color:var(--accent-light); }
.slide--light .highlight { color:var(--accent); }

.badge {
    display:inline-block; padding:6px 20px; border-radius:24px; font-size:13px; font-weight:600;
    letter-spacing:0.5px; margin-bottom:8px;
}
.slide--dark .badge { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); color:white; }
.slide--light .badge { background:rgba(26,35,126,0.08); color:var(--primary); border:1px solid rgba(26,35,126,0.12); }
.slide--accent .badge { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); color:white; }

/* ===== CARDS ===== */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }

.feature-card {
    padding:20px; border-radius:var(--radius); transition:transform .3s, box-shadow .3s;
}
.feature-card:hover { transform:translateY(-4px); }
.slide--dark .feature-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); backdrop-filter:blur(8px); }
.slide--dark .feature-card:hover { box-shadow:0 8px 32px rgba(0,191,165,0.1); border-color:rgba(0,191,165,0.2); }
.slide--light .feature-card { background:var(--bg-light); border:1px solid var(--card-border); }
.slide--light .feature-card:hover { box-shadow:0 8px 24px rgba(26,35,126,0.08); }
.slide--accent .feature-card { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(8px); }

/* Problem card with orange left border */
.problem-card {
    background:var(--bg-light); border:1px solid var(--card-border); border-left:3px solid var(--orange);
    border-radius:12px; padding:20px 18px; transition:transform .3s;
}
.problem-card:hover { transform:translateY(-3px); }
.problem-card h3 { color:var(--primary); font-size:.92rem; font-weight:700; margin-bottom:4px; }
.problem-card p { color:var(--text-light); font-size:.82rem; line-height:1.5; }

/* Solution pillar card */
.solution-card {
    border-radius:var(--radius); padding:28px 22px; text-align:center; transition:transform .3s;
}
.solution-card:hover { transform:translateY(-4px); }
.solution-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
.solution-card p { font-size:.84rem; line-height:1.6; }

.feature-card h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.feature-card p { font-size:14px; opacity:0.8; line-height:1.5; }
.card-icon { font-size:32px; margin-bottom:10px; }

.stat-card {
    padding:20px 28px; border-radius:var(--radius); text-align:center; min-width:120px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(8px);
}
.stat-number { font-size:36px; font-weight:800; color:var(--accent-light); line-height:1; }
.stat-label { font-size:13px; opacity:0.7; margin-top:4px; }

.icon-card {
    padding:24px; border-radius:var(--radius); text-align:center; min-width:160px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(8px);
    transition:transform .3s;
}
.icon-card:hover { transform:translateY(-4px); }
.ic-icon { font-size:36px; margin-bottom:8px; }
.ic-title { font-size:15px; font-weight:700; }
.ic-desc { font-size:13px; opacity:0.7; margin-top:2px; }

/* ===== PRICING CARDS ===== */
.pricing-card {
    padding:28px 24px; border-radius:var(--radius); text-align:center; width:260px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(8px);
    position:relative; transition:transform .3s;
}
.pricing-card:hover { transform:translateY(-6px); }
.pricing-card.highlight-card {
    background:rgba(0,137,123,0.12); border-color:var(--accent);
    box-shadow:0 0 40px rgba(0,137,123,0.15);
}
.pricing-badge {
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:white; padding:4px 16px; border-radius:12px;
    font-size:12px; font-weight:700;
}
.pricing-icon { font-size:36px; margin-bottom:8px; }
.pricing-title { font-size:18px; font-weight:700; margin-bottom:4px; }
.pricing-desc { font-size:13px; opacity:0.6; margin-bottom:16px; }
.pricing-list { list-style:none; text-align:left; font-size:14px; }
.pricing-list li { padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.pricing-list li:last-child { border:none; }

/* ===== TABLE ===== */
.slide-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; font-size:14px; }
.slide-table th { background:var(--primary); color:white; padding:12px 16px; font-weight:600; text-align:left; }
.slide-table td { padding:10px 16px; border-bottom:1px solid #E0E0E0; }
.slide-table tr:nth-child(even) td { background:#F8F9FE; }
.slide-table td:first-child { font-weight:500; color:var(--text); }

/* ===== CTA BUTTONS ===== */
.cta-btn {
    display:inline-block; padding:14px 28px; border-radius:12px; font-size:15px; font-weight:600;
    text-decoration:none; transition:all .3s; cursor:pointer;
    background:var(--accent); color:white; border:2px solid var(--accent);
}
.cta-btn:hover { background:#00A68B; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,137,123,0.3); }
.cta-outline {
    background:transparent; color:white; border:2px solid rgba(255,255,255,0.4);
}
.cta-outline:hover { border-color:white; background:rgba(255,255,255,0.1); }

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

.animate { opacity:0; transform:translateY(30px); }
.animate.animated { animation: fadeInUp 0.6s ease forwards; }

/* ===== NAVIGATION ===== */
.progress-bar-track { position:fixed; top:0; left:0; width:100%; height:3px; background:rgba(0,0,0,0.06); z-index:100; }
.progress-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); width:0; transition:width .4s ease; }

.slide-counter {
    position:fixed; bottom:20px; left:20px; font-size:13px; font-weight:600; color:var(--text);
    background:rgba(255,255,255,0.9); padding:6px 14px; border-radius:20px; z-index:100;
    backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,0.08);
}

.slide-nav { position:fixed; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:100; }
.nav-dot {
    width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.15);
    border:none; cursor:pointer; transition:all .3s; padding:0;
}
.nav-dot.active { background:var(--accent); box-shadow:0 0 8px rgba(0,137,123,0.5); transform:scale(1.3); }
.nav-dot:hover { background:rgba(0,0,0,0.3); }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
    .slide-title { font-size:28px; }
    .slide-subtitle { font-size:16px; }
    .feature-grid { grid-template-columns:1fr; }
    .slide { padding:24px 16px; }
    .pricing-card { width:100%; }
    .stat-card { min-width:90px; padding:14px; }
    .stat-number { font-size:24px; }
    .slide-nav { display:none; }
}

/* ===== PRINT ===== */
@media print {
    .slide { min-height:auto; page-break-after:always; padding:20px; }
    .slide-nav, .slide-counter, .progress-bar-track { display:none; }
    .animate { opacity:1!important; transform:none!important; }
    .slide--dark, .slide--accent { background:#fff!important; color:#000!important; -webkit-print-color-adjust:exact; }
}
