/* styles.css */
:root{
  --bg: #ffffff;
  --bg-alt:#f1f5f9;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#0ea5e9; /* sky-500 */
  --primary-600:#0284c7;
  --ring: rgba(14,165,233,.35);
  --shadow: 0 10px 30px rgba(2,132,199,.15);
}
:root.dark{
  --bg:#0b1220;
  --bg-alt:#0f172a;
  --card:#0b1220;
  --text:#e5f0ff;
  --muted:#94a3b8;
  --ring: rgba(56,189,248,.35);
  --shadow: 0 12px 40px rgba(14,165,233,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Cairo, Arial, "Noto Sans", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
.no-js .hero .tooth-3d{opacity:1;transform:none}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 92%); margin-inline:auto}
.row{display:flex;gap:1rem}
.row.gap{gap:1.25rem}
.row.spread{justify-content:space-between}
.row.align-center{align-items:center}
.row.wrap{flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
@media (max-width: 920px){.grid-2{grid-template-columns:1fr;}}
.center{text-align:center}
.muted{color:var(--muted)}
.accent{color:var(--primary)}
.btn{
  appearance:none;border:0;cursor:pointer;border-radius:999px;
  padding:.85rem 1.25rem;font-weight:600;box-shadow:var(--shadow);
  background:var(--card);color:var(--text);transition:.25s transform, .25s opacity, .25s background;
}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-600)); color:#fff}
.btn.secondary{background:var(--bg-alt)}
.btn.ghost{background:transparent;border:1px solid var(--primary);color:var(--primary)}
.btn:hover{transform:translateY(-2px)}
.icon-btn{background:transparent;border:1px solid transparent;border-radius:12px;padding:.6rem;cursor:pointer}
.icon{width:24px;height:24px;display:inline-block;vertical-align:middle;fill:currentColor}
.icon.sm{width:18px;height:18px}
.tooth.lg{width:80px;height:80px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem;z-index:999}

.topbar{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.7);
  backdrop-filter: blur(8px); border-bottom:1px solid rgba(2,132,199,.08)
}
:root.dark .topbar{background:rgba(11,18,32,.6)}
.topbar .brand{display:flex;align-items:center;gap:.75rem;padding:.75rem 0}
.logo{width:40px;height:40px;fill:var(--primary);filter: drop-shadow(0 8px 16px rgba(14,165,233,.25))}
.brand-text small{display:block;color:var(--muted);max-width:36ch}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;margin-right:.5rem}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:.3rem 0;border-radius:2px}
.nav-list{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.nav-list a{padding:.75rem .75rem;border-radius:.5rem}
.nav-list a:hover{background:var(--bg-alt);text-decoration:none}
.actions{display:flex;align-items:center;gap:.5rem}
@media (max-width: 960px){
  .nav-toggle{display:block}
  .nav-list{position:absolute;right:1rem;top:64px;background:var(--card);box-shadow:var(--shadow);padding:1rem;border-radius:1rem;display:none;flex-direction:column}
  .nav-list.open{display:flex}
}

.hero{
  position:relative; padding:clamp(2rem, 4vw, 4rem) 0 3rem;
  background: radial-gradient(1200px 400px at 20% -10%, rgba(14,165,233,.15), transparent),
              linear-gradient(180deg, var(--bg), var(--bg-alt));
}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.lead{font-size:1.1rem;max-width:48ch}
.stats{display:flex;gap:2rem;list-style:none;padding:0;margin:1.5rem 0 0}
.stats .counter{font-size:2rem;font-weight:800;display:block}
.hero-visual{position:relative;min-height:340px}
.tooth-3d{position:relative; width:240px; aspect-ratio:1; margin:1rem auto 2rem; transform:translateZ(0) rotate(-8deg) scale(0.9); opacity:0; transition:1s ease-out; }
.tooth-3d .tooth{width:100%;height:100%;fill:var(--primary);filter: drop-shadow(0 25px 45px rgba(14,165,233,.35))}
.tooth-3d .glow{
  position:absolute;inset:15% 10%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), rgba(14,165,233,.2) 40%, transparent 60%);
  filter:blur(12px);mix-blend-mode:screen;pointer-events:none;
}
.hero.revealed .tooth-3d{opacity:1; transform:rotate(0) scale(1)}
.offer-card{position:absolute;right:0;top:0;background:var(--card);border-radius:1.25rem;padding:1rem 1.25rem;box-shadow:var(--shadow);max-width:280px}
.countdown{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.countdown .pill{background:var(--bg-alt);padding:.5rem .75rem;border-radius:.75rem;min-width:64px;text-align:center}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:80px;background: radial-gradient(70% 80px at 50% 0, rgba(14,165,233,.15), transparent);}

.section{padding:clamp(2rem, 5vw, 4rem) 0}
.section.alt{background:var(--bg-alt)}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.card{
  grid-column:span 12;background:var(--card);border:1px solid rgba(2,132,199,.08);border-radius:1.25rem;
  padding:1.25rem; box-shadow:var(--shadow)
}
.service{grid-column:span 3}
.doc{grid-column:span 3}
.blog{grid-column:span 4}
@media (max-width: 1100px){ .service,.doc{grid-column:span 4} .blog{grid-column:span 6}}
@media (max-width: 760px){ .service,.doc,.blog{grid-column:span 12} }
.services-grid .service{position:relative;overflow:hidden}
.icon-badge{font-size:1.6rem; background:var(--bg-alt); width:44px;height:44px;display:grid;place-items:center;border-radius:.9rem;margin-bottom:.5rem}
.service:hover{transform:translateY(-4px);transition:.25s}
.checks{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.field{display:grid;gap:.35rem;flex:1}
.field input,.field select{
  padding:.8rem .9rem;border-radius:.75rem;border:1px solid rgba(2,132,199,.25);background:var(--bg);
  color:var(--text); outline: none;
}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px var(--ring)}
.error{color:#ef4444;min-height:1em}

.form .row{align-items:flex-end}
.before-after .ba-wrap{position:relative;overflow:hidden;border-radius:1rem}
.before-after .ba-img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.before-after .ba-img.before{z-index:1}
.before-after .ba-img.after{clip-path:inset(0 0 0 50%);z-index:2}
#baSlider{position:relative;z-index:3;width:100%;appearance:none;background:transparent}
#baSlider::-webkit-slider-thumb{appearance:none;width:0;height:0}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--primary);z-index:2}
.ba-wrap::after{content:"";position:absolute;top:50%;left:calc(50% - 16px);width:32px;height:32px;background:var(--card);border:2px solid var(--primary);border-radius:999px;transform:translateY(-50%);z-index:4;box-shadow:var(--shadow)}

.slider{position:relative;overflow:hidden}
.slides{display:flex;transition:transform .5s}
.slide{flex:0 0 100%;padding:1rem}
.slider .prev,.slider .next{position:absolute;top:50%;transform:translateY(-50%);background:var(--card);box-shadow:var(--shadow)}
.slider .prev{left:8px}.slider .next{right:8px}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:.75rem}
.dots button{width:10px;height:10px;border-radius:999px;border:0;background:var(--bg-alt);cursor:pointer}
.dots button.active{background:var(--primary)}

.video-poster{
  min-height:220px;border-radius:1rem;background:
  radial-gradient(120px 60px at 20% 20%, rgba(14,165,233,.25), transparent),
  linear-gradient(135deg, var(--bg-alt), var(--bg));
  position:relative;display:grid;place-items:center
}
.poster-mark{width:120px;height:120px;border-radius:1rem;background:var(--card);display:grid;place-items:center;box-shadow:var(--shadow)}
.link{display:inline-flex;gap:.35rem;align-items:center}
.faq summary{cursor:pointer;font-weight:600}
.faq + .faq{margin-top:.5rem}

.footer{padding:2rem 0;border-top:1px solid rgba(2,132,199,.12);background:linear-gradient(180deg, transparent, rgba(14,165,233,.05))}
.footer-links{display:flex;gap:1rem;margin-right:auto}
.footer .muted{margin-left:auto}

.team-photo{margin:0}
.services-grid .calculator{grid-column:span 12}
.estimate{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:700}

.contact-list{list-style:none;padding:0;display:grid;gap:.5rem}
.map-card iframe{border-radius:1rem}

.floating{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.6rem;z-index:50}
.fab{width:52px;height:52px;border-radius:999px;display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
.fab.phone{background:linear-gradient(135deg, #10b981, #059669)}
.fab.calendar{background:linear-gradient(135deg, var(--primary), var(--primary-600))}

.modal{position:fixed;inset:0;background:rgba(2,8,23,.55);display:grid;place-items:center;padding:1rem;z-index:60}
.modal[hidden]{display:none}
.modal-content{background:var(--card); width:min(720px, 96%); border-radius:1rem; padding:1rem 1rem 1.2rem; box-shadow:var(--shadow); position:relative}
.modal-content.video{padding:0}
.modal-content .close{position:absolute;top:.5rem;right:.5rem}
.video-frame{aspect-ratio:16/9;background:#000;border-radius:1rem;overflow:hidden}
.video-frame iframe{width:100%;height:100%;border:0}

.chat-log{height:220px;overflow:auto;border:1px solid rgba(2,132,199,.15);border-radius:.75rem;padding:.75rem;background:var(--bg)}
.chat-log .bot,.chat-log .user{padding:.5rem .75rem;border-radius:.75rem;margin:.25rem 0;max-width:80%}
.chat-log .bot{background:var(--bg-alt)}
.chat-log .user{background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;margin-left:auto}
.chat-form{display:flex;gap:.5rem;margin-top:.5rem}
.chat-form input{flex:1}

.nav .btn,.actions .btn{box-shadow:none}

@media (prefers-reduced-motion: reduce){
  .btn,.service,.slides{transition:none}
}

/* RTL support */
[dir="rtl"] .nav-list{right:auto;left:1rem}
[dir="rtl"] .slider .prev{left:auto;right:8px;transform:rotate(180deg) translateY(50%)}
[dir="rtl"] .slider .next{right:auto;left:8px;transform:rotate(180deg) translateY(50%)}