/* Project IE 4K Website Styles */
:root {
  --bg: #0d1016;
  --bg-alt: #141a22;
  --bg-soft: #1c242f;
  --panel: #182029;
  --panel-alt: #212c38;
  --text: #e6edf3;
  --text-dim: #9aa7b5;
  --primary: #4ea1ff;
  --primary-accent: #82c7ff;
  --danger: #ff5f56;
  --warn: #ffc845;
  --ok: #6ddc7d;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 4px 18px -4px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.4);
  --gradient: linear-gradient(135deg,#2563eb 0%, #4f46e5 45%, #7c3aed 100%);
  --mono: "SFMono-Regular","JetBrains Mono",Consolas,monospace;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

img { max-width:100%; display:block; }
a { color: var(--primary); text-decoration:none; }
a:hover { color: var(--primary-accent); }

h1,h2,h3,h4 { line-height:1.15; font-weight:600; letter-spacing:.5px; }
.lead { font-size:1.1rem; line-height:1.5; color:var(--text-dim); }

.container { width:100%; max-width:1180px; margin:0 auto; padding:0 1.25rem; }
.narrow { max-width:860px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; gap:2rem; }

/* Header */
.site-header { position:sticky; top:0; z-index:80; backdrop-filter: blur(10px); background:rgba(13,16,22,0.82); border-bottom:1px solid #1f2730; }
.logo { font-size:1.25rem; font-weight:700; letter-spacing:.5px; }
.logo span { background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.main-nav { position:relative; }
.nav-toggle { display:none; background:var(--panel); color:var(--text); border:1px solid #2c3742; padding:.5rem .75rem; font-size:1rem; border-radius:var(--radius-sm); cursor:pointer; }
.nav-links { list-style:none; display:flex; gap:1rem; padding:0; margin:0; }
.nav-links a { display:block; padding:.75rem .85rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500; color:var(--text-dim); }
.nav-links a:hover, .nav-links a:focus { background:var(--panel); color:var(--text); }

@media (max-width: 880px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; top:100%; right:0; flex-direction:column; background:var(--panel); border:1px solid #2b363f; border-radius:var(--radius); padding:.5rem; min-width:200px; transform:translateY(-6px); opacity:0; pointer-events:none; transition:.25s ease; box-shadow:var(--shadow); }
  .nav-links.open { opacity:1; pointer-events:auto; transform:translateY(4px); }
  .nav-links a { padding:.6rem .7rem; }
  .hero-grid { grid-template-columns:1fr !important; }
}

/* Hero */
.hero { padding:5.5rem 0 3.5rem; background: radial-gradient(circle at 25% 20%, #1d2840, #0d1016 70%); position:relative; overflow:hidden; }
.hero:before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(78,161,255,0.18),rgba(124,58,237,0.08)); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start; }
.hero-text h1 { font-size:2.35rem; margin:.25rem 0 1rem; }
.cta-row { display:flex; gap:1rem; flex-wrap:wrap; margin:1.25rem 0 1.1rem; }
.quick-stats { list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.6rem; }
.quick-stats li { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:var(--text-dim); background:var(--panel); padding:.5rem .75rem; border-radius:var(--radius-sm); border:1px solid #29323a; }
.hero-media { display:grid; gap:1.25rem; }
.panel { background:var(--panel); padding:1.1rem 1.15rem 1.2rem; border:1px solid #273039; border-radius:var(--radius); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.panel h3 { margin:.25rem 0 .75rem; font-size:1rem; font-weight:600; letter-spacing:.5px; }
.panel.gradient { background:linear-gradient(135deg,#1d2531,#212d3a 55%,#283142); }
.glass { background:rgba(30,40,52,0.55); backdrop-filter: blur(14px); }
.mini-note { font-size:.7rem; letter-spacing:.5px; color:var(--text-dim); margin-top:.5rem; }

/* Buttons */
.btn { --btn-bg:var(--panel); --btn-border:#2e3944; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; padding:.75rem 1.05rem .78rem; font-size:.85rem; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--text); border-radius:var(--radius-sm); text-decoration:none; position:relative; transition:.18s; }
.btn.primary { --btn-bg:linear-gradient(135deg,#2563eb,#7c3aed); border:none; }
.btn.primary:hover { filter:brightness(1.15); }
.btn.outline { background:transparent; color:var(--primary-accent); border:1px solid #36526c; }
.btn.outline:hover { background:#17202a; }
.btn .icon { width:16px; height:16px; fill:currentColor; flex-shrink:0; display:inline-block; }
.btn.reddit { border-color:#ff5a01; color:#ff9760; }
.btn.reddit:hover { background:rgba(255,90,1,0.12); color:#ffb892; }

/* Sections */
.section { padding:4rem 0 3.5rem; }
.section.alt { background:var(--bg-alt); }
.section.subtle { background:#10151c; }
.section .note { font-size:.8rem; color:var(--text-dim); margin-top:1rem; }
.section .lead { margin-top:.75rem; }
.section h2 { margin:0 0 1.25rem; font-size:1.65rem; }

/* Cards & Grids */
.grid { display:grid; gap:1.6rem; }
.cols-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.cols-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { background:var(--panel); border:1px solid #26313b; border-radius:var(--radius); padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; gap:.55rem; position:relative; overflow:hidden; }
.card:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(78,161,255,0.06),rgba(124,58,237,0.05)); opacity:0; transition:.35s; }
.card:hover:before { opacity:1; }
.card h3 { margin:.1rem 0 .1rem; font-size:1rem; }
.card p { font-size:.85rem; line-height:1.4; color:var(--text-dim); }
.card.tight p { margin:.2rem 0 0; }

/* Steps */
.steps { list-style:decimal; margin:0 0 1.25rem 1.15rem; padding:0; }
.steps li { margin:.4rem 0 .6rem; padding-left:.4rem; line-height:1.4; }

/* Lists */
.check-list { list-style:none; margin:.35rem 0 0; padding:0; font-size:.8rem; display:grid; gap:.35rem; }
.check-list li { background:var(--panel-alt); padding:.45rem .55rem; border-radius:var(--radius-sm); border:1px solid #2b3641; display:flex; justify-content:space-between; }
.ok { color:var(--ok); font-weight:600; }
.warn { color:var(--warn); font-weight:600; }

/* Code */
code, .code-block { font-family:var(--mono); background:#121921; color:#d0e4ff; font-size:.75rem; line-height:1.45; border:1px solid #24313d; border-radius:var(--radius-sm); }
.code-block { display:block; padding:.75rem .85rem; overflow-x:auto; }

/* Timeline */
.timeline { display:grid; gap:1rem; margin:1.25rem 0 1.5rem; }
.tl-item { background:var(--panel); padding:.85rem 1rem .95rem; border:1px solid #29323c; border-radius:var(--radius-sm); position:relative; }
.tl-item h4 { margin:.1rem 0 .45rem; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--primary-accent); }
.tl-item p { font-size:.75rem; line-height:1.35; color:var(--text-dim); }

/* Progress Grid */
.progress-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.5rem; margin-top:1rem; font-size:.65rem; }
.progress-grid span { background:var(--panel); padding:.55rem .4rem; border:1px solid #2a333c; border-radius:var(--radius-sm); text-align:center; letter-spacing:.5px; font-weight:500; }

.details summary { cursor:pointer; font-weight:600; }
.details { background:var(--panel); border:1px solid #273039; padding:1rem 1.1rem; border-radius:var(--radius); margin-top:1.5rem; }

/* Gallery */
.gallery-grid { --thumb:120px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--thumb),1fr)); gap:1rem; margin-top:1.25rem; }
.gallery-grid figure { margin:0; background:var(--panel); border:1px solid #25313a; border-radius:var(--radius-sm); padding:.5rem .5rem .55rem; display:flex; flex-direction:column; gap:.4rem; box-shadow:0 0 0 0 rgba(0,0,0,0); transition:.25s; position:relative; overflow:hidden; }
.gallery-grid figure:hover { box-shadow:0 4px 12px -2px rgba(0,0,0,0.5); transform:translateY(-3px); }
.gallery-grid img { width:100%; height:auto; border-radius:var(--radius-sm); }
.gallery-grid figcaption { font-size:.6rem; letter-spacing:.5px; text-align:center; color:var(--text-dim); }

/* Concepts */
.concept-figure { margin:1.5rem 0 0; background:var(--panel); padding:1rem; border:1px solid #28323a; border-radius:var(--radius); }
.concept-figure img { border-radius:var(--radius-sm); }
.concept-figure figcaption { font-size:.7rem; color:var(--text-dim); margin-top:.65rem; text-align:center; }

/* Videos */
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; margin:1.25rem 0 0; }
.video { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid #27313a; border-radius:var(--radius-sm); overflow:hidden; text-decoration:none; }
.video img { aspect-ratio:16/9; object-fit:cover; width:100%; filter:brightness(.9); transition:.3s; }
.video span { font-size:.7rem; padding:.5rem .6rem .6rem; font-weight:600; letter-spacing:.5px; color:var(--text-dim); }
.video:hover img { filter:brightness(1); }
.video:hover span { color:var(--primary-accent); }

/* Credits */
.credits { list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.5rem; }
.credits li { font-size:.75rem; line-height:1.3; background:var(--panel); border:1px solid #27313a; padding:.6rem .7rem; border-radius:var(--radius-sm); }
.credits a { color:var(--primary-accent); }

/* Footer */
.site-footer { background:#0b0e13; padding:2.2rem 0 2.5rem; border-top:1px solid #1b242d; margin-top:2rem; }
.footer-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.logo.small { font-size:1rem; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; font-size:.75rem; }
.footer-links a { color:var(--text-dim); padding:.35rem .45rem; border-radius:var(--radius-sm); }
.footer-links a:hover { background:var(--panel); color:var(--text); }
.footer-links a .icon { width:15px; height:15px; margin-right:.35rem; vertical-align:middle; fill:currentColor; }
.icon-link { display:inline-flex; align-items:center; }
.icon-link.reddit { color:#ff874a; }
.icon-link.reddit:hover { color:#ffb892; }
.foot-note { font-size:.65rem; color:var(--text-dim); margin:.75rem 0 0; letter-spacing:.4px; }

/* Utilities */
.note, .mini-note { color:var(--text-dim); }
.subtle { background:#10151c; }
.small-gap { gap:.65rem; }
.responsive-cards { align-items:stretch; }
.build-cards .card code { margin-top:.5rem; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0f141a; }
::-webkit-scrollbar-thumb { background:#29323b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#3a4753; }

/* Accessibility focus */
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:3px; }

/* Animations */
@media (prefers-reduced-motion: no-preference) {
  .card, .panel, .video, .gallery-grid figure { transition: background .35s, transform .35s, box-shadow .35s; }
}