:root {
  --warm: #fefaf3;
  --warm-muted: #efe8db;
  --ink: #1a1410;
  --ink-muted: #7a7268;
  --ink-dim: #c4bbb0;
  --amber: #f59e0b;
  --amber-glow: rgba(245, 158, 11, 0.18);
  --amber-soft: #fef3c7;
  --radius: 16px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { background:var(--warm); scroll-behavior:smooth; }
body {
  font-family:var(--sans); color:var(--ink); background:var(--warm);
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-weight:400;
}

::selection { background:var(--amber); color:var(--ink); }

/* ============== HORIZONTAL STORY ============== */
.story {
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; height:100vh; width:100vw;
  scrollbar-width:none;
}
.story::-webkit-scrollbar { display:none; }

.slide {
  flex:0 0 100vw; height:100vh; scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:20px 40px;
}
.slide-inner {
  display:flex; align-items:center; gap:80px; max-width:1200px;
  width:100%; height:100%; justify-content:center;
}

/* Slide colors */
.slide-0 { background:var(--warm); }
.slide-1 { background:linear-gradient(135deg, var(--warm) 0%, var(--amber-soft) 100%); }
.slide-2 { background:linear-gradient(135deg, var(--warm) 0%, #f5f0e8 100%); }
.slide-3 { background:linear-gradient(135deg, var(--amber-soft) 0%, var(--warm) 100%); }
.slide-4 { background:linear-gradient(135deg, #f5f0e8 0%, var(--warm) 100%); }
.slide-cta { background:linear-gradient(135deg, var(--ink) 0%, #2a2318 100%); color:var(--warm); }

/* ============== TYPOGRAPHY ============== */
.overline {
  font-family:var(--sans); font-size:0.7rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:20px; color:var(--amber);
}
.slide-cta .overline { color:var(--amber); }

h1, h2 {
  font-family:var(--serif); font-weight:700; line-height:1.08;
  letter-spacing:-0.01em; margin-bottom:28px;
}
h1 { font-size:clamp(2.6rem, 7vw, 5.6rem); }
h2 { font-size:clamp(2rem, 5vw, 4rem); }

.lead {
  font-size:1.08rem; color:var(--ink-muted); line-height:1.75;
  max-width:480px; margin-bottom:32px;
}
.slide-cta .lead { color:rgba(254,250,243,0.7); }

.feature-list {
  list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.feature-list li {
  font-size:0.82rem; color:var(--ink-muted); padding:8px 0;
  border-bottom:1px solid rgba(26,20,16,0.06);
}
.feature-list li::before { content:'— '; color:var(--amber); font-weight:700; }

.hero-trust {
  display:flex; gap:20px; margin-top:28px; flex-wrap:wrap;
}
.hero-trust span {
  font-size:0.72rem; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-dim);
  padding:5px 12px; border:1px solid rgba(26,20,16,0.12); border-radius:100px;
}

/* CTA slide special */
.slide-inner-cta { flex-direction:column; text-align:center; max-width:700px; }
.slide-text-cta { text-align:center; }
.slide-text-cta .lead { max-width:100%; }

.cta-features {
  display:flex; gap:16px; justify-content:center; margin-bottom:36px; flex-wrap:wrap;
}
.cta-features div {
  padding:14px 20px; border:1px solid rgba(254,250,243,0.12);
  border-radius:var(--radius); text-align:center; min-width:100px;
}
.cta-features div strong { display:block; font-family:var(--serif); font-size:1.5rem; color:var(--amber); }
.cta-features div { font-size:0.75rem; color:rgba(254,250,243,0.5); }

/* ============== VISUAL / ILLUSTRATIONS ============== */
.slide-visual { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:20px; }
.organic-illustration { width:300px; height:300px; }
.organic-illustration svg { width:100%; height:100%; }

.draw-tooth { stroke-dasharray:1200; stroke-dashoffset:1200; animation:drawTooth 3s ease-out forwards; }
.draw-crown { animation:drawCrown 2.5s ease-out 0.5s forwards; }
.draw-crown2 { animation:drawCrown 2.5s ease-out 0.8s forwards; }
.draw-crown3 { animation:drawCrown 2.5s ease-out 1.1s forwards; }
.draw-circle { stroke-dasharray:900; stroke-dashoffset:900; animation:drawCircle 2s ease-out 0.3s forwards; }

@keyframes drawTooth { to { stroke-dashoffset:0; } }
@keyframes drawCrown { to { stroke-dashoffset:0; } }
@keyframes drawCircle { to { stroke-dashoffset:0; } }

.hero-data { display:flex; gap:16px; }
.data-point {
  padding:10px 18px; border:1px solid rgba(26,20,16,0.1); border-radius:100px;
  font-size:0.75rem; color:var(--ink-muted);
}
.data-point strong { color:var(--ink); font-family:var(--serif); font-size:1.2rem; }

/* ============== FLOATING CTA ============== */
.cta-pill {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:99;
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:100px;
  background:var(--ink); color:var(--warm);
  text-decoration:none; font-size:0.85rem; font-weight:600;
  box-shadow:0 8px 32px rgba(26,20,16,0.25), 0 0 0 1px rgba(245,158,11,0.3);
  transition:all var(--transition); border:none; cursor:pointer;
}
.cta-pill:hover {
  transform:translateX(-50%) translateY(-3px);
  box-shadow:0 12px 40px rgba(26,20,16,0.35), 0 0 0 1px rgba(245,158,11,0.5);
  background:#2a2318;
}

/* ============== NAVIGATION DOTS ============== */
.slide-nav {
  position:fixed; right:28px; top:50%; transform:translateY(-50%); z-index:98;
  display:flex; flex-direction:column; gap:12px;
}
.slide-dot {
  width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-dim);
  background:transparent; cursor:pointer; padding:0; transition:all var(--transition);
}
.slide-dot:hover { border-color:var(--amber); background:var(--amber-soft); }
.slide-dot.active { background:var(--amber); border-color:var(--amber); transform:scale(1.4); }
.slide-dot.cta-dot { border-color:var(--amber); border-width:2px; }

/* ============== SLIDE TEXT ============== */
.slide-text { max-width:500px; }

/* ============== FORM ============== */
.inline-form { display:flex; flex-wrap:wrap; gap:10px; max-width:560px; margin:0 auto 12px; justify-content:center; }
.inline-form input {
  padding:14px 18px; border:1.5px solid rgba(254,250,243,0.15);
  border-radius:100px; background:rgba(254,250,243,0.04);
  color:var(--warm); font-size:0.85rem; font-family:inherit;
  transition:all var(--transition); outline:none; flex:1; min-width:160px;
}
.inline-form input::placeholder { color:rgba(254,250,243,0.3); }
.inline-form input:focus { border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-glow); }
.btn-submit {
  padding:14px 28px; border-radius:100px; border:none;
  background:var(--amber); color:var(--ink); font-size:0.85rem; font-weight:700;
  font-family:inherit; cursor:pointer; transition:all var(--transition);
  box-shadow:0 4px 20px var(--amber-glow);
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(245,158,11,0.35); }
.form-feedback { text-align:center; font-size:0.8rem; font-weight:500; min-height:20px; }
.form-feedback.success { color:#34d399; }
.form-feedback.error { color:#f87171; }
.form-feedback.loading { color:rgba(254,250,243,0.4); }


/* ============== TOOTH 3D CANVAS ============== */
.tooth-canvas {
  width:260px; height:300px; flex-shrink:0;
  margin-top:-30px;
}
@media (max-width:768px) {
  .tooth-canvas { width:180px; height:210px; }
}

/* ============== RESPONSIVE ============== */
@media (max-width:1024px) {
  .slide-inner { gap:40px; }
  .organic-illustration { width:240px; height:240px; }
}
@media (max-width:768px) {
  .slide { padding:20px; }
  .slide-inner { flex-direction:column; gap:24px; text-align:center; }
  .slide-text { max-width:100%; text-align:center; }
  .lead { max-width:100%; }
  .feature-list { grid-template-columns:1fr; text-align:left; }
  .hero-trust { justify-content:center; }
  .organic-illustration { width:180px; height:180px; }
  .hero-data { justify-content:center; }
  .slide-nav { right:8px; gap:8px; }
  .slide-dot { width:8px; height:8px; }
  .inline-form { flex-direction:column; align-items:center; }
  .inline-form input { width:100%; }
  .cta-pill { padding:12px 22px; font-size:0.8rem; bottom:16px; }
}
@media (max-width:480px) {
  h1 { font-size:2.2rem; }
  h2 { font-size:1.8rem; }
  .slide-inner { gap:16px; }
  .organic-illustration { width:140px; height:140px; }
  .cta-features { gap:8px; }
  .cta-features div { min-width:70px; padding:10px 12px; }
  .cta-features div strong { font-size:1.2rem; }
}