/* Xtage site — one typeface (Chakra Petch), dark studio look, red live accent. */
@font-face{font-family:"Chakra Petch";src:url(/assets/fonts/ChakraPetch-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(/assets/fonts/ChakraPetch-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(/assets/fonts/ChakraPetch-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bg:#0b0c0e; --panel:#141619; --line:#282b31; --ink:#f2f4f6; --muted:#989ca8; --accent:#ff3b47;
  --font:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.55 var(--font)}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0}
h1,h2{text-wrap:balance;letter-spacing:.06em;text-transform:uppercase;margin:0}

/* nav */
.nav-wrap{position:relative;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;max-width:1240px;margin:0 auto}
.brand{display:flex;align-items:center;gap:1px;text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none;margin-top:-3px}
.brand span{font-weight:700;font-size:18px;letter-spacing:.12em}
.links{display:flex;gap:22px}
.links a,.navcta,.lang-switch{text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:600}
.links a{opacity:.82}.links a:hover{opacity:1}
.nav-end{display:flex;align-items:center;gap:14px}
.lang-switch{opacity:.7;font-size:12px}.lang-switch:hover{opacity:1}
.navcta{font-weight:700;font-size:12.5px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;white-space:nowrap;background:rgba(11,12,14,.5)}
.lang-hint{position:relative;z-index:6;max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;font-size:14px;padding-block:8px;color:var(--muted)}
.lang-hint a,.lang-hint button{font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer;text-decoration:none}

/* buttons */
.btn{display:inline-block;border-radius:999px;padding:13px 24px;font:700 14px var(--font);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0}
.btn.p{background:var(--accent);color:#0a0a0f}
.btn.g{border:1px solid rgba(255,255,255,.3);background:rgba(11,12,14,.5);color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:progress}

/* hero */
.hero{position:relative;height:min(100svh,900px);min-height:600px;overflow:hidden;background:radial-gradient(42% 34% at 50% 30%,rgba(255,59,71,.07),transparent 70%),var(--bg)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.noise{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;image-rendering:pixelated;mix-blend-mode:screen}
.studio{position:absolute;inset:-4%;opacity:0;filter:blur(2px) saturate(.9);transition:opacity 2.4s;animation:drift 46s ease-in-out infinite alternate;background-position:center;background-size:cover;background-repeat:no-repeat}
.studio::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 38%,rgba(11,12,14,.35),rgba(11,12,14,.85) 75%)}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,1%)}}
.bgtext{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .8s;font:700 clamp(12px,1.25vw,17px)/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:rgba(236,240,246,.2)}
.hero-still{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(70vw,720px)}
.hero .site{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.hero .site a,.hero .site button{pointer-events:auto}
@keyframes blink{50%{opacity:.25}}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:clamp(48px,11vh,110px);gap:12px}
.word{font-weight:700;font-size:clamp(30px,4.6vw,58px);line-height:.9;letter-spacing:.22em;margin:0 0 0 .22em;display:flex;justify-content:center}
.word i{font-style:normal;display:inline-block}
.word i:first-child{color:var(--accent)}
.sub{font-weight:600;font-size:11px;letter-spacing:.5em;text-transform:uppercase;margin-left:.5em}
/* entrance: only hidden while the 3D is about to play it */
.js-hero .hero .brand,.js-hero .hero .links,.js-hero .hero .nav-end,.js-hero .hero .sub,.js-hero .hero .ctas{opacity:0;transition:opacity .7s .3s}
.js-hero .hero .word i{opacity:0;transform:translateY(14px);filter:blur(6px);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),filter .6s}
.js-hero .hero .word i:nth-child(2){transition-delay:.06s}.js-hero .hero .word i:nth-child(3){transition-delay:.12s}.js-hero .hero .word i:nth-child(4){transition-delay:.18s}.js-hero .hero .word i:nth-child(5){transition-delay:.24s}
.hero.revealed .brand,.hero.revealed .links,.hero.revealed .nav-end,.hero.revealed .sub,.hero.revealed .ctas{opacity:1}
.hero.revealed .word i{opacity:1;transform:none;filter:none}
.hero.revealed .studio{opacity:.62}

/* solutions strip */
.strip{max-width:1240px;margin:0 auto;padding-block:72px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.card{background:var(--bg);padding:26px 22px;display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0;transition:background .25s}
.card:hover{background:var(--panel)}
.card b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:16px}
.card span{color:var(--muted);font-size:15px}
.card img{display:block;width:calc(100% + 44px);max-width:none;height:auto;aspect-ratio:16/9;object-fit:cover;margin:-26px -22px 10px;border-bottom:1px solid var(--line)}

