html{scroll-behavior:smooth}
.brand-page{margin:0;background:#f7faff;color:#071132;font-family:"Manrope",ui-sans-serif,system-ui,sans-serif}
.brand-container{width:min(1180px,calc(100% - 56px));margin:0 auto}
.brand-header{position:sticky;top:0;z-index:100;background:rgba(247,250,255,.84);backdrop-filter:blur(18px);padding:18px 0;border-bottom:1px solid rgba(18,60,255,.06)}
.brand-nav{width:min(1180px,calc(100% - 56px));height:70px;margin:0 auto;background:rgba(255,255,255,.92);border:1px solid #e8eef8;border-radius:18px;box-shadow:0 16px 45px rgba(8,25,74,.08);display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.brand-logo,.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#071132;font-weight:950;font-size:30px;letter-spacing:-1.2px}.brand-logo img,.footer-brand img{width:42px;height:42px;border-radius:10px}
.brand-links{display:flex;align-items:center;gap:34px}.brand-links a{position:relative;text-decoration:none;color:#071132;font-size:15px;font-weight:850;padding:10px 0;transition:color .24s ease}.brand-links a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;border-radius:20px;background:linear-gradient(90deg,#123cff,#4f6fff);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}.brand-links a:hover,.brand-links a.active{color:#123cff}.brand-links a:hover::after,.brand-links a.active::after{transform:scaleX(1)}
.brand-actions{display:flex;align-items:center;gap:16px}.brand-phone,.brand-lang{display:flex;align-items:center;gap:7px;color:#071132;text-decoration:none;font-size:14px;font-weight:850}.brand-lang{border:0;background:transparent;cursor:pointer}.brand-phone [data-hicon],.brand-lang [data-hicon]{width:19px;height:19px;display:grid;place-items:center;color:#061a63}
.brand-demo{height:46px;padding:0 28px;border-radius:10px;background:linear-gradient(135deg,#06123e,#123cff);color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:900;box-shadow:0 14px 28px rgba(18,60,255,.16)}
.page-enter{animation:pageEnter .42s ease both}.page-leave{opacity:0;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease}@keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.brand-footer{background:linear-gradient(135deg,#06123e,#05112c 55%,#08266f);color:#fff;padding:58px 0}.brand-footer-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr 1fr 1fr;gap:54px}.brand-footer a{display:block;color:#dce6ff;text-decoration:none;margin:11px 0}.brand-footer p{color:#dce6ff;line-height:1.6}.brand-footer h4{margin:0 0 18px;color:#fff}.footer-brand{color:#fff;margin-bottom:18px}.brand-socials{display:flex;gap:12px;margin:10px 0 22px}.brand-socials a{width:38px;height:38px;border-radius:10px;background:#123cff;color:#fff;display:grid;place-items:center}.footer-demo{height:46px;width:170px;border-radius:10px;background:#123cff!important;color:#fff!important;display:grid!important;place-items:center;font-weight:900!important}
.brand-page [data-hicon] svg,.brand-page .hicon-ready svg{width:1em;height:1em;fill:none!important;stroke:currentColor!important;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1050px){.brand-links,.brand-actions{display:none}.brand-footer-grid{grid-template-columns:1fr}.brand-nav{width:min(1180px,calc(100% - 32px))}.brand-container{width:min(1180px,calc(100% - 32px))}}

.game-hero{position:relative;min-height:590px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 22%,rgba(18,60,255,.16),transparent 30%),linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%)}
.game-hero::before{content:"";position:absolute;right:-120px;top:70px;width:520px;height:520px;border-radius:50%;background:rgba(18,60,255,.06)}.game-hero::after{content:"";position:absolute;left:80px;bottom:90px;width:180px;height:180px;background-image:radial-gradient(rgba(18,60,255,.18) 1.5px,transparent 1.5px);background-size:18px 18px}
.game-hero-inner{position:relative;z-index:2;text-align:center;max-width:720px}.page-pill{display:inline-flex;height:34px;align-items:center;padding:0 16px;border-radius:999px;background:#eaf0ff;color:#123cff;font-weight:900;margin-bottom:22px}.game-hero h1{font-size:clamp(56px,7vw,92px);line-height:1;margin:0 0 20px;color:#071132;letter-spacing:-4px;font-weight:950}.game-hero h1::first-letter{color:#123cff}.game-hero p{font-size:22px;line-height:1.45;color:#5d6a86;margin:0 auto 42px;font-weight:650}.video-btn{height:54px;padding:0 28px;border-radius:12px;background:linear-gradient(135deg,#123cff,#4f6fff);color:#fff;text-decoration:none;display:inline-flex;gap:10px;align-items:center;font-weight:900;box-shadow:0 18px 36px rgba(18,60,255,.20)}
.floating-icon{position:absolute;color:#123cff;opacity:.85}.floating-icon svg{width:52px;height:52px}.floating-icon.trophy{left:24%;top:28%}.floating-icon.target{right:26%;top:36%}.floating-icon.medal{left:26%;bottom:24%}.floating-icon.star{right:27%;bottom:24%}.scroll-mouse{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);width:30px;height:52px;border:2px solid rgba(18,60,255,.35);border-radius:20px}.scroll-mouse::before{content:"";position:absolute;left:50%;top:9px;width:6px;height:6px;border-radius:50%;background:#123cff;transform:translateX(-50%);animation:mouse 1.5s infinite}@keyframes mouse{to{opacity:0;transform:translate(-50%,18px)}}
.game-features{padding:86px 0;background:#f7faff}.game-section-title{text-align:center;margin-bottom:58px}.game-section-title h2{font-size:42px;margin:0 0 14px;letter-spacing:-1px}.game-section-title p{color:#60708c;font-size:18px}.game-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.game-card{background:#fff;border:1px solid #e5ecf8;border-radius:22px;padding:32px;min-height:250px;box-shadow:0 20px 48px rgba(8,25,74,.08)}.game-card-icon{width:48px;height:48px;border-radius:14px;background:#eaf0ff;color:#123cff;display:grid;place-items:center;margin-bottom:22px}.game-card h3{font-size:22px;margin:0 0 16px;line-height:1.25}.game-card p{color:#60708c;line-height:1.6;margin:0}.game-cta{padding:30px 0 82px;background:#f7faff}.game-cta-box{border-radius:24px;background:linear-gradient(135deg,#123cff,#4f6fff);color:#fff;text-align:center;padding:58px 30px;box-shadow:0 28px 60px rgba(18,60,255,.18)}.game-cta-box h2{font-size:42px;margin:0 0 16px}.game-cta-box p{font-size:18px;margin:0 0 30px;color:#eaf0ff}.game-cta-box a{height:56px;padding:0 30px;border-radius:999px;background:#fff;color:#123cff;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-weight:900}@media(max-width:980px){.game-card-grid{grid-template-columns:1fr}.floating-icon{display:none}}



/* ===== EDUKA Global Loader + Premium Animations ===== */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(18, 60, 255, 0.08), transparent 34%),
    rgba(247, 250, 255, 0.96);
  backdrop-filter: blur(18px);
  transition: opacity .55s ease, visibility .55s ease, transform .55s ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  pointer-events: none;
}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dot {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #b3d4fc;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #6793fb;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

body {
  opacity: 0;
  transition: opacity .45s ease;
}

body.is-ready {
  opacity: 1;
}

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(7px);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1),
    filter .72s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-34px);
  filter: blur(7px);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1),
    filter .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-right {
  opacity: 0;
  transform: translateX(34px);
  filter: blur(7px);
  transition:
    opacity .75s cubic-bezier(.22, 1, .36, 1),
    transform .75s cubic-bezier(.22, 1, .36, 1),
    filter .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-zoom {
  opacity: 0;
  transform: scale(.94);
  filter: blur(8px);
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    transform .72s cubic-bezier(.22, 1, .36, 1),
    filter .72s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-zoom.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.brand-header,
.site-header,
.prices-header,
.game-header {
  animation: headerDrop .65s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes headerDrop {
  from {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

a,
button,
.brand-demo,
.prices-demo,
.game-demo,
.cta,
.primary-btn,
.outline-btn,
.video-btn,
.payment-banner a,
.price-card-text a,
.game-cta-box a {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease,
    border-color .22s ease;
}

a:hover,
button:hover,
.brand-demo:hover,
.prices-demo:hover,
.game-demo:hover,
.cta:hover,
.primary-btn:hover,
.outline-btn:hover,
.video-btn:hover,
.payment-banner a:hover,
.price-card-text a:hover,
.game-cta-box a:hover {
  transform: translateY(-2px);
}

.pricing-table tr,
.game-card,
.feature-card,
.partner-card,
.stat-card,
.payment-banner,
.gamification-price-card,
.brand-footer,
.faq-item,
.dashboard-window,
.hero-shot-frame,
.hero-shot {
  will-change: transform, opacity;
}

.game-card:hover,
.feature-card:hover,
.partner-card:hover,
.stat-card:hover,
.gamification-price-card:hover,
.payment-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 65px rgba(8, 25, 74, .12);
}

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

  .site-loader {
    display: none !important;
  }

  body,
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* TOPBAR FIX LOCK: page styles must not override global topbar. */