/* ============================================================
   Dental Journey — dentaltourism.top
   Aligned to site brand: Slate Indigo + Warm Paper + Verified Gold
   ============================================================ */

:root{
  --blue-900:#0F172A;        /* Ink Black */
  --blue-700:#1E3A5F;        /* Slate Indigo (primary) */
  --blue-500:#1E3A5F;        /* Slate Indigo (primary CTAs) */
  --blue-300:#94A3B8;        /* Mist Gray */
  --blue-100:#EFE9D9;        /* Warm Paper shade */
  --ink:#0F172A;             /* Ink Black */
  --ink-soft:#475569;        /* Cool Gray */
  --gold:#C19A4B;            /* Verified Gold */
  --bg-top:#F9F5EC;          /* Warm Paper light */
  --bg-bottom:#F5F1E8;       /* Warm Paper */
  --card:rgba(255,255,255,.72);
  --card-line:rgba(255,255,255,.92);
  --radius:14px;
  --shadow:0 10px 30px rgba(30,58,95,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);
  line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue-500)}
h1,h2,h3{font-family:"Source Serif Pro",Georgia,serif;font-weight:600;line-height:1.3;color:var(--blue-700);letter-spacing:-.01em}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(249,245,236,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(30,58,95,.08);
}
.logo{font-family:"Source Serif Pro",Georgia,serif;font-weight:600;font-size:18px;color:var(--blue-700);text-decoration:none;letter-spacing:.2px}
.logo span{color:var(--blue-500)}
.site-header nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.site-header nav a{text-decoration:none;color:var(--ink-soft);font-size:14px;font-weight:500}
.site-header nav a:hover{color:var(--blue-500)}
.nav-cta{
  background:var(--blue-500);color:#fff !important;
  padding:7px 16px;border-radius:999px;
}
.nav-cta:hover{background:var(--blue-900)}

/* ---------- hero ---------- */
.hero{
  position:relative;height:100vh;min-height:640px;
  overflow:hidden;
}
#particles{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
}
.hero-grid{
  position:relative;z-index:2;height:100%;
  max-width:1280px;margin:0 auto;padding:90px 36px 110px;
  display:grid;grid-template-columns:250px 1fr 360px;
  align-items:center;gap:24px;
  pointer-events:none; /* let wheel pass; re-enable on interactive children */
}
.hero-grid a,.hero-grid button{pointer-events:auto}

.kicker{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blue-500);font-weight:700;margin:0 0 6px;
}
.step-no{
  font-family:"Source Serif Pro",Georgia,serif;
  font-size:88px;font-weight:300;color:var(--blue-300);
  margin:0;line-height:1;letter-spacing:-2px;
  transition:opacity .4s;
}
.step-title{font-size:26px;margin:8px 0 18px;min-height:2.6em}
.step-progress{
  width:120px;height:3px;border-radius:3px;background:rgba(30,58,95,.12);
  overflow:hidden;
}
.step-progress span{
  display:block;height:100%;width:12.5%;
  background:linear-gradient(90deg,var(--blue-500),var(--gold));
  border-radius:3px;transition:width .5s ease;
}
.step-count{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

/* right panels — glass card */
.step-panels{position:relative;min-height:300px}
.panel{
  position:absolute;inset:0;
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:26px 28px;
  opacity:0;transform:translateY(14px);visibility:hidden;
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
}
.panel.active{opacity:1;transform:none;visibility:visible}
.panel h2{font-size:20px;margin:0 0 4px}
.panel .subtitle{color:var(--blue-500);font-weight:600;font-size:14.5px;margin:0 0 10px}
.panel p{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px}

/* CTA */
.cta{
  display:inline-block;text-decoration:none;
  background:var(--blue-500);color:#fff;
  font-weight:600;font-size:14px;
  padding:11px 22px;border-radius:999px;
  box-shadow:0 6px 16px rgba(30,58,95,.22);
  transition:background .25s,transform .25s;
}
.cta:hover{background:var(--blue-900);transform:translateY(-1px)}
.cta.ghost{
  background:transparent;color:var(--blue-500);
  border:1.5px solid var(--blue-300);box-shadow:none;
}
.cta.ghost:hover{border-color:var(--blue-500);background:rgba(30,58,95,.06)}

/* figure caption — names the current particle shape.
   Deliberately distinct from the step tabs below:
   serif italic + warm gold, no pill background. */
.shape-caption{
  position:absolute;left:0;right:0;bottom:108px;z-index:3;
  margin:0;text-align:center;
  font-family:"Source Serif Pro",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;
  font-size:14.5px;letter-spacing:.12em;
  color:var(--gold);
  opacity:0;transform:translateY(4px);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.shape-caption::before,.shape-caption::after{
  content:"";display:inline-block;vertical-align:middle;
  width:26px;height:1px;background:rgba(193,154,75,.45);
  margin:0 12px;
}
.shape-caption.show{opacity:1;transform:none}

/* dots nav */
.dots{
  position:absolute;left:0;right:0;bottom:42px;z-index:3;
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
.dots button{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(30,58,95,.12);
  border-radius:999px;padding:6px 13px;
  font:500 12px/1 inherit;color:var(--ink-soft);
  cursor:pointer;backdrop-filter:blur(8px);
  transition:all .25s;
}
.dots button i{
  width:7px;height:7px;border-radius:50%;
  background:var(--blue-300);transition:all .25s;
}
.dots button:hover{border-color:var(--blue-300)}
.dots button.active{
  background:var(--blue-500);color:#fff;border-color:var(--blue-500);
}
.dots button.active i{background:var(--gold)}

.scroll-hint{
  position:absolute;bottom:12px;left:0;right:0;z-index:3;
  text-align:center;font-size:11.5px;color:var(--ink-soft);
  opacity:.7;margin:0;
}

/* ---------- guide ---------- */
.guide,.faq{max-width:880px;margin:0 auto;padding:80px 28px 20px}
.guide h2,.faq h2{font-size:28px;margin:0 0 12px}
.lead{color:var(--ink-soft);font-size:16.5px;margin-bottom:36px}
.guide-list{counter-reset:step;list-style:none;margin:0;padding:0}
.guide-list li{
  counter-increment:step;position:relative;
  padding:22px 26px 22px 78px;margin-bottom:16px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.95);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.guide-list li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:24px;top:22px;
  font-family:"Source Serif Pro",Georgia,serif;
  font-size:22px;font-weight:400;color:var(--blue-300);
}
.guide-list h3{margin:0 0 6px;font-size:17px}
.guide-list p{margin:0;font-size:14.5px;color:var(--ink-soft)}

/* ---------- faq ---------- */
.faq{padding-bottom:40px}
.faq details{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.95);
  border-radius:14px;box-shadow:var(--shadow);
  margin-bottom:12px;padding:0 22px;
}
.faq summary{
  cursor:pointer;font-weight:600;font-size:15.5px;color:var(--blue-900);
  padding:17px 0;list-style:none;position:relative;padding-right:30px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);
  color:var(--blue-500);font-size:20px;font-weight:300;transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0 0 18px;font-size:14.5px;color:var(--ink-soft)}

