document.documentElement.className+=' js'; /* ===== BLOOM TOKENS ===== */ :root{ --primary:#DB2777;--primary-deep:#BE185D;--on-primary:#FFFFFF; --blue:#2563EB;--green:#10B981;--lime:#A3E635;--yellow:#FACC15;--on-bright:#131A2E; --surface:#FBFBFD;--surface-raised:#FFFFFF;--surface-sunken:#F4F6FB; --ink:#131A2E;--ink-muted:#5B6478;--hairline:#E6E9F2; --success:#10B981;--warning:#F59E0B; --font-display:"Fraunces",Georgia,serif;--font-body:"Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s20:80px;--s24:96px; --r-input:12px;--r-card:22px;--r-xl:32px;--r-pill:999px; --shadow-card:0 1px 2px rgba(19,26,46,.05),0 12px 28px rgba(19,26,46,.08); --shadow-lift:0 4px 8px rgba(19,26,46,.06),0 28px 56px rgba(19,26,46,.16); --ease-out:cubic-bezier(.22,1,.36,1);--dur-fast:130ms;--dur-base:260ms; --container:1180px;--topbar-h:74px; } @media (prefers-color-scheme:dark){ :root{ --primary:#F472B6;--primary-deep:#F9A8D4;--on-primary:#2A0A18; --blue:#60A5FA;--green:#34D399;--lime:#BEF264;--yellow:#FDE047;--on-bright:#0E1220; --surface:#0E1220;--surface-raised:#171C2C;--surface-sunken:#0A0D18; --ink:#EEF1F8;--ink-muted:#9AA3B8;--hairline:#272D3F; --shadow-card:0 1px 2px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.5); --shadow-lift:0 4px 10px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.6); } } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body); font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.018em;text-wrap:balance} p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s6)} .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--primary-deep)} .dots-eyebrow{display:inline-flex;gap:5px;margin-bottom:14px} .dots-eyebrow i{width:8px;height:8px;border-radius:50%} .de-1{background:var(--primary)}.de-2{background:var(--blue)}.de-3{background:var(--lime)} /* ===== BUTTONS ===== */ .btn{font-family:var(--font-body);font-weight:600;font-size:15.5px;cursor:pointer;border:1.5px solid transparent; display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:var(--r-input); transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base)} .btn:active{transform:scale(.97)} .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .btn svg{width:19px;height:19px;flex:none} .btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 32%,transparent)} .btn-primary:hover{background:var(--primary-deep)} .btn-wa{background:#25D366;color:#0B2E17;box-shadow:0 8px 22px rgba(37,211,102,.32)} .btn-wa:hover{filter:brightness(.96)} .btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-secondary:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)} .btn-ghost{background:var(--surface-raised);color:var(--ink);border-color:var(--hairline)} .btn-ghost:hover{border-color:var(--primary)} /* ===== TOP BAR ===== */ .topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center; background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color var(--dur-base)} .topbar.solid{border-bottom-color:var(--hairline);background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .topbar .wrap{display:flex;align-items:center;gap:var(--s4);width:100%} .logo{display:flex;align-items:center;gap:13px} .logo svg{width:44px;height:44px} .logo .wm{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--primary);line-height:1.05;white-space:nowrap} .logo .wm small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-top:3px} nav.main{display:flex;gap:32px;margin-left:var(--s12)} nav.main a{font-size:15.5px;font-weight:600;color:var(--ink);transition:color var(--dur-base)} nav.main a:hover{color:var(--primary)} .topbar .sp{flex:1} .top-cta{display:flex;gap:10px;align-items:center} .lang{font-size:13px;font-weight:600;color:var(--ink-muted);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 12px} .hamb{display:none;background:none;border:1px solid var(--hairline);border-radius:10px;width:46px;height:46px;cursor:pointer;color:var(--ink)} @media (max-width:960px){nav.main,.top-cta .btn,.lang{display:none}.hamb{display:inline-flex;align-items:center;justify-content:center}} @media (max-width:560px){.logo .wm small{display:none}.logo .wm{font-size:18px}.logo svg{width:40px;height:40px}.logo{gap:10px}.topbar .wrap{padding:0 16px}} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s} .skip:focus{top:12px} .mobile-menu{display:none;position:fixed;inset:var(--topbar-h) 0 auto 0;z-index:55;background:var(--surface-raised); border-bottom:1px solid var(--hairline);padding:var(--s4) var(--s6) var(--s6);box-shadow:var(--shadow-card)} .mobile-menu.open{display:block} .mobile-menu a{display:block;padding:13px 0;font-weight:600;border-bottom:1px solid var(--hairline)} /* ===== decorative dots ===== */ .dot{position:absolute;border-radius:50%;z-index:0;pointer-events:none} /* ===== HERO ===== */ .hero{position:relative;overflow:hidden;padding:var(--s20) 0 var(--s24)} .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 55% at 90% 4%,color-mix(in srgb,var(--primary) 20%,transparent),transparent 60%), radial-gradient(40% 50% at 2% 96%,color-mix(in srgb,var(--blue) 14%,transparent),transparent 58%), radial-gradient(30% 36% at 68% 102%,color-mix(in srgb,var(--lime) 16%,transparent),transparent 60%); animation:breathe 9s ease-in-out infinite alternate} @keyframes breathe{from{opacity:.72}to{opacity:1}} @media (prefers-reduced-motion:reduce){.hero-bg{animation:none;opacity:1}} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s16);align-items:center} .chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--primary); background:color-mix(in srgb,var(--primary) 12%,var(--surface-raised));border:1px solid color-mix(in srgb,var(--primary) 22%,transparent); padding:8px 15px;border-radius:var(--r-pill);margin-bottom:var(--s6)} .chip .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green)} .chip .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:pulse 2.4s ease-out infinite} @keyframes pulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(3);opacity:0}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.chip .pulse::after{animation:none;opacity:0}} h1.hero-h{font-size:clamp(2.5rem,5.6vw,4.1rem);letter-spacing:-.03em} h1.hero-h .kicker{display:block;font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:14px} h1.hero-h em{font-style:italic;font-weight:600;color:var(--primary);position:relative;white-space:nowrap} .underline{display:block;height:16px;width:min(360px,80%);margin-top:-6px} .underline path{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round; stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .35s var(--ease-out) forwards} @keyframes draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){.underline path{animation:none;stroke-dashoffset:0}} .hero .sub{font-size:clamp(1.08rem,1.9vw,1.28rem);color:var(--ink-muted);max-width:46ch;margin:var(--s6) 0 var(--s8)} .hero .cta{display:flex;flex-wrap:wrap;gap:var(--s3)} .hero .assure{margin-top:var(--s6);font-size:14px;color:var(--ink-muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap} .hero .assure svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.2} /* blob portrait */ .portrait{position:relative;justify-self:center;width:100%;max-width:420px} .portrait .blob-bg{position:absolute;inset:-5%;z-index:0; background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 34%,#fff),color-mix(in srgb,var(--blue) 26%,#fff));opacity:.7; border-radius:46% 54% 60% 40% / 50% 42% 58% 50%;animation:spin 50s linear infinite} @media (prefers-color-scheme:dark){.portrait .blob-bg{background:linear-gradient(150deg,var(--primary),color-mix(in srgb,var(--blue) 55%,var(--primary)));opacity:.22}} @keyframes morph{from{border-radius:46% 54% 60% 40% / 50% 42% 58% 50%}to{border-radius:58% 42% 44% 56% / 44% 56% 44% 56%}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.portrait .blob-bg,.portrait .frame,.portrait .pill{animation:none;transform:none}} .portrait .frame{position:relative;z-index:1;aspect-ratio:4/5; border-radius:52% 48% 48% 52% / 46% 46% 54% 54%;overflow:hidden; background:linear-gradient(150deg,color-mix(in srgb,var(--primary) 26%,var(--surface-raised)),color-mix(in srgb,var(--blue) 22%,var(--surface-raised))); border:3px solid var(--surface-raised);box-shadow:var(--shadow-lift);display:flex;align-items:flex-end;justify-content:center} .portrait .ph{font-size:12.5px;color:var(--ink-muted);background:var(--surface-raised);border:1px dashed var(--hairline); border-radius:10px;padding:8px 12px;margin-bottom:var(--s12);text-align:center} .portrait .pill{position:absolute;z-index:2;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:16px; box-shadow:var(--shadow-card);padding:11px 15px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:9px; animation:floatY 5.5s ease-in-out infinite alternate} .portrait .pill b{font-family:var(--font-display);font-size:1.35rem;line-height:1} .portrait .pill .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none} .portrait .p1{top:6%;left:-7%;animation-delay:-.6s} .portrait .p1 .ic{background:color-mix(in srgb,var(--primary) 16%,var(--surface-raised));color:var(--primary)} .portrait .p1 b{color:var(--primary)} .portrait .p2{bottom:16%;right:-8%;animation-delay:-2.6s} .portrait .p2 .ic{background:color-mix(in srgb,var(--blue) 16%,var(--surface-raised));color:var(--blue)} .portrait .p2 b{color:var(--blue)} .portrait .p3{bottom:-3%;left:6%;animation-delay:-1.4s} .portrait .p3 .stars{color:var(--yellow);letter-spacing:1px;font-size:13px} @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;gap:var(--s12)} .portrait{max-width:330px} } /* curve divider */ .divider{display:block;width:100%;height:64px;margin-top:-1px} .divider path{fill:var(--surface-sunken)} /* ===== TRUST STRIP ===== */ .trust{background:var(--surface-sunken)} .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);padding:var(--s12) var(--s6)} .stat{text-align:center;position:relative} .stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1} .stat .u{display:block;width:34px;height:4px;border-radius:3px;margin:8px auto 10px} .stat span{font-size:13.5px;color:var(--ink-muted)} .stat:nth-child(1) b{color:var(--primary)}.stat:nth-child(1) .u{background:var(--primary)} .stat:nth-child(2) b{color:var(--blue)}.stat:nth-child(2) .u{background:var(--blue)} .stat:nth-child(3) b{color:var(--green)}.stat:nth-child(3) .u{background:var(--green)} .stat:nth-child(4) b{color:var(--on-bright)}.stat:nth-child(4) .u{background:var(--yellow)} @media (max-width:640px){.trust .wrap{grid-template-columns:1fr 1fr;gap:var(--s8) var(--s6)}} /* ===== SECTIONS ===== */ section.blk{padding:var(--s24) 0;position:relative} .head{text-align:center;max-width:60ch;margin:0 auto var(--s12)} .head h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:6px 0} .head h2 em{font-style:italic;color:var(--primary)} .head p{color:var(--ink-muted);margin-top:var(--s3);font-size:1.05rem} /* condition grid */ .cond{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} @media (max-width:840px){.cond{grid-template-columns:1fr 1fr}} @media (max-width:520px){.cond{grid-template-columns:1fr}} .cc{display:block;border-radius:var(--r-card);padding:26px 24px;border:1px solid var(--hairline);background:var(--surface-raised); transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base),border-color var(--dur-base);position:relative;overflow:hidden} .cc::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)} .cc:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)} .cc:hover::before{transform:scaleX(1)} .cc:active{transform:scale(.99)} .cc .ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .cc .ic svg{width:27px;height:27px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cc h3{font-family:var(--font-body);font-weight:700;font-size:1.14rem;margin-bottom:5px} .cc p{font-size:14px;color:var(--ink-muted)} .cc .go{margin-top:14px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px} .c-pink::before{background:var(--primary)}.c-pink .ic{background:color-mix(in srgb,var(--primary) 13%,var(--surface-raised))}.c-pink .ic svg{stroke:var(--primary)}.c-pink .go{color:var(--primary)} .c-blue::before{background:var(--blue)}.c-blue .ic{background:color-mix(in srgb,var(--blue) 13%,var(--surface-raised))}.c-blue .ic svg{stroke:var(--blue)}.c-blue .go{color:var(--blue)} .c-green::before{background:var(--green)}.c-green .ic{background:color-mix(in srgb,var(--green) 15%,var(--surface-raised))}.c-green .ic svg{stroke:var(--green)}.c-green .go{color:var(--green)} .c-lime::before{background:var(--lime)}.c-lime .ic{background:color-mix(in srgb,var(--lime) 30%,var(--surface-raised))}.c-lime .ic svg{stroke:var(--on-bright)}.c-lime .go{color:var(--on-bright)} .c-yellow::before{background:var(--yellow)}.c-yellow .ic{background:color-mix(in srgb,var(--yellow) 34%,var(--surface-raised))}.c-yellow .ic svg{stroke:var(--on-bright)}.c-yellow .go{color:var(--on-bright)} .chooser{margin-top:var(--s6);background:linear-gradient(120deg,color-mix(in srgb,var(--blue) 12%,var(--surface-raised)),color-mix(in srgb,var(--primary) 11%,var(--surface-raised))); border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap} .chooser p{font-weight:700;font-size:1.05rem}.chooser span{color:var(--ink-muted);font-weight:400;font-size:14.5px;display:block} /* how it works */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);counter-reset:step} @media (max-width:760px){.steps{grid-template-columns:1fr}} .step{position:relative;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:30px 26px} .step .n{counter-increment:step;font-family:var(--font-display);font-weight:600;font-size:2.2rem;color:var(--primary);line-height:1} .step .n::before{content:"0" counter(step)} .step h3{font-family:var(--font-body);font-weight:700;font-size:1.12rem;margin:12px 0 6px} .step p{font-size:14.5px;color:var(--ink-muted)} /* services */ .svcwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} @media (max-width:820px){.svcwrap{grid-template-columns:1fr 1fr}} @media (max-width:520px){.svcwrap{grid-template-columns:1fr}} a.svc{text-decoration:none;color:inherit;display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}a.svc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 40%,var(--hairline));box-shadow:0 10px 30px rgba(19,26,46,.08)}a.svc:focus-visible{outline:2px solid var(--primary);outline-offset:3px}@media(hover:none){a.svc:hover{transform:none}}.svc{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px} .svc .t{font-weight:700;font-size:1.06rem;margin-bottom:5px} .svc .d{font-size:14px;color:var(--ink-muted)} .svc .tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:12px} /* doctor */ .doc{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--s16);align-items:center} @media (max-width:860px){.doc{grid-template-columns:1fr;gap:var(--s12)}} .doc .picwrap{position:relative;justify-self:center;width:100%;max-width:380px} .doc .blob-bg{position:absolute;inset:-7%;background:linear-gradient(140deg,var(--primary),var(--blue));opacity:.20; border-radius:48% 52% 58% 42% / 52% 48% 55% 45%} .doc .pic{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:42% 58% 60% 40% / 55% 45% 55% 45%;border:3px solid var(--surface-raised);box-shadow:var(--shadow-lift); background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 20%,var(--surface-raised)),color-mix(in srgb,var(--primary) 20%,var(--surface-raised))); display:flex;align-items:flex-end;justify-content:center} .doc .pic .ph{font-size:12.5px;color:var(--ink-muted);background:var(--surface-raised);border:1px dashed var(--hairline);border-radius:10px;padding:8px 12px;margin-bottom:var(--s12)} .doc h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:8px} .doc .role{color:var(--primary);font-weight:700;margin-bottom:var(--s4)} .doc ul{list-style:none;padding:0;margin:var(--s6) 0;display:grid;gap:12px} .doc ul li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-muted)} .doc ul li svg{width:19px;height:19px;flex:none;stroke:var(--green);fill:none;stroke-width:2.2;margin-top:3px} .mems{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)} .mem{font-size:12px;font-weight:600;color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,transparent);padding:6px 12px;border-radius:var(--r-pill)} /* why trust */ .why{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)} @media (max-width:720px){.why{grid-template-columns:1fr}} .why .w{display:flex;gap:var(--s4);background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px} .why .w .ic{width:48px;height:48px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center} .why .w .ic svg{width:24px;height:24px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .why .w:nth-child(1) .ic{background:color-mix(in srgb,var(--primary) 13%,var(--surface-raised))}.why .w:nth-child(1) .ic svg{stroke:var(--primary)} .why .w:nth-child(2) .ic{background:color-mix(in srgb,var(--blue) 13%,var(--surface-raised))}.why .w:nth-child(2) .ic svg{stroke:var(--blue)} .why .w:nth-child(3) .ic{background:color-mix(in srgb,var(--green) 15%,var(--surface-raised))}.why .w:nth-child(3) .ic svg{stroke:var(--green)} .why .w:nth-child(4) .ic{background:color-mix(in srgb,var(--yellow) 30%,var(--surface-raised))}.why .w:nth-child(4) .ic svg{stroke:var(--on-bright)} .why .w h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin-bottom:5px} .why .w p{font-size:14px;color:var(--ink-muted)} /* testimonials */ .tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} @media (max-width:820px){.tsts{grid-template-columns:1fr}} .tst{border-radius:var(--r-card);padding:28px 26px;border:1px solid var(--hairline)} .tst:nth-child(1){background:color-mix(in srgb,var(--primary) 8%,var(--surface-raised))} .tst:nth-child(2){background:color-mix(in srgb,var(--blue) 8%,var(--surface-raised))} .tst:nth-child(3){background:color-mix(in srgb,var(--green) 9%,var(--surface-raised))} .tst .stars{color:var(--yellow);letter-spacing:2px;margin-bottom:12px;font-size:15px} .tst p{font-size:14.5px;margin-bottom:var(--s4)} .tst .by{font-size:13px;color:var(--ink-muted);font-weight:600} .ph-note{margin-top:var(--s6);font-size:12.5px;color:var(--ink-muted);text-align:center;font-style:italic} /* FAQ */ .faq{max-width:820px;margin:0 auto;display:grid;gap:12px} .reasons{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:940px;margin:0 auto} @media(max-width:720px){.reasons{grid-template-columns:1fr}} .reason{display:flex;gap:16px;align-items:flex-start;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 24px;box-shadow:var(--shadow-card);transition:border-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .reason:hover{border-color:var(--primary);transform:translateY(-2px)} .reason .num{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--primary);line-height:1;flex:none;min-width:40px} .reason h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin-bottom:5px} .reason p{font-size:14px;color:var(--ink-muted)} .faq details{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:16px;padding:4px 22px} .faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.02rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.5rem;color:var(--primary);font-weight:400;transition:transform var(--dur-base)} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 0 20px;color:var(--ink-muted);font-size:14.5px} /* location */ .loc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:stretch} @media (max-width:820px){.loc{grid-template-columns:1fr}} .loc .card{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:34px} .loc .row{display:flex;gap:13px;margin-bottom:var(--s6)} .loc .row svg{width:21px;height:21px;flex:none;stroke:var(--primary);fill:none;stroke-width:1.9;margin-top:3px} .loc .row b{display:block;margin-bottom:2px} .loc .row span{color:var(--ink-muted);font-size:14.5px} .loc .map{border-radius:var(--r-card);border:1px solid var(--hairline);overflow:hidden;min-height:320px;background:var(--surface-sunken)} .loc .map iframe{display:block;width:100%;height:100%;min-height:320px;border:0} /* CTA band */ .band{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border-radius:var(--r-xl);padding:var(--s20) var(--s8);text-align:center} .band .d1{width:180px;height:180px;background:rgba(190,242,100,.75);top:-50px;left:-40px;mix-blend-mode:screen} .band .d2{width:130px;height:130px;background:rgba(253,224,71,.75);bottom:-40px;right:-20px;mix-blend-mode:screen} .band h2{color:#fff;font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:var(--s4);position:relative;z-index:1} .band p{opacity:.95;max-width:48ch;margin:0 auto var(--s8);position:relative;z-index:1;font-size:1.08rem} .band .cta{position:relative;z-index:1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .band .btn-wa{background:#fff;color:var(--primary-deep)} .band .btn-outline{background:transparent;color:#fff;border-color:color-mix(in srgb,#fff 60%,transparent)} .band .btn-outline:hover{background:rgba(255,255,255,.12)} /* footer */ footer{background:var(--surface-sunken);border-top:1px solid var(--hairline);padding:var(--s20) 0 var(--s24)} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s8)} @media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.fgrid{grid-template-columns:1fr}} footer h4{font-family:var(--font-body);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:var(--s4)} footer a{display:block;font-size:14px;color:var(--ink-muted);padding:5px 0} footer a:hover{color:var(--primary)} .fbrand .wm{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--primary)} .fbrand p{font-size:14px;color:var(--ink-muted);margin-top:10px;max-width:34ch} .fdisc{border-top:1px solid var(--hairline);margin-top:var(--s12);padding-top:var(--s6);font-size:12px;color:var(--ink-muted);opacity:.85;max-width:75ch} .fbase{padding-top:var(--s6);font-size:12.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between} /* sticky mobile action bar */ .mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 12px; background:color-mix(in srgb,var(--surface) 98%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-top:1px solid var(--hairline)} .mbar .btn{flex:1;height:50px} @media (max-width:960px){.mbar{display:flex}body{padding-bottom:74px}} /* gentle load-in for hero only (never hides content elsewhere) */ @media (prefers-reduced-motion:no-preference){ html.js .hero .wrap>div>*{animation:rise .6s var(--ease-out) both} html.js .hero .wrap>div>*:nth-child(2){animation-delay:.06s} html.js .hero .wrap>div>*:nth-child(3){animation-delay:.12s} html.js .hero .wrap>div>*:nth-child(4){animation-delay:.18s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} } .docimg{width:100%;height:100%;object-fit:cover;object-position:50% 18%} /* --- richer visuals --- */ .tst .by{display:flex;align-items:center;gap:11px} .tst .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-card)} .tst .av svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tsts .tst:nth-child(1) .av{background:var(--primary)} .tsts .tst:nth-child(2) .av{background:var(--blue)} .tsts .tst:nth-child(3) .av{background:var(--green)} .c-pink{background:color-mix(in srgb,var(--primary) 6%,var(--surface-raised))} .c-blue{background:color-mix(in srgb,var(--blue) 6%,var(--surface-raised))} .c-green{background:color-mix(in srgb,var(--green) 7%,var(--surface-raised))} .c-lime{background:color-mix(in srgb,var(--lime) 15%,var(--surface-raised))} .c-yellow{background:color-mix(in srgb,var(--yellow) 16%,var(--surface-raised))} .doc .picwrap .pic-2{position:absolute;z-index:3;width:46%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%; border-radius:26% 74% 62% 38% / 58% 42% 58% 42%;border:5px solid var(--surface-raised);box-shadow:var(--shadow-lift); bottom:-7%;right:-7%} @media (max-width:520px){.doc .picwrap .pic-2{width:42%}} html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation:none!important;transition-duration:.001ms!important} .hero.paused .blob-bg,.hero.paused .pill{animation-play-state:paused} /* ===== SIGNATURE TRIAGE ===== */ .triage{background:var(--surface-sunken)} .tri{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start} @media (max-width:860px){.tri{grid-template-columns:1fr;gap:var(--s6)}} .tri-chips{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start} .chip-w{font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer;padding:13px 18px 13px 16px;border-radius:var(--r-pill); background:var(--surface-raised);border:1.5px solid var(--hairline);color:var(--ink); transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-base),background var(--dur-base),color var(--dur-base)} .chip-w::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px;vertical-align:1px;background:var(--dotc,var(--primary))} .chip-w.c1{--dotc:var(--primary)}.chip-w.c2{--dotc:var(--blue)}.chip-w.c3{--dotc:var(--green)}.chip-w.c4{--dotc:var(--yellow)}.chip-w.c5{--dotc:var(--lime)} .chip-w:hover{border-color:var(--primary);transform:translateY(-2px)} .chip-w:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .chip-w[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)} .chip-w[aria-pressed="true"]::before{background:#fff} .tri-panel{position:sticky;top:calc(var(--topbar-h) + 18px)} @media (max-width:860px){.tri-panel{position:static}} .tri-card{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:var(--shadow-lift);padding:34px} .tri-tag{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--primary-deep)} .tri-worry{font-family:var(--font-display);font-weight:600;font-size:1.7rem;line-height:1.1;margin:12px 0 2px;color:var(--ink);position:relative;display:inline-block;max-width:100%} .tri-uline{display:block;height:12px;width:82%;margin-top:-1px} .tri-uline path{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:draw .7s var(--ease-out) forwards} .tri-reassure{font-size:1.1rem;color:var(--ink);margin:16px 0} .tri-help{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:11px} .tri-help li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-muted)} .tri-help li::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;background:color-mix(in srgb,var(--green) 18%,transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center} .tri-cta{display:flex;flex-wrap:wrap;gap:12px} .tri-enter{animation:triIn .42s var(--ease-out) both} @keyframes triIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.tri-uline path{animation:none;stroke-dashoffset:0}.tri-enter{animation:none}} .tri-all{margin-top:var(--s12);text-align:center;font-size:14px;color:var(--ink-muted);line-height:2} .tri-all a{color:var(--primary-deep);font-weight:600;text-decoration:none} .tri-all a:hover{text-decoration:underline} /* ===== recurring motif: hand-drawn underline under every section accent word ===== */ .head h2 em{position:relative} .head h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:5px;border-radius:3px;background:currentColor;opacity:.85;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)} .head.seen h2 em::after{transform:scaleX(1)} /* ===== hero worry-cycler (ownable signature moment) ===== */ h1.hero-h{display:flex;flex-direction:column} h1.hero-h .pre{color:var(--ink)} h1.hero-h .cyc{color:var(--primary);font-style:italic;display:inline-flex;align-items:baseline;min-height:1.05em} h1.hero-h .cyc-punc{color:var(--ink);font-style:normal} h1.hero-h .cyc-word{display:inline-block;will-change:transform,opacity} h1.hero-h .cyc-word.swap{animation:cycIn .55s var(--ease-out)} @keyframes cycIn{from{opacity:0;transform:translateY(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}} .cyc-hint{display:block;font-family:var(--font-body);font-style:normal;font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--primary-deep);margin-top:12px;opacity:.9} .hero-uline{display:block;height:16px;width:min(360px,86%);margin-top:2px} .hero-uline path{fill:none;stroke:var(--primary);stroke-width:6;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1s .3s var(--ease-out) forwards} @media (prefers-reduced-motion:reduce){h1.hero-h .cyc-word.swap{animation:none}.hero-uline path{animation:none;stroke-dashoffset:0}} /* ===== conditions wall ===== */ .conds{background:var(--surface)} .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8) var(--s12)} @media (max-width:760px){.cgrid{grid-template-columns:1fr;gap:var(--s6)}} .cgroup .glabel{display:flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px} .cgroup .glabel .gd{width:12px;height:12px;border-radius:50%} .ctags{display:flex;flex-wrap:wrap;gap:10px} .ctag{display:inline-block;padding:9px 15px;border-radius:var(--r-pill);font-size:14.5px;font-weight:600;line-height:1.2;text-decoration:none; border:1.5px solid var(--hairline);background:var(--surface-raised);color:var(--ink);transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-base),background var(--dur-base),box-shadow var(--dur-base)} a.ctag:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)} .g-pink .glabel{color:var(--primary-deep)}.g-pink .glabel .gd{background:var(--primary)} .g-pink .ctag{background:color-mix(in srgb,var(--primary) 7%,var(--surface-raised));border-color:color-mix(in srgb,var(--primary) 20%,transparent)} .g-pink a.ctag:hover{border-color:var(--primary)} .g-green .glabel{color:var(--green)}.g-green .glabel .gd{background:var(--green)} .g-green .ctag{background:color-mix(in srgb,var(--green) 9%,var(--surface-raised));border-color:color-mix(in srgb,var(--green) 24%,transparent)} .g-green a.ctag:hover{border-color:var(--green)} .g-yellow .glabel{color:var(--on-bright)}.g-yellow .glabel .gd{background:var(--yellow)} .g-yellow .ctag{background:color-mix(in srgb,var(--yellow) 16%,var(--surface-raised));border-color:color-mix(in srgb,var(--yellow) 40%,transparent)} .g-yellow a.ctag:hover{border-color:var(--yellow)} .g-blue .glabel{color:var(--blue)}.g-blue .glabel .gd{background:var(--blue)} .g-blue .ctag{background:color-mix(in srgb,var(--blue) 8%,var(--surface-raised));border-color:color-mix(in srgb,var(--blue) 22%,transparent)} .g-blue a.ctag:hover{border-color:var(--blue)} .g-lime .glabel{color:var(--on-bright)}.g-lime .glabel .gd{background:var(--lime)} .g-lime .ctag{background:color-mix(in srgb,var(--lime) 20%,var(--surface-raised));border-color:color-mix(in srgb,var(--lime) 45%,transparent)} .g-lime a.ctag:hover{border-color:color-mix(in srgb,var(--lime) 80%,var(--ink))} .conds-ask{text-align:center;margin-top:var(--s12);font-size:15px;color:var(--ink-muted)} .conds-ask a{color:var(--primary-deep);font-weight:700;text-decoration:none} .conds-ask a:hover{text-decoration:underline} /* illustrated review avatars + trust strip */ .tst .av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card)} .tst .av svg{width:19px;height:19px} .tsts .tst:nth-child(1) .av{background:var(--primary)}.tsts .tst:nth-child(2) .av{background:var(--blue)}.tsts .tst:nth-child(3) .av{background:var(--green)} .trustband{background:var(--surface-sunken);border-bottom:1px solid var(--hairline);padding:20px 0} .tb-in{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;text-align:center} .tb-avatars{display:flex} .tb-avatars .mono{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:600;font-size:17px;color:#fff;border:3px solid var(--surface-raised);margin-left:-12px;box-shadow:var(--shadow-card)} .tb-avatars .mono:first-child{margin-left:0} .mono.m1{background:var(--primary)}.mono.m2{background:var(--blue)}.mono.m3{background:var(--green)}.mono.m4{background:#D98A1E}.mono.m5{background:#6E9A1C}.mono.m6{background:var(--primary-deep)} .tb-text{font-size:15.5px;color:var(--ink-muted)} .tb-stars{color:#F5A623;letter-spacing:1px;font-size:16px;vertical-align:-1px} .tb-text strong{color:var(--ink);font-weight:700;margin:0 4px} .tb-sub{color:var(--ink-muted)} @media (max-width:520px){.tb-avatars .mono:nth-child(n+5){display:none}} .tst .by a{display:inline-flex;align-items:center;gap:8px;color:var(--primary-deep);font-weight:600;font-size:13px;text-decoration:none} .tst .by a:hover{text-decoration:underline} .rv-stars{color:#F5A623;letter-spacing:1px} .tb-in .grating,.trustband a{color:inherit} /* real Google reviews wall */ .revwall{column-count:3;column-gap:18px} @media (max-width:900px){.revwall{column-count:2}} @media (max-width:600px){.revwall{column-count:1}} .rev{break-inside:avoid;display:block;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px;margin:0 0 18px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)} .rev:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .rev-top{display:flex;align-items:center;gap:12px;margin-bottom:13px} .rev-av{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px} .rev-id b{display:block;font-weight:700;font-size:15px;color:var(--ink)} .rev-id > span{font-size:12.5px;color:var(--ink-muted)} .rev-id .rs{color:#F5A623;letter-spacing:1px} .rev p{font-size:14.5px;line-height:1.55;color:var(--ink);margin:0 0 12px} .rev-more{font-size:12.5px;font-weight:700;color:var(--primary-deep)} .rev-av.mA{background:var(--primary)}.rev-av.mB{background:var(--blue)}.rev-av.mC{background:var(--green)}.rev-av.mD{background:#D98A1E}.rev-av.mE{background:#6E9A1C} /* ===== Mega-menu (desktop) ===== */ nav.main{align-items:center} .navitem{position:relative;display:flex;align-items:center} .navlink{display:inline-flex;align-items:center;gap:5px;font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;padding:6px 2px;background:none;border:0} .navlink:hover{color:var(--primary)} .navlink .chev{opacity:.65;transition:transform .2s} .navitem:hover .navlink .chev,.navitem:focus-within .navlink .chev{transform:rotate(180deg);opacity:1} .navitem::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px} /* hover bridge */ .mega{position:absolute;top:calc(100% + 12px);left:0; background:var(--surface-raised);border:1px solid var(--hairline);border-radius:16px; box-shadow:0 20px 54px -14px rgba(24,10,20,.30);padding:20px 22px; max-width:min(880px,calc(100vw - 32px)); opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;z-index:80} .navitem:hover .mega,.navitem:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)} .mega-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(150px,1fr));gap:6px 22px} .mega-col{display:flex;flex-direction:column} .mega-h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);margin:2px 0 6px} .mega-col a{display:block;padding:6px 8px;margin:0 -8px;font-size:14px;font-weight:500;color:var(--ink);border-radius:8px;border-bottom:0} .mega-col a:hover{background:var(--surface-sunken);color:var(--primary)} .mega-all{display:inline-block;margin-top:14px;font-weight:700;color:var(--primary-deep);font-size:14px} .mega-all:hover{text-decoration:underline} .mega.drop{min-width:330px;max-width:360px} .drop-list{display:flex;flex-direction:column;gap:2px} .drop-list a{display:block;padding:10px 12px;margin:0 -6px;border-radius:10px;border-bottom:0} .drop-list a b{display:block;font-size:14.5px;color:var(--ink);font-weight:700} .drop-list a span{display:block;font-size:12.5px;color:var(--ink-muted);margin-top:1px} .drop-list a:hover{background:var(--surface-sunken)} .drop-list a:hover b{color:var(--primary)} /* ===== Mobile accordion menu ===== */ .mm-group{border-bottom:1px solid var(--hairline)} .mm-group>summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-weight:700;font-size:16px;cursor:pointer;list-style:none;color:var(--ink)} .mm-group>summary::-webkit-details-marker{display:none} .mm-group>summary .chev{opacity:.7;transition:transform .2s} .mm-group[open]>summary .chev{transform:rotate(180deg)} .mm-sub{padding:0 0 10px} .mm-sub .mm-h{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-deep);margin:10px 0 2px;border-bottom:0;padding:0} .mm-sub a{padding:9px 0 9px 12px;font-weight:500;font-size:15px;border-bottom:0} .mobile-menu .mm-top{font-weight:700;font-size:16px} .mm-book{display:flex!important;align-items:center;justify-content:center;gap:8px;margin-top:16px;border-bottom:0!important;color:#fff} .mm-book svg{width:20px;height:20px} /* ===== Floating WhatsApp button ===== */ .wa-fab{position:fixed;right:20px;bottom:24px;z-index:75;display:inline-flex;align-items:center;gap:9px; background:#25D366;color:#fff;font-weight:700;font-size:15px;padding:13px 18px 13px 15px;border-radius:999px; box-shadow:0 10px 26px -6px rgba(37,211,102,.55)} .wa-fab svg{width:26px;height:26px;flex:none;color:#fff} .wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 32px -6px rgba(37,211,102,.7);color:#fff} .wa-fab:focus-visible{outline:3px solid #0b6b4f;outline-offset:3px} @media (max-width:960px){ .wa-fab{bottom:calc(84px + env(safe-area-inset-bottom));right:16px;padding:13px;gap:0} .wa-fab .wa-fab-txt{display:none} } @media (prefers-reduced-motion:no-preference){.wa-fab{transition:transform .18s,box-shadow .18s}} .mm-label{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-deep);padding:14px 0 4px;border-bottom:0} /* ===== BLOOM TOKENS ===== */ :root{ --primary:#DB2777;--primary-deep:#BE185D;--on-primary:#FFFFFF; --blue:#2563EB;--green:#10B981;--lime:#A3E635;--yellow:#FACC15;--on-bright:#131A2E; --surface:#FBFBFD;--surface-raised:#FFFFFF;--surface-sunken:#F4F6FB; --ink:#131A2E;--ink-muted:#5B6478;--hairline:#E6E9F2; --success:#10B981;--warning:#F59E0B; --font-display:"Fraunces",Georgia,serif;--font-body:"Mukta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s20:80px;--s24:96px; --r-input:12px;--r-card:22px;--r-xl:32px;--r-pill:999px; --shadow-card:0 1px 2px rgba(19,26,46,.05),0 12px 28px rgba(19,26,46,.08); --shadow-lift:0 4px 8px rgba(19,26,46,.06),0 28px 56px rgba(19,26,46,.16); --ease-out:cubic-bezier(.22,1,.36,1);--dur-fast:130ms;--dur-base:260ms; --container:1180px;--topbar-h:74px; /* category accent (wayfinding) — overridden per section; defaults to brand pink */ --cat:#DB2777;--cat-deep:#BE185D;--band1:#BE185D;--band2:#9D174D; } @media (prefers-color-scheme:dark){ :root{ --primary:#F472B6;--primary-deep:#F9A8D4;--on-primary:#2A0A18; --blue:#60A5FA;--green:#34D399;--lime:#BEF264;--yellow:#FDE047;--on-bright:#0E1220; --surface:#0E1220;--surface-raised:#171C2C;--surface-sunken:#0A0D18; --ink:#EEF1F8;--ink-muted:#9AA3B8;--hairline:#272D3F; --shadow-card:0 1px 2px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.5); --shadow-lift:0 4px 10px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.6); --cat:#F472B6;--cat-deep:#F9A8D4; } } *{box-sizing:border-box} .skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--primary);color:var(--on-primary); padding:10px 16px;border-radius:10px;font-weight:600;transition:top .2s var(--ease-out)} .skip:focus{top:12px;outline:2px solid var(--blue);outline-offset:2px} .sc-chip:focus-visible,summary:focus-visible,.crumb a:focus-visible,nav.main a:focus-visible,footer a:focus-visible,.rcard:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}} body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body); font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.018em;text-wrap:balance} p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s6)} .narrow{max-width:820px} .eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--cat-deep)} /* ===== BUTTONS ===== */ .btn{font-family:var(--font-body);font-weight:600;font-size:15.5px;cursor:pointer;border:1.5px solid transparent; display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:var(--r-input); transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base)} .btn:active{transform:scale(.97)} .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .btn svg{width:19px;height:19px;flex:none} .btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 32%,transparent)} .btn-primary:hover{background:var(--primary-deep)} .btn-wa{background:#25D366;color:#0B2E17;box-shadow:0 8px 22px rgba(37,211,102,.32)} .btn-wa:hover{filter:brightness(.96)} .btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary)} .btn-secondary:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)} .btn-ghost{background:var(--surface-raised);color:var(--ink);border-color:var(--hairline)} .btn-ghost:hover{border-color:var(--primary)} .btn-lg{height:56px;padding:0 28px;font-size:16px} /* ===== TOP BAR ===== */ .topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center; background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color var(--dur-base)} .topbar.solid{border-bottom-color:var(--hairline);background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .topbar .wrap{display:flex;align-items:center;gap:var(--s4);width:100%} .logo{display:flex;align-items:center;gap:13px} .logo svg{width:44px;height:44px} .logo .wm{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--primary);line-height:1.05;white-space:nowrap} .logo .wm small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-top:3px} nav.main{display:flex;gap:32px;margin-left:var(--s12)} nav.main a{font-size:15.5px;font-weight:600;color:var(--ink);transition:color var(--dur-base)} nav.main a:hover{color:var(--primary)} .topbar .sp{flex:1} .top-cta{display:flex;gap:10px;align-items:center} .lang{font-size:13px;font-weight:600;color:var(--ink-muted);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:6px 12px} .hamb{display:none;background:none;border:1px solid var(--hairline);border-radius:10px;width:46px;height:46px;cursor:pointer;color:var(--ink)} @media (max-width:960px){nav.main,.top-cta .btn,.lang{display:none}.hamb{display:inline-flex;align-items:center;justify-content:center}} @media (max-width:560px){.logo .wm small{display:none}.logo .wm{font-size:18px}.logo svg{width:40px;height:40px}.logo{gap:10px}.wrap{padding:0 16px}} .mobile-menu{display:none;position:fixed;inset:var(--topbar-h) 0 auto 0;z-index:55;background:var(--surface-raised); border-bottom:1px solid var(--hairline);padding:var(--s4) var(--s6) var(--s6);box-shadow:var(--shadow-card)} .mobile-menu.open{display:block} .mobile-menu a{display:block;padding:13px 0;font-weight:600;border-bottom:1px solid var(--hairline)} .dot{position:absolute;border-radius:50%;z-index:0;pointer-events:none} /* ===== BREADCRUMB ===== */ .crumb{border-bottom:1px solid var(--hairline);background:var(--surface)} .crumb .wrap{display:flex;align-items:center;gap:9px;padding:12px var(--s6);font-size:13px;color:var(--ink-muted);flex-wrap:wrap} .crumb a:hover{color:var(--primary)} .crumb .sep{opacity:.5} .crumb b{color:var(--ink);font-weight:600} /* ===== HERO ===== */ .chero{position:relative;overflow:hidden;padding:var(--s16) 0 var(--s12)} .chero-bg{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(44% 52% at 92% 0%,color-mix(in srgb,var(--cat) 17%,transparent),transparent 60%), radial-gradient(38% 46% at 0% 100%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 58%), radial-gradient(26% 32% at 74% 104%,color-mix(in srgb,var(--lime) 13%,transparent),transparent 60%)} .chero .wrap{position:relative;z-index:1} .chero .tag{display:inline-flex;align-items:center;gap:8px;background:var(--surface-raised);border:1px solid var(--hairline); border-radius:var(--r-pill);padding:7px 15px;font-size:13px;font-weight:600;color:var(--ink-muted);margin-bottom:18px;box-shadow:var(--shadow-card)} .chero .tag i{width:8px;height:8px;border-radius:50%;background:var(--cat)} .chero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s16);align-items:center} @media (max-width:900px){.chero-grid{grid-template-columns:1fr;gap:var(--s12)}} .chero h1{font-size:clamp(2.05rem,4.4vw,3.15rem);max-width:15ch} .chero h1 em{font-style:italic;color:var(--cat);position:relative} .chero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;border-radius:3px; background:currentColor;opacity:.28;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .2s} .chero.seen h1 em::after{transform:scaleX(1)} .chero .lede{font-size:1.18rem;color:var(--ink-muted);max-width:52ch;margin-top:var(--s6)} .chero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s8)} .chero .assure{display:flex;gap:26px;flex-wrap:wrap;margin-top:var(--s8);padding-top:var(--s6);border-top:1px dashed var(--hairline)} .chero .assure div{display:flex;flex-direction:column} .chero .assure b{font-family:var(--font-display);font-weight:600;font-size:1.5rem;color:var(--primary);line-height:1} .chero .assure span{font-size:13px;color:var(--ink-muted);margin-top:4px} .byline{display:inline-flex;align-items:center;gap:9px;margin-top:var(--s8);font-size:13.5px;color:var(--ink-muted)} .byline svg{width:16px;height:16px;color:var(--green)} .byline a{color:var(--primary-deep);font-weight:600} /* ===== HERO MEDIA (doctor photo) ===== */ .chero-media{position:relative;display:flex;justify-content:center;align-items:center} @media (max-width:900px){.chero-media{margin-top:var(--s4)}} .photo-blob{position:relative;width:min(360px,86%);aspect-ratio:4/5;border-radius:52% 48% 50% 50%/44% 46% 54% 56%; overflow:hidden;border:7px solid var(--surface-raised);box-shadow:var(--shadow-lift);z-index:2} .photo-blob img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} .chero-halo{position:absolute;width:118%;height:118%;left:-9%;top:-9%;z-index:1;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,color-mix(in srgb,var(--primary) 30%,transparent),color-mix(in srgb,var(--blue) 24%,transparent),color-mix(in srgb,var(--lime) 26%,transparent),color-mix(in srgb,var(--primary) 30%,transparent)); opacity:.5;filter:blur(2px);animation:haloSpin 26s linear infinite} @keyframes haloSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.chero-halo{animation:none}} .reduce-motion .chero-halo{animation:none} .float-pill{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;background:var(--surface-raised); border:1px solid var(--hairline);border-radius:var(--r-pill);padding:9px 14px;box-shadow:var(--shadow-card); font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap} .float-pill .stars{color:#F5A524;letter-spacing:1px;font-size:12px} .float-pill.fp-tl{top:6%;left:-2%} .float-pill.fp-br{bottom:9%;right:-3%;color:var(--cat-deep)} .float-pill .fp-ic{width:16px;height:16px;color:var(--green)} @media (max-width:520px){.float-pill{font-size:12px;padding:8px 12px}.float-pill.fp-tl{left:2%}.float-pill.fp-br{right:2%}} /* ===== Mobile hero: photo-forward, centered (matches ref quality) ===== */ @media (max-width:680px){ .chero{padding:26px 0 32px} .chero-grid{text-align:center;gap:var(--s6)} .chero-media{order:-1;flex-direction:column;margin:0 auto;width:100%} .photo-blob{width:min(224px,60%);aspect-ratio:1/1;border-radius:50%;border-width:6px} .photo-blob img{object-position:50% 14%} .chero-halo{width:128%;height:128%;left:-14%;top:-14%} .float-pill.fp-br{display:none} .float-pill.fp-tl{position:static;top:auto;left:auto;transform:none;margin-top:14px;box-shadow:var(--shadow-card)} .chero .tag{margin-left:auto;margin-right:auto} .chero h1{margin-left:auto;margin-right:auto;font-size:clamp(1.82rem,7.2vw,2.25rem);max-width:20ch} .chero h1 em::after{left:12%;right:12%} .chero .lede{margin-left:auto;margin-right:auto;font-size:1.05rem;max-width:38ch} .chero .credrow{justify-content:center} .chero .cta{justify-content:center} .chero .assure{justify-content:center;gap:22px;border-top:none;padding-top:2px;margin-top:var(--s6)} } /* ===== SECTIONS ===== */ section.blk{padding:var(--s16) 0} section.blk.sunken{background:var(--surface-sunken)} .khead{max-width:60ch;margin:0 auto var(--s12);text-align:center} .khead h2{font-size:clamp(1.75rem,3.6vw,2.5rem);margin:8px 0} .khead h2 em{font-style:italic;color:var(--cat);position:relative} .khead h2 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:5px;border-radius:3px;background:currentColor;opacity:.85;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)} .khead.seen h2 em::after{transform:scaleX(1)} .khead p{color:var(--ink-muted);margin-top:var(--s3);font-size:1.05rem} .prose{max-width:760px;margin:0 auto} .prose p{margin:0 0 var(--s4)} .prose h3{font-family:var(--font-display);font-size:1.35rem;margin:var(--s8) 0 var(--s3)} .prose .hindi{color:var(--ink-muted);font-style:italic} .lead-in{font-size:1.14rem} /* ===== SYMPTOM SELF-CHECK (page mechanic) ===== */ .selfcheck{max-width:900px;margin:0 auto;background:var(--surface-raised);border:1px solid var(--hairline); border-radius:var(--r-xl);padding:var(--s12) var(--s8);box-shadow:var(--shadow-card);position:relative;overflow:hidden} .selfcheck::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 60%)} .sc-head{position:relative;text-align:center;margin-bottom:var(--s8)} .sc-head h3{font-size:1.5rem} .sc-head p{color:var(--ink-muted);margin-top:8px} .sc-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:var(--s8)} html:not(.js) .sc-grid,html:not(.js) #scCount{display:none} @media (max-width:640px){.sc-grid{grid-template-columns:1fr}} .sc-chip{display:flex;align-items:center;gap:12px;text-align:left;background:var(--surface);border:1.5px solid var(--hairline); border-radius:var(--r-input);padding:15px 17px;cursor:pointer;font-family:var(--font-body);font-size:15.5px;font-weight:500; color:var(--ink);transition:border-color var(--dur-base),background-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .sc-chip:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--hairline))} .sc-chip:active{transform:scale(.98)} .sc-chip .box{width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--hairline); display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-base),border-color var(--dur-base)} .sc-chip .box svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.5);transition:opacity var(--dur-base),transform var(--dur-base)} .sc-chip[aria-pressed="true"]{border-color:var(--cat);background:color-mix(in srgb,var(--cat) 7%,var(--surface))} .sc-chip[aria-pressed="true"] .box{background:var(--cat);border-color:var(--cat)} .sc-chip[aria-pressed="true"] .box svg{opacity:1;transform:scale(1)} .sc-foot{position:relative;text-align:center} .sc-count{font-size:14px;color:var(--ink-muted);margin-bottom:var(--s4);min-height:22px} .sc-count b{color:var(--primary-deep)} .sc-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .sc-note{font-size:13.5px;color:var(--ink);opacity:.8;margin-top:var(--s4);display:flex;align-items:center;justify-content:center;gap:7px} .sc-note svg{width:14px;height:14px;color:var(--green)} /* ===== FEATURE CARDS ===== */ .kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);max-width:1000px;margin:0 auto} @media (max-width:820px){.kgrid{grid-template-columns:1fr}} .kcard{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:28px 24px} .kcard .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .kcard .ic svg{width:24px;height:24px;color:#fff} .ic.c1{background:var(--primary)}.ic.c2{background:var(--blue)}.ic.c3{background:var(--green)} .kcard h3{font-family:var(--font-body);font-weight:700;font-size:1.14rem;margin-bottom:8px} .kcard p{font-size:14.5px;color:var(--ink-muted)} /* ===== STEPS ===== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);counter-reset:step;max-width:1050px;margin:0 auto} @media (max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:560px){.steps{grid-template-columns:1fr}} .step{position:relative;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:26px 22px} .step .n{counter-increment:step;font-family:var(--font-display);font-weight:600;font-size:2rem;color:var(--primary);line-height:1} .step .n::before{content:"0" counter(step)} .step h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin:12px 0 6px} .step p{font-size:14px;color:var(--ink-muted)} /* ===== E-E-A-T DOCTOR ===== */ .doc{display:grid;grid-template-columns:280px 1fr;gap:var(--s12);align-items:center;max-width:960px;margin:0 auto} @media (max-width:760px){.doc{grid-template-columns:1fr;gap:var(--s8);text-align:center}} .doc .pic{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow-lift);aspect-ratio:4/5;background:var(--surface-sunken)} .doc .pic img{width:100%;height:100%;object-fit:cover;display:block} .doc h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:8px} .doc h2 em{font-style:italic;color:var(--primary)} .doc .role{color:var(--ink-muted);font-size:15px;margin-bottom:var(--s4)} .doc .creds{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s4) 0} @media (max-width:760px){.doc .creds{justify-content:center}} .pill{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink)} .pill.hi{background:color-mix(in srgb,var(--primary) 9%,var(--surface-raised));border-color:color-mix(in srgb,var(--primary) 30%,var(--hairline));color:var(--primary-deep)} /* ===== CALLOUT ===== */ .callout{max-width:760px;margin:var(--s8) auto 0;background:color-mix(in srgb,var(--blue) 7%,var(--surface-raised)); border:1px solid color-mix(in srgb,var(--blue) 22%,var(--hairline));border-left:4px solid var(--blue); border-radius:var(--r-input);padding:20px 22px;font-size:15px;color:var(--ink)} .callout b{color:var(--blue)} /* ===== 5 REASONS ===== */ .reasons{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:940px;margin:0 auto} @media(max-width:720px){.reasons{grid-template-columns:1fr}} .reason{display:flex;gap:16px;align-items:flex-start;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 24px;box-shadow:var(--shadow-card);transition:border-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .reason:hover{border-color:var(--cat);transform:translateY(-2px)} .reason .num{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--cat);line-height:1;flex:none;min-width:40px} .reason h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;margin-bottom:5px} .reason p{font-size:14px;color:var(--ink-muted)} /* ===== FAQ ===== */ .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq details{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:16px;padding:4px 22px} .faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.02rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.5rem;color:var(--primary);font-weight:400;transition:transform var(--dur-base);flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 20px;color:var(--ink-muted);font-size:15px} /* ===== RELATED ===== */ .related{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);max-width:1000px;margin:0 auto} @media (max-width:820px){.related{grid-template-columns:1fr}} .rcard{display:flex;align-items:center;gap:14px;background:var(--surface-raised);border:1px solid var(--hairline); border-radius:var(--r-card);padding:20px 22px;transition:border-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .rcard:hover{border-color:var(--primary);transform:translateY(-2px)} .rcard .rc-ic{width:42px;height:42px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center} .rcard .rc-ic svg{width:21px;height:21px;color:#fff} .rcard b{font-family:var(--font-body);font-weight:700;font-size:15.5px;display:block} .rcard span{font-size:13px;color:var(--ink-muted)} .rcard .arw{margin-left:auto;color:var(--primary);font-weight:700;flex:none} /* ===== CTA BAND ===== */ .ctaband{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--band1),var(--band2));color:#fff; border-radius:var(--r-xl);padding:var(--s16) var(--s8);text-align:center;max-width:1000px;margin:0 auto} .ctaband .cbdot{position:absolute;border-radius:50%;mix-blend-mode:screen} .ctaband h2{color:#fff;font-size:clamp(1.7rem,3.5vw,2.4rem);position:relative} .ctaband p{color:rgba(255,255,255,.9);max-width:46ch;margin:14px auto 0;position:relative} .ctaband .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s8);position:relative} .ctaband .btn-wa{background:#fff;color:var(--band2)} .ctaband .btn-wa svg{color:#25D366} .ctaband .btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .ctaband .btn-out:hover{background:rgba(255,255,255,.12)} .ctaband .cinfo{position:relative;margin-top:var(--s6);font-size:14px;color:rgba(255,255,255,.85)} /* ===== FOOTER ===== */ footer{background:var(--surface-sunken);border-top:1px solid var(--hairline);padding:var(--s16) 0 var(--s12)} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:var(--s8);margin-bottom:var(--s12)} @media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.fgrid{grid-template-columns:1fr}} .fbrand .wm{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--primary)} .fbrand p{color:var(--ink-muted);font-size:14px;margin-top:10px;max-width:34ch} footer h4{font-family:var(--font-body);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin:0 0 14px} footer a{display:block;font-size:14.5px;color:var(--ink);padding:5px 0;transition:color var(--dur-base)} footer a:hover{color:var(--primary)} .fdisc{font-size:12px;color:var(--ink-muted);opacity:.85;max-width:70ch;margin:0 0 var(--s6);padding-top:var(--s6);border-top:1px solid var(--hairline)} .fbase{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:12.5px;color:var(--ink-muted)} /* ===== STICKY MOBILE BAR ===== */ .mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;padding:10px var(--s4) calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--hairline)} .mbar .btn{flex:1} @media (max-width:960px){.mbar{display:flex}body{padding-bottom:80px}} /* ===== REVEAL — content is ALWAYS visible; .seen only plays a one-time entrance ===== */ @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .reveal.seen{animation:riseIn .6s var(--ease-out)} @media (prefers-reduced-motion:reduce){.reveal.seen{animation:none}} .reduce-motion .reveal.seen{animation:none} /* ===== Mega-menu polish (accent bar, dots, active pill, CTA bar) ===== */ .mega{overflow:hidden} .mega::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#F0559A,#BE185D 60%,#A3E635)} .mega-h{display:flex;align-items:center;gap:7px} .mega-h i{width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none} .navlink{padding:8px 12px;border-radius:10px;transition:background .16s,color .16s} .navitem:hover>.navlink,.navitem:focus-within>.navlink{color:var(--primary-deep);background:color-mix(in srgb,var(--primary) 10%,transparent)} .mega-cta{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:12px;border-bottom:0; background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 9%,var(--surface-sunken)),var(--surface-sunken)); border:1px solid color-mix(in srgb,var(--primary) 20%,var(--hairline))} .mega-cta .mc-ic{width:34px;height:34px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex:none} .mega-cta .mc-ic svg{width:18px;height:18px;color:#fff} .mega-cta .mc-tx{flex:1;font-size:13.5px;color:var(--ink-muted);line-height:1.35} .mega-cta .mc-tx b{display:block;color:var(--primary-deep);font-weight:700;font-size:14.5px} .mega-cta .mc-ar{color:var(--primary-deep);font-weight:800;font-size:17px;transition:transform .16s} .mega-cta:hover .mc-ar{transform:translateX(4px)} /* ===== Mobile drawer polish (arrows, dividers, active accent, footer) ===== */ .mm-group{border-bottom:1px solid var(--hairline);border-left:3px solid transparent;transition:border-color .16s,background .16s} .mm-group[open]{border-left-color:var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent)} .mm-group[open]>summary{color:var(--primary-deep)} .mm-group>summary{padding-left:12px;padding-right:4px} .mm-sub a{position:relative;padding:11px 26px 11px 14px;border-bottom:1px solid color-mix(in srgb,var(--hairline) 60%,transparent)} .mm-sub a:last-child{border-bottom:0} .mm-sub a::after{content:"→";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--primary);opacity:.55;font-weight:700} .mm-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline)} .mm-info{display:flex;gap:11px;align-items:flex-start;padding:6px 0} .mm-info>svg{width:19px;height:19px;color:var(--primary);flex:none;margin-top:2px} .mm-info b{display:block;font-size:14.5px;color:var(--ink);font-weight:700} .mm-info span{font-size:13px;color:var(--ink-muted)} .mm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .mm-btns .btn{display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:0} .mm-btns .btn svg{width:18px;height:18px} /* ===== Exit-intent / timed popup ===== */ .epop[hidden]{display:none!important} .epop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px} .epop-back{position:absolute;inset:0;background:rgba(19,26,46,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .epop-card{position:relative;z-index:1;width:min(430px,100%);max-height:92vh;overflow-y:auto;background:var(--surface-raised); border-radius:24px;padding:30px 28px 22px;box-shadow:var(--shadow-lift);text-align:center;animation:epopIn .34s var(--ease-out)} @keyframes epopIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.epop-card{animation:none}} .epop-x{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer; background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center} .epop-x:hover{background:var(--primary-deep)} .epop-logo{display:inline-flex;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#F0559A,#BE185D); align-items:center;justify-content:center;margin-bottom:15px} .epop-logo svg{width:34px;height:34px} .epop h2{font-size:1.62rem;line-height:1.14;margin-bottom:16px} .epop h2 em{font-style:italic;color:var(--primary)} .epop-box{text-align:left;background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:16px;padding:15px 17px;margin-bottom:15px} .epop-box>b{display:block;font-size:14.5px;margin-bottom:10px;color:var(--ink)} .epop-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .epop-box li{display:flex;gap:9px;align-items:flex-start;font-size:13.8px;color:var(--ink-muted);line-height:1.4} .epop-box li b{color:var(--ink);font-weight:700} .ep-ck{flex:none;display:inline-flex;margin-top:1px} .ep-ck svg{width:17px;height:17px;color:var(--green)} .epop-lead{font-weight:700;margin-bottom:13px;font-size:15px} .epop .btn{width:100%;margin-bottom:10px} .epop-note{font-size:12.5px;color:var(--ink-muted);font-style:italic;margin:4px 0 12px} .epop-trust{font-size:11.5px;color:var(--ink-muted);border-top:1px solid var(--hairline);padding-top:12px;margin:0} .award{display:grid;grid-template-columns:.82fr 1fr;gap:var(--s12);align-items:center;max-width:960px;margin:0 auto} @media(max-width:820px){.award{grid-template-columns:1fr;gap:var(--s6);text-align:center;max-width:460px}} .award-photo{position:relative;width:100%;max-width:360px;margin:0 auto} .award-photo img{width:100%;border-radius:20px;box-shadow:var(--shadow-lift);display:block;border:6px solid #fff} .award-badge{position:absolute;bottom:-14px;right:-14px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#F0559A,#BE185D);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card)} .award-badge svg{width:26px;height:26px} @media(max-width:820px){.award-badge{right:calc(50% - 66px)}} .award-body h2 em{font-style:italic;color:var(--primary)} .award-body p{color:var(--ink-muted);margin:12px 0 0;font-size:1.05rem} /* ---- Quick facts trust strip ---- */ .qfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1000px;margin:0 auto} .qstat{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:28px 18px;text-align:center;box-shadow:var(--shadow-card);transition:border-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .qstat:hover{border-color:var(--primary);transform:translateY(-2px)} .qstat b{display:block;font-family:var(--font-display);font-weight:600;font-size:2.5rem;line-height:1;color:var(--primary)} .qstat span{display:block;font-size:13.5px;font-weight:600;color:var(--ink-muted);margin-top:9px;line-height:1.4} @media(max-width:820px){.qfacts{grid-template-columns:1fr 1fr;gap:14px}} @media(max-width:440px){.qstat{padding:24px 12px}.qstat b{font-size:2.15rem}} /* ---- Google rating summary card ---- */ .gcard{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 30px;max-width:600px;margin:0 auto var(--s12);box-shadow:var(--shadow-card)} .gcard-g{display:flex;align-items:center;gap:12px} .gcard-g svg{width:38px;height:38px;flex:none} .gcard-g .glabel{font-weight:700;font-size:15px;color:var(--ink);line-height:1.2} .gcard-g .glabel small{display:block;font-size:12.5px;color:var(--ink-muted);font-weight:600} .gcard-score{text-align:center;border-left:1px solid var(--hairline);padding-left:26px} @media(max-width:520px){.gcard-score{border-left:0;padding-left:0}} .gcard-score .num{font-family:var(--font-display);font-weight:600;font-size:2.5rem;line-height:1;color:var(--ink)} .gcard-score .stars{color:#F5A623;letter-spacing:2px;font-size:15px;display:block;margin:5px 0 3px} .gcard-score .cnt{font-size:12.5px;color:var(--ink-muted)} /* ---- Reassurance / objection cards ---- */ .reassure{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:940px;margin:0 auto} @media(max-width:720px){.reassure{grid-template-columns:1fr}} .ra{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 26px;box-shadow:var(--shadow-card);transition:border-color var(--dur-base),transform var(--dur-fast) var(--ease-out)} .ra:hover{border-color:var(--primary);transform:translateY(-2px)} .ra h3{font-family:var(--font-body);font-weight:700;font-size:1.06rem;color:var(--ink);display:flex;gap:11px;align-items:flex-start;margin-bottom:8px} .ra h3 svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px} .ra p{font-size:14.5px;color:var(--ink-muted);line-height:1.6} /* ---- Instagram follow strip ---- */ .igband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:900px;margin:0 auto;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:24px 34px;box-shadow:var(--shadow-card)} .igband .igtext{max-width:540px} .igband .igk{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:var(--primary-deep);font-size:13px;letter-spacing:.02em;margin-bottom:7px} .igband .igk svg{width:22px;height:22px} .igband h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;margin-bottom:6px} .igband p{color:var(--ink-muted);font-size:15px} .igband .ig-handle{font-weight:700;color:var(--primary-deep)} .igband .btn{white-space:nowrap} .lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--primary-deep);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:8px 14px;transition:border-color var(--dur-base),background var(--dur-base)} .lang-switch:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)} .reels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:760px;margin:0 auto} .reel{text-decoration:none;color:inherit} .reel-cover{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--hairline);background:#000} .reel-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-base) var(--ease-out)} .reel:hover .reel-cover img{transform:scale(1.05)} .reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.22))} .reel-play svg{width:46px;height:46px;filter:drop-shadow(0 2px 7px rgba(0,0,0,.45));transition:transform var(--dur-fast) var(--ease-out)} .reel:hover .reel-play svg{transform:scale(1.1)} .reel-cap{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-top:11px;line-height:1.4;padding:0 2px} /* Tablet: 2 columns. Phone: 2x2 of the first 4, then "view more". */ @media(max-width:820px){.reels{grid-template-columns:1fr 1fr;gap:16px}} @media(max-width:600px){.reels{gap:14px}.reel-cap{font-size:12.5px}.reel:nth-child(n+5){display:none}} .hero{overflow-x:clip} /* mega polish */ .mega{border-radius:20px!important;box-shadow:0 26px 60px -14px rgba(19,26,46,.28),0 8px 22px rgba(19,26,46,.08)!important;overflow:hidden} .mega-grid{gap:8px 30px} .mega-h{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)} .mega-h i{width:9px;height:9px;border-radius:50%;background:var(--primary);flex:none} .mega-col a{display:block;border-radius:10px;padding:7px 10px;margin:1px 0;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast),transform var(--dur-fast)} .mega-col a:hover{background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary-deep);transform:translateX(3px)} .mega-cta{border-radius:16px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base)} .mega-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -8px color-mix(in srgb,var(--primary) 45%,transparent)} html{overflow-x:hidden}section[id]{scroll-margin-top:80px}/* langseg */.langseg{display:inline-flex;align-items:center;border:1px solid var(--hairline);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:700;line-height:1;flex:none}.langseg a,.langseg span{padding:7px 11px;color:var(--ink-muted);text-decoration:none}.langseg .on{background:var(--primary);color:#fff}.langseg a:hover{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary-deep)}@media(max-width:960px){.topbar .wrap{padding-right:calc(var(--s6) + 10px)}}
You can say it here — no judgment, ever. Dr. Anshu Agarwal has spent 18+ years helping women in Ranchi feel heard, and treated: periods, PCOS, pregnancy and fertility.
18+ years’ experience · Director of Obs & Gyn, Medifirst Hospital, Bariatu
If you're looking for an experienced gynaecologist and obstetrician in Ranchi, Dr. Anshu Agarwal brings 18+ years of care to women at every stage of life. As Director of Obstetrics & Gynaecology at Medifirst Hospital, SubPlot No. 2703, Plot No. 2703, Booty Road, Bariatu, she looks after everything from irregular periods, PCOS and white discharge to pregnancy, normal and painless delivery, and high-risk pregnancy care. A trained laparoscopic and hysteroscopic (keyhole) surgeon, she also treats fibroids, ovarian cysts, menstrual disorders, cervical cancer screening (Pap smear) and menopause — and helps couples conceive with simpler, non-IVF fertility care like IUI and ovulation induction. Women across Ranchi and Jharkhand choose her because she listens without judgment, explains in plain Hindi and English, and puts your comfort first — whether it's a routine gynae check-up or a complex concern.
Irregular, heavy or painful periods, PCOS, or the changes of menopause — most hormonal problems are common, and very treatable.
Irregular periods, weight changes, unwanted hair, trouble conceiving.
Learn more →Periods that are heavy, missed, or hard to predict.
Learn more →Severe pain isn't something you just have to endure.
Learn more →Hot flushes, mood or cycle changes — managed with care.
Learn more →Found on a scan or causing pain — checked and managed.
Learn more →Heavy periods or pressure from fibroids — including keyhole removal.
Learn more →When hormones affect your periods, weight or mood.
Learn more →Gentle guidance for young girls and their mothers.
Learn more →Discharge, infections, dryness or discomfort — private, judgment-free care that sorts things out quickly.
Discharge, itching or infection — common, treatable, and private.
Learn more →Burning, urgency or frequent infections — treated and prevented.
Learn more →Irritation or dryness at any age — simple, effective relief.
Learn more →It's common and treatable — discussed with complete privacy.
Learn more →A quick test that catches problems early. Peace of mind.
Learn more →From trying to conceive — without rushing to IVF — to a calm first pregnancy, high-risk care, and delivery day.
Real answers, starting simple. 300+ pregnancies without IVF.
Learn more →A calm, guided start — scans, check-ups and someone to call.
Learn more →Close monitoring for BP, diabetes, twins or a previous loss.
Learn more →Supported wherever it's safe for mother and baby.
Learn more →Get healthy and ready before you start trying.
Learn more →Compassionate care to find the cause and improve your chances.
Learn more →Recovery, feeding and your health after the baby arrives.
Learn more →Contraception, routine check-ups and screenings that catch problems early and keep you healthy.
Choose what fits your life — confidential and judgment-free.
Learn more →A regular check to stay ahead of problems, at every age.
Learn more →A lump or change checked promptly, with clear next steps.
Learn more →Protect against cervical cancer — for teens and adults.
Learn more →No forms to fill, no long waits. Booking takes one tap, and your visit is a real conversation.
Tap WhatsApp or call 7293937999. Tell us what's bothering you — we'll find a time that suits you, often the same week.
A calm, unhurried conversation and, if needed, an examination or simple tests — explained in plain words, with time for your questions.
You leave knowing what's likely going on and your options — nothing rushed, nothing pushed. Follow-up is a message away.
From routine check-ups to keyhole surgery — laparoscopic and hysteroscopic procedures mean smaller cuts and faster recovery.
Dr. Anshu Agarwal has spent more than 18 years looking after women's health in India, and today she leads the Department of Obstetrics & Gynaecology at Medifirst Hospital in Bariatu, Ranchi. Women come to her because she listens first, explains clearly, and never makes anyone feel judged.
As one of Ranchi's most experienced gynaecologists and a trained laparoscopic & hysteroscopic surgeon, she cares for PCOS, menstrual problems, fibroids and infertility — offering laparoscopic hysterectomy (NDVH), myomectomy, ovulation induction and IUI, high-risk pregnancy and normal & painless delivery, all under one roof.
Beyond the clinic, Dr. Anshu Agarwal’s work in women’s health has been recognised on stage — a reflection of the trust women across Ranchi place in her, and of more than 18 years spent putting patients first.
Book on WhatsApp“My name is Raksha, and I am very much happy with the treatment. I really appreciate the effort of Dr Anshu Agarwal ma’am. I recommend every woman facing any gynae problem or pregnancy — please go to Dr Anshu Agarwal. Best gynecologist doctor.”
Read on Google →“She was kind and caring. I was literally worried about my health, but she prescribed several tests, checked the reports and handled the situation very practically. I will recommend people and girls to visit her for any kind of gynaecological issue.”
Read on Google →“My bhabhi had struggled with gynaecological issues for a long time and consulted many doctors without lasting relief. Our experience with Dr. Anshu Agarwal was truly remarkable — her care, expertise and personalised approach made a huge difference, and today my bhabhi is completely fine. I highly recommend her to anyone looking for the best gynecologist in Ranchi.”
Read on Google →“She is the best gynaecologist, with deep knowledge and understanding. Her patience and empathy allow the patient to feel safe and confident. I would highly recommend her to anyone with a gyna-related concern.”
Read on Google →“Dr. Anshu Agarwal mam is one of the best gynae in Ranchi city — highly knowledgeable, supportive, friendly and polite. After her treatment and guidance I conceived at once and successfully delivered a baby boy in Jan 2024. She was always available via message and phone call. I recommend her to all couples struggling to conceive.”
Read on Google →Dr. Anshu shares easy-to-follow tips on periods, PCOS, pregnancy and everyday women’s health as @dr_anshuagarwal. Tap any reel to watch.
Experience, breadth of care, and a warmth that patients remember.
MS (Obstetrics & Gynaecology) and Director of Obs & Gyn at Medifirst Hospital — among Ranchi’s most experienced women’s doctors.
Periods and PCOS, infections, fertility, pregnancy and delivery, menopause and keyhole surgery — one trusted doctor for every stage.
Complete confidentiality, discreet WhatsApp booking and no public forms — sensitive concerns are always handled with care.
Laparoscopy & hysteroscopy trained, so procedures for fibroids, cysts and more mean smaller cuts and a faster recovery.
300+ pregnancies achieved without IVF — always starting with the simplest effective step.
Many women put off a visit because they feel unsure or shy. Here's what it's really like to see Dr. Anshu.
No question is too small or too personal. Dr. Anshu listens first and explains gently, without ever making you feel judged — whatever the concern.
Always. What you share stays between you and your doctor. Booking on WhatsApp is discreet, and there are no public forms to fill in.
Of course. Come alone or bring someone you trust — whatever helps you feel comfortable. You're always in control of your appointment.
Mostly a calm conversation about your history and concerns. Any examination is done only when needed, with your consent, and explained beforehand.
The easiest way is WhatsApp — tap any "Book on WhatsApp" button and send us a message, or call 7293937999. We're open every day, 9 AM to 8 PM, and we'll find you a time that suits, often the same week.
Always. What you share stays between you and your doctor. Booking over WhatsApp is discreet, and there are no public forms. Concerns like discharge, infections or contraception are treated with complete privacy and no judgment.
Many couples conceive with simpler help once the cause is understood — such as ovulation support or IUI. More than 300 women have achieved pregnancy under Dr. Agarwal's care without IVF. IVF is discussed only when it's genuinely the right option for you.
Yes. PCOS/PCOD, irregular or heavy periods, and painful periods are among the most common concerns Dr. Agarwal treats — with a plan built around your symptoms and goals, from lifestyle guidance to medical care.
Yes. Dr. Agarwal is an experienced obstetrician in Ranchi and supports normal and painless delivery wherever it's safe for mother and baby, along with complete prenatal and high-risk pregnancy care at Medifirst Hospital, Bariatu.
Yes. Dr. Agarwal is a trained laparoscopic and hysteroscopic surgeon in Ranchi. Keyhole procedures — for fibroids (laparoscopic myomectomy), ovarian cysts, NDVH and more — mean smaller cuts and a faster recovery.
Dr. Agarwal sees patients at Medifirst Hospital, SubPlot No. 2703, Plot No. 2703, Booty Road, Vijay Nagar, Bariatu, Ranchi – 834012. Open every day, 9 AM to 8 PM. Call or WhatsApp 7293937999.
Private and confidential — always. A quick call or WhatsApp helps us keep your wait short.
Tap what sounds like you. No forms, no judgment — just a clear, private answer, and what to do next.
You don’t need to figure it out alone. Message or call — we’ll help you take the next step, at your pace.
Have a question? Message Dr. Agarwal today.
Book on WhatsAppCall 7293937999Open every day · 9 AM – 8 PM, Bariatu
MS (Obs & Gyn) · 18+ years · Private & judgment-free