/* Appcraft — studio site styling.
   Shared by the home page and the studio privacy policy. Game pages keep their
   own look in /style.css. The studio palette borrows Standing Order's cyan and
   coral and adds a violet so the studio reads as bigger than any one title. */

:root{
  color-scheme:dark;
  --bg:#06080C;
  --bg-2:#0A0E14;
  --surface:#0F141C;
  --surface-2:#141B25;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#E8EEF3;
  --dim:#9AA7B3;
  --faint:#5F6C78;
  --cyan:#4DE2D8;
  --violet:#8B7CFF;
  --coral:#F2705F;
  --amber:#E8B14C;
  /* The logo's own sweep: teal, blue, magenta, orange, gold. */
  --grad:linear-gradient(100deg, #2ED8CF 0%, #3D7BF2 28%, #B832E0 56%, #FF5B3D 80%, #FFB21E 100%);
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --max:1180px;
  --gutter:clamp(16px, 4vw, 40px);
  --radius:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.65 var(--sans); overflow-x:clip;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
p{margin:0 0 1em}
/* Brand names keep their casing inside uppercase labels (Turkish uppercase would turn iOS into İOS). */
.keep{text-transform:none !important}
::selection{background:rgba(77,226,216,.32); color:#fff}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}

/* Film grain over everything, so the flat darks have some tooth. */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:100; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px; top:8px; z-index:200; background:var(--cyan); color:#041816; padding:10px 16px; border-radius:10px; font-weight:700}
.skip:focus{left:16px}

/* ------------------------------------------------------------ language */
/* English is the default, so the page is complete without JavaScript. Scoped
   under body because the toggle also rewrites <html lang>. Nothing is ever
   re-shown with a fixed display value, so flex and grid children keep theirs. */
html:not(.tr) body [lang="tr"]{display:none !important}
html.tr body [lang="en"]{display:none !important}

/* ----------------------------------------------------------------- nav */

.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(6,8,12,.72); border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
}
.nav .container{display:flex; align-items:center; gap:28px; height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.02em; font-size:19px; margin-right:auto}
.logo img{width:34px; height:34px; flex:none; filter:drop-shadow(0 4px 14px rgba(77,130,242,.35))}
.logo b{font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; color:var(--dim); font-size:14px; font-weight:600; transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}

.langs{display:flex; padding:3px; border:1px solid var(--line-2); border-radius:999px; background:rgba(255,255,255,.03)}
.langs button{
  appearance:none; border:0; background:transparent; color:var(--faint); cursor:pointer;
  font:700 11px/1 var(--mono); letter-spacing:.12em; padding:8px 11px; border-radius:999px; min-height:30px;
  transition:color .2s, background .2s;
}
.langs button:hover{color:var(--text)}
.langs button[aria-pressed="true"]{background:var(--text); color:var(--bg)}

@media (max-width:760px){
  .nav-links{display:none}
  .nav .container{height:64px}
}

/* ---------------------------------------------------------------- hero */

.hero{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; padding:120px 0 140px;
}
.aurora{position:absolute; inset:-20%; z-index:-3; filter:blur(80px) saturate(1.2); opacity:.55}
.aurora i{position:absolute; border-radius:50%; mix-blend-mode:screen; animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vw; height:46vw; left:8%; top:12%; background:radial-gradient(circle, var(--cyan), transparent 65%)}
.aurora i:nth-child(2){width:52vw; height:52vw; right:4%; top:2%; background:radial-gradient(circle, var(--violet), transparent 65%); animation-duration:28s; animation-delay:-6s}
.aurora i:nth-child(3){width:38vw; height:38vw; left:38%; bottom:2%; background:radial-gradient(circle, var(--coral), transparent 65%); opacity:.7; animation-duration:25s; animation-delay:-12s}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(6vw,-4vh,0) scale(1.12)}
  100%{transform:translate3d(-5vw,5vh,0) scale(.94)}
}

