:root {
  --bg: #070707;
  --bg-soft: #0d0d0d;
  --panel: #111111;
  --panel-2: #161514;
  --red: #8e1515;
  --red-bright: #c52a25;
  --red-dark: #3a0c0c;
  --gold: #b69a6c;
  --text: #eee9df;
  --muted: #96918a;
  --line: rgba(198, 155, 112, .23);
  --max: 1240px;
  --header: 74px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(197,42,37,.55); color: #fff; }

.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .055;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #7d0d0d, #e03b32);
  z-index: 100;
  box-shadow: 0 0 14px rgba(224,59,50,.8);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  z-index: 90;
  background: rgba(8,8,8,.76);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  transition: .3s ease;
}
.site-header.scrolled { background: rgba(7,7,7,.94); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 190px;
}
.brand-mark {
  color: #b51e1b;
  font-family: "Cinzel", serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -2px;
  text-shadow: 0 0 16px rgba(181,30,27,.35);
}
.brand-name {
  color: #c9bfae;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 4px;
}
.nav { display: flex; align-items: center; gap: 29px; }
.nav a {
  color: #bdb7af;
  font-size: 13px;
  font-weight: 600;
  transition: .2s ease;
}
.nav a:hover, .nav a.active { color: #fff; }
.nav-download {
  padding: 12px 20px;
  border: 1px solid rgba(197,42,37,.65);
  background: linear-gradient(180deg, #a51b18, #700d0c);
  color: #fff !important;
  box-shadow: 0 0 20px rgba(142,21,21,.16);
}
.mobile-menu {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
}
.mobile-menu span { display:block; width:25px; height:2px; background:#eee; margin:5px; }

.section { position: relative; }
.section-inner { width: min(var(--max), calc(100% - 60px)); margin: 0 auto; }
.section-dark { background: #090909; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a97d62;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
}
.eyebrow span {
  width: 22px;
  height: 1px;
  background: var(--red-bright);
  box-shadow: 0 0 8px rgba(197,42,37,.6);
}
h1,h2,h3,p { margin-top: 0; }
h2 {
  margin: 8px 0 18px;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  font-size: clamp(35px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.5px;
}
em { color: #fff2df; font-style: normal; }
.muted { color: #77736e !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 0 21px;
  border: 1px solid rgba(184,145,113,.48);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
  transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary {
  color: #fff;
  border-color: #c43830;
  background: linear-gradient(180deg, #9e211c 0%, #650b0a 100%);
  box-shadow: 0 8px 30px rgba(119,15,13,.28), inset 0 0 0 1px rgba(255,255,255,.07);
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(180,24,20,.34), 0 0 18px rgba(180,24,20,.2); }
.btn-secondary {
  color: #d7c9b9;
  background: rgba(0,0,0,.3);
}
.btn-secondary:hover { border-color: rgba(197,42,37,.7); }
.btn-large { min-height: 57px; padding: 0 31px; font-size: 13px; }
.download-icon { font-size: 20px; line-height: 0; margin-right: 10px; }

.hero {
      min-height: 100vh;
    height: auto;
    overflow: visible;
  min-height: 720px;
  display: flex;
  align-items: center;
  padding-top: var(--header);
  background:
    radial-gradient(ellipse at 68% 47%, rgba(102,15,14,.48), transparent 36%),
    radial-gradient(ellipse at 22% 80%, rgba(77,10,9,.28), transparent 35%),
    linear-gradient(90deg, #050505 0%, #090707 47%, #120505 100%);
}
.hero:before, .hero:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero:before {
  opacity:.35;
  background:
    linear-gradient(115deg, transparent 0 48%, rgba(100,21,18,.12) 49%, transparent 54%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
}
.hero:after {
  background: radial-gradient(circle at 50% 45%, transparent 35%, rgba(0,0,0,.76) 100%);
}
.hero-backdrop { position:absolute; inset:0; }
.hero-glow {
  position:absolute;
  width:600px; height:600px;
  right:9%; top:14%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(164,26,21,.28), transparent 65%);
  filter: blur(15px);
}
.ember {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#e58a52; box-shadow:0 0 12px 3px rgba(229,138,82,.45);
  animation: float 8s infinite ease-in-out;
}
.ember-1 { right:32%; top:31%; }
.ember-2 { right:18%; top:66%; animation-delay:2s; }
.ember-3 { left:45%; top:27%; animation-delay:4s; }

.hero-content {
  position:relative;
  z-index:3;
  width: 49%;
  margin-left: max(30px, calc((100vw - var(--max)) / 2));
  padding-bottom: 20px;
}
.hero-logo { margin: 22px 0 15px; display:flex; align-items:baseline; gap:13px; }
.hero-logo strong {
  font-family:"Cinzel", serif;
  color:#b92520;
  font-size:clamp(66px, 7vw, 104px);
  line-height:.75;
  letter-spacing:-8px;
  text-shadow:0 0 35px rgba(174,30,25,.3);
}
.hero-logo span {
  font-family:"Cinzel",serif;
  font-size:clamp(17px, 1.6vw, 25px);
  letter-spacing:6px;
  color:#cfc1ad;
}
.hero h1 {
  margin:0 0 22px;
  font-family:"Cinzel",serif;
  font-size:clamp(39px,4vw,61px);
  line-height:1.06;
  text-transform:uppercase;
  letter-spacing:-1px;
}
.hero-description {
  max-width:560px;
  color:#aaa39a;
  font-size:15px;
  line-height:1.75;
}
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; }
.system-meta, .download-meta {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:17px;
  color:#77736e;
  font-size:11px;
}
.system-meta i, .download-meta i { width:1px; height:12px; background:#4a4540; }

.hero-visual {
  position:relative;
  z-index:2;
  right: max(15px, calc((100vw - var(--max)) / 2 - 40px));
  width:min(100%, 760px);
  top:50%;
  transform:translateY(-45%) rotate(-2deg);
}
.visual-caption {
  position:absolute;
  top:-27px;
  right:12px;
  color:#a16f5b;
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
}
.game-window {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1586 / 992;
    overflow: hidden;

    border: 1px solid rgba(150, 120, 80, .45);
    background: #050505;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .65),
        0 0 35px rgba(120, 20, 10, .12);
}

.game-screenshot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;

    filter:
        saturate(.94)
        contrast(1.02);
}

.visual-shadow { position:absolute; inset:5% -8% -10%; background:rgba(0,0,0,.7); filter:blur(35px); z-index:-1; }

.scroll-cue {
  position:absolute; z-index:4; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#66605b;
  font-size:8px; letter-spacing:2px;
}
.scroll-cue b { color:#a9322c; font-size:18px; animation:bounce 2s infinite; }

.about { padding:110px 0; border-top:1px solid rgba(255,255,255,.04); }
.about-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:90px; align-items:center; }
.section-copy p { max-width:580px; color:#aaa49d; line-height:1.8; font-size:14px; }
.about-features { display:grid; grid-template-columns:1fr 1fr; border:1px solid rgba(184,145,113,.18); }
.about-feature {
  min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid rgba(184,145,113,.14); border-bottom:1px solid rgba(184,145,113,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);
}
.about-feature:nth-child(2n) { border-right:0; }
.about-feature:nth-last-child(-n+2) { border-bottom:0; }
.feature-icon { color:#c23a31; font-size:30px; margin-bottom:12px; text-shadow:0 0 20px rgba(194,58,49,.2); }
.about-feature strong { font:700 12px "Cinzel",serif; letter-spacing:1.4px; }
.about-feature span { margin-top:6px; color:#67625d; font-size:10px; }

.features { padding:120px 0; background:linear-gradient(#0a0909,#0d0c0b); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px; }
.section-heading > p { max-width:360px; margin:0 0 7px; color:#77716b; font-size:13px; line-height:1.6; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.feature-card {
  position:relative; min-height:235px; padding:28px 25px;
  overflow:hidden; border:1px solid rgba(161,126,99,.22);
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),transparent 48%),
    radial-gradient(circle at 80% 15%,rgba(133,21,18,.11),transparent 30%),
    #10100f;
  transition:.3s var(--ease);
}
.feature-card:after { content:""; position:absolute; left:0; bottom:0; width:35%; height:2px; background:#7c1715; opacity:.5; transition:.3s; }
.feature-card:hover { transform:translateY(-6px); border-color:rgba(190,77,65,.5); box-shadow:0 15px 35px rgba(0,0,0,.3),0 0 20px rgba(111,14,12,.1); }
.feature-card:hover:after { width:100%; opacity:1; }
.card-number { position:absolute; top:17px; right:19px; color:#514b45; font-size:10px; letter-spacing:1px; }
.card-icon { color:#bd2c25; font-size:30px; margin-bottom:25px; }
.feature-card h3 { margin-bottom:9px; font:700 17px "Cinzel",serif; text-transform:uppercase; }
.feature-card p { color:#78726c; font-size:12px; line-height:1.7; max-width:280px; }

.demo { padding:110px 0; overflow:hidden; }
.demo-grid { display:grid; grid-template-columns:1.3fr .8fr; gap:80px; align-items:center; }
.demo-screen {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(171,120,87,.45);
  background:#050505;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform:rotate(-1deg);
}
.demo-image-wrap {
  position:relative;
  width:100%;
  aspect-ratio:1586 / 992;
  overflow:hidden;
}
.demo-image-wrap:after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 60%,rgba(0,0,0,.22));
}
.demo-screenshot {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.94) contrast(1.02);
}
.demo-label {
  position:relative;
  z-index:5;
  padding:12px 14px;
  color:#8b8179;
  background:#080808;
  border-top:1px solid rgba(171,120,87,.22);
  font-size:8px;
  letter-spacing:1.8px;
}
.demo-copy p { color:#8d8781; line-height:1.8; font-size:14px; }
.mini-points { margin-top:27px; border-top:1px solid #2a2623; }
.mini-points div { padding:13px 0; border-bottom:1px solid #2a2623; color:#aaa39b; font-size:11px; }
.mini-points span { display:inline-block; width:35px; color:#9d2c25; font-size:9px; }

.shortcuts { padding:115px 0; }
.centered { display:block; text-align:center; }
.centered .eyebrow { justify-content:center; }
.centered > p { max-width:470px; margin:0 auto; }
.keys-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.key-item { text-align:center; padding:0 30px; border-right:1px solid #292624; }
.key-item:last-child { border:0; }
.key {
  width:83px; height:68px; margin:0 auto 19px; display:grid;place-items:center;
  border:1px solid #745342; border-radius:5px;
  background:linear-gradient(145deg,#27211e,#0e0d0d);
  color:#e0c4a6; font:700 25px "Cinzel",serif;
  box-shadow:inset 0 0 0 2px #111,0 9px 20px rgba(0,0,0,.5),0 0 16px rgba(133,27,22,.1);
}
.key-item h3 { margin-bottom:8px;font:700 13px "Cinzel",serif;letter-spacing:1.4px; }
.key-item p { margin:0;color:#6f6a65;font-size:11px;line-height:1.6; }
.shortcut-note { max-width:600px;margin:42px auto 0;padding:13px 16px;display:flex;align-items:center;gap:10px;border:1px solid #292624;background:#0d0c0c;color:#69645f;font-size:10px; }
.shortcut-note span { width:18px;height:18px;border:1px solid #63302c;color:#a72b25;display:grid;place-items:center;border-radius:50%; }

.beta { padding:0; overflow:hidden; background:linear-gradient(105deg,#260807,#5d0d0c 50%,#210706); border-top:1px solid #681513;border-bottom:1px solid #681513; }
.beta-glow { position:absolute; inset:0; background:radial-gradient(circle at 18% 50%,rgba(242,76,56,.17),transparent 25%),linear-gradient(90deg,transparent,rgba(0,0,0,.2)); }
.beta-inner { min-height:260px; display:grid;grid-template-columns:120px 1fr 1.5fr;align-items:center;gap:32px;position:relative; }
.beta-symbol { width:76px;height:76px;border:1px solid rgba(235,132,105,.45);display:grid;place-items:center;color:#ef7b65;font:700 43px "Cinzel",serif;transform:rotate(45deg); }
.beta-symbol::first-letter { transform:rotate(-45deg); }
.beta-title h2 { margin:5px 0 3px;font-size:39px; }
.beta-title strong { color:#e46d58;font-size:10px;letter-spacing:2px; }
.beta-copy { border-left:1px solid rgba(255,184,150,.18);padding-left:32px; }
.beta-copy p { color:#bca39a;font-size:12px;line-height:1.65; }
.beta-copy ul { padding-left:17px;margin:10px 0 14px;color:#927b74;font-size:11px;line-height:1.8; }
.beta-copy .feedback { margin:0;color:#ee6d57;font-weight:700; }

.download { min-height:510px; display:grid;place-items:center;text-align:center;overflow:hidden;background:#080808; }
.download-bg { position:absolute;inset:0;background:radial-gradient(ellipse at center bottom,rgba(104,18,15,.32),transparent 52%),linear-gradient(180deg,#080808,#120908); }
.download-bg:after { content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,#030303); }
.download-inner { position:relative;z-index:2;display:flex;align-items:center;flex-direction:column; }
.download-inner .eyebrow { justify-content:center; }
.download-inner h2 { margin:10px 0 7px; }
.download-inner > p { color:#817a74;font-size:13px; }
.download-meta { justify-content:center; margin-top:17px; }
.download-note { color:#514d49; margin-top:13px;font-size:9px; }

.footer { background:#050505;border-top:1px solid #191716;padding:58px 0 22px; }
.footer-inner { width:min(var(--max),calc(100% - 60px));margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:start; }
.footer-brand { min-width:0; }
.footer p { color:#77716c;font-size:11px;margin:16px 0 4px; }
.footer small { color:#4e4a46;font-size:9px;line-height:1.6; }
.footer-nav { display:flex;flex-wrap:wrap;gap:18px;justify-content:center;padding-top:9px; }
.footer-nav a { color:#6d6863;font-size:10px; }
.footer-nav a:hover { color:#c0b9b0; }
.footer-right { text-align:right; }
.socials { display:flex;justify-content:flex-end;gap:9px;margin-bottom:13px; }
.socials a { width:34px;height:34px;display:grid;place-items:center;border:1px solid #262321;background:#0d0c0c;color:#aaa099;font-size:12px; }
.footer-bottom { width:min(var(--max),calc(100% - 60px));margin:40px auto 0;padding-top:16px;border-top:1px solid #181615;display:flex;justify-content:space-between;color:#403c38;font-size:9px; }

.reveal { opacity:0; transform:translateY(25px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.14s; }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.16s; }

@keyframes float { 0%,100%{transform:translateY(0);opacity:.2} 50%{transform:translateY(-35px) translateX(12px);opacity:1} }
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(6px)} }

@media (max-width: 900px) {
    .keys-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .keys-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1050px) {
  .site-header { padding:0 20px; }
  .nav { gap:17px; }
  .hero-content { width:52%; }
  .hero-visual { right:-90px; opacity:.72; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid { gap:45px; }
  .beta-inner { grid-template-columns:90px 1fr 1.4fr; }
}
@media (max-width: 780px) {
  :root { --header:64px; }
  .site-header { padding:0 17px; }
  .brand { min-width:auto; }
  .brand-name { font-size:11px;letter-spacing:3px; }
  .mobile-menu { display:block;z-index:2; }
  .nav {
    position:absolute; top:64px;left:12px;right:12px;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:8px;background:rgba(9,9,9,.97);border:1px solid #2a2420;
    transform:translateY(-15px);opacity:0;pointer-events:none;transition:.25s ease;
  }
  .nav.open { transform:none;opacity:1;pointer-events:auto; }
  .nav a { padding:13px 12px;border-bottom:1px solid #1e1b19; }
  .nav-download { text-align:center;margin:7px 0 0; }
  .section-inner { width:min(100% - 36px,var(--max)); }
  .hero { min-height:760px;height:auto;padding:130px 0 90px;display:block; }
  .hero-content { width:auto;margin:0 18px; }
  .hero-logo strong { font-size:68px; }
  .hero h1 { font-size:39px; }
  .hero-description { font-size:13px; }
  .hero-visual { position:relative;right:auto;top:auto;width:calc(100% - 30px);margin:65px auto 0;transform:rotate(-1deg);opacity:1; }
  .game-window { min-height:0; }
  .scroll-cue { display:none; }
  .about,.features,.demo,.shortcuts { padding:80px 0; }
  .about-grid,.demo-grid { grid-template-columns:1fr; }
  .about-features { margin-top:25px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:18px; }
  .feature-grid { grid-template-columns:1fr; }
  .demo-screen { min-height:0; }
  .keys-grid { grid-template-columns:1fr;gap:35px; }
  .key-item { border-right:0;border-bottom:1px solid #292624;padding:0 0 30px; }
  .key-item:last-child { border-bottom:0; }
  .beta-inner { padding:50px 0;grid-template-columns:1fr;gap:22px; }
  .beta-symbol { width:62px;height:62px;font-size:34px;margin-left:5px; }
  .beta-copy { border-left:0;border-top:1px solid rgba(255,184,150,.18);padding:22px 0 0; }
  .footer-inner { grid-template-columns:1fr;text-align:center; }
  .footer-nav { justify-content:center; }
  .footer-right { text-align:center; }
  .socials { justify-content:center; }
  .footer-bottom { flex-direction:column;gap:8px;text-align:center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}