/* demo06 · cyberpunk
 * Neon on dark. Glitch text. Sharp clip-path edges. Grid backdrop.
 */

:root {
  --bg: #07000d;
  --bg-2: #14021f;
  --ink: #f0eaf6;
  --muted: #9c8fb1;
  --pink: #ff2da8;
  --cyan: #25e3ff;
  --lime: #b8ff3d;
  --line: rgba(255,45,168,0.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 ui-monospace, "JetBrains Mono", "Menlo", monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink); }

.grid-bg {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,45,168,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,227,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -2;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,45,168,0.18), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(37,227,255,0.16), transparent 40%);
  pointer-events: none;
}

/* HUD strip */
.hud {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 24px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.hud-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.tag { color: var(--muted); }
.tag.pink { color: var(--pink); }
.tag.cyan { color: var(--cyan); }
.tag.lime { color: var(--lime); }

main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }

.kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cyan);
  margin-bottom: 16px;
}

/* hero */
.hero { padding: 64px 0; }
.hero h1 {
  font-size: clamp(48px, 9vw, 112px);
  font-weight: 900;
  font-family: ui-sans-serif, "Helvetica Neue", system-ui, sans-serif;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 24px;
}

/* glitch */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.glitch::before {
  color: var(--pink);
  transform: translate(-3px, 2px);
  animation: glitch1 3.6s infinite steps(1);
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
}
.glitch::after {
  color: var(--cyan);
  transform: translate(3px, -2px);
  animation: glitch2 3.6s infinite steps(1);
  mix-blend-mode: screen;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}
@keyframes glitch1 {
  0%,90%,100% { transform: translate(-3px, 2px); }
  92%         { transform: translate(2px, -1px); clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); }
  94%         { transform: translate(-2px, 3px); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
}
@keyframes glitch2 {
  0%,90%,100% { transform: translate(3px, -2px); }
  92%         { transform: translate(-2px, 1px); clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
  94%         { transform: translate(2px, -3px); clip-path: polygon(0 75%, 100% 75%, 100% 95%, 0 95%); }
}

.hero .sub {
  font-size: 22px;
  font-weight: 400;
  font-family: ui-sans-serif, system-ui;
  color: var(--muted);
  max-width: 640px;
  margin-bottom: 32px;
  line-height: 1.45;
}
.hl { color: var(--lime); font-weight: 600; }

.terminal {
  display: block;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--pink);
  padding: 20px 24px;
  margin-bottom: 32px;
  font-size: 14px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.terminal .line { display: block; margin-bottom: 6px; color: var(--ink); }
.terminal .line.ok { color: var(--lime); margin-top: 12px; }
.terminal .pink { color: var(--pink); }
.terminal .cyan { color: var(--cyan); }
.terminal .lime { color: var(--lime); }

.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--pink);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 13px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: all 0.15s;
}
.btn:hover { background: var(--lime); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--cyan); }
.btn.ghost { background: transparent; color: var(--cyan); border: 1px solid var(--cyan); padding: 13px 27px; }
.btn.ghost:hover { background: var(--cyan); color: var(--bg); }

/* sections */
section { padding: 64px 0; }
section h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  font-family: ui-sans-serif, system-ui;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  line-height: 1.1;
}

/* protocol layers */
.layers {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.layer {
  background: rgba(20,2,31,0.7);
  border: 1px solid var(--line);
  padding: 24px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.layer:hover { border-color: var(--pink); }
.layer .num {
  position: absolute;
  top: 16px; right: 18px;
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.layer h3 {
  font-size: 16px;
  color: var(--pink);
  margin-bottom: 10px;
  font-weight: 700;
}
.layer p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* threat table */
.risk {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.risk th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(255,45,168,0.1);
  border-bottom: 1px solid var(--pink);
  color: var(--pink);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.risk td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.risk td.ok   { color: var(--lime); }
.risk td.warn { color: var(--pink); }

/* download grid */
.dlgrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dlcard {
  background: var(--bg-2);
  border: 1px solid var(--cyan);
  padding: 20px;
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: all 0.15s;
}
.dlcard:hover { background: var(--cyan); color: var(--bg); transform: translate(-2px, -2px); }
.dlcard .plat { display: block; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 4px; font-family: ui-sans-serif, system-ui; }
.dlcard:hover .plat { color: var(--bg); }
.dlcard .arch { display: block; font-size: 12px; color: var(--muted); }
.dlcard:hover .arch { color: var(--bg); }
.dlcard .ext  { display: block; font-size: 11px; color: var(--lime); margin-top: 8px; letter-spacing: 0.1em; }
.dlcard:hover .ext { color: var(--bg); }
.dlcard.ghost { border-color: var(--lime); }
.dlcard.ghost:hover { background: var(--lime); }

::selection { background: var(--pink); color: var(--bg); }

@media (max-width: 640px) {
  .hud-row { font-size: 9px; gap: 8px; }
}