@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
    --bg:#050607;
    --panel:#0d1012;
    --panel2:#111518;
    --text:#f4f6f5;
    --muted:#92999a;
    --line:#242a2b;
    --red:#ff2638;
    --red2:#b90e1d;
    --max:1180px;
    --ease:cubic-bezier(.2,.8,.2,1)
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0
}

html{
    scroll-behavior:smooth
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,system-ui,sans-serif;
    overflow-x:hidden
}

a{
    color:inherit;
    text-decoration:none
}

.container{
    width:min(calc(100% - 40px),var(--max));
    margin:auto
}

.noise{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:50;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")
}

.cursor-glow{
    position:fixed;
    width:420px;
    height:420px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(255,38,56,.07),transparent 65%);
    filter:blur(10px)
}


/* =========================
   NAVIGATION
========================= */

.nav{
    position:fixed;
    z-index:40;
    left:0;
    right:0;
    top:0;
    height:82px;
    border-bottom:1px solid transparent;
    transition:.45s var(--ease)
}

.nav.scrolled{
    background:rgba(5,6,7,.84);
    backdrop-filter:blur(18px);
    border-color:var(--line)
}

.nav-inner{
    width:min(calc(100% - 40px),var(--max));
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    font:700 13px 'Space Grotesk';
    letter-spacing:1px;
    white-space:nowrap
}

.brand img{
    width:38px;
    height:38px;
    object-fit:contain
}

.brand b{
    color:#8d9294;
    font-weight:600
}

.links{
    display:flex;
    align-items:center;
    gap:28px;
    color:#9da2a4;
    font-size:13px
}

.links a{
    position:relative;
    padding:8px 0;
    transition:.25s
}

.links a:after{
    content:'';
    position:absolute;
    left:0;
    bottom:2px;
    width:0;
    height:1px;
    background:var(--red);
    transition:.3s
}

.links a:hover,
.links a.active{
    color:#fff
}

.links a:hover:after,
.links a.active:after{
    width:100%
}

.nav-cta{
    border:1px solid #343a3b;
    padding:11px 15px;
    font-size:11px;
    letter-spacing:1px;
    transition:.3s
}

.nav-cta:hover{
    border-color:var(--red);
    color:#fff;
    transform:translateY(-2px)
}

.menu{
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:25px
}


/* =========================
   HERO
========================= */

.hero{
    min-height:100vh;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at 75% 46%,rgba(255,38,56,.08),transparent 27%),
        radial-gradient(circle at 18% 75%,rgba(255,255,255,.025),transparent 20%)
}

.hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,#000 5%,transparent 90%);
    animation:gridMove 18s linear infinite
}

.hero-ring{
    position:absolute;
    border:1px solid rgba(255,38,56,.13);
    border-radius:50%;
    right:-190px;
    top:17%;
    width:650px;
    height:650px;
    box-shadow:
        0 0 100px rgba(255,38,56,.04),
        inset 0 0 100px rgba(255,38,56,.025);
    animation:float 9s ease-in-out infinite
}

.ring-b{
    width:440px;
    height:440px;
    right:-85px;
    top:29%;
    border-color:rgba(255,255,255,.08);
    animation-delay:-3s
}

.ring-a:before,
.ring-a:after{
    content:'';
    position:absolute;
    inset:70px;
    border:1px solid rgba(255,38,56,.09);
    border-radius:50%
}

.ring-a:after{
    inset:160px
}

.hero-particle{
    position:absolute;
    width:4px;
    height:4px;
    background:var(--red);
    border-radius:50%;
    box-shadow:0 0 20px var(--red);
    animation:particle 5s ease-in-out infinite
}

.p1{
    right:26%;
    top:27%
}

.p2{
    right:14%;
    bottom:25%;
    animation-delay:-2s
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(calc(100% - 40px),var(--max));
    margin:auto;
    padding-top:65px
}

.eyebrow,
.kicker{
    font-size:10px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#e64a55
}

.eyebrow i{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 12px var(--red);
    margin-right:8px
}

.hero h1{
    font:700 clamp(68px,10vw,128px)/.84 'Space Grotesk';
    letter-spacing:-7px;
    margin-top:20px;
    max-width:900px
}

