body[data-game="vertigrav"] { background: #050d1d; }
body[data-game="vertigrav"] .nav { background: rgba(5,13,29,.88); }
body[data-game="vertigrav"] h1,
body[data-game="vertigrav"] h2,
body[data-game="vertigrav"] h3 { font-family: "DIN Condensed", "Arial Narrow", var(--font); font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
body[data-game="vertigrav"] h2 { font-size: clamp(44px, 6vw, 76px); }
body[data-game="vertigrav"] .eyebrow { color: #63dcff; }
body[data-game="vertigrav"] em { background-image: linear-gradient(110deg, #fff, #49d9ff); }
.vg-availability { border: 1px solid rgba(67,215,255,.45); border-radius: 999px; color: #8ee9ff; padding: 6px 13px; font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.vg-availability:hover { background: rgba(67,215,255,.12); }
.vg-hero { min-height: min(760px, 90vh); background: radial-gradient(circle at 74% 50%, #0b3666 0, transparent 45%), #050d1d; }
.vg-hero-grid { position: relative; z-index: 1; min-height: inherit; display: grid; grid-template-columns: 1fr .7fr; gap: clamp(32px, 6vw, 92px); align-items: center; padding-block: 72px; }
.vg-hero h1 { font-size: clamp(70px, 11vw, 148px); line-height: .88; letter-spacing: .015em; }
.vg-deck { color: #87e8ff; font-size: clamp(24px, 3.3vw, 38px); font-weight: 800; margin: 28px 0 0; }
.vg-hero .lede { max-width: 44ch; }
.vg-app-store-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .2s; }
.vg-app-store-badge:hover { transform: translateY(-3px); }
.vg-app-store-badge img { width: 220px; height: auto; }
.vg-hero-image { width: min(100%, 400px); justify-self: center; position: relative; border: 1px solid rgba(111,228,255,.45); border-radius: 30px; padding: 8px; background: #071225; box-shadow: 0 0 75px rgba(37,175,248,.23), 0 38px 80px rgba(0,0,0,.55); transform: rotate(4deg); }
.vg-hero-image img { border-radius: 23px; width: 100%; height: auto; }
.vg-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vg-feature { padding: 26px 22px; border: 1px solid rgba(101,213,249,.18); border-radius: 18px; background: linear-gradient(155deg, #102845, #071426 65%); }
.vg-feature span { font-size: 11px; letter-spacing: .14em; color: #77e5ff; font-weight: 800; }
.vg-feature h3 { font-size: 29px; margin: 48px 0 12px; }
.vg-feature p { color: #aabbd1; margin: 0; }
.vg-split { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: clamp(48px, 9vw, 145px); }
.vg-split > div > p:not(.eyebrow) { color: #b4c4d6; max-width: 44ch; font-size: 18px; }
.vg-split-shot { display: block; width: min(100%, 320px); max-height: 590px; height: auto; object-fit: cover; object-position: top; justify-self: center; border: 1px solid rgba(113,212,255,.33); border-radius: 20px; box-shadow: 0 25px 75px rgba(0,0,0,.55); }
.vg-control-list { display: grid; gap: 12px; margin-top: 30px; }
.vg-control-list article { padding: 17px 20px; border-left: 3px solid #4bdbff; background: #0d2138; }
.vg-control-list strong { color: #81e7ff; font-size: 13px; letter-spacing: .15em; }
.vg-control-list p { color: #b7c7db; margin: 5px 0 0; }
.vg-mode { background: radial-gradient(ellipse at 80% 50%, rgba(255,126,49,.2), transparent 43%), linear-gradient(#110e17, #090b17); }
.vg-mode em { background-image: linear-gradient(110deg, #ffce68, #ff7733) !important; }
.vg-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.vg-pills span { border: 1px solid rgba(104,218,250,.38); border-radius: 999px; padding: 14px 20px; background: #0e243b; color: #e4faff; font: 800 14px var(--font); letter-spacing: .08em; }
.vg-depth { background: linear-gradient(#07182b, #09162a 30%, #0d1020 68%, #0b1422); text-align: center; }
.vg-depth-marks { width: min(620px, 100%); display: grid; gap: 20px; margin: 48px auto; }
.vg-depth-marks span { display: block; padding: 16px; border-top: 1px solid rgba(96,204,243,.22); color: #9cecff; font-size: clamp(22px, 4vw, 42px); font-weight: 900; letter-spacing: .12em; }
.vg-depth-marks span:last-child { color: #ffc94c; }
.vg-depth p:last-child { color: #b4c4d6; }
.vg-two-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vg-two-cards article { min-height: 295px; padding: clamp(27px, 4vw, 50px); border: 1px solid rgba(103,212,247,.22); border-radius: 24px; background: linear-gradient(135deg, #11304c, #091524); }
.vg-two-cards h2 { font-size: clamp(33px, 4vw, 52px) !important; }
.vg-two-cards p:last-child { color: #b4c4d6; max-width: 45ch; }
.vg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.vg-gallery a { display: block; border-radius: 16px; overflow: hidden; border: 1px solid rgba(97,211,245,.27); background: #09182a; transition: transform .2s, border-color .2s; }
.vg-gallery a:hover { transform: translateY(-5px); border-color: #65dcff; }
.vg-gallery img { width: 100%; height: auto; }
.vg-gallery span { display: block; padding: 14px 12px; color: #8ce8ff; font-size: 11px; letter-spacing: .08em; font-weight: 800; }
.vg-final { background: radial-gradient(circle at 50% 0%, rgba(64,201,249,.24), transparent 60%); }
.vg-final p:not(.eyebrow) { color: #b8c8d9; }
body[data-game="vertigrav"] a:focus-visible { outline: 3px solid #ffce68; outline-offset: 4px; }
@media (max-width: 900px) {
  .vg-hero-grid { grid-template-columns: 1fr .7fr; }
  .vg-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .vg-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .vg-availability { font-size: 10px; }
  .vg-hero { min-height: 0; }
  .vg-hero-grid { grid-template-columns: 1fr; padding-block: 66px; }
  .vg-hero h1 { font-size: clamp(72px, 15vw, 100px); position: relative; }
  .vg-hero-image { width: min(80vw, 330px); transform: rotate(2deg); }
  .vg-split { grid-template-columns: 1fr; }
  .vg-split-shot { width: min(65vw, 330px); }
  .vg-two-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .vg-gallery { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .vg-feature-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .vg-feature { padding: 20px 15px; } .vg-feature h3 { font-size: 23px; margin-top: 25px; } .vg-feature p { font-size: 13px; } .vg-hero-image { width: min(70vw, 295px); } }
@media (prefers-reduced-motion: reduce) { .vg-hero-image, .vg-gallery a { transition: none; } }