@charset "utf-8";
/* CSS Document */


:root {
  --nav-bg: #ffffff;
  --nav-bg-solid: #ffffff;

  --nav-text: #163743;
  --nav-muted: #58717a;

  --nav-accent: #098c96;
  --nav-accent-dark: #087681;

  --nav-border: rgba(22, 55, 67, 0.09);

  --nav-max: 1120px;
  --disp: "Fraunces", serif;
}

p.sub {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ctaFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}


/* //////// MENU //////// */


/* //////// HERO SECTION STARS STAMPS //////// */


/* =====================================================
   WIEDO HERO COMPOSITION
===================================================== */

.wiedo-story,
.wiedo-story__scroll,
.wiedo-story__stage {
  background: #fff;
}

.wiedo-story__stage {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 74% 96%,
      rgba(41, 190, 186, 0.12) 0%,
      rgba(41, 190, 186, 0.055) 20%,
      transparent 44%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 72%,
      #fcfdfc 100%
    );
}


/* =====================================================
   THREE CANVAS
===================================================== */

.wiedo-story__canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 3;
  pointer-events: none;
}


/* =====================================================
   HERO TEXT
===================================================== */

.wiedo-scene--1 {
  z-index: 7;
}

.wiedo-scene--1 .wiedo-scene__inner--left {
  width: min(43vw, 620px);
}

.wiedo-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  padding: 8px 15px;

  border:
    1px solid
    rgba(9, 143, 152, 0.18);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.48);

  backdrop-filter: blur(8px);

  letter-spacing: 0.14em;
}

.wiedo-eyebrow__dot {
  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: #f4a20f;
}


/* =====================================================
   ORBIT
===================================================== */

.wiedo-hero-orbit {
  position: absolute;

  right: 1%;
  top: 3%;

  width: 49%;
  height: 90%;

  z-index: 2;

  pointer-events: none;

  opacity: 0.55;
}

.wiedo-hero-orbit svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.wiedo-hero-orbit path {
  fill: none;

  stroke: rgba(32, 170, 175, 0.48);

  stroke-width: 1.2;

  stroke-dasharray: 7 10;
}


/* =====================================================
   ORBIT ITEMS
===================================================== */

.wiedo-orbit-item {
  position: absolute;

  z-index: 5;

  pointer-events: none;

  will-change:
    transform,
    opacity;
}

.wiedo-orbit-item--location {
  right: 6%;
  top: 9%;
}

.wiedo-orbit-item--analytics {
  right: 42%;
  top: 48%;
}

.wiedo-orbit-item--notification {
  right: 8%;
  bottom: 19%;
}


.wiedo-orbit-bubble {
  width: 74px;
  height: 74px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(247, 253, 247, 0.88);

  border:
    1px solid
    rgba(9, 143, 152, 0.16);

  box-shadow:
    0 18px 45px
    rgba(18, 59, 70, 0.08);

  backdrop-filter: blur(12px);

  color: #098f98;
}

.wiedo-orbit-bubble svg {
  width: 32px;
  height: 32px;
}

.wiedo-orbit-bubble--notification {
  background:
    rgba(255, 248, 226, 0.92);

  border-color:
    rgba(244, 162, 15, 0.26);
}


/* =====================================================
   SPARKLES
===================================================== */

.wiedo-hero-sparkle {
  position: absolute;

  z-index: 5;

  color: #098f98;

  font-size: 22px;

  pointer-events: none;
}

.wiedo-hero-sparkle--1 {
  right: 47%;
  top: 41%;
}

.wiedo-hero-sparkle--2 {
  right: 3%;
  bottom: 24%;

  color: #f4a20f;

  font-size: 18px;
}


/* =====================================================
   STAMP CARD POSITION
===================================================== */

.wiedo-hero-stamp-card {
  position: absolute;
  top: 24%;
  right: 1.7%;

  width: 335px;

  z-index: 6;
  pointer-events: none;

  will-change: transform, opacity;
}


/* actual visual card */

.wiedo-hero-stamp-card__float {
  width: 100%;
  padding: 22px;

  border-radius: 26px;

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(18, 59, 70, 0.08);

  box-shadow:
    0 30px 80px rgba(18, 59, 70, 0.11),
    0 10px 24px rgba(18, 59, 70, 0.045);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transform: rotate(-4deg);
}


/* card header */

.wiedo-hero-stamp-card__top {
  display: flex;
  align-items: center;

  gap: 12px;
}

.wiedo-hero-stamp-card__icon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 13px;

  background: #f5f3ec;

  font-size: 20px;
}

.wiedo-hero-stamp-card__top strong {
  display: block;

  color: #123b46;

  font-size: 17px;
  font-weight: 750;
}

.wiedo-hero-stamp-card__top span {
  display: block;

  margin-top: 3px;

  color:
    rgba(18, 59, 70, 0.59);

  font-size: 12px;
}


/* =====================================================
   STAMPS
===================================================== */

.wiedo-hero-stamp-area {
  position: relative;

  margin-top: 18px;
}

.wiedo-hero-stamps {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 8px;
}

.wiedo-hero-stamps span {
  aspect-ratio: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  border:
    1.5px solid
    rgba(9, 143, 152, 0.21);

  background:
    rgba(9, 143, 152, 0.035);

  color: transparent;

  font-size: 19px;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}

.wiedo-hero-stamps span.is-filled {
  color: white;

  background: #098f98;

  border-color: #098f98;
}


/* =====================================================
   REWARD
===================================================== */

