.sga-wnw-section,
.sga-wnw-section * {
  box-sizing: border-box;
}

.sga-wnw-section {
  --sga-wnw-ink: #101114;
  --sga-wnw-muted: #666b73;
  --sga-wnw-soft: #f4f6fa;
  --sga-wnw-white: #ffffff;
  --sga-wnw-line: rgba(21, 25, 32, 0.09);
  --sga-wnw-green: #42b86b;
  --sga-wnw-deep-green: #143f2c;
  --sga-wnw-gold: #c8a66b;
  --sga-wnw-blue: #5b78ff;

  width: 100%;
  padding: 70px 24px;
  overflow: hidden;
  background: transparent;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.sga-wnw-shell {
  width: min(1180px, 100%);
  min-height: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 30px;
  overflow: hidden;
  background: transparent;
  box-shadow:
    0 34px 90px rgba(62, 68, 83, 0.12),
    0 10px 34px rgba(62, 68, 83, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

/* LEFT VISUAL PANEL */

.sga-wnw-visual-panel {
  min-width: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      circle at 22% 22%,
      rgba(207, 221, 243, 0.72),
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 68%,
      rgba(231, 221, 215, 0.52),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(246, 249, 253, 0.78),
      rgba(239, 241, 247, 0.54)
    );
  border-right: 1px solid rgba(255, 255, 255, 0.62);
}

.sga-wnw-visual-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 25px;
}

.sga-wnw-visual-line {
  width: 38px;
  height: 1px;
  background: rgba(18, 19, 17, 0.17);
}

.sga-wnw-visual-label {
  color: #55584f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sga-wnw-scene {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 480px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(206, 221, 244, 0.62),
      transparent 39%
    ),
    radial-gradient(
      circle at 84% 34%,
      rgba(231, 218, 211, 0.56),
      transparent 42%
    ),
    radial-gradient(
      circle at 78% 90%,
      rgba(229, 221, 245, 0.48),
      transparent 44%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.76),
      rgba(239, 242, 247, 0.68)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 20px 50px rgba(71, 79, 96, 0.08);
  isolation: isolate;
}

.sga-wnw-scene-glow {
  position: absolute;
  z-index: -1;
  top: 13%;
  left: 50%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(237, 240, 247, 0.64) 46%,
      transparent 72%
    );
  filter: blur(18px);
  transform: translateX(-50%);
  animation: sga-wnw-glow-cycle 12s ease-in-out infinite;
}

.sga-wnw-scene-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(20, 30, 22, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 30, 22, 0.045) 1px, transparent 1px);
  background-size: 27px 27px;
  mask-image: linear-gradient(to bottom, transparent, black 35%, black);
}

/* WEBSITE LAUNCH */

.sga-wnw-launch-signal {
  position: absolute;
  z-index: 7;
  top: 40px;
  left: 50%;
  width: 170px;
  height: 130px;
  transform: translateX(-50%);
  opacity: 0;
  animation: sga-wnw-launch-cycle 12s ease-in-out infinite;
}

.sga-wnw-launch-orbit {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(65, 184, 107, 0.28);
  border-radius: 50%;
  transform: translateX(-50%);
}

.sga-wnw-launch-orbit::before,
.sga-wnw-launch-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(65, 184, 107, 0.16);
}

.sga-wnw-launch-orbit::before {
  inset: -12px;
}

.sga-wnw-launch-orbit::after {
  inset: 13px;
}

.sga-wnw-launch-browser {
  position: absolute;
  top: 21px;
  left: 50%;
  width: 112px;
  height: 76px;
  border: 1px solid rgba(18, 19, 17, 0.1);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 30px rgba(33, 46, 36, 0.13);
  transform: translateX(-50%);
}

.sga-wnw-browser-bar {
  height: 17px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  border-bottom: 1px solid rgba(18, 19, 17, 0.07);
  background: #f6f6f2;
}

.sga-wnw-browser-bar span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8cac3;
}

.sga-wnw-browser-body {
  padding: 10px;
}

.sga-wnw-browser-logo {
  width: 18px;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 20px;
  background: var(--sga-wnw-deep-green);
}

.sga-wnw-browser-copy {
  display: grid;
  gap: 4px;
}

.sga-wnw-browser-copy span {
  display: block;
  height: 4px;
  border-radius: 10px;
  background: #d8dad4;
}

.sga-wnw-browser-copy span:first-child {
  width: 72%;
}

.sga-wnw-browser-copy span:last-child {
  width: 48%;
}

.sga-wnw-browser-action {
  width: 31px;
  height: 10px;
  margin-top: 9px;
  border-radius: 20px;
  background: var(--sga-wnw-green);
}

.sga-wnw-live-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid rgba(65, 184, 107, 0.25);
  border-radius: 50px;
  color: #1d5937;
  background: rgba(239, 255, 245, 0.96);
  box-shadow: 0 8px 20px rgba(22, 75, 44, 0.1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.sga-wnw-live-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sga-wnw-green);
  box-shadow: 0 0 0 4px rgba(65, 184, 107, 0.13);
}

/* SEARCH AND MESSAGE */

.sga-wnw-search-card,
.sga-wnw-message-card {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  border: 1px solid rgba(18, 19, 17, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 35px rgba(26, 34, 27, 0.11);
  backdrop-filter: blur(12px);
}

.sga-wnw-search-card {
  top: 56px;
  left: 24px;
  width: 205px;
  padding: 10px 12px;
  gap: 10px;
  border-radius: 13px;
  animation: sga-wnw-search-cycle 12s ease-in-out infinite;
}

.sga-wnw-search-icon {
  position: relative;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid rgba(18, 19, 17, 0.13);
  border-radius: 50%;
}

.sga-wnw-search-icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  width: 7px;
  height: 7px;
  border: 1.5px solid #55594f;
  border-radius: 50%;
}

.sga-wnw-search-icon::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: 6px;
  height: 1.5px;
  border-radius: 10px;
  background: #55594f;
  transform: rotate(45deg);
}