.hero h1 span,
.section h2 span,
.featured-copy h3 span,
.contact h2 span,
.founder-copy h3 span{
    color:transparent;
    -webkit-text-stroke:1px #747b7d
}

.hero-content>p{
    max-width:590px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
    margin:30px 0
}

.actions{
    display:flex;
    gap:11px;
    flex-wrap:wrap
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:14px 19px;
    border:1px solid var(--line);
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    transition:.35s var(--ease)
}

.btn.primary{
    background:var(--red);
    border-color:var(--red);
    color:#fff
}

.btn.primary:hover{
    background:#ff4050;
    box-shadow:0 15px 45px rgba(255,38,56,.2)
}

.btn.ghost:hover{
    border-color:#777;
    transform:translateY(-3px)
}

.btn:hover{
    transform:translateY(-4px)
}

.hero-strip{
    display:flex;
    gap:0;
    margin-top:60px;
    border-top:1px solid var(--line);
    max-width:730px
}

.hero-strip>div{
    padding:18px 38px 0 0;
    margin-right:38px;
    border-right:1px solid var(--line)
}

.hero-strip>div:last-child{
    border:0
}

.hero-strip small,
.mini-stats small{
    display:block;
    color:#676e70;
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:6px
}

.hero-strip strong,
.mini-stats strong{
    font:600 12px 'Space Grotesk';
    letter-spacing:.5px
}

.scroll-cue{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    letter-spacing:3px;
    color:#666;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px
}

.scroll-cue span{
    width:1px;
    height:38px;
    background:linear-gradient(var(--red),transparent);
    animation:scroll 1.7s infinite
}


/* =========================
   MARQUEE / SECTIONS
========================= */

.marquee{
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:17px 0;
    background:#080a0b
}

.marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 25s linear infinite
}

.marquee span{
    font:600 13px 'Space Grotesk';
    letter-spacing:4px;
    color:#6e7475;
    padding-right:60px
}

.marquee span:after{
    content:' ◆';
    color:var(--red)
}

.section{
    padding:125px 0
}

.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:45px
}

.section h2{
    font:700 clamp(45px,6vw,72px)/.9 'Space Grotesk';
    letter-spacing:-4px;
    margin-top:10px
}

.section-head>p{
    max-width:410px;
    color:var(--muted);
    font-size:14px;
    line-height:1.75
}

.text-link{
    font-size:10px;
    letter-spacing:2px;
    color:#b7bcbc;
    border-bottom:1px solid #3a3f40;
    padding-bottom:8px;
    transition:.3s
}

.text-link:hover{
    color:#fff;
    border-color:var(--red)
}


/* =========================
   OLD FEATURED SUPPORT
========================= */

.featured-game{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    min-height:560px;
    border:1px solid var(--line);
    background:var(--panel);
    overflow:hidden
}

.featured-art{
    position:relative;
    min-height:560px;
    overflow:hidden;
    background:
        radial-gradient(circle at 55% 42%,rgba(255,38,56,.25),transparent 20%),
        linear-gradient(145deg,#171b1c,#070809 72%)
}

.art-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:55px 55px;
    transform:perspective(500px) rotateX(55deg) scale(1.5);
    transform-origin:center bottom;
    opacity:.55
}

.art-logo{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font:800 230px/.8 'Space Grotesk';
    color:rgba(255,255,255,.035);
    letter-spacing:-18px
}

.art-orbit{
    position:absolute;
    width:330px;
    height:330px;
    border:1px solid rgba(255,38,56,.3);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(25deg);
    box-shadow:0 0 60px rgba(255,38,56,.08)
}

.art-orbit:before{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 30px var(--red);
    top:13px;
    left:50%;
    animation:orbit 5s linear infinite
}

.art-label{
    position:absolute;
    left:25px;
    top:25px;
    font-size:9px;
    letter-spacing:2px;
    color:#8a9091
}

.featured-copy{
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.game-meta{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-bottom:18px
}

.game-meta span{
    font-size:9px;
    letter-spacing:1.5px;
    color:#aeb3b4;
    border:1px solid #343a3b;
    padding:6px 8px
}

.featured-copy h3{
    font:700 clamp(45px,5vw,70px)/.88 'Space Grotesk';
    letter-spacing:-4px
}

.featured-copy p{
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
    margin:25px 0
}

.mini-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:16px 0;
    margin-bottom:25px
}