.wiedo-hero-reward {
  position: absolute;

  left: 50%;
  top: 50%;

  width: calc(100% - 28px);

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 13px 15px;

  border-radius: 17px;

  background:
    rgba(255,255,255,0.97);

  border:
    1px solid
    rgba(9,143,152,.15);

  box-shadow:
    0 18px 38px
    rgba(18,59,70,.14);

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, -50%)
    scale(.84);

  z-index: 3;
}

.wiedo-hero-reward__icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    rgba(9,143,152,.10);

  color: #098f98;
}

.wiedo-hero-reward__icon svg {
  width: 22px;
  height: 22px;
}

.wiedo-hero-reward__text {
  display: flex;
  flex-direction: column;

  line-height: 1.05;
}

.wiedo-hero-reward__text span {
  color: #098f98;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .14em;
}

.wiedo-hero-reward__text strong {
  margin-top: 3px;

  color: #123b46;

  font-size: 16px;
}

.wiedo-hero-reward__text small {
  margin-top: 2px;

  color:
    rgba(18,59,70,.65);

  font-size: 11px;
}


/* =====================================================
   CARD FOOTER
===================================================== */

.wiedo-hero-stamp-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 15px;

  font-size: 12px;
}

.wiedo-hero-stamp-card__bottom strong {
  color: #123b46;
}

.wiedo-hero-stamp-card__bottom span {
  color: #098f98;

  font-weight: 650;
}


/* =====================================================
   PRIVACY
===================================================== */

.wiedo-hero-trust {
  position: absolute;
  right: 6%;
  bottom: 4.8%;

  z-index: 6;
  pointer-events: none;

  will-change: transform, opacity;
}

.wiedo-hero-trust__float {
  display: flex;
  align-items: center;
  gap: 11px;

  padding: 12px 18px 12px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,.93);

  border: 1px solid rgba(18,59,70,.08);

  box-shadow:
    0 18px 45px rgba(18,59,70,.07);

  backdrop-filter: blur(12px);
}

.wiedo-hero-trust__icon {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(9,143,152,.10);

  color: #098f98;
}

.wiedo-hero-trust__icon svg {
  width: 22px;
  height: 22px;
}

.wiedo-hero-trust__text {
  display: flex;
  flex-direction: column;
}

.wiedo-hero-trust__text span {
  color: #b67605;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .15em;
}

.wiedo-hero-trust__text strong {
  margin-top: 3px;

  color: #123b46;

  font-size: 13px;
  white-space: nowrap;
}


/* =====================================================
   APP STORE / GOOGLE PLAY
===================================================== */

.wiedo-downloads {
  display: flex;
  align-items: center;
  gap: 24px;

  margin-top: 32px;
}

.wiedo-download {
  width: 280px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 11px 10px 18px;

  background: rgba(255, 255, 255, 0.96);

  border: 1.5px solid rgba(78, 211, 208, 0.42);
  border-radius: 17px;

  box-shadow:
    0 0 0 4px rgba(89, 221, 217, 0.045),
    0 14px 34px rgba(18, 59, 70, 0.045);
}


/* Store logo image */

.wiedo-download__store-logo {
  width: 150px;
  height: 48px;

  display: block;

  object-fit: contain;
  object-position: left center;

  flex: 0 1 auto;
}


/* QR / SOON image */

.wiedo-download__qr {
  width: 64px;
  height: 64px;

  display: block;
  flex: 0 0 64px;

  object-fit: cover;

  border-radius: 10px;

  opacity: 0.72;
}




/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 900px) {

  .wiedo-hero-orbit,
  .wiedo-orbit-item,
  .wiedo-hero-sparkle,
  .wiedo-hero-phone-glow,
  .wiedo-hero-stamp-card,
  .wiedo-hero-trust,
  .wiedo-downloads {
    display: none;
  }

}










/* =====================================================
   HERO FLOATING MOTION
===================================================== */


/* Stamp card */

.wiedo-hero-stamp-card__float {
  animation:
    wiedoStampCardFloat
    6.2s
    ease-in-out
    infinite;

  will-change: transform;
}

@keyframes wiedoStampCardFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(-4deg);
  }

  50% {
    transform:
      translate3d(0, -8px, 0)
      rotate(-3deg);
  }

}


/* Datenschutz badge */

.wiedo-hero-trust__float {
  animation:
    wiedoTrustFloat
    5.4s
    ease-in-out
    infinite;

  animation-delay: -2.1s;

  will-change: transform;
}

@keyframes wiedoTrustFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(0, -6px, 0)
      rotate(-1deg);
  }

}


/* Location */

.wiedo-orbit-item--location
.wiedo-orbit-item__float {
  animation:
    wiedoLocationFloat
    5.8s
    ease-in-out
    infinite;

  animation-delay: -1.4s;
}

@keyframes wiedoLocationFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(3px, -9px, 0)
      rotate(1.5deg);
  }

}


/* Analytics */

.wiedo-orbit-item--analytics
.wiedo-orbit-item__float {
  animation:
    wiedoAnalyticsFloat
    6.7s
    ease-in-out
    infinite;

  animation-delay: -3.3s;
}

@keyframes wiedoAnalyticsFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(-3px, -7px, 0)
      rotate(-1.5deg);
  }

}


/* Notification */

.wiedo-orbit-item--notification
.wiedo-orbit-item__float {
  animation:
    wiedoNotificationFloat
    5.1s
    ease-in-out
    infinite;

  animation-delay: -2.7s;
}

@keyframes wiedoNotificationFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(4px, -7px, 0)
      rotate(1deg);
  }

}


/* Sparkles */

.wiedo-hero-sparkle {
  will-change:
    transform,
    opacity;
}

.wiedo-hero-sparkle__float {
  display: block;

  animation:
    wiedoSparkleFloat
    4.8s
    ease-in-out
    infinite;

  will-change: transform;
}

.wiedo-hero-sparkle--2
.wiedo-hero-sparkle__float {
  animation-delay: -2.2s;
}

@keyframes wiedoSparkleFloat {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(0, -6px, 0)
      scale(1.08);
  }
}


/* Optional subtle orbit breathing */

.wiedo-hero-orbit {
  animation:
    wiedoOrbitBreath
    7s
    ease-in-out
    infinite;

  transform-origin: center;
}

@keyframes wiedoOrbitBreath {

  0%,
  100% {
    opacity: 0.46;
  }

  50% {
    opacity: 0.60;
  }

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

  .wiedo-hero-stamp-card__float,
  .wiedo-hero-trust__float,
  .wiedo-orbit-item__float,
  .wiedo-hero-sparkle,
  .wiedo-hero-orbit {
    animation: none !important;
  }

}











/* //////// HERO SECTION STARS STAMPS END //////// */




/* =========================
   DESKTOP NAV
========================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;

  width: 100%;
  
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);

  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.site-nav_pages {
	background: #fcfaf7; 
}

.site-nav.scrolled {
  background: var(--nav-bg-solid);
  box-shadow: 0 8px 30px rgba(16, 48, 58, 0.05);
}

.nav-inner {
  max-width: var(--nav-max);
  height: 72px;
  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
}


/* Logo */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--nav-text);
  text-decoration: none;

  font-size: 22px;
  font-weight: 700;
  font-family: var(--disp);

  white-space: nowrap;
}

.nav-logo img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.nav-logo:hover img {
  transform: scale(1.04);
}


/* Center links */

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.nav-links a {
  position: relative;

  color: var(--nav-muted);
  text-decoration: none;

  font-size: 15px;
  font-weight: 500;

  transition: color 0.22s ease;
}

.nav-links a::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: -8px;

  width: 4px;
  height: 4px;

  border-radius: 50%;
  background: var(--nav-accent);

  opacity: 0;
  transform: translateX(-50%) scale(0);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.nav-links a:hover {
  color: var(--nav-text);
}

.nav-links a:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}


/* Actions */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-login,
.nav-primary {
  min-height: 46px;
  padding: 0 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  text-decoration: none;
  font-size: 14px;
  font-weight: 650;

  transition:
    transform 0.25s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.nav-login {
  color: var(--nav-text);

  background: rgba(255,255,255,.4);
  border: 1px solid rgba(22,55,67,.13);
}

.nav-login:hover {
  background: rgba(255,255,255,.8);
  transform: translateY(-1px);
}

.nav-primary {
  color: #fff;
  background: var(--nav-accent);

  box-shadow:
    0 8px 24px rgba(9,140,150,.18);
}

.nav-primary:hover {
  background: var(--nav-accent-dark);
  transform: translateY(-1px);

  box-shadow:
    0 12px 28px rgba(9,140,150,.24);
}


/* Burger hidden desktop */

.nav-toggle {
  display: none;
}


/* Mobile menu hidden desktop */

.mobile-menu {
  display: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
  }

  .nav-inner {
    height: 64px;
    padding: 0 18px;

    display: flex;
    justify-content: space-between;
  }

  .nav-logo {
    font-size: 20px;
  }

  .nav-logo img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .nav-links,
  .nav-actions {
    display: none;
  }


  /* Apple-style burger */

  .nav-toggle {
    width: 42px;
    height: 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 0;

    border: 0;
	border-radius: 0;

	background: transparent;

	box-shadow: none;
    color: var(--nav-text);

    cursor: pointer;

    transition:
      background .25s ease,
      transform .25s ease;
  }

  .nav-toggle:active {
    transform: scale(.94);
  }

  .nav-toggle span {
    width: 18px;
    height: 1.5px;

    display: block;

    border-radius: 99px;
    background: var(--nav-text);

    transition:
      transform .45s cubic-bezier(.32,.72,0,1),
      opacity .3s ease;
  }


  /* X state */

  .site-nav.nav-open .nav-toggle span:first-child {
    transform: translateY(3.75px) rotate(45deg);
  }

  .site-nav.nav-open .nav-toggle span:last-child {
    transform: translateY(-3.75px) rotate(-45deg);
  }


  /* Full mobile menu */

  .mobile-menu {
    position: fixed;

    top: 64px;
    left: 0;
    right: 0;

    height: calc(100dvh - 64px);

    display: block;

    background: #ffffff;

    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-14px);

    transition:
      opacity .4s ease,
      transform .55s cubic-bezier(.32,.72,0,1),
      visibility .4s;
  }

  .site-nav.nav-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }


  .mobile-menu-inner {
    height: 100%;

    max-width: 560px;
    margin: 0 auto;

    padding:
      42px
      28px
      calc(28px + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
  }


  /* Links */

  .mobile-links {
    display: flex;
    flex-direction: column;
  }

  .mobile-links a {
    padding: 15px 0;

    color: var(--nav-text);
    text-decoration: none;

    font-size: clamp(27px, 7vw, 36px);
    font-weight: 580;
    letter-spacing: -0.035em;

    opacity: 0;
    transform: translateY(18px);

    transition:
      opacity .38s ease,
      transform .5s cubic-bezier(.32,.72,0,1);
  }


  /* stagger */

  .site-nav.nav-open .mobile-links a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav.nav-open .mobile-links a:nth-child(1) {
    transition-delay: .07s;
  }

  .site-nav.nav-open .mobile-links a:nth-child(2) {
    transition-delay: .11s;
  }

  .site-nav.nav-open .mobile-links a:nth-child(3) {
    transition-delay: .15s;
  }

  .site-nav.nav-open .mobile-links a:nth-child(4) {
    transition-delay: .19s;
  }

  .site-nav.nav-open .mobile-links a:nth-child(5) {
    transition-delay: .23s;
  }


  /* Bottom actions */

  .mobile-actions {
    margin-top: auto;

    display: grid;
    gap: 10px;

    opacity: 0;
    transform: translateY(14px);

    transition:
      opacity .4s ease .25s,
      transform .5s cubic-bezier(.32,.72,0,1) .25s;
  }

  .site-nav.nav-open .mobile-actions {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-login,
  .mobile-primary {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    text-decoration: none;

    font-size: 16px;
    font-weight: 650;
  }

  .mobile-login {
    color: var(--nav-text);

    background: rgba(255,255,255,.55);
    border: 1px solid rgba(22,55,67,.10);
  }

  .mobile-primary {
    color: #fff;
    background: var(--nav-accent);
  }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .site-nav *,
  .site-nav *::before,
  .site-nav *::after {
    transition-duration: 0.01ms !important;
  }
}

/* //////// MENU END //////// */




/* //////// IMG OPTIMIZATIONS //////// */

#intro .split,
#darkIntro .split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 64px;
}

#intro .img,
#darkIntro .img {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro .img img,
#darkIntro .img img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  object-fit: contain;
}

/* якщо старий phoneframe задає рамку/розмір */
#intro .phoneframe,
#darkIntro .phoneframe {
  width: 100%;
  max-width: none;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}





@media (max-width: 900px) {
  #intro .split,
  #darkIntro .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #intro .img img,
  #darkIntro .img img {
    max-width: 650px;
  }
}




/* //////// IMG OPTIMIZATIONS END //////// */









































/* //////// SCROLL ANIMATION //////// */




/* ==========================================================================
   Wiedo 3D scroll story
   Scoped styles: intentionally avoids global body/:root rules so this can be
   added to the existing WebOnDemand stylesheet without changing other pages.
   ========================================================================== */

.wiedo-story {
  --wiedo-cream: #fbf8ef;
  --wiedo-cream-deep: #f4efe3;
  --wiedo-petrol: #153743;
  --wiedo-petrol-soft: #5f747b;
  --wiedo-turquoise: #5bbfb2;
  --wiedo-turquoise-deep: #138c92;
  --wiedo-sun: #f2aa19;
  --wiedo-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --wiedo-body: "Outfit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wiedo-shadow-soft: 0 18px 50px -24px rgb(21 55 67 / 35%);
  --wiedo-shadow-chip: 0 10px 30px -14px rgb(21 55 67 / 28%);
  --wiedo-stage-offset: 72px;

  position: relative;
  width: 100%;
  color: var(--wiedo-petrol);
  font-family: var(--wiedo-body);
}

/* Story shell ------------------------------------------------------------- */

.wiedo-story__scroll {
  position: relative;
  height: 450vh;
}

.wiedo-story__stage {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--wiedo-stage-offset));
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      ellipse at 73% 91%,
      rgba(23, 183, 180, 0.09) 0%,
      rgba(23, 183, 180, 0.035) 22%,
      transparent 43%
    ),
    #ffffff;
}

.wiedo-story__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Scene layers ------------------------------------------------------------ */

.wiedo-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-items: center;
  padding: 0 clamp(24px, 6vw, 112px);
  pointer-events: none;
}

.wiedo-scene__inner {
  max-width: 544px;
  pointer-events: auto;
  will-change: transform, opacity;
}

.wiedo-scene--1,
.wiedo-scene--2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
}

.wiedo-scene__inner--left {
  grid-column: 1;
}

.wiedo-scene__inner--right {
  grid-column: 2;
}

.wiedo-scene--3 {
  grid-template-columns: minmax(0, 1fr) minmax(288px, 416px) minmax(0, 1fr);
}

.wiedo-scene__inner--split-left {
  grid-column: 1;
  justify-self: end;
  max-width: 320px;
  text-align: right;
}

.wiedo-scene__inner--split-right {
  grid-column: 3;
  max-width: 320px;
}

.wiedo-scene--4 {
  place-items: center;
}

.wiedo-scene__inner--floats {
  position: absolute;
  inset: 0;
  max-width: none;
  pointer-events: none;
}

/* Typography -------------------------------------------------------------- */

