/* One large, static hygiene card in the same airy carousel language. */
.hygiene-carousel-screen {
  color: #51476f;
  background:
    radial-gradient(ellipse at 13% 16%, rgba(255,255,255,.9) 0 8%, transparent 27%),
    radial-gradient(ellipse at 86% 20%, rgba(255,255,255,.75) 0 7%, transparent 26%),
    radial-gradient(ellipse at 82% 88%, rgba(255,255,255,.72) 0 8%, transparent 28%),
    linear-gradient(145deg, #dff5ff 0%, #f5f2ff 47%, #fff2f4 72%, #eaf9f1 100%);
}
.hygiene-carousel-screen::before,
.hygiene-carousel-screen::after {
  z-index: 0;
  width: min(42vw, 430px);
  height: clamp(72px, 14vh, 148px);
  aspect-ratio: auto;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 24% 65%, rgba(255,255,255,.72) 0 26%, transparent 27%),
    radial-gradient(ellipse at 43% 37%, rgba(255,255,255,.82) 0 31%, transparent 32%),
    radial-gradient(ellipse at 63% 57%, rgba(255,255,255,.74) 0 33%, transparent 34%),
    radial-gradient(ellipse at 78% 70%, rgba(255,255,255,.6) 0 24%, transparent 25%);
  filter: blur(1px);
  opacity: .7;
  pointer-events: none;
}
.hygiene-carousel-screen::before {
  top: 18%;
  left: -7%;
  animation: hygiene-cloud-drift 19s ease-in-out infinite alternate;
}
.hygiene-carousel-screen::after {
  right: -8%;
  bottom: 16%;
  width: min(48vw, 500px);
  animation: hygiene-cloud-drift 24s ease-in-out -5s infinite alternate-reverse;
}
@keyframes hygiene-cloud-drift {
  from { transform: translate3d(-8px, 0, 0); }
  to { transform: translate3d(18px, 7px, 0); }
}
.hygiene-back { z-index: 9; }
.hygiene-heading {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  left: 50%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(780px, calc(100vw - 118px));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.hygiene-kicker {
  margin: 0;
  color: #688f89;
  font-size: clamp(10px, 1.4vh, 15px);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
}
.hygiene-heading h1 {
  margin: 0;
  color: #5d5687;
  font-size: clamp(24px, 4.4vh, 42px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 5px 13px rgba(65,63,111,.12);
}
.hygiene-intro {
  margin: 2px 0 0;
  padding: 3px 13px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #5c617d;
  background: rgba(255,255,255,.72);
  font-size: clamp(12px, 1.7vh, 17px);
  font-weight: 800;
  line-height: 1.1;
}
.hygiene-heading > .hygiene-kicker,
.hygiene-heading > #hygiene-title,
.hygiene-heading > .hygiene-intro {
  pointer-events: auto;
  cursor: pointer;
}
.hygiene-stage {
  position: absolute;
  inset: clamp(104px, 16vh, 148px) 0 clamp(105px, 16vh, 138px);
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.hygiene-card {
  position: relative;
  width: min(860px, calc(100vw - 44px));
  height: min(560px, calc(100% - 12px));
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vh, 16px);
  overflow: hidden;
  padding: clamp(22px, 4vw, 50px);
  border: clamp(6px, .8vw, 9px) solid rgba(255,255,255,.98);
  border-radius: clamp(30px, 5vw, 52px);
  color: #51476f;
  background:
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.98), transparent 27%),
    linear-gradient(148deg, rgba(255,255,255,.97), #fff 47%, color-mix(in srgb, var(--hygiene-accent, #82cfe1), white 91%));
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 13px 0 rgba(116,139,181,.13), 0 26px 46px rgba(83,91,137,.17), inset 0 0 0 2px rgba(197,216,243,.24);
  text-align: center;
  isolation: isolate;
}
.hygiene-card::before,
.hygiene-card::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}
.hygiene-card::before {
  top: -78px;
  left: -68px;
  width: clamp(170px, 28vw, 300px);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--hygiene-accent, #82cfe1), white 76%), transparent 70%);
  opacity: .75;
}
.hygiene-card::after {
  right: -72px;
  bottom: -90px;
  width: clamp(190px, 34vw, 350px);
  aspect-ratio: 1;
  border: 2px solid rgba(175,199,228,.2);
  background: rgba(255,255,255,.3);
}
.hygiene-card-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(74px, 13vh, 124px);
  aspect-ratio: 1;
  border: 3px solid rgba(255,255,255,.98);
  border-radius: 36%;
  color: #5c6587;
  background: linear-gradient(145deg, rgba(255,255,255,.96), color-mix(in srgb, var(--hygiene-accent, #82cfe1), white 77%));
  box-shadow: inset 0 0 0 2px rgba(177,198,227,.2), 0 8px 17px rgba(91,108,148,.12);
  font-size: clamp(44px, 8vh, 76px);
  line-height: 1;
  filter: drop-shadow(0 4px 3px rgba(75,81,121,.12));
}
.hygiene-card-kicker {
  margin: 0;
  color: #8490a9;
  font-size: clamp(10px, 1.45vh, 15px);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
}
.hygiene-card-title {
  position: relative;
  max-width: 100%;
  margin: 0;
  color: #586285;
  font-size: clamp(26px, 4vw, 43px);
  font-weight: 900;
  line-height: 1.03;
  text-shadow: 0 2px 0 #fff;
  overflow-wrap: anywhere;
}
.hygiene-card-description {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin: 0;
  color: #626c86;
  font-size: clamp(16px, 2.25vw, 24px);
  font-weight: 700;
  line-height: 1.34;
  text-wrap: pretty;
}
.hygiene-card-kicker,
.hygiene-card-title,
.hygiene-card-description { cursor: pointer; }
.hygiene-karaoke-text .karaoke-token {
  display: inline;
  border-radius: .3em;
  transition: color .12s ease, background-color .12s ease, box-shadow .12s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hygiene-karaoke-text .karaoke-token.is-karaoke-active {
  padding: 0 .08em;
  color: #55410a;
  background: #ffe596;
  box-shadow: 0 2px 0 #ecc35b;
}
.hygiene-card-sparkle {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(12px, 2.5vh, 24px);
  color: color-mix(in srgb, var(--hygiene-accent, #82cfe1), white 20%);
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
}
.hygiene-card.is-entering-from-next { animation: hygiene-card-from-next .42s cubic-bezier(.2,.82,.19,1) both; }
.hygiene-card.is-entering-from-previous { animation: hygiene-card-from-previous .42s cubic-bezier(.2,.82,.19,1) both; }
@keyframes hygiene-card-from-next {
  from { opacity: .45; transform: translateX(32px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes hygiene-card-from-previous {
  from { opacity: .45; transform: translateX(-32px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.hygiene-carousel-navigation {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.hygiene-carousel-screen .hygiene-arrow { pointer-events: auto; }
.hygiene-progress {
  position: absolute;
  bottom: max(13px, calc(env(safe-area-inset-bottom) + 7px));
  left: 50%;
  z-index: 5;
  min-width: 78px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 15px;
  border: 2px solid rgba(255,255,255,.97);
  border-radius: 999px;
  color: #637391;
  background: rgba(255,255,255,.82);
  box-shadow: 0 4px 12px rgba(90,112,151,.12);
  font-size: clamp(15px, 2vh, 19px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.hygiene-carousel-screen .hygiene-back {
  border-color: rgba(255,255,255,.98);
  color: #647b9c;
  background: linear-gradient(145deg, #eef9ff, #d5eafa);
  box-shadow: 0 5px 0 #b6d2e9, 0 8px 15px rgba(91,122,163,.14);
}
.hygiene-carousel-screen .hygiene-back:focus-visible,
.hygiene-carousel-screen .hygiene-arrow:focus-visible {
  outline: 4px solid #f4cf77;
  outline-offset: 4px;
}
@media (max-width: 560px) {
  .hygiene-heading { top: max(14px, calc(env(safe-area-inset-top) + 6px)); width: calc(100vw - 110px); gap: 1px; }
  .hygiene-heading h1 { font-size: clamp(20px, 5.5vw, 31px); }
  .hygiene-intro { padding: 2px 9px; font-size: clamp(11px, 3vw, 14px); }
  .hygiene-stage { inset: 96px 0 98px; }
  .hygiene-card { width: calc(100vw - 28px); height: calc(100% - 8px); gap: clamp(6px, 1.25vh, 11px); padding: clamp(17px, 5vw, 25px); border-radius: 29px; }
  .hygiene-card-icon { width: clamp(64px, 12vh, 90px); font-size: clamp(39px, 7vh, 57px); }
  .hygiene-card-title { font-size: clamp(22px, 6vw, 32px); }
  .hygiene-card-description { font-size: clamp(15px, 4.1vw, 19px); line-height: 1.28; }
  .hygiene-progress { min-width: 67px; padding: 8px 11px; font-size: 14px; }
}
@media (max-height: 560px) {
  .hygiene-heading { top: max(8px, calc(env(safe-area-inset-top) + 4px)); gap: 0; }
  .hygiene-kicker { display: none; }
  .hygiene-heading h1 { font-size: clamp(21px, 5.3vh, 31px); }
  .hygiene-intro { margin-top: 1px; padding-block: 2px; font-size: clamp(11px, 2.7vh, 14px); }
  .hygiene-stage { inset: 67px 0 79px; }
  .hygiene-card { width: min(760px, 78vw); height: calc(100% - 6px); flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding: 11px 22px; border-width: 4px; border-radius: 24px; }
  .hygiene-card-icon { width: clamp(44px, 10vh, 66px); font-size: clamp(29px, 6vh, 43px); }
  .hygiene-card-kicker { flex: 1 1 calc(100% - 90px); text-align: left; }
  .hygiene-card-title { flex: 1 1 calc(100% - 90px); font-size: clamp(20px, 4.2vh, 29px); text-align: left; }
  .hygiene-card-description { flex: 1 1 100%; max-width: 100%; font-size: clamp(14px, 2.7vh, 19px); line-height: 1.22; }
  .hygiene-card-sparkle { right: 10px; bottom: 7px; font-size: 22px; }
  .hygiene-progress { min-width: 66px; padding: 7px 10px; font-size: 13px; }
}
@media (max-width: 560px) and (max-height: 560px) {
  .hygiene-heading { width: calc(100vw - 100px); }
  .hygiene-stage { inset: 58px 0 66px; }
  .hygiene-card { width: calc(100vw - 20px); padding: 7px 14px; gap: 3px 9px; }
  .hygiene-card-icon { width: clamp(38px, 9vh, 53px); font-size: clamp(25px, 5.5vh, 35px); }
  .hygiene-card-kicker { font-size: 9px; }
  .hygiene-card-title { font-size: clamp(17px, 4vh, 23px); }
  .hygiene-card-description { font-size: clamp(12px, 2.8vh, 15px); line-height: 1.17; }
  .hygiene-progress { min-width: 59px; padding: 6px 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hygiene-carousel-screen::before,
  .hygiene-carousel-screen::after { animation: none; }
  .hygiene-card.is-entering-from-next,
  .hygiene-card.is-entering-from-previous { animation: none; }
  .hygiene-karaoke-text .karaoke-token { transition: none; }
}

/* Every hygiene card shares KRETANJE's continuous perspective-ring motion. */
.hygiene-stage {
  display: block;
  perspective: 1450px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  touch-action: none;
  cursor: grab;
}
.hygiene-stage.is-dragging { cursor: grabbing; }
.hygiene-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .48s cubic-bezier(.2,.82,.19,1), opacity .38s ease, filter .25s ease, box-shadow .25s ease;
  will-change: transform, opacity;
  touch-action: none;
}
.hygiene-stage.is-dragging .hygiene-card { transition: none; }
.hygiene-card[aria-hidden="true"] { pointer-events: none; }
.hygiene-card.is-centered { filter: saturate(1.02); }
@media (prefers-reduced-motion: reduce) {
  .hygiene-stage .hygiene-card { transition-duration: .01ms !important; }
}