/* Birr Studio · site.css
   Brand source: Logo Kılavuzu 1.0. Colours, the line and the dot come from the logo; every text is Outfit. */

@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/outfit-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/outfit-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --navy:#2B2872;--navy-3:#1B1953;--ink:#121037;
  --white:#FFFFFF;--cream:#F3EFE6;--turq:#21F2FF;--black:#0B0B0B;--red:#DC0F28;
  --mute:#B9BAE6;--soft:#DDDEF5;--dim:#8F90C9;--rule:rgba(255,255,255,.18);
  --font:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  --pad:40px;--hdr-top:24px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--navy);color:var(--white);font-family:var(--font);font-weight:300;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,pre,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--turq);outline-offset:4px}
.pos :focus-visible{outline-color:var(--navy)}
::selection{background:var(--turq);color:var(--navy)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--cream);color:var(--navy);font-weight:500;text-decoration:none}
.skip:focus{top:16px}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
main{overflow-x:clip}
.mono{font-family:var(--mono)}

/* ---------- type ---------- */
.lbl{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.h2{font-size:clamp(34px,4.2vw,58px);line-height:1.08;font-weight:300;letter-spacing:-.015em;text-wrap:balance}
.body{font-size:19px;line-height:1.65;max-width:52ch;color:var(--soft)}
/* the square full stop: the logo's dot closes a heading */
.pd{display:inline-block;width:.15em;height:.15em;margin-left:.07em;background:var(--turq);color:transparent;overflow:hidden;vertical-align:baseline;line-height:0;user-select:text}
.pos .pd{background:var(--red)}

/* ---------- the mark: vertical lockup, its line running to both edges ---------- */
.mark{--u:8px;position:relative;display:block;flex:none;width:calc(var(--u)*13.3107);height:calc(var(--u)*7.651)}
.mark .lk{position:relative;width:100%;height:100%;overflow:visible}
.ln{position:absolute;top:calc(var(--u)*3.5);height:var(--u);width:12000px;background:var(--white);pointer-events:none}
.ln-l{right:calc(100% - var(--u)*.9705)} /* overlaps half a square into b's foot so no seam shows */
.ln-r{left:calc(var(--u)*10.9705)}
.ln-c{left:calc(var(--u)*.4705);width:calc(var(--u)*10.5)}
.glw{mix-blend-mode:overlay}
.lt,.ds{fill:var(--white);fill-rule:evenodd;shape-rendering:crispEdges}
.dt{fill:var(--turq);shape-rendering:crispEdges}
.st{fill:var(--white)}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;overflow:hidden;padding:var(--hdr-top) 0 22px;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .3s}
.hdr.stuck{background:rgba(43,40,114,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.hide{transform:translateY(-100%)}
.hdr-in{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.mark:focus-visible{outline-offset:8px}
.nav{display:flex;align-items:flex-end;gap:36px;height:22px}
.nav a{position:relative;font-size:15px;font-weight:400;line-height:1;letter-spacing:.04em;text-decoration:none;color:var(--white)}
.nav a::before{content:"";position:absolute;left:50%;top:-12px;width:6px;height:6px;margin-left:-3px;background:var(--turq);opacity:0;transform:translateY(5px);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.nav a.on::before{opacity:1;transform:none}
.nav:hover a.on:not(:hover)::before{opacity:0;transform:translateY(5px)}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1;transform:none}
.menu-btn{display:none;align-items:flex-end;gap:10px;height:44px;margin-top:-16px;padding:0 0 6px 12px;border:0;background:transparent;font-size:14px;font-weight:400;letter-spacing:.06em;cursor:pointer}
.menu-btn i{display:flex;flex-direction:column;gap:4px;padding-bottom:1px}
.menu-btn b{display:block;width:16px;height:3px;background:var(--white);transition:transform .25s,width .25s,margin .25s}
.menu-btn b+b{width:10px;margin-left:6px;background:var(--turq)}
.menu-btn[aria-expanded="true"] b{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] b+b{width:16px;margin-left:0;transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:40;overflow-y:auto;background:var(--navy);padding-top:130px}
.menu[hidden]{display:none}
.menu-in nav{display:flex;flex-direction:column;gap:6px}
.menu-in nav a{display:flex;align-items:center;gap:16px;padding:8px 0;font-size:40px;font-weight:300;letter-spacing:-.015em;text-decoration:none}
.menu-in nav a::before{content:"";width:10px;height:10px;background:var(--turq);opacity:0;transition:opacity .2s}
.menu-in nav a:hover::before,.menu-in nav a:focus-visible::before{opacity:1}
.menu-mail{margin-top:40px;font-size:17px;color:var(--mute)}
html.menu-open{overflow:hidden}

/* ---------- intro: the verse is written faintly, birr lights up, its baseline becomes the logo's line ---------- */
.intro{position:fixed;inset:0;z-index:60;background:var(--navy);overflow:hidden;animation:introOut .5s ease 4.7s forwards}
.intro .mark{--u:24px;position:absolute;transform-origin:0 0;left:calc(50% - 600px);top:var(--hdr-top);animation:aM 8s linear both}
.kf{position:absolute;left:calc(var(--u)*-36.2795);top:calc(var(--u)*-3);width:calc(var(--u)*104);height:calc(var(--u)*10);max-width:none;animation:aK 8s linear both}
.kf path{fill:rgba(255,255,255,.2);shape-rendering:crispEdges}
.kf .kw{animation:aKo 8s linear both}
.kf .kb{animation:aKf 8s linear both}
.kf .kb path{animation:aKb 8s linear both}
.intro .ln-l,.intro .ln-r{transform:scaleX(0);animation:aL 8s linear both}
.intro .ln-l{transform-origin:right center}
.intro .ln-r{transform-origin:left center}
.intro .ln-c{animation:aC 8s linear both}
.intro .lt{animation:aR 8s linear both}
.intro .ds{animation:aD 8s linear both}
.intro .dt{transform-box:fill-box;transform-origin:center;animation:aP 8s linear both}
.intro .g2{animation:aG2 8s linear both}
.intro .g1{animation:aG1 8s linear both}
.intro .st{animation:aS 8s linear both}
html.intro-skip .intro{animation:introOut .35s ease forwards}
html.no-intro .intro{display:none}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes aK{0%,1.25%{clip-path:inset(0 0 0 100%);animation-timing-function:steps(16,end)}16.25%,100%{clip-path:inset(0 0 0 0)}}
@keyframes aKo{0%,22.5%{opacity:1}30%,100%{opacity:0}}
@keyframes aKb{0%,16.25%{fill:rgba(255,255,255,.2)}22.5%,32.5%{fill:#21F2FF}38.75%,100%{fill:rgba(33,242,255,0)}}
@keyframes aKf{0%,16.25%{filter:drop-shadow(0 0 0 rgba(33,242,255,0))}22.5%,32.5%{filter:drop-shadow(0 0 .35px #21F2FF) drop-shadow(0 0 1.2px rgba(146,249,255,.7))}38.75%,100%{filter:drop-shadow(0 0 0 rgba(33,242,255,0))}}
@keyframes aL{0%,22.5%{transform:scaleX(0);animation-timing-function:cubic-bezier(.6,0,.2,1)}31.25%,100%{transform:scaleX(1)}}
@keyframes aC{0%,22.5%{opacity:0}27.5%,38.75%{opacity:1}42.5%,100%{opacity:0}}
@keyframes aR{0%,30%{clip-path:inset(100% 0 0 0);animation-timing-function:steps(9,end)}37.5%,100%{clip-path:inset(0 0 0 0)}}
@keyframes aD{0%,27.5%{opacity:0}28%,100%{opacity:1}}
@keyframes aP{0%,36.25%{transform:scale(0);animation-timing-function:cubic-bezier(.3,1.7,.5,1)}41.25%,100%{transform:scale(1)}}
@keyframes aG2{0%,37.5%{opacity:0}43.75%,100%{opacity:1}}
@keyframes aG1{0%,40%{opacity:0}50%,100%{opacity:1}}
@keyframes aS{0%,40%{opacity:0}46.25%,100%{opacity:1}}
@keyframes aM{0%,47.5%{left:calc(50% - 159.73px);top:calc(50% - 92px);transform:scale(1);animation-timing-function:cubic-bezier(.65,0,.25,1)}57.5%,100%{left:calc(50% - 600px);top:var(--hdr-top);transform:scale(.33333)}}
@keyframes aMs{0%,47.5%{left:calc(50% - 119.8px);top:calc(50% - 69px);transform:scale(1);animation-timing-function:cubic-bezier(.65,0,.25,1)}57.5%,100%{left:var(--pad);top:var(--hdr-top);transform:scale(.44444)}}
@keyframes aMm{0%,47.5%{left:calc(50% - 159.73px);top:calc(50% - 92px);transform:scale(1);animation-timing-function:cubic-bezier(.65,0,.25,1)}57.5%,100%{left:var(--pad);top:var(--hdr-top);transform:scale(.33333)}}

/* ---------- entrance ---------- */
.rise{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.25s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}
.has-intro .d1{animation-delay:4.8s}.has-intro .d2{animation-delay:4.95s}.has-intro .d3{animation-delay:5.1s}.has-intro .d4{animation-delay:5.25s}
html.no-intro .has-intro .d1{animation-delay:.1s}html.no-intro .has-intro .d2{animation-delay:.25s}html.no-intro .has-intro .d3{animation-delay:.4s}html.no-intro .has-intro .d4{animation-delay:.55s}
html.intro-skip .has-intro .rise{animation-delay:.15s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.ctas{display:flex;flex-wrap:wrap;gap:16px}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:0 26px;font-size:16px;font-weight:500;line-height:1.2;letter-spacing:.02em;text-decoration:none;transition:background-color .2s,color .2s,box-shadow .2s}
.btn .sq{width:8px;height:8px;flex:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.btn:hover .sq,.btn:focus-visible .sq{transform:translateX(5px)}
.btn-p{background:var(--cream);color:var(--navy)}
.btn-p .sq{background:var(--navy)}
.btn-p:hover{background:var(--white)}
.btn-s{color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.btn-s .sq{background:var(--turq)}
.btn-s:hover{color:var(--turq);box-shadow:inset 0 0 0 1.5px var(--turq)}
.btn-d{background:var(--navy);color:var(--white)}
.btn-d .sq{background:var(--turq)}
.btn-d:hover{background:var(--black)}
.btn-o{color:var(--black);box-shadow:inset 0 0 0 1.5px rgba(11,11,11,.4)}
.btn-o .sq{background:var(--red)}
.btn-o:hover{box-shadow:inset 0 0 0 1.5px var(--black)}

/* ---------- section heading rule: label, then a line out to the edge ---------- */
.sec-h{display:flex;align-items:center;gap:24px;margin-bottom:64px}
.rl{flex:1;height:2px;position:relative;background:var(--rule);transform-origin:left center}
.rl::after{content:"";position:absolute;left:100%;top:0;width:100vw;height:2px;background:inherit}
.pos .rl{background:rgba(11,11,11,.16)}
.pos .lbl{color:#5E5A52}
html.js .reveal .rl{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.6,0,.2,1)}
html.js .reveal.in .rl{transform:none}

/* ---------- hero ---------- */
.hero{padding:80px 0 136px}
.hero-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:56px;align-items:center}
.hero h1{font-size:clamp(44px,6.4vw,92px);line-height:1.02;font-weight:300;letter-spacing:-.02em;margin:22px 0 30px;text-wrap:balance}
.lead{font-size:20px;line-height:1.55;color:var(--soft);max-width:36ch}
.hero .ctas{margin-top:44px}
.def{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:72px;font-size:15px;color:var(--mute)}
.def b{font-weight:500;color:var(--white);font-size:17px}
.def i{font-style:normal;letter-spacing:.06em}
.vis{position:relative;justify-self:center;width:480px;max-width:100%;aspect-ratio:480/416}
.grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.075) 1px,transparent 1px);background-size:6.6667% 7.6923%;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.gl{position:absolute;background:rgba(33,242,255,.45)}
.gl.h{left:0;right:0;height:1px}.gl.v{top:0;bottom:0;width:1px}
.blk{position:absolute;background:var(--white)}
.fall{background:var(--turq);transform-origin:50% 100%;animation:fall 1.25s .9s both}
.has-intro .fall{animation-delay:5.7s}
html.no-intro .has-intro .fall{animation-delay:.9s}
html.intro-skip .has-intro .fall{animation-delay:.6s}
@keyframes fall{0%{transform:translateY(-350%);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}12%{opacity:1}52%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}62%{transform:translateY(0) scale(1.14,.8);animation-timing-function:ease-out}78%{transform:translateY(-40%) scale(.96,1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}90%{transform:translateY(0) scale(1.05,.94)}100%{transform:none;opacity:1}}
.vis:hover .fall{animation:hop .6s cubic-bezier(.3,0,.3,1)}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-55%)}70%{transform:scale(1.08,.9)}}

/* ---------- positive (cream) section ---------- */
.pos{background:var(--cream);color:var(--black)}
.pos .body{color:#2A2824}
.name{padding:128px 0 136px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:40px 72px;align-items:start}
.verse{display:grid;justify-items:center;gap:36px;margin-top:120px;text-align:center}
.motto{font-size:clamp(38px,6.2vw,92px);line-height:1.04;font-weight:300;letter-spacing:-.025em;text-wrap:balance}
.motto b{font-weight:300;color:var(--red)}
.lat{width:min(560px,100%);height:auto;margin-top:8px}
.lat path{fill:var(--black);shape-rendering:crispEdges}
.lat .hl{fill:var(--red)}
html.js .verse .motto b{color:var(--black);transition:color .8s ease .2s}
html.js .verse .lat .hl{fill:var(--black);transition:fill .8s ease .8s}
html.js .verse.in .motto b{color:var(--red)}
html.js .verse.in .lat .hl{fill:var(--red)}
.ref{font-size:13px;letter-spacing:.14em;color:#5E5A52}

/* ---------- game ---------- */
.games{padding:136px 0}
.game{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:32px 64px;align-items:center}
.art{position:relative;aspect-ratio:16/10;background:var(--navy-3);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.art .grid{-webkit-mask-image:none;mask-image:none;background-size:24px 24px;opacity:.6}
.art svg{position:absolute;inset:0;width:100%;height:100%}
.rail{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.5;stroke-linejoin:miter;stroke-linecap:square}
.post{stroke:rgba(255,255,255,.16);stroke-width:1.5}
.cn{position:absolute;width:18px;height:18px;opacity:0;transition:opacity .25s,transform .25s}
.cn.a{left:12px;top:12px;border-left:3px solid var(--turq);border-top:3px solid var(--turq);transform:translate(6px,6px)}
.cn.b{right:12px;bottom:12px;border-right:3px solid var(--turq);border-bottom:3px solid var(--turq);transform:translate(-6px,-6px)}
.game:hover .art{transform:translateY(-6px)}
.game:hover .cn{opacity:1;transform:none}
.game-txt{display:flex;flex-direction:column;gap:20px}
.chip{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.chip i{width:7px;height:7px;background:var(--turq)}
.game h3{font-size:clamp(30px,3vw,40px);line-height:1.1;font-weight:400;letter-spacing:-.01em}
.game p{font-size:19px;color:var(--soft);max-width:40ch}

/* ---------- FlowIoC band (home) ---------- */
.fio{background:var(--navy-3);padding:136px 0}
.pts{display:grid;gap:18px;margin:36px 0 44px}
.pts li{display:flex;gap:16px;align-items:baseline;font-size:18px;color:var(--soft)}
.pts li::before{content:"";width:8px;height:8px;flex:none;background:var(--turq);transform:translateY(-2px)}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;font-size:14px;color:var(--mute);letter-spacing:.04em}

/* ---------- terminal ---------- */
.term{background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.08);font-family:var(--mono);font-size:14px;line-height:1.75;color:var(--soft)}
.term .bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.term .bar i{width:8px;height:8px;background:var(--turq)}
.term .tb{padding:22px 22px 26px;display:flex;flex-direction:column;gap:6px;min-height:300px}
.tl{display:grid;grid-template-columns:16px 52px minmax(0,1fr);gap:10px;opacity:0}
.tl .p{color:var(--turq)}.tl .v{color:var(--mute)}.tl .f{color:var(--white);overflow-wrap:anywhere}.tl .c{color:var(--dim)}
.tl.task{grid-template-columns:68px minmax(0,1fr);margin-bottom:10px}
.tl.task .v{color:var(--turq)}
.t1{animation:t1 12s infinite}.t2{animation:t2 12s infinite}.t3{animation:t3 12s infinite}.t4{animation:t4 12s infinite}.t5{animation:t5 12s infinite}.t6{animation:t6 12s infinite}.t7{animation:t7 12s infinite}
html.js .reveal:not(.in) .tl{animation:none;opacity:1} /* complete at rest; the loop starts once it is in view */
@keyframes t1{0%,3%{opacity:0;transform:translateY(4px)}5%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t2{0%,11%{opacity:0;transform:translateY(4px)}13%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t3{0%,19%{opacity:0;transform:translateY(4px)}21%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t4{0%,27%{opacity:0;transform:translateY(4px)}29%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t5{0%,35%{opacity:0;transform:translateY(4px)}37%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t6{0%,43%{opacity:0;transform:translateY(4px)}45%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes t7{0%,53%{opacity:0;transform:translateY(4px)}55%,90%{opacity:1;transform:none}95%,100%{opacity:0}}
.cap{font-size:13px;color:var(--mute);margin-top:14px}

/* ---------- studio + contact ---------- */
.studio{padding:136px 0 104px}
.founder{font-size:clamp(26px,2.8vw,38px);line-height:1.3;font-weight:300;max-width:30ch;text-wrap:pretty}
.founder em{font-style:normal;color:var(--turq)}
.links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:36px;font-size:16px}
.ul{position:relative;text-decoration:none;padding-bottom:5px}
.ul::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:rgba(255,255,255,.4);transition:background-color .2s}
.ul::before{content:"";position:absolute;left:100%;bottom:0;width:14px;height:1.5px;margin-left:6px;background:var(--turq);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ul:hover::after,.ul:focus-visible::after{background:var(--turq)}
.ul:hover::before,.ul:focus-visible::before{transform:none}
.contact{padding:32px 0 128px}
.mail{display:inline-block;font-size:clamp(28px,5.4vw,76px);font-weight:300;letter-spacing:-.02em;line-height:1.1;text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
.mail:hover{color:var(--turq)}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;padding:56px 0 48px;border-top:1px solid rgba(255,255,255,.08)}
.foot-in{display:grid;justify-items:center;gap:28px;text-align:center}
.foot .mark{margin-bottom:12px}
.foot-motto{font-size:20px;color:var(--soft)}
.frow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:14px}
.frow a{color:var(--mute);text-decoration:none}.frow a:hover{color:var(--turq)}
.copy-r{font-size:13px;color:var(--mute)}

/* ---------- FlowIoC page ---------- */
.fhero{padding:88px 0 128px}
.fhero h1{font-size:clamp(64px,10vw,148px);line-height:.95;font-weight:300;letter-spacing:-.035em;margin:24px 0 32px}
.fhero .lead{font-size:21px;max-width:38ch}
.inst{display:flex;align-items:center;gap:16px;margin:40px 0 28px;padding:0 8px 0 20px;min-height:56px;background:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);max-width:540px}
.inst code{flex:1;min-width:0;font-family:var(--mono);font-size:15px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.inst code b{color:var(--turq);font-weight:400}
.copy{flex:none;height:40px;padding:0 14px;border:0;background:transparent;color:var(--mute);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.copy:hover{color:var(--turq);box-shadow:inset 0 0 0 1px var(--turq)}
.meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:36px;font-size:14px;color:var(--mute);letter-spacing:.03em}
.deck{position:relative;height:640px;max-width:560px;width:100%;justify-self:center}
.fc{position:absolute;width:78%;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px rgba(8,6,40,.45);font-size:13px;line-height:1.7;color:var(--soft);animation:fan 1.1s cubic-bezier(.2,.8,.2,1) both}
.fc .fh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--white)}
.fc .fh i{font-style:normal;font-weight:400;letter-spacing:.06em;color:var(--dim)}
.fc pre{padding:14px 16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono)}
.fc .k{color:var(--dim)}.fc .t{color:var(--turq)}.fc .w{color:var(--white)}
.fc .sk{display:grid;grid-template-columns:repeat(2,max-content);gap:2px 18px;padding:14px 16px 18px;font-family:var(--mono);color:var(--turq)}
.f1{left:0;top:0;z-index:1;animation-delay:.1s}
.f2{left:9%;top:198px;z-index:2;animation-delay:.25s}
.f3{left:18%;top:376px;z-index:3;animation-delay:.4s}
@keyframes fan{0%{opacity:0;transform:translate(-30px,40px)}100%{opacity:1;transform:none}}
.intro-p{font-size:20px;line-height:1.6;color:var(--soft);max-width:56ch;margin-top:28px}
.why{padding:128px 0}
.rs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:2px;margin-top:72px;background:rgba(255,255,255,.08);box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.r{background:var(--navy);padding:36px 32px 40px;display:flex;flex-direction:column;gap:14px;transition:background-color .25s}
.r:hover{background:#312D7E}
.r .n{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--mute)}
.r .n i{width:8px;height:8px;background:var(--turq)}
.r h3{font-size:24px;font-weight:400;line-height:1.25}
.r p{font-size:17px;color:var(--soft)}
.r code{display:block;margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.ses{background:var(--navy-3);padding:128px 0}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid rgba(255,255,255,.1)}
.steps li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.steps b{grid-row:span 2;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--turq);padding-top:4px}
.steps h3{font-size:20px;font-weight:400}
.steps p{font-size:16px;color:var(--soft)}
.flow{padding:128px 0}
.row{display:flex;flex-wrap:wrap;gap:14px;margin:72px 0 20px}
.nd{position:relative;flex:1 1 140px;min-height:112px;padding:18px 16px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;color:var(--soft);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);animation:lit 7s infinite both}
.nd b{display:block;font-weight:500;font-size:16px;color:var(--white)}
.nd span{font-size:13px;line-height:1.4;color:var(--mute)}
.nd .sg{width:10px;height:10px;background:var(--turq);opacity:0;animation:sg 7s infinite both}
.nd:nth-child(2),.nd:nth-child(2) .sg{animation-delay:.8s}
.nd:nth-child(3),.nd:nth-child(3) .sg{animation-delay:1.6s}
.nd:nth-child(4),.nd:nth-child(4) .sg{animation-delay:2.4s}
.nd:nth-child(5),.nd:nth-child(5) .sg{animation-delay:3.2s}
.nd:nth-child(6),.nd:nth-child(6) .sg{animation-delay:4s}
.nd:nth-child(7),.nd:nth-child(7) .sg{animation-delay:4.8s}
html.js .reveal:not(.in) .nd,html.js .reveal:not(.in) .nd .sg{animation-play-state:paused}
@keyframes lit{0%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}6%,16%{box-shadow:inset 0 0 0 1.5px var(--turq),0 0 24px rgba(33,242,255,.18)}26%,100%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}}
@keyframes sg{0%{opacity:0}6%,16%{opacity:1}26%,100%{opacity:0}}
.flowcap{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--mute)}
.flowcap i{width:10px;height:10px;background:var(--turq)}
.code{margin-top:72px;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.08);font-size:15px;line-height:1.8;color:var(--soft)}
.code .bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.code pre{padding:24px 24px 28px;overflow-x:auto;font-family:var(--mono)}
.code .ty{color:var(--white);font-weight:500}.code .mt{color:var(--turq)}.code .s{color:var(--cream)}
.team{padding:128px 0;background:var(--navy-3)}
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:40px 48px;margin-top:64px}
.tool{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:2px solid rgba(255,255,255,.14)}
.tool h3{font-size:20px;font-weight:400}
.tool p{font-size:16px;color:var(--soft)}
.tool .mono{font-size:12.5px;color:var(--dim)}
.mods{padding:128px 0}
.mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:56px;margin-top:64px}
.mg h3{font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.ml li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);font-size:16px;color:var(--soft)}
.ml li b{font-weight:500;color:var(--white)}
.get{padding:0 0 128px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:24px}
.opt{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.opt h3{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:19px;font-weight:400}
.opt h3 span{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--turq);padding:5px 8px}
.opt pre{font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.opt p{font-size:15px;color:var(--mute)}
.com{padding:120px 0}
.com-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:40px 72px;align-items:end}
.com .h2{margin-top:20px}
.com p.body{color:#2A2824;max-width:46ch}
.com .ctas{margin-top:32px}

/* ---------- 404 ---------- */
.lost{min-height:62vh;display:grid;place-items:center;text-align:center;padding:96px 0}
.lost-in{display:flex;flex-direction:column;align-items:center;gap:28px}
.lost h1{font-size:clamp(80px,14vw,180px);line-height:1;font-weight:300;letter-spacing:-.04em}
.brk{position:relative;display:flex;gap:40px;width:min(420px,80vw)}
.brk i{flex:1;height:8px;background:var(--white)}
.brk em{position:absolute;left:50%;top:30px;width:8px;height:8px;margin-left:-4px;background:var(--turq);animation:drop 1s cubic-bezier(.55,0,1,.45) .4s both}
@keyframes drop{0%{transform:translateY(-30px)}70%{transform:none}85%{transform:translateY(-6px)}100%{transform:none}}
.lost p{font-size:20px;color:var(--soft)}

/* ---------- small screens ---------- */
@media (max-width:1280px){.intro .mark{animation-name:aMm}}
@media (max-width:820px){
  :root{--pad:20px;--hdr-top:18px}
  .intro .mark{--u:18px;animation-name:aMs}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hero{padding:48px 0 96px}
  .name,.games,.fio,.studio,.why,.ses,.flow,.team,.mods,.com{padding:96px 0}
  .fhero{padding:56px 0 96px}
  .verse{margin-top:80px}
  .sec-h{margin-bottom:44px}
  .def{margin-top:48px}
  .deck{height:auto;display:grid;gap:12px}
  .fc{position:relative;left:auto;top:auto;width:auto}
  .fc .sk{grid-template-columns:1fr}
  .inst code{white-space:normal;overflow-wrap:anywhere;padding:12px 0}
  .vis{width:300px}
  .ml li{grid-template-columns:minmax(0,1fr);gap:4px}
  .lead,.fhero .lead{font-size:18px}
  .hero .ctas .btn,.fhero .ctas .btn{flex:1 1 100%;justify-content:space-between}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{display:none}
  .rise,.fall,.fc{animation:none;opacity:1;transform:none}
  .tl{animation:none;opacity:1}
  .nd,.nd .sg,.brk em{animation:none}
  html.js .reveal .rl{transform:none;transition:none}
  html.js .verse .motto b{color:var(--red);transition:none}
  html.js .verse .lat .hl{fill:var(--red);transition:none}
  .hdr,.btn .sq,.nav a::before{transition:none}
}