:root {
  --guardian-blue: #6f93f4;
  --guardian-blue-strong: #3f67c4;
  --guardian-cyan: #69d9e9;
  --guardian-green: #38d7a1;
  --guardian-ink: #07101f;
  --guardian-surface: #0a1428;
}
.auth-sentinel-wrap {
  position: relative;
  display: grid;
  width: 340px;
  min-height: 370px;
  place-items: center;
  justify-self: center;
  perspective: 1000px;
  contain: layout paint;
}

.auth-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(117, 150, 230, .16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.auth-orbit-outer { width: 316px; height: 316px; }
.auth-orbit-inner { width: 250px; height: 250px; border-color: rgba(93, 197, 219, .10); }
.auth-orbit-outer::before,
.auth-orbit-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border-top: 1px solid rgba(133, 163, 237, .34);
  border-right-color: transparent;
  animation: guardianOrbit 18s linear infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}
.auth-orbit-inner::before {
  animation-duration: 25s;
  animation-direction: reverse;
  opacity: .68;
}

.auth-orbit-node {
  position: absolute;
  z-index: 5;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  background: rgba(5, 12, 26, .84);
  color: #94b3fa;
  font-size: 12px;
  box-shadow: 0 13px 30px rgba(1,5,15,.28), inset 0 1px 0 rgba(255,255,255,.04);
  animation: guardianNodeFloat 5.8s ease-in-out infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}
.auth-orbit-node-one { top: 47px; right: 22px; }
.auth-orbit-node-two { left: 18px; bottom: 62px; color: #67d7e8; animation-delay: -2.9s; }

.auth-sentinel {
  --look-x: 0px;
  --look-y: 0px;
  --sentinel-tilt-x: 0deg;
  --sentinel-tilt-y: 0deg;
  position: relative;
  z-index: 4;
  width: 260px;
  height: 300px;
  transform: translate3d(var(--sentinel-local-x, 0px), var(--sentinel-local-y, 0px), 0) rotateX(var(--sentinel-tilt-x)) rotateY(var(--sentinel-tilt-y));
  transform-style: preserve-3d;
  transition: transform .18s ease;
}
.auth-sentinel.is-pointer-active { will-change: transform; }
.auth-sentinel-glow {
  position: absolute;
  inset: 33px 9px 44px;
  border-radius: 48%;
  background: radial-gradient(circle at 50% 43%, rgba(93,127,215,.30), rgba(38,98,156,.10) 49%, transparent 72%);
  animation: guardianBreathe 5.4s ease-in-out infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}
.auth-sentinel-shadow {
  position: absolute;
  left: 50%;
  bottom: 39px;
  width: 130px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(70,131,195,.30), rgba(78,101,195,.10) 50%, transparent 73%);
  filter: blur(2px);
  animation: guardianShadow 3.2s ease-in-out infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}

.auth-sentinel-logo-body {
  position: absolute;
  left: 50%;
  top: 36px;
  z-index: 4;
  display: block;
  width: 194px;
  height: 170px;
  transform: translateX(-50%) translateZ(12px);
  transition: transform .28s cubic-bezier(.22,1,.36,1), filter .28s ease;
}
.auth-sentinel-logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.auth-logo-ribbon,
.auth-logo-knot { transition: filter .25s ease, opacity .25s ease; }
.auth-sentinel:hover .auth-sentinel-logo-body { transform: translateX(-50%) translateZ(18px) scale(1.025); }
.auth-sentinel:hover .auth-logo-ribbon { filter: brightness(1.06) saturate(1.08); }

.auth-sentinel-face {
  position: absolute;
  left: 50%;
  top: 73px;
  z-index: 8;
  display: block;
  width: 96px;
  height: 68px;
  transform: translateX(-50%) translateZ(30px);
  overflow: hidden;
  border: 1px solid rgba(214,231,255,.20);
  border-radius: 31px 31px 28px 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(103,137,225,.17), transparent 45%),
    linear-gradient(180deg, #0c1830 0%, #081224 100%);
  box-shadow:
    inset 0 0 22px rgba(86,174,211,.08),
    0 10px 24px rgba(1,5,15,.34),
    0 0 0 5px rgba(5,12,26,.12);
  transition: box-shadow .2s ease, transform .25s ease;
}
.auth-sentinel-face-shine {
  position: absolute;
  left: 15px;
  right: 15px;
  top: 7px;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
}
.auth-sentinel-eyes {
  position: absolute;
  left: 17px;
  right: 17px;
  top: 21px;
  display: flex;
  justify-content: space-between;
}
.auth-sentinel-eye {
  position: relative;
  display: block;
  width: 22px;
  height: 15px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 50%;
  background: linear-gradient(180deg, #f7fbff, #dcecff);
  box-shadow: 0 0 14px rgba(108,208,232,.42);
  transition: height .2s ease, transform .2s ease, opacity .2s ease;
}
.auth-sentinel-eye > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16325f;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transform: translate(calc(-50% + var(--look-x)), calc(-50% + var(--look-y)));
  transition: transform .08s linear;
}
.auth-sentinel-eye::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  background: #0b172c;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .08s ease;
}
.auth-sentinel.is-blinking .auth-sentinel-eye::after { transform: scaleY(1); }
.auth-sentinel-mouth {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 24px;
  height: 8px;
  transform: translateX(-50%);
  border-bottom: 2px solid #65d8e8;
  border-radius: 0 0 16px 16px;
  filter: drop-shadow(0 0 5px rgba(101,216,232,.38));
  transition: width .2s ease, height .2s ease, border-radius .2s ease, transform .2s ease;
}

