/* Tiltwell shared styles */
:root{
  --bg:#0b1026; --bg2:#141b3d; --ink:#eef2ff; --sub:#9fb0e0;
  --gold:#f5b942; --teal:#3fd9c4; --green:#4ade80; --rose:#fb7185;
  --card:rgba(20,27,61,.72); --line:rgba(159,176,224,.18);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{min-height:100vh}
a{color:var(--teal)}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
h1,h2,h3{line-height:1.15}
.btn{
  display:inline-block; background:linear-gradient(135deg,var(--gold),#e8853b);
  color:#241a05; font-weight:700; font-size:1.05rem; text-decoration:none;
  padding:14px 34px; border-radius:999px; box-shadow:0 8px 24px rgba(245,185,66,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(245,185,66,.45)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none}
/* landing */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 500px at 70% -10%, #22307255, transparent), var(--bg)}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.85}
.hero .wrap{position:relative; padding:72px 20px 60px; text-align:center}
.hero .kicker{color:var(--teal); letter-spacing:.22em; text-transform:uppercase; font-size:.8rem}
.hero h1{font-size:clamp(2.4rem,7vw,4.4rem); margin:.35em 0 .25em;
  background:linear-gradient(90deg,var(--gold),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .tag{color:var(--sub); font-size:clamp(1rem,2.6vw,1.25rem); margin-bottom:28px}
section{padding:52px 0; border-bottom:1px solid var(--line)}
section h2{font-size:1.7rem; margin-bottom:22px}
#gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
#gallery img{width:100%; border-radius:14px; border:1px solid var(--line); background:var(--bg2)}
#features{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
#features li{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px}
#features b{color:var(--gold); display:block; margin-bottom:6px}
#controls{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px}
#controls .keys{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
kbd{background:#222a55; border:1px solid var(--line); border-bottom-width:3px; border-radius:7px; padding:6px 10px; font-family:inherit; font-size:.92rem}
footer{padding:34px 0; color:var(--sub); font-size:.9rem; text-align:center}
@media (max-width:600px){ .hero .wrap{padding:48px 16px 44px} section{padding:38px 0} }
/* gallery cards */
#gallery figure{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:0}
#gallery img{display:block; border-radius:0; border:0}
#gallery figcaption{padding:10px 14px; color:var(--sub); font-size:.9rem}