@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{--ink:#102b35;--muted:#71838a;--teal:#087f78;--mint:#dff5ed;--line:#dfeae7;--paper:#f5faf8;--white:#fff}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}
.navbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:rgba(255,255,255,.9);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}
.logo{display:flex;align-items:center;gap:10px}.logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--teal);color:#fff;font-size:22px}.logo strong{display:block;font-family:'Space Grotesk';font-size:20px;line-height:1.1}.logo strong span{color:var(--teal)}.logo small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.nav-links{display:flex;gap:32px;color:#60747b;font-size:13px}.nav-links a:hover{color:var(--teal)}
.nav-button,.primary-button,.submit-button,.modal-button{border:0;border-radius:12px;background:var(--teal);color:#fff;font-weight:700;padding:13px 18px;transition:.25s}.nav-button:hover,.primary-button:hover,.submit-button:hover,.modal-button:hover{transform:translateY(-2px);background:#066a64}
.hero{min-height:650px;padding:88px 10%;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;background:radial-gradient(circle at 80% 20%,#d9f5ec 0,transparent 32%),linear-gradient(135deg,#f5faf8,#fff)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--teal);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.pulse{width:8px;height:8px;border-radius:50%;background:#3bbd87;box-shadow:0 0 0 5px #d8f5e7}
.hero h1{font-family:'Space Grotesk';font-size:clamp(42px,5vw,68px);line-height:1.04;letter-spacing:-2.5px;margin:24px 0}.hero h1 em,.section-heading em,.appointment-info em{font-style:normal;color:var(--teal)}
.hero-content>p{max-width:500px;color:var(--muted);font-size:16px}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px}.primary-button{padding:16px 22px}.text-link{font-size:13px;font-weight:700;color:var(--teal)}.trust{display:flex;gap:45px;margin-top:55px}.trust strong{display:block;font-family:'Space Grotesk';font-size:24px}.trust span{color:var(--muted);font-size:11px}
.hero-visual{position:relative;min-height:420px;display:grid;place-items:center}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:280px;height:280px;background:#ccefe4;top:20px;right:30px}.orb-two{width:150px;height:150px;background:#a6ddd1;bottom:25px;left:25px}
.preview-card{position:relative;width:min(390px,100%);padding:28px;border:1px solid rgba(255,255,255,.8);border-radius:25px;background:rgba(255,255,255,.88);box-shadow:0 25px 80px #1b62521c;backdrop-filter:blur(20px)}.preview-top,.queue-panel>div,.queue-foot{display:flex;justify-content:space-between;align-items:center}.mini-brand{font-weight:800;font-size:13px}.online-tag,.queue-live{font-size:10px;color:#15835d;background:#e2f7eb;padding:5px 9px;border-radius:30px}.preview-heading{margin:38px 0 24px;font-family:'Space Grotesk';font-size:22px;line-height:1.25}.preview-heading span{display:block;color:var(--muted);font-size:13px;font-family:'DM Sans';margin-bottom:6px}.queue-panel{padding:20px;border-radius:18px;background:#eff9f5}.muted{font-size:10px;letter-spacing:1px;color:var(--muted);font-weight:800}.queue-number{font-family:'Space Grotesk';font-size:54px;font-weight:700;margin:12px 0;color:var(--ink)}.queue-number small{font:500 11px 'DM Sans';color:var(--muted)}.progress{height:7px;border-radius:20px;background:#d3e8df;overflow:hidden}.progress span{display:block;width:65%;height:100%;background:var(--teal);border-radius:20px}.queue-foot{font-size:11px;color:var(--muted);margin-top:12px}.queue-foot strong{color:var(--ink)}.preview-bottom{display:flex;gap:10px;align-items:center;font-size:12px;margin-top:18px}.check,.info-item>span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e0f5e9;color:#16835c;font-weight:800}
.section{padding:100px 10%}.services{background:#fff}.section-heading{text-align:center;max-width:620px;margin:0 auto 48px}.section-heading h2{font-family:'Space Grotesk';font-size:42px;line-height:1.1;letter-spacing:-1px;margin:15px 0}.section-heading p{color:var(--muted);font-size:14px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card{position:relative;padding:32px;border:1px solid var(--line);border-radius:22px;background:#fff;transition:.25s}.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px #174f4010}.service-card.featured{background:var(--ink);color:#fff}.service-icon{font-size:30px;color:var(--teal);margin-bottom:28px}.featured .service-icon{color:#8ce0c5}.service-card h3{font-family:'Space Grotesk';font-size:20px;margin-bottom:12px}.service-card p{color:var(--muted);font-size:13px}.featured p{color:#b7c9cb}.card-arrow{position:absolute;right:28px;top:30px;color:var(--teal)}
.appointment-section{background:linear-gradient(135deg,#eff8f4,#f8fbfa)}.appointment-container{max-width:1120px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.appointment-info h2{font-family:'Space Grotesk';font-size:43px;line-height:1.1;letter-spacing:-1px;margin:16px 0 22px}.appointment-info>p{color:var(--muted);font-size:14px;margin-bottom:28px}.info-item{display:flex;align-items:center;gap:12px;margin:17px 0}.info-item p{font-size:13px}.appointment-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:35px;box-shadow:0 25px 70px #174f4010}.form-step{color:var(--teal);font-size:10px;font-weight:800;letter-spacing:1px}.form-title h3{font-family:'Space Grotesk';font-size:25px;margin-top:8px}.form-title p,.form-note{color:var(--muted);font-size:12px}.form-title{margin-bottom:27px}.form-group{margin-bottom:18px}.form-group label{display:block;font-size:12px;font-weight:800;margin-bottom:8px}.form-group input,.form-group select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:11px;outline:0;background:#fbfdfc;color:var(--ink);font-size:13px}.form-group input:focus,.form-group select:focus{border-color:var(--teal);box-shadow:0 0 0 4px #087f7812}.submit-button{width:100%;padding:15px;margin-top:4px}.form-note{text-align:center;margin-top:15px}
footer{padding:35px 10%;background:var(--ink);color:#fff;text-align:center}.footer-logo{font-family:'Space Grotesk';font-size:20px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:10px}.footer-logo .logo-mark{width:32px;height:32px;font-size:17px}.footer-logo+.footer-logo{}.footer-note,footer p{display:block;color:#9fb5b8;font-size:11px;margin-top:8px}
.modal{display:none;position:fixed;inset:0;z-index:100;background:#102b358c;backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px}.modal.show{display:flex}.modal-content{position:relative;width:100%;max-width:430px;padding:40px;border-radius:25px;background:#fff;text-align:center;animation:popup .25s ease}.close-button{position:absolute;right:18px;top:12px;border:0;background:transparent;font-size:28px;color:var(--muted)}.success-icon{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 20px;border-radius:50%;background:#e0f5e9;color:#16835c;font-size:32px;font-weight:800}.modal-content h2{font-family:'Space Grotesk';font-size:28px}.modal-content>p{color:var(--muted);font-size:13px;margin:12px 0 25px}.appointment-summary{padding:15px 18px;border-radius:15px;background:#f4f9f6;text-align:left}.appointment-summary div{display:flex;justify-content:space-between;padding:8px 0;font-size:12px}.appointment-summary span{color:var(--muted)}.modal-button{width:100%;margin-top:20px}
@keyframes popup{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:850px){.navbar{padding:0 6%}.nav-links{display:none}.nav-button{padding:10px 12px;font-size:12px}.hero{grid-template-columns:1fr;padding:65px 7%;gap:20px}.hero h1{font-size:48px}.hero-visual{min-height:380px}.section{padding:75px 7%}.service-grid,.appointment-container{grid-template-columns:1fr}.appointment-container{gap:45px}.section-heading h2,.appointment-info h2{font-size:35px}.trust{gap:25px}.appointment-card{padding:25px}}
