/* MyDent.al Landing – Responsive CSS (v2) */
:root{
  --brand:#003459;
  --ink:#0b1320;
  --muted:#475569;
  --bg:#ffffff;
  --card:#ffffff;
  --line:#e5e7eb;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin-inline:auto;padding:0 20px}
/* Header */
header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--brand)}
.brand img{height:36px}
.brand .text{font-size:20px;font-weight:800}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{color:#334155;font-weight:700}
.cta{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid var(--line);font-weight:800}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{opacity:.92}
.btn.ghost:hover{border-color:#cbd5e1}
/* Mobile */
.hamb{display:none;border:1px solid var(--line);border-radius:12px;background:#fff;width:44px;height:44px;align-items:center;justify-content:center}
.mobile{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line)}
.mobile a{display:block;padding:14px 20px;border-top:1px solid #f2f4f7}
@media (max-width: 860px){
  nav ul{display:none}
  .cta{display:none}
  .hamb{display:flex}
}
@media (min-width: 861px){
  /* Force-hide mobile menu on desktop even if toggled earlier */
  .mobile{display:none !important}
}
/* Hero */
.hero{padding:72px 0;background:linear-gradient(180deg,#ffffff,#f8fafc)}
.hero-grid{display:grid;gap:40px;align-items:center}
@media(min-width: 960px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.h1{font-size:clamp(32px,5vw,56px);line-height:1.05;margin:8px 0 12px;font-weight:900}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#e8eef6;color:#0b3e6e;font-weight:900;font-size:12px;letter-spacing:.2px}
.sub{font-size:18px;color:var(--muted);max-width:56ch}
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
/* Phone mock */
.phone{position:relative;width:min(420px,95%);margin-inline:auto;border-radius:42px;background:#111;padding:14px;box-shadow:var(--shadow)}
.phone .screen{border-radius:30px;background:#fff;overflow:hidden}
.tabs{display:flex;background:var(--brand);color:#fff;padding:12px}
.tabs button{flex:1;background:transparent;border:0;color:#cfe7ff;padding:10px 8px;font-weight:800}
.tabs button.active{color:#fff;background:rgba(255,255,255,.12);border-radius:10px}
.list{padding:14px}
.row{display:flex;align-items:center;gap:12px;padding:10px 10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.avatar{width:36px;height:36px;border-radius:50%;background:#e2e8f0}
.row strong{font-size:14px}
.pill{margin-left:auto;background:#e8f3ff;color:#0b3e6e;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}
.xray{display:grid;place-items:center;background:#f1f5f9;border-radius:14px;padding:20px;border:1px dashed #d2dae4;margin-top:10px}
/* Features */
section.features{padding:64px 0;background:#fff}
.features-grid{display:grid;gap:22px}
@media(min-width: 980px){.features-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width: 640px) and (max-width: 979px){.features-grid{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{margin:8px 0 8px}
.icon{width:40px;height:40px;border-radius:10px;background:#e8eef6;display:grid;place-items:center;color:var(--brand);font-weight:900}
.card p{color:var(--muted);margin:0}
/* Demo */
section.demo{padding:64px 0;background:#f8fafc}
.demo-grid{display:grid;gap:28px;align-items:start}
@media(min-width: 960px){.demo-grid{grid-template-columns:1.1fr .9fr}}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table tr{background:#fff;border:1px solid #e5e7eb}
.table td,.table th{padding:12px 14px;text-align:left}
.badge{font-size:12px;background:#e8f3ff;color:#0b3e6e;border-radius:999px;padding:4px 10px;font-weight:900}
/* Testimonials */
section.testi{padding:64px 0}
.testi-grid{display:grid;gap:20px}
@media(min-width: 820px){.testi-grid{grid-template-columns:1fr 1fr}}
.quote{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:var(--shadow);padding:18px}
.who{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.who .ph{width:44px;height:44px;border-radius:50%;background:#e2e8f0}
.stars{letter-spacing:2px;color:#f59e0b;font-weight:900}
/* CTA */
.cta-section{padding:72px 0;background:linear-gradient(180deg,#f8fafc,#fff)}
.cta-box{background:var(--brand);color:#fff;border-radius:24px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:var(--shadow);flex-wrap:wrap}
.cta-box h2{margin:0;font-size:clamp(24px,4vw,40px);line-height:1.1}
.cta-box p{margin:6px 0 0;opacity:.9}
.cta-actions{display:flex;gap:12px}
.btn.inverse{background:#fff;color:var(--brand);border-color:#fff}
footer{padding:48px 0;border-top:1px solid var(--line);color:#6b7280}