/* omegagiven.com
   Two looks on one site: the shell + apps are clean and modern ("pro");
   anything inside .retro (the games) keeps the chunky pixel style. */
:root{
  --bg:#0b0d11; --bg2:#101319; --panel:#14181f; --panel2:#181d26; --line:#252c37; --line2:#313a47;
  --text:#eef1f5; --muted:#a3adba; --dim:#7d8896;
  --red:#ff4b52; --red2:#ff9ea2; --redbg:rgba(255,75,82,.12);
  --green:#3cff4e; --gold:#f2c230; --blue:#3d8bff;
  --max:1120px; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--red2);text-decoration:none}
a:hover{color:#fff}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header.nav{position:sticky;top:0;z-index:10;background:rgba(11,13,17,.82);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
header.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;font-size:17px;letter-spacing:.2px}
.brand img{width:28px;height:28px;image-rendering:pixelated;border-radius:6px}
nav.links{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.links a{color:var(--muted);padding:8px 12px;border-radius:8px;font-size:15px;font-weight:500}
nav.links a:hover{color:#fff;background:var(--panel)}
nav.links a.on{color:#fff}
nav.links a.sponsor{color:#fff;background:var(--red);margin-left:8px;padding:8px 14px}
nav.links a.sponsor:hover{background:#ff6168}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 'Inter',system-ui,sans-serif;background:var(--red);color:#fff;
  border:1px solid transparent;border-radius:10px;padding:12px 18px;margin:0 10px 10px 0;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{color:#fff;background:#ff6168}
.btn:active{transform:translateY(1px)}
.btn.alt,.btn.ghost{background:transparent;border-color:var(--line2);color:var(--text)}
.btn.alt:hover,.btn.ghost:hover{background:var(--panel2);border-color:#46505f}
.btn.dark{background:#000;border-color:#2c323b}
.btn.dark:hover{background:#15181d}
.btn.green{background:#1f9d36}
.btn.green:hover{background:#25b13f}
.btn.disabled{opacity:.55;cursor:default}
.btn.disabled:hover{background:transparent}

/* ---------- hero ---------- */
.hero{padding:96px 0 72px;border-bottom:1px solid var(--line);background:
  radial-gradient(900px 420px at 85% -10%,rgba(255,75,82,.20),transparent 60%),
  radial-gradient(700px 380px at -10% 110%,rgba(255,75,82,.07),transparent 60%)}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--red2);margin-bottom:14px}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.05;letter-spacing:-1.5px;font-weight:800;margin:0 0 18px;max-width:820px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:640px;margin:0 0 30px}
.hero.small{padding:64px 0 44px}

/* ---------- sections ---------- */
section{padding:80px 0}
section+section{border-top:1px solid var(--line)}
.sechead{margin:0 0 36px}
.sechead h2{font-size:clamp(28px,3.5vw,38px);letter-spacing:-.8px;font-weight:800;margin:0 0 8px}
.sechead p{color:var(--muted);margin:0;font-size:17px;max-width:620px}
.stack-cards{display:flex;flex-direction:column;gap:24px}

/* ---------- app cards (pro) ---------- */
.appcard{display:grid;grid-template-columns:auto 1fr;gap:28px;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:32px;transition:border-color .2s}
.appcard:hover{border-color:var(--line2)}
.appicon{width:84px;height:84px;border-radius:20px;background:#0f1217;border:1px solid var(--line);padding:10px;object-fit:contain}
.appcard .top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.appcard h3{font-size:26px;letter-spacing:-.5px;font-weight:700;margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.live{color:#4ade80;border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.08)}
.pill.beta{color:#fbbf24;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08)}
.pill.wip{color:#93c5fd;border-color:rgba(147,197,253,.3);background:rgba(147,197,253,.08)}
.appcard .tag{font-size:18px;font-weight:500;color:var(--text);margin:6px 0 10px}
.appcard .desc{color:var(--muted);margin:0 0 18px;max-width:760px}
.feats{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 24px}
.feats li{position:relative;padding-left:28px;color:#cdd4dd;font-size:15px}
.feats li::before{content:'';position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--redbg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23ff9e9e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat}
.appcard .act{display:flex;flex-wrap:wrap}

/* ---------- support ---------- */
.support{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:linear-gradient(135deg,rgba(255,75,82,.14),rgba(255,75,82,.03));
  border:1px solid rgba(255,75,82,.25);border-radius:var(--r);padding:32px}
.support h2{font-size:26px;letter-spacing:-.5px;margin:0 0 6px}
.support p{color:var(--muted);margin:0;max-width:640px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--dim);font-size:14px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--muted)}

/* =====================================================================
   RETRO — the games corner keeps the pixel look
   ===================================================================== */
.retro{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px),
  radial-gradient(800px 400px at 50% 0%,rgba(60,255,78,.07),transparent 60%),#090b0f}
.retro .sechead h2,.retro h1{font-family:'Silkscreen',ui-monospace,monospace;font-weight:400;letter-spacing:1px;text-shadow:4px 4px 0 #000}
.retro .sechead h2 .px{color:var(--green)}
.retro .sechead p,.retro p{font-family:'VT323',ui-monospace,monospace;font-size:21px;line-height:1.25}
.retro .btn{font-family:'Silkscreen',monospace;font-weight:400;font-size:14px;border-radius:0;border:0;box-shadow:4px 4px 0 #000;padding:12px 18px}
.retro .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.retro .btn.alt{background:#253142;border:0}
.retro .btn.alt:hover{background:#2f3d52}
.retro .btn.disabled{background:#1c2430}
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;background:#11161d;border:2px solid #243040;box-shadow:8px 8px 0 #000}
.feature .shot{aspect-ratio:16/10;background:#000 center/cover no-repeat;image-rendering:pixelated;border-right:2px solid #243040}
.feature .txt{padding:24px 24px 24px 0}
.feature h3{font-family:'Silkscreen',monospace;font-weight:400;font-size:28px;margin:0 0 8px;color:var(--green);text-shadow:3px 3px 0 #000}
.feature h3 em{font-style:normal;color:#5aa2ff}
.feature ul{font-family:'VT323',monospace;font-size:20px;line-height:1.2;color:#c4cfdb;padding-left:20px;margin:10px 0 18px}
.badge{display:inline-block;font-family:'Silkscreen',monospace;font-size:10px;padding:3px 7px;border:1px solid currentColor;letter-spacing:1px;margin-bottom:10px}
.badge.live{color:var(--green)} .badge.mp{color:#c792ff} .badge.beta{color:var(--gold)}
.retro.hero{border-bottom:2px solid #243040}
.retro.hero h1{font-size:clamp(34px,6vw,60px)}
.retro.hero p.lead{color:#c4cfdb}

@media (max-width:760px){
  header.nav .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:8px}
  nav.links{margin-left:0;width:100%}
  nav.links a{padding:7px 10px;font-size:14px}
  .hero{padding:56px 0 44px}
  section{padding:56px 0}
  .appcard{grid-template-columns:1fr;gap:16px;padding:22px}
  .appicon{width:64px;height:64px;border-radius:16px;padding:8px}
  .feature{grid-template-columns:1fr}
  .feature .shot{border-right:0;border-bottom:2px solid #243040}
  .feature .txt{padding:0 20px 20px}
  .support{padding:24px}
}

/* ---------- demo videos ---------- */
.vid{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:zoom-in;overflow:hidden}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid-badge{position:absolute;left:12px;bottom:12px;font:600 12px/1 'Inter',sans-serif;color:#fff;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px);opacity:.9}
.vid:hover .vid-badge{background:var(--red);border-color:var(--red)}
/* app cards: video beside the text, alternating sides */
.appcard{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;padding:24px;gap:32px}
.appcard .media .vid{border-radius:10px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.stack-cards .appcard:nth-child(even) .media{order:2}
.appcard .top{gap:14px;align-items:center;margin-bottom:6px}
.appcard .top > div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.appicon{width:56px;height:56px;border-radius:14px;padding:7px}
.appcard .feats{grid-template-columns:1fr;gap:8px}
/* game cards: the video sits in the pixel frame */
.feature .shot{background:#000}
.feature .shot .vid{height:100%;aspect-ratio:auto;image-rendering:auto}
.retro .vid-badge{font-family:'Silkscreen',monospace;font-weight:400;border-radius:0;background:#000}
/* lightbox */
#lightbox{position:fixed;inset:0;z-index:50;background:rgba(5,6,9,.92);display:flex;align-items:center;justify-content:center;padding:24px}
#lightbox[hidden]{display:none}
#lightbox video{max-width:min(1400px,100%);max-height:100%;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#000}
.lb-close{position:absolute;top:14px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:#fff;font-size:26px;line-height:1;cursor:pointer}
@media (max-width:900px){
  .appcard{grid-template-columns:1fr;gap:18px;padding:18px}
  .stack-cards .appcard:nth-child(even) .media{order:0}
}