.auth-sentinel-arm {
  position: absolute;
  z-index: 9;
  top: 151px;
  width: 76px;
  height: 24px;
  border: 1px solid rgba(230,239,255,.18);
  border-radius: 999px;
  background: linear-gradient(145deg, #7699eb 0%, #5277c9 52%, #335f9f 100%);
  box-shadow: 0 10px 21px rgba(1,5,15,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transform-style: preserve-3d;
  transition:
    left .42s cubic-bezier(.2,.85,.28,1.15),
    right .42s cubic-bezier(.2,.85,.28,1.15),
    top .42s cubic-bezier(.2,.85,.28,1.15),
    transform .42s cubic-bezier(.2,.85,.28,1.15);
}
.auth-sentinel-arm::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 34px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.02));
}
.auth-sentinel-arm-left { left: 8px; transform: rotate(13deg) translateZ(18px); transform-origin: right center; }
.auth-sentinel-arm-left::after { right: 5px; }
.auth-sentinel-arm-right { right: 8px; transform: rotate(-13deg) translateZ(18px); transform-origin: left center; }
.auth-sentinel-arm-right::after { left: 5px; transform: scaleX(-1); }
.auth-sentinel-hand {
  position: absolute;
  top: -4px;
  display: block;
  width: 39px;
  height: 32px;
  border: 1px solid rgba(239,246,255,.24);
  border-radius: 16px 16px 14px 14px;
  background: linear-gradient(145deg, #8ba9ef 0%, #5d82d4 55%, #3b67a6 100%);
  box-shadow: 0 9px 17px rgba(1,5,15,.26), inset 0 1px 0 rgba(255,255,255,.28);
}
.auth-sentinel-hand-left { left: -4px; transform: rotate(4deg); }
.auth-sentinel-hand-right { right: -4px; transform: rotate(-4deg); }
.auth-sentinel-hand i {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 99px;
  background: rgba(231,240,255,.40);
}
.auth-sentinel-hand i:first-child { top: 10px; }
.auth-sentinel-hand i:last-child { top: 17px; opacity: .72; }

.auth-sentinel-status {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(4, 10, 21, .84);
  color: rgba(223,230,243,.76);
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(1,5,15,.28), inset 0 1px 0 rgba(255,255,255,.035);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.auth-sentinel-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--auth-green, var(--guardian-green));
  box-shadow: 0 0 0 4px rgba(55,212,155,.10), 0 0 13px rgba(55,212,155,.55);
}

.auth-sentinel[data-state="username"] .auth-sentinel-arm-left { animation: guardianWave .78s ease-in-out infinite alternate; }
.auth-sentinel[data-state="username"] .auth-sentinel-mouth { width: 30px; height: 10px; }
.auth-sentinel[data-state="password"] .auth-sentinel-arm-left {
  left: 87px;
  top: 128px;
  transform: rotate(-5deg) translateZ(40px);
}
.auth-sentinel[data-state="password"] .auth-sentinel-arm-right {
  right: 87px;
  top: 128px;
  transform: rotate(5deg) translateZ(40px);
}
.auth-sentinel[data-state="password"] .auth-sentinel-eye { height: 5px; opacity: .35; transform: translateY(5px); }
.auth-sentinel[data-state="password"] .auth-sentinel-mouth { width: 18px; height: 2px; border-radius: 99px; }
.auth-sentinel[data-state="visible"] .auth-sentinel-arm-left {
  left: 87px;
  top: 128px;
  transform: rotate(-5deg) translateZ(40px);
}
.auth-sentinel[data-state="visible"] .auth-sentinel-arm-right {
  right: 1px;
  top: 151px;
  transform: rotate(-18deg) translateZ(18px);
}
.auth-sentinel[data-state="visible"] .auth-sentinel-eye-left { height: 5px; transform: translateY(5px); }
.auth-sentinel[data-state="visible"] .auth-sentinel-eye-right { transform: scale(1.08); }
.auth-sentinel[data-state="visible"] .auth-sentinel-mouth { width: 29px; transform: translateX(-50%) rotate(-2deg); }
.auth-sentinel[data-state="submitting"] .auth-sentinel-logo-body { animation: guardianSubmit .86s ease-in-out infinite alternate; }
.auth-sentinel[data-state="submitting"] .auth-sentinel-mouth { width: 32px; height: 11px; }
.auth-sentinel[data-state="submitting"] .auth-sentinel-status::before { animation: guardianStatusPulse .8s ease-in-out infinite; }

