.home-hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
}

.home-hero-panel,
.media-panel {
  display: grid;
  align-content: start;
  gap: 18px;
}

.home-metrics {
  padding-top: 0;
}

.home-metrics::before {
  display: none;
}

.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  display: grid;
  align-content: center;
  padding-top: 8px;
}

.metric-card:nth-child(1) {
  border-color: rgba(215, 189, 134, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 245, 214, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(215, 189, 134, 0.12), rgba(255, 214, 120, 0.04) 60%, rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 30, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 54px rgba(0, 0, 0, 0.3),
    0 0 32px rgba(215, 189, 134, 0.18);
}

.metric-card:nth-child(2) {
  border-color: rgba(194, 76, 112, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 234, 244, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(194, 76, 112, 0.14), rgba(255, 140, 176, 0.04) 60%, rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 30, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 54px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(194, 76, 112, 0.18);
}

.metric-card:nth-child(3) {
  border-color: rgba(214, 223, 240, 0.18);
  background:
    linear-gradient(180deg, rgba(240, 245, 255, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(176, 194, 255, 0.12), rgba(214, 223, 240, 0.06) 60%, rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 30, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 54px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(176, 194, 255, 0.16);
}

.metric-card:nth-child(4) {
  border-color: rgba(140, 231, 216, 0.2);
  background:
    linear-gradient(180deg, rgba(230, 255, 248, 0.08), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(140, 231, 216, 0.14), rgba(118, 255, 205, 0.04) 60%, rgba(255, 255, 255, 0.02)),
    rgba(11, 18, 30, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 54px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(140, 231, 216, 0.18);
}

.metric-card:nth-child(1) .metric-value {
  color: #f4da88;
  text-shadow: 0 0 18px rgba(215, 189, 134, 0.24);
}

.metric-card:nth-child(2) .metric-value {
  color: #ff9eb9;
  text-shadow: 0 0 18px rgba(194, 76, 112, 0.24);
}

.metric-card:nth-child(3) .metric-value {
  color: #e4ebff;
  text-shadow: 0 0 18px rgba(176, 194, 255, 0.2);
}

.metric-card:nth-child(4) .metric-value {
  color: #aef3c8;
  text-shadow: 0 0 18px rgba(140, 231, 216, 0.22);
}

.metric-card .metric-copy {
  color: rgba(225, 233, 246, 0.8);
}

.metric-card:hover {
  transform: translateY(-3px);
}

.metric-card:nth-child(1):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 62px rgba(0, 0, 0, 0.34),
    0 0 38px rgba(215, 189, 134, 0.22);
}

.metric-card:nth-child(2):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 62px rgba(0, 0, 0, 0.34),
    0 0 40px rgba(194, 76, 112, 0.22);
}

.metric-card:nth-child(3):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 62px rgba(0, 0, 0, 0.34),
    0 0 36px rgba(176, 194, 255, 0.2);
}

.metric-card:nth-child(4):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 30px 62px rgba(0, 0, 0, 0.34),
    0 0 40px rgba(140, 231, 216, 0.22);
}

html[data-theme="light"] .metric-card {
  border-color: rgba(96, 118, 148, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 247, 252, 0.74)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(232, 239, 247, 0.1) 58%, rgba(255, 255, 255, 0.08)),
    rgba(247, 251, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 24px 42px rgba(56, 74, 103, 0.09),
    0 0 22px rgba(104, 143, 226, 0.07);
}

html[data-theme="light"] .metric-card .metric-copy {
  color: rgba(62, 77, 98, 0.82);
}

html[data-theme="light"] .metric-card:nth-child(1) .metric-value {
  color: #ab7b1f;
  text-shadow: 0 0 14px rgba(171, 123, 31, 0.12);
}

html[data-theme="light"] .metric-card:nth-child(2) .metric-value {
  color: #b74468;
  text-shadow: 0 0 14px rgba(183, 68, 104, 0.12);
}

html[data-theme="light"] .metric-card:nth-child(3) .metric-value {
  color: #576fa6;
  text-shadow: 0 0 14px rgba(87, 111, 166, 0.12);
}

html[data-theme="light"] .metric-card:nth-child(4) .metric-value {
  color: #267f69;
  text-shadow: 0 0 14px rgba(38, 127, 105, 0.12);
}

html[data-theme="light"] .metric-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 28px 56px rgba(56, 74, 103, 0.12),
    0 0 26px rgba(104, 143, 226, 0.1),
    0 0 14px rgba(188, 70, 85, 0.05);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(1) {
  border-color: rgba(188, 70, 85, 0.16);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 238, 242, 0.86) 34%, rgba(247, 231, 236, 0.78)),
    linear-gradient(135deg, rgba(255, 232, 214, 0.22), rgba(255, 255, 255, 0.18) 48%, rgba(255, 182, 152, 0.14)),
    rgba(255, 242, 246, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(96, 112, 145, 0.11),
    0 0 18px rgba(255, 178, 121, 0.08),
    0 0 14px rgba(188, 70, 85, 0.08);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(2) {
  border-color: rgba(188, 70, 85, 0.18);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 232, 239, 0.86) 34%, rgba(247, 225, 233, 0.8)),
    linear-gradient(135deg, rgba(255, 210, 221, 0.28), rgba(255, 255, 255, 0.18) 48%, rgba(255, 143, 171, 0.18)),
    rgba(255, 241, 245, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(96, 112, 145, 0.11),
    0 0 20px rgba(188, 70, 85, 0.12),
    0 0 14px rgba(255, 133, 164, 0.08);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(3) {
  border-color: rgba(188, 70, 85, 0.14);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 236, 241, 0.86) 34%, rgba(243, 231, 239, 0.78)),
    linear-gradient(135deg, rgba(223, 233, 255, 0.2), rgba(255, 255, 255, 0.18) 48%, rgba(255, 192, 210, 0.14)),
    rgba(255, 242, 246, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(96, 112, 145, 0.11),
    0 0 16px rgba(104, 143, 226, 0.08),
    0 0 12px rgba(188, 70, 85, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(4) {
  border-color: rgba(188, 70, 85, 0.14);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 237, 241, 0.86) 34%, rgba(241, 230, 236, 0.78)),
    linear-gradient(135deg, rgba(215, 245, 238, 0.16), rgba(255, 255, 255, 0.18) 48%, rgba(255, 190, 207, 0.14)),
    rgba(255, 242, 246, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 34px rgba(96, 112, 145, 0.11),
    0 0 16px rgba(110, 242, 214, 0.06),
    0 0 12px rgba(188, 70, 85, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(1) .metric-value {
  color: #b67a1f;
  text-shadow: 0 0 14px rgba(215, 189, 134, 0.16);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(2) .metric-value {
  color: #c03b63;
  text-shadow: 0 0 14px rgba(194, 76, 112, 0.18);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(3) .metric-value {
  color: #5d73a9;
  text-shadow: 0 0 14px rgba(176, 194, 255, 0.14);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(4) .metric-value {
  color: #317d6f;
  text-shadow: 0 0 14px rgba(140, 231, 216, 0.14);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card .metric-copy {
  color: rgba(74, 86, 108, 0.86);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(1):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    0 20px 38px rgba(96, 112, 145, 0.14),
    0 0 20px rgba(255, 178, 121, 0.1),
    0 0 16px rgba(188, 70, 85, 0.08);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(2):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    0 20px 38px rgba(96, 112, 145, 0.14),
    0 0 22px rgba(188, 70, 85, 0.12),
    0 0 16px rgba(255, 133, 164, 0.08);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(3):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    0 20px 38px rgba(96, 112, 145, 0.14),
    0 0 18px rgba(104, 143, 226, 0.1),
    0 0 14px rgba(188, 70, 85, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .metric-card:nth-child(4):hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.97),
    0 20px 38px rgba(96, 112, 145, 0.14),
    0 0 18px rgba(110, 242, 214, 0.08),
    0 0 14px rgba(188, 70, 85, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel {
  border-color: rgba(188, 70, 85, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 236, 241, 0.86) 28%, rgba(244, 228, 235, 0.78)),
    linear-gradient(138deg, rgba(227, 236, 255, 0.18), rgba(255, 211, 221, 0.22) 42%, rgba(255, 161, 184, 0.16) 76%, rgba(255, 113, 148, 0.08)),
    rgba(255, 242, 246, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 22px 42px rgba(96, 112, 145, 0.12),
    0 0 22px rgba(188, 70, 85, 0.1),
    0 0 16px rgba(104, 143, 226, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-item {
  border: 1px solid rgba(188, 70, 85, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 236, 241, 0.82)),
    linear-gradient(135deg, rgba(227, 236, 255, 0.14), rgba(255, 214, 224, 0.18) 62%, rgba(255, 157, 179, 0.12)),
    rgba(255, 242, 246, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 24px rgba(96, 112, 145, 0.08),
    0 0 14px rgba(188, 70, 85, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-item:hover {
  border-color: rgba(188, 70, 85, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 28px rgba(96, 112, 145, 0.1),
    0 0 18px rgba(188, 70, 85, 0.09);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .hero-highlights span {
  border-color: rgba(188, 70, 85, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 236, 241, 0.84)),
    linear-gradient(135deg, rgba(227, 236, 255, 0.15), rgba(255, 214, 224, 0.2) 58%, rgba(255, 157, 179, 0.12)),
    rgba(255, 242, 246, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(96, 112, 145, 0.08),
    0 0 16px rgba(188, 70, 85, 0.07);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn {
  border-color: rgba(188, 70, 85, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 236, 241, 0.84)),
    linear-gradient(135deg, rgba(227, 236, 255, 0.14), rgba(255, 214, 224, 0.18) 60%, rgba(255, 157, 179, 0.12)),
    rgba(255, 242, 246, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 28px rgba(96, 112, 145, 0.09),
    0 0 14px rgba(188, 70, 85, 0.07);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn-primary {
  border-color: rgba(188, 70, 85, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 214, 224, 0.3), rgba(255, 255, 255, 0.22) 52%, rgba(255, 154, 178, 0.22)),
    rgba(255, 242, 246, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 30px rgba(96, 112, 145, 0.1),
    0 0 18px rgba(188, 70, 85, 0.1),
    0 0 12px rgba(104, 143, 226, 0.06);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn-secondary {
  border-color: rgba(188, 70, 85, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 236, 241, 0.84)),
    linear-gradient(135deg, rgba(227, 236, 255, 0.14), rgba(255, 214, 224, 0.18) 58%, rgba(255, 157, 179, 0.12)),
    rgba(255, 242, 246, 0.76);
}

.home-route .split-grid,
.home-cta .contact-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
}

.media-panel .tag-row {
  margin-bottom: 4px;
}

.contact-video {
  margin-top: 6px;
}

.server-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
}

.server-tag {
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.team-grid .card {
  min-height: 100%;
}

.mini-stat-row {
  display: grid;
  gap: 14px;
}

.mini-stat {
  padding: 16px 18px;
  border: 1px solid rgba(214, 223, 240, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(255, 255, 255, 0.015);
}

.mini-stat-value {
  color: var(--accent-strong);
}

@media (max-width: 1080px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-route .split-grid,
  .home-cta .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .home-hero-panel .hero-logo {
    width: min(100%, 280px);
  }

  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 620px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

html[data-theme-preset] .metric-card .metric-copy {
  color: var(--theme-metric-copy);
}

html[data-theme-preset] .metric-card:nth-child(1) {
  border-color: var(--theme-metric-1-border);
  background: var(--theme-metric-1-bg);
  box-shadow: var(--theme-metric-1-shadow);
}

html[data-theme-preset] .metric-card:nth-child(2) {
  border-color: var(--theme-metric-2-border);
  background: var(--theme-metric-2-bg);
  box-shadow: var(--theme-metric-2-shadow);
}

html[data-theme-preset] .metric-card:nth-child(3) {
  border-color: var(--theme-metric-3-border);
  background: var(--theme-metric-3-bg);
  box-shadow: var(--theme-metric-3-shadow);
}

html[data-theme-preset] .metric-card:nth-child(4) {
  border-color: var(--theme-metric-4-border);
  background: var(--theme-metric-4-bg);
  box-shadow: var(--theme-metric-4-shadow);
}

html[data-theme-preset] .metric-card:nth-child(1) .metric-value {
  color: var(--theme-metric-1-value);
  text-shadow: var(--theme-metric-1-value-shadow);
}

html[data-theme-preset] .metric-card:nth-child(2) .metric-value {
  color: var(--theme-metric-2-value);
  text-shadow: var(--theme-metric-2-value-shadow);
}

html[data-theme-preset] .metric-card:nth-child(3) .metric-value {
  color: var(--theme-metric-3-value);
  text-shadow: var(--theme-metric-3-value-shadow);
}

html[data-theme-preset] .metric-card:nth-child(4) .metric-value {
  color: var(--theme-metric-4-value);
  text-shadow: var(--theme-metric-4-value-shadow);
}

html[data-theme-preset] .metric-card:nth-child(1):hover {
  box-shadow: var(--theme-metric-1-hover-shadow);
}

html[data-theme-preset] .metric-card:nth-child(2):hover {
  box-shadow: var(--theme-metric-2-hover-shadow);
}

html[data-theme-preset] .metric-card:nth-child(3):hover {
  box-shadow: var(--theme-metric-3-hover-shadow);
}

html[data-theme-preset] .metric-card:nth-child(4):hover {
  box-shadow: var(--theme-metric-4-hover-shadow);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .lead {
  color: var(--theme-copy-lead);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .hero-highlights span {
  border-color: var(--theme-pill-border);
  background: var(--theme-pill-bg);
  color: var(--theme-pill-color);
  box-shadow: var(--theme-pill-shadow);
  text-shadow: var(--theme-pill-text-shadow);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-item {
  border-color: var(--theme-panel-border);
  background: var(--theme-panel-bg);
  box-shadow: var(--theme-panel-shadow);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-title {
  color: var(--theme-panel-heading);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-desc,
html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-panel .server-item p {
  color: var(--theme-panel-copy);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn {
  border-color: var(--theme-button-border);
  background: var(--theme-button-bg);
  color: var(--theme-button-color);
  box-shadow: var(--theme-button-shadow);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn-primary {
  border-color: var(--theme-button-primary-border);
  background: var(--theme-button-primary-bg);
  color: var(--theme-button-primary-color);
  box-shadow: var(--theme-button-primary-shadow);
}

html[data-theme-preset="cotton-candy-dark-ui"] .home-hero-grid .actions .btn-secondary {
  border-color: var(--theme-button-secondary-border);
  background: var(--theme-button-secondary-bg);
  color: var(--theme-button-secondary-color);
  box-shadow: var(--theme-button-shadow);
}