/* Playfold / a single folded gateway, carried from the mark into the experience. */
@font-face{font-family:Playfold;src:url('/brand/source/SpaceGrotesk-Variable.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{--ink:#111215;--paper:#f4f3ed;--accent:#ddf85b;--orange:var(--accent);--lavender:#a49cff;--line:#ffffff20}
body{background:var(--ink)}
h1,h2,h3,h4,.footer-title{font-family:Playfold,Martian,Arial,sans-serif;font-weight:700}
.header{height:104px;border-bottom-color:#ffffff20}
.brand-logo{width:196px;height:auto}
.header nav{font-size:.875rem;gap:32px}
.header nav a:hover{color:var(--accent)}
.language{border-radius:7px;width:40px;height:40px;border-color:#ffffff30}
.hero.playground{min-height:720px;grid-template-columns:1.1fr 1fr;padding-top:40px;padding-bottom:125px;overflow:visible}
.hero-outline{position:absolute;width:52%;height:auto;left:-9%;top:9%;opacity:.026;transform:rotate(-13deg);pointer-events:none;z-index:0}
.hero .hero-copy{position:relative;z-index:3;max-width:670px}
.hero .eyebrow{font-family:Playfold,Arial,sans-serif;color:#a7a9a7;font-size:.75rem;letter-spacing:.1em;font-weight:500;line-height:1.6;display:block;margin-bottom:29px}
.hero h1{font-family:Playfold,Arial,sans-serif;font-size:clamp(3.6rem,6.65vw,6.9rem);line-height:1.04;letter-spacing:-.065em;text-transform:uppercase;word-spacing:0;margin:0 0 33px;font-weight:700}
.hero h1>span,.hero h1>em{display:block;white-space:nowrap}
.hero h1 em{color:var(--accent);padding-left:.19em}
.hero-intro{max-width:430px}
.hero-description{font-size:1rem;line-height:1.85;color:#b3b5b2;max-width:370px}
.hero .actions{gap:24px;margin-top:28px}
.button{font-family:Playfold,Martian,Arial,sans-serif;font-size:.875rem;font-weight:700;border-radius:6px;min-height:54px;padding:15px 24px}
.button.orange{background:var(--accent);color:var(--ink)}
.button.orange:hover{background:#e7ff7a;box-shadow:0 10px 34px #ddf85b1a}
.text-link{font-family:Playfold,Martian,Arial,sans-serif;font-size:.875rem}
.hero-art{pointer-events:none;z-index:2;mix-blend-mode:lighten;isolation:auto}
.hero-art img{mask-image:linear-gradient(90deg,transparent,#000 5% 95%,transparent),linear-gradient(transparent,#000 5% 95%,transparent);mask-composite:intersect}
.hero-release{position:absolute;z-index:4;right:8%;bottom:109px;display:flex;align-items:center;gap:14px;width:265px;padding:13px 0;border-top:1px solid #ffffff28;border-bottom:1px solid #ffffff28;transition:transform .4s var(--ease-out),border-color .3s}
.hero-release:hover{transform:translateX(5px);border-color:var(--accent)}
.hero-release img{border-radius:10px;width:50px;height:50px}
.hero-release>span{display:flex;flex-direction:column;gap:5px}
.hero-release small{color:#b1b4af;font:500 .75rem Playfold,Arial,sans-serif;letter-spacing:.12em}
.hero-release strong{font:500 1.125rem Playfold,Arial,sans-serif;letter-spacing:-.025em}
.hero-release svg{display:none}
.hero-bottom{bottom:21px;min-height:44px;border:0;padding-top:0;font-family:Playfold,Arial,sans-serif;font-size:.75rem;letter-spacing:.11em;color:#81857f}
.motion-toggle{color:#a5a9a3;font-family:Playfold,Arial,sans-serif;font-size:.75rem}
.studio-ribbon{position:relative;z-index:5;background:var(--accent);color:var(--ink);overflow:hidden;transform:skewY(-1.3deg);padding-block:19px;margin-block:0 14px}
.ribbon-track{display:flex;width:max-content;will-change:transform;animation:ribbon-drift 38s linear infinite}
.ribbon-track>span{display:flex;align-items:center;gap:38px;padding-right:38px;font:700 1.06rem Playfold,Arial,sans-serif;letter-spacing:.1em;white-space:nowrap}
.ribbon-track img{width:28px;height:28px}
@keyframes ribbon-drift{to{transform:translateX(-50%)}}
.games-section{background:var(--paper);border-radius:0;padding-top:96px;margin-top:-14px}
.section-heading .eyebrow{font-family:Playfold,Arial,sans-serif;color:#686d62;font-size:.75rem;letter-spacing:.12em}
.section-heading h2{letter-spacing:-.06em;line-height:1.02;font-size:clamp(2.9rem,4.8vw,4.7rem)}
.featured{grid-template-columns:1.35fr 1fr}
.feature-image,.card-image,.game-cover{border-radius:8px;box-shadow:0 18px 35px -28px #11121566}
.image-label{background:var(--accent);border-radius:3px;font:600 .75rem Playfold,Arial,sans-serif;letter-spacing:.09em;box-shadow:none}
.feature-copy h3{letter-spacing:-.055em;font-size:clamp(2.7rem,3.6vw,3.6rem)}
.feature-copy h3 span{font-family:Playfold,Arial,sans-serif}
.up-next h3{font-size:1.6rem;letter-spacing:-.045em}
.mini-game img{border-radius:5px}
.mini-game h4{font-weight:600}
.mini-game:hover h4{color:#526500}
.studio-strip{padding-block:115px}
.studio-strip::before{background:radial-gradient(circle,#ddf85b0c,transparent 65%)}
.studio-strip>.eyebrow{font-family:Playfold,Arial,sans-serif;font-size:.75rem;color:var(--accent);letter-spacing:.14em}
.studio-strip h2{font-size:clamp(3.4rem,6vw,6rem);letter-spacing:-.06em}
.studio-strip>div p{font-size:1.05rem;line-height:1.9}
footer{background:var(--accent);color:var(--ink);position:relative}
.footer-mark{position:absolute;right:-3%;bottom:-24%;width:33%;height:auto;transform:rotate(-13deg);opacity:.07;z-index:-1;pointer-events:none}
.footer-top{padding-block:74px;position:relative}
.footer-title{font-size:clamp(3.4rem,5.9vw,5.8rem);line-height:.98;letter-spacing:-.07em}
.footer-links{font-family:Playfold,Arial,sans-serif;font-weight:500}
.footer-links a:hover{color:#444d20}
.page-intro h1{font-family:Playfold,Arial,sans-serif;letter-spacing:-.055em;line-height:1.02}
.page-intro em{color:#536707}
.page-intro .eyebrow{font-family:Playfold,Arial,sans-serif}
.game-heading .eyebrow,.development-note{color:var(--accent)}
.game-hero .black{background:var(--accent);color:var(--ink)}
.about-content{gap:90px;grid-template-columns:1.1fr 1fr;align-items:center;padding-top:10px;padding-bottom:85px}
.about-art{position:relative;border-radius:8px;background:var(--ink);overflow:hidden}
.about-art img{width:100%;height:auto;transform:rotate(-6deg) scale(.9);transition:transform 1.2s var(--ease-out);mix-blend-mode:lighten}
.about-art:hover img{transform:rotate(0) scale(.96)}
.about-art-label{position:absolute;z-index:2;top:25px;left:25px;color:#c9cdc2;font:500 .75rem Playfold,Arial,sans-serif;letter-spacing:.15em}
.about-content h2{font-size:clamp(2.5rem,3.6vw,3.7rem);letter-spacing:-.055em}
.values{gap:60px;padding-block:45px 90px}
.values article>span{font:400 2.6rem Playfold,Arial,sans-serif;color:#7f8575;letter-spacing:-.07em}
.values h3{font-size:1.5rem;line-height:1.15;font-weight:600;margin-top:25px}
.brand-preview{background:var(--ink);border-radius:6px;position:relative;overflow:hidden;min-height:350px}
.brand-preview::before{content:"";position:absolute;width:400px;height:400px;right:-95px;top:-95px;background:url('/brand/mark-paper.svg') center/contain no-repeat;opacity:.04;transform:rotate(-13deg)}
.brand-preview img{position:relative;z-index:1;width:min(570px,85%)}
.brand-preview>span{font-family:Playfold,Arial,sans-serif;color:var(--accent)}
.swatch.orange{background:var(--accent)}
.swatch.lavender{background:var(--lavender)}
.filters button{border-radius:5px;font-family:Playfold,Arial,sans-serif}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--accent)}
.notice{border-left-color:#536707}
.legal-content a:not(.button):hover{color:#536707}
@media(min-width:761px){
 .hero-art{position:absolute;width:46%;margin:0;right:3%;top:39%;transform:translate3d(var(--scene-x,0px),calc(-50% + var(--scene-y,0px)),0) rotate(-8deg);mix-blend-mode:lighten;isolation:auto}
 [data-motion=off] .hero-art{transform:translateY(-50%) rotate(-8deg)}
}
@media(min-width:1600px){.hero.playground{min-height:790px}.hero-art{right:3%;top:39%;width:48%}}
@media(max-width:1100px) and (min-width:761px){
 .hero.playground{min-height:660px;padding-top:30px;padding-bottom:128px}
 .hero h1{font-size:6.5vw}
 .hero .eyebrow{font-size:.75rem;max-width:300px;line-height:1.7;margin-bottom:24px}
 .hero .actions{gap:19px}.hero-description{max-width:330px;font-size:.9375rem}
 .hero-release{right:2%;bottom:92px;width:225px}
 .hero-art{top:37%;width:50%;right:0}
 .about-content{gap:45px}
}
@media(max-width:760px){
 .header{height:90px}.brand-logo{width:166px}.header-actions{gap:9px}.language{width:36px;height:36px}
 .hero.playground{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:38px;padding-bottom:77px}
 .hero-outline{width:90%;left:-18%;top:10%}
 .hero .hero-copy{max-width:none}.hero .eyebrow{font-size:.75rem;letter-spacing:.075em;margin-bottom:25px;max-width:300px}
 .hero h1{font-size:clamp(2.5rem,10.7vw,4.7rem);line-height:1.05;letter-spacing:-.07em;margin-bottom:25px}
 .hero h1 em{padding-left:.19em}.hero-description{font-size:1rem;max-width:390px;line-height:1.8}
 .hero .actions{gap:22px;margin-top:25px}.button{padding:14px 20px;min-height:52px}
 .hero-art{position:relative;top:auto;right:auto;width:min(98%,520px);max-width:98%;margin:10px auto -12px;transform:rotate(-8deg)!important;align-self:center}
 [data-motion=on] .hero-art .kinetic-object{animation:enter-up 1.2s var(--ease-out) both,sculpture-float 22s 1.2s ease-in-out infinite}
 .hero-release{position:relative;right:auto;bottom:auto;width:100%;margin-top:4px;padding:13px 0;gap:13px}
 .hero-release img{width:46px;height:46px}.hero-release small{font-size:.75rem}.hero-release strong{font-size:1.125rem}
 .hero-bottom{bottom:14px;gap:12px;align-items:center}.hero-bottom>span{font-size:.75rem;letter-spacing:.075em;max-width:155px;line-height:1.8}
 .motion-toggle{font-size:.75rem;min-width:44px}
 .studio-ribbon{padding-block:15px;margin-bottom:8px}.ribbon-track>span{font-size:.8125rem;gap:25px;padding-right:25px}.ribbon-track img{width:24px;height:24px}
 .games-section{padding-top:64px;margin-top:-8px}.section-heading h2{font-size:2.9rem}.featured{grid-template-columns:1fr}
 .feature-copy h3{font-size:2.7rem}.image-label{font-size:.75rem}.studio-strip{padding-block:75px}.studio-strip h2{font-size:3.7rem}
 .footer-top{padding-block:52px}.footer-title{font-size:3.6rem}.footer-mark{width:60%;right:-12%;bottom:-7%}
 .about-content{grid-template-columns:1fr;gap:38px;padding-bottom:50px}.about-content h2{font-size:2.7rem}.about-art-label{left:20px;top:20px}
 .values{grid-template-columns:1fr;gap:40px;padding-block:35px 65px}.values h3{margin-top:15px}.values article>span{font-size:2.1rem}
 .brand-preview{min-height:250px}.brand-preview img{width:100%}.brand-preview>span{font-size:.75rem;letter-spacing:.08em}
}
@media(max-width:380px){html[lang=tr] .hero h1{font-size:clamp(1.7rem,8.8vw,2.3rem)}.hero h1{font-size:10.5vw}.hero .actions{gap:17px}.hero .eyebrow{max-width:250px}}
[data-motion=off] .ribbon-track{animation:none;will-change:auto}
[data-motion=off] .hero-release:hover,[data-motion=off] .about-art:hover img{transform:none}
[data-motion=off] .about-art img{transform:none}
@media(min-width:761px) and (prefers-reduced-motion:reduce){.hero-art{transform:translateY(-50%) rotate(-8deg)!important}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none;will-change:auto}.about-art img{transform:none}}