/* ------------------------------------------------------------------------
   New homepage SaaS hero
   ------------------------------------------------------------------------ */
.wc-saas-hero {
  --wc-hero-text: #f8fbff;
  --wc-hero-muted: #aebbd1;
  --wc-hero-line: rgba(167, 187, 230, .16);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 760px;
  background:
    radial-gradient(circle at 78% 18%, rgba(65, 102, 198, .24), transparent 31rem),
    radial-gradient(circle at 12% 82%, rgba(31, 162, 189, .13), transparent 30rem),
    linear-gradient(135deg, #07101f 0%, #0b1830 48%, #081120 100%);
  color: var(--wc-hero-text);
}
.wc-saas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,.38) 70%, transparent);
}
.wc-hero-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.wc-hero-glow {
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .46;
  transform: translateZ(0);
}
.wc-hero-glow-one {
  top: -300px;
  right: 12%;
  background: radial-gradient(circle, rgba(91, 126, 229, .34), rgba(91, 126, 229, .06) 56%, transparent 74%);
}
.wc-hero-glow-two {
  left: -300px;
  bottom: -330px;
  background: radial-gradient(circle, rgba(55, 196, 213, .24), rgba(55, 196, 213, .04) 58%, transparent 74%);
}

.wc-hero-slider { position: relative; min-height: 760px; touch-action: pan-y; --wc-hero-duration: 7600ms; }
.wc-hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 760px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 14px, 0);
  transition: opacity .52s ease, transform .52s cubic-bezier(.22,1,.36,1), visibility 0s linear .52s;
  contain: layout paint style;
  transform-style: preserve-3d;
}
.wc-hero-slide.is-active {
  position: relative;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.wc-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.wc-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,16,31,.96) 0%, rgba(7,16,31,.84) 42%, rgba(7,16,31,.62) 76%, rgba(7,16,31,.74) 100%),
    linear-gradient(180deg, rgba(7,16,31,.12), rgba(7,16,31,.76));
}
.wc-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .24;
  transform: scale(1.02);
}
.wc-hero-container {
  position: relative;
  z-index: 2;
  width: min(1520px, 100%);
  padding: 170px clamp(24px, 5vw, 84px) 105px;
}
.wc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .86fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
}
.wc-hero-copy { min-width: 0; max-width: 790px; }
.wc-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: #c6d5ef;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}
.wc-hero-kicker-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--guardian-green);
  box-shadow: 0 0 0 5px rgba(56, 215, 161, .10), 0 0 18px rgba(56, 215, 161, .42);
}
.wc-saas-hero h1.wc-hero-title,
.wc-saas-hero h2.wc-hero-title {
  max-width: 840px;
  margin: 0;
  color: var(--wc-hero-text);
  font-size: clamp(48px, 5.55vw, 86px);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.wc-saas-hero h1.wc-hero-title span,
.wc-saas-hero h2.wc-hero-title span {
  color: transparent;
  background: linear-gradient(105deg, #a9c2ff 0%, #79dff1 55%, #91aef7 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.wc-hero-description {
  max-width: 720px;
  margin: 25px 0 0;
  color: var(--wc-hero-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.75;
}
.wc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 33px;
}
.wc-hero-btn {
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.wc-hero-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.22) 50%, transparent 82%);
  transform: translateX(-120%);
  transition: transform .55s ease;
}
.wc-hero-btn > * { position: relative; z-index: 1; }
.wc-hero-btn:hover { transform: translateY(-2px); }
.wc-hero-btn:hover::before { transform: translateX(120%); }
.wc-hero-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #7195f2 0%, #4d74d2 52%, #355fb7 100%);
  box-shadow: 0 18px 38px rgba(49, 86, 178, .34), inset 0 1px 0 rgba(255,255,255,.25);
}
.wc-hero-btn-primary:hover { color: #fff; box-shadow: 0 22px 44px rgba(49, 86, 178, .42); }
.wc-hero-btn-secondary {
  color: #dce6f7;
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
}
.wc-hero-btn-secondary:hover { color: #fff; border-color: rgba(137,169,244,.34); background: rgba(101,132,215,.10); }
.wc-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 27px;
  color: rgba(210, 222, 242, .65);
  font-size: 12px;
  font-weight: 700;
}
.wc-hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.wc-hero-proof i { color: #7fa6f7; }

.wc-hero-visual { min-width: 0; }
.wc-guardian-console {
  position: relative;
  width: min(100%, 590px);
  margin-left: auto;
  overflow: hidden;
  border: 1px solid rgba(164, 187, 237, .17);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 34%, rgba(78, 113, 205, .16), transparent 38%),
    linear-gradient(180deg, rgba(12, 25, 49, .93), rgba(6, 14, 29, .94));
  box-shadow: 0 34px 90px rgba(1, 6, 17, .42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(16px);
  transform: perspective(1200px) rotateX(var(--wc-console-tilt-x, 0deg)) rotateY(var(--wc-console-tilt-y, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  contain: layout paint style;
}
.wc-guardian-console::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #6f93f4 32%, #69d9e9 66%, transparent);
  box-shadow: 0 0 20px rgba(105, 217, 233, .30);
}
.wc-guardian-console-head,
.wc-guardian-console-foot {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}
.wc-guardian-console-head { border-bottom: 1px solid rgba(255,255,255,.07); }
.wc-guardian-console-head > div { min-width: 0; }
.wc-guardian-console-label {
  display: block;
  margin-bottom: 4px;
  color: #7f9fe5;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.wc-guardian-console-head strong {
  display: block;
  overflow: hidden;
  color: #f7faff;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-guardian-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 11px;
  border: 1px solid rgba(56, 215, 161, .16);
  border-radius: 999px;
  background: rgba(56, 215, 161, .07);
  color: #a9efd5;
  font-size: 10px;
  font-weight: 800;
}
.wc-guardian-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--guardian-green);
  box-shadow: 0 0 0 4px rgba(56,215,161,.10), 0 0 12px rgba(56,215,161,.50);
}

.wc-guardian-workspace {
  position: relative;
  min-height: 455px;
  overflow: hidden;
  contain: layout paint;
}
.wc-guardian-grid {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 76%);
  transform: translate3d(var(--wc-grid-shift-x, 0px), var(--wc-grid-shift-y, 0px), 0) scale(1.025);
  transition: transform .18s ease-out;
}
.wc-guardian-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 12%;
  z-index: 1;
  height: 1px;
  opacity: .56;
  background: linear-gradient(90deg, transparent, rgba(105,217,233,.65), transparent);
  box-shadow: 0 0 16px rgba(105,217,233,.28);
  animation: guardianScan 7.8s ease-in-out infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 340px;
  min-height: 370px;
  --guardian-scale: .96;
  transform: translate3d(calc(-50% + var(--wc-guardian-shift-x, 0px)), calc(-50% + var(--wc-guardian-shift-y, 0px)), 0) scale(var(--guardian-scale));
  transition: transform .16s ease-out;
  will-change: auto;
}
.wc-guardian-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wc-guardian-ring-one {
  width: 330px;
  height: 330px;
  border: 1px dashed rgba(111,147,244,.15);
}
.wc-guardian-ring-two {
  width: 286px;
  height: 286px;
  border: 1px solid rgba(105,217,233,.08);
  box-shadow: inset 0 0 70px rgba(73,108,197,.06);
}
.wc-guardian-sentinel .auth-sentinel-status {
  bottom: 1px;
  padding: 9px 14px;
  border-color: rgba(126, 161, 239, .15);
  background: rgba(4, 10, 22, .90);
  color: rgba(229,237,250,.78);
}

