/* Movement Cube — Interactive 3D Logo */

:root {
  --mc-red: #c8102e;
  --mc-red-light: #e63a52;
  --mc-blue: #1d6fb8;
  --mc-blue-light: #3aa0e0;
  --mc-purple: #a855f7;
  --mc-bg: #0a0d12;
  --mc-ink: #e9edf3;
  --mc-mute: #8b95a3;
  --mc-line: rgba(255,255,255,0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--mc-bg);
  color: var(--mc-ink);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  height: 100vh; width: 100vw;
}

.stage {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--stage-bg, #ffffff);
  overflow: hidden;
  transition: background 0.5s ease;
}
.stage.dark {
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255,255,255,0.04), transparent 70%),
    #0d1b2a;
}
.stage.dark::before { display: none; }
.bg-lottie {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.bg-lottie svg { width: 100% !important; height: 100% !important; }
.stage > *:not(.bg-lottie):not(.panel-overlay):not(.diamond-zoomer) { position: relative; z-index: 1; }
.stage.dark::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}

.brand {
  position: fixed; top: 32px; left: 32px; z-index: 50;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none;
}
.brand-mark {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  letter-spacing: 0.06em; font-size: 18px;
  color: var(--brand-ink, #1a1f29);
}
.brand-sub {
  font-family: 'Oswald', sans-serif; font-weight: 300;
  letter-spacing: 0.18em; font-size: 11px;
  color: var(--brand-mute, #6b7280);
  text-transform: uppercase;
}
.stage.dark .brand-mark { color: #fff; }
.stage.dark .brand-sub  { color: var(--mc-mute); }

.hint {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%); z-index: 40;
  font-family: 'Oswald', sans-serif; font-weight: 300;
  letter-spacing: 0.24em; font-size: 11px;
  color: var(--brand-mute, #9ca3af); text-transform: uppercase;
  text-align: center; transition: opacity 0.4s ease;
}
.stage.dark .hint { color: rgba(255,255,255,0.45); }
.hint.dim { opacity: 0; }

/* === Logo cube stage ===
   The original logo is 2986x1582 with the cube occupying roughly:
   x: 31%–69%  (cube width = 38% of image width = ~1135px)
   y: 4%–71%   (cube height = 67% of image height = ~1060px)
   Cube area aspect ~ 1135/1060 ≈ 1.07 (nearly square, slightly wide).
   
   We render the image at a size such that the cube area exactly fills the
   .logo-cube-area inner element. Hotspots are positioned inside that area
   in % of the cube area (not the full image).
*/
.logo-stage {
  position: relative;
  width: min(96vw, 1200px);
  height: min(80vh, 700px);
  display: grid; place-items: center;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.5s ease;
}
.logo-stage.focused {
  transform: scale(0.5) translate(-90%, -70%);
  opacity: 0.45;
}

.logo-tilt-wrap {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  animation: cube-float 7s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}
@keyframes cube-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

.logo-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2986 / 1582;
  max-height: 100%;
}
.logo-img {
  width: 100%; height: 100%;
  display: block; object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.35))
          drop-shadow(0 0 90px rgba(255,255,255,0.18));
  pointer-events: none;
}