.featured-copy .btn{
    width:max-content
}


/* =========================
   STATEMENT / STUDIO
========================= */

.statement{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:110px 0;
    background:linear-gradient(90deg,#070809,#0b0c0d,#070809)
}

.statement p{
    font:600 clamp(34px,5vw,62px)/1.05 'Space Grotesk';
    letter-spacing:-3px;
    margin-top:16px
}

.statement em{
    font-style:normal;
    color:var(--red)
}

.statement strong{
    font-weight:700
}

.studio-grid{
    display:grid;
    grid-template-columns:1.2fr .9fr .9fr;
    gap:15px
}

.studio-card{
    position:relative;
    min-height:330px;
    padding:34px;
    background:var(--panel);
    border:1px solid var(--line);
    overflow:hidden;
    transition:.4s var(--ease)
}

.studio-card:hover{
    transform:translateY(-7px);
    border-color:#4a4e4f
}

.studio-card.big{
    background:linear-gradient(145deg,#131718,#0b0d0e)
}

.studio-card:after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    border:1px solid rgba(255,38,56,.1);
    border-radius:50%;
    right:-80px;
    bottom:-90px
}

.card-no{
    font-size:10px;
    letter-spacing:2px;
    color:#5d6364
}

.card-icon{
    font-size:34px;
    color:var(--red);
    margin:35px 0 25px
}

.studio-card h3{
    font:700 34px/.9 'Space Grotesk';
    letter-spacing:-2px
}

.studio-card p{
    color:var(--muted);
    font-size:13px;
    line-height:1.7;
    margin-top:18px;
    max-width:430px
}

.numbers{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:15px;
    border:1px solid var(--line);
    background:var(--line);
    gap:1px
}

.numbers>div{
    background:var(--panel);
    padding:27px
}

.numbers strong{
    display:block;
    font:700 36px 'Space Grotesk'
}

.numbers span{
    font-size:9px;
    letter-spacing:2px;
    color:#737a7b;
    text-transform:uppercase
}


/* =========================
   FOUNDER
========================= */

.founder-section{
    background:#080a0b
}

.founder-card{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    border:1px solid var(--line);
    background:var(--panel);
    min-height:560px;
    overflow:hidden
}

.founder-photo{
    position:relative;
    min-height:560px;
    background:
        radial-gradient(circle at 50% 35%,rgba(255,38,56,.16),transparent 32%),
        #0a0c0d;
    display:flex;
    align-items:end;
    justify-content:center;
    overflow:hidden
}

.founder-photo:before{
    content:'AK';
    position:absolute;
    top:25px;
    left:25px;
    font:700 90px/.8 'Space Grotesk';
    color:rgba(255,255,255,.025)
}

.founder-photo img{
    width:88%;
    height:92%;
    object-fit:contain;
    object-position:center bottom;
    filter:grayscale(.08) contrast(1.04);
    position:relative;
    z-index:1
}

.photo-corner{
    position:absolute;
    right:18px;
    bottom:18px;
    width:55px;
    height:55px;
    border-right:1px solid var(--red);
    border-bottom:1px solid var(--red)
}

.founder-copy{
    padding:70px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.founder-copy h3{
    font:700 clamp(38px,4vw,58px)/.92 'Space Grotesk';
    letter-spacing:-3px;
    margin-top:18px
}

.founder-copy p{
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    max-width:640px;
    margin-top:22px
}

.founder-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:25px 0 30px
}

.founder-tags span{
    font-size:9px;
    letter-spacing:1.5px;
    padding:7px 9px;
    border:1px solid #353a3b;
    color:#aeb3b4
}

.founder-copy .btn{
    width:max-content
}


/* =========================
   PROCESS
========================= */

.process{
    padding-top:40px
}

.process-line{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line)
}

.process-step{
    padding:28px 24px 20px 0;
    border-right:1px solid var(--line);
    margin-right:24px;
    position:relative
}

.process-step:last-child{
    border:0;
    margin:0
}

.process-step span{
    color:var(--red);
    font-size:10px;
    letter-spacing:2px
}

.process-step h3{
    font:700 25px 'Space Grotesk';
    margin:22px 0 10px
}

