/*
 * ClutchHub v149 — technical corner language for every home section.
 * Purely visual: no layout, content, or interaction changes.
 */
.home-v3 {
  --ch-frame-blue: #b8cbe0;
  --ch-frame-blue-soft: rgba(184, 203, 224, 0.56);
  --ch-frame-orange: #ff5a18;
  --ch-frame-orange-soft: #ff9a67;
}

.home-v3-hero-art,
.home-v3-live-panel,
.home-v3-panel {
  border-color: var(--ch-frame-blue) !important;
}

.home-v3-live-panel,
.home-v3-panel {
  isolation: isolate;
  position: relative;
}

.home-v3-live-panel::before,
.home-v3-panel::before {
  content: "";
  z-index: 8;
  pointer-events: none;
  position: absolute;
  inset: 7px;
  background:
    linear-gradient(90deg, var(--ch-frame-orange), var(--ch-frame-orange)) left top / 66px 3px no-repeat,
    linear-gradient(180deg, var(--ch-frame-orange), var(--ch-frame-orange)) left top / 3px 45px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) 82px 0 / calc(46% - 82px) 1px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 30px top / 18% 1px no-repeat,
    linear-gradient(135deg, transparent 43%, var(--ch-frame-orange) 44% 52%, transparent 53%) right top / 27px 27px no-repeat,
    linear-gradient(270deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 0 top 31px / 1px calc(100% - 64px) no-repeat,
    linear-gradient(90deg, var(--ch-frame-orange), var(--ch-frame-orange)) right bottom / 72px 3px no-repeat,
    linear-gradient(0deg, var(--ch-frame-orange), var(--ch-frame-orange)) right bottom / 3px 43px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) left 42px bottom / 24% 1px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 92px bottom / 28% 1px no-repeat,
    linear-gradient(315deg, transparent 43%, var(--ch-frame-orange) 44% 52%, transparent 53%) left bottom / 24px 24px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) left 0 top 66px / 1px calc(100% - 104px) no-repeat;
  opacity: 0.95;
}

.home-v3-live-panel::before {
  inset: 8px;
}

.home-v3-panel::before {
  background:
    linear-gradient(90deg, var(--ch-frame-orange), var(--ch-frame-orange)) left top / 52px 2px no-repeat,
    linear-gradient(180deg, var(--ch-frame-orange), var(--ch-frame-orange)) left top / 2px 36px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) 68px 0 / 28% 1px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 28px top / 19% 1px no-repeat,
    linear-gradient(135deg, transparent 42%, var(--ch-frame-orange) 43% 52%, transparent 53%) right top / 24px 24px no-repeat,
    linear-gradient(270deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 0 top 29px / 1px calc(100% - 58px) no-repeat,
    linear-gradient(90deg, var(--ch-frame-orange), var(--ch-frame-orange)) right bottom / 58px 2px no-repeat,
    linear-gradient(0deg, var(--ch-frame-orange), var(--ch-frame-orange)) right bottom / 2px 34px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) left 35px bottom / 24% 1px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) right 75px bottom / 23% 1px no-repeat,
    linear-gradient(315deg, transparent 42%, var(--ch-frame-orange) 43% 52%, transparent 53%) left bottom / 21px 21px no-repeat,
    linear-gradient(90deg, var(--ch-frame-blue), var(--ch-frame-blue)) left 0 top 50px / 1px calc(100% - 85px) no-repeat;
}

/* Fine tactical ticks and dot fields from the supplied reference. */
.home-v3-live-panel {
  background-image:
    radial-gradient(circle, rgba(108, 139, 173, 0.2) 0 1px, transparent 1.25px),
    linear-gradient(rgba(220, 230, 240, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 230, 240, 0.45) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 253, 0.98)) !important;
  background-position: right 24px bottom 22px, 0 0, 0 0, 0 0 !important;
  background-size: 5px 5px, 28px 28px, 28px 28px, auto !important;
  background-repeat: no-repeat, repeat, repeat, no-repeat !important;
}

.home-v3-panel {
  background-image:
    radial-gradient(circle, rgba(112, 142, 174, 0.18) 0 1px, transparent 1.25px),
    linear-gradient(90deg, rgba(225, 233, 242, 0.28) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 253, 0.97)) !important;
  background-position: right 24px bottom 22px, 0 0, 0 0 !important;
  background-size: 5px 5px, 130px 100%, auto !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
}

.home-v3-bot-card {
  background-image:
    radial-gradient(circle at 100% 0, rgba(255, 90, 24, 0.12), transparent 42%),
    radial-gradient(circle, rgba(112, 142, 174, 0.17) 0 1px, transparent 1.25px),
    linear-gradient(145deg, #fff, #f5f8fb) !important;
  background-position: 0 0, right 22px bottom 20px, 0 0 !important;
  background-size: auto, 5px 5px, auto !important;
  background-repeat: no-repeat !important;
}

/* Smaller cards follow the same cut-corner silhouette. */
.home-v3-live-stats,
.home-v3-new-lfg > a,
.home-v3-bot-intro,
.home-v3-bot-actions a,
.home-v3-active-chat > div:last-child > a {
  border-radius: 0 !important;
  clip-path: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
}

.home-v3-hero-art::before {
  border-width: 3px 0 0 3px !important;
  border-style: solid !important;
  border-color: var(--ch-frame-orange) !important;
  filter: drop-shadow(75px 0 0 rgba(184, 203, 224, 0.72));
}

.home-v3-hero-art::after {
  border-color: var(--ch-frame-orange) !important;
  filter: drop-shadow(-92px 0 0 rgba(184, 203, 224, 0.72));
}

@media (max-width: 700px) {
  .home-v3-live-panel::before,
  .home-v3-panel::before {
    inset: 5px;
    opacity: 0.8;
  }
}