.wiedo-eyebrow {
  margin: 0 0 20px;
  color: var(--wiedo-turquoise-deep);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wiedo-headline {
  margin: 0;
  color: var(--wiedo-petrol);
  font-family: var(--wiedo-display);
  font-size: clamp(42px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.025em;
}

.wiedo-headline--sm {
  font-size: clamp(34px, 2.9vw, 44px);
}

.wiedo-headline__accent {
  color: var(--wiedo-turquoise-deep);
}

.wiedo-paragraph {
  margin: 18px 0 0;
  color: var(--wiedo-petrol-soft);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.65;
}

/* Actions ----------------------------------------------------------------- */

.wiedo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.wiedo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.wiedo-btn--primary {
  background: var(--wiedo-petrol);
  color: var(--wiedo-cream);
  box-shadow: var(--wiedo-shadow-soft);
}

.wiedo-btn--primary:hover {
  background: var(--wiedo-turquoise-deep);
  transform: translateY(-2px);
}

.wiedo-btn--ghost {
  border: 1px solid rgb(21 55 67 / 18%);
  color: var(--wiedo-petrol);
}

.wiedo-btn--ghost:hover {
  border-color: var(--wiedo-turquoise-deep);
  color: var(--wiedo-turquoise-deep);
  transform: translateY(-2px);
}

/* Floating product UI ----------------------------------------------------- */

.wiedo-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 1px solid rgb(21 55 67 / 8%);
  border-radius: 999px;
  background: rgb(255 255 255 / 86%);
  box-shadow: var(--wiedo-shadow-chip);
  color: var(--wiedo-petrol);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform, opacity;
}

.wiedo-float--stamp {
  top: 26%;
  left: 16%;
  color: var(--wiedo-turquoise-deep);
}

.wiedo-float--gps {
  top: 32%;
  right: 16%;
}

.wiedo-float--reward {
  right: 12%;
  bottom: 34%;
  background: rgb(255 232 164 / 94%);
}

.wiedo-float--distance {
  bottom: 30%;
  left: 22%;
}

.wiedo-float--qr {
  bottom: 48%;
  left: 10%;
}

.wiedo-float--card {
  top: 14%;
  right: 22%;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 18px;
  border-radius: 18px;
}

.wiedo-float--card em {
  color: var(--wiedo-petrol-soft);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .wiedo-story {
    --wiedo-stage-offset: 64px;
  }

  .wiedo-story__scroll {
    height: 400vh;
  }

  .wiedo-story__stage {
    height: calc(100dvh - var(--wiedo-stage-offset));
    min-height: 0;
  }

  .wiedo-scene {
    padding: 0 20px;
  }

  .wiedo-scene--1,
  .wiedo-scene--2 {
    grid-template-columns: 1fr;
  }

  .wiedo-scene--1 {
    align-items: center;
  }

  .wiedo-scene--1 .wiedo-scene__inner,
  .wiedo-scene--2 .wiedo-scene__inner {
    grid-column: 1;
    max-width: none;
  }

  /* Initial mobile hero */
  .wiedo-scene--1 .wiedo-scene__inner {
    width: 100%;
    max-width: 560px;

    justify-self: center;

    padding-bottom: 0;

    text-align: center;
  }

  .wiedo-scene--1 .wiedo-eyebrow {
    justify-content: center;

    margin-left: auto;
    margin-right: auto;
  }

  .wiedo-scene--1 .wiedo-paragraph {
    max-width: 520px;

    margin-left: auto;
    margin-right: auto;
  }

  .wiedo-scene--1 .wiedo-actions {
    justify-content: center;
  }

  .wiedo-scene--2 {
    align-items: start;
  }

  .wiedo-scene--2 .wiedo-scene__inner {
    padding-top: 8vh;
  }

  .wiedo-scene--3 {
    grid-template-columns: 1fr;
    align-content: space-between;

    /* більше простору для телефона по центру */
    padding-top: 2.5vh;
    padding-bottom: 3vh;
  }

  .wiedo-scene__inner--split-left {
    grid-column: 1;
    max-width: 245px;

    text-align: left;
  }
  
  .wiedo-scene__inner--split-right {
    grid-column: 1;
    max-width: 245px;

    text-align: right;
  }
  
  /*
  .wiedo-scene__inner--split-right .wiedo-paragraph,
  .wiedo-scene__inner--split-left .wiedo-paragraph {
    margin-top: 8px;
  } */


  /* Stempel sammeln */
  .wiedo-scene__inner--split-left {
    justify-self: start;

    /* трохи вище від телефона */
    margin-top: -8px;
  }


  /* Prämien freischalten */
  .wiedo-scene__inner--split-right {
    align-self: end;
    justify-self: end;

    /* трохи нижче від телефона */
    margin-bottom: -10px;
  }

  .wiedo-float--stamp {
    top: 18%;
    left: 6%;
  }

  .wiedo-float--gps {
    top: 24%;
    right: 6%;
  }

  .wiedo-float--reward {
    right: 5%;
    bottom: 22%;
  }

  .wiedo-float--distance {
    bottom: 18%;
    left: 8%;
  }

  .wiedo-float--qr {
    bottom: 40%;
    left: 5%;
  }

  .wiedo-float--card {
    top: 6%;
    right: 6%;
  }
}

@media (max-width: 600px) {
  .wiedo-headline {
    font-size: clamp(38px, 11vw, 52px);
  }

  .wiedo-headline--sm {
    font-size: clamp(30px, 8vw, 38px);
  }

  .wiedo-actions {
    gap: 10px;
  }

  .wiedo-btn {
    width: 100%;
  }

  .wiedo-float {
    font-size: 12px;
  }
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wiedo-story__scroll {
    height: auto;
  }

  .wiedo-story__stage {
    height: auto;
    min-height: calc(100dvh - var(--wiedo-stage-offset));
  }
}























/* Wiedo story — safe initial state */

.wiedo-story:not(.is-ready) .wiedo-story__canvas,
.wiedo-story:not(.is-ready) .wiedo-scene__inner,
.wiedo-story:not(.is-ready) .wiedo-float {
  opacity: 0;
}

.wiedo-story__canvas {
  transition: opacity 0.35s ease;
}









/* Story starts immediately under navigation */

.wiedo-story {
  margin-top: 0;
  padding-top: 0;
}

.wiedo-story__scroll {
  margin-top: 0;
  padding-top: 0;
}

.wiedo-story__stage {
  margin-top: 0;
}

section#wiedo-story {
    padding: 0;
}











.wiedo-story {
  position: relative;
  z-index: 1;
}

.wiedo-story__stage {
  z-index: 1;
}

.wiedo-next-section {
  position: relative;
  z-index: 30;

  /*
    Pull the real next section upward
    while the phone is still pinned.
  */
  margin-top: -100vh;

  /*
    Important: must have its own opaque background
    so it physically covers the phone.
  */
  background: #fff;
}






/* //////// SCROLL ANIMATION ENDDDD //////// */




/* //////// FAQ //////// */

/* =========================
   FAQ Accordion
========================= */

#faq .faq-item {
  overflow: hidden;
}

/* Remove native marker */
#faq .faq-item summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;

  /* space for + icon */
  padding-right: 48px;
}