.process-step p{
    color:var(--muted);
    font-size:12px;
    line-height:1.7
}


/* =========================
   CONTACT
========================= */

.contact{
    border:1px solid var(--line);
    background:linear-gradient(135deg,#111516,#0b0d0e);
    padding:65px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    position:relative;
    overflow:hidden
}

.contact:after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border:1px solid rgba(255,38,56,.12);
    border-radius:50%;
    right:-170px;
    top:-160px
}

.contact h2{
    font:700 clamp(42px,5vw,66px)/.9 'Space Grotesk';
    letter-spacing:-3px;
    margin-top:12px
}

.contact p{
    color:var(--muted);
    margin-top:18px;
    font-size:13px
}

.contact-actions{
    display:flex;
    flex-direction:column;
    gap:9px;
    min-width:210px;
    position:relative;
    z-index:1
}

.contact-actions .btn{
    width:100%
}

footer{
    border-top:1px solid var(--line);
    padding:28px 0;
    color:#6d7374;
    font-size:10px;
    letter-spacing:.8px
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:9px;
    color:#a4aaab
}

.footer-brand img{
    width:30px;
    height:30px;
    object-fit:contain
}


/* =========================
   GAMES PAGE
========================= */

.page-hero{
    position:relative;
    overflow:hidden;
    padding:180px 0 100px;
    border-bottom:1px solid var(--line);
    background:radial-gradient(circle at 80% 45%,rgba(255,38,56,.08),transparent 28%)
}

.page-hero .container{
    position:relative;
    z-index:2
}

.page-hero h1{
    font:700 clamp(62px,9vw,112px)/.85 'Space Grotesk';
    letter-spacing:-6px;
    margin-top:18px
}

.page-hero h1 span{
    color:transparent;
    -webkit-text-stroke:1px #777d7e
}

.page-hero p{
    max-width:620px;
    color:var(--muted);
    line-height:1.8;
    margin-top:27px;
    font-size:15px
}

.all-games{
    padding:70px 0 120px
}

.filter-bar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    margin-bottom:20px
}

.filter-bar>span{
    font-size:9px;
    letter-spacing:2px;
    color:#626869;
    margin-right:10px
}

.filter{
    background:none;
    border:1px solid #303536;
    color:#8e9596;
    padding:8px 11px;
    font-size:9px;
    letter-spacing:1px;
    cursor:pointer;
    transition:.3s
}

.filter:hover,
.filter.active{
    border-color:var(--red);
    color:#fff;
    background:rgba(255,38,56,.08)
}

.game-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}


/* IMPORTANT:
   Game card image area now follows
   the actual image aspect ratio.
*/

.wide-card{
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    overflow:hidden;
    transition:.45s var(--ease)
}

.wide-card:hover{
    transform:translateY(-8px);
    border-color:#4a4f50
}

.game-art{
    position:relative;
    overflow:hidden;
    width:100%;
    height:auto;
    aspect-ratio:auto
}

.game-art img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%
}

.game-art>span{
    position:absolute;
    right:22px;
    top:20px;
    font:700 70px 'Space Grotesk';
    color:rgba(255,255,255,.07)
}

.art-one{
    background:
        radial-gradient(circle at 55% 35%,rgba(255,38,56,.23),transparent 24%),
        linear-gradient(145deg,#191416,#08090a)
}

.games-void-logo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:28px 55px;
    filter:drop-shadow(0 0 24px rgba(255,30,45,.18));
    transition:transform .6s var(--ease),filter .6s var(--ease)
}

.wide-card:hover .games-void-logo{
    transform:scale(1.035);
    filter:drop-shadow(0 0 34px rgba(255,30,45,.32))
}