/* ---------- conversion ---------- */
.convert{max-width:980px;margin:0 auto;padding:50px 28px 90px}
.convert-card{
  text-align:center;
  background:linear-gradient(150deg,#ffffff 0%,var(--blue-100) 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:24px;box-shadow:0 18px 50px rgba(30,58,95,.12);
  padding:54px 36px;
}
.convert-card h2{font-size:26px;margin:0 0 10px}
.convert-card>p{color:var(--ink-soft);max-width:560px;margin:0 auto 28px;font-size:15.5px}
.convert-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.fineprint{font-size:12px;color:var(--ink-soft);opacity:.8;margin-top:26px}

/* ---------- footer (site-standard) ---------- */
.site-footer{
  background:#fff;border-top:1px solid rgba(30,58,95,.08);
  padding:32px 0; margin-top:20px;
}
.site-footer-inner{
  max-width:1080px;margin:0 auto;padding:0 28px;
  font-size:14px;color:var(--ink-soft);
}
.site-footer-nav{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.site-footer-nav a{color:var(--blue-700);text-decoration:none;font-weight:500}
.site-footer-nav a:hover{text-decoration:underline}
.site-footer-disclaimer{font-size:12px;color:var(--blue-300);line-height:1.6;margin-top:14px;max-width:80ch}
.site-footer p{margin:6px 0}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:200px 1fr 320px;padding:84px 24px 110px}
  .step-no{font-size:64px}
  .step-title{font-size:21px}
}
@media (max-width:820px){
  .hero{height:auto;min-height:100svh;padding-bottom:120px}
  .hero-grid{
    grid-template-columns:1fr;gap:8px;
    padding:78px 18px 0;align-items:start;
  }
  .canvas-space{height:34svh}
  .step-meta{order:1;text-align:center}
  .step-no{font-size:44px}
  .step-title{font-size:19px;min-height:auto;margin-bottom:8px}
  .step-progress{margin:0 auto}
  .canvas-space{order:2}
  .step-panels{order:3;min-height:260px}
  .panel{padding:20px}
  .dots{position:absolute;bottom:36px;gap:6px;padding:0 10px}
  .dots button span{display:none}
  .dots button{padding:8px}
  .shape-caption{bottom:86px;font-size:12.5px}
  .shape-caption::before,.shape-caption::after{width:16px;margin:0 8px}
  .site-header nav a:not(.nav-cta){display:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .panel,.step-progress span,.dots button,.cta{transition:none}
}