.clinic-page{
  min-height:100svh;
  margin:0;
  background:
    radial-gradient(circle at 14% 14%, rgba(50,168,255,.28), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(0,221,255,.18), transparent 30%),
    radial-gradient(circle at 50% 92%, rgba(36,106,255,.20), transparent 36%),
    linear-gradient(135deg, #031121 0%, #06244a 46%, #020714 100%);
  color:#f4fbff;
  overflow-x:hidden;
}

.clinic-page::before{
  content:"";
  position:fixed;
  inset:-12%;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(73,188,255,.28) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(0,221,255,.22) 0 1.4px, transparent 2.4px);
  background-size:78px 78px, 132px 132px, 190px 190px;
  background-position:0 0, 58px 36px, 120px 86px;
  opacity:.42;
  animation:clinicParticlesMove 18s linear infinite;
}

.clinic-page::after{
  content:"";
  position:fixed;
  inset:-18%;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(90,193,255,.13) 48%, transparent 56%),
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(0,162,255,.18), transparent 20%);
  opacity:.38;
  animation:clinicLightSweep 11s ease-in-out infinite alternate;
}

.clinic-shell{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 32px));
  min-height:100svh;
  display:grid;
  align-content:center;
  gap:clamp(34px, 5vw, 70px);
  margin:0 auto;
  padding:clamp(32px, 6vw, 84px) 0;
}

.clinic-header{
  display:grid;
  gap:22px;
  text-align:center;
}

.clinic-back{
  justify-self:start;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(93,199,255,.58);
  border-radius:999px;
  padding:0 20px;
  color:#f4fbff;
  background:rgba(255,255,255,.07);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}

.clinic-back:hover,
.clinic-back:focus-visible{
  transform:translateY(-2px);
  border-color:#5dc7ff;
  background:rgba(93,199,255,.18);
  outline:0;
}

.clinic-kicker{
  margin:0 0 10px;
  color:#5dc7ff;
  font-weight:900;
  letter-spacing:.32em;
  text-transform:uppercase;
}

.clinic-header h1{
  margin:0;
  color:#f4fbff;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size:clamp(48px, 8vw, 118px);
  line-height:.88;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-shadow:0 8px 34px rgba(0,0,0,.40);
}

.clinic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(18px, 3vw, 34px);
}

.clinic-card{
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
  gap:22px;
  overflow:hidden;
  border:1px solid rgba(93,199,255,.58);
  border-radius:34px;
  padding:clamp(24px, 4vw, 42px);
  color:#071525;
  text-decoration:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(237,248,255,.92)),
    #f4fbff;
  text-align:center;
  box-shadow:0 32px 86px rgba(0,0,0,.38);
  isolation:isolate;
  transform:translate3d(0, 0, 0);
  transition:transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s ease, border-color .32s ease;
  will-change:transform;
}

.clinic-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(135deg, rgba(0,92,186,.14), transparent 36%),
    linear-gradient(315deg, rgba(0,221,255,.18), transparent 34%),
    radial-gradient(circle at 50% 16%, rgba(93,199,255,.25), transparent 32%);
}

.clinic-card::after{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.78) 48%, transparent 62%);
  opacity:0;
  transform:translateX(-34%) rotate(8deg);
  transition:opacity .24s ease;
}

.clinic-card > *{
  position:relative;
  z-index:1;
}

.clinic-card:hover,
.clinic-card:focus-within{
  transform:translateY(-10px) scale(1.025);
  border-color:#95dcff;
  box-shadow:0 40px 100px rgba(0,0,0,.46);
}

.clinic-card:hover::after,
.clinic-card:focus-within::after{
  opacity:.62;
  animation:clinicCardShine .9s ease forwards;
}

.clinic-card img{
  width:min(720px, 88vw);
  height:auto;
  max-height:240px;
  display:block;
  object-fit:contain;
  border-radius:26px;
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(93,199,255,.55),
    0 22px 48px rgba(7,21,37,.18);
  transition:transform .28s cubic-bezier(.2,.9,.2,1), filter .28s ease;
}

.clinic-card:hover img,
.clinic-card:focus-within img{
  transform:scale(1.045) rotate(-.8deg);
  filter:saturate(1.08) contrast(1.04);
}

.clinic-glow{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(93,199,255,.42), transparent 68%);
  filter:blur(22px);
  opacity:.72;
  transform:scale(.96);
  transition:transform .3s ease, opacity .3s ease, filter .3s ease;
}

.clinic-card:hover .clinic-glow,
.clinic-card:focus-within .clinic-glow{
  opacity:1;
  filter:blur(28px);
  transform:scale(1.18);
}

.clinic-card-copy{
  display:grid;
  gap:8px;
}

.clinic-card-copy strong{
  color:#071525;
  font-family:Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size:clamp(34px, 4vw, 58px);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.clinic-card-copy small{
  color:#0076c9;
  font-size:15px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media (max-width:640px){
  .clinic-shell{
    width:min(100% - 24px, 1180px);
    align-content:start;
  }

  .clinic-back{
    justify-self:center;
  }

  .clinic-card{
    min-height:330px;
    border-radius:26px;
  }

  .clinic-card img{
    width:min(100%, 680px);
    max-height:180px;
  }
}

@keyframes clinicParticlesMove{
  from{
    background-position:0 0, 58px 36px, 120px 86px;
  }
  to{
    background-position:220px -180px, -160px 210px, 260px 190px;
  }
}

@keyframes clinicLightSweep{
  from{
    transform:translate3d(-3%, -2%, 0) rotate(-1deg);
    opacity:.28;
  }
  to{
    transform:translate3d(3%, 2%, 0) rotate(1deg);
    opacity:.48;
  }
}

@keyframes clinicCardShine{
  from{
    transform:translateX(-46%) rotate(8deg);
  }
  to{
    transform:translateX(46%) rotate(8deg);
  }
}

@media (prefers-reduced-motion:reduce){
  .clinic-page::before,
  .clinic-page::after,
  .clinic-card:hover::after,
  .clinic-card:focus-within::after{
    animation:none;
  }
}