/* inner pages */
.inner{max-width:980px;margin:0 auto;padding-block:40px 80px}
.page-head{padding-block:32px 28px;border-bottom:1px solid var(--line);margin-bottom:12px}
.page-head h1{font-size:clamp(30px,5vw,52px);letter-spacing:.14em}
.page-head p{color:var(--muted);max-width:60ch;margin:12px 0 0}
.inner.wide{max-width:1200px}
.sol{padding-block:40px;border-bottom:1px solid var(--line);scroll-margin-top:20px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.sol--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.sol--flip .preview{order:2}
.preview{position:relative;margin:0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.preview video{display:block;width:100%;height:100%;object-fit:cover}
.pv-toggle{position:absolute;right:10px;bottom:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(11,12,14,.65);cursor:pointer;padding:0}
.pv-toggle::before,.pv-toggle::after{content:"";position:absolute;top:12px;width:4px;height:12px;background:var(--ink);border-radius:1px}
.pv-toggle::before{left:13px}.pv-toggle::after{left:19px}
.pv-toggle.paused::before{left:14px;width:0;height:0;background:none;border-left:11px solid var(--ink);border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.pv-toggle.paused::after{display:none}
@media (max-width:760px){.sol,.sol--flip{grid-template-columns:minmax(0,1fr)}.sol--flip .preview{order:0}}
.sol h2{font-size:clamp(22px,3vw,30px);letter-spacing:.12em}
.sol p{color:var(--muted);max-width:62ch;margin:10px 0 14px}
.sol ul{margin:0 0 20px;padding-left:18px;display:grid;gap:6px}
.sol li::marker{color:var(--accent)}
.games{padding-block:36px}
.game-list{color:var(--muted);letter-spacing:.06em;margin:12px 0 0}
.prose p{max-width:68ch;color:#d5d8de}

/* contact form */
.form{display:grid;gap:18px;padding-top:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field span{font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field em{color:var(--accent);font-style:normal}
input,select,textarea{font:500 16px var(--font);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px;width:100%;min-width:0}
textarea{resize:vertical}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--accent)}
.err{color:#ff8a92;font-size:13px;min-height:1em}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#d5d8de}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-end{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.status{margin:0;color:var(--muted)}
.status.ok{color:#9fe0b6}.status.bad{color:#ff8a92}
.notice{display:none;margin:20px 0 0;padding:14px 16px;border-radius:6px;border:1px solid var(--line)}
.notice:target{display:block}
.notice.ok{color:#9fe0b6;border-color:rgba(63,208,122,.4)}.notice.bad{color:#ff8a92;border-color:rgba(255,59,71,.4)}

/* footer */
.footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:14px}
.footer-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.footer-in .brand{margin-right:auto;color:var(--ink)}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-in .brand .mark{width:24px;height:24px}

@media (max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.nav{gap:10px}.nav-end{gap:10px}.brand span{font-size:16px;letter-spacing:.08em}.navcta{padding:7px 10px;letter-spacing:.12em}}
@media (max-width:760px){.links{display:none}.lang-switch{font-size:11px}.row2{grid-template-columns:1fr}.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.studio{animation:none}.js-hero .hero *{transition:none!important}.bgtext .caret{animation:none}}

/* hero: studio photo (Blender), names and backstage behind the X */
.studio{background-image:url(/assets/img/studio-bg-1920.webp)}
@media (max-width:1280px){.studio{background-image:url(/assets/img/studio-bg-1280.webp)}}
.bgtext .w{position:absolute;white-space:pre;max-width:46vw;overflow:hidden}
@media (max-width:760px){.bgtext{font-size:11px;letter-spacing:.16em}.bgtext .w.wave{font-size:12px}}
.bgtext .w.red{color:rgba(255,59,71,.42)}
.bgtext .w.wave{font-size:clamp(14px,1.5vw,20px)}
.bgtext .caret{color:var(--accent);animation:blink 1s steps(2) infinite}
.bgtext.bs{perspective:1100px;letter-spacing:0;text-transform:none}
.panel{position:absolute;width:clamp(220px,22vw,330px);background:rgba(18,20,25,.78);border:1px solid rgba(200,210,230,.18);border-radius:8px;padding:10px 12px;font:500 12px/1.55 var(--font);color:rgba(220,228,240,.75);filter:blur(.6px);opacity:0;transition:opacity 1.2s;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.panel.l{transform:rotateY(24deg)}.panel.r{transform:rotateY(-24deg)}
.panel h4{margin:0 0 8px;font:700 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;justify-content:space-between}
.panel h4 em{font-style:normal;color:var(--accent)}
.code > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code .k{color:#ff8a92}.code .s{color:#9fd3a8}.code .c{color:rgba(220,228,240,.35)}
.code .sel{background:rgba(90,184,255,.16);border-radius:2px}
.cursor{position:absolute;width:13px;height:18px;transition:left .7s cubic-bezier(.3,.7,.2,1),top .7s cubic-bezier(.3,.7,.2,1)}
.scenes > div{padding:4px 8px;border-radius:4px;margin-bottom:3px;background:rgba(255,255,255,.04)}
.scenes > div.on{background:rgba(255,59,71,.25);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.stand .rows > div,.social .rows > div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.06);transition:background .4s}
.stand .rows > div.up{background:rgba(63,208,122,.14)}
.social em{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap;text-transform:uppercase;letter-spacing:.1em}
.social em.ag{background:rgba(90,184,255,.2);color:#bfe2ff}.social em.ok{background:rgba(63,208,122,.2);color:#bff0d2}
.assist p{margin:0 0 6px;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.06);max-width:92%;font-size:11.5px;line-height:1.35}
.assist p.me{margin-left:auto;background:rgba(255,59,71,.18)}
.assist p b{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.phone{position:absolute;width:clamp(250px,24vw,350px);aspect-ratio:2.05/1;border-radius:26px;background:#05060a;padding:9px;box-shadow:0 0 0 2px #2a2d35,0 30px 70px rgba(0,0,0,.6);transform:rotateY(-20deg) rotateX(6deg);opacity:0;transition:opacity 1.2s;filter:blur(.3px)}
.ph-screen{position:relative;height:100%;border-radius:18px;background:#0a0c12;display:grid;grid-template-columns:1fr 1.55fr;gap:6px;padding:7px;overflow:hidden;color:#c9ced8}
.ph-mix{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ph-strip{background:#141720;border-radius:6px;display:grid;grid-template-rows:1fr auto;grid-template-columns:6px 1fr;gap:3px;padding:5px 4px}
.ph-meter{height:100%;background:#1d212b;border-radius:2px;position:relative;overflow:hidden}
.ph-meter b{position:absolute;left:0;right:0;bottom:0;height:var(--h,40%);background:linear-gradient(to top,#3fd07a,#e8d24a 75%,#ff3b47);transition:height .12s}
.ph-fader{height:100%;position:relative}
.ph-fader::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#2a2f3a;transform:translateX(-50%)}
.ph-fader u{position:absolute;left:10%;right:10%;height:12px;border-radius:3px;background:linear-gradient(#cfd5de,#7d8591);bottom:var(--v,55%);transition:bottom .5s}
.ph-strip small{grid-column:1/-1;text-align:center;font:600 7px/1 var(--font);letter-spacing:.1em;color:#8a91a0;text-transform:uppercase}
.ph-keys{display:flex;flex-direction:column;gap:4px;min-height:0}
.ph-tag{font:700 7px/1 var(--font);letter-spacing:.14em;color:var(--accent);opacity:.8;text-transform:uppercase}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;flex:1}
.ph-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:34%}
.ph-key{position:relative;border:0;border-radius:6px;background:linear-gradient(#1b1f28,#12151c);color:#d6dbe4;font:700 8px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 3px rgba(0,0,0,.5);overflow:hidden;padding:0;transition:filter .15s,transform .15s}
.ph-key::after{content:"";position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:#3a3f47}
.ph-key.on::after{background:var(--led,#3fd07a);box-shadow:0 0 6px var(--led,#3fd07a)}
.ph-key.c{--led:#5ab8ff}.ph-key.r{--led:#ff3b47}
.ph-key.down{transform:translateY(1px);filter:brightness(1.4)}
.ph-key .hold{position:absolute;inset:0;background:var(--accent);opacity:.35;transform-origin:left;transform:scaleX(0)}
.ph-key.holding .hold{transform:scaleX(1);transition:transform 1s linear}
.finger{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,255,255,.2);box-shadow:0 0 0 2px rgba(255,255,255,.35);transition:left .45s cubic-bezier(.3,.7,.2,1),top .45s cubic-bezier(.3,.7,.2,1),transform .15s,background .15s;left:85%;top:115%}
.finger.press{transform:scale(.72);background:rgba(255,255,255,.42)}
.oper{position:absolute;bottom:-3%;width:clamp(130px,13vw,190px);opacity:0;transition:opacity 1.6s}
.oper.l{left:-1%}.oper.r{right:-1%;transform:scaleX(-1)}
@media (max-width:760px){.panel,.phone,.oper{display:none}}