/* A receding grid floor with a lit horizon — the arena every game starts in. */
.floor{
  position:absolute; left:-50%; right:-50%; bottom:-8%; height:44%; z-index:-2;
  transform:perspective(520px) rotateX(64deg); transform-origin:50% 0;
  background-image:
    linear-gradient(rgba(77,226,216,.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,124,255,.28) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  animation:floor 3.2s linear infinite;
}
@keyframes floor{to{background-position:0 64px, 0 0}}
.hero::before{
  content:""; position:absolute; left:0; right:0; top:64%; height:2px; z-index:-2;
  background:linear-gradient(90deg, transparent, rgba(77,226,216,.0) 10%, rgba(77,226,216,.55) 50%, rgba(77,226,216,0) 90%, transparent);
  filter:blur(1px); box-shadow:0 0 40px 8px rgba(77,226,216,.18);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0; height:220px; z-index:-1;
  background:linear-gradient(180deg, transparent, var(--bg));
}
#stars{position:absolute; inset:0; z-index:-1; width:100%; height:100%}

.hero-inner{position:relative; text-align:center; max-width:980px; margin:0 auto}
.hero-inner::before{
  content:""; position:absolute; inset:-12% -8%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(6,8,12,.78), rgba(6,8,12,.35) 60%, transparent);
}
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px;
  border:1px solid var(--line-2); border-radius:999px; background:rgba(10,14,20,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-size:13px; color:var(--dim); font-weight:600; margin-bottom:28px;
}
.pill .dot{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:rgba(77,226,216,.14);
}
.pill .dot::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(77,226,216,.7); animation:ping 2s infinite;
}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(77,226,216,0)}100%{box-shadow:0 0 0 0 rgba(77,226,216,0)}}

.display{
  font-size:clamp(46px, 9vw, 116px); line-height:.95; letter-spacing:-.045em;
  font-weight:850; margin:0 0 26px; text-wrap:balance;
}
.display .line{display:block}
.grad{
  background:var(--grad); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheen 8s ease-in-out infinite alternate;
}
@keyframes sheen{to{background-position:100% 0}}
.hero .lede{font-size:clamp(17px, 2vw, 21px); color:var(--dim); max-width:640px; margin:0 auto 38px; text-wrap:pretty}

.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 24px; min-height:52px; border-radius:999px; text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:-.005em; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s;
  border:1px solid var(--line-2); color:var(--text); background:rgba(255,255,255,.04);
}
.btn svg{width:18px; height:18px; transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.3)}
.btn:hover svg{transform:translateX(3px)}
.btn.primary{
  border:0; color:#05110F;
  background:linear-gradient(100deg, var(--cyan), #9AF3EC);
  box-shadow:0 10px 40px -10px rgba(77,226,216,.65), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn.primary:hover{box-shadow:0 18px 50px -12px rgba(77,226,216,.85), inset 0 1px 0 rgba(255,255,255,.5)}

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--line-2); border-radius:14px;
}
.scroll-cue::after{
  content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px;
  border-radius:2px; background:var(--cyan); animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%{opacity:0; transform:translateY(-4px)}40%{opacity:1}100%{opacity:0; transform:translateY(12px)}}

/* ------------------------------------------------------------- marquee */

