/* Hub v2 (2026-10-27). Pure CSS motion + tiny hub.js for pointer tilt. CSP: no inline styles (render-blocking stylesheets + body bgcolor give the first-paint background). */
html.hub-html{background:#f3f1f4}
.hub-body{position:relative;min-height:100vh;margin:0;background:#f3f1f4;overflow-x:hidden;color:#1b2430}
.hub-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
 background:radial-gradient(60rem 40rem at 8% -10%,rgba(15,42,74,.16),transparent 60%),radial-gradient(55rem 38rem at 105% 110%,rgba(109,26,54,.15),transparent 60%),linear-gradient(160deg,#f5f7fa 0%,#f4f0f2 100%)}
.hub-bg .grid{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(27,36,48,.09) 1px,transparent 1.2px);background-size:26px 26px;
 -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 70%)}
.orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55}
.o1{width:26rem;height:26rem;left:-6rem;top:8%;background:radial-gradient(circle,rgba(22,58,99,.35),transparent 70%);animation:drift1 18s ease-in-out infinite alternate}
.o2{width:24rem;height:24rem;right:-6rem;bottom:-4rem;background:radial-gradient(circle,rgba(132,37,68,.32),transparent 70%);animation:drift2 22s ease-in-out infinite alternate}
.o3{width:18rem;height:18rem;left:45%;top:-6rem;background:radial-gradient(circle,rgba(95,211,198,.18),transparent 70%);animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(3rem,2rem)}}@keyframes drift2{to{transform:translate(-3rem,-2rem)}}
.hub-stage{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;transform-origin:50% 35%;animation:zoomIn .7s cubic-bezier(.16,1,.3,1) both}
@keyframes zoomIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.hub-top{padding:1.4rem 0 0}.hub-top .wrap{display:flex;align-items:center;gap:.6rem;color:#3b4856;font-size:.95rem;font-weight:600;letter-spacing:.02em}
.hub-dot{width:.7rem;height:.7rem;border-radius:50%;background:linear-gradient(135deg,#0f2a4a 50%,#6d1a36 50%);box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.hub-main{flex:1;display:flex;align-items:center;padding:2.5rem 0 3.5rem}
.hub-main .wrap{width:100%}
.hub-h1{font-size:clamp(2.9rem,8.5vw,5.6rem);line-height:1.02;margin:0 0 .5rem;letter-spacing:-.02em;color:#14202e;
 background:linear-gradient(100deg,#0f2a4a 0%,#233a5c 45%,#6d1a36 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hub-sub{font-size:clamp(1.2rem,2.6vw,1.6rem);color:#3b4856;margin:0 0 2.2rem;animation:slideIn .6s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes slideIn{from{opacity:0;transform:translateX(-3rem)}to{opacity:1;transform:none}}
.doctors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;perspective:1100px}
.dcard{position:relative;animation:rise .8s cubic-bezier(.16,1,.3,1) both}
.dcard.ds{animation-delay:.45s}.dcard.gb{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(2.5rem) scale(.97)}to{opacity:1;transform:none}}
.dfloat{position:relative;transform-style:preserve-3d;animation:bob 6s ease-in-out 1.3s infinite}
.dcard.gb .dfloat{animation-delay:2.4s;animation-duration:6.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.dshadow{position:absolute;left:8%;right:8%;bottom:-1.1rem;height:1.6rem;border-radius:50%;background:radial-gradient(ellipse at center,rgba(15,30,50,.32),transparent 70%);filter:blur(6px);animation:shad 6s ease-in-out 1.3s infinite}
.dcard.gb .dshadow{background:radial-gradient(ellipse at center,rgba(70,15,35,.32),transparent 70%);animation-delay:2.4s;animation-duration:6.8s}
@keyframes shad{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}
.d3d{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:16rem;padding:1.7rem 1.8rem;border-radius:20px;color:#fff;text-decoration:none;isolation:isolate;
 transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
 box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 0 0 1px rgba(255,255,255,.10) inset,0 2px 4px rgba(10,20,35,.10),0 12px 24px rgba(10,20,35,.14),0 30px 60px rgba(10,20,35,.18)}
.dcard.ds .d3d{background:linear-gradient(140deg,#13325a 0%,#0f2a4a 45%,#0e4a57 100%)}
.dcard.gb .d3d{background:linear-gradient(140deg,#86264a 0%,#6d1a36 48%,#4f1227 100%);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 0 0 1px rgba(255,255,255,.10) inset,0 2px 4px rgba(50,10,25,.12),0 12px 24px rgba(50,10,25,.16),0 30px 60px rgba(50,10,25,.20)}
.dlayer{position:absolute;inset:12px -8px -10px 8px;border-radius:20px;opacity:.28;filter:blur(1px)}
.dcard.ds .dlayer{background:#0f2a4a}.dcard.gb .dlayer{background:#6d1a36}
.dglare{z-index:0;position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(28rem 18rem at var(--gx) var(--gy),rgba(255,255,255,.22),transparent 55%);opacity:.6;transition:opacity .3s}
.d3d::after{content:"";position:absolute;right:-3.5rem;top:-3.5rem;width:12rem;height:12rem;border-radius:50%;background:rgba(255,255,255,.07)}
.dm{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:13px;font:600 1.2rem var(--serif);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);transform:translateZ(30px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.dcard.ds .dm{color:#5fd3c6}.dcard.gb .dm{color:#f6c8d4}
.dtext{transform:translateZ(24px)}
.dn{display:block;font:600 clamp(1.55rem,3vw,2rem)/1.2 var(--serif);margin-top:2.2rem}
.dr{display:block;margin-top:.35rem;color:rgba(255,255,255,.9);font-size:1rem}
.go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.3rem;font-weight:700;font-size:1rem}
.dcard.ds .go{color:#5fd3c6}.dcard.gb .go{color:#f6c8d4}
.d3d:hover{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 0 0 1px rgba(255,255,255,.12) inset,0 4px 8px rgba(10,20,35,.12),0 20px 36px rgba(10,20,35,.18),0 44px 80px rgba(10,20,35,.22)}
.d3d:hover .dglare{opacity:1}
.d3d:active{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(3px) scale(.985);transition-duration:.12s}
.d3d:focus-visible{outline:3px solid #f2a900;outline-offset:5px}
.hub-foot{border-top:1px solid rgba(27,36,48,.1);color:#3b4856;font-size:.9rem;padding:1.2rem 0;background:rgba(255,255,255,.4)}
@media(max-width:700px){.doctors{grid-template-columns:1fr;gap:1.7rem}.d3d{min-height:12rem;padding:1.4rem 1.5rem}.dn{margin-top:1.3rem}.hub-main{padding:1.6rem 0 2.6rem}.hub-sub{margin-bottom:1.6rem}.orb{filter:blur(30px)}}
@media(prefers-reduced-motion:reduce){.hub-stage,.hub-sub,.dcard,.dfloat,.dshadow,.orb{animation:none!important}.d3d{transform:none!important;transition:box-shadow .2s}}
html{overflow-x:clip}.hub-bg{contain:paint}