:root { --ink:#1f2937; --navy:#0f172a; --purple:#6d6be6; --purple-deep:#6a57eb; --blue:#4b8ef1; --footer:#040710; --max-width:1440px; --page-padding:80px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Inter,Satoshi,Arial,Helvetica,sans-serif; text-rendering:optimizeLegibility; }
a { color:inherit; }
img { display:block; max-width:100%; }
button,input,textarea { font:inherit; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; transform:translateY(-160%); padding:10px 14px; border-radius:8px; background:var(--navy); color:#fff; font-size:14px; text-decoration:none; transition:transform .2s ease; }
.skip-link:focus { transform:translateY(0); }
.navbar { position:fixed; z-index:10; top:0; right:0; left:0; padding:16px; background:transparent; pointer-events:none; }
.nav-inner,.footer-top,.footer-bottom { width:min(100%,var(--max-width)); margin:0 auto; }
.nav-inner { width:min(100%,calc(var(--max-width) - 32px)); min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 20px; border:1px solid transparent; border-radius:999px; pointer-events:auto; transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease,box-shadow .3s ease; }
.navbar.is-scrolled .nav-inner { background:rgba(255,255,255,.82); border-color:rgba(31,41,55,.1); box-shadow:0 12px 32px rgba(15,23,42,.1); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav-left,.nav-right,.nav-links { display:flex; align-items:center; }
.nav-left { gap:40px; }
.brand { width:184px; flex:0 0 auto; }
.brand img { width:184px; height:47px; object-fit:contain; }
.nav-links { gap:4px; }
.nav-links a { padding:7px 10px; color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
.nav-right { gap:16px; }
.language-switch { height:34px; display:flex; align-items:center; padding:3px; border:1px solid rgba(31,41,55,.15); border-radius:999px; background:rgba(255,255,255,.24); }
.language-option { height:100%; display:flex; align-items:center; justify-content:center; padding:0 12px; border:0; border-radius:999px; background:transparent; color:rgba(31,41,55,.58); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background-color .2s ease,color .2s ease,box-shadow .2s ease; }
.language-option.is-active { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(15,23,42,.14); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:14px 28px; border:0; border-radius:999px; background:var(--purple); box-shadow:0 8px 12px rgba(75,142,241,.25); color:#fff; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer; }
.button-small { min-height:0; padding:9px 18px; box-shadow:none; font-size:14px; }
.button-outline { background:#fff; border:1px solid #615fff; box-shadow:none; color:#615fff; }
.nav-links a:hover,.language-option:hover,.footer a:hover { opacity:.78; }
.navbar.is-scrolled .language-switch { background:rgba(255,255,255,.52); }
.hero { padding:16px; }
.hero-panel { width:min(100%,calc(var(--max-width) - 32px)); min-height:828px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:37px; margin:0 auto; padding:0 44px; overflow:hidden; border-radius:10px; background:linear-gradient(180.14deg,#b8dfed .2%,#f4f3f1 56.6%,#68ace9 96%); }
.hero-main { display:flex; align-items:center; justify-content:center; gap:0; min-height:443px; }
.hero-art { width:443px; height:443px; flex:0 0 auto; overflow:hidden; }
.hero-art img { width:100%; height:100%; object-fit:contain; object-position:center; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:32px; }
.eyebrow { margin:0; padding:6px 14px; border:1px solid rgba(75,142,241,.25); border-radius:999px; background:rgba(255,255,255,.41); color:var(--purple); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.hero h1 { margin:0; color:var(--ink); font-size:clamp(44px,4.55vw,66px); line-height:1.13; letter-spacing:-3px; white-space:nowrap; }
.hero h1 span { color:var(--purple-deep); }
.hero-actions { display:flex; gap:14px; }
.stats { display:flex; justify-content:center; gap:32px; }
.stat-card { width:340px; min-height:154px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; border-radius:20px; background:rgba(255,255,255,.5); backdrop-filter:blur(4.45px); text-align:center; }
.stat-card strong { color:var(--purple-deep); font-size:64px; line-height:1; letter-spacing:-3px; font-variant-numeric:tabular-nums; }
.stat-card span { color:#000; font-size:24px; font-weight:700; line-height:1.13; }
.section-light { background:#fff; }
section[id] { scroll-margin-top:104px; }
.products,.popular,.vision,.contact { padding:100px var(--page-padding); }
.section-heading { width:min(100%,var(--max-width)); margin:0 auto; }
.section-heading h2,.vision h2,.contact h2 { margin:0; letter-spacing:-1.5px; }
.section-heading h2 { color:var(--navy); font-size:48px; line-height:1.15; }
.section-heading p { max-width:640px; margin:14px 0 0; color:var(--navy); font-size:15px; line-height:1.7; }
.accordion-gallery { width:min(100%,var(--max-width)); min-height:571px; display:flex; gap:12px; margin:48px auto 0; }
.accordion-panel { position:relative; min-width:0; min-height:571px; flex:1 1 0; overflow:hidden; padding:0; border:0; border-radius:18px; background:#cbd5e1; color:#fff; text-align:left; cursor:pointer; isolation:isolate; transition:flex-grow .65s cubic-bezier(.22,1,.36,1), border-radius .35s ease, transform .35s ease; }
.accordion-panel:hover,.accordion-panel:focus-visible { transform:translateY(-4px); }
.accordion-panel.is-active { flex-grow:4.2; }
.accordion-panel__image { position:absolute; z-index:-2; inset:-3%; width:106%; height:106%; max-width:none; object-fit:cover; object-position:center; transform:scale(1.02) translateX(var(--parallax-x,0)); transition:transform .8s cubic-bezier(.22,1,.36,1), filter .65s ease; }
.accordion-panel:not(.is-active) .accordion-panel__image { filter:saturate(.78) brightness(.7); }
.accordion-panel.is-active .accordion-panel__image { transform:scale(1.08) translateX(var(--parallax-x,0)); }
.accordion-panel__shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(8,15,40,.05) 24%,rgba(8,15,40,.18) 48%,rgba(8,15,40,.82) 100%); opacity:.72; transition:opacity .5s ease; }
.accordion-panel:not(.is-active) .accordion-panel__shade { opacity:.52; }
.accordion-panel__copy { position:absolute; right:32px; bottom:30px; left:32px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; opacity:0; transform:translateY(18px); transition:opacity .4s ease .12s, transform .65s cubic-bezier(.22,1,.36,1) .08s; }
.accordion-panel.is-active .accordion-panel__copy { opacity:1; transform:translateY(0); }
.accordion-panel__eyebrow { color:rgba(255,255,255,.75); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.accordion-panel__title { color:#fff; font-size:clamp(24px,2.4vw,40px); font-weight:700; line-height:1.05; letter-spacing:-1.5px; white-space:nowrap; }
.accordion-panel__description { max-width:360px; color:rgba(255,255,255,.82); font-size:14px; line-height:1.55; }
.vision { background:var(--purple-deep); color:#fff; }
.vision-layout { width:min(100%,var(--max-width)); display:flex; align-items:center; gap:80px; margin:0 auto; }
.vision-copy { min-width:0; flex:1; }
.vision h2 { color:#fff; font-size:48px; line-height:1.15; letter-spacing:-2px; }
.vision-body { display:flex; flex-direction:column; gap:20px; margin-top:32px; font-size:16px; line-height:1.8; }
.vision-body p { margin:0; }
.pillars { display:flex; gap:24px; margin-top:32px; }
.pillar { flex:1; min-height:109px; padding:20px; border-radius:14px; background:rgba(255,255,255,.2); }
.pillar strong { display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.pillar p { margin:8px 0 0; font-size:13px; line-height:1.35; }
.vision-art { width:410px; height:423px; flex:0 0 auto; overflow:hidden; border-radius:31px; box-shadow:0 4px 4px rgba(0,0,0,.25); }
.vision-art img { width:100%; height:100%; object-fit:cover; object-position:center; }
.popular { display:flex; flex-direction:column; align-items:center; }
.centered { text-align:center; }
.game-grid { width:min(100%,var(--max-width)); display:grid; grid-template-columns:repeat(3,minmax(0,333px)); justify-content:center; gap:48px; margin:48px auto 0; }
.game-card { position:relative; height:466px; overflow:hidden; border-radius:20px; background:#3b3b3b; }
.game-card>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.game-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 28%,rgba(17,17,17,.72) 100%); }
.game-card-content { position:absolute; z-index:1; right:24px; bottom:24px; left:24px; }
.game-card h3 { margin:0; color:#fff; font-size:20px; font-weight:500; }
.store-links { display:flex; gap:12px; margin-top:24px; }
.store-badge { width:123px; height:35px; display:flex; align-items:center; gap:6px; padding:8px; border-radius:4px; background:#000; color:#fff; text-decoration:none; }
.store-badge img { width:24px; height:25px; object-fit:contain; }
.store-badge span { display:flex; flex-direction:column; font-size:12px; line-height:1.05; white-space:nowrap; }
.store-badge small { font-size:7px; }
.contact { background:var(--purple-deep); color:#fff; }
.contact-heading { width:600px; max-width:100%; margin:0 auto; text-align:center; }
.contact h2 { color:#fff; font-size:36px; line-height:1.2; letter-spacing:-1px; }
.contact-heading p { margin:14px 0 0; color:rgba(255,255,255,.7); font-size:15px; line-height:1.7; }
.contact-form { width:600px; max-width:100%; margin:48px auto 0; padding:40px; border:1px solid rgba(75,142,241,.13); border-radius:24px; background:var(--purple); }
.form-fields { display:flex; flex-direction:column; gap:16px; }
.contact-form label { display:flex; flex-direction:column; gap:7px; color:rgba(255,255,255,.8); font-size:13px; }
.contact-form input,.contact-form textarea { width:100%; padding:13px; border:1px solid rgba(255,255,255,.5); border-radius:10px; background:rgba(255,255,255,.03); color:#fff; outline:none; }
.contact-form textarea { min-height:120px; resize:vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(255,255,255,.8); }
.contact-form input:focus,.contact-form textarea:focus { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.14); }
.form-submit { display:flex; margin:18px auto 0; background:var(--purple-deep); }
.form-status { min-height:18px; margin:12px 0 0; color:#fff; font-size:12px; text-align:center; }
.footer { padding:60px var(--page-padding) 40px; background:var(--footer); color:#fff; }
.footer-top { display:flex; justify-content:space-between; gap:48px; }
.footer-left { width:320px; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand img { width:184px; height:47px; object-fit:contain; }
.footer-left>p { width:280px; margin:12px 0 0; color:rgba(255,255,255,.44); font-size:13px; line-height:1.7; }
.social-block { margin-top:28px; }
.social-block>span,.footer-nav>span,.footer-language>span { display:block; color:rgba(255,255,255,.31); font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.social-icons { display:flex; gap:14px; margin-top:12px; }
.social-icons a { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.06); }
.social-icons img { width:20px; height:20px; }
.footer-nav,.footer-language { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.footer-nav { width:160px; }
.footer-nav>span,.footer-language>span { margin-bottom:2px; }
.footer-nav a { color:rgba(255,255,255,.7); font-size:13px; text-decoration:none; }
.footer-language { width:200px; gap:14px; }
.footer-language button { width:160px; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.03); color:#fff; font-size:13px; cursor:pointer; }
.footer-language button img { width:14px; height:14px; }
.footer-line { width:min(100%,var(--max-width)); height:1px; margin:40px auto 0; background:rgba(255,255,255,.3); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:40px; color:rgba(255,255,255,.31); font-size:13px; }
.footer-bottom p { margin:0; }
.footer-bottom div { display:flex; gap:20px; }
.footer-bottom a { color:rgba(255,255,255,.5); text-decoration:underline; }
:focus-visible { outline:3px solid #0b77ff; outline-offset:3px; }
@media (max-width:1100px) { :root { --page-padding:40px; } .hero-panel { padding-right:40px; padding-left:40px; } .hero-main { gap:0; } .hero-art { width:36vw; height:36vw; max-width:443px; max-height:443px; } .hero h1 { font-size:clamp(38px,5vw,58px); } .stat-card { min-width:0; flex:1; } .stat-card strong { font-size:52px; } .stat-card span { font-size:18px; } .vision-layout { gap:40px; } .vision-art { width:36%; } .pillars { gap:12px; } .pillar { padding:16px; } .game-grid { gap:20px; } }
@media (max-width:760px) { :root { --page-padding:24px; } .navbar { padding:8px; } .nav-inner { width:100%; min-height:0; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; border-radius:24px; } .nav-left { width:100%; justify-content:space-between; gap:16px; } .brand,.brand img { width:148px; height:auto; } .nav-links a { padding:7px 5px; font-size:12px; } .nav-right { width:100%; justify-content:flex-end; } .hero { padding:8px; } .hero-panel { min-height:0; gap:28px; padding:40px 20px 20px; } .hero-main { min-height:0; flex-direction:column; } .hero-art { width:min(100%,300px); height:300px; } .hero-copy { align-items:center; text-align:center; } .hero h1 { font-size:clamp(35px,9vw,50px); letter-spacing:-2px; white-space:normal; } .hero-actions { flex-wrap:wrap; justify-content:center; } .stats { flex-direction:column; gap:12px; } .stat-card { width:100%; min-height:0; padding:20px; } .stat-card strong { font-size:48px; } .products,.popular,.vision,.contact { padding-top:64px; padding-bottom:64px; } .section-heading h2,.vision h2 { font-size:38px; } .accordion-gallery { min-height:0; display:flex; flex-direction:column; gap:10px; margin-top:32px; } .accordion-panel { min-height:86px; flex:0 0 86px; border-radius:14px; } .accordion-panel.is-active { flex:0 0 300px; } .accordion-panel__copy { right:20px; bottom:20px; left:20px; } .accordion-panel__title { font-size:28px; white-space:normal; } .accordion-panel__description { font-size:13px; } .vision-layout { flex-direction:column; align-items:stretch; } .pillars { flex-direction:column; } .vision-art { width:100%; height:340px; } .game-grid { grid-template-columns:minmax(0,333px); gap:24px; margin-top:32px; } .contact-form { margin-top:32px; padding:24px; } .footer-top { flex-direction:column; } .footer-left,.footer-nav,.footer-language { width:100%; } .footer-bottom { flex-direction:column; align-items:flex-start; padding-top:24px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .skip-link,.accordion-panel,.accordion-panel__image,.accordion-panel__copy { transition:none; } }