#faq .faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus icon */
#faq .faq-item summary::after {
  content: "+";

  position: absolute;
  right: 22px;
  top: 50%;

  transform: translateY(-50%) rotate(0deg);

  font-size: 22px;
  line-height: 1;
  font-weight: 500;

  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

/* + becomes × */
#faq .faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Content wrapper */
#faq .faq-answer {
  overflow: hidden;
}

#faq .faq-answer p {
  margin-top: 0;
}

/* Small visual polish */
#faq .faq-item[open] .faq-answer p {
  animation: faqContentIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes faqContentIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  #faq .faq-item,
  #faq .faq-item *,
  #faq .faq-item summary::after {
    animation: none !important;
    transition: none !important;
  }
}



/* Highlight */

#faq .faq-item {
  border: 1px solid rgba(0, 126, 142, 0.16);
  border-radius: 18px;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

#faq .faq-item[open] {
  border-color: #e9a11b;
  background: #fff;
  box-shadow:
    0 10px 30px rgba(233, 161, 27, 0.08),
    0 0 0 1px rgba(233, 161, 27, 0.08);
}

/* //////// FAQ END //////// */



.boldWhite strong {
    color: #fff;
}

.bigcta {
	padding: 70px 56px;
}

#wiedo-phone-canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  z-index: 10;

  pointer-events: auto;
}


/* TEMP: isolate real Three.js phone */

.app-phone,
.phone-shadow,
.floating-card,
.floating-dot {
  display: none !important;
}








/* AGB CSS START */


/* ========================================
   AGB PAGE ONLY
======================================== */

/* Small header adjustment for the simplified AGB navigation */
.nav-i>.btn {
    margin-left: auto;
    background: transparent;
    color: var(--ink);
    border: 1.6px solid var(--line);
    padding: 0.7em 1.35em;
    font-size: 0.92rem;
}

.nav-i>.btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}


/* ========================================
   AGB MAIN LAYOUT
======================================== */

main {
    padding: 56px 0 90px;
}

.layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 50px;
    align-items: start;
}



/* ========================================
   AGB NAV
======================================== */

.toc a {
  display: block;
  color: #5e7680;
  border-left: 2px solid transparent;
  padding-left: 10px;

  transition:
    color 0.2s ease,
    font-weight 0.2s ease,
    border-color 0.2s ease;
}

.toc a:hover {
  color: #008fa1;
}

.toc a.active {
  color: #008fa1 !important;
  font-weight: 600;
  border-left-color: #008fa1;
}

.agb-section {
  scroll-margin-top: 150px;
}






/* MOBILE TOC — hidden on desktop */

.toc-mobile {
  display: none;
}


/* MOBILE */

@media (max-width: 1040px) {

  /* Desktop navigation disappears */
  .toc {
    display: none;
  }

  .toc-mobile {
    display: block;

    position: sticky;
    top: 85px;
    z-index: 100;

    width: 100%;
    margin-bottom: 32px;
    padding: 0px 10px;

    background: #faf9f5;
  }

  .toc-mobile-toggle {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 14px 16px;

    border: 1px solid #d9e2e3;
    border-radius: 12px;

    background: #ffffff;

    color: #173945;
    font: inherit;
    font-weight: 600;
    text-align: left;

    cursor: pointer;

    box-shadow:
      0 4px 16px rgba(23, 57, 69, 0.06);

    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .toc-mobile-toggle:hover {
    border-color: #008fa1;
  }

  .toc-mobile-arrow {
    flex-shrink: 0;

    color: #008fa1;

    transition: transform 0.25s ease;
  }

  .toc-mobile.open .toc-mobile-arrow {
    transform: rotate(180deg);
  }

  .toc-mobile-menu {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;
    right: 0;

    display: none;

    max-height: 60vh;
    overflow-y: auto;

    padding: 8px;

    border: 1px solid #d9e2e3;
    border-radius: 12px;

    background: #ffffff;

    box-shadow:
      0 12px 35px rgba(23, 57, 69, 0.12);
  }

  .toc-mobile.open .toc-mobile-menu {
    display: block;
  }

  .toc-mobile-menu a {
    display: block;

    padding: 10px 12px;

    border-radius: 8px;

    color: #5e7680;
    text-decoration: none;

    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .toc-mobile-menu a:hover {
    color: #008fa1;
    background: rgba(0, 143, 161, 0.06);
  }

  .toc-mobile-menu a.active {
    color: #008fa1;
    background: rgba(0, 143, 161, 0.08);
    font-weight: 600;
  }

}









/* ========================================
   SHEET STYLES
======================================== */

.agb-block {
  min-width: 0;
  max-width: 100%;
}

/* AGB pricing table wrapper */
.agb-plans-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* AGB pricing table */
table.agb-plans {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 0.92rem;
  color: #173945;
}

table.agb-plans th,
table.agb-plans td {
  padding: 16px 18px;
  border: 1px solid #d7e1e3;
  text-align: left;
  vertical-align: middle;
}

table.agb-plans th {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

table.agb-plans td:first-child {
  font-weight: 600;
  color: var(--ink);
}

table.agb-plans tr:nth-child(even) td {
  background: #fff;
}

table.agb-plans tr:nth-child(odd) td {
  background: #f7fafb;
}

@media (max-width: 768px) {
  .agb-plans-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  table.agb-plans {
    width: 680px;
    min-width: 680px;
  }

  table.agb-plans th,
  table.agb-plans td {
    padding: 14px 16px;
  }

  table.agb-plans th:first-child,
  table.agb-plans td:first-child {
    min-width: 210px;
  }

  table.agb-plans th:nth-child(2),
  table.agb-plans td:nth-child(2) {
    min-width: 90px;
  }

  table.agb-plans th:nth-child(3),
  table.agb-plans td:nth-child(3),
  table.agb-plans th:nth-child(4),
  table.agb-plans td:nth-child(4) {
    min-width: 150px;
  }
}












/* ========================================
   TABLE OF CONTENTS
======================================== */

.toc {
    position: sticky;
    top: 96px;
    font-size: 0.84rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.toc a {
    display: block;
    color: var(--txts);
    text-decoration: none;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--line);
}

.toc a:hover {
    color: var(--teal);
    border-color: var(--teal);
}


/* ========================================
   LEGAL CONTENT
======================================== */

.content {
    max-width: 720px;
}

.content h1 {
    font-size: clamp(2rem, 4.4vw, 2.9rem);
}

.content h2 {
    font-size: 1.35rem;
    margin: 2.1em 0 0.5em;
}

.content h3 {
    font-family: var(--body);
    font-size: 1.02rem;
    margin: 1.3em 0 0.3em;
    color: var(--teal);
}

.content p {
    margin: 0.85em 0;
    color: var(--txt);
}

.content a {
    color: var(--teal);
}

.content ul {
    margin: 0.5em 0 0.9em 1.3em;
}

.content li {
    margin: 0.35em 0;
}


/* ========================================
   LEGAL CARDS / NOTICES
======================================== */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 26px;
    margin: 16px 0;
}

.todo {
    background: #fef3c7;
    border: 1.5px dashed var(--amber);
    padding: 0.1em 0.55em;
    border-radius: 6px;
    font-weight: 700;
    color: #7c4a0a;
    display: inline-block;
    line-height: 1.5;
}

#draftNote {
    background: var(--ink);
    color: #d7e4e9;
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 34px;
    margin-top: 34px;
    font-size: 0.92rem;
    display: flex;
    gap: 14px;
}

#draftNote b {
    color: var(--amber);
}

.intro-note {
    background: #fff;
    border-left: 3px solid var(--teal);
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    font-size: 0.93rem;
    font-style: italic;
    color: var(--txts);
    margin: 18px 0 30px;
}

.upd {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--txts);
    margin-top: 40px;
}


/* ========================================
   AGB PLAN TABLE
======================================== */

table.plans {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 22px;
    font-size: 0.92rem;
}

table.plans th,
table.plans td {
    border: 1px solid var(--line);
    padding: 9px 12px;
    text-align: left;
}

table.plans th {
    background: var(--ink);
    color: #fff;
    font-weight: 700;
}

table.plans td:first-child {
    font-weight: 600;
    color: var(--ink);
}

table.plans tr:nth-child(even) td {
    background: #fff;
}

table.plans tr:nth-child(odd) td {
    background: #f7fafb;
}


/* ========================================
   FORM-LIKE LEGAL FIELDS
======================================== */

.formfield {
    border-bottom: 1px solid var(--txts);
    display: inline-block;
    min-width: 260px;
    margin-left: 6px;
}

.formrow {
    margin: 14px 0;
}


/* ========================================
   AGB FOOTER LAYOUT
======================================== */

footer {
    padding: 40px 0;
    margin-top: 60px;
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.85rem;
}

footer .wrap a {
    display: inline-block;
    margin: 0 16px 0 0;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 820px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .toc {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--line);
        max-height: none;
    }

    .toc a {
        border: 0;
        padding: 2px 0;
    }
}

