:root {
  --g1: #8b5cf6; /* violet-500 */
  --g2: #3b82f6; /* blue-500 */
  --g3: #06b6d4; /* cyan-500 */
}

/* Layout */
.hero.center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
}

.branding .brand {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.25rem;
}

.branding .tagline {
  color: hsl(210 20% 85%);
  margin-top: 0;
}

.waitlist {
  width: 100%;
  max-width: 420px;
}
.waitlist .cf-turnstile { margin: 0.5rem 0 0.75rem; display: flex; justify-content: center; }

.auth-card {
  padding: 2rem;
  backdrop-filter: blur(10px);
  background: hsla(220, 20%, 12%, 0.85);
  border-radius: 1.25rem;
  border: 1px solid hsla(220, 40%, 60%, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.auth-card .footnote {
  color: hsl(210, 20%, 75%);
  margin: 0;
}

/* 8-Layer Book (decorative) */
.layer8-book {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 800px;
  animation: throb 2.8s ease-in-out infinite;
}

.layer8-book .layer {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: var(--w, 200px);
  height: var(--h, 18px);
  border-radius: 6px;
  border: 1px solid hsl(210 10% 70% / 0.6);
  box-shadow: 0 1px 2px hsl(210 20% 10% / 0.15);
  transform: rotateX(12deg) rotateZ(var(--rz, -3deg)) translateX(var(--tx, 0px));
  transform-origin: left center;
  background: linear-gradient(135deg, var(--c1, var(--g1)), var(--c2, var(--g2)), var(--c3, var(--g3)));
  overflow: hidden;
}

/* Layer offsets and distinct styling */
.layer8-book .l1 { top: 0px;   --w: 204px; --rz: -3deg; --tx: 0px;  --c1:#8b5cf6; --c2:#3b82f6; --c3:#06b6d4; }
.layer8-book .l2 { top: 18px;  --w: 192px; --rz: -2deg; --tx: -2px; --c1:#f59e0b; --c2:#fb7185; --c3:#f43f5e; }
.layer8-book .l3 { top: 36px;  --w: 212px; --rz: -4deg; --tx: 2px;  --c1:#14b8a6; --c2:#10b981; --c3:#22d3ee; }
.layer8-book .l4 { top: 54px;  --w: 198px; --rz: -3deg; --tx: 1px;  --c1:#06b6d4; --c2:#3b82f6; --c3:#6366f1; }
.layer8-book .l5 { top: 72px;  --w: 208px; --rz: -5deg; --tx: -1px; --c1:#a855f7; --c2:#ec4899; --c3:#f43f5e; }
.layer8-book .l6 { top: 90px;  --w: 196px; --rz: -2deg; --tx: 0px;  --c1:#84cc16; --c2:#22c55e; --c3:#14b8a6; }
.layer8-book .l7 { top: 108px; --w: 206px; --rz: -4deg; --tx: 3px;  --c1:#38bdf8; --c2:#60a5fa; --c3:#818cf8; }
.layer8-book .l8 { top: 126px; --w: 200px; --rz: -3deg; --tx: -2px; --c1:#0ea5e9; --c2:#9333ea; --c3:#3b82f6; }

/* Spine and pages details */
.layer8-book .layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent 30%),
              linear-gradient(90deg, rgba(0,0,0,0.08), rgba(255,255,255,0.12));
  border-right: 1px solid rgba(0,0,0,0.12);
  opacity: 0.9;
}

.layer8-book .layer::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 3px;
  bottom: 3px;
  width: 28px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.7) 0px,
    rgba(255,255,255,0.7) 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 3px
  );
  filter: blur(0.2px) saturate(0.9);
  opacity: 0.35;
}

/* Throbbing animation */
@keyframes throb {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 12px hsl(220 60% 40% / 0.12)); }
  50% { transform: scale(1.035); filter: drop-shadow(0 10px 18px hsl(260 60% 35% / 0.18)); }
}

/* Ripple the layers slightly out of phase for depth */
.layer8-book .layer { animation: layerPulse 2.8s ease-in-out infinite; }
.layer8-book .l1 { animation-delay: 0.00s; }
.layer8-book .l2 { animation-delay: 0.05s; }
.layer8-book .l3 { animation-delay: 0.10s; }
.layer8-book .l4 { animation-delay: 0.15s; }
.layer8-book .l5 { animation-delay: 0.20s; }
.layer8-book .l6 { animation-delay: 0.25s; }
.layer8-book .l7 { animation-delay: 0.30s; }
.layer8-book .l8 { animation-delay: 0.35s; }

@keyframes layerPulse {
  0%, 100% { transform: rotateX(12deg) rotateZ(var(--rz, -3deg)) translateX(var(--tx, 0px)) translateZ(0); }
  50% { transform: rotateX(12deg) rotateZ(var(--rz, -3deg)) translateX(var(--tx, 0px)) translateZ(4px); }
}

@media (max-width: 768px) {
  .layer8-book { width: 180px; height: 150px; }
  .layer8-book .layer { width: 164px; height: 16px; }
  .layer8-book .l2 { top: 16px; }
  .layer8-book .l3 { top: 32px; }
  .layer8-book .l4 { top: 48px; }
  .layer8-book .l5 { top: 64px; }
  .layer8-book .l6 { top: 80px; }
  .layer8-book .l7 { top: 96px; }
  .layer8-book .l8 { top: 112px; }
}

/* Dashboard */
.dashboard {
  padding: 4rem 0 6rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
}

.dashboard-kicker {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: hsl(210 40% 75%);
  margin-bottom: 0.25rem;
}

.dashboard-subtitle {
  margin-top: 0.5rem;
  color: hsl(210 20% 80%);
}

.dashboard-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, auto));
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: hsla(220, 28%, 16%, 0.7);
  border: 1px solid hsla(210, 60%, 60%, 0.15);
}