.sga-wnw-search-copy,
.sga-wnw-message-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sga-wnw-search-copy strong,
.sga-wnw-message-copy strong {
  overflow: hidden;
  color: #1b1d19;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sga-wnw-search-copy span,
.sga-wnw-message-copy span {
  color: #73766f;
  font-size: 8px;
  line-height: 1.4;
}

.sga-wnw-message-card {
  top: 142px;
  right: 22px;
  width: 204px;
  padding: 11px;
  gap: 9px;
  border-radius: 14px;
  opacity: 0;
  animation: sga-wnw-message-cycle 12s ease-in-out infinite;
}

.sga-wnw-message-avatar {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #264f3a, #52b879);
  font-size: 10px;
  font-weight: 800;
}

/* SHOP */

.sga-wnw-shop-area {
  position: absolute;
  z-index: 3;
  bottom: 57px;
  left: 50%;
  width: 300px;
  height: 220px;
  transform: translateX(-50%);
}

.sga-wnw-shop-sign {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 50%;
  width: 118px;
  height: 29px;
  overflow: hidden;
  border: 1px solid rgba(18, 19, 17, 0.12);
  border-radius: 30px;
  background: #e7e7e2;
  box-shadow: 0 10px 22px rgba(21, 23, 20, 0.08);
  transform: translateX(-50%);
  animation: sga-wnw-shop-sign-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-sign span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sga-wnw-shop-sign-before {
  color: #74766f;
  animation: sga-wnw-before-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-sign-after {
  color: #fff;
  opacity: 0;
  animation: sga-wnw-after-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-building {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 260px;
  height: 167px;
  border: 1px solid rgba(25, 28, 24, 0.13);
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(145deg, #c8c9c4, #e0e0da);
  box-shadow: 0 22px 35px rgba(29, 34, 29, 0.12);
  transform: translateX(-50%);
  animation: sga-wnw-shop-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-roof {
  position: absolute;
  top: -15px;
  left: -12px;
  width: calc(100% + 24px);
  height: 23px;
  border: 1px solid rgba(24, 27, 23, 0.13);
  border-radius: 6px 6px 3px 3px;
  background: #b4b5b0;
  box-shadow: 0 7px 14px rgba(24, 27, 23, 0.08);
  animation: sga-wnw-roof-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-name {
  position: absolute;
  top: 23px;
  left: 50%;
  width: 195px;
  height: 27px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(88, 90, 85, 0.18);
  transform: translateX(-50%);
  animation: sga-wnw-name-board-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-name span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.sga-wnw-shop-name-before {
  color: #777972;
  animation: sga-wnw-before-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-name-after {
  color: #fff;
  opacity: 0;
  animation: sga-wnw-after-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-window {
  position: absolute;
  bottom: 20px;
  left: 22px;
  width: 145px;
  height: 82px;
  overflow: hidden;
  border: 5px solid rgba(99, 101, 95, 0.26);
  background: #b9bfbd;
  animation: sga-wnw-window-cycle 12s ease-in-out infinite;
}

.sga-wnw-window-reflection {
  position: absolute;
  top: -30px;
  left: 40px;
  width: 25px;
  height: 150px;
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(25deg);
}

.sga-wnw-window-product {
  position: absolute;
  bottom: 8px;
  border-radius: 3px 3px 1px 1px;
  background: rgba(75, 79, 74, 0.28);
  animation: sga-wnw-product-cycle 12s ease-in-out infinite;
}

.sga-wnw-window-product-one {
  left: 19px;
  width: 24px;
  height: 31px;
}

.sga-wnw-window-product-two {
  left: 58px;
  width: 28px;
  height: 42px;
}

.sga-wnw-window-product-three {
  right: 17px;
  width: 22px;
  height: 26px;
}

.sga-wnw-shop-door {
  position: absolute;
  right: 20px;
  bottom: 19px;
  width: 53px;
  height: 83px;
  border: 5px solid rgba(99, 101, 95, 0.27);
  background: #aeb5b2;
  animation: sga-wnw-door-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-door span {
  position: absolute;
  top: 39px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(37, 40, 36, 0.55);
}

.sga-wnw-shop-light {
  position: absolute;
  top: 58px;
  width: 31px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 216, 139, 0.8);
  filter: blur(4px);
  animation: sga-wnw-light-cycle 12s ease-in-out infinite;
}

.sga-wnw-shop-light-one {
  left: 37px;
}

.sga-wnw-shop-light-two {
  right: 37px;
}

.sga-wnw-shop-ground {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 300px;
  height: 20px;
  border-radius: 50%;
  background: rgba(40, 43, 38, 0.12);
  filter: blur(5px);
  transform: translateX(-50%);
}

/* CUSTOMERS */

.sga-wnw-customer {
  position: absolute;
  z-index: 5;
  bottom: 62px;
  width: 30px;
  height: 82px;
  opacity: 0;
  animation: sga-wnw-customer-cycle 12s ease-in-out infinite;
}

.sga-wnw-customer-head {
  position: absolute;
  top: 0;
  left: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #b78568;
}

.sga-wnw-customer-body {
  position: absolute;
  top: 15px;
  left: 5px;
  width: 20px;
  height: 39px;
  border-radius: 8px 8px 4px 4px;
  background: #334d3e;
}

.sga-wnw-customer-leg-one,
.sga-wnw-customer-leg-two {
  position: absolute;
  top: 51px;
  width: 6px;
  height: 28px;
  border-radius: 5px;
  background: #343731;
}

.sga-wnw-customer-leg-one {
  left: 7px;
  transform: rotate(4deg);
}

.sga-wnw-customer-leg-two {
  right: 7px;
  transform: rotate(-4deg);
}

.sga-wnw-customer-one {
  left: 14%;
  animation-delay: 0s;
}

.sga-wnw-customer-two {
  left: 25%;
  transform: scale(0.88);
  animation-delay: 0.35s;
}

.sga-wnw-customer-three {
  right: 24%;
  transform: scale(0.95);
  animation-delay: 0.65s;
}

.sga-wnw-customer-four {
  right: 12%;
  transform: scale(0.82);
  animation-delay: 0.95s;
}

.sga-wnw-customer-two .sga-wnw-customer-body {
  background: #765b45;
}

.sga-wnw-customer-three .sga-wnw-customer-body {
  background: #315778;
}

.sga-wnw-customer-four .sga-wnw-customer-body {
  background: #6f4d69;
}

/* RESULT PILLS */

.sga-wnw-result-pill {
  position: absolute;
  z-index: 9;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(65, 184, 107, 0.2);
  border-radius: 40px;
  color: #255c3c;
  background: rgba(244, 255, 248, 0.96);
  box-shadow: 0 11px 23px rgba(30, 71, 46, 0.1);
  font-size: 8px;
  font-weight: 800;
  opacity: 0;
  animation: sga-wnw-result-cycle 12s ease-in-out infinite;
}

.sga-wnw-result-symbol {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--sga-wnw-green);
  font-size: 10px;
}

.sga-wnw-result-pill-one {
  top: 205px;
  left: 24px;
}

.sga-wnw-result-pill-two {
  top: 247px;
  right: 21px;
  animation-delay: 0.35s;
}

.sga-wnw-result-pill-three {
  top: 291px;
  left: 36px;
  animation-delay: 0.7s;
}

/* STATUS */

.sga-wnw-status-card {
  position: absolute;
  z-index: 10;
  bottom: 18px;
  left: 50%;
  width: 186px;
  height: 31px;
  overflow: hidden;
  border: 1px solid rgba(18, 19, 17, 0.1);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 22px rgba(18, 19, 17, 0.08);
  transform: translateX(-50%);
}

.sga-wnw-status-card > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sga-wnw-status-card i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.sga-wnw-status-before {
  color: #797b75;
  animation: sga-wnw-before-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-status-before i {
  background: #a9aaa6;
}

.sga-wnw-status-after {
  color: #245a3a;
  opacity: 0;
  animation: sga-wnw-after-label-cycle 12s ease-in-out infinite;
}

.sga-wnw-status-after i {
  background: var(--sga-wnw-green);
  box-shadow: 0 0 0 4px rgba(65, 184, 107, 0.12);
}

/* BOTTOM PROGRESS */

.sga-wnw-progress {
  margin-top: 19px;
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.sga-wnw-progress-before,
.sga-wnw-progress-after {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.sga-wnw-progress-before {
  color: #858780;
}

.sga-wnw-progress-after {
  color: #315f43;
}

.sga-wnw-progress-track {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(18, 19, 17, 0.1);
}

.sga-wnw-progress-track span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #a9aaa6 0%,
    #7eb894 48%,
    var(--sga-wnw-green) 100%
  );
  transform-origin: left;
  animation: sga-wnw-progress-cycle 12s ease-in-out infinite;
}

/* RIGHT COPY PANEL */

.sga-wnw-copy-panel {
  min-width: 0;
  padding: 58px 54px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(
      circle at 88% 14%,
      rgba(231, 221, 244, 0.44),
      transparent 36%
    ),
    radial-gradient(
      circle at 64% 66%,
      rgba(230, 217, 210, 0.34),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.76),
      rgba(249, 248, 252, 0.54)
    );
}

.sga-wnw-copy-inner {
  width: 100%;
}

.sga-wnw-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #65685f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sga-wnw-eyebrow span {
  width: 23px;
  height: 1px;
  background: var(--sga-wnw-gold);
}

.sga-wnw-heading {
  max-width: 500px;
  margin: 22px 0 18px;
  color: var(--sga-wnw-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.3vw, 50px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.sga-wnw-heading span {
  display: block;
  color: #74766e;
  font-style: italic;
}

.sga-wnw-introduction {
  max-width: 500px;
  margin: 0;
  color: var(--sga-wnw-muted);
  font-size: 13px;
  line-height: 1.8;
}

.sga-wnw-benefit-list {
  margin-top: 34px;
  border-top: 1px solid var(--sga-wnw-line);
}

.sga-wnw-benefit-entry {
  position: relative;
  padding: 20px 2px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 23px;
  gap: 13px;
  align-items: start;
  border-bottom: 1px solid var(--sga-wnw-line);
  transition:
    padding 350ms ease,
    background-color 350ms ease;
}

.sga-wnw-benefit-entry::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 2px;
  background: var(--sga-wnw-green);
  opacity: 0;
  transform: scaleY(0.3);
  transition:
    opacity 350ms ease,
    transform 350ms ease;
}

.sga-wnw-benefit-entry:hover {
  padding-right: 10px;
  padding-left: 10px;
  background: linear-gradient(
    90deg,
    rgba(65, 184, 107, 0.055),
    transparent
  );
}

.sga-wnw-benefit-entry:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

.sga-wnw-benefit-number {
  padding-top: 3px;
  color: #aaaca5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.sga-wnw-benefit-copy h3 {
  margin: 0 0 6px;
  color: #1a1b18;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.sga-wnw-benefit-copy p {
  max-width: 390px;
  margin: 0;
  color: #74776f;
  font-size: 11px;
  line-height: 1.65;
}

.sga-wnw-benefit-arrow {
  padding-top: 1px;
  color: #96988f;
  font-size: 13px;
  transition:
    color 300ms ease,
    transform 300ms ease;
}

.sga-wnw-benefit-entry:hover .sga-wnw-benefit-arrow {
  color: var(--sga-wnw-green);
  transform: translate(3px, -3px);
}

.sga-wnw-copy-footer {
  margin-top: 28px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(18, 19, 17, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
}

.sga-wnw-copy-footer-icon {
  position: relative;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 14px rgba(61, 68, 84, 0.08);
}

.sga-wnw-copy-footer-icon::before,
.sga-wnw-copy-footer-icon::after {
  content: "";
  position: absolute;
  border-radius: 10px;
  background: var(--sga-wnw-green);
}

.sga-wnw-copy-footer-icon::before {
  width: 12px;
  height: 2px;
}

.sga-wnw-copy-footer-icon::after {
  width: 2px;
  height: 12px;
}

.sga-wnw-copy-footer p {
  margin: 0;
  color: #64675f;
  font-size: 10px;
  line-height: 1.6;
}

/* ANIMATION TIMELINE */

@keyframes sga-wnw-shop-cycle {
  0%,
  27% {
    background: linear-gradient(145deg, #c8c9c4, #e0e0da);
    filter: grayscale(0.8) saturate(0.45);
    transform: translateX(-50%) scale(0.94);
    box-shadow: 0 18px 28px rgba(29, 34, 29, 0.09);
  }

  39%,
  88% {
    background: linear-gradient(145deg, #f0d6ae, #f9eee0);
    filter: grayscale(0) saturate(1);
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 27px 45px rgba(45, 53, 44, 0.17),
      0 0 45px rgba(255, 214, 146, 0.17);
  }

  100% {
    background: linear-gradient(145deg, #c8c9c4, #e0e0da);
    filter: grayscale(0.8) saturate(0.45);
    transform: translateX(-50%) scale(0.94);
  }
}

@keyframes sga-wnw-roof-cycle {
  0%,
  27% {
    background: #b4b5b0;
  }

  39%,
  88% {
    background: #223d2e;
  }

  100% {
    background: #b4b5b0;
  }
}

@keyframes sga-wnw-window-cycle {
  0%,
  27% {
    background: #b9bfbd;
    border-color: rgba(99, 101, 95, 0.26);
  }

  39%,
  88% {
    background:
      linear-gradient(rgba(255, 231, 187, 0.26), rgba(255, 216, 148, 0.1)),
      #698d7e;
    border-color: rgba(42, 64, 51, 0.34);
    box-shadow: inset 0 0 25px rgba(255, 224, 171, 0.23);
  }

  100% {
    background: #b9bfbd;
    border-color: rgba(99, 101, 95, 0.26);
  }
}

@keyframes sga-wnw-door-cycle {
  0%,
  27% {
    background: #aeb5b2;
    border-color: rgba(99, 101, 95, 0.27);
  }

  39%,
  88% {
    background: #426b58;
    border-color: rgba(42, 64, 51, 0.34);
  }

  100% {
    background: #aeb5b2;
    border-color: rgba(99, 101, 95, 0.27);
  }
}

@keyframes sga-wnw-product-cycle {
  0%,
  27% {
    background: rgba(75, 79, 74, 0.28);
  }

  39%,
  88% {
    background: rgba(239, 198, 125, 0.85);
  }

  100% {
    background: rgba(75, 79, 74, 0.28);
  }
}

@keyframes sga-wnw-name-board-cycle {
  0%,
  27% {
    background: rgba(88, 90, 85, 0.18);
  }

  39%,
  88% {
    background: var(--sga-wnw-deep-green);
    box-shadow: 0 7px 15px rgba(20, 63, 44, 0.2);
  }

  100% {
    background: rgba(88, 90, 85, 0.18);
  }
}

@keyframes sga-wnw-shop-sign-cycle {
  0%,
  27% {
    width: 118px;
    background: #e7e7e2;
  }

  39%,
  88% {
    width: 136px;
    border-color: rgba(65, 184, 107, 0.32);
    background: var(--sga-wnw-green);
    box-shadow: 0 10px 25px rgba(65, 184, 107, 0.22);
  }

  100% {
    width: 118px;
    background: #e7e7e2;
  }
}

@keyframes sga-wnw-before-label-cycle {
  0%,
  28% {
    opacity: 1;
    transform: translateY(0);
  }

  37%,
  90% {
    opacity: 0;
    transform: translateY(-9px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sga-wnw-after-label-cycle {
  0%,
  28% {
    opacity: 0;
    transform: translateY(9px);
  }

  39%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(9px);
  }
}

@keyframes sga-wnw-launch-cycle {
  0%,
  23% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(0.88);
  }

  32%,
  49% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  58%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-9px) scale(0.96);
  }
}

@keyframes sga-wnw-search-cycle {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-18px);
  }

  23%,
  45% {
    opacity: 1;
    transform: translateX(0);
  }

  55%,
  100% {
    opacity: 0;
    transform: translateX(15px);
  }
}

@keyframes sga-wnw-message-cycle {
  0%,
  45% {
    opacity: 0;
    transform: translateX(18px) translateY(8px);
  }

  55%,
  88% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(18px) translateY(8px);
  }
}

@keyframes sga-wnw-customer-cycle {
  0%,
  43% {
    opacity: 0;
    translate: 0 17px;
  }

  54%,
  86% {
    opacity: 1;
    translate: 0 0;
  }

  100% {
    opacity: 0;
    translate: 0 17px;
  }
}

@keyframes sga-wnw-result-cycle {
  0%,
  49% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }

  59%,
  84% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
  }
}

@keyframes sga-wnw-light-cycle {
  0%,
  29% {
    opacity: 0;
  }

  39%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sga-wnw-glow-cycle {
  0%,
  28% {
    opacity: 0.35;
    transform: translateX(-50%) scale(0.84);
  }

  42%,
  87% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }

  100% {
    opacity: 0.35;
    transform: translateX(-50%) scale(0.84);
  }
}

@keyframes sga-wnw-progress-cycle {
  0% {
    transform: scaleX(0);
  }

  43% {
    transform: scaleX(0.5);
  }

  82% {
    transform: scaleX(1);
  }

  96% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0);
  }
}

/* TABLET */

@media (max-width: 980px) {
  .sga-wnw-section {
    padding: 50px 20px;
  }

  .sga-wnw-shell {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .sga-wnw-visual-panel {
    min-height: 620px;
    border-right: 0;
    border-bottom: 1px solid var(--sga-wnw-line);
  }

  .sga-wnw-copy-panel {
    padding: 55px 50px;
  }

  .sga-wnw-heading {
    max-width: 580px;
    font-size: clamp(38px, 6vw, 52px);
  }
}

/* MOBILE */

@media (max-width: 620px) {
  .sga-wnw-section {
    padding: 28px 14px;
  }

  .sga-wnw-shell {
    border-radius: 21px;
  }

  .sga-wnw-visual-panel {
    min-height: auto;
    padding: 17px;
  }

  .sga-wnw-scene {
    min-height: 430px;
    border-radius: 17px;
  }

  .sga-wnw-search-card {
    top: 49px;
    left: 12px;
    width: 175px;
  }

  .sga-wnw-message-card {
    top: 130px;
    right: 12px;
    width: 180px;
  }

  .sga-wnw-shop-area {
    width: 260px;
    transform: translateX(-50%) scale(0.9);
    transform-origin: bottom center;
  }

  .sga-wnw-result-pill-one {
    top: 195px;
    left: 11px;
  }

  .sga-wnw-result-pill-two {
    top: 237px;
    right: 10px;
  }

  .sga-wnw-result-pill-three {
    top: 278px;
    left: 16px;
  }

  .sga-wnw-customer-one {
    left: 5%;
  }

  .sga-wnw-customer-two {
    left: 18%;
  }

  .sga-wnw-customer-three {
    right: 18%;
  }

  .sga-wnw-customer-four {
    right: 5%;
  }

  .sga-wnw-progress {
    gap: 8px;
  }

  .sga-wnw-progress-before,
  .sga-wnw-progress-after {
    font-size: 8px;
  }

  .sga-wnw-copy-panel {
    padding: 43px 25px;
  }

  .sga-wnw-heading {
    margin-top: 18px;
    font-size: 36px;
  }

  .sga-wnw-introduction {
    font-size: 13px;
  }

  .sga-wnw-benefit-entry {
    grid-template-columns: 27px minmax(0, 1fr) 18px;
    gap: 9px;
  }
}

/* VERY SMALL MOBILE */

@media (max-width: 390px) {
  .sga-wnw-scene {
    min-height: 410px;
  }

  .sga-wnw-shop-area {
    bottom: 50px;
    transform: translateX(-50%) scale(0.82);
  }

  .sga-wnw-search-card {
    width: 158px;
  }

  .sga-wnw-search-copy span {
    display: none;
  }

  .sga-wnw-message-card {
    width: 164px;
  }

  .sga-wnw-message-copy span {
    font-size: 7px;
  }

  .sga-wnw-heading {
    font-size: 32px;
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .sga-wnw-section *,
  .sga-wnw-section *::before,
  .sga-wnw-section *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}