/* ========================================
   AGB FLAT PAGE STRUCTURE
   body > .agb-page >
     nav.site-nav
     nav.toc
     .agb-block...
     footer
======================================== */

      .agb-page {
        display: grid;
        grid-template-columns: 210px minmax(0, 720px);
        column-gap: 50px;
        justify-content: center;
        align-items: start;
      }

      /* Both main navigation and footer stay full width */
      .agb-page > .site-nav,
      .agb-page > footer {
        grid-column: 1 / -1;
        width: 100%;
      }

      /* Header / intro block and every § block live in the right column */
      .agb-page > .agb-block {
        grid-column: 2;
        width: 100%;
      }

      .agb-head {
        padding-top: 56px;
      }

      /* Anchor links should not hide behind sticky header */
      .agb-section {
        scroll-margin-top: 96px;
      }

      /* ========================================
   TABLE OF CONTENTS
======================================== */

      .agb-page > .toc {
        grid-column: 1;
        grid-row: 2 / span 16;
        align-self: start;

        position: sticky;
        top: 96px;

        font-size: 0.84rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;

        /* Override the global nav styling */
        z-index: 10;
        background: transparent;
        backdrop-filter: none;
        border-bottom: 0;
      }

      .toc a {
        display: block;
        color: var(--txts);
        text-decoration: none;
        padding: 4px 0 4px 12px;
        border-left: 2px solid var(--line);
      }

      .toc a:hover {
        color: var(--teal);
        border-color: var(--teal);
      }

      /* ========================================
   LEGAL CONTENT
======================================== */

      .agb-block h1 {
        font-size: clamp(2rem, 4.4vw, 2.9rem);
      }

      .agb-section h2 {
        font-size: 1.35rem;
        margin: 2.1em 0 0.5em;
      }

      .agb-section h3 {
        font-family: var(--body);
        font-size: 1.02rem;
        margin: 1.3em 0 0.3em;
        color: var(--teal);
      }

      .agb-block p {
        margin: 0.85em 0;
        color: var(--txt);
      }

      .agb-block a {
        color: var(--teal);
      }

      .agb-block ul {
        margin: 0.5em 0 0.9em 1.3em;
      }

      .agb-block li {
        margin: 0.35em 0;
      }

      /* ========================================
   AGB-SPECIFIC COMPONENTS
======================================== */

      .card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 22px 26px;
        margin: 16px 0;
      }

      .todo {
        background: #fef3c7;
        border: 1.5px dashed var(--amber);
        padding: 0.1em 0.55em;
        border-radius: 6px;
        font-weight: 700;
        color: #7c4a0a;
        display: inline-block;
        line-height: 1.5;
      }

      #draftNote {
        background: var(--ink);
        color: #d7e4e9;
        border-radius: 16px;
        padding: 20px 24px;
        margin-bottom: 34px;
        font-size: 0.92rem;
        display: flex;
        gap: 14px;
      }

      #draftNote b {
        color: var(--amber);
      }

      .intro-note {
        background: #fff;
        border-left: 3px solid var(--teal);
        border-radius: 0 12px 12px 0;
        padding: 14px 18px;
        font-size: 0.93rem;
        font-style: italic;
        color: var(--txts);
        margin: 18px 0 30px;
      }

      .upd {
        font-family: var(--mono);
        font-size: 0.76rem;
        color: var(--txts);
        margin-top: 40px;
      }

      /* ========================================
   AGB PLAN TABLE
======================================== */

      table.plans {
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0 22px;
        font-size: 0.92rem;
      }

      table.plans th,
      table.plans td {
        border: 1px solid var(--line);
        padding: 9px 12px;
        text-align: left;
      }

      table.plans th {
        background: var(--ink);
        color: #fff;
        font-weight: 700;
      }

      table.plans td:first-child {
        font-weight: 600;
        color: var(--ink);
      }

      table.plans tr:nth-child(even) td {
        background: #fff;
      }

      table.plans tr:nth-child(odd) td {
        background: #f7fafb;
      }

      /* ========================================
   FORM-LIKE LEGAL FIELDS
======================================== */

      .formfield {
        border-bottom: 1px solid var(--txts);
        display: inline-block;
        min-width: 260px;
        margin-left: 6px;
      }

      .formrow {
        margin: 14px 0;
      }

      /* ========================================
   AGB FOOTER LAYOUT
======================================== */

      .agb-page > footer {
        padding: 40px 0;
        margin-top: 60px;
      }

      .agb-page > footer .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
        font-size: 0.85rem;
      }

      .agb-page > footer .wrap a {
        display: inline-block;
        margin: 0 16px 0 0;
      }

      /* ========================================
   RESPONSIVE
======================================== */	
      @media (max-width: 1040px) {
        .agb-page {
          display: block;
        }

        .agb-page > .toc,
        .agb-page > .agb-block {
          width: min(720px, calc(100% - 44px));
          margin-left: auto;
          margin-right: auto;
          margin-top: 100px;
        }

        .agb-page > .toc {
		  display: none !important;
          position: static;
          display: flex;
          flex-wrap: wrap;
          gap: 4px 14px;
          max-height: none;
          margin-top: 34px;
          margin-bottom: 30px;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--line);
        }

        .toc a {
          border: 0;
          padding: 2px 0;
        }

        .agb-head {
          padding-top: 0;
        }
      }

/* AGB CSS END */









/* FOOTER */




.flexLinks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}



/* FOOTER END */

















/* //////////////////// PRELOADER //////////////////// */





/* =========================================
   WIEDO PRELOADER
========================================= */

html.wiedo-preloading,
html.wiedo-preloading body {
  overflow: hidden !important;
}


/* Fullscreen overlay */

.wiedo-preloader {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: grid;
  place-items: center;

  background: #fcfaf6;

  overflow: hidden;

  will-change:
    transform,
    opacity,
    filter;
}


/* Logo size */

.wiedo-preloader__logo {
  width: clamp(155px, 18vw, 215px);
  aspect-ratio: 1;
}


/* SVG */

.wiedo-preloader__logo svg {
  width: 100%;
  height: 100%;

  display: block;

  overflow: visible;

  filter:
    drop-shadow(
      0 16px 32px
      rgba(13, 37, 48, 0.10)
    );
}


/* =========================================
   INITIAL ANIMATION STATES
========================================= */


/* W exists but is revealed through mask */

#wiedoPreloader #w-mark {
  visibility: hidden;
}


/* Dots */

#wiedoPreloader .stamp-dot {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  filter:
    drop-shadow(
      0 5px 6px
      rgba(0, 0, 0, 0.18)
    );
}


/* Star */

#wiedoPreloader #reward-star {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}


#wiedoPreloader #star-main {
  filter:
    drop-shadow(
      0 6px 7px
      rgba(0, 0, 0, 0.18)
    );
}


/* glow */

#wiedoPreloader #star-glow {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  filter:
    blur(5px)
    drop-shadow(
      0 0 18px
      rgba(255, 219, 90, 0.85)
    );
}


/* sparkles */

#wiedoPreloader .star-sparkle {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  filter:
    drop-shadow(
      0 0 5px
      rgba(255, 242, 160, 0.9)
    );
}


/* =========================================
   HIDE REAL WEBSITE WHILE LOADING
========================================= */

html.wiedo-preloading #nav,
html.wiedo-preloading .wiedo-story {
  opacity: 0;
}


/* Important:
   do not use display:none;
   Three.js needs real dimensions.
*/


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .wiedo-preloader__logo {
    width: clamp(
      145px,
      43vw,
      190px
    );
  }

}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

  .wiedo-preloader {
    will-change: opacity;
  }

}




  .wiedo-preloader {
    isolation: isolate;
    contain: layout paint;
    transform: translateZ(0);
  }

  .wiedo-preloader__logo {
    transform: translateZ(0);
  }

  #wiedoPreloader #w-draw-path {
    shape-rendering: geometricPrecision;
  }




/* //////////////////// PRELOADER END //////////////////// */