:root { --teal:#286b60; --mint:#e8f3ef; --ink:#183932; --line:rgba(24,57,50,.13); }
body { background:#f8fbf9; color:var(--ink); }
header { height:12vh; min-height:40px; display:flex; align-items:center; gap:2.3vw; padding:0 4.6vw; border-bottom:1px solid var(--line); }
.brand { font:700 clamp(10px,1.7vw,26px) 'Manrope'; letter-spacing:-.06em; }
.brand span { color:#43a58f; }
.demo-nav { margin-left:auto; display:flex; gap:clamp(7px,1.8vw,29px); font-size:clamp(5px,.7vw,11px); }
.header-cta { display:flex; align-items:center; gap:.7vw; color:#547069; font-size:clamp(4.5px,.62vw,10px); white-space:nowrap; }
.phone-dot { width:clamp(4px,.45vw,7px); height:clamp(4px,.45vw,7px); border-radius:50%; background:#6eb9a7; }
.book { padding:clamp(6px,1vw,14px) clamp(9px,1.4vw,21px); background:var(--teal); color:#fff; font-size:clamp(5px,.68vw,11px); white-space:nowrap; }
main { height:88vh; display:grid; grid-template-columns:58% 42%; }
.copy { padding:clamp(15px,5.5vh,55px) 5vw 0; display:flex; flex-direction:column; min-width:0; }
.eyebrow { color:#5a877d; font-size:clamp(4px,.55vw,9px); letter-spacing:.17em; }
.eyebrow span { color:#70b8a6; margin-right:.6vw; }
h1 { margin:clamp(8px,2.3vh,22px) 0 clamp(7px,1.8vh,18px); font:500 clamp(27px,4.9vw,74px)/.98 'Manrope'; letter-spacing:-.065em; }
h1 em { font-family:'Playfair Display',serif; color:#3d8979; }
.copy>p { max-width:73%; margin:0; color:#607a74; font-size:clamp(6px,.85vw,13px); line-height:1.65; }
.actions { display:flex; align-items:center; gap:2vw; margin-top:clamp(9px,2.8vh,27px); }
.demo-button { padding:clamp(7px,1.15vw,16px) clamp(9px,1.6vw,24px); font-size:clamp(5px,.7vw,11px); }
.primary { background:var(--teal); color:#fff; }
.primary span { margin-left:1.3vw; }
.play { display:flex; align-items:center; gap:.7vw; color:#4f6c65; font-size:clamp(5px,.68vw,11px); }
.play i { width:clamp(16px,2.3vw,34px); height:clamp(16px,2.3vw,34px); display:grid; place-items:center; border:1px solid #8eb7ae; border-radius:50%; font-style:normal; font-size:.65em; }
.services { margin-top:auto; height:17vh; min-height:36px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.services span { display:flex; align-items:center; padding-left:1.2vw; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:clamp(4px,.62vw,10px); }
.services span::before { content:'+'; color:#5eaa98; margin-right:.8vw; }
.photo { position:relative; background:linear-gradient(180deg,transparent 60%,rgba(14,56,47,.33)),url('https://images.unsplash.com/photo-1629909613654-28e377c37b09?auto=format&fit=crop&w=1400&q=85') center/cover; }
.photo::before { content:''; position:absolute; inset:4vh 3vw auto auto; width:clamp(38px,7vw,105px); height:clamp(38px,7vw,105px); border:1px solid rgba(255,255,255,.7); border-radius:50%; }
.quality { position:absolute; z-index:5; top:3vh; left:1.5vw; display:flex; align-items:center; gap:1vw; padding:clamp(8px,1.4vw,20px); background:#fff; box-shadow:0 2vw 5vw rgba(28,74,64,.12); }
.quality>b { font:600 clamp(13px,2vw,31px) 'Manrope'; }
.quality>span { color:#d6a957; font-size:clamp(4px,.6vw,9px); letter-spacing:.08em; }
.quality small { display:block; margin-top:.3vh; color:#729087; font-size:.85em; letter-spacing:0; }
.appointment { position:absolute; right:2.5vw; bottom:4vh; width:62%; padding:clamp(10px,2vw,29px); background:rgba(248,252,250,.96); }
.appointment>small { font-size:clamp(3.5px,.48vw,8px); letter-spacing:.15em; color:#67887f; }
.appointment>div { display:flex; align-items:baseline; justify-content:space-between; margin:1.2vh 0; }
.appointment b { font:500 clamp(10px,1.5vw,23px) 'Manrope'; }
.appointment strong { font:600 clamp(14px,2.5vw,37px) 'Manrope'; color:var(--teal); }
.appointment>a { display:flex; justify-content:space-between; padding-top:1.2vh; border-top:1px solid var(--line); font-size:clamp(5px,.65vw,10px); }
.doctor { position:absolute; left:2vw; bottom:3vh; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.25); }
.doctor span,.doctor small { display:block; font-size:clamp(4px,.52vw,8px); }
.doctor b { display:block; margin:.3vh 0; font:500 clamp(8px,1.1vw,17px) 'Manrope'; }

body { background:linear-gradient(135deg,#f8fbf9 60%,#e5f1ed); }
.book,.demo-button.primary { border-radius:999px; }
.copy { background:radial-gradient(circle at 8% 85%,rgba(110,185,167,.11),transparent 24%); }
.care-path { margin-top:2.4vh; padding:1.3vh 1vw; border:1px solid var(--line); border-radius:clamp(6px,1vw,15px); background:rgba(255,255,255,.62); }
.care-path>small { display:block; margin-bottom:1vh; color:#669186; font-size:clamp(3px,.43vw,7px); letter-spacing:.15em; }
.care-path>div { display:flex; align-items:center; gap:.7vw; }
.care-path span { display:flex; align-items:center; gap:.45vw; color:#54746c; font-size:clamp(3.5px,.5vw,8px); white-space:nowrap; }
.care-path b { width:clamp(10px,1.25vw,19px); height:clamp(10px,1.25vw,19px); display:grid; place-items:center; border-radius:50%; background:#d8ebe5; color:#317465; font-size:.8em; }
.care-path i { flex:1; height:1px; background:#bdd9d1; }
.services { gap:.7vw; padding:1.6vh 0; border:0; }
.services span { justify-content:center; padding:0 .5vw; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.55); }
.photo { margin:2vh 1.5vw 2vh 0; border-radius:4vw 0 0 4vw; overflow:hidden; }
.quality,.appointment { border-radius:clamp(6px,1.1vw,17px); }
.tech-badges { position:absolute; z-index:3; right:1.5vw; top:2vh; display:flex; flex-direction:column; align-items:flex-end; gap:.55vh; }
.tech-badges span { padding:.65vh .8vw; border-radius:999px; background:rgba(248,252,250,.9); color:#376c61; font-size:clamp(3px,.43vw,7px); box-shadow:0 .7vw 1.4vw rgba(24,57,50,.08); }
.photo::before { right:1.8vw; top:8vh; }