@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;color:#fff;font-family:'Inter',sans-serif;overflow:hidden;width:1280px;height:720px}
.scene{width:1280px;height:720px;position:relative;overflow:hidden}

/* Slides */
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;display:flex;align-items:center;justify-content:center;flex-direction:column}
.slide.active{opacity:1}

/* Slide 1: Intro */
.intro-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0d1b2a,#1b2838,#0d9488)}
.intro-content{position:relative;z-index:1;text-align:center}
.intro-content h1{font-size:3.5rem;font-weight:900;margin-bottom:12px;background:linear-gradient(90deg,#14b8a6,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.intro-content p{font-size:1.4rem;color:#94a3b8;margin-bottom:24px}
.intro-content .brand{font-size:1rem;color:#f59e0b;font-weight:700}
.intro-logo{width:80px;height:80px;border-radius:50%;margin-bottom:20px}

/* Slide 2: Human body */
.body-slide{background:linear-gradient(180deg,#0f172a,#1e293b)}
.human-container{position:relative;width:400px;height:600px;display:flex;align-items:center;justify-content:center}
.human-silhouette{position:absolute;transition:opacity 1.5s ease}
.skeleton-overlay{position:absolute;opacity:0;transition:opacity 1.5s ease}
.skeleton-overlay.visible{opacity:1}
.human-silhouette.fade{opacity:0.15}

/* Slide 3-6: Info slides */
.info-slide{background:linear-gradient(135deg,#0f172a,#1e293b);padding:60px}
.info-grid{display:flex;gap:60px;align-items:center;width:100%}
.info-left{flex:1;display:flex;justify-content:center}
.info-right{flex:1.2}
.info-right h2{font-size:2.2rem;font-weight:800;margin-bottom:16px;color:#14b8a6}
.info-right p{font-size:1.15rem;line-height:1.7;color:#cbd5e1;margin-bottom:12px}
.info-right .highlight{color:#f59e0b;font-weight:700}

/* Spine SVG */
.spine-svg{width:200px;height:500px}
.vertebra{fill:none;stroke:#e2e8f0;stroke-width:2;transition:all 0.5s ease}
.vertebra.curved{stroke:#ef4444;stroke-width:3}
.vertebra.normal{stroke:#10b981;stroke-width:2}

/* Degree indicator */
.degree-arc{fill:none;stroke:#f59e0b;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s ease}
.degree-arc.show{stroke-dashoffset:0}
.degree-label{font-size:1.5rem;font-weight:800;color:#f59e0b;text-align:center;margin-top:12px;opacity:0;transition:opacity 0.8s}
.degree-label.show{opacity:1}

/* Symptoms list */
.symptom-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.symptom-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.05);border-radius:12px;border-left:3px solid #14b8a6;opacity:0;transform:translateX(-20px);transition:all 0.5s ease}
.symptom-item.show{opacity:1;transform:translateX(0)}
.symptom-item .icon{font-size:1.3rem}
.symptom-item span{font-size:1rem;color:#e2e8f0}

/* Types grid */
.types-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.type-card{padding:20px;background:rgba(255,255,255,0.05);border-radius:14px;border:1px solid rgba(255,255,255,0.1);opacity:0;transform:scale(0.9);transition:all 0.5s ease}
.type-card.show{opacity:1;transform:scale(1)}
.type-card h3{font-size:1.1rem;color:#14b8a6;margin-bottom:6px}
.type-card p{font-size:0.9rem;color:#94a3b8;line-height:1.5}

/* Progress bar */
.progress-bar{position:fixed;bottom:0;left:0;height:4px;background:linear-gradient(90deg,#0d9488,#f59e0b);transition:width 0.5s ease;z-index:100}

/* CTA slide */
.cta-content{text-align:center}
.cta-content h2{font-size:3rem;font-weight:900;margin-bottom:16px;background:linear-gradient(90deg,#14b8a6,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cta-content p{font-size:1.3rem;color:#94a3b8;margin-bottom:8px}
.cta-content .phone{font-size:2rem;color:#f59e0b;font-weight:800;margin-top:20px}

/* Animations */
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pulse{animation:pulse 2s infinite}
.float{animation:float 3s ease-in-out infinite}