/* cube2 floating 3D hero — styles for the static-site embed.
   All colors derive from a small seed set so you can retheme easily. */
.c2-live-hero .c2-hero {
  --c2-bg: #0a0a0c;
  --c2-fg: #f2f2f2;
  --c2-primary: #e4002b;
  --c2-accent: #ff2a45;
  --c2-surface: #141419;
  --c2-stage-outer: #050506;
  --c2-stage-inner: #141419;
  --c2-radius: 14px;
  --c2-type-scale: 1;
  --c2-glow: 0.5;

  --c2-muted: color-mix(in srgb, var(--c2-fg) 58%, transparent);
  --c2-border-strong: color-mix(in srgb, var(--c2-fg) 22%, transparent);
  --c2-glow-soft: color-mix(in srgb, var(--c2-primary) 40%, transparent);
  --c2-btn-bg: color-mix(in srgb, var(--c2-surface) 80%, transparent);

  --c2-font-display: "Orbitron", "Chakra Petch", Eurostile, Bahnschrift, ui-sans-serif, system-ui, sans-serif;
  --c2-font-body: "Chakra Petch", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  justify-items: center;
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;
  background: var(--c2-bg);
  color: var(--c2-fg);
  font-family: var(--c2-font-body);
  -webkit-font-smoothing: antialiased;
}
.c2-live-hero .c2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 32%, var(--c2-stage-inner) 0%, var(--c2-stage-outer) 62%, color-mix(in srgb, var(--c2-stage-outer) 55%, #000) 100%),
    radial-gradient(42% 42% at 50% 42%, var(--c2-glow-soft) 0%, transparent 70%);
  opacity: 1;
  pointer-events: none;
}
.c2-live-hero .c2-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.c2-live-hero .c2-stage {
  position: relative;
  z-index: 1;
  width: min(72vh, 92vw);
  height: min(72vh, 92vw);
  max-width: 760px;
  max-height: 760px;
  display: grid;
  place-items: center;
}
.c2-live-hero .c2-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

.c2-live-hero .c2-lockup {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: clamp(4px, 1.5vh, 18px);
}
.c2-live-hero .c2-wordmark {
  font-family: var(--c2-font-display);
  font-weight: 800;
  font-size: calc(clamp(2.4rem, 8vw, 5.2rem) * var(--c2-type-scale));
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--c2-fg);
}
.c2-live-hero .c2-wordmark-two { color: var(--c2-primary); }
.c2-live-hero .c2-tagline {
  margin: 0.7rem 0 0;
  font-size: clamp(0.82rem, 1.6vw, 1rem);
  letter-spacing: 0.02em;
  color: var(--c2-muted);
}

.c2-live-hero .c2-controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(14px, 3vh, 28px);
}
.c2-live-hero .c2-btn {
  font-family: var(--c2-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--c2-fg);
  background: var(--c2-btn-bg);
  border: 1px solid var(--c2-border-strong);
  border-radius: var(--c2-radius);
  padding: 10px 16px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}
.c2-live-hero .c2-btn:hover { border-color: var(--c2-fg); transform: translateY(-1px); }
.c2-live-hero .c2-btn:active { transform: translateY(1px); }
.c2-live-hero .c2-btn:focus-visible { outline: 2px solid var(--c2-accent); outline-offset: 2px; }
.c2-live-hero .c2-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.c2-live-hero .c2-btn-primary {
  background: color-mix(in srgb, var(--c2-primary) 88%, #000);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.c2-live-hero .c2-btn-primary:hover { background: var(--c2-primary); }

@media (max-width: 640px) {
.c2-live-hero .c2-stage { width: 92vw; height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
.c2-live-hero .c2-btn { transition: none; }
}

/* ---- CSS-3D fallback (used only when WebGL is unavailable) ---- */
.c2-live-hero .c2-cube3d-scene {
  position: relative;
  width: min(52vw, 300px);
  height: min(52vw, 300px);
  perspective: 1000px;
  display: grid;
  place-items: center;
}
.c2-live-hero .c2-cube3d {
  --s: 150px; --t: 75px;
  position: relative;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-34deg);
  animation: c2-float 7s ease-in-out infinite;
}
.c2-live-hero .c2-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--c2-fg) 12%, transparent);
  border-radius: 12px;
  background: linear-gradient(145deg, #16161b, #0a0a0d);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.65);
  backface-visibility: hidden;
}
.c2-live-hero .c2-front { transform: translateZ(var(--t)); background: linear-gradient(145deg, #101014, #08080a); }
.c2-live-hero .c2-right { transform: rotateY(90deg) translateZ(var(--t)); background: linear-gradient(145deg, #0c0c10, #060608); }
.c2-live-hero .c2-top { transform: rotateX(90deg) translateZ(var(--t)); background: linear-gradient(145deg, #1c1c22, #0f0f13); }
.c2-live-hero .c2-left { transform: rotateY(-90deg) translateZ(var(--t)); }
.c2-live-hero .c2-back { transform: rotateY(180deg) translateZ(var(--t)); }
.c2-live-hero .c2-bottom { transform: rotateX(-90deg) translateZ(var(--t)); }
.c2-live-hero .c2-mark { width: 62%; height: 62%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c2-primary) 60%, transparent)); }
.c2-live-hero .c2-face-word { font-family: var(--c2-font-display); font-weight: 800; font-size: calc(1.5rem * var(--c2-type-scale)); letter-spacing: -0.02em; color: var(--c2-fg); }
.c2-live-hero .c2-cube3d-shadow {
  position: absolute; bottom: 6%; left: 50%;
  width: 60%; height: 16px; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 70%);
  filter: blur(6px);
}
@keyframes c2-float {
  0%, 100% { transform: rotateX(-22deg) rotateY(-34deg) translateY(-6px); }
  50% { transform: rotateX(-22deg) rotateY(-28deg) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
.c2-live-hero .c2-cube3d { animation: none; }
}