/* Brand, game showcase and motion layer. Core component styles live in style.css. */
:root{--blue:#3668ee;--ink:#202c47;--muted:#6e7790;--warm:#ffbf61;--radius:18px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{border-bottom-color:#eef0f8;background:rgba(255,255,255,.93);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 5px 26px #27375b0c}
.site-header::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,#4578f5,#ffbf61);transform:scaleX(var(--scroll-progress,0));transform-origin:left}
.brand>img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.brand:hover>img{transform:rotate(-9deg) scale(1.08)}
nav>a{position:relative}nav>a:not(.nav-contact)::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav>a:hover::after,nav>a.active::after{transform:scaleX(1)}
nav a.nav-contact{background:#3668ee;border-radius:7px}nav a.nav-contact:hover,nav a.nav-contact.active{color:white;background:#2857d4}
.button{border-radius:8px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s}
.button>span{transition:transform .25s}.button:hover>span{transform:translate(3px,-2px)}
.button.primary{background:var(--blue);box-shadow:0 8px 24px #3668ee28}.button.primary:hover{box-shadow:0 12px 27px #3668ee38}
.lively-hero{position:relative;background:#f5f8ff;isolation:isolate}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.color-orb{position:absolute;display:block;filter:blur(55px);border-radius:50%;animation:orb-drift 12s ease-in-out infinite alternate}
.orb-blue{width:600px;height:600px;background:#c8ddff99;right:-80px;top:-120px}
.orb-gold{width:300px;height:300px;background:#ffe6b1b3;right:21%;bottom:-160px;animation-delay:-4s}
.orb-pink{width:270px;height:270px;background:#f9dce880;left:-140px;top:50%;animation-delay:-7s}
.floating-symbol{position:absolute;color:#d2def9;font-size:27px;font-weight:300;animation:float-symbol 8s ease-in-out infinite}
.symbol-a{top:14%;left:46%;color:#efb450;font-size:30px}.symbol-b{left:5%;bottom:10%;animation-delay:-3s}.symbol-c{right:4%;bottom:17%;font-size:50px;animation-delay:-5s}
.lively-hero .hero-grid{grid-template-columns:1.07fr 1fr;min-height:655px;padding-top:28px;padding-bottom:18px;gap:24px}
.lively-hero h1{font-size:clamp(38px,3.8vw,55px);line-height:1.45;letter-spacing:-1.8px}
.hero-line{display:block;animation:line-arrive .9s cubic-bezier(.22,.61,.36,1) both}.hero-line:nth-child(2){animation-delay:.12s}
.animated-underline{position:relative;white-space:nowrap}.animated-underline::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:8px;border-radius:50%;border-top:3px solid #eab65b;transform:rotate(-3deg) scaleX(0);transform-origin:left;animation:draw-underline .7s .6s ease forwards}
.lively-hero .hero-description{font-size:15px;line-height:2;margin-top:29px;animation:line-arrive .9s .25s both}
.lively-hero .hero-actions{animation:line-arrive .9s .37s both}
.lively-hero .hero-note{font-size:11px;margin-top:34px;color:#7d87a0}
.lively-hero .hero-bottom{border-color:#dfe7f5;color:#7d87a0;font-size:9px;padding-top:20px;padding-bottom:20px}
.hero-bottom>a{font-size:11px;letter-spacing:0}.scroll-arrow{display:inline-block;margin-left:20px;animation:scroll-nudge 2s ease-in-out infinite}
.showcase{height:555px;position:relative;isolation:isolate;--pointer-x:0;--pointer-y:0}
.showcase-halo{position:absolute;width:420px;height:420px;left:45px;top:65px;background:linear-gradient(145deg,#d6e8ffcc,#e4e6ff66);border:1px solid #ffffffb3;border-radius:42% 58% 53% 47% / 44% 40% 60% 56%;animation:halo-morph 14s ease-in-out infinite}
.showcase-halo::after{content:'';position:absolute;inset:-22px;border:1px dashed #afc6eb77;border-radius:50%;animation:halo-turn 75s linear infinite}
.showcase-caption{position:absolute;left:60px;top:22px;font-size:8px;color:#8292b1;letter-spacing:2px;transform:rotate(-5deg)}
.showcase-deck{position:absolute;inset:0;transform:translate(calc(var(--pointer-x)*9px),calc(var(--pointer-y)*7px));transition:transform .5s ease-out}
.deck-card{position:absolute;width:175px;height:300px;overflow:hidden;border:7px solid white;box-shadow:0 25px 40px #526a9720;border-radius:18px;top:130px}
.deck-card img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.deck-card-back{left:16px;transform:rotate(-15deg);animation:card-breathe-back 7s ease-in-out infinite}
.deck-card-side{right:-3px;transform:rotate(15deg);top:144px;animation:card-breathe-side 8s -2s ease-in-out infinite}
.showcase-window{position:absolute;left:50%;top:67px;transform:translateX(-50%) rotate(-3deg);width:250px;height:418px;border:8px solid white;border-radius:22px;box-shadow:0 30px 60px #36507c33;overflow:hidden;background:white;animation:main-card-float 6s ease-in-out infinite}
.showcase-slide{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .8s,transform 1.2s;pointer-events:none}
.showcase-slide.is-active{opacity:1;transform:scale(1)}
.showcase-slide>img{width:100%;height:100%;object-fit:cover;object-position:50% 47%}
.showcase-slide::after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent 20%,#17243e08 45%,#17243ed9 100%)}
.showcase-slide figcaption{position:absolute;bottom:20px;left:18px;right:12px;z-index:1;color:white;line-height:1.6}
.showcase-slide figcaption>span{font-size:8px;letter-spacing:1.7px;color:#e6ebf7}.showcase-slide figcaption strong{display:block;font-size:26px;font-weight:600;margin-top:4px}.showcase-slide figcaption small{display:block;font-size:9px;color:#e7ecf6;margin-top:4px}
.mascot-bubble{position:absolute;right:4px;top:23px;width:99px;height:108px;border-radius:22px;background:white;border:5px solid white;box-shadow:0 12px 30px #56709d12;transform:rotate(9deg);animation:mascot-float 5s -1s ease-in-out infinite}
.mascot-bubble>img{width:100%;height:88px;object-fit:contain}.mascot-bubble>span{display:block;position:absolute;bottom:-18px;left:6px;white-space:nowrap;font-size:8px;letter-spacing:1px;font-weight:700;background:#ffd17c;padding:3px 9px;border-radius:4px;color:#745225}
.floating-note{position:absolute;left:2px;bottom:76px;z-index:2;font-size:11px;background:white;border:1px solid #e4eaf7;border-radius:7px;padding:11px 17px;box-shadow:0 10px 30px #56709d10;animation:note-float 7s -3s ease-in-out infinite;transform:rotate(-6deg)}
.floating-note>span{color:#eeb256;margin-right:9px;font-size:17px}
.showcase-controls{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:#ffffffbf;border:1px solid #e0e7f5;border-radius:40px;padding:8px 11px;box-shadow:0 4px 20px #536c9610}
.carousel-arrow,.carousel-pause{background:transparent;border:0;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#536685;font-size:16px;padding:0}.carousel-arrow:hover,.carousel-pause:hover{background:#e9effc;color:var(--blue)}
.carousel-pause{font-size:13px;border-left:1px solid #dfe7f5;border-radius:0;padding-left:4px;width:24px}
.slide-tabs{display:flex;align-items:center;gap:8px}.slide-tab{width:6px;height:6px;padding:0;border:0;border-radius:10px;background:#becbe0;transition:width .35s,background .35s}.slide-tab.is-active{width:22px;background:var(--blue)}
.achievements{background:white;position:relative;border-bottom:1px solid #e8edf6;padding:42px 0 27px}
.achievements-inner{display:grid;grid-template-columns:1.05fr 1.25fr .85fr .85fr;align-items:center;gap:25px}
.achievement-intro .eyebrow{font-size:9px;margin-bottom:10px}.achievement-intro h2{font-size:22px;line-height:1.55;letter-spacing:0}
.achievement-main{border-left:1px solid #e4eaf3;padding-left:42px}.metric-number{font-size:42px;line-height:1.2;font-weight:650;letter-spacing:-1.7px;white-space:nowrap;font-variant-numeric:tabular-nums}
.achievement-main .metric-number{font-size:59px;color:var(--blue)}.metric-number em{font-style:normal;font-size:.65em;vertical-align:top;margin-left:3px}.metric-number small{font-size:12px;font-weight:400;color:#7d87a0;letter-spacing:0;margin-left:8px}
.achievements p:not(.eyebrow){font-size:12px;margin-top:10px}.achievement-main>span{display:block;font-size:10px;color:#8992a5;margin-top:3px}
.achievements .achievement-statement{font-size:10px;color:#7f8ca2;margin-top:24px;text-align:center}
.section{padding:90px 0}.section-heading .eyebrow{font-size:10px;color:#6379ac}.section-heading h2{font-size:37px;line-height:1.5}.section-heading>p{font-size:13px;line-height:2}
.service-main{background:linear-gradient(135deg,#ecf3ff,#f1f1ff);border-radius:22px;transition:transform .4s,box-shadow .4s}.service-main:hover{transform:translateY(-5px);box-shadow:0 18px 45px #526a9710}
.service-secondary article{border-radius:18px;transition:transform .35s,border-color .35s}.service-secondary article:hover{transform:translateX(5px);border-color:#aac1f8}
.service-icon{display:inline-block;animation:service-spark 8s ease-in-out infinite}.service-chip{background:#fff9}
.works{background:linear-gradient(180deg,#f5f8ff,#fff8f2)}.game-grid{gap:28px}.game-card{background:white;border:1px solid #edf0f4;border-radius:14px;box-shadow:0 6px 18px #384e6e08;transition:transform .3s,box-shadow .3s;will-change:transform}
.game-card:hover{transform:translateY(-9px);box-shadow:0 20px 40px #384e6e1c}.game-image{border-radius:13px 13px 0 0;height:390px}.game-caption{padding:18px 20px 20px}.game-caption h3{font-size:21px}.game-caption>span{transition:transform .3s}.game-card:hover .game-caption>span{transform:translate(3px,-3px);color:var(--blue)}
.game-view{background:#fffc;backdrop-filter:blur(8px)}.more-games{border-top:0;margin-top:28px;border-bottom:0}.more-games summary{padding-bottom:18px}.more-games ul{grid-template-columns:repeat(3,1fr);gap:12px;padding-bottom:0}.more-games li{background:#fff9;border-color:#e7eaf3;border-radius:8px;padding:17px 20px;font-size:14px;transition:transform .3s,border-color .3s}.more-games li:hover{transform:translateY(-3px);border-color:#c0d2fa}
.steps li{transition:transform .3s}.steps li:hover{transform:translateY(-5px)}.steps li::before{box-shadow:0 0 0 5px #edf2ff}.step-index{font-weight:650}
.cooperation-grid article{border-radius:12px;padding:25px 23px;background:#f7f9fd}.cooperation-heading{margin-bottom:27px}.cooperation-grid{margin-top:0;gap:22px}.company-letter{background:#eaf0ff}.example-note{margin-top:13px}
.about{background:#f4f7fe}.about-brand{border:0;position:relative;box-shadow:0 16px 45px #3d568612;transform:rotate(-3deg);transition:transform .6s}.about-brand:hover{transform:rotate(1deg) translateY(-6px)}.about-brand img{animation:about-mascot 8s ease-in-out infinite}.about-brand::before{content:'✦';position:absolute;top:-20px;left:-17px;color:#eeb452;font-size:42px;animation:service-spark 8s ease-in-out infinite}
.about-copy h2{font-size:34px}.about-principles strong{color:#3c5d9e}.contact{background:linear-gradient(120deg,#386aee,#3d5edb)}.contact::after{animation:contact-orbit 14s ease-in-out infinite alternate}.contact::before{content:'';position:absolute;left:-80px;bottom:-160px;width:350px;height:350px;border:1px solid #ffffff20;border-radius:50%;animation:contact-orbit 12s -4s ease-in-out infinite alternate}.contact .button{box-shadow:none}.contact h2{font-size:40px}
.js-motion .reveal{opacity:0;transform:translateY(27px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--reveal-delay,0ms)}.js-motion .reveal.is-visible{opacity:1;transform:translateY(0)}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.carousel-pause:disabled{opacity:.45;cursor:default}.slide-tab{position:relative}.slide-tab::before{content:'';position:absolute;inset:-11px -5px}
@keyframes line-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes draw-underline{to{transform:rotate(-3deg) scaleX(1)}}
@keyframes orb-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,35px) scale(1.12)}}
@keyframes float-symbol{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}}
@keyframes halo-morph{0%,100%{border-radius:42% 58% 53% 47% / 44% 40% 60% 56%;transform:rotate(-8deg)}50%{border-radius:58% 42% 41% 59% / 53% 61% 39% 47%;transform:rotate(8deg)}}
@keyframes halo-turn{to{transform:rotate(360deg)}}
@keyframes card-breathe-back{0%,100%{transform:rotate(-15deg) translateY(0)}50%{transform:rotate(-12deg) translateY(-8px)}}
@keyframes card-breathe-side{0%,100%{transform:rotate(15deg) translateY(0)}50%{transform:rotate(12deg) translateY(8px)}}
@keyframes main-card-float{0%,100%{transform:translateX(-50%) rotate(-3deg) translateY(0)}50%{transform:translateX(-50%) rotate(-1deg) translateY(-9px)}}
@keyframes mascot-float{0%,100%{transform:rotate(9deg) translateY(0)}50%{transform:rotate(2deg) translateY(-13px)}}
@keyframes note-float{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-3deg) translateY(8px)}}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes service-spark{0%,90%,100%{transform:rotate(0)}95%{transform:rotate(90deg)}}
@keyframes about-mascot{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes contact-orbit{to{transform:translate(35px,-25px) scale(1.08)}}
@media(min-width:1500px){.lively-hero .hero-grid{min-height:710px}.showcase{transform:scale(1.05)}}
@media(max-width:1100px){nav{gap:20px}.lively-hero .hero-grid{gap:15px;min-height:620px}.lively-hero h1{font-size:43px}.showcase{height:520px}.showcase-window{width:225px;height:390px;top:61px}.deck-card{width:147px;height:270px;top:130px}.deck-card-back{left:0}.deck-card-side{right:-4px}.showcase-halo{width:340px;height:370px;left:28px;top:60px}.showcase-caption{left:24px;font-size:7px}.mascot-bubble{width:83px;height:91px;right:0;top:20px}.mascot-bubble>img{height:75px}.floating-note{left:-5px;font-size:10px;bottom:66px;padding:9px 14px}.achievement-main{padding-left:30px}.metric-number{font-size:37px}.achievement-main .metric-number{font-size:52px}.achievement-intro h2{font-size:20px}.game-image{height:350px}}
@media(max-width:850px){nav{gap:13px}.lively-hero .hero-grid{min-height:575px;gap:5px}.lively-hero h1{font-size:35px;letter-spacing:-1px}.lively-hero .hero-description{font-size:13px}.lively-hero .hero-note{font-size:9px}.showcase{height:475px}.showcase-window{width:190px;height:340px;top:60px;border-width:6px}.deck-card{width:125px;height:230px;top:125px;border-width:5px}.deck-card-back{left:-7px}.deck-card-side{right:-5px}.showcase-halo{width:280px;height:320px;left:10px;top:65px}.mascot-bubble{width:72px;height:78px;right:-3px;top:15px}.mascot-bubble>img{height:65px}.mascot-bubble>span{font-size:6px;bottom:-13px;left:0}.floating-note{bottom:59px;left:-12px;font-size:9px;padding:6px 9px}.showcase-slide figcaption strong{font-size:23px}.showcase-slide figcaption small{font-size:8px}.showcase-slide figcaption{left:12px;bottom:15px}.showcase-caption{left:0;font-size:6px}.showcase-controls{bottom:6px;gap:10px;padding:6px 8px}.achievements-inner{gap:15px;grid-template-columns:1.1fr 1.2fr .85fr .85fr}.achievement-main{padding-left:20px}.achievement-intro h2{font-size:17px}.achievement-intro .eyebrow{font-size:8px}.achievement-main .metric-number{font-size:43px}.metric-number{font-size:30px}.metric-number small{font-size:10px;margin-left:4px}.achievements p:not(.eyebrow){font-size:10px}.achievement-main>span{font-size:9px}.section-heading h2{font-size:32px}.game-image{height:300px}.game-caption{padding:15px}.game-caption h3{font-size:18px}.about-copy h2{font-size:28px}.contact h2{font-size:33px}}
@media(max-width:700px){.header-inner{height:74px}nav>a:not(.nav-contact)::after{display:none}.lively-hero .hero-grid{grid-template-columns:1fr;padding-top:40px;padding-bottom:8px;gap:18px}.lively-hero h1{font-size:clamp(31px,7.4vw,43px);line-height:1.5;letter-spacing:-1px}.lively-hero .hero-description{font-size:13px;margin-top:24px;line-height:1.95}.lively-hero .hero-note{font-size:10px;margin-top:27px;gap:10px}.lively-hero .hero-actions{margin-top:27px}.lively-hero .hero-actions .text-link{font-size:12px}.showcase{width:min(365px,100%);height:435px;margin:8px auto 0}.showcase-window{width:202px;height:345px;top:37px}.deck-card{width:133px;height:235px;top:104px}.deck-card-back{left:0}.deck-card-side{right:0}.showcase-halo{left:20px;top:50px;width:300px;height:300px}.showcase-caption{font-size:6px;top:5px;left:20px}.mascot-bubble{width:77px;height:85px;top:0;right:3px}.mascot-bubble>img{height:70px}.floating-note{bottom:53px;left:0;font-size:9px;padding:7px 10px}.showcase-controls{bottom:0;gap:14px}.lively-hero .hero-bottom{margin-top:20px;font-size:7px;gap:8px;letter-spacing:.5px;padding-top:17px;padding-bottom:17px}.hero-bottom>a{font-size:9px;white-space:nowrap}.scroll-arrow{margin-left:8px}.symbol-a{top:43%;left:85%;font-size:23px}.symbol-b{left:4%;bottom:8%}.symbol-c{font-size:25px}.orb-blue{width:400px;height:500px;top:auto;bottom:-100px;right:-130px}.achievements{padding:31px 0 23px}.achievements-inner{grid-template-columns:1fr 1fr;gap:23px 20px}.achievement-intro h2{font-size:20px}.achievement-intro .eyebrow{font-size:8px}.achievement-main{padding-left:19px}.achievement-main .metric-number{font-size:44px}.metric-number{font-size:35px}.achievement-small{padding-top:19px;border-top:1px solid #e8edf5}.achievements p:not(.eyebrow){font-size:11px}.achievements .achievement-statement{text-align:left;font-size:10px;line-height:1.8;margin-top:23px}.section{padding:60px 0}.section-heading h2{font-size:29px}.section-heading>p{font-size:13px}.game-grid{gap:25px}.game-image{height:365px}.game-caption{padding:17px 20px 20px}.game-caption h3{font-size:21px}.more-games ul{grid-template-columns:1fr 1fr;gap:10px}.more-games li{font-size:13px;padding:13px 15px}.more-games summary{font-size:13px}.cooperation-heading{margin-bottom:21px}.cooperation-grid{gap:15px}.cooperation-grid article{padding:23px 20px}.cooperation-grid article+article{border-top:0}.about-brand{width:235px;margin-top:12px}.about-copy h2{font-size:29px}.contact h2{font-size:33px}.js-motion .reveal{transform:translateY(18px)}}
@media(max-width:360px){.showcase-window{width:175px;height:320px;top:40px}.deck-card{width:111px;height:220px;top:105px}.showcase{height:412px}.showcase-halo{width:250px;height:275px;left:15px}.mascot-bubble{width:63px;height:71px;right:0;top:9px}.mascot-bubble>img{height:59px}.floating-note{font-size:8px;padding:5px 8px;bottom:60px}.showcase-slide figcaption strong{font-size:21px}.showcase-slide figcaption small{font-size:7px}.showcase-caption{font-size:5px;letter-spacing:1px;left:10px}.hero-actions{gap:15px}.lively-hero .hero-actions .button{padding:12px 15px;gap:12px}.lively-hero .hero-actions .text-link{font-size:11px;gap:8px}.achievement-intro h2{font-size:18px}.achievement-main{padding-left:15px}.achievement-main .metric-number{font-size:39px}.achievements p:not(.eyebrow){font-size:10px}.game-image{height:330px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-line,.lively-hero .hero-description,.lively-hero .hero-actions{opacity:1!important;transform:none!important}.animated-underline::after{transform:rotate(-3deg) scaleX(1)}.js-motion .reveal{opacity:1!important;transform:none!important}.showcase-deck{transform:none}.showcase-window{transform:translateX(-50%) rotate(-3deg)}.about-brand{transform:none}.slide-tab.is-active{width:22px}}