/* Jacinto Speedrun Challenge - landing styles */
:root{
  --bg:#4A1915;
  --bg-2:#381210;
  --accent:#FFB11A;
  --accent-2:#D45C00;
  --cream:#F5E6C8;
  --text:#F5E6C8;
  --muted:#BFAF98;
  --shadow:#2B0E0B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'VT323', system-ui, monospace;
  background: radial-gradient(1200px 600px at 50% -20%, rgba(212,92,0,.25), transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.35;
}

.container{width:min(1100px, 92%); margin:0 auto}

.nav{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(#3b1412, #2a0e0c);
  border-bottom:2px solid var(--shadow);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.nav a{color:var(--cream); text-decoration:none; margin:0 10px; font-size:20px}
.nav .brand{font-family:'Press Start 2P', system-ui, monospace; color:var(--accent)}

.hero{
  position:relative;
  padding:80px 0 40px;
  text-align:center;
}
.hero .logo{width:min(720px, 90%); height:auto; image-rendering:pixelated; filter: drop-shadow(0 6px 0 var(--shadow));}
.hero .tagline{font-size:28px; margin:.5rem 0 1.25rem; color:var(--cream); opacity:.9}
.hero .cta{display:flex; gap:12px; justify-content:center}

.btn{
  display:inline-block; padding:14px 20px; border:3px solid var(--shadow);
  background:var(--accent-2); color:#100; text-decoration:none; font-family:'Press Start 2P', monospace;
  box-shadow:0 6px 0 var(--shadow); transform:translateY(0); transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translateY(2px); box-shadow:0 4px 0 var(--shadow)}
.btn:active{transform:translateY(6px); box-shadow:0 0 0 var(--shadow)}
.btn-primary{background:var(--accent);}
.btn-ghost{background:transparent; color:var(--accent); border-color:var(--accent);}

.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, var(--bg) 0, var(--bg-2) 100%)}

.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:28px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.panel{background:#2e0f0c; border:3px solid var(--shadow); box-shadow:0 6px 0 var(--shadow)}
.panel-inner{padding:18px}
.mockbox{height:220px; background:repeating-linear-gradient(90deg, #4a1a16 0 8px, #3c1412 8px 16px); border:2px dashed #612; opacity:.6}
.muted{color:var(--muted)}
.small{font-size:16px}

.iframe-wrap{aspect-ratio:16/9; background:#1a1a1a; border:3px solid var(--shadow); box-shadow:0 6px 0 var(--shadow)}
.iframe-wrap iframe{width:100%; height:100%; border:0; background:#000}

.emblems{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:16px}
@media (min-width:800px){.emblems{grid-template-columns:repeat(6,1fr)}}
.emblems figure{margin:0; text-align:center}
.emblems img{width:110px; height:110px; image-rendering:pixelated; border:2px solid var(--shadow); background:#260c0a; box-shadow:0 4px 0 var(--shadow)}
.emblems figcaption{margin-top:6px; color:var(--muted)}

.footer{border-top:2px solid var(--shadow); padding:28px 0; background:#2a0e0c}
.footer-inner{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer a{color:var(--accent)}
.bullets{padding-left:18px}
.bullets li{margin:6px 0}
code{background:#00000040; padding:2px 4px; border-radius:4px}