/* Layout: quiet studio page. Big type, one live phone, PF-style playable cards (cyan hover, Click To Play), one Zerind-blue band. */
:root{
  --bg:#ffffff; --bg-2:#f3f6f8; --card:#f2f5f7; --ink:#0e1a24; --ink-2:#3b4752; --muted:#6a7681; --line:#e3e8ec; --field:#cfd7dd;
  --blue:#004c80; --blue-2:#003b64; --cyan:#29cbe7; --cyan-2:#22a9c7; --on-blue:#ffffff; --on-blue-2:#bcd3e4;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f);overflow-x:clip;-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9em 1.4em;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff!important;font:600 .95rem/1 var(--f);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn.line{background:transparent;color:var(--ink)!important}
.btn.line:hover{background:var(--ink);color:#fff!important;border-color:var(--ink)}

.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:clamp(40px,7vw,96px)}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
h1{font-size:clamp(2.7rem,6vw,5.2rem);line-height:1;font-weight:600;letter-spacing:-.04em}
.hero p{font-size:clamp(1.05rem,1.3vw,1.18rem);color:var(--ink-2);max-width:31em;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.stage{display:grid;justify-items:center;gap:18px}
/* a generic modern phone: metal frame, thin bezel, camera cutout, side buttons (no brand marks) */
.phone{position:relative;width:min(286px,68vw);padding:3px;border-radius:54px;background:linear-gradient(140deg,#b9bec4 0%,#5d6269 14%,#2c2f34 42%,#3b3f45 64%,#70757c 86%,#c3c8ce 100%);box-shadow:0 50px 80px -40px rgba(14,26,36,.6),0 18px 30px -18px rgba(14,26,36,.35)}
.phone .bezel{padding:7px;border-radius:51px;background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.phone .key{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3f444a,#8b9097 60%,#5a5f66)}
.phone .k1{left:-3px;top:15%;height:5%}
.phone .k2{left:-3px;top:24%;height:10%}
.phone .k3{left:-3px;top:36%;height:10%}
.phone .k4{right:-3px;top:27%;height:15%}
.phone .cam{position:absolute;z-index:2;top:1.5%;left:50%;width:30%;height:3.3%;transform:translateX(-50%);border-radius:99px;background:radial-gradient(circle at 78% 50%,#1d2a3a 0 14%,#0b1018 15% 22%,#000 23%)}
.scr{position:relative;aspect-ratio:9/19.5;max-width:100%;border-radius:44px;overflow:hidden;background:#0e1a24}
.phone .status{position:absolute;z-index:2;top:2.1%;left:9%;right:8%;display:flex;align-items:center;gap:5px;color:#fff;font:600 13px/1 var(--f);text-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:none}
.phone .status b{margin-right:auto;font-weight:600}
.phone .status .ico{width:56px;height:11px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.phone .home-bar{position:absolute;z-index:2;bottom:1.4%;left:50%;width:36%;height:5px;transform:translateX(-50%);border-radius:3px;background:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.25)}
.scr::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 28%,rgba(255,255,255,0) 42%)}
/* the 9:16 game fills the screen's height; the narrow strips left and right are cropped, like a full-screen ad */
.scr canvas{position:absolute;top:0;left:50%;height:100%;width:121.875%;transform:translateX(-50%);display:block}
.now{font-size:.9rem;color:var(--muted);min-height:1.6em}
.now b{color:var(--ink);font-weight:600}

.sec{padding-block:clamp(72px,9vw,128px)}
.sec.tight{padding-top:0}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 48px;margin-bottom:40px}
h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.05;letter-spacing:-.035em}
.head p{color:var(--muted);max-width:30em}

/* playable cards, after playablefactory.com/our-works, in Zerind cyan */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}
@media(max-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:var(--card);border-radius:12px;padding:16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transition:all .3s ease;min-width:0}
.card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.cover{display:block;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:268/260;max-width:100%;background:#dfe7ec}
.cover canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ctp{position:absolute;left:0;right:0;bottom:-40px;opacity:0;transition:all .3s ease;text-align:center}
.ctp span{display:block;background:rgba(0,76,128,.6);padding:8px 16px;color:#fff;font-weight:600;font-size:.875rem}
.meta{padding-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.meta .l{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.chip{background:#d8f5fb;color:#0b7f9c;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 12px;border-radius:8px;transition:all .3s ease}
.name{font-size:1.125rem;font-weight:600;color:#111827;transition:color .3s ease;line-height:1.3}
.genre{font-size:.82rem;color:var(--muted);transition:color .3s ease;margin-top:-6px}
.ico{border:1px solid #e5e7eb;border-radius:8px;padding:8px;line-height:0;transition:all .3s ease;color:#111827;flex:none}
.ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .card:hover{transform:scale(1.05);box-shadow:0 0 40px 10px rgba(41,203,231,.5);background:linear-gradient(160deg,#29cbe7,#1fb3d6)}
  .card:hover .ctp{bottom:0;opacity:1}
  .card:hover .name{color:#fff}
  .card:hover .genre{color:rgba(255,255,255,.88)}
  .card:hover .chip{background:rgba(255,255,255,.9);color:#00618f}
  .card:hover .ico{border-color:rgba(255,255,255,.6);color:#fff}
}

.band{background:var(--blue);color:var(--on-blue)}
.band .head p{color:var(--on-blue-2)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid rgba(255,255,255,.25);padding-top:32px}
@media(max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:28px}}
.cols h3{font-size:1.35rem;margin-bottom:10px}
.cols p{color:var(--on-blue-2)}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{border-top:1px solid var(--ink);padding-top:20px;display:grid;gap:8px;align-content:start}
.steps li::before{counter-increment:s;content:"0" counter(s);font-size:.85rem;color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.2rem}
.steps p{color:var(--ink-2);font-size:.97rem}

.contact{background:var(--bg-2)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
@media(max-width:900px){.contact .wrap{grid-template-columns:minmax(0,1fr)}}
.contact .intro{display:grid;gap:20px}
.contact .intro p{color:var(--ink-2);max-width:26em}
.mail{font-size:1.3rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--cyan);justify-self:start;word-break:break-all}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:560px){form{grid-template-columns:minmax(0,1fr)}}
.f{display:grid;gap:7px;min-width:0}
.f.full{grid-column:1/-1}
label{font-size:.85rem;color:var(--ink-2);font-weight:500}
input,textarea{font:400 1rem/1.4 var(--f);color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:10px;padding:13px 14px;width:100%}
input:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:0;border-color:var(--cyan)}
textarea{min-height:140px;resize:vertical}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.form-foot small{color:var(--muted);font-size:.85rem}
.status{grid-column:1/-1;color:var(--blue);font-size:.95rem}


/* play modal, after playablefactory.com */
.play[hidden]{display:none!important}
.play{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:16px}
.pfb{position:relative;display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.78);font-size:.82rem;opacity:0;transition:opacity .3s}
.play.on .pfb{opacity:1}
.pfb button{display:inline-flex;align-items:center;gap:6px;border:0;background:rgba(255,255,255,.08);color:inherit;font:500 .82rem/1 var(--f);padding:7px 10px;border-radius:999px;cursor:pointer}
.pfb button:hover{background:rgba(255,255,255,.16);color:#fff}
.pfb button[aria-pressed="true"]{background:rgba(41,203,231,.28);color:#fff}
.pfb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pfb .sep{width:1px;height:16px;background:rgba(255,255,255,.2);margin:0 4px}
.play .dim{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.play .box{position:relative;background:#fff;padding:8px;border-radius:32px;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);width:min(400px,92vw,calc((100vh - 48px) / 1.75));aspect-ratio:400/700;transform:scale(.94);opacity:0;transition:transform .3s,opacity .3s}
.play.on .dim{opacity:1}
.play.on .box{transform:none;opacity:1}
.play .scr2{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#0e1a24}
.play .scr2 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0e1a24}
.play .scr2 [hidden],.play .rb[hidden]{display:none}
.play canvas{position:absolute;left:0;top:50%;width:100%;aspect-ratio:9/16;transform:translateY(-50%);display:block;touch-action:none}
.rb{position:absolute;top:-12px;width:40px;height:40px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .3s}
.rb:hover{transform:scale(1.05)}
.rb svg{width:22px;height:22px;stroke:#000;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb.x{right:-12px}
.rb.s{left:-12px}
.rb .m{display:none}
.rb.off .m{display:block}
.rb.off .u{display:none}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Homepage FAQ accordion (seo/faq.html). Paste into the homepage <style>.
   Uses the homepage tokens (--ink, --ink-2, --line, --blue, --cyan); fallbacks included. */
.faq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(32px,6vw,96px);align-items:start}
@media(max-width:900px){.faq .wrap{grid-template-columns:minmax(0,1fr);gap:28px}}
.faq-intro p{color:var(--muted,#6a7681);margin-top:16px;max-width:22em}
.faq-intro a{color:var(--ink,#0e1a24);text-decoration:none;border-bottom:2px solid var(--cyan,#29cbe7)}
.faq-list{border-top:1px solid var(--ink,#0e1a24)}
.faq-item{border-bottom:1px solid var(--line,#e3e8ec)}
.faq-q{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:24px;align-items:center;padding:22px 0}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{content:""}
.faq-q h3{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.35;font-weight:600;letter-spacing:-.015em;margin:0;transition:color .2s}
.faq-q:hover h3{color:var(--blue,#004c80)}
.faq-q:focus-visible{outline:2px solid var(--cyan,#29cbe7);outline-offset:4px}
.faq-x{position:relative;width:16px;height:16px}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--ink,#0e1a24);transition:transform .25s,opacity .25s}
.faq-x::after{transform:rotate(90deg)}
.faq-item[open] .faq-x::after{transform:rotate(0);opacity:0}
.faq-a{padding:0 40px 24px 0;color:var(--ink-2,#3b4752);max-width:44em}
@media(max-width:560px){.faq-a{padding-right:0}}
.faq-a a{color:var(--blue,#004c80);text-decoration:underline;text-decoration-color:var(--cyan,#29cbe7);text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-reduced-motion: reduce){.faq-x::before,.faq-x::after,.faq-q h3{transition:none}}

/* inner pages: title block, tag filters, "see all" links and the closing call to action */
.page-head .wrap{padding-block:clamp(44px,6vw,88px) clamp(28px,3vw,44px)}
.page-head h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
.page-head p{font-size:clamp(1.05rem,1.3vw,1.18rem);color:var(--ink-2);max-width:36em;margin-top:22px}
.page-head + .sec:not(.band){padding-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.chips[hidden]{display:none}
.chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.6em 1.15em;font:500 .9rem/1 var(--f);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chips button:hover{border-color:var(--ink);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.card[hidden]{display:none}
.more{display:flex;justify-content:center;margin-top:40px}
.band .more .btn.line{color:#fff!important;border-color:rgba(255,255,255,.6)}
.band .more .btn.line:hover{background:#fff;color:var(--blue)!important;border-color:#fff}
.cta{background:var(--bg-2)}
.cta .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px 56px}
.cta p{color:var(--ink-2);max-width:32em;margin-top:16px}
.cta .actions{margin-top:0;align-items:center}
.cta .mail{font-size:1.1rem}
.contact h1{font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.035em}
.group[hidden]{display:none}
.group + .group{margin-top:clamp(64px,8vw,104px)}
.group .head h2{font-size:clamp(1.7rem,3vw,2.4rem)}