.art-two{
    background:
        radial-gradient(circle at 40% 35%,rgba(91,120,255,.18),transparent 24%),
        linear-gradient(145deg,#12151b,#08090a)
}

.art-three{
    background:
        radial-gradient(circle at 70% 35%,rgba(255,145,66,.18),transparent 24%),
        linear-gradient(145deg,#191512,#08090a)
}

.art-four{
    background:
        radial-gradient(circle at 45% 40%,rgba(168,255,75,.15),transparent 24%),
        linear-gradient(145deg,#111711,#08090a)
}

.game-art:after{
    content:'NIGHTWOLF';
    position:absolute;
    right:-25px;
    bottom:25px;
    font:700 68px 'Space Grotesk';
    letter-spacing:-3px;
    color:rgba(255,255,255,.035);
    transform:rotate(-90deg);
    pointer-events:none
}

.game-card-copy{
    padding:27px
}

.game-card-copy h2{
    font:700 33px 'Space Grotesk';
    letter-spacing:-2px
}

.game-card-copy p{
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
    margin:13px 0 22px;
    max-width:520px
}

.view{
    font-size:9px;
    letter-spacing:2px;
    color:#aeb4b5
}

.view b{
    color:var(--red);
    margin-left:7px
}


/* =========================
   HERO EMBLEM
========================= */

.hero-emblem{
    position:absolute;
    z-index:1;
    right:4%;
    top:50%;
    width:min(43vw,570px);
    height:min(43vw,570px);
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    pointer-events:none;
    filter:drop-shadow(0 0 35px rgba(255,38,56,.08))
}

.emblem-logo-wrap{
    position:relative;
    width:62%;
    height:62%;
    display:grid;
    place-items:center;
    animation:emblemFloat 6s ease-in-out infinite
}

.emblem-logo-wrap img{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:contain;
    filter:
        drop-shadow(0 0 12px rgba(255,38,56,.16))
        drop-shadow(0 0 45px rgba(255,38,56,.09))
}

.emblem-glow{
    position:absolute;
    width:62%;
    height:62%;
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(255,38,56,.24),rgba(255,38,56,.08) 35%,transparent 70%);
    filter:blur(22px);
    animation:emblemPulse 3.2s ease-in-out infinite
}

.emblem-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,38,56,.16);
    box-shadow:0 0 35px rgba(255,38,56,.025);
    transform-origin:center
}

.emblem-ring-1{
    inset:10%;
    animation:spin 22s linear infinite
}

.emblem-ring-1:before,
.emblem-ring-1:after{
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 16px rgba(255,38,56,.8)
}

.emblem-ring-1:before{
    top:12%;
    left:50%
}

.emblem-ring-1:after{
    bottom:8%;
    right:18%;
    width:4px;
    height:4px
}

.emblem-ring-2{
    inset:18%;
    border-color:rgba(255,255,255,.09);
    border-style:dashed;
    animation:spinReverse 28s linear infinite
}

.emblem-ring-3{
    inset:28%;
    border-color:rgba(255,38,56,.22);
    animation:spin 14s linear infinite
}

.emblem-ring-3:before{
    content:'';
    position:absolute;
    top:-3px;
    left:50%;
    width:5px;
    height:5px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 0 12px rgba(255,255,255,.65)
}

.emblem-scan{
    position:absolute;
    width:78%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,38,56,.55),
        transparent
    );
    animation:scan 4s ease-in-out infinite;
    opacity:.45
}

.emblem-particle{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 12px var(--red);
    animation:particleOrbit 5s ease-in-out infinite
}

.ep1{
    top:17%;
    right:23%
}

.ep2{
    bottom:21%;
    left:18%;
    animation-delay:-1.7s
}

.ep3{
    top:40%;
    left:8%;
    width:2px;
    height:2px;
    animation-delay:-3s
}

.emblem-caption{
    position:absolute;
    right:9%;
    bottom:12%;
    font-size:8px;
    letter-spacing:2.5px;
    color:#676d6e;
    display:flex;
    align-items:center;
    gap:8px
}

.emblem-caption span{
    width:22px;
    height:1px;
    background:var(--red);
    box-shadow:0 0 8px rgba(255,38,56,.45)
}

.emblem-caption b{
    color:#b0b5b5;
    font-weight:600
}


/* =========================
   REVEAL
========================= */

.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .8s var(--ease),
        transform .8s var(--ease)
}

.reveal.visible{
    opacity:1;
    transform:none
}


/* =========================
   GAME DETAIL PAGE
========================= */

.detail-layout{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center
}

.detail-layout>div:first-child{
    padding-bottom:10px
}


/* IMPORTANT:
   Detail image box now grows with
   the actual image.
*/

.detail-visual{
    width:100%;
    height:auto;
    min-height:0;
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 45%,rgba(255,38,56,.2),transparent 25%),
        linear-gradient(145deg,#171a1b,#070809);
    display:block
}

