:root {
  --ink: #0d0d0d;
  --panel: #f2f2f2;
  --line: #d7d7d7;
  --lime: #e9fd67;
  --white: #ffffff;
}

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

html,
body {
  margin: 0;
  background: #D4A017;
  color: var(--ink);
  font-family: "Inter", sans-serif;
}

body.artists-preload::before,
body.artists-ready::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 280ms ease;
}

body.artists-preload::before {
  opacity: 1;
}

body.artists-ready::before {
  opacity: 0;
}

body.artists-preload .board {
  opacity: 0;
  transform: translateY(8px);
}

body.artists-ready .board {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}

.board-wrap {
  --board-scale: 1;
  min-height: 100vh;
  padding: 1.1rem;
  overflow-x: hidden;
}

.board {
  min-width: 1180px;
  width: 1180px;
  max-width: 1180px;
  margin: 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 28px;
  overflow: hidden;
  transform-origin: top center;
  transform: scale(var(--board-scale));
}

.board-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  backdrop-filter: blur(8px);
}

.logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.menu a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav-cta {
  text-decoration: none;
  color: var(--white);
  background: var(--ink);
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 1px;
  background: var(--line);
}

.card {
  background: var(--panel);
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-card {
  grid-column: span 5;
  padding: 2.2rem;
  background-image: url("https://github.com/cowboyblurr/KLEIO-ASSETS/blob/main/artistpagepic.png?raw=true");
  background-size: cover;
  background-position: center;
  color: var(--white);
  isolation: isolate;
}

.intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 0;
}

.intro-card > * {
  position: relative;
  z-index: 1;
}

.micro {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.intro-card h1 {
  margin: 0.8rem 0 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  font-weight: 900;
}

.intro-card p {
  margin-top: 1rem;
  max-width: 42ch;
  line-height: 1.65;
  font-weight: 500;
}

.button-main {
  margin-top: 1rem;
  display: inline-block;
  text-decoration: none;
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.25);
}

.metrics-card {
  grid-column: span 3;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.metric {
  padding: 1.2rem;
}

.metric span {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  animation: metric-number-float 3.4s ease-in-out infinite;
  will-change: transform, text-shadow;
}

.metric.dark span {
  animation-delay: 0.28s;
}

@keyframes metric-number-float {
  0%, 100% {
    transform: translateY(0);
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  }
}

.metric small {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.4;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.metric.neon {
  background: #FC8EAC;
}

.metric.dark {
  background: var(--ink);
  color: var(--white);
}

.hero-image-card {
  grid-column: span 4;
  min-height: 340px;
}

.image-fill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.fixed-top-image {
  background-image: url("https://github.com/cowboyblurr/KLEIO-ASSETS/blob/main/660eb99b2b92e1cf4de536c203bfdc5d.jpg?raw=true");
}

.philosophy-card {
  grid-column: span 8;
  min-height: 340px;
}

.syndicate-card {
  grid-column: span 4;
  min-height: 340px;
}

.glass {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  background: rgba(10, 10, 10, 0.75);
  color: var(--white);
  padding: 1.2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}

.glass.tight {
  inset: 1rem;
}

.glass h2,
.glass h3 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 900;
}

.glass p {
  margin: 0.8rem 0 0;
  line-height: 1.65;
}

.infra-card {
  grid-column: span 12;
  padding: 1.35rem;
}

.infra-card h2 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 900;
}

.pillar-list {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
}

.pillar {
  background: #ededed;
  border: 1px solid #d0d0d0;
  border-radius: 14px;
  padding: 0.8rem;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
  cursor: pointer;
}

.pillar h3 {
  margin: 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.pillar p {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
}

.pillar.is-active {
  border-color: #b8b8b8;
  background: #f6f6f6;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.infra-layout {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.infra-visual {
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  min-height: 290px;
  border: 1px solid #FC8EAC;
}

.infra-visual-fill {
  width: 100%;
  height: 100%;
  min-height: 290px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.24s ease;
}

.image-card {
  grid-column: span 5;
  min-height: 230px;
  background-size: cover;
  background-position: center;
}

@media (min-width: 981px) {
  .dashboard-grid {
    grid-template-areas:
      "intro intro intro intro intro metrics metrics metrics hero hero hero hero"
      "intro intro intro intro intro metrics metrics metrics hero hero hero hero"
      "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy syndicate syndicate syndicate syndicate"
      "philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy syndicate syndicate syndicate syndicate"
      "infra infra infra infra infra infra infra infra infra infra infra infra"
      "infra infra infra infra infra infra infra infra infra infra infra infra";
  }

  .intro-card { grid-area: intro; }
  .metrics-card { grid-area: metrics; }
  .hero-image-card { grid-area: hero; min-height: 0; }
  .philosophy-card { grid-area: philosophy; min-height: 0; }
  .syndicate-card { grid-area: syndicate; min-height: 0; }
  .infra-card { grid-area: infra; }
}


@media (max-width: 980px) {
  .board {
    margin: 0;
  }
}