/* ============================================================= Dr. Şirvan Zəkəriyəyev — Endokrinoloq main.css — shared design system (loaded deferred) Critical above-the-fold CSS is inlined per page in . ============================================================= */ :root{ /* Brand palette — endocrinology: calm teal + warm gold accent */ --ink:#0c2a31; --ink-soft:#3a565d; --muted:#5f7a80; --teal-900:#073b40; --teal-800:#0a565c; --teal-700:#0e767a; /* primary */ --teal-600:#0f8a8c; --teal-500:#16a5a3; --teal-100:#d6efee; --teal-50:#eef9f8; --mint:#e8f6f3; --gold:#c8862a; --gold-soft:#f4e7cf; --bg:#ffffff; --surface:#f4faf9; --surface-2:#eef6f5; --line:#dceae8; --line-strong:#c3dcd9; --white:#ffffff; --wa:#25d366; --wa-dark:#128c7e; --danger:#b4452f; --shadow-sm:0 1px 2px rgba(7,59,64,.06),0 1px 3px rgba(7,59,64,.08); --shadow:0 6px 20px -8px rgba(7,59,64,.18); --shadow-lg:0 24px 60px -24px rgba(7,59,64,.32); --ring:0 0 0 4px rgba(14,118,122,.18); --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px; --container:1160px; --gut:clamp(16px,4vw,40px); --step--1:clamp(.82rem,.79rem + .15vw,.9rem); --step-0:clamp(1rem,.96rem + .2vw,1.075rem); --step-1:clamp(1.15rem,1.07rem + .4vw,1.35rem); --step-2:clamp(1.4rem,1.25rem + .75vw,1.85rem); --step-3:clamp(1.75rem,1.45rem + 1.5vw,2.6rem); --step-4:clamp(2.1rem,1.6rem + 2.6vw,3.6rem); --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,"Noto Sans",Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;font-family:var(--font);color:var(--ink);background:var(--bg); font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--teal-700);text-decoration:none} a:hover{color:var(--teal-800)} h1,h2,h3,h4{line-height:1.18;color:var(--teal-900);font-weight:800;margin:0 0 .5em;letter-spacing:-.01em} h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} h4{font-size:var(--step-1)} p{margin:0 0 1rem} ul,ol{margin:0 0 1rem;padding-left:1.2rem} li{margin:.3rem 0} strong{color:var(--teal-900);font-weight:700} hr{border:0;border-top:1px solid var(--line);margin:2rem 0} :focus-visible{outline:3px solid var(--teal-500);outline-offset:2px;border-radius:4px} ::selection{background:var(--teal-100);color:var(--teal-900)} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(48px,8vw,96px)} .section--tight{padding-block:clamp(36px,6vw,64px)} .section--surface{background:var(--surface)} .section--mint{background:linear-gradient(180deg,var(--mint),var(--surface))} .section--ink{background:var(--teal-900);color:#dff1ef} .section--ink h2,.section--ink h3{color:#fff} .grid{display:grid;gap:clamp(16px,2.5vw,28px)} @media(min-width:680px){.g-2{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}} .center{text-align:center} .lead{font-size:var(--step-1);color:var(--ink-soft);max-width:62ch} .eyebrow{display:inline-flex;align-items:center;gap:.5em;font-size:var(--step--1);font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);margin-bottom:.6rem} .eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;border-radius:2px} .section-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)} .section-head.center{margin-inline:auto} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em; font:inherit;font-weight:700;font-size:var(--step-0);line-height:1;cursor:pointer; padding:.95em 1.5em;border-radius:var(--r-pill);border:1.5px solid transparent; transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease; text-align:center;min-height:48px} .btn svg{width:1.15em;height:1.15em;flex:none} .btn:active{transform:translateY(1px)} .btn--primary{background:linear-gradient(135deg,var(--teal-700),var(--teal-600));color:#fff;box-shadow:var(--shadow)} .btn--primary:hover{color:#fff;box-shadow:var(--shadow-lg);transform:translateY(-2px)} .btn--ghost{background:transparent;color:var(--teal-800);border-color:var(--line-strong)} .btn--ghost:hover{background:var(--teal-50);border-color:var(--teal-500);color:var(--teal-800)} .btn--wa{background:var(--wa);color:#06301f} .btn--wa:hover{background:#1fc25c;color:#06301f;transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn--light{background:#fff;color:var(--teal-800);box-shadow:var(--shadow)} .btn--light:hover{color:var(--teal-900);transform:translateY(-2px)} .btn--lg{padding:1.1em 1.9em;font-size:var(--step-1)} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .btn-row.center{justify-content:center} /* ---------- Header / Nav ---------- */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86); backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .2s} .site-header.is-scrolled{box-shadow:var(--shadow)} .nav{display:flex;align-items:center;gap:18px;min-height:72px} .brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--teal-900);letter-spacing:-.02em;line-height:1.05} .brand:hover{color:var(--teal-900)} .brand__mark{width:42px;height:42px;flex:none;border-radius:12px;background:linear-gradient(135deg,var(--teal-700),var(--teal-500)); display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm)} .brand__mark svg{width:24px;height:24px} .brand__name{font-size:1.04rem} .brand__role{display:block;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600)} .nav__spacer{flex:1} .nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nav__links a{display:inline-flex;align-items:center;padding:.6em .8em;border-radius:var(--r-sm); color:var(--ink);font-weight:600;font-size:.96rem;white-space:nowrap} .nav__links a:hover{background:var(--teal-50);color:var(--teal-800)} .nav__links a[aria-current="page"]{color:var(--teal-700);background:var(--teal-50)} .nav__item{position:relative} .nav__item--has > a::after{content:"";width:.46em;height:.46em;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);margin-left:.45em;margin-top:-.2em;opacity:.6} .dropdown{position:absolute;top:100%;left:0;min-width:248px;background:#fff;border:1px solid var(--line); border-top:10px solid transparent;background-clip:padding-box; border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;display:none;flex-direction:column;gap:2px} .nav__item--has:hover .dropdown,.nav__item--has:focus-within .dropdown{display:flex} .dropdown a{display:block;padding:.6em .8em;border-radius:var(--r-sm);font-size:.95rem;color:var(--ink-soft)} .dropdown a:hover{background:var(--teal-50);color:var(--teal-800)} .langpick{position:relative} .langpick__btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-pill);padding:5px 10px 5px 7px;cursor:pointer;font:inherit;font-weight:700;font-size:.8rem;color:var(--teal-800);line-height:1} .langpick__btn:hover{border-color:var(--teal-500)} .flag{width:21px;height:14px;border-radius:3px;overflow:hidden;display:block;flex:none;box-shadow:0 0 0 1px rgba(7,59,64,.12)} .flag svg{display:block;width:100%;height:100%} .langpick__btn .car{width:.45em;height:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);margin-top:-.18em;opacity:.55;transition:transform .2s} .langpick.open .langpick__btn .car{transform:rotate(225deg);margin-top:.12em} .langpick__menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow-lg);padding:6px;display:none;flex-direction:column;gap:2px;min-width:150px;z-index:80} .langpick.open .langpick__menu,.langpick:hover .langpick__menu,.langpick:focus-within .langpick__menu{display:flex} .langpick__menu a{display:flex;align-items:center;gap:9px;padding:.5em .6em;border-radius:8px;font-size:.88rem;font-weight:600;color:var(--ink)} .langpick__menu a:hover{background:var(--teal-50);color:var(--teal-800)} .langpick__menu a[aria-current="true"]{background:var(--teal-50);color:var(--teal-800)} .nav__cta{display:inline-flex} .nav__toggle{display:none;width:46px;height:46px;border:1px solid var(--line-strong);background:#fff;border-radius:12px; cursor:pointer;align-items:center;justify-content:center;color:var(--teal-900)} .nav__toggle svg{width:24px;height:24px} @media(min-width:1181px){ .nav__menu{display:flex;align-items:center;gap:10px} .nav__links a{padding:.5em .58em;font-size:.93rem} } @media(max-width:1180px){ .nav__toggle{display:inline-flex} .nav__menu{position:fixed;inset:72px 0 auto 0;background:#fff;border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);padding:18px var(--gut) 26px;display:none;flex-direction:column;gap:16px; max-height:calc(100dvh - 72px);overflow:auto} .nav__menu.is-open{display:flex} .nav__links{flex-direction:column;align-items:stretch;gap:2px} .nav__links a{padding:.85em .7em;font-size:1.05rem;border-radius:10px} .nav__item--has > a::after{float:right} .dropdown{position:static;display:flex;box-shadow:none;border:0;border-left:2px solid var(--teal-100); border-radius:0;margin:2px 0 6px 12px;padding:0 0 0 8px;min-width:0} .nav__cta{justify-content:center} .langpick{align-self:flex-start} .langpick__menu{position:static;box-shadow:none;margin-top:6px;min-width:160px} } /* ---------- Hero ---------- */ .hero{position:relative;background: radial-gradient(120% 90% at 88% -10%,var(--teal-100) 0,transparent 55%), radial-gradient(90% 70% at -5% 110%,var(--gold-soft) 0,transparent 50%), linear-gradient(180deg,#fff,var(--surface));overflow:hidden} .hero__grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center;padding-block:clamp(40px,7vw,84px)} @media(min-width:920px){.hero__grid{grid-template-columns:1.05fr .95fr}} .hero h1{margin-bottom:.35em} .hero .lead{margin-bottom:1.6rem} .hero__media{position:relative} .hero__media img{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%; aspect-ratio:3/4;object-fit:cover;background:var(--surface-2)} .media-portrait{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:var(--r-lg);background:var(--surface-2)} .media-landscape{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:var(--r-lg);background:var(--surface-2)} .hero__badge{position:absolute;left:-8px;bottom:22px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg); padding:14px 18px;display:flex;align-items:center;gap:12px;max-width:240px} .hero__badge .num{font-size:1.7rem;font-weight:800;color:var(--teal-700);line-height:1} .hero__badge .lbl{font-size:.82rem;color:var(--muted);line-height:1.3} .hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem} .chip{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line); border-radius:var(--r-pill);padding:.5em 1em;font-size:.88rem;font-weight:600;color:var(--teal-800);box-shadow:var(--shadow-sm)} .chip svg{width:1.05em;height:1.05em;color:var(--teal-600)} /* ---------- Cards ---------- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)} .card__icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px; background:var(--teal-50);color:var(--teal-700)} .card__icon svg{width:28px;height:28px} .card h3{font-size:var(--step-1);margin-bottom:.4em} .card p{color:var(--ink-soft);margin-bottom:.6rem;font-size:.98rem} .card__link{font-weight:700;display:inline-flex;align-items:center;gap:.35em} .card__link svg{width:1em;height:1em;transition:transform .2s} .card__link:hover svg{transform:translateX(3px)} .card--soft{background:var(--surface);border-color:transparent} .card--feature{display:flex;flex-direction:column} /* service list inside cards */ .svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .svc-tags span{background:var(--teal-50);color:var(--teal-800);border-radius:var(--r-pill); padding:.32em .8em;font-size:.82rem;font-weight:600} /* ---------- Answer-first / AEO blocks ---------- */ .qa{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal-500); border-radius:var(--r);padding:clamp(18px,2.6vw,26px);margin-bottom:18px;box-shadow:var(--shadow-sm)} .qa h3{font-size:var(--step-1);margin-bottom:.4em} .qa .answer{font-size:1.02rem;color:var(--ink)} .qa .answer p:last-child{margin-bottom:0} .note{background:var(--gold-soft);border-radius:var(--r);padding:16px 20px;border-left:4px solid var(--gold); color:#5b4413;font-size:.96rem} .note strong{color:#5b4413} /* ---------- Definition / fact lists ---------- */ .facts{list-style:none;padding:0;margin:0;display:grid;gap:12px} .facts li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:14px 16px} .facts svg{width:22px;height:22px;color:var(--teal-600);flex:none;margin-top:2px} .facts .k{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700} .facts .v{font-weight:600;color:var(--teal-900)} /* ---------- Stats ---------- */ .stats{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{text-align:center;padding:18px} .stat .num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--teal-700);line-height:1} .stat .lbl{color:var(--ink-soft);font-size:.92rem;margin-top:.4rem} /* ---------- Timeline (about) ---------- */ .timeline{list-style:none;margin:0;padding:0;position:relative} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-strong)} .timeline li{position:relative;padding:0 0 22px 38px} .timeline li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%; background:#fff;border:3px solid var(--teal-500);box-shadow:0 0 0 4px var(--teal-50)} .timeline .yr{font-weight:800;color:var(--teal-700);font-size:.95rem} .timeline .ti{font-weight:700;color:var(--teal-900)} .timeline p{color:var(--ink-soft);margin:.2rem 0 0} /* ---------- FAQ accordion ---------- */ .accordion{display:grid;gap:12px} .acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden} .acc__q{width:100%;text-align:left;font:inherit;font-weight:700;color:var(--teal-900);font-size:1.05rem; background:none;border:0;cursor:pointer;padding:18px 54px 18px 20px;position:relative;line-height:1.4} .acc__q::after{content:"";position:absolute;right:20px;top:22px;width:12px;height:12px;border-right:2.5px solid var(--teal-600); border-bottom:2.5px solid var(--teal-600);transform:rotate(45deg);transition:transform .25s} .acc[open] .acc__q::after{transform:rotate(-135deg);top:26px} .acc__a{padding:0 20px 20px;color:var(--ink-soft)} .acc__a p:last-child{margin-bottom:0} .acc summary{list-style:none} .acc summary::-webkit-details-marker{display:none} /* ---------- Gallery ---------- */ .gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}} .gallery figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--surface-2);position:relative} .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease} .gallery figure:hover img{transform:scale(1.05)} .gallery figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(0deg,rgba(7,59,64,.86),transparent); color:#fff;font-size:.82rem;padding:26px 12px 10px;line-height:1.35} /* ---------- Contact / forms ---------- */ .form{display:grid;gap:14px} .field{display:grid;gap:6px} .field label{font-weight:600;font-size:.92rem;color:var(--teal-900)} .field input,.field select,.field textarea{font:inherit;padding:.8em .95em;border:1.5px solid var(--line-strong); border-radius:12px;background:#fff;color:var(--ink);width:100%} .field textarea{min-height:120px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:var(--ring)} .form small{color:var(--muted)} .contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);box-shadow:var(--shadow-sm)} .contact-card h3{font-size:var(--step-1)} .map-embed{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);line-height:0} .map-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block} /* ---------- Breadcrumb ---------- */ .crumbs{padding-block:14px;font-size:.88rem;color:var(--muted)} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4em;margin:0;padding:0} .crumbs li::after{content:"›";margin-left:.5em;color:var(--line-strong)} .crumbs li:last-child::after{content:""} .crumbs a{color:var(--muted);font-weight:600} .crumbs a:hover{color:var(--teal-700)} .crumbs [aria-current]{color:var(--teal-800);font-weight:700} /* ---------- Article ---------- */ .prose{max-width:74ch} .prose h2{margin-top:1.8em} .prose h3{margin-top:1.4em;font-size:var(--step-1)} .prose ul{padding-left:1.3rem} .prose img{border-radius:var(--r);margin:1.5rem 0} .prose blockquote{margin:1.5rem 0;padding:14px 20px;border-left:4px solid var(--teal-400,var(--teal-500)); background:var(--surface);border-radius:0 var(--r) var(--r) 0;color:var(--ink-soft);font-style:italic} .byline{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem;margin:1rem 0 2rem} .byline img{width:44px;height:44px;border-radius:50%;object-fit:cover} .tablewrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--r)} table{border-collapse:collapse;width:100%;font-size:.96rem} th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)} thead th{background:var(--surface);color:var(--teal-900);font-weight:700} tbody tr:last-child td{border-bottom:0} /* dialogue blocks (patient case stories) */ .dialogue{display:grid;gap:8px;margin:1.2rem 0} .dialogue .turn{padding:10px 14px;border-radius:14px;max-width:90%} .dialogue .doc{background:var(--teal-50);border:1px solid var(--teal-100);justify-self:start} .dialogue .pat{background:var(--surface-2);justify-self:end;text-align:right} .dialogue b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:2px} /* ---------- Doctor mini-card / CTA band ---------- */ .cta-band{background:linear-gradient(135deg,var(--teal-800),var(--teal-600));color:#fff;border-radius:var(--r-xl); padding:clamp(28px,5vw,52px);text-align:center;box-shadow:var(--shadow-lg)} .cta-band h2{color:#fff} .cta-band p{color:#d7efee;max-width:56ch;margin-inline:auto} /* ---------- Footer ---------- */ .site-footer{background:var(--teal-900);color:#c2dbd9;padding-block:clamp(40px,6vw,64px) 0;font-size:.95rem} .footer__grid{display:grid;gap:32px} @media(min-width:760px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}} .site-footer h4{color:#fff;font-size:1rem;margin-bottom:1rem;letter-spacing:.02em} .site-footer a{color:#c2dbd9} .site-footer a:hover{color:#fff} .footer__brand .brand__name{color:#fff} .footer__brand p{color:#9fc4c1;margin-top:12px;max-width:34ch} .footer__links{list-style:none;padding:0;margin:0;display:grid;gap:9px} .footer__contact{list-style:none;padding:0;margin:0;display:grid;gap:12px} .footer__contact li{display:flex;gap:10px;align-items:flex-start} .footer__contact svg{width:18px;height:18px;color:var(--teal-500);flex:none;margin-top:3px} .footer__social{display:flex;gap:10px;margin-top:14px} .footer__social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center} .footer__social a:hover{background:var(--teal-600)} .footer__social svg{width:20px;height:20px;color:#fff} .footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding:20px 0;display:flex; flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;color:#8fb6b3;font-size:.86rem} .footer__bottom a{color:#bfe0dd;font-weight:600} .otx-credit{opacity:.92} /* ---------- Floating WhatsApp ---------- */ .wa-float{position:fixed;right:18px;bottom:18px;z-index:70;width:60px;height:60px;border-radius:50%; background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(18,140,126,.6); animation:waPulse 2.6s infinite} .wa-float:hover{color:#fff;transform:scale(1.06)} .wa-float svg{width:32px;height:32px} .wa-float::after{content:attr(data-tip);position:absolute;right:72px;white-space:nowrap;background:#fff;color:var(--teal-900); font-size:.85rem;font-weight:700;padding:.5em .9em;border-radius:var(--r-pill);box-shadow:var(--shadow);opacity:0; transform:translateX(8px);transition:.2s;pointer-events:none} .wa-float:hover::after{opacity:1;transform:translateX(0)} @keyframes waPulse{0%{box-shadow:0 10px 30px -6px rgba(18,140,126,.6),0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 10px 30px -6px rgba(18,140,126,.6),0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 10px 30px -6px rgba(18,140,126,.6),0 0 0 0 rgba(37,211,102,0)}} @media(prefers-reduced-motion:reduce){.wa-float{animation:none}} @media(max-width:520px){.wa-float{width:56px;height:56px;right:14px;bottom:14px}.wa-float::after{display:none}} /* ---------- Scroll reveal (content visible if JS fails) ---------- */ .reveal{opacity:1;transform:none} .js-loaded .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .js-loaded .reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.js-loaded .reveal{opacity:1;transform:none;transition:none}} /* ---------- Utilities ---------- */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:8px;top:-60px;background:#fff;color:var(--teal-800);padding:.7em 1.2em;border-radius:10px; z-index:100;box-shadow:var(--shadow);font-weight:700;transition:top .2s} .skip-link:focus{top:8px} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .flow > * + *{margin-top:1rem} .pill{display:inline-block;background:var(--teal-50);color:var(--teal-800);border-radius:var(--r-pill);padding:.3em .9em;font-size:.82rem;font-weight:700} .divider-soft{height:1px;background:var(--line);border:0;margin:0}