@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(6px, -8px); } 100% { transform: translate(0, 0); } }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-mono);
  transition: background .25s, color .25s;
}

/* ===== pixel-pi logo glyph (reused in header + hero graphic) ===== */
.pt-logo-icon rect { fill: var(--accent); }

/* ===== header ===== */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  height: 62px;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--header-border);
}
.pt-brand { display: flex; align-items: center; gap: 11px; }
.pt-brand .pt-logo-icon { filter: drop-shadow(0 0 4px var(--accent)); }
.pt-brand span { font-weight: 700; font-size: 20px; letter-spacing: .08em; color: var(--text); }

nav { display: flex; gap: 30px; font-size: 14px; letter-spacing: .04em; }
a.pt-nav { color: var(--nav-color); text-decoration: none; }
a.pt-nav:hover { color: var(--accent); }

.pt-right { display: flex; align-items: center; gap: 16px; }
#themeBtn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--header-border);
  background: transparent;
  color: var(--text);
}
#clock { font-size: 13px; opacity: .65; }

/* ===== hero ===== */
.hero {
  position: relative;
  min-height: calc(100vh - 62px);
  overflow: hidden;
}
.hero-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 62%;
  overflow: hidden;
  z-index: 1;
  opacity: .4;
  mask-image: linear-gradient(to top, black 45%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, black 45%, transparent 88%);
}
.hero-floor .grid-h {
  position: absolute;
  inset: -46px 0;
  background-image: linear-gradient(var(--accent) 6px, transparent 6px);
  background-size: 100% 128px;
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom;
}
.hero-floor .grid-v {
  position: absolute;
  inset: -46px 0;
  background-image: linear-gradient(90deg, var(--accent) 6px, transparent 6px);
  background-size: 240px 100%;
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom;
}
.hero-horizon {
  position: absolute;
  left: 0; right: 0; bottom: 62%;
  height: 90px;
  z-index: 1;
  background: linear-gradient(to top, transparent, var(--page-bg));
}

.hero-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  height: calc(100vh - 62px);
  padding: 0 60px;
  box-sizing: border-box;
}

.hero-heading {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--heading);
}

.hero-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 340px;
  margin-top: 22px;
}

.hero-cta {
  font-size: 14px;
  color: var(--accent);
  letter-spacing: .12em;
  margin-top: 32px;
}
.hero-cta kbd {
  border: 1px solid var(--accent);
  padding: 2px 11px;
  margin: 0 4px;
  font-family: inherit;
}
.hero-cta .cursor {
  display: inline-block;
  width: 9px;
  height: 16px;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 8px;
  animation: blink 1s step-end infinite;
}

.hero-graphic {
  position: relative;
  height: 100%;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-14px);
}
.hero-connectors { position: absolute; inset: 0; }
.hero-connectors line { stroke: var(--accent); }
.hero-platform { position: absolute; }
.hero-platform svg path, .hero-platform svg polygon, .hero-platform svg circle { stroke: var(--accent); }
.hero-platform--center { left: 22%; top: 36%; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 0 7px var(--accent-glow)); }
.hero-platform--top-right { right: 14%; top: 14%; animation: floatB 7s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.hero-platform--bottom-left { left: 12%; bottom: 16%; animation: floatB 6s ease-in-out infinite .4s; filter: drop-shadow(0 0 6px var(--accent-glow)); }
.hero-pi-drift { position: absolute; top: 10%; left: 6%; animation: drift 9s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent)); }

/* ===== content sections ===== */
section.pt-section {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  padding: 70px 34px;
  border-top: 1px solid var(--section-border);
}
.pt-section-label { font-size: 13px; letter-spacing: .22em; color: var(--accent); margin-bottom: 8px; }
.pt-section-heading { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--heading); margin-bottom: 26px; }
.pt-dash {
  flex: 1;
  border: 1px dashed var(--dash-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .5;
  font-size: 15px;
}

/* ===== cookie banner (fixed DOS palette, unchanged across themes) ===== */
#cookieBanner {
  position: fixed;
  left: 20px; right: 20px; bottom: 20px;
  z-index: 60;
  background: var(--banner-bg);
  border: 2px solid var(--banner-ink);
  color: var(--banner-ink);
  font-family: var(--font-mono);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.cookie-title {
  background: var(--banner-ink);
  color: var(--banner-bg);
  font-weight: 700;
  text-align: center;
  padding: 4px;
  letter-spacing: .2em;
  font-size: 13px;
}
.cookie-body {
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}
.cookie-text { font-size: 14px; line-height: 1.5; max-width: 640px; }
.cookie-text .prompt { color: var(--banner-yellow); }
.cookie-text .muted { opacity: .8; }
.cookie-actions { display: flex; gap: 10px; }
.cookie-actions button { font-family: inherit; font-size: 14px; font-weight: 700; padding: 6px 16px; cursor: pointer; }
#cookieAccept { background: var(--banner-ink); color: var(--banner-bg); border: 2px solid var(--banner-ink); }
#cookieDecline { background: transparent; color: var(--banner-ink); border: 2px solid var(--banner-ink); }

/* ===== mobile ===== */
@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 18px;
    row-gap: 10px;
  }
  nav { order: 3; width: 100%; justify-content: center; gap: 18px; font-size: 13px; }

  .hero { min-height: auto; }
  .hero-body {
    grid-template-columns: 1fr;
    height: auto;
    padding: 48px 22px;
    gap: 48px;
    text-align: center;
  }
  .hero-heading { font-size: 38px; }
  .hero-desc { margin: 18px auto 0; }
  .hero-cta { margin-bottom: 8px; }
  .hero-graphic { transform: scale(.72); }

  section.pt-section { padding: 48px 20px; min-height: auto; }
}