.detail-visual > img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%
}

.detail-visual strong{
    font:800 210px/.8 'Space Grotesk';
    letter-spacing:-15px;
    color:rgba(255,255,255,.04)
}

.detail-visual span{
    position:absolute;
    bottom:22px;
    left:22px;
    font-size:9px;
    letter-spacing:2px;
    color:#707677;
    line-height:1.5;
    z-index:5
}

.detail-orbit{
    position:absolute;
    width:330px;
    height:330px;
    border:1px solid rgba(255,38,56,.22);
    border-radius:50%;
    transform:rotate(28deg);
    pointer-events:none
}

.detail-orbit:before{
    content:'';
    position:absolute;
    top:50%;
    left:-5px;
    width:10px;
    height:10px;
    background:var(--red);
    border-radius:50%;
    box-shadow:0 0 25px var(--red)
}

.detail-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:start
}

.large-copy p{
    color:var(--muted);
    line-height:1.85;
    font-size:14px;
    margin-bottom:22px
}

.large-copy p:first-child{
    font:500 22px/1.55 'Space Grotesk';
    color:#dfe2e2;
    letter-spacing:-.5px
}

.facts{
    border:1px solid var(--line);
    background:var(--panel)
}

.facts>div{
    padding:20px;
    border-bottom:1px solid var(--line)
}

.facts>div:last-child{
    border:0
}

.facts small{
    display:block;
    color:#646b6c;
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:7px
}

.facts strong{
    font:600 13px 'Space Grotesk'
}

.game-dark{
    background:#080a0b;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}

.feature{
    background:var(--panel);
    border:1px solid var(--line);
    padding:28px;
    min-height:205px;
    transition:.35s var(--ease)
}

.feature:hover{
    border-color:#4b5051;
    transform:translateY(-5px)
}

.feature b{
    color:var(--red);
    font-size:10px;
    letter-spacing:2px
}

.feature h3{
    font:700 22px 'Space Grotesk';
    margin:20px 0 10px
}

.feature p{
    color:var(--muted);
    font-size:12px;
    line-height:1.7
}

.quote-box{
    border:1px solid var(--line);
    padding:55px;
    background:linear-gradient(135deg,#101314,#0b0d0e);
    position:relative
}

.quote-box p{
    font:600 clamp(27px,4vw,48px)/1.1 'Space Grotesk';
    letter-spacing:-2px;
    max-width:900px;
    margin:20px 0
}

.quote-box span{
    font-size:10px;
    letter-spacing:2px;
    color:#727879
}

.detail-actions{
    display:flex;
    gap:10px;
    margin-top:25px;
    flex-wrap:wrap
}


/* =========================
   VOID RUNNER
========================= */

.games-cta-section{
    padding:8rem 0;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    overflow:hidden;
    position:relative
}

.games-cta-section:before{
    content:"";
    position:absolute;
    width:42rem;
    height:42rem;
    right:-12rem;
    top:-12rem;
    border:1px solid rgba(255,35,52,.12);
    border-radius:50%;
    box-shadow:0 0 100px rgba(255,35,52,.06) inset;
    animation:slowSpin 24s linear infinite
}

.games-cta-grid{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:4rem;
    align-items:center
}

.games-cta-grid h2{
    font-size:clamp(3.5rem,7vw,7rem);
    line-height:.86;
    margin:.6rem 0 1.5rem;
    font-family:"Space Grotesk",sans-serif;
    letter-spacing:-.07em
}

.games-cta-grid h2 span{
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.38)
}

.games-cta-grid p{
    max-width:580px;
    color:#8e8e95;
    font-size:1.05rem;
    line-height:1.8
}

.games-cta-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;
    position:relative;
    z-index:2
}

.cta-orbit{
    width:260px;
    height:260px;
    position:relative;
    display:grid;
    place-items:center
}

.cta-orbit img{
    width:125px;
    position:relative;
    z-index:3;
    filter:drop-shadow(0 0 25px rgba(255,28,45,.45));
    animation:logoFloat 4s ease-in-out infinite
}

.cta-ring{
    position:absolute;
    border-radius:50%;
    inset:8px;
    border:1px solid rgba(255,40,50,.35);
    animation:slowSpin 14s linear infinite
}