/* === Quad hotspots === */
.hot-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 5;
}
.hot-quad-fill {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  pointer-events: auto;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.hot-quad.outlined .hot-quad-fill {
  fill: color-mix(in oklab, var(--hot-color) 22%, transparent);
  stroke: var(--hot-color);
  cursor: grab;
}
.hot-quad.outlined.selected .hot-quad-fill {
  fill: color-mix(in oklab, var(--hot-color) 35%, transparent);
  stroke-width: 0.6;
}
.hot-quad.hover .hot-quad-fill {
  fill: color-mix(in oklab, var(--hot-color) 30%, transparent);
}

/* Corner handles (4 per selected quad) */
.hot-corner {
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border: 2px solid var(--hot-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  cursor: grab;
  z-index: 12;
}
.hot-corner:active { cursor: grabbing; }

/* Floating label that appears over centroid on hover */
.hot-label-float {
  position: absolute;
  transform: translate(-50%, calc(-50% - 32px));
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
  display: flex; gap: 8px; align-items: baseline;
}
.hot-label-float.show { opacity: 1; }
.hot-label-float .hot-num { opacity: 0.6; font-weight: 300; }
.hot-label-float .hot-name { font-weight: 600; }

/* === Diamond zoom-and-rotate transition === */
.dz-shape {
  position: absolute;
  left: var(--dz-x); top: var(--dz-y);
  width: var(--dz-size); height: var(--dz-size);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--dz-color) 95%, #fff) 0%,
    color-mix(in oklab, var(--dz-color) 70%, #000) 100%);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transform-origin: center center;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 60px 10px color-mix(in oklab, var(--dz-color) 60%, transparent);
  transition:
    transform 0.85s cubic-bezier(.5,0,.2,1),
    width 0.85s cubic-bezier(.5,0,.2,1),
    height 0.85s cubic-bezier(.5,0,.2,1),
    clip-path 0.6s ease 0.4s,
    box-shadow 0.6s ease,
    opacity 0.4s ease;
  opacity: 0;
}
.diamond-zoomer.phase-opening .dz-shape,
.diamond-zoomer.phase-open .dz-shape {
  opacity: 1;
  width: 220vmax; height: 220vmax;
  transform: translate(-50%, -50%) rotate(540deg) scale(1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  box-shadow: 0 0 0 0 transparent;
}
.diamond-zoomer.phase-closing .dz-shape {
  opacity: 0;
  width: var(--dz-size); height: var(--dz-size);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition:
    transform 0.5s cubic-bezier(.5,0,.7,.5),
    width 0.5s cubic-bezier(.5,0,.7,.5),
    height 0.5s cubic-bezier(.5,0,.7,.5),
    clip-path 0.3s ease,
    opacity 0.4s ease 0.2s;
}
.dz-trail {
  position: absolute;
  left: var(--dz-x); top: var(--dz-y);
  width: var(--dz-size); height: var(--dz-size);
  transform: translate(-50%, -50%) rotate(0deg);
  pointer-events: none;
}
.diamond-zoomer.phase-opening .dz-trail {
  animation: dz-trail-spin 0.85s cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes dz-trail-spin {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1); opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) rotate(540deg) scale(8); opacity: 0; }
}
.dz-trail::before, .dz-trail::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid color-mix(in oklab, var(--dz-color) 70%, #fff);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.dz-trail::after {
  inset: -20%; opacity: 0.5;
  border-color: color-mix(in oklab, var(--dz-color) 50%, #fff);
}

/* === legacy flood (unused) === */
.dz-flood {
  position: fixed; inset: 0;
  background: radial-gradient(circle at var(--dz-x) var(--dz-y),
    color-mix(in oklab, var(--dz-color) 95%, #fff 8%) 0%,
    color-mix(in oklab, var(--dz-color) 88%, #000 5%) 35%,
    color-mix(in oklab, var(--dz-color) 60%, #000 20%) 75%,
    #04060a 100%);
  clip-path: circle(0px at var(--dz-x) var(--dz-y));
  transition: clip-path 0.7s cubic-bezier(.6,.0,.2,1);
}
.diamond-zoomer.phase-opening .dz-flood,
.diamond-zoomer.phase-open .dz-flood {
  clip-path: circle(180vmax at var(--dz-x) var(--dz-y));
}
.diamond-zoomer.phase-closing .dz-flood {
  clip-path: circle(0px at var(--dz-x) var(--dz-y));
  transition: clip-path 0.5s cubic-bezier(.5,0,.7,.5);
}

/* === diamond zoomer container === */
.diamond-zoomer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 30;
  --dz-x: 50%;
  --dz-y: 50%;
  --dz-color: #c8102e;
  --dz-size: 70px;
}
/* Hide unused legacy shatter elements — markup not rendered in current panels.jsx */
.dz-veil, .dz-core, .dz-shard, .dz-flood { display: none; }

/* Color veil that radiates out from the diamond's position to fill the screen */
.dz-veil {
  position: fixed; inset: 0;
  background: radial-gradient(circle at var(--dz-x) var(--dz-y),
    color-mix(in oklab, var(--dz-color) 90%, #fff 5%) 0%,
    color-mix(in oklab, var(--dz-color) 80%, #000 5%) 35%,
    color-mix(in oklab, var(--dz-color) 50%, #000 25%) 70%,
    #04060a 100%);
  clip-path: circle(0px at var(--dz-x) var(--dz-y));
  transition: clip-path 0.7s cubic-bezier(.5,0,.2,1) 0.1s;
}
.diamond-zoomer.phase-opening .dz-veil,
.diamond-zoomer.phase-open .dz-veil {
  clip-path: circle(180vmax at var(--dz-x) var(--dz-y));
}
.diamond-zoomer.phase-closing .dz-veil {
  clip-path: circle(0px at var(--dz-x) var(--dz-y));
  transition: clip-path 0.45s cubic-bezier(.5,0,.7,.5);
}

/* The original diamond core — flashes white then implodes/disappears as shards fly */
.dz-core {
  position: absolute;
  left: var(--dz-x); top: var(--dz-y);
  width: var(--dz-size); height: var(--dz-size);
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--dz-color) 90%, #fff 30%) 0%,
    color-mix(in oklab, var(--dz-color) 70%, #000 10%) 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 80px 20px color-mix(in oklab, var(--dz-color) 70%, transparent);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.2s ease, box-shadow 0.3s ease;
}
.diamond-zoomer.phase-opening .dz-core,
.diamond-zoomer.phase-open .dz-core {
  /* Quick flash + implode */
  animation: dz-core-flash 0.55s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes dz-core-flash {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1);   opacity: 1; filter: brightness(1.1); }
  35%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.6); opacity: 1; filter: brightness(2.5); box-shadow: 0 0 140px 50px color-mix(in oklab, var(--dz-color) 90%, #fff); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.2); opacity: 0; filter: brightness(1); }
}

/* 12 triangular shards — they fly outward in different directions while spinning */
.dz-shard {
  position: absolute;
  left: var(--dz-x); top: var(--dz-y);
  width: calc(var(--dz-size) * 0.7);
  height: calc(var(--dz-size) * 0.7);
  background: linear-gradient(140deg,
    color-mix(in oklab, var(--dz-color) 95%, #fff 15%) 0%,
    color-mix(in oklab, var(--dz-color) 70%, #000 15%) 60%,
    color-mix(in oklab, var(--dz-color) 40%, #000 30%) 100%);
  clip-path: polygon(50% 0%, 100% 60%, 50% 100%, 0% 60%);
  box-shadow: 0 0 18px color-mix(in oklab, var(--dz-color) 60%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
  transform-origin: center center;
}
.diamond-zoomer.phase-opening .dz-shard,
.diamond-zoomer.phase-open .dz-shard {
  animation: dz-shard-fly 0.8s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes dz-shard-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--start-rot,0deg)) translateX(0) rotate(0deg) scale(0.4); }
  15%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--start-rot,0deg)) translateX(110vmax) rotate(var(--spin,720deg)) scale(0.6); }
}

/* Spread shards in 12 directions with varied spin + slight delay/duration jitter */
.dz-shard-0  { --start-rot:   0deg; --spin:  900deg; animation-delay: 0.00s; }
.dz-shard-1  { --start-rot:  30deg; --spin: -540deg; animation-delay: 0.04s; }
.dz-shard-2  { --start-rot:  60deg; --spin:  720deg; animation-delay: 0.02s; }
.dz-shard-3  { --start-rot:  90deg; --spin: 1080deg; animation-delay: 0.05s; }
.dz-shard-4  { --start-rot: 120deg; --spin: -720deg; animation-delay: 0.01s; }
.dz-shard-5  { --start-rot: 150deg; --spin:  540deg; animation-delay: 0.06s; }
.dz-shard-6  { --start-rot: 180deg; --spin:  900deg; animation-delay: 0.03s; }
.dz-shard-7  { --start-rot: 210deg; --spin: -1080deg; animation-delay: 0.05s; }
.dz-shard-8  { --start-rot: 240deg; --spin:  720deg; animation-delay: 0.02s; }
.dz-shard-9  { --start-rot: 270deg; --spin: -540deg; animation-delay: 0.04s; }
.dz-shard-10 { --start-rot: 300deg; --spin:  900deg; animation-delay: 0.00s; }
.dz-shard-11 { --start-rot: 330deg; --spin: -720deg; animation-delay: 0.06s; }

/* Vary shard sizes for organic feel */
.dz-shard-1, .dz-shard-5, .dz-shard-9  { width: calc(var(--dz-size) * 0.5); height: calc(var(--dz-size) * 0.5); }
.dz-shard-3, .dz-shard-7, .dz-shard-11 { width: calc(var(--dz-size) * 0.9); height: calc(var(--dz-size) * 0.9); }

/* On close, hide shards immediately */
.diamond-zoomer.phase-closing .dz-shard,
.diamond-zoomer.phase-closing .dz-core { opacity: 0; animation: none; transition: opacity 0.2s ease; }

/* The other diamonds + logo recede */
.stage:has(.diamond-zoomer.phase-opening) .logo-stage,
.stage:has(.diamond-zoomer.phase-open) .logo-stage {
  transform: scale(0.85);
  opacity: 0.18;
  filter: blur(3px);
  transition: transform 0.65s cubic-bezier(.4,0,.2,1), opacity 0.5s ease, filter 0.5s ease;
}

/* Panel timing — side-drawer transform is defined below; just delay it so the diamond zoom plays first */
.panel-overlay.phase-opening,
.panel-overlay.phase-closing { pointer-events: none; }
.panel-overlay .panel { transition: transform 0.6s cubic-bezier(.2,.8,.2,1) 0.5s; }
.panel-overlay.phase-closing .panel { transition: transform 0.4s cubic-bezier(.5,0,.7,.5); }

/* Hide old portal styles */
.portal-veil { display: none; }

/* Legacy classes (no longer used but keep selectors harmless) */
.hot-resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid var(--hot-color);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  z-index: 11;
}

/* Rotation handle — small circle above the box */
.hot-rotate-handle {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--hot-color);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  cursor: alias;
  z-index: 11;
}
.hot-rotate-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 14px;
  background: var(--hot-color);
  transform: translateX(-50%);
}

/* Pulsing outer ring — always faintly visible to invite interaction */
.hot-pulse {
  position: absolute;
  inset: 0;
  transform: rotate(45deg) scale(0.78);
  background: transparent;
  box-shadow: 0 0 0 0 var(--hot-color);
  opacity: 0;
  pointer-events: none;
  animation: pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pulse {
  0%   { opacity: 0; box-shadow: 0 0 0 0 var(--hot-color); transform: rotate(45deg) scale(0.78); }
  60%  { opacity: 0.5; box-shadow: 0 0 30px 8px var(--hot-color); transform: rotate(45deg) scale(0.95); }
  100% { opacity: 0; box-shadow: 0 0 60px 16px var(--hot-color); transform: rotate(45deg) scale(1.05); }
}

.hotspot:not(.outlined):hover .hot-rhombus,
.hotspot:not(.outlined).active .hot-rhombus {
  border-color: rgba(255,255,255,0.95);
  transform: rotate(45deg) scale(0.92);
  box-shadow:
    0 0 30px var(--hot-color),
    inset 0 0 20px rgba(255,255,255,0.3);
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,0.25) 0%, transparent 60%);
}

/* Hover label — floats above the diamond */
.hot-label {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
.hotspot:hover .hot-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.hot-num {
  font-family: 'Oswald', sans-serif; font-weight: 300;
  font-size: 10px; letter-spacing: 0.32em;
  color: rgba(255,255,255,0.7);
}
.hot-name {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: 0.16em;
  color: #fff; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8),
               0 0 24px var(--hot-color);
  padding: 4px 12px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--hot-color);
  backdrop-filter: blur(6px);
}

/* When this hotspot is the one being focused — shoot effect during transition */
.hotspot.focused .hot-rhombus {
  animation: shoot 0.7s cubic-bezier(.4,0,.2,1) forwards;
  border-color: #fff;
  background: var(--hot-color);
}
@keyframes shoot {
  0%   { transform: rotate(45deg) scale(0.78); }
  40%  { transform: rotate(45deg) scale(1.4); box-shadow: 0 0 80px var(--hot-color); }
  100% { transform: rotate(45deg) scale(8); opacity: 0; }
}

/* === Panel overlay === */
.panel-overlay {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.panel-overlay.phase-open { pointer-events: auto; }

.panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.5s ease;
}
.panel-overlay.phase-open .panel-backdrop,
.panel-overlay.phase-opening .panel-backdrop { opacity: 1; }

.panel {
  position: relative;
  width: min(640px, 92vw); height: 100vh;
  background: linear-gradient(180deg, #11151c 0%, #0a0d12 100%);
  border-left: 1px solid var(--panel-accent, var(--mc-red));
  box-shadow: -40px 0 80px rgba(0,0,0,0.6);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  padding: 64px 56px 80px;
}
.panel-overlay.phase-open .panel { transform: translateX(0); }

.panel-accent-bar {
  position: absolute; top: 0; left: 0;
  width: 6px; height: 100%;
  background: var(--panel-accent, var(--mc-red));
  box-shadow: 0 0 40px var(--panel-accent, var(--mc-red));
}

.panel-close {
  position: absolute; top: 24px; right: 24px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.panel-close:hover { background: rgba(255,255,255,0.12); transform: rotate(90deg); }

.panel-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Oswald', sans-serif; font-weight: 300;
  letter-spacing: 0.32em; font-size: 11px;
  color: var(--panel-accent, var(--mc-red));
  text-transform: uppercase; margin-bottom: 14px;
}
.panel-eyebrow .num {
  display: inline-block; padding: 2px 8px;
  border: 1px solid currentColor; border-radius: 2px; font-weight: 600;
}
.panel-title {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 64px; line-height: 0.95;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; margin: 0 0 8px;
}
.panel-tagline {
  font-family: 'Oswald', sans-serif; font-weight: 300;
  font-size: 16px; letter-spacing: 0.08em;
  color: var(--mc-mute); text-transform: uppercase;
  margin: 0 0 32px;
}
.panel-price {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px;
}
.panel-price .amount {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 56px; color: #fff; letter-spacing: 0.02em;
}
.panel-price .unit { font-size: 13px; color: var(--mc-mute); }
.panel-meta { font-size: 13px; color: var(--mc-mute); margin-bottom: 36px; }

.panel-section-title {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.18em; font-size: 12px;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
  margin: 36px 0 16px; padding-bottom: 8px;
  border-bottom: 1px solid var(--mc-line);
}
.bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.bullet-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px; line-height: 1.5; color: var(--mc-ink);
}
.bullet-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px;
  background: var(--panel-accent, var(--mc-red)); transform: rotate(45deg);
}
.fit-line {
  margin-top: 28px; padding: 16px 18px;
  border: 1px solid var(--mc-line);
  border-left: 3px solid var(--panel-accent, var(--mc-red));
  background: rgba(255,255,255,0.02);
  font-size: 14px;
}
.fit-line strong {
  color: var(--panel-accent, var(--mc-red));
  font-family: 'Oswald', sans-serif; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 11px;
  display: block; margin-bottom: 4px;
}
.cta-row { margin-top: 40px; display: flex; gap: 12px; }
.cta {
  flex: 1; padding: 16px 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.18em; font-size: 12px; text-transform: uppercase;
  border: 1px solid var(--panel-accent, var(--mc-red));
  background: var(--panel-accent, var(--mc-red));
  color: #fff; cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
.cta.ghost { background: transparent; color: #fff; }
.cta.ghost:hover { background: rgba(255,255,255,0.05); }

.sub-card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sub-card {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--mc-line);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sub-card:hover { background: rgba(255,255,255,0.04); border-color: var(--panel-accent, var(--mc-red)); }
.sub-card .sc-name {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.06em; font-size: 16px; color: #fff;
  text-transform: uppercase; grid-column: 1 / 2;
}
.sub-card .sc-price {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 22px; color: var(--panel-accent, var(--mc-red));
  grid-column: 2 / 3;
}
.sub-card .sc-desc {
  grid-column: 1 / 3; font-size: 13px; color: var(--mc-mute); line-height: 1.5;
}

.panel.reset    { --panel-accent: #e63a52; }
.panel.rebuild  { --panel-accent: #3aa0e0; }
.panel.restore  { --panel-accent: var(--mc-red); }
.panel.prolozone{ --panel-accent: #a855f7; }
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }