:root {
    --immerse-bg: #000000;
    --immerse-text: #ffffff;
    --immerse-muted: #888888;
    --immerse-accent: #e50914; /* Punchy red for high contrast */
    --immerse-surface: rgba(25, 25, 25, 0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: var(--immerse-bg); color: var(--immerse-text);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* Cinematic Hero */
.hero-cinematic {
    height: 100vh; width: 100%; position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    overflow: hidden;
}
.hero-cinematic::before {
    content: ''; position: absolute; top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,1) 100%),
                url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="%23111"/><circle cx="50%" cy="50%" r="30%" fill="%23222" filter="blur(100px)"/></svg>') center/cover;
    z-index: -1;
}

.top-bar-abs {
    position: absolute; top: 0; left: 0; right: 0; padding: 30px 50px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 10;
}
.brand-imm { font-size: 28px; font-weight: 900; letter-spacing: 1px; color: var(--immerse-accent);}
.nav-imm { display: flex; gap: 40px; }
.nav-imm a { font-size: 16px; font-weight: 500; opacity: 0.7; transition: opacity 0.3s;}
.nav-imm a:hover, .nav-imm a.active { opacity: 1; }
.btn-imm { background: var(--immerse-accent); color: #fff; padding: 12px 30px; border-radius: 4px; font-weight: bold; font-size: 16px; transition: background 0.3s;}
.btn-imm:hover { background: #b80710; }
.btn-imm-out { border: 1px solid rgba(255,255,255,0.4); padding: 12px 30px; border-radius: 4px; font-weight: bold; font-size: 16px; transition: background 0.3s; background: rgba(0,0,0,0.4);}
.btn-imm-out:hover { background: rgba(255,255,255,0.1); }

.hero-content { z-index: 5; max-width: 900px; padding: 0 20px;}
.hero-content h1 { font-size: 5vw; line-height: 1.1; margin-bottom: 20px; font-weight: 800; letter-spacing: -2px;}
.hero-content p { font-size: 24px; color: var(--immerse-muted); margin-bottom: 40px; font-weight: 300;}

/* Bento Grid Features */
.imm-container { max-width: 1400px; margin: -100px auto 100px auto; position: relative; z-index: 10; padding: 0 20px;}
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 20px;}
.b-box { background: var(--immerse-surface); border-radius: 12px; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; backdrop-filter: blur(10px);}
.b-box:hover::after { opacity: 1; }
.b-box::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--immerse-accent); border-radius: 12px; opacity: 0; transition: opacity 0.3s; pointer-events: none;}

.b-box.large { grid-column: span 2; grid-row: span 2; justify-content: center; text-align: center; }
.b-box.wide { grid-column: span 2; }
.b-box.tall { grid-row: span 2; justify-content: center; }

.b-num { font-size: 64px; font-weight: 900; color: var(--immerse-accent); line-height: 1;}
.b-title { font-size: 24px; font-weight: 700; margin-bottom: 10px; margin-top: 15px;}
.b-desc { font-size: 16px; color: var(--immerse-muted); line-height: 1.5;}

.nodes-marquee { background: rgba(255,255,255,0.02); padding: 40px 0; margin-top: 50px; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);}
.marquee-content { display: inline-block; animation: scroll 30s linear infinite; font-size: 24px; font-weight: 800; color: var(--immerse-muted);}
.marquee-content span { margin: 0 40px; color: #fff;}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* FAQ List */
.imm-faq { max-width: 900px; margin: 100px auto; padding: 0 20px;}
.imm-faq h2 { text-align: center; font-size: 40px; margin-bottom: 60px;}
.faq-row { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 30px 0;}
.faq-q { font-size: 24px; font-weight: 500; margin-bottom: 15px;}
.faq-a { font-size: 18px; color: var(--immerse-muted); line-height: 1.6;}

footer { text-align: center; padding: 50px; color: var(--immerse-muted); font-size: 14px;}

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-content h1 { font-size: 60px; }
}
@media (max-width: 768px) {
    .top-bar-abs { padding: 20px; flex-direction: column; gap: 20px;}
    .nav-imm { display: none; }
    .bento-grid { grid-template-columns: 1fr; }
    .b-box.large, .b-box.wide, .b-box.tall { grid-column: span 1; grid-row: span 1; }
    .hero-content h1 { font-size: 48px; }
}