.marquee{
  border-block:1px solid var(--line); overflow:hidden; background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee .track{display:flex; width:max-content; animation:marquee 38s linear infinite}
.marquee ul{display:flex; list-style:none; margin:0; padding:0}
.marquee li{
  display:flex; align-items:center; gap:28px; padding:20px 14px;
  font:700 13px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
.marquee li::after{content:"\2726"; color:var(--violet); letter-spacing:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------- sections */

section.block{padding:clamp(88px, 12vw, 150px) 0; position:relative}
.kicker{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font:700 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.kicker::before{content:""; width:28px; height:1px; background:currentColor}
.h2{font-size:clamp(34px, 5.4vw, 64px); line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0 0 20px; text-wrap:balance}
.section-head{display:grid; grid-template-columns:1.1fr .9fr; gap:24px 60px; align-items:end; margin-bottom:56px}
.section-head p{color:var(--dim); font-size:18px; margin:0; text-wrap:pretty}
@media (max-width:860px){.section-head{grid-template-columns:1fr; margin-bottom:40px}}

/* ---------------------------------------------------------------- stats */

.stats{display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, var(--surface), var(--bg-2)); overflow:hidden}
.stat{padding:34px 28px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .num{font-size:clamp(40px, 5vw, 60px); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:10px}
.stat .num span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .label{color:var(--dim); font-size:14px; font-weight:600}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .stat{padding:26px 20px}
}

/* ------------------------------------------------------------ game cards */

.games{display:grid; gap:22px}

.feature{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr; min-height:560px;
  border-radius:28px; overflow:hidden; isolation:isolate;
  border:1px solid var(--line-2); background:var(--surface);
  box-shadow:0 40px 120px -40px rgba(77,226,216,.25);
  transform-style:preserve-3d; transition:transform .6s var(--ease);
}
.feature .bg{position:absolute; inset:0; z-index:-2}
.feature .bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.2s var(--ease)}
.feature:hover .bg img{transform:scale(1.1)}
.feature::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(6,8,12,.96) 0%, rgba(6,8,12,.86) 38%, rgba(6,8,12,.35) 70%, rgba(6,8,12,.55) 100%),
    linear-gradient(0deg, rgba(6,8,12,.9) 0%, transparent 45%);
}
.feature .copy{padding:clamp(28px, 5vw, 60px); display:flex; flex-direction:column; justify-content:flex-end; position:relative; z-index:2}
.feature .art{position:relative; display:flex; align-items:flex-end; justify-content:center; z-index:1}
.feature .art img{
  width:min(330px, 80%); margin-bottom:-6px;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(77,226,216,.18));
  animation:hover-y 6s ease-in-out infinite;
}
.feature .art::after{
  content:""; position:absolute; left:20%; right:20%; bottom:10px; height:40px; z-index:-1;
  background:radial-gradient(ellipse, rgba(77,226,216,.35), transparent 70%); filter:blur(8px);
}
@keyframes hover-y{50%{transform:translateY(-12px)}}

.tags{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; padding:0; list-style:none}
.tag{
  font:700 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:8px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--dim); background:rgba(6,8,12,.5);
}
.tag.live{color:var(--cyan); border-color:rgba(77,226,216,.4)}
.tag.dev{color:var(--amber); border-color:rgba(232,177,76,.4)}
.game-title{font-size:clamp(40px, 6vw, 76px); line-height:.95; letter-spacing:-.045em; font-weight:850; margin:0 0 18px}
.feature .copy p{color:#C3CDD6; max-width:48ch; font-size:17px}
.facts{display:grid; grid-template-columns:repeat(4, auto); justify-content:start; gap:10px 32px; margin:10px 0 30px; padding:0; list-style:none}
.facts b{display:block; font-size:28px; letter-spacing:-.03em; font-weight:800; line-height:1.1}
.facts span{font-size:12px; color:var(--dim); font-weight:600; text-transform:uppercase; letter-spacing:.1em}
.feature .actions{justify-content:flex-start}

@media (max-width:900px){
  .feature{grid-template-columns:1fr; min-height:0}
  .feature .art{order:-1; height:300px; padding-top:30px}
  .feature .art img{width:auto; height:100%; max-height:280px}
  .feature::before{background:linear-gradient(180deg, rgba(6,8,12,.35) 0%, rgba(6,8,12,.85) 45%, rgba(6,8,12,.97) 100%)}
  .facts{grid-template-columns:repeat(2, auto)}
}

/* Store buttons, drawn rather than pasted so they sit in the page's type. */
.stores{display:flex; gap:12px; flex-wrap:wrap}
.store{
  display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:9px 20px 9px 16px;
  border-radius:14px; text-decoration:none; color:#fff; background:#000;
  border:1px solid rgba(255,255,255,.22);
  transition:transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
}
.store:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.5); box-shadow:0 14px 40px -14px rgba(77,226,216,.45)}
.store svg{width:24px; height:24px; flex:none}
.store span{display:flex; flex-direction:column; font-size:19px; font-weight:700; line-height:1.05; letter-spacing:-.01em}
.store small{font-size:10.5px; font-weight:600; letter-spacing:.02em; opacity:.8; margin-bottom:2px}
.more{display:flex; gap:22px; margin:20px 0 0; font-size:14px; font-weight:600}
.more a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .2s, border-color .2s}
.more a:hover{color:var(--text); border-color:var(--cyan)}

