:root {
	--ink: #17242d;
	--muted: #71808a;
	--blue: #2d82a8;
	--blue-dark: #1d607e;
	--pale: #eef6f7;
	--line: #dce7e9;
	--white: #ffffff;
	--serif: Georgia, 'Times New Roman', serif;
}

.form-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 64px)); margin: auto; }
.site-header { position: relative; z-index: 5; background: rgba(255,255,255,.94); border-bottom: 1px solid #f0f3f4; }
.nav-wrap, .footer-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 88px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: transparent; background: url('uploads/doctor.png') center / cover no-repeat; border-radius: 50%; font: 700 12px 'Manrope', sans-serif; letter-spacing: -.5px; overflow: hidden; font-size: 0; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font: 700 13px 'Manrope', sans-serif; letter-spacing: -.2px; }
.brand-copy small { color: var(--muted); font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 33px; color: var(--muted); font-size: 12px; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover, .main-nav .active { color: var(--blue); }
.main-nav .nav-cta { display: flex; gap: 12px; align-items: center; padding: 12px 17px; color: var(--white); background: var(--ink); border-radius: 2px; }
.main-nav .nav-cta:hover { background: var(--blue); color: #fff; }
.menu-toggle { display: none; border: 0; background: none; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; min-height: 595px; padding-top: 58px; padding-bottom: 70px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.7px; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: 'Manrope', sans-serif; line-height: 1.12; letter-spacing: -2.3px; }
h1 { max-width: 530px; margin-bottom: 22px; font-size: clamp(42px, 5vw, 67px); font-weight: 800; }
h2 { margin-bottom: 22px; font-size: clamp(35px, 4vw, 51px); font-weight: 800; }
em { color: var(--blue); font-family: var(--serif); font-weight: 400; }
.hero-text { max-width: 405px; margin-bottom: 30px; color: var(--muted); font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; gap: 24px; padding: 14px 20px; border: 1px solid transparent; font-size: 12px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--blue); }
.button-primary:hover { background: var(--blue-dark); }
.text-link { display: inline-flex; gap: 12px; align-items: center; color: var(--ink); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.text-link span { color: var(--blue); font-size: 18px; font-weight: 400; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 58px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.hero-note strong { color: var(--ink); font-size: 11px; }
.status-dot { width: 8px; height: 8px; background: #64bfa6; border-radius: 50%; box-shadow: 0 0 0 5px #eff9f6; }
.hero-visual { position: relative; padding: 0 27px 25px 0; }
.image-frame { position: relative; height: 448px; overflow: hidden; background: #dceced; }
.image-frame:after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,50,60,0) 57%, rgba(15,50,60,.36)); content: ''; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(.78); }
.image-label { position: absolute; z-index: 1; bottom: 26px; left: 26px; display: flex; align-items: center; gap: 12px; color: #fff; }
.label-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; }
.image-label strong, .image-label small { display: block; }.image-label strong { font-size: 12px; }.image-label small { color: rgba(255,255,255,.8); font-size: 10px; }
.experience-badge { position: absolute; z-index: 2; right: -4px; top: 40px; display: flex; align-items: center; gap: 9px; width: 114px; height: 114px; padding: 17px; color: #fff; background: var(--blue); }
.experience-badge strong { font: 800 40px 'Manrope', sans-serif; line-height: 1; }.experience-badge span { font-size: 10px; line-height: 1.25; }.visual-line { position: absolute; right: 0; bottom: 0; width: 70%; height: 1px; background: var(--blue); }
.trust-bar { background: var(--pale); }.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); padding: 27px 0; }.trust-items > div { display: flex; gap: 15px; align-items: center; border-right: 1px solid #d6e6e8; padding-left: 45px; }.trust-items > div:first-child { padding-left: 0; }.trust-items > div:last-child { border: 0; }.trust-icon { color: var(--blue); font-size: 23px; }.trust-items strong, .trust-items small { display: block; }.trust-items strong { font-size: 12px; }.trust-items small { color: var(--muted); font-size: 10px; }
.section { padding-top: 125px; padding-bottom: 125px; }.about { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }.about-content { max-width: 410px; padding-top: 26px; color: var(--muted); font-size: 15px; }.about-content p { margin-bottom: 18px; }.about-content .text-link { margin-top: 22px; }
.services { background: #f8fafb; }.services-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; }.section-description { max-width: 315px; margin-bottom: 24px; color: var(--muted); font-size: 13px; }.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.service-card { position: relative; min-height: 260px; padding: 30px 28px; background: #fff; border: 1px solid #e8eff0; transition: transform .25s ease, box-shadow .25s ease; }.service-card:hover { transform: translateY(-5px); box-shadow: 0 13px 35px rgba(39,84,97,.1); }.service-card.featured { color: #fff; background: var(--blue); border-color: var(--blue); }.card-number { position: absolute; top: 29px; right: 28px; color: #b1c3c8; font-size: 11px; }.featured .card-number { color: #b7d5df; }.service-icon { display: block; margin-bottom: 42px; color: var(--blue); font-size: 29px; }.featured .service-icon { color: #fff; }.service-card h3 { margin-bottom: 11px; font: 700 19px 'Manrope', sans-serif; letter-spacing: -.5px; }.service-card p { max-width: 230px; margin-bottom: 0; color: var(--muted); font-size: 12px; }.featured p { color: #d5ebf0; }.service-card > a { position: absolute; right: 28px; bottom: 27px; display: grid; place-items: center; width: 31px; height: 31px; color: var(--blue); border: 1px solid #dce8ea; font-size: 17px; }.featured > a { color: #fff; border-color: rgba(255,255,255,.45); }
.appointment { padding-top: 0; }.appointment-panel { display: flex; align-items: center; justify-content: space-between; min-height: 275px; padding: 50px 75px; color: #fff; background: var(--ink); }.appointment-panel h2 { margin-bottom: 15px; }.appointment-panel p:not(.eyebrow) { margin-bottom: 0; color: #aab8be; font-size: 13px; }.eyebrow.light { color: #90cbd8; }.appointment-actions { display: grid; gap: 10px; min-width: 205px; }.button-light { color: var(--ink); background: #fff; }.button-light:hover { background: #d9f0f3; }.button-whatsapp { color: #fff; border-color: rgba(255,255,255,.45); }.button-whatsapp:hover { background: #235d50; }
.appointment-form { display: grid; gap: 25px; margin-top: 18px; padding: 38px 75px; border: 1px solid var(--line); background: #fff; }.appointment-form h3 { margin: 0; font: 700 22px 'Manrope', sans-serif; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 25px; }.form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid var(--line); background: #fbfdfd; font: inherit; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 1px solid var(--blue); }.form-grid select:disabled { color: var(--muted); cursor: not-allowed; }.appointment-form .button { justify-self: start; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 20px; }.contact-details { padding-top: 25px; }.contact-item { display: flex; gap: 17px; padding: 18px 0; border-bottom: 1px solid var(--line); }.contact-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--blue); border: 1px solid #d8e8ea; border-radius: 50%; }.contact-item small { color: var(--muted); font-size: 10px; }.contact-item p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; }.contact-item a { color: var(--blue); }
.site-footer { border-top: 1px solid #e7edef; }.footer-wrap { min-height: 105px; }.footer-wrap > p { margin: 0; color: var(--muted); font-size: 10px; }.socials { display: flex; gap: 8px; }.socials a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; }.reveal { animation: rise .8s both; }.delay-one { animation-delay: .12s; }.delay-two { animation-delay: .24s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .container { width: min(100% - 40px, 540px); }.nav-wrap { min-height: 74px; }.menu-toggle { display: grid; gap: 5px; padding: 10px 0 10px 10px; cursor: pointer; }.menu-toggle span { display: block; width: 22px; height: 1px; background: var(--ink); }.main-nav { position: absolute; top: 73px; right: 20px; left: 20px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: #fff; box-shadow: 0 12px 30px rgba(23,36,45,.12); }.main-nav.open { display: flex; }.main-nav a { padding: 12px; }.main-nav .nav-cta { justify-content: space-between; margin-top: 5px; }.hero { display: flex; flex-direction: column; gap: 45px; min-height: 0; padding-top: 65px; padding-bottom: 55px; }.hero-copy { width: 100%; }.hero-visual { width: calc(100% - 10px); align-self: flex-end; }.image-frame { height: 350px; }.experience-badge { top: 25px; right: -3px; transform: scale(.85); transform-origin: right top; }.trust-items { grid-template-columns: 1fr; gap: 18px; padding: 24px 0; }.trust-items > div, .trust-items > div:first-child { padding-left: 0; border-right: 0; }.section { padding-top: 78px; padding-bottom: 78px; }.about, .contact { grid-template-columns: 1fr; gap: 10px; }.about-content, .contact-details { padding-top: 10px; }.services-heading { display: block; margin-bottom: 33px; }.section-description { margin-top: 28px; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 230px; }.appointment-panel { display: block; min-height: 0; padding: 38px 28px; }.appointment-actions { margin-top: 28px; }.appointment-panel .button { width: 100%; justify-content: space-between; }.appointment-form { padding: 30px 28px; }.form-grid { grid-template-columns: 1fr; }.footer-wrap { flex-wrap: wrap; gap: 20px; padding: 25px 0; }.footer-wrap > p { order: 3; width: 100%; }.hero-actions { gap: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { animation: none; } }
