:root{ --bg:#0b0d12; --panel:#0f1219; --text:#e9ecf1; --muted:#9aa3b2; --accent:#6f9cff; --accent-2:#7bf1a8; --border:rgba(255,255,255,.08); --radius:16px; --glow:0 0 40px rgba(111,156,255,.25), 0 0 120px rgba(123,241,168,.15) }
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: radial-gradient(1200px 800px at 10% -10%, rgba(111,156,255,.15), transparent 60%), radial-gradient(900px 700px at 90% -20%, rgba(123,241,168,.12), transparent 60%), var(--bg); background-attachment: fixed; color:var(--text); line-height:1.6; overflow-x:hidden }


/* Shared layout */
.container{ max-width:1100px; margin:0 auto }
section{ padding:90px clamp(16px,4vw,40px) }
.panel{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius); padding:28px; overflow:hidden }
.grid{ display:grid; gap:22px }
.grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:880px){ .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr } }


h2{ font-size:clamp(1.6rem,3.5vw,2.2rem); margin:0 0 10px }
.eyebrow{ font-weight:800; letter-spacing:.18em; color:var(--accent); text-transform:uppercase; font-size:.85rem }
.muted{ color:var(--muted) }
.btn{ padding:12px 18px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--text); text-decoration:none; font-weight:700 }
.btn:hover{ background:rgba(255,255,255,.06) }


/* Lists */
.list{ display:grid; gap:16px; margin-top:12px }
.list .item{ display:flex; gap:14px; align-items:flex-start }
.bullet{ height:36px; width:36px; display:grid; place-items:center; border-radius:10px; background:rgba(111,156,255,.15); border:1px solid var(--border) }


/* Careers */
.job{ display:flex; flex-direction:column; gap:10px; padding:22px; border:1px solid var(--border); background:rgba(255,255,255,.03); border-radius:14px }
.job .tags{ display:flex; gap:8px; flex-wrap:wrap }
.tag{ font-size:.8rem; padding:6px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted); background:rgba(255,255,255,.02) }


/* Games */
#games .game-card{ padding:0; overflow:hidden; border-radius:30px }
#games .game-image{ position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; }
#games .game-image img{ display:block; width:100%; height:100%; object-fit:cover; scale: 105% }
#games .overlay{
    position:absolute;
    bottom:0; left:0; right:0;
    padding:24px;
    background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0) 100%);
    color:white;
    border-bottom-left-radius:30px;
    border-bottom-right-radius:30px;
}
#games .overlay h2{ font-size:1.5rem; font-weight:700; margin-bottom:8px }
#games .overlay p{ font-size:1rem; line-height:1.4; max-width:720px; color:rgba(255,255,255,0.85) }

/* Footer */
footer{ border-top:1px solid var(--border); padding:26px clamp(16px,4vw,40px); color:var(--muted) }


/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:all .6s ease }
.reveal.visible{ opacity:1; transform:translateY(0) }


/* Header / hero (Index) */
header{ position:relative; isolation:isolate; overflow:hidden; min-height:86vh; display:flex; flex-direction:column; border-bottom:1px solid var(--border) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px clamp(16px,4vw,40px) }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--text) }
.brand img{ height:32px; width:auto; filter: invert(1) brightness(1.2) contrast(1.1) }
.brand .wordmark{ font-weight:800; letter-spacing:.5px }
.nav a{ color:var(--muted); text-decoration:none; font-weight:600; margin-inline:8px }
.nav a:hover{ color:var(--text) }
.cta{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:linear-gradient(180deg, var(--accent), #4f79ff); color:#fff; text-decoration:none; box-shadow:var(--glow); font-weight:700 }
.hero{ display:grid; place-items:center; text-align:center; padding:56px clamp(16px,4vw,40px) 96px; position:relative; flex:1 }
.kicker{ color:var(--accent-2); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem }
.hero h1{ font-size:clamp(2.4rem,6vw,4.5rem); line-height:1.1; margin:.4rem 0 1rem }
.sub{ max-width:min(780px,92vw); color:var(--muted); font-size:clamp(1rem,2.5vw,1.125rem) }
.hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; justify-content:center }


/* Emoji trail elements (header only) */
.trail{ position:absolute; pointer-events:none; font-size:22px; opacity:0; animation:floatFade .9s ease-out forwards }
@keyframes floatFade{ 0%{ transform: translate(-50%,-50%) scale(.6) rotate(0deg); opacity:1 } 80%{ opacity:.9 } 100%{ transform: translate(-50%,-120%) scale(1.1) rotate(12deg); opacity:0 } }


/* Forms */
form{ display:grid; gap:12px }
input, textarea{ width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:#0c0f15; color:var(--text) }
textarea{ min-height:140px; resize:vertical }
button{ padding:12px 16px; border-radius:12px; border:0; background:linear-gradient(180deg, var(--accent), #4f79ff); color:#fff; font-weight:800; box-shadow:var(--glow); cursor:pointer; width:100% }


.social-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:16px }
.social-tile{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; text-decoration:none; color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--border); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.social-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.35); border-color:rgba(255,255,255,.14) }
.avatar{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; background:radial-gradient(80% 80% at 30% 20%, rgba(111,156,255,.45), rgba(123,241,168,.25)); border:1px solid var(--border) }
.meta{ display:flex; flex-direction:column; line-height:1.1 }
.meta .sub{ color:var(--muted); margin-top:4px; font-size:.9rem }
.pill{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); font-weight:700; font-size:.9rem }
.micro{ margin-top:14px; font-size:.9rem }

/* Optional brand accent hover tints */
.avatar svg {
    width: 22px;
    height: 22px;
    color: var(--text);
}

/* Kicker typing effect */
#kicker-rotator { white-space: nowrap; }
#kicker-rotator .swap{
    display:inline-block;
    min-width:6ch;              /* prevents layout jitter between words */
    border-right:2px solid currentColor; /* caret */
    padding-right:.15em;
    animation:gfCaretBlink 1s steps(1,end) infinite;
}
@keyframes gfCaretBlink { 50% { border-color: transparent; } }

@media (max-width: 768px) {
    #game-description {
        display: none;
    }
}