.wc-guardian-step {
  position: absolute;
  z-index: 5;
  display: flex;
  min-width: 132px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 14px;
  background: rgba(7, 16, 32, .82);
  color: rgba(214,225,243,.66);
  box-shadow: 0 14px 30px rgba(1,6,17,.24), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(12px);
  --wc-step-active-y: 0px;
  transform: translate3d(var(--wc-step-shift-x, 0px), calc(var(--wc-step-shift-y, 0px) + var(--wc-step-active-y)), 0);
  transition: transform .22s ease-out, border-color .24s ease, background .24s ease, color .24s ease, opacity .24s ease;
}
.wc-guardian-step > i {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  place-items: center;
  border-radius: 10px;
  background: rgba(111,147,244,.10);
  color: #86a9f7;
  font-size: 12px;
}
.wc-guardian-step span { display: grid; gap: 1px; font-size: 11px; font-weight: 780; }
.wc-guardian-step small { color: rgba(160,176,204,.48); font-size: 8px; letter-spacing: .12em; }
.wc-guardian-step.is-active {
  --wc-step-active-y: -3px;
  border-color: rgba(111,147,244,.30);
  background: rgba(64, 91, 164, .16);
  color: #f3f7ff;
  box-shadow: 0 17px 34px rgba(1,6,17,.28), 0 0 0 3px rgba(111,147,244,.055);
}
.wc-guardian-step.is-active > i { background: rgba(111,147,244,.18); color: #a9c2ff; }
.wc-guardian-step-strategy { left: 20px; top: 35px; }
.wc-guardian-step-build { right: 20px; top: 35px; }
.wc-guardian-step-secure { left: 20px; bottom: 34px; }
.wc-guardian-step-launch { right: 20px; bottom: 34px; }

.wc-guardian-signal {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  opacity: .7;
}
.wc-guardian-signal-one { left: 44px; top: 50%; }
.wc-guardian-signal-two { right: 44px; top: 50%; transform: scaleX(-1); }
.wc-guardian-signal i {
  display: block;
  width: 3px;
  border-radius: 99px;
  background: #6f93f4;
  transform-origin: bottom;
  animation: guardianSignal 1.9s ease-in-out infinite;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-signal i:nth-child(1) { height: 8px; }
.wc-guardian-signal i:nth-child(2) { height: 15px; animation-delay: -.45s; }
.wc-guardian-signal i:nth-child(3) { height: 22px; animation-delay: -.9s; }

.wc-guardian-console-foot {
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.018);
}
.wc-guardian-summary { display: flex; min-width: 0; align-items: center; gap: 11px; }
.wc-guardian-summary-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(105,217,233,.12);
  border-radius: 12px;
  background: rgba(105,217,233,.07);
  color: #79dbea;
  font-size: 13px;
}
.wc-guardian-summary > span:last-child { min-width: 0; }
.wc-guardian-summary small { display: block; color: rgba(171,187,214,.52); font-size: 9px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.wc-guardian-summary strong {
  display: block;
  max-width: 275px;
  margin-top: 3px;
  overflow: hidden;
  color: #edf3ff;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-guardian-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: #a9c2ff;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease;
}
.wc-guardian-link:hover { color: #fff; transform: translateY(-1px); }

.wc-hero-controls {
  position: absolute;
  left: clamp(24px, 5vw, 84px);
  bottom: 38px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.wc-hero-control {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: rgba(230,237,249,.72);
  cursor: pointer;
  transition: transform .17s ease, color .17s ease, border-color .17s ease, background .17s ease;
}
.wc-hero-control:hover { transform: translateY(-2px); color: #fff; border-color: rgba(126,160,239,.30); background: rgba(102,134,219,.10); }
.wc-hero-pagination { display: flex; align-items: center; gap: 7px; padding: 0 3px; }
.wc-hero-dot {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.wc-hero-dot span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(210,222,241,.34);
  transition: width .2s ease, background .2s ease, box-shadow .2s ease;
}
.wc-hero-dot.is-active span {
  width: 24px;
  background: #7e9ff0;
  box-shadow: 0 0 16px rgba(126,159,240,.35);
}

.wc-hero-slide.is-active .wc-hero-kicker,
.wc-hero-slide.is-active .wc-hero-title,
.wc-hero-slide.is-active .wc-hero-description,
.wc-hero-slide.is-active .wc-hero-actions,
.wc-hero-slide.is-active .wc-hero-proof,
.wc-hero-slide.is-active .wc-guardian-console {
  animation: wcHeroReveal .62s cubic-bezier(.22,1,.36,1) both;
}
.wc-hero-slide.is-active .wc-hero-title { animation-delay: .04s; }
.wc-hero-slide.is-active .wc-hero-description { animation-delay: .09s; }
.wc-hero-slide.is-active .wc-hero-actions { animation-delay: .14s; }
.wc-hero-slide.is-active .wc-hero-proof { animation-delay: .18s; }
.wc-hero-slide.is-active .wc-guardian-console { animation-delay: .08s; }


/* ------------------------------------------------------------------------
   Sentinel hover greetings
   Each greeting uses transform-only animation and runs once per hover.
   ------------------------------------------------------------------------ */
.wc-guardian-sentinel.is-greeting .auth-sentinel-face {
  box-shadow:
    inset 0 0 24px rgba(105, 217, 233, .13),
    0 12px 28px rgba(1, 5, 15, .36),
    0 0 0 5px rgba(105, 217, 233, .07),
    0 0 24px rgba(105, 217, 233, .12);
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-mouth {
  width: 34px;
  height: 11px;
  border-bottom-width: 3px;
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-status {
  color: #dffaff;
  border-color: rgba(105, 217, 233, .24);
  background: rgba(6, 18, 34, .94);
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-arm {
  z-index: 14;
  will-change: transform;
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-hand {
  will-change: transform;
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-hand-left {
  transform-origin: 88% 50%;
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-hand-right {
  transform-origin: 12% 50%;
}
.wc-guardian-sentinel[data-greeting="wave-left"] .auth-sentinel-arm-left {
  animation: wcSentinelWaveLeft 1.75s cubic-bezier(.2, .75, .25, 1) both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-left"] .auth-sentinel-hand-left {
  animation: wcSentinelHandLeft 1.75s ease-in-out both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-right"] .auth-sentinel-arm-right {
  animation: wcSentinelWaveRight 1.75s cubic-bezier(.2, .75, .25, 1) both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-right"] .auth-sentinel-hand-right {
  animation: wcSentinelHandRight 1.75s ease-in-out both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-both"] .auth-sentinel-arm-left {
  animation: wcSentinelWelcomeLeft 1.95s cubic-bezier(.2, .75, .25, 1) both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-both"] .auth-sentinel-arm-right {
  animation: wcSentinelWelcomeRight 1.95s cubic-bezier(.2, .75, .25, 1) both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-both"] .auth-sentinel-hand-left {
  animation: wcSentinelWelcomeHandLeft 1.95s ease-in-out both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel[data-greeting="wave-both"] .auth-sentinel-hand-right {
  animation: wcSentinelWelcomeHandRight 1.95s ease-in-out both;
  animation-play-state: var(--sentinel-motion-state, running);
}
.wc-guardian-sentinel.is-greeting .auth-sentinel-logo-body {
  animation: wcSentinelGreetingBob 1.55s ease-in-out both;
  animation-play-state: var(--sentinel-motion-state, running);
}

/* ------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------ */
@keyframes guardianOrbit { to { transform: rotate(360deg); } }
@keyframes guardianNodeFloat { 50% { transform: translate3d(0,-7px,0) rotate(2deg); } }
@keyframes guardianBreathe { 50% { transform: scale(1.06); opacity: .76; } }
@keyframes guardianShadow { 50% { transform: translateX(-50%) scaleX(1.14); opacity: .68; } }
@keyframes guardianWave { to { transform: rotate(36deg) translate3d(-2px,-6px,18px); } }
@keyframes wcSentinelWaveLeft {
  0%, 8%, 100% { transform: rotate(13deg) translate3d(0, 0, 18px); }
  18% { transform: rotate(62deg) translate3d(5px, -2px, 28px); }
  32% { transform: rotate(44deg) translate3d(3px, -1px, 27px); }
  46% { transform: rotate(66deg) translate3d(6px, -3px, 30px); }
  60% { transform: rotate(42deg) translate3d(3px, -1px, 27px); }
  74% { transform: rotate(63deg) translate3d(5px, -2px, 29px); }
  88% { transform: rotate(30deg) translate3d(1px, 0, 22px); }
}
@keyframes wcSentinelWaveRight {
  0%, 8%, 100% { transform: rotate(-13deg) translate3d(0, 0, 18px); }
  18% { transform: rotate(-62deg) translate3d(-5px, -2px, 28px); }
  32% { transform: rotate(-44deg) translate3d(-3px, -1px, 27px); }
  46% { transform: rotate(-66deg) translate3d(-6px, -3px, 30px); }
  60% { transform: rotate(-42deg) translate3d(-3px, -1px, 27px); }
  74% { transform: rotate(-63deg) translate3d(-5px, -2px, 29px); }
  88% { transform: rotate(-30deg) translate3d(-1px, 0, 22px); }
}
@keyframes wcSentinelHandLeft {
  0%, 14%, 100% { transform: rotate(4deg); }
  24% { transform: rotate(-18deg); }
  36% { transform: rotate(18deg); }
  48% { transform: rotate(-16deg); }
  60% { transform: rotate(16deg); }
  72% { transform: rotate(-12deg); }
  84% { transform: rotate(10deg); }
}
@keyframes wcSentinelHandRight {
  0%, 14%, 100% { transform: rotate(-4deg); }
  24% { transform: rotate(18deg); }
  36% { transform: rotate(-18deg); }
  48% { transform: rotate(16deg); }
  60% { transform: rotate(-16deg); }
  72% { transform: rotate(12deg); }
  84% { transform: rotate(-10deg); }
}
@keyframes wcSentinelWelcomeLeft {
  0%, 100% { transform: rotate(13deg) translate3d(0, 0, 18px); }
  20% { transform: rotate(48deg) translate3d(5px, -2px, 27px); }
  42% { transform: rotate(35deg) translate3d(3px, 0, 25px); }
  64% { transform: rotate(52deg) translate3d(6px, -3px, 29px); }
  82% { transform: rotate(29deg) translate3d(2px, 0, 23px); }
}
@keyframes wcSentinelWelcomeRight {
  0%, 100% { transform: rotate(-13deg) translate3d(0, 0, 18px); }
  20% { transform: rotate(-48deg) translate3d(-5px, -2px, 27px); }
  42% { transform: rotate(-35deg) translate3d(-3px, 0, 25px); }
  64% { transform: rotate(-52deg) translate3d(-6px, -3px, 29px); }
  82% { transform: rotate(-29deg) translate3d(-2px, 0, 23px); }
}
@keyframes wcSentinelWelcomeHandLeft {
  0%, 100% { transform: rotate(4deg); }
  24% { transform: rotate(-10deg) scale(1.04); }
  48% { transform: rotate(12deg) scale(1.02); }
  72% { transform: rotate(-7deg) scale(1.04); }
}
@keyframes wcSentinelWelcomeHandRight {
  0%, 100% { transform: rotate(-4deg); }
  24% { transform: rotate(10deg) scale(1.04); }
  48% { transform: rotate(-12deg) scale(1.02); }
  72% { transform: rotate(7deg) scale(1.04); }
}
@keyframes wcSentinelGreetingBob {
  0%, 100% { transform: translateX(-50%) translateZ(12px); }
  32% { transform: translateX(-50%) translate3d(0, -5px, 18px) scale(1.018); }
  68% { transform: translateX(-50%) translate3d(0, -2px, 16px) scale(1.008); }
}
@keyframes guardianSubmit { to { transform: translateX(-50%) translateY(-6px) translateZ(16px); } }
@keyframes guardianStatusPulse { 50% { transform: scale(1.34); opacity: .62; } }
@keyframes guardianScan {
  0%, 100% { transform: translateY(0); opacity: .12; }
  50% { transform: translateY(330px); opacity: .64; }
}
@keyframes guardianSignal { 0%,100% { transform: scaleY(.55); opacity: .38; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes wcHeroReveal { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------------
   Responsive hero
   ------------------------------------------------------------------------ */
@media (max-width: 1320px) {
  .wc-hero-container { padding-top: 155px; }
  .wc-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr); gap: 48px; }
  .wc-guardian-console { max-width: 545px; }
  .wc-guardian-workspace { min-height: 430px; }
  .wc-guardian-sentinel-wrap { --guardian-scale: .88; }
  .wc-guardian-step { min-width: 122px; }
}

@media (max-width: 1100px) {
  .wc-saas-hero,
  .wc-hero-slider,
  .wc-hero-slide { min-height: auto; }
  .wc-hero-container { padding-top: 145px; padding-bottom: 110px; }
  .wc-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .wc-hero-copy { max-width: 880px; text-align: center; margin: 0 auto; }
  .wc-hero-kicker,
  .wc-hero-actions,
  .wc-hero-proof { justify-content: center; }
  .wc-hero-description { margin-left: auto; margin-right: auto; }
  .wc-guardian-console { width: min(640px, 100%); margin: 0 auto; }
}

@media (max-width: 680px) {
  .wc-hero-container { padding: 118px 16px 94px; }
  .wc-hero-grid { gap: 34px; }
  .wc-saas-hero h1.wc-hero-title,
.wc-saas-hero h2.wc-hero-title { font-size: clamp(39px, 12vw, 58px); line-height: 1.02; }
  .wc-hero-description { font-size: 15px; line-height: 1.68; }
  .wc-hero-actions { display: grid; grid-template-columns: 1fr; }
  .wc-hero-btn { width: 100%; }
  .wc-hero-proof { gap: 9px 14px; font-size: 10px; }
  .wc-guardian-console { border-radius: 22px; }
  .wc-guardian-console-head,
  .wc-guardian-console-foot { padding: 16px; }
  .wc-guardian-console-head strong { font-size: 12px; }
  .wc-guardian-workspace { min-height: 390px; }
  .wc-guardian-sentinel-wrap { top: 48%; --guardian-scale: .78; }
  .wc-guardian-step { min-width: auto; padding: 8px; border-radius: 12px; }
  .wc-guardian-step span { display: none; }
  .wc-guardian-step-strategy { left: 12px; top: 24px; }
  .wc-guardian-step-build { right: 12px; top: 24px; }
  .wc-guardian-step-secure { left: 12px; bottom: 24px; }
  .wc-guardian-step-launch { right: 12px; bottom: 24px; }
  .wc-guardian-signal { display: none; }
  .wc-guardian-summary strong { max-width: 160px; }
  .wc-guardian-link { font-size: 0; }
  .wc-guardian-link i { font-size: 13px; }
}

@media (max-width: 420px) {
  .wc-hero-kicker { font-size: 10px; letter-spacing: .10em; }
  .wc-hero-proof span:last-child { display: none; }
  .wc-guardian-workspace { min-height: 350px; }
  .wc-guardian-sentinel-wrap { --guardian-scale: .68; }
  .wc-guardian-console-foot { gap: 10px; }
  .wc-guardian-summary strong { max-width: 130px; }
}

/* ------------------------------------------------------------------------
   Performance and accessibility
   ------------------------------------------------------------------------ */
.wc-saas-hero[data-motion="paused"],
.auth-page.auth-motion-paused { --sentinel-motion-state: paused; }

@media (update: slow), (prefers-reduced-motion: reduce) {
  .auth-orbit-outer::before,
  .auth-orbit-inner::before,
  .auth-orbit-node,
  .auth-sentinel-glow,
  .auth-sentinel-shadow,
  .wc-guardian-scan,
  .wc-guardian-signal i,
  .wc-guardian-sentinel.is-greeting .auth-sentinel-logo-body,
  .wc-guardian-sentinel.is-greeting .auth-sentinel-arm,
  .wc-guardian-sentinel.is-greeting .auth-sentinel-hand,
  .wc-hero-slide.is-active .wc-hero-kicker,
  .wc-hero-slide.is-active .wc-hero-title,
  .wc-hero-slide.is-active .wc-hero-description,
  .wc-hero-slide.is-active .wc-hero-actions,
  .wc-hero-slide.is-active .wc-hero-proof,
  .wc-hero-slide.is-active .wc-guardian-console { animation: none !important; }

  .auth-sentinel,
  .auth-sentinel-logo-body,
  .auth-sentinel-face,
  .auth-sentinel-eye,
  .auth-sentinel-eye > span,
  .auth-sentinel-mouth,
  .auth-sentinel-arm,
  .wc-hero-slide,
  .wc-guardian-step { transition: none !important; }
}

/* ========================================================================
   Optimised slider controls, expanded Sentinel interaction and lite profile
   ======================================================================== */
.wc-hero-status {
  display: inline-flex;
  min-width: 116px;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
}
.wc-hero-count {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 4px;
  color: rgba(210, 222, 241, .48);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.wc-hero-count strong {
  color: #f4f7ff;
  font-size: 12px;
}
.wc-hero-progress {
  position: relative;
  display: block;
  width: 58px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(210, 222, 241, .15);
}
.wc-hero-progress i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #7296f2, #72d9e8);
  box-shadow: 0 0 12px rgba(114, 150, 242, .38);
  transform: scaleX(0);
  transform-origin: left center;
}
.wc-hero-slider.is-autoplaying .wc-hero-progress i {
  animation: wcHeroProgress var(--wc-hero-duration) linear forwards;
  animation-play-state: running;
}
.wc-hero-slider.is-slider-paused .wc-hero-progress i {
  animation-play-state: paused;
}
.wc-hero-toggle[aria-pressed="true"] {
  color: #a9c2ff;
  border-color: rgba(126, 160, 239, .28);
  background: rgba(102, 134, 219, .10);
}

/* The active slide is the full motion zone. Only compositor-friendly
   transform variables are updated while the pointer is moving. */
.wc-hero-slide.is-active[data-wc-sentinel-zone] {
  cursor: default;
}
.wc-guardian-console,
.wc-guardian-sentinel-wrap,
.wc-guardian-grid,
.wc-guardian-step,
.auth-sentinel {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.auth-sentinel.is-pointer-active,
.wc-guardian-console.is-pointer-active,
.wc-guardian-console.is-pointer-active .wc-guardian-sentinel-wrap {
  will-change: transform;
}
.wc-guardian-ring-one {
  transform: translate3d(calc(-50% + var(--wc-grid-shift-x, 0px)), calc(-50% + var(--wc-grid-shift-y, 0px)), 0) rotate(var(--wc-ring-rotate, 0deg));
  transition: transform .22s ease-out;
}
.wc-guardian-ring-two {
  transform: translate3d(calc(-50% - var(--wc-grid-shift-x, 0px)), calc(-50% - var(--wc-grid-shift-y, 0px)), 0);
  transition: transform .22s ease-out;
}

/* Lower-power profile: keep the premium look while removing the most
   expensive paint effects and slowing background motion. */
.wc-motion-lite .wc-guardian-console,
.wc-motion-lite .wc-guardian-step,
.wc-motion-lite .wc-hero-btn-secondary {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.wc-motion-lite .wc-guardian-console {
  box-shadow: 0 24px 58px rgba(1, 6, 17, .34), inset 0 1px 0 rgba(255,255,255,.04);
}
.wc-motion-lite .wc-guardian-scan,
.wc-motion-lite .wc-guardian-signal {
  opacity: .38;
}
.wc-motion-lite .wc-hero-noise {
  display: none;
}
.wc-motion-lite .auth-orbit-inner::before,
.wc-motion-lite .auth-orbit-outer::before {
  animation-duration: 32s;
}

.wc-motion-off .wc-hero-progress,
.wc-motion-off .wc-hero-toggle {
  display: none;
}
.wc-motion-off .wc-guardian-console,
.wc-motion-off .wc-guardian-sentinel-wrap,
.wc-motion-off .wc-guardian-grid,
.wc-motion-off .wc-guardian-step,
.wc-motion-off .auth-sentinel {
  transform: none;
  transition: none;
}
.wc-motion-off .wc-guardian-sentinel-wrap {
  transform: translate(-50%, -50%) scale(var(--guardian-scale));
}

@supports not (backdrop-filter: blur(2px)) {
  .wc-guardian-console,
  .wc-guardian-step,
  .wc-hero-btn-secondary {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@keyframes wcHeroProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .wc-hero-status { min-width: 104px; }
}

@media (max-width: 680px) {
  .wc-hero-controls {
    width: calc(100% - 32px);
    justify-content: center;
    gap: 5px;
  }
  .wc-hero-status { min-width: 92px; gap: 7px; }
  .wc-hero-progress { width: 42px; }
  .wc-hero-pagination { display: none; }
  .wc-hero-control { width: 36px; height: 36px; }
}

@media (max-width: 420px) {
  .wc-hero-status { min-width: 82px; }
  .wc-hero-progress { width: 34px; }
}

/* Legacy controls are intentionally hidden. Navigation is now autoplay,
   drag/swipe and focused keyboard arrows. */
.wc-hero-controls { display: none !important; }