section.supported-games {
            background: url(https://i.postimg.cc/2SJtJBZw/m-P5JVt-Cd.png) #0b0f12 no-repeat center 0;
            overflow: visible;
        }

        section.supported-games .section-content-container {
                padding: 40px 0;
        }

/* Section separator box */
        :root {
            --sep-height: 64px;                 /* height of the box */
            --sep-max-width: calc(var(--max-width,1100px) - 40px);
            --sep-bg-start: rgba(18,4,6,0.85);  /* top overlay (dark red) */
            --sep-bg-end: rgba(18,4,6,0.95);    /* bottom overlay */
            --sep-glow: rgba(185,28,28,0.08);   /* subtle red glow */
            --sep-radius: 14px;
        }

/* The visible "box" that sits between sections */
        .section-sep {
            background: linear-gradient(180deg, var(--sep-bg-start), var(--sep-bg-end));
            height: var(--sep-height);
            max-width: var(--sep-max-width);
            width: calc(100% - 48px);    /* a touch of side padding on small screens */
            margin: 24px auto;           /* space above/below; tweak as needed */
            border-radius: var(--sep-radius);
            box-shadow: 0 10px 30px var(--sep-glow), inset 0 1px 0 rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.02);
            position: relative;
            z-index: 2;
            text-align: center; /* fixed colon typo */
        }

/* Make separator overlap slightly for a snug fit (optional) */
        .section-sep.overlap {
            margin-top: -18px;   /* lifts the box up to tuck under a wave */
            margin-bottom: 18px;
        }

/* Mobile adjustments */
        @media (max-width: 700px) {
            :root { --sep-height: 48px; }
            .section-sep { width: calc(100% - 28px); margin: 16px auto; border-radius: 10px; }
        }

        :root{
            --bg:#120406;
            --card:#2a0b0b;
            --accent1:#ef4444;
            --accent2:#dc2626;
            --muted:rgba(255,255,255,0.72);
            --glass:rgba(255,255,255,0.03);
            --radius:12px;
            --max-width:1100px;
            --transition:300ms cubic-bezier(.2,.9,.3,1);
            --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            --hero-overlay-color: rgba(0,0,0,0.48);
            --glow: drop-shadow(0 8px 20px rgba(99,102,241,0.12));
        }

        * {
            box-sizing:border-box;
        }

        html,body {
            height:100%;
            font-family: var(--font);
            color: white;
        }

        body {
            background-color: #6a1111;
            margin: 0;
        }

        .section {
            background: transparent; /* no box background by default */
            position: relative;
            z-index: 1;
        }

        #typed {
            color: #ffffff; /* Replace with your desired color */
        }   

/* Layout */
        .page{
            min-height:100vh;
       }

        .site-header{
            position:sticky;
            top:0;
            z-index:60;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:18px clamp(16px,4vw,36px);
            backdrop-filter: blur(6px);
            background:linear-gradient(180deg, rgba(10,14,22,0.5), rgba(10,14,22,0.15));
            border-bottom:1px solid rgba(255,255,255,0.03);
        }

        .brand{
            display:flex;
            align-items:center;
            gap:14px;
        }

        .logo{
            color:white;
            text-decoration:none;
            font-weight:600;
            font-size:1.1rem;
            display:flex;
            align-items:center;
            gap:8px;
        }

        .hamburger{
            width:36px;
            height:36px;
            border-radius:8px;
            border:0;
            background:var(--glass);
            display:inline-grid;
            place-items:center;
            padding:6px;
            cursor:pointer;
        }

        .hamburger span{
            display:block;
            height:2px;
            width:16px;
            background:#e8f0ff;
            border-radius:2px;
            transition:transform var(--transition),opacity var(--transition);
        }

        .hamburger span:nth-child(2){
            width:12px;
        }

        .hamburger[aria-expanded="true"] span:nth-child(1){
            transform:translateY(6px) rotate(45deg);
        }

        .hamburger[aria-expanded="true"] span:nth-child(2){
            opacity:0;
        }  

        .hamburger[aria-expanded="true"] span:nth-child(3){
            transform:translateY(-6px) rotate(-45deg);
        }

        .nav{
            display:flex;
            gap:18px;
        }

        .nav a{
            color:var(--muted);
            text-decoration:none;
            padding:8px;
            border-radius:8px;
            transition:color var(--transition);
            font-weight:500;
        }

        .nav a:hover{
            color:white;
        }

/* Mobile nav toggle (expects hamburger immediately before .nav in the DOM) */
        @media (max-width: 800px) {
            .nav {
                background: rgba(10,14,22,0.95);
                position: absolute;
                top: 60px; /* below header */
                right: 0;
                width: 100%;
                padding: 12px;
                border-bottom: 1px solid rgba(255,255,255,0.06);
                backdrop-filter: blur(6px);
            }
            .hamburger[aria-expanded="true"] + .nav {
                display: flex;
            }
        }