/* Chroma: a neon night sky, and the game shown on three phones. */
.feature.chroma{
  grid-template-columns:.95fr 1.05fr;
  background:
    radial-gradient(60% 70% at 28% 50%, rgba(150,60,255,.35), transparent 70%),
    radial-gradient(40% 50% at 85% 15%, rgba(60,220,255,.14), transparent 70%),
    #07051A;
  box-shadow:0 40px 120px -40px rgba(170,70,255,.4);
}
.feature.chroma::before{
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 72% 34%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 44% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 58% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 24% 64%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 82% 90%, rgba(255,255,255,.5), transparent);
}
.feature.chroma .copy{justify-content:center}
.game-head{display:flex; align-items:center; gap:16px; margin-bottom:20px}
.game-head .tags{margin:0}
.app-icon{width:64px; height:64px; border-radius:16px; flex:none; box-shadow:0 10px 30px -8px rgba(170,70,255,.6), 0 0 0 1px rgba(255,255,255,.12)}
.game-title.neon{
  background:linear-gradient(90deg, #C04BFF 0%, #4DE2F0 55%, #D9F23C 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(170,70,255,.45));
}

.phones{position:relative; min-height:560px; align-items:center; perspective:1200px}
.phone{
  position:absolute; left:50%; top:50%; margin:0; width:210px; aspect-ratio:9/20;
  border-radius:34px; padding:7px; background:linear-gradient(160deg, #2A2540, #0C0A16);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .8s var(--ease);
}
.feature .phones img{width:100%; height:100%; max-height:none; margin:0; object-fit:cover; border-radius:28px; display:block; filter:none; animation:none}
.feature.chroma .art::after{background:radial-gradient(ellipse, rgba(170,70,255,.5), transparent 70%); bottom:40px}
.phone.front{transform:translate(-50%,-50%); z-index:3; box-shadow:0 40px 80px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(170,70,255,.55), 0 0 0 1px rgba(255,255,255,.14)}
.phone.back{width:180px; opacity:.85; z-index:1}
.phone.left{transform:translate(-112%,-46%) rotate(-9deg)}
.phone.right{transform:translate(12%,-46%) rotate(9deg)}
.feature.chroma:hover .phone.left{transform:translate(-122%,-47%) rotate(-12deg)}
.feature.chroma:hover .phone.right{transform:translate(22%,-47%) rotate(12deg)}

@media (max-width:900px){
  .feature.chroma{grid-template-columns:1fr}
  .phones{min-height:400px; order:-1}
  .phone{width:160px; border-radius:26px; padding:5px}
  .feature .phones img{border-radius:22px}
  .phone.back{width:136px}
}
@media (max-width:420px){
  .phone{width:140px} .phone.back{width:116px}
  .phones{min-height:350px}
  .store{padding:8px 16px 8px 13px} .store span{font-size:17px}
}

/* Knightales: a dreamy violet night with a gold glow; same three-phone layout. */
.feature.knightales{
  grid-template-columns:.95fr 1.05fr;
  background:
    radial-gradient(60% 70% at 28% 50%, rgba(140,80,255,.38), transparent 70%),
    radial-gradient(40% 50% at 80% 20%, rgba(255,190,90,.16), transparent 70%),
    #0A0B26;
  box-shadow:0 40px 120px -40px rgba(233,180,76,.38);
}
.feature.knightales::before{
  background-image:
    radial-gradient(1px 1px at 14% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,236,190,.6), transparent),
    radial-gradient(1px 1px at 46% 86%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 88% 66%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 30% 60%, rgba(255,236,190,.45), transparent);
}
.feature.knightales .copy{justify-content:center}
.feature.knightales .app-icon{box-shadow:0 10px 30px -8px rgba(233,180,76,.6), 0 0 0 1px rgba(255,255,255,.12)}
.feature.knightales .tag.live{color:#F2C46A; border-color:rgba(233,180,76,.45)}
.game-title.gold{
  background:linear-gradient(180deg, #FFF1B8 0%, #F2C46A 45%, #C9822A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(233,180,76,.4));
}
.feature.knightales .art::after{background:radial-gradient(ellipse, rgba(233,180,76,.45), transparent 70%); bottom:40px}
.feature.knightales .phone{background:linear-gradient(160deg, #3A2E5A, #0E0B1E)}
.feature.knightales .phone.front{box-shadow:0 40px 80px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(233,180,76,.5), 0 0 0 1px rgba(255,255,255,.14)}
.feature.knightales:hover .phone.left{transform:translate(-122%,-47%) rotate(-12deg)}
.feature.knightales:hover .phone.right{transform:translate(22%,-47%) rotate(12deg)}
@media (max-width:900px){
  .feature.knightales{grid-template-columns:1fr}
}

/* Wobbly Bot: a sunny-to-dusk sky with an orange glow; the game is landscape,
   so the three phones lie on their side. */
.feature.wobblybot{
  grid-template-columns:.95fr 1.05fr;
  background:
    radial-gradient(60% 70% at 72% 50%, rgba(255,150,40,.30), transparent 70%),
    radial-gradient(45% 55% at 20% 15%, rgba(90,140,255,.22), transparent 70%),
    #0B1230;
  box-shadow:0 40px 120px -40px rgba(255,150,40,.38);
}
.feature.wobblybot::before{
  background-image:
    radial-gradient(1px 1px at 16% 22%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 66% 12%, rgba(255,226,160,.55), transparent),
    radial-gradient(1px 1px at 40% 84%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 92% 74%, rgba(255,255,255,.45), transparent);
}
.feature.wobblybot .copy{justify-content:center}
.feature.wobblybot .app-icon{box-shadow:0 10px 30px -8px rgba(255,150,40,.6), 0 0 0 1px rgba(255,255,255,.12)}
.game-title.wobbly{
  background:linear-gradient(180deg, #FFE98A 0%, #FFB33C 50%, #FF7A1A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,150,40,.4));
}
.feature.wobblybot .art::after{background:radial-gradient(ellipse, rgba(255,150,40,.45), transparent 70%); bottom:40px}
.phones.wide .phone{width:400px; aspect-ratio:2868/1320; border-radius:30px; padding:7px; background:linear-gradient(160deg, #2C3A6A, #0C1024)}
.phones.wide img{border-radius:24px}
.phones.wide .phone.front{box-shadow:0 40px 80px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(255,150,40,.5), 0 0 0 1px rgba(255,255,255,.14)}
.phones.wide .phone.back{width:320px}
.phones.wide .phone.left{transform:translate(-80%,-112%) rotate(-6deg)}
.phones.wide .phone.right{transform:translate(-20%,12%) rotate(6deg)}
.feature.wobblybot:hover .phone.left{transform:translate(-86%,-122%) rotate(-8deg)}
.feature.wobblybot:hover .phone.right{transform:translate(-14%,22%) rotate(8deg)}
@media (max-width:900px){
  .feature.wobblybot{grid-template-columns:1fr}
  .phones.wide .phone{width:300px; border-radius:24px; padding:5px}
  .phones.wide img{border-radius:19px}
  .phones.wide .phone.back{width:240px}
  .phones.wide{min-height:330px}
}
@media (max-width:420px){
  .phones.wide .phone{width:250px} .phones.wide .phone.back{width:196px}
  .phones.wide{min-height:290px}
}

/* ZERO: the game's own night navy with amber and teal glows; chrome title like
   the in-game logo. Copy on the left, three portrait phones on the right. */
.feature.zero{
  grid-template-columns:1.05fr .95fr;
  background:
    radial-gradient(55% 65% at 74% 50%, rgba(245,185,74,.24), transparent 70%),
    radial-gradient(45% 55% at 18% 18%, rgba(94,217,198,.16), transparent 70%),
    #0A1124;
  box-shadow:0 40px 120px -40px rgba(245,185,74,.32);
}
.feature.zero::before{
  background-image:
    radial-gradient(1px 1px at 12% 26%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 62% 14%, rgba(255,214,140,.55), transparent),
    radial-gradient(1px 1px at 38% 82%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(170,240,230,.5), transparent);
}
.feature.zero .copy{justify-content:center}
.feature.zero .app-icon{box-shadow:0 10px 30px -8px rgba(245,185,74,.55), 0 0 0 1px rgba(255,255,255,.12)}
.game-title.chrome{
  letter-spacing:.14em;
  background:linear-gradient(180deg, #FFFFFF 0%, #D9E0EA 45%, #8C97A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(245,185,74,.35));
}
.feature.zero .art::after{background:radial-gradient(ellipse, rgba(245,185,74,.42), transparent 70%); bottom:40px}
.feature.zero .phone{background:linear-gradient(160deg, #26324E, #0A0F1E)}
.feature.zero .phone.front{box-shadow:0 40px 80px -20px rgba(0,0,0,.85), 0 0 60px -10px rgba(245,185,74,.45), 0 0 0 1px rgba(255,255,255,.14)}
.feature.zero:hover .phone.left{transform:translate(-122%,-47%) rotate(-12deg)}
.feature.zero:hover .phone.right{transform:translate(22%,-47%) rotate(12deg)}
@media (max-width:900px){
  .feature.zero{grid-template-columns:1fr}
}

.row-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:760px){.row-2{grid-template-columns:1fr}}

/* Cards with a light that follows the pointer (set from JS as --mx / --my). */
.card{
  position:relative; border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:32px; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), border-color .3s;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(139,124,255,.16), transparent 60%);
}
.card:hover{border-color:var(--line-2)}
.card:hover::before{opacity:1}
.card h3{font-size:24px; letter-spacing:-.025em; margin:0 0 10px; line-height:1.15}
.card p{color:var(--dim); margin:0}

.next{min-height:300px; display:flex; flex-direction:column; justify-content:space-between}
.next .code{font:700 13px/1 var(--mono); letter-spacing:.2em; color:var(--faint); margin-bottom:24px}
.next h3{font-size:clamp(28px, 3.4vw, 40px)}
.redact{display:grid; gap:9px; margin:22px 0 0}
.redact i{display:block; height:12px; border-radius:4px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); position:relative; overflow:hidden}
.redact i:nth-child(1){width:92%} .redact i:nth-child(2){width:74%} .redact i:nth-child(3){width:52%}
.redact i::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(139,124,255,.35), transparent);
  animation:scan 2.8s var(--ease) infinite;
}
.redact i:nth-child(2)::after{animation-delay:.2s} .redact i:nth-child(3)::after{animation-delay:.4s}
@keyframes scan{to{transform:translateX(100%)}}
.next .glyph{
  position:absolute; right:-30px; bottom:-60px; font-size:260px; font-weight:900; line-height:1; letter-spacing:-.08em; z-index:-1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.07);
}
.text-link{display:inline-flex; align-items:center; gap:8px; margin-top:26px; color:var(--cyan); text-decoration:none; font-weight:700}
.text-link svg{width:16px; height:16px; transition:transform .3s var(--ease)}
.text-link:hover svg{transform:translateX(4px)}

/* -------------------------------------------------------------- pillars */

.pillars{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.pillars .card{padding:30px 26px 32px}
.icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:28px;
  background:linear-gradient(135deg, rgba(77,226,216,.16), rgba(139,124,255,.16));
  border:1px solid rgba(255,255,255,.1);
}
.icon svg{width:24px; height:24px; stroke:var(--cyan)}
.pillars h3{font-size:20px}
.pillars p{font-size:15.5px}
@media (max-width:1000px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* -------------------------------------------------------------- process */

.steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:0; list-style:none; margin:0; padding:0; counter-reset:step; position:relative}
.steps::before{
  content:""; position:absolute; left:0; right:0; top:27px; height:1px;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--coral)); opacity:.5;
}
.steps li{position:relative; padding:0 26px 0 0; counter-increment:step}
.steps li::before{
  content:counter(step, decimal-leading-zero); display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%; margin-bottom:26px; position:relative;
  font:700 14px/1 var(--mono); color:var(--text); background:var(--bg);
  border:1px solid var(--line-2); box-shadow:0 0 0 8px var(--bg);
}
.steps h3{font-size:21px; letter-spacing:-.02em; margin:0 0 8px}
.steps p{color:var(--dim); font-size:15.5px; margin:0}
@media (max-width:860px){
  .steps{grid-template-columns:1fr; gap:34px}
  .steps::before{left:27px; right:auto; top:0; bottom:0; width:1px; height:auto; background:linear-gradient(180deg, var(--cyan), var(--violet), var(--coral))}
  .steps li{padding:0 0 0 84px; min-height:56px}
  .steps li::before{position:absolute; left:0; top:-6px; margin:0}
}

/* -------------------------------------------------------------- contact */

.cta{
  position:relative; overflow:hidden; isolation:isolate; text-align:center;
  border-radius:32px; border:1px solid var(--line-2); padding:clamp(56px, 9vw, 110px) var(--gutter);
  background:radial-gradient(120% 140% at 50% 0%, #121A2A 0%, var(--bg-2) 60%);
}
.cta::before{
  content:""; position:absolute; inset:-40% -10% auto; height:120%; z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, transparent, rgba(77,226,216,.22), rgba(139,124,255,.25), rgba(242,112,95,.18), transparent 70%);
  filter:blur(60px); animation:spin 18s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cta .h2{font-size:clamp(38px, 6.5vw, 84px)}
.cta p{color:var(--dim); max-width:560px; margin:0 auto 36px; font-size:18px}
.mail{
  display:inline-block; font-size:clamp(22px, 4vw, 44px); font-weight:800; letter-spacing:-.03em;
  text-decoration:none; padding-bottom:6px; margin-bottom:34px; word-break:break-all;
  background:var(--grad) left bottom / 100% 2px no-repeat;
  transition:background-size .5s var(--ease);
}
.mail:hover{background-size:0 2px; background-position:right bottom}
.chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.chips a{
  text-decoration:none; font-size:14px; font-weight:700; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(6,8,12,.45); color:var(--dim); transition:color .2s, border-color .2s;
}
.chips a:hover{color:var(--text); border-color:var(--cyan)}

/* --------------------------------------------------------------- footer */

.footer{border-top:1px solid var(--line); padding:64px 0 40px; color:var(--dim); font-size:14px}
.footer .grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px}
.footer h4{margin:0 0 14px; font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer a{text-decoration:none; color:var(--dim); transition:color .2s}
.footer a:hover{color:var(--text)}
.footer .logo{color:var(--text)}
.footer .about p{max-width:34ch; margin:16px 0 0}
.footer .legal{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); color:var(--faint); font-size:13px}
.footer .legal p{margin:0}
@media (max-width:760px){.footer .grid{grid-template-columns:1fr 1fr}.footer .about{grid-column:1 / -1}}

/* --------------------------------------------------------------- reveal */

.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.no-js .reveal{opacity:1; transform:none}

/* ------------------------------------------------------------ doc pages */

.page-hero{position:relative; overflow:hidden; isolation:isolate; padding:160px 0 70px; border-bottom:1px solid var(--line)}
.page-hero .aurora{opacity:.32}
.page-hero h1{font-size:clamp(44px, 7vw, 88px); line-height:.98; letter-spacing:-.045em; font-weight:850; margin:0 0 22px}
.page-hero .lede{color:var(--dim); font-size:19px; max-width:660px; margin:0 0 26px}
.meta{display:flex; gap:10px; flex-wrap:wrap}

.doc{display:grid; grid-template-columns:240px minmax(0, 1fr); gap:72px; padding:72px 0 120px}
.toc{position:sticky; top:100px; align-self:start}
.toc h4{margin:0 0 16px; font:700 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:toc}
.toc a{
  display:flex; gap:12px; padding:7px 0; text-decoration:none; color:var(--dim); font-size:14px; font-weight:600;
  counter-increment:toc; transition:color .2s;
}
.toc a::before{content:counter(toc, decimal-leading-zero); font:600 11px/1.9 var(--mono); color:var(--faint)}
.toc a:hover,.toc a.active{color:var(--text)}
.toc a.active::before{color:var(--cyan)}
@media (max-width:900px){.doc{grid-template-columns:1fr; gap:40px; padding-top:48px}.toc{display:none}}

.prose{max-width:760px; counter-reset:sec}
.prose > section{padding-top:8px; margin-bottom:56px}
.prose h2{
  font-size:clamp(24px, 3vw, 32px); letter-spacing:-.025em; line-height:1.15; margin:0 0 18px;
  display:flex; align-items:baseline; gap:14px; counter-increment:sec;
}
.prose h2::before{content:counter(sec, decimal-leading-zero); font:700 13px/1 var(--mono); color:var(--cyan); letter-spacing:.06em}
.prose h3{font-size:18px; margin:28px 0 10px}
.prose p,.prose li{color:#B8C3CD}
.prose strong{color:var(--text)}
.prose ul{padding-left:20px; margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--violet)}
.prose a{color:var(--cyan); text-underline-offset:3px; text-decoration-color:rgba(77,226,216,.4)}
.prose a:hover{text-decoration-color:var(--cyan)}

.summary{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:0 0 64px}
.summary .card{padding:24px}
.summary .card b{display:block; font-size:17px; margin-bottom:6px; color:var(--text)}
.summary .card span{font-size:14.5px; color:var(--dim); line-height:1.55; display:block}
@media (max-width:760px){.summary{grid-template-columns:1fr}}

.table{border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 0 1.2em}
.table .tr{display:grid; grid-template-columns:200px 1fr; border-top:1px solid var(--line)}
.table .tr:first-child{border-top:0}
.table .tr > div{padding:14px 18px; font-size:15px; color:#B8C3CD}
.table .tr > div:first-child{color:var(--text); font-weight:700; background:rgba(255,255,255,.02)}
@media (max-width:600px){.table .tr{grid-template-columns:1fr}.table .tr > div:first-child{padding-bottom:4px; background:none}.table .tr > div:last-child{padding-top:0}}

.note{
  border:1px solid rgba(77,226,216,.25); border-left:3px solid var(--cyan); border-radius:12px;
  background:rgba(77,226,216,.05); padding:18px 20px; margin:0 0 1.2em;
}
.note p:last-child{margin:0}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}

/* --------------------------------------------------- privacy center */

.policy-game{display:flex; align-items:center; gap:14px; margin-bottom:22px}
.policy-game img{width:56px; height:56px; border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.12)}

.policies{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.policy{display:flex; align-items:flex-start; gap:20px; text-decoration:none; color:inherit}
.policy img{width:64px; height:64px; border-radius:16px; flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.policy > div{flex:1; min-width:0}
.policy h3{margin-bottom:10px}
.policy .tags{margin:0 0 12px}
.policy p{font-size:15px}
.policy .go{font-size:22px; color:var(--faint); transition:transform .3s var(--ease), color .2s}
.policy:hover .go{transform:translateX(4px); color:var(--cyan)}
@media (max-width:760px){.policies{grid-template-columns:1fr}.policy{gap:16px}.policy img{width:52px; height:52px}}