@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blood: #8b0000;
  --blood-bright: #cc0000;
  --blood-glow: #ff1a1a;
  --mono: 'Share Tech Mono', monospace;
  --display: 'Orbitron', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: #000;
  color: #ccc;
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: none;
}

body::after {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 999;
}

canvas#noise { display: none; }
.grid-bg { display: none; }

.corner { position: fixed; width: 50px; height: 50px; z-index: 500; opacity: 0.5; }
.corner-tl { top: 18px; left: 18px; border-top: 1px solid var(--blood-bright); border-left: 1px solid var(--blood-bright); }
.corner-tr { top: 18px; right: 18px; border-top: 1px solid var(--blood-bright); border-right: 1px solid var(--blood-bright); }
.corner-bl { bottom: 18px; left: 18px; border-bottom: 1px solid var(--blood-bright); border-left: 1px solid var(--blood-bright); }
.corner-br { bottom: 18px; right: 18px; border-bottom: 1px solid var(--blood-bright); border-right: 1px solid var(--blood-bright); }

.cursor { position: fixed; width: 8px; height: 8px; background: var(--blood-bright); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); box-shadow: 0 0 8px var(--blood-glow),0 0 20px var(--blood); }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 18px 48px; border-bottom: 1px solid rgba(139,0,0,0.2); background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); }
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { width: 32px; filter: drop-shadow(0 0 6px rgba(139,0,0,0.6)); }
.nav-logo-text { font-family: var(--display); font-weight: 900; font-size: 16px; letter-spacing: 4px; color: #fff; text-shadow: 0 0 10px rgba(200,0,0,0.4); }
.nav-logo-text span { color: var(--blood-bright); font-size: 11px; letter-spacing: 3px; display: block; margin-top: -2px; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; color: rgba(200,200,200,0.5); text-decoration: none; text-transform: uppercase; transition: color 0.2s, text-shadow 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--blood-bright); text-shadow: 0 0 10px var(--blood-glow); }

.page-wrap { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto; padding: 140px 20px 80px; }

.page-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 8px; color: var(--blood-bright); opacity: 0.6; margin-bottom: 12px; }
.page-title { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 6vw, 72px); letter-spacing: 6px; color: #fff; text-shadow: 0 0 30px rgba(139,0,0,0.25); margin-bottom: 16px; line-height: 1.1; }
.page-subtitle { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: rgba(180,180,180,0.5); line-height: 2; max-width: 680px; margin-bottom: 60px; }

.divider { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,rgba(139,0,0,0.4),transparent); margin: 60px 0; position: relative; z-index: 10; }

.section-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 6px; color: var(--blood-bright); opacity: 0.6; text-transform: uppercase; margin-bottom: 10px; }
.section-title { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 3vw, 32px); letter-spacing: 4px; color: #fff; margin-bottom: 32px; text-shadow: 0 0 20px rgba(139,0,0,0.2); }

.card { border: 1px solid rgba(139,0,0,0.15); background: rgba(0,0,0,0.5); padding: 32px; position: relative; overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 0; background: var(--blood-bright); box-shadow: 0 0 8px var(--blood-glow); transition: height 0.4s; }
.card:hover::before { height: 100%; }
.card:hover { border-color: rgba(139,0,0,0.4); background: rgba(20,0,0,0.5); }

.btn { font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; padding: 14px 32px; border: 1px solid; cursor: none; transition: all 0.25s; display: inline-block; }
.btn-primary { color: var(--blood-bright); border-color: var(--blood-bright); box-shadow: 0 0 12px rgba(139,0,0,0.3); }
.btn-primary:hover { box-shadow: 0 0 28px rgba(200,0,0,0.5); text-shadow: 0 0 8px var(--blood-glow); }
.btn-ghost { color: rgba(180,180,180,0.5); border-color: rgba(180,180,180,0.15); }
.btn-ghost:hover { color: rgba(220,220,220,0.8); border-color: rgba(180,180,180,0.35); }

.glow-text { color: var(--blood-bright); text-shadow: 0 0 8px var(--blood-glow), 0 0 20px var(--blood-bright), 0 0 50px var(--blood); animation: glow-pulse 2s ease-in-out infinite; }

footer { position: relative; z-index: 10; text-align: center; padding: 40px 20px 60px; border-top: 1px solid rgba(139,0,0,0.1); }
.footer-logo { font-family: var(--display); font-weight: 900; font-size: 13px; letter-spacing: 6px; color: rgba(200,200,200,0.2); margin-bottom: 10px; }
.footer-text { font-family: var(--mono); font-size: 9px; letter-spacing: 3px; color: rgba(139,0,0,0.3); text-transform: uppercase; }

@keyframes glow-pulse {
  0%,100% { text-shadow: 0 0 8px var(--blood-glow),0 0 20px var(--blood-bright),0 0 50px var(--blood); }
  50% { text-shadow: 0 0 14px var(--blood-glow),0 0 35px var(--blood-bright),0 0 80px var(--blood); }
}
@keyframes flicker { 0%,93%,97%,100% { opacity:0.7; } 95% { opacity:0.15; } }
@keyframes bird-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

.code-block { background: rgba(10,0,0,0.7); border: 1px solid rgba(139,0,0,0.2); border-left: 2px solid var(--blood-bright); padding: 20px 24px; font-family: var(--mono); font-size: 11px; line-height: 2; color: rgba(200,200,200,0.65); overflow-x: auto; letter-spacing: 0.5px; }
.code-block .cmd { color: var(--blood-bright); }
.code-block .comment { color: rgba(139,0,0,0.5); }

@media (max-width: 760px) { nav { padding: 16px 24px; } .nav-links { display: none; } .page-wrap { padding: 110px 16px 60px; } }