/* Hero (merged, de-duped) */
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 66vh;
            background:url(https://i.postimg.cc/2SJtJBZw/m-P5JVt-Cd.png);
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            padding:48px 20px;
            text-align:center;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--hero-overlay-color); /* solid dim */
            z-index: 1;
            pointer-events: none;
            transition: background 300ms ease;
        }

        .hero-inner,.hero-content {
            position: relative;
            z-index: 2;
        }   

        .hero:hover::before {
            background: rgba(0,0,0,0.62);
        }

/* Background video */
        .hero-video{
            position:absolute;
            width:100%;
            height:100%;
            object-fit:cover;
            opacity:0.55;
            z-index:0;
            pointer-events:none;
            will-change:transform,opacity;
        }

/* Particle canvas sits above the video as an overlay */
        .particle-canvas{
            position:absolute;
            inset:0;
            z-index:1;
            pointer-events:none;
            opacity:0.9;
        }

        .hero-content{
            position:relative;
            z-index:3;
            max-width:var(--max-width);
            margin:0 auto;
            padding:30px 20px;
        }

        .hero-title{
            font-size:clamp(1.8rem,4vw,3.2rem);
            margin:0 0 12px;
            letter-spacing:-0.02em;
        }

        .cursor{
            color:var(--accent2);
            margin-left:6px;
            opacity:1;
            animation:blink 900ms steps(1) infinite;
        }

        @keyframes blink{
            50%{
                opacity:0;
            }
        }

        .hero-sub{
            color:var(--muted);
            margin:0 0 20px;
        }

        .hero-cta{
            display:flex;
            gap:12px;
            justify-content:center;
            flex-wrap:wrap;
        }

        .btn{
            display:inline-block;
            padding:14px 20px; /* touch-friendly */
            border-radius:10px;
            border:0;
            cursor:pointer;
            text-decoration:none;
            font-weight:600;
        }

        .btn.primary{
            background:linear-gradient(90deg,var(--accent1),var(--accent2));
            color:white;
            box-shadow:0 6px 24px rgba(99,102,241,0.12);
            transform:translateZ(0);
        }

        .btn.ghost{
            background:transparent;
            border:1px solid rgba(255,255,255,0.06);
            color:var(--muted);
        }

/* Animated wave */
        .hero-wave{
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            height:130px;
            color:#2b0404;
            z-index:2;
            transform:translateY(24px);
        }

/* Sections */
        .section{
            padding:72px 20px;
        }

        .section-title{
            font-size:clamp(1.2rem,3vw,1.6rem); /* responsive font */
            margin:0 0 18px;
            text-align:center;
            color:white;
        }

/* Cards */
        .cards{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:18px;
            max-width:var(--max-width);
            margin:0 auto;
        }