.cta-ring-a:after,
.cta-ring-b:after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#ff2638;
    box-shadow:0 0 15px #ff2638;
    top:-3px;
    left:50%
}

.cta-ring-b{
    inset:30px;
    border-style:dashed;
    animation:slowSpinReverse 10s linear infinite;
    border-color:rgba(255,255,255,.18)
}

.cta-ring-b:after{
    top:auto;
    bottom:-3px;
    background:#fff;
    box-shadow:0 0 12px #fff
}

.void-art{
    background:
        radial-gradient(circle at 70% 30%,rgba(255,34,50,.22),transparent 35%),
        linear-gradient(145deg,#111,#050505 60%,#16070a)!important;
    overflow:hidden;
    display:flex!important;
    align-items:center;
    justify-content:center
}

.void-art-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:28px 28px;
    transform:perspective(300px) rotateX(55deg) scale(1.5);
    transform-origin:center bottom;
    opacity:.7
}

.void-art strong{
    position:relative;
    font-family:"Space Grotesk";
    font-size:clamp(2rem,4vw,4rem);
    line-height:.8;
    letter-spacing:-.07em;
    color:#fff;
    text-shadow:0 0 25px rgba(255,30,45,.3);
    z-index:2
}

.void-art strong span{
    color:#ff273b
}

.void-art small{
    position:absolute;
    top:20px;
    right:20px;
    color:#ff273b;
    letter-spacing:.25em;
    z-index:2
}

.void-detail{
    background:radial-gradient(circle,rgba(255,30,45,.13),transparent 60%)
}

.void-game-logo{
    position:absolute;
    width:94%;
    height:94%;
    object-fit:contain;
    z-index:4;
    opacity:1;
    mix-blend-mode:normal;
    filter:drop-shadow(0 0 28px rgba(255,30,45,.28));
    animation:voidLogoFloat 6s ease-in-out infinite;
    pointer-events:none
}

.void-detail span{
    z-index:5
}

.void-detail strong{
    font-family:"Space Grotesk";
    font-size:2rem;
    line-height:.9;
    letter-spacing:-.05em;
    text-align:center;
    margin-top:1rem
}

.void-detail span{
    margin-top:1rem
}


/* =========================
   ANIMATIONS
========================= */

@keyframes emblemFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg)
    }
    50%{
        transform:translateY(-10px) rotate(1deg)
    }
}

@keyframes emblemPulse{
    0%,100%{
        opacity:.65;
        transform:scale(.9)
    }
    50%{
        opacity:1;
        transform:scale(1.08)
    }
}

@keyframes spin{
    to{
        transform:rotate(360deg)
    }
}

@keyframes spinReverse{
    to{
        transform:rotate(-360deg)
    }
}

@keyframes scan{
    0%,100%{
        transform:translateY(-190px);
        opacity:0
    }
    25%,75%{
        opacity:.5
    }
    50%{
        transform:translateY(190px);
        opacity:.15
    }
}

@keyframes particleOrbit{
    0%,100%{
        transform:translate(0,0);
        opacity:.35
    }
    50%{
        transform:translate(16px,-22px);
        opacity:1
    }
}

@keyframes gridMove{
    to{
        background-position:72px 72px
    }
}

@keyframes float{
    50%{
        transform:translateY(-20px) rotate(3deg)
    }
}

@keyframes particle{
    50%{
        transform:translate(20px,-25px);
        opacity:.25
    }
}

@keyframes scroll{
    50%{
        height:55px;
        opacity:.3
    }
}

@keyframes orbit{
    to{
        transform:rotate(360deg) translateX(155px) rotate(-360deg)
    }
}

@keyframes marquee{
    to{
        transform:translateX(-33.333%)
    }
}

@keyframes voidLogoFloat{
    0%,100%{
        transform:translateY(0) scale(.98)
    }
    50%{
        transform:translateY(-7px) scale(1)
    }
}

@keyframes slowSpin{
    to{
        transform:rotate(360deg)
    }
}

@keyframes slowSpinReverse{
    to{
        transform:rotate(-360deg)
    }
}

@keyframes logoFloat{
    0%,100%{
        transform:translateY(0) scale(1)
    }
    50%{
        transform:translateY(-8px) scale(1.03)
    }
}

@keyframes cubeFloat{
    0%,100%{
        transform:rotate(45deg) translateY(0)
    }
    50%{
        transform:rotate(45deg) translateY(-10px)
    }
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

    .links,
    .nav-cta{
        display:none
    }

    .menu{
        display:block
    }

    .links.open{
        display:flex;
        position:absolute;
        top:82px;
        left:0;
        right:0;
        padding:20px;
        background:rgba(5,6,7,.98);
        border-bottom:1px solid var(--line);
        flex-direction:column;
        align-items:flex-start
    }

    .hero-content{
        padding-top:100px
    }

    .featured-game,
    .founder-card{
        grid-template-columns:1fr
    }

    .featured-art,
    .founder-photo{
        min-height:420px
    }

    .studio-grid{
        grid-template-columns:1fr 1fr
    }

    .studio-card.big{
        grid-column:1/-1
    }

    .numbers{
        grid-template-columns:1fr 1fr
    }

    .process-line{
        grid-template-columns:1fr 1fr;
        gap:20px
    }

    .process-step:nth-child(2){
        border-right:0;
        margin:0
    }

    .contact{
        display:block
    }

    .contact-actions{
        margin-top:30px;
        flex-direction:row;
        flex-wrap:wrap
    }

    .contact-actions .btn{
        width:auto
    }

    .game-list{
        grid-template-columns:1fr
    }

    .footer-inner{
        flex-direction:column;
        align-items:flex-start
    }

    .hero-ring{
        right:-300px
    }

    .hero-emblem{
        right:-5%;
        width:48vw;
        height:48vw;
        opacity:.72
    }

    .detail-layout,
    .detail-grid{
        grid-template-columns:1fr;
        gap:35px
    }

    .feature-grid{
        grid-template-columns:1fr 1fr
    }

    .games-cta-grid{
        grid-template-columns:1fr
    }

    .games-cta-action{
        align-items:flex-start
    }

    .games-cta-section{
        padding:5rem 0
    }

    .cta-orbit{
        width:210px;
        height:210px
    }
}


@media(max-width:560px){

    .container,
    .nav-inner,
    .hero-content{
        width:min(calc(100% - 28px),var(--max))
    }

    .brand span{
        font-size:11px
    }

    .hero h1{
        font-size:65px;
        letter-spacing:-4px
    }

    .hero-content>p{
        font-size:14px
    }

    .hero-strip{
        display:grid;
        grid-template-columns:1fr 1fr
    }

    .hero-strip>div{
        border-right:0;
        margin:0;
        padding-right:15px
    }

    .hero-strip>div:nth-child(3){
        grid-column:1/-1
    }

    .section{
        padding:90px 0
    }

    .section-head{
        display:block
    }

    .section-head>p{
        margin-top:18px
    }

    .section h2{
        font-size:48px
    }

    .featured-copy{
        padding:35px
    }

    .featured-art{
        min-height:350px
    }

    .mini-stats{
        grid-template-columns:1fr
    }

    .mini-stats>div{
        padding:7px 0
    }

    .studio-grid,
    .numbers,
    .process-line{
        grid-template-columns:1fr
    }

    .studio-card.big{
        grid-column:auto
    }

    .process-step{
        border-right:0;
        border-bottom:1px solid var(--line);
        margin:0
    }

    .founder-photo{
        min-height:400px
    }

    .founder-copy{
        padding:38px 28px
    }

    .contact{
        padding:35px 25px
    }

    .contact-actions{
        flex-direction:column
    }

    .contact-actions .btn{
        width:100%
    }

    .page-hero{
        padding-top:145px
    }

    .hero-emblem{
        position:absolute;
        right:-25%;
        width:75vw;
        height:75vw;
        opacity:.35;
        top:58%
    }

    .page-hero h1{
        font-size:66px
    }

    .feature-grid{
        grid-template-columns:1fr
    }

    .quote-box{
        padding:35px 25px
    }

    .games-void-logo{
        padding:20px 28px
    }

    /* No fixed height here.
       Image determines the box height. */

    .detail-visual{
        height:auto;
        min-height:0
    }

    .detail-visual strong{
        font-size:150px
    }
}