/* Shared styles for static SEO landing pages. Mirrors the home HUD look (src/index.css, src/App.tsx). Home page does not load this file. */
:root { --bg:#121212; --fg:#e5e7eb; --muted:#9ca3af; --orange:#ff6600; --green:#00ffcc; --line:rgba(255,102,0,.12); --card:rgba(24,24,26,.95);
  --display:"Orbitron", system-ui, sans-serif; --mono:"Share Tech Mono", ui-monospace, monospace; --sans:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { background:var(--bg); scrollbar-width:thin; scrollbar-color:var(--orange) var(--bg); }
body { margin:0; color:var(--fg); font:16px/1.65 var(--sans); background:transparent; overflow-x:hidden; }

/* Backdrop: home frame + dark veil, grid, dots, scanlines */
body::before { content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,18,.78),rgba(18,18,18,.88)), url(/frames/frame_001.webp) center/cover no-repeat, var(--bg); }
body::after { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,.25) 50%),
    linear-gradient(to right, rgba(255,102,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,102,0,.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,102,0,.08) 1px, transparent 1px);
  background-size:100% 4px, 40px 40px, 40px 40px, 20px 20px; opacity:.9; }

a { color:var(--orange); }
.wrap { max-width:880px; margin:0 auto; padding:0 20px; }

/* Top HUD bar */
header.site { position:sticky; top:0; z-index:10; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; flex-wrap:wrap; gap:4px 20px; align-items:center; padding-top:10px; padding-bottom:10px; max-width:1100px; }
header.site .brand { font:700 13px var(--display); letter-spacing:.18em; text-decoration:none; color:var(--orange); margin-right:auto; }
header.site .brand::after { content:" // SYSTEM_MONITOR: ACTIVE"; font:10px var(--mono); letter-spacing:.05em; color:rgba(0,255,204,.8); }
header.site a:not(.brand) { font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:#aaa; }
header.site a:not(.brand):hover, header.site a[aria-current] { color:var(--orange); }

/* Headings */
main { counter-reset:sec; }
h1 { font:900 clamp(24px,5vw,44px)/1.15 var(--display); letter-spacing:-.01em; margin:44px 0 14px;
  background:linear-gradient(90deg,var(--orange),#fb923c,var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font:900 clamp(20px,3.5vw,26px)/1.2 var(--display); margin:44px 0 12px; color:#fff; }
main h2::before { counter-increment:sec; content:"SEC_0" counter(sec) " //"; display:block; font:12px var(--mono); letter-spacing:.2em; color:var(--orange); margin-bottom:6px; }
h3 { font:700 17px/1.3 var(--display); margin:24px 0 6px; color:#fff; }
p, li { color:#d1d5db; font-weight:300; }
strong { color:#fff; font-weight:600; }
.lead { font-size:18px; color:var(--muted); }

/* Cards with corner brackets */
.card { position:relative; background-color:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:4px 22px 18px; margin:18px 0; box-shadow:0 20px 40px rgba(0,0,0,.35);
  background-image:
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange)),
    linear-gradient(var(--orange),var(--orange)), linear-gradient(var(--orange),var(--orange));
  background-repeat:no-repeat;
  background-size:16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position:left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; }
.card h2, .card h3 { margin-top:18px; }
.card h2::before { margin-top:0; }

/* Tech chips */
.tags { display:flex; flex-wrap:wrap; gap:6px; padding:0; list-style:none; margin:12px 0 0; }
.tags li { border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.05); border-radius:4px; padding:2px 8px; font:11px var(--mono); color:var(--green); }

.cta { display:inline-block; margin:10px 0 0; padding:10px 20px; border:1px solid var(--orange); border-radius:6px; text-decoration:none; font:12px var(--mono); letter-spacing:.15em; text-transform:uppercase; transition:box-shadow .2s, background .2s; }
.cta:hover { background:rgba(255,102,0,.12); box-shadow:0 0 14px rgba(255,102,0,.5); }

main ul:not(.tags), main ol { padding-left:22px; }
main li::marker { color:var(--orange); }

/* Bottom HUD bar */
footer.site { margin-top:64px; border-top:1px solid var(--line); background:rgba(0,0,0,.55); backdrop-filter:blur(6px); padding:18px 0 28px; font:11px/1.6 var(--mono); letter-spacing:.05em; color:#888; }
footer.site p { color:#888; margin:4px 0; font-weight:400; }

::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:3px; }
::selection { background:rgba(255,102,0,.3); color:var(--orange); }

@media (max-width:640px) { header.site .brand::after { display:none; } }