/* Cards 1-4 */
        .card{
            background-image:url(https://i.postimg.cc/2SJtJBZw/m-P5JVt-Cd.png);
            background-size: cover; /* responsive fix */
            background-position:center center;
            background-repeat:no-repeat;
            border-radius:var(--radius);
            padding:20px;
            box-shadow:0 8px 32px rgba(2,6,23,0.5);
            border:1px solid rgba(255,255,255,0.03);
            transition:transform var(--transition),box-shadow var(--transition);
        }

        .card2{
            background-image:url(https://pbs.twimg.com/media/FPrS7ZeVsAI6Nxu.jpg:large);
            background-size: cover; /* responsive fix */
            background-position:center center;
            background-repeat:no-repeat;
            border-radius:var(--radius);
            padding:20px;
            box-shadow:0 8px 32px rgba(2,6,23,0.5);
            border:1px solid rgba(255,255,255,0.03);
            transition:transform var(--transition),box-shadow var(--transition);
        }

        .card3{
            background-image:url(https://www.uploadvr.com/content/images/size/w1200/2020/10/POP1ScreenshotSquad.png);
            background-size: cover; /* responsive fix */
            background-position:center center;
            background-repeat:no-repeat;
            border-radius:var(--radius);
            padding:20px;
            box-shadow:0 8px 32px rgba(2,6,23,0.5);
            border:1px solid rgba(255,255,255,0.03);
            transition:transform var(--transition),box-shadow var(--transition);
        }

        .card4{
            background-image:url(https://roadtovrlive-5ea0.kxcdn.com/wp-content/uploads/2020/10/population-one-5.jpg);
            background-size: cover; /* responsive fix */
            background-position:center center;
            background-repeat:no-repeat;
            border-radius:var(--radius);
            padding:20px;
            box-shadow:0 8px 32px rgba(2,6,23,0.5);
            border:1px solid rgba(255,255,255,0.03);
            transition:transform var(--transition),box-shadow var(--transition);
        }

        .card:hover{
            transform:translateY(-8px);
            box-shadow:0 18px 48px rgba(2,6,23,0.65);
        }

        .card, .card2, .card3, .card4, h3{
            margin:0 0 8px;
        }

        .card, .card2, .card3, .card4, p{
            margin:0;
            color:var(--muted);
        }

        .highlight {
            background-color: rgba(255, 0, 0, 0.25); /* Red with 50% opacity */
            display: inline-block; /* Ensures background wraps around text and allows padding */
            border-style:solid;
            border-color:black;
        }

/* About */
            .about-grid{
            max-width:var(--max-width);
            margin:0 auto;
            display:grid;
            grid-template-columns:1fr 320px;
            gap:22px;
            align-items:center;
        }

        .image-card{
            background-image:url(https://media.discordapp.net/attachments/1406479249925472338/1427099602259152917/IMG_4557.jpg?ex=6900bf53&is=68ff6dd3&hm=ad1a0e8c666498efe0038b05acdeb05487e6a0b9a3b6820040cb6fa58b5fd4bf&=&format=webp&width=800&height=800);
            background-size:350px;
            background-position:center center;
            background-repeat:no-repeat;
            border-radius:var(--radius);
            box-shadow:0 8px 32px rgba(2,6,23,0.5);
            border:1px solid rgba(255,255,255,0.03);
            transition:transform var(--transition),box-shadow var(--transition);
            padding:275px 5px 100px 250px;
        }

/* Reveal animations */
        .reveal{
            opacity:0;
            transform:translateY(18px) scale(0.1);
            transition:opacity 600ms var(--transition),transform 600ms var(--transition);
        }

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

/* Responsive (global) */
        @media (max-width:800px){
            .hero{
                min-height:56vh;
            }
            .about-grid{
                grid-template-columns:1fr;
            }
            .image-card{
                padding:120px 20px;           /* reduced padding for mobile */
                background-size: cover;       /* scale image to container */
            }
        }

/* Logo */
        .srg-logo {
            Filter: drop-shadow(0 0 5px #000);
            -webkit-filter: drop-shadow(0 0 5px #000);
            width: clamp(160px, 30vw, 250px); /* responsive width */
        }

/* Basic styles for the embedded/custom application section */
        .application-section {
            padding: 72px 20px;
            background: transparent;
            color: inherit;
        }
        .application-section .section-title {
            margin-bottom: 8px;
        }
        .app-form {
            max-width: 820px;
            margin: 18px auto 0;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .app-form label {
            font-weight:600;
            color:var(--muted);
            margin-bottom:6px;
        }
        .app-form input[type="text"], .app-form textarea {
            width:100%;
            padding:12px 14px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.02);
            color: inherit;
            font-size: 0.98rem;
            resize: vertical;
        }
        .app-form .btn {
            margin-top:6px;
        }
        .form-embed-wrapper iframe {
            border: none;
            border-radius: 10px;
            box-shadow: 0 12px 34px rgba(0,0,0,0.45);
        }

/* Circle avatar */
        .circle {
            width: 25px;              /* Set desired size */
            height: 25px;
            border-radius: 50%;       /* Makes it a circle */
            overflow: hidden;         /* Hides parts of the image outside the circle */
            display: flex;            /* Centers the image */
            align-items: center;
            justify-content: center;
        }

        .circle img {
            width: 100%;
            height: 100%;
            object-fit: cover;        /* Ensures image fills the circle without distortion */
        }

/* Footer */
        .site-footer{
            text-align:center;
            padding:20px;
            color:var(--muted);
            font-size:0.9rem;
        }
        .hero-tile {
            height: 600px;
            position: relative;
            margin-bottom: 0px;
        }
        .hero-tile .overlay {
            position: absolute;
            bottom: 20px;
            left: 30px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 15px;
            border-radius: 8px;
        }
        .overlay-text {
            color: white;
            text-align: center;
            background: rgba(0,0,0,0.4);
            border-radius: 8px;
        }
        .overlay-text h2 {
            font-size: 2.5rem;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        .overlay-text p {
            font-size: 1.2rem;
            margin-bottom: 5px;
            margin-top: 5px;
        }
        .hero-button {
            position: absolute;
            bottom: 30px;   /* distance from bottom */
            left: 50%;
            transform: translateX(-50%);
        }
        .cta-btn {
            background: red;
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1rem;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .cta-btn:hover {
            background: darkred;
        }
        .video-intro {
            position: relative;
            height: 600px;
            overflow: none;
        }
        .video-intro video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: fit;
            z-index: 0;
            border-bottom:solid black 25px
        }
        .video-overlay-text{
            position: absolute;
            z-index: 1;
            color: white;
            text-align: center;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.4);
            border-radius: 8px;
        }
        .under-construction {
            background: repeating-linear-gradient(45deg, #ffeb3b, #ffeb3b 20px, #000 20px, #000 40px);
            color: #000;
            text-align: center;
            padding: 30px;
            font-family: Arial, sans-serif;
            font-weight: bold;
            border-top: 5px solid #000;
        }
        .under-construction h2  {
            position: relative;
            color: white;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.4);
            border-radius: 8px;
            margin:0;
        }
        .under-construction p {
            margin: 10px 0 0;
            font-size: 1rem;
            color:white;
        }