.dashboard-meta div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.meta-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  color: hsl(210 12% 70%);
}

.meta-value {
  font-size: 1.75rem;
  font-weight: 700;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}

.dashboard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 1.25rem;
  background: hsla(220, 28%, 14%, 0.85);
  border: 1px solid hsla(210, 60%, 60%, 0.18);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, hsla(220, 90%, 60%, 0.25), transparent 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.dashboard-card:hover,
.dashboard-card:focus-visible {
  transform: translateY(-6px);
  border-color: hsla(215, 90%, 72%, 0.5);
  box-shadow: 0 16px 40px hsla(216, 65%, 36%, 0.32);
}

.dashboard-card:hover::before,
.dashboard-card:focus-visible::before {
  opacity: 1;
}

.card-header h2 {
  margin: 0.35rem 0 0;
}

.card-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14rem;
  color: hsl(215 70% 70%);
}

.card-metric {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.metric-label {
  font-size: 0.95rem;
  color: hsl(210 15% 75%);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-list li {
  display: grid;
  gap: 0.25rem;
  font-size: 0.95rem;
}

.card-list li strong {
  font-size: 1.05rem;
}

.card-list .item-meta {
  color: hsl(215 14% 72%);
}

.card-list .empty {
  color: hsl(215 14% 65%);
  font-style: italic;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  background: hsla(215, 50%, 50%, 0.18);
  color: hsl(210 30% 85%);
  width: max-content;
}

.status-online { background: hsla(150, 60%, 45%, 0.2); color: hsl(150 60% 70%); }
.status-idle { background: hsla(45, 80%, 50%, 0.18); color: hsl(45 100% 70%); }
.status-in-progress { background: hsla(210, 90%, 56%, 0.2); color: hsl(210 80% 75%); }
.status-queued { background: hsla(280, 70%, 55%, 0.18); color: hsl(280 70% 75%); }
.status-connected { background: hsla(200, 80%, 55%, 0.18); color: hsl(200 70% 75%); }
.status-degraded { background: hsla(10, 80%, 55%, 0.18); color: hsl(10 80% 70%); }

.card-footer {
  margin-top: auto;
  font-weight: 600;
  color: hsl(210 40% 78%);
}

.dashboard-card:hover .card-footer,
.dashboard-card:focus-visible .card-footer {
  color: hsl(215 90% 80%);
}

@media (max-width: 960px) {
  .dashboard-meta {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard {
    padding: 3rem 0 4rem;
  }

  .dashboard-meta {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}