/* Digital Aesthetic Dentistry — rebuilt to match Phu's original Figma (Digital-Aesthetic-Dentistry-2, Nov 2025) */
:root{
  --bg:#0b0b0c;
  --bg-soft:#0f0e0f;
  --bg-panel:#141416;
  --card:#1b1b1d;
  --card-light:#272626;
  --border:#2c2d31;
  --text:#f5f6f7;
  --text-dim:#b7bcc3;
  --text-mute:#8b9099;
  --blue:#2169e0;
  --blue-2:#0a4fc0;
  --blue-soft:#1751b2;
  --star:#ffc115;
  --radius:16px;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);text-align:center;margin-bottom:14px}
.h2{font-size:clamp(1.9rem,3.6vw,2.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-align:center}
.sub{max-width:560px;margin:16px auto 0;color:var(--text-dim);text-align:center;font-size:.95rem}
.btn{display:inline-block;padding:13px 26px;border-radius:10px;font-weight:600;font-size:.92rem;cursor:pointer;border:0;transition:filter .15s ease, transform .15s ease}
.btn:hover{filter:brightness(1.1)}
.btn-blue{background:linear-gradient(180deg,#2d76ef 0%,#0a4fc0 100%);color:#fff;box-shadow:0 6px 18px rgba(23,81,178,.35)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:#fff}

/* glow accents */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;inset:auto auto -240px -240px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(33,105,224,.38),transparent 65%);pointer-events:none}
.glow-r::after{content:"";position:absolute;top:-200px;right:-220px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(33,105,224,.22),transparent 65%);pointer-events:none}

/* ============ header ============ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:44px;width:auto}
.menu{display:flex;gap:30px;list-style:none;align-items:center}
.menu a{font-size:.92rem;font-weight:500;color:var(--text-dim)}
.menu a:hover,.menu a.active{color:#fff}
.dropdown{position:relative}
.dropdown>a::after{content:"⌄";margin-left:6px;font-size:.75em;display:inline-block;transform:translateY(-1px)}
.dropdown-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;display:none;min-width:230px}
.dropdown:hover .dropdown-panel{display:block}
.dropdown-panel ul{list-style:none;background:#141518;border:1px solid var(--border);border-radius:12px;padding:10px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.dropdown-panel a{display:block;padding:9px 14px;border-radius:8px;font-size:.9rem}
.dropdown-panel a:hover{background:rgba(255,255,255,.06)}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.7rem;cursor:pointer}

/* ============ hero (home) ============ */
.hero-video{position:relative}
.hero-video img{width:100%;height:min(64vh,620px);object-fit:cover;object-position:center 30%}
.hero-video .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.28);backdrop-filter:blur(4px);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hero-video .play::after{content:"";border-style:solid;border-width:14px 0 14px 24px;border-color:transparent transparent transparent #fff;margin-left:6px}
.hero-copy{background:linear-gradient(100deg,#0e1622 0%,#0b0b0c 55%);position:relative;overflow:hidden}
.hero-copy::before{content:"";position:absolute;left:-160px;top:-120px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(33,105,224,.45),transparent 65%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:72px 0;position:relative}
.hero-grid h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.hero-side p{color:var(--text-dim);font-size:.97rem;margin-bottom:18px}
.hero-actions{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}

/* ============ features ============ */
.feature-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.feature-grid h2{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.feature-grid>.fcopy>p{color:var(--text-dim);font-size:.95rem;margin-bottom:30px;max-width:430px}
.f-item{display:flex;gap:18px;margin-bottom:26px}
.f-item .fi{flex:0 0 46px;height:46px;border-radius:10px;background:#1d1e22;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.f-item h3{font-size:1.08rem;font-weight:600;margin-bottom:5px}
.f-item p{color:var(--text-dim);font-size:.92rem}
.feature-grid .fimg img{border-radius:var(--radius);width:100%;object-fit:cover}

/* ============ insurance strip ============ */
.logo-strip{background:#fff;padding:26px 0}
.logo-track{display:flex;align-items:center;justify-content:center;gap:64px;flex-wrap:wrap}
.logo-track img{height:44px;width:auto;object-fit:contain}

/* ============ reviews ============ */
.reviews-grid{margin-top:52px;columns:3;column-gap:24px}
.review-card{break-inside:avoid;background:var(--card-light);border-radius:var(--radius);padding:26px;margin-bottom:24px}
.review-head{display:flex;align-items:flex-start;gap:12px}
.avatar{flex:0 0 42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:#fff}
.review-head .rn{font-weight:600;font-size:.95rem}
.review-head .rt{color:var(--text-mute);font-size:.78rem}
.review-head .g{margin-left:auto}
.review-head .g img{width:22px;height:22px}
.stars{color:var(--star);letter-spacing:3px;font-size:1.05rem;margin:12px 0 10px}
.review-card p{color:var(--text-dim);font-size:.92rem}
.reviews-cta{text-align:center;margin-top:40px}
.btn-review{display:inline-flex;align-items:center;gap:10px;background:#1b1b1d;border:1px solid var(--border);color:#fff;padding:12px 22px;border-radius:10px;font-size:.92rem;font-weight:500}
.btn-review img{width:20px;height:20px}

/* ============ services ============ */
.pills{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:36px 0 48px}
.pill{padding:11px 20px;border-radius:10px;border:1px solid var(--border);background:transparent;color:#fff;font-size:.88rem;font-weight:500;cursor:pointer;transition:all .15s}
.pill:hover{border-color:#5a6270}
.pill.active{background:linear-gradient(180deg,#2d76ef,#0a4fc0);border-color:transparent}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 26px;transition:transform .2s ease,border-color .2s ease}
.svc-card:hover{transform:translateY(-4px);border-color:#3d4td;border-color:#3d3f45}
.svc-card img{width:100%;height:220px;object-fit:cover;border-radius:12px}
.svc-tag{display:inline-block;margin:16px 0 10px;padding:5px 10px;border-radius:7px;background:rgba(255,255,255,.07);font-size:.75rem;color:var(--text-dim)}
.svc-card h3{font-size:1.18rem;font-weight:600;margin-bottom:8px}
.svc-card p{color:var(--text-dim);font-size:.88rem}
.svc-cta{text-align:center;margin-top:44px}

/* ============ doctor ============ */
.doc-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.doc-photo img{border-radius:var(--radius);width:100%}
.doc-photo figcaption{text-align:center;font-weight:600;font-size:1.05rem;margin-top:14px}
.doc-copy h2{font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:700;letter-spacing:-.02em;margin-bottom:18px;line-height:1.2}
.doc-copy>p{color:var(--text-dim);font-size:.95rem;margin-bottom:16px}
.quote{background:linear-gradient(120deg,#101722,#0d0d0f);border:1px solid var(--border);border-radius:var(--radius);padding:30px 34px;margin:26px 0;position:relative}
.quote p{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:1.25rem;line-height:1.55;color:#eef1f5}
.quote::before{content:"\201C";font-family:Georgia,serif;font-size:4rem;line-height:0;position:absolute;top:34px;left:14px;color:rgba(255,255,255,.18)}
.doc-cta{margin-top:22px}

/* ============ team ============ */
.team-head h2{text-align:left}
.team-head p{color:var(--text-dim);margin-top:8px}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px;align-items:start}
.team-card img{width:100%;aspect-ratio:.86;object-fit:cover;object-position:top;border-radius:var(--radius)}
.team-card h3{font-size:1rem;font-weight:600;margin-top:14px}
.team-card span{color:var(--text-mute);font-size:.82rem}
.team-note{background:linear-gradient(135deg,#131a26,#101013);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transform:rotate(3deg)}
.team-note h4{font-size:1.02rem;font-weight:700;margin-bottom:12px}
.team-note p{color:var(--text-dim);font-size:.9rem;margin-bottom:14px}
.team-note a{font-weight:600;font-size:.9rem;border-bottom:1px solid #fff}

/* ============ contact ============ */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.contact-info .eyebrow{text-align:left;margin-bottom:8px}
.contact-info h2{font-size:clamp(2rem,4vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:24px}
.hours{color:var(--text-dim);font-size:.95rem;margin-bottom:26px}
.c-line{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;color:var(--text-dim);font-size:.95rem}
.c-line .ci{flex:0 0 20px;text-align:center}
.ways{margin-top:30px}
.ways h3{font-size:1.15rem;font-weight:700;margin-bottom:16px}
.way{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:.93rem;color:var(--text-dim)}
.way b{color:#fff;font-weight:600}
.check{flex:0 0 18px;height:18px;border-radius:50%;background:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff;margin-top:4px}
.form label{display:block;font-size:.9rem;font-weight:500;margin:0 0 8px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;color:#fff;padding:14px 16px;font-family:inherit;font-size:.93rem;margin-bottom:20px;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue)}
.form textarea{min-height:150px;resize:vertical}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.privacy{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--text-dim);margin-bottom:22px}
.privacy a{text-decoration:underline}
.form .btn{width:100%}

/* ============ offer ============ */
.offer{position:relative;border-radius:var(--radius);overflow:hidden}
.offer>img{width:100%;height:640px;object-fit:cover}
.offer-card{position:absolute;inset:0;margin:auto;width:min(560px,90%);height:fit-content;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:18px;padding:40px 44px;color:#101115;text-align:center}
.offer-card .oc-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;color:#26282e}
.offer-card h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:#101115}
.offer-card>p{font-size:.95rem;color:#3c3f46;margin:14px 0 22px}
.offer-list{list-style:none;text-align:left;margin:0 auto 26px;max-width:400px}
.offer-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.95rem;color:#22242a}
.offer-fine{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-style:italic;font-size:.9rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ============ FAQ ============ */
.faq{max-width:900px;margin:48px auto 0}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:300;color:var(--text-dim)}
.faq details[open] summary::after{content:"×"}
.faq .faq-a{padding:0 26px 22px;color:var(--text-dim);font-size:.93rem}

/* ============ map ============ */
.map iframe{width:100%;height:480px;border:0;display:block;filter:grayscale(1) contrast(1.02)}

/* ============ footer ============ */
.site-footer{background:linear-gradient(180deg,#0b0b0c 0%,#0d1320 70%,#11203c 100%);border-top:1px solid rgba(255,255,255,.05);padding:72px 0 36px;position:relative;overflow:hidden}
.site-footer::after{content:"";position:absolute;left:50%;bottom:-260px;transform:translateX(-50%);width:900px;height:480px;border-radius:50%;background:radial-gradient(ellipse,rgba(23,81,178,.5),transparent 65%);pointer-events:none}
.f-top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.09)}
.f-top .brand img{height:56px}
.badges{display:flex;gap:16px;flex-wrap:wrap}
.badges span{background:#fff;border-radius:10px;padding:8px 12px;display:flex;align-items:center}
.badges img{height:38px;width:auto}
.f-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding:44px 0;position:relative;z-index:1}
.f-col h4{font-size:.98rem;font-weight:700;margin-bottom:16px}
.f-col h4.mt{margin-top:28px}
.f-col ul{list-style:none}
.f-col li{margin-bottom:10px}
.f-col a{color:var(--text-dim);font-size:.88rem}
.f-col a:hover{color:#fff}
.f-col .c-line{font-size:.88rem;margin-bottom:10px}
.f-col p.small{color:var(--text-dim);font-size:.88rem;margin-bottom:14px}
.f-col .hr-b{font-weight:600;color:#fff}
.f-news{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid rgba(255,255,255,.09);padding:34px 0;position:relative;z-index:1}
.f-news h3{font-size:1.35rem;font-weight:700}
.f-news p{color:var(--text-dim);font-size:.88rem;margin-top:6px}
.news-form{display:flex;gap:12px;flex-wrap:wrap}
.news-form input{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;color:#fff;padding:13px 16px;width:300px;outline:none;font-family:inherit}
.news-note{font-size:.75rem;color:var(--text-mute);margin-top:10px;max-width:420px}
.news-note b{color:var(--text-dim)}
.f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.09);padding-top:26px;font-size:.85rem;color:var(--text-dim);position:relative;z-index:1}
.f-bottom .links{display:flex;gap:22px}

/* ============ page hero (inner pages) ============ */
.page-hero{padding:76px 0 20px;text-align:center;position:relative}
.page-hero .h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;max-width:850px;margin:0 auto}
.page-hero .lead{max-width:760px;margin:22px auto 0;color:var(--text-dim);font-size:.96rem}

/* blog empty state */
.blog-empty{max-width:640px;margin:40px auto 0;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:56px 40px}
.blog-empty p{color:var(--text-dim)}

/* ============ responsive ============ */
@media(max-width:1000px){
  .hero-grid,.feature-grid,.doc-grid,.contact-wrap{grid-template-columns:1fr;gap:40px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{columns:2}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .f-cols{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .menu,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:block}
  .menu.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#0d0d0f;flex-direction:column;padding:20px 24px;gap:4px;border-bottom:1px solid var(--border)}
  .menu.open li{width:100%}
  .menu.open a{display:block;padding:12px 0;font-size:1.05rem}
  .dropdown-panel{position:static;transform:none;display:block;padding:0 0 0 16px;min-width:0}
  .dropdown-panel ul{background:none;border:0;box-shadow:none;padding:0}
  .svc-grid{grid-template-columns:1fr}
  .reviews-grid{columns:1}
  .team-grid{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr}
  .section{padding:60px 0}
  .offer>img{height:760px}
  .offer-card{padding:30px 24px}
}