/* HexDrop — hero tour callout (shared: support, guide). Glass frame + waves + play ring. */
.supportTourCard{
  appearance: none;
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  color: #fff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  /* Outer shell only: frosted rim (blur) — color lives on inner ::after plate */
  background:
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(108, 99, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(47, 211, 255, 0.05), transparent 50%),
    color-mix(in srgb, var(--panel2) 48%, transparent);
  border: 1px solid color-mix(in srgb, rgba(255, 255, 255, 0.38) 45%, var(--line));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px color-mix(in srgb, rgba(255, 255, 255, 0.12) 60%, transparent) inset,
    0 20px 48px rgba(11, 12, 18, 0.1),
    0 8px 28px rgba(108, 99, 255, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* Inner dark plate — inset leaves a thicker frosted glass rim on the button */
.supportTourCard::after{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(ellipse 95% 72% at 50% 100%, rgba(108, 99, 255, 0.1), transparent 52%),
    radial-gradient(ellipse 70% 45% at 12% 100%, rgba(138, 99, 246, 0.06), transparent 48%),
    radial-gradient(ellipse 70% 45% at 88% 100%, rgba(47, 211, 255, 0.06), transparent 48%),
    linear-gradient(180deg, #0c0e14 0%, #090b10 48%, #08090e 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 1px rgba(0, 0, 0, 0.45) inset;
}
.supportTourCard::before{
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 40%);
  opacity: 0.42;
}
[data-theme="dark"] .supportTourCard{
  border-color: color-mix(in srgb, rgba(255, 255, 255, 0.14) 55%, rgba(0, 0, 0, 0.45));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 20px 48px rgba(0, 0, 0, 0.32),
    0 8px 28px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .supportTourCard::before{
  opacity: 0.28;
}
[data-theme="dark"] .supportTourCard::after{
  background:
    radial-gradient(ellipse 95% 72% at 50% 100%, rgba(108, 99, 255, 0.09), transparent 52%),
    radial-gradient(ellipse 70% 45% at 12% 100%, rgba(138, 99, 246, 0.05), transparent 48%),
    radial-gradient(ellipse 70% 45% at 88% 100%, rgba(47, 211, 255, 0.05), transparent 48%),
    linear-gradient(180deg, #0a0c11 0%, #080a0f 48%, #06070c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 0 0 1px rgba(0, 0, 0, 0.55) inset;
}
body[data-theme="light"] .supportTourCard{
  color: var(--ink);
  background:
    radial-gradient(ellipse 100% 90% at 50% 100%, rgba(108, 99, 255, 0.08), transparent 58%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(47, 211, 255, 0.1), transparent 50%),
    rgba(255, 255, 255, 0.76);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(11, 12, 18, 0.04) inset,
    0 22px 52px rgba(11, 12, 18, 0.08),
    0 10px 32px rgba(108, 99, 255, 0.08);
}
body[data-theme="light"] .supportTourCard::before{
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 44%);
  opacity: 0.82;
}
body[data-theme="light"] .supportTourCard::after{
  background:
    radial-gradient(ellipse 95% 72% at 50% 100%, rgba(108, 99, 255, 0.08), transparent 52%),
    radial-gradient(ellipse 70% 45% at 12% 100%, rgba(138, 99, 246, 0.07), transparent 48%),
    radial-gradient(ellipse 70% 45% at 88% 100%, rgba(47, 211, 255, 0.09), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 249, 253, 0.94) 52%, rgba(242, 246, 253, 0.92) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 0 0 1px rgba(11, 12, 18, 0.06) inset;
}
.supportTourCard:hover{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 0 0 1px color-mix(in srgb, rgba(255, 255, 255, 0.14) 60%, transparent) inset,
    0 24px 56px rgba(108, 99, 255, 0.12),
    0 10px 32px rgba(11, 12, 18, 0.12);
  transform: translateY(-1px);
}
[data-theme="dark"] .supportTourCard:hover{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 24px 56px rgba(0, 0, 0, 0.38),
    0 10px 32px rgba(108, 99, 255, 0.08);
}
body[data-theme="light"] .supportTourCard:hover{
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(11, 12, 18, 0.05) inset,
    0 28px 58px rgba(11, 12, 18, 0.1),
    0 12px 34px rgba(47, 211, 255, 0.12);
}
.supportTourCard:focus{
  outline: none;
}
.supportTourCard:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--violet) 70%, transparent);
  outline-offset: 3px;
}
.supportTourCard__waves{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.supportTourCard__wave{
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.36;
}
.supportTourCard__wave--v1{
  width: 150%;
  height: 58%;
  left: -52%;
  bottom: -32%;
  background: radial-gradient(ellipse at center, rgba(160, 110, 255, 0.48), rgba(108, 99, 255, 0.22) 42%, transparent 68%);
}
.supportTourCard__wave--v2{
  width: 118%;
  height: 50%;
  left: -40%;
  bottom: -24%;
  background: radial-gradient(ellipse at center, rgba(190, 120, 255, 0.28), transparent 62%);
  opacity: 0.29;
}
.supportTourCard__wave--v3{
  width: 95%;
  height: 42%;
  left: -28%;
  bottom: -20%;
  background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.33), transparent 58%);
  opacity: 0.25;
}
.supportTourCard__wave--c1{
  width: 142%;
  height: 56%;
  right: -50%;
  bottom: -30%;
  background: radial-gradient(ellipse at center, rgba(60, 220, 255, 0.45), rgba(47, 180, 230, 0.2) 48%, transparent 70%);
}
.supportTourCard__wave--c2{
  width: 108%;
  height: 46%;
  right: -36%;
  bottom: -22%;
  background: radial-gradient(ellipse at center, rgba(100, 210, 255, 0.28), transparent 60%);
  opacity: 0.26;
}
.supportTourCard__wave--c3{
  width: 90%;
  height: 38%;
  right: -24%;
  bottom: -18%;
  background: radial-gradient(ellipse at center, rgba(47, 211, 255, 0.25), transparent 56%);
  opacity: 0.24;
}
/* Mid-card waves — sit behind the play control */
.supportTourCard__swirl{
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 118%;
  height: 72%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.supportTourCard__swirlArc{
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(22px);
  opacity: 0.42;
}
.supportTourCard__swirlArc--v{
  width: 95%;
  height: 52%;
  bottom: 2%;
  margin-left: -14%;
  background: radial-gradient(ellipse 70% 100% at 30% 80%, rgba(150, 110, 255, 0.48), rgba(108, 99, 255, 0.18) 55%, transparent 72%);
}
.supportTourCard__swirlArc--c{
  width: 95%;
  height: 52%;
  bottom: 2%;
  margin-left: 14%;
  background: radial-gradient(ellipse 70% 100% at 70% 80%, rgba(55, 220, 255, 0.45), rgba(47, 170, 220, 0.18) 55%, transparent 72%);
  opacity: 0.44;
}
.supportTourCard__swirlArc--mix{
  width: 72%;
  height: 38%;
  bottom: 18%;
  margin-left: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(120, 140, 255, 0.28), rgba(80, 200, 255, 0.18) 45%, transparent 68%);
  opacity: 0.33;
  filter: blur(26px);
}
.supportTourCard__inner{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 32px;
  gap: 14px;
}
.supportTourCard__title{
  display: block;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 22ch;
}
.supportTourCard__subtitle{
  display: block;
  font-size: clamp(0.875rem, 1.5vw, 0.95rem);
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
  max-width: 28ch;
}
body[data-theme="light"] .supportTourCard__subtitle{
  color: var(--muted);
}
.supportTourCard__play{
  position: relative;
  width: 96px;
  height: 96px;
  margin: 10px 0 4px;
  flex-shrink: 0;
  z-index: 2;
}
/* Thin ring (mask) — subtler conic + softer outer glow like the earlier ring */
.supportTourCard__playRing{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, #8a63f6, #6c63ff, #2fd3ff, #6c63ff, #8a63f6);
  -webkit-mask-image: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2.5px),
    #000 calc(100% - 2.5px),
    #000 calc(100% - 0.5px),
    transparent calc(100% - 0.5px)
  );
  mask-image: radial-gradient(
    circle closest-side,
    transparent calc(100% - 2.5px),
    #000 calc(100% - 2.5px),
    #000 calc(100% - 0.5px),
    transparent calc(100% - 0.5px)
  );
  filter:
    drop-shadow(0 0 10px rgba(108, 99, 255, 0.28))
    drop-shadow(0 0 18px rgba(47, 211, 255, 0.16));
}
.supportTourCard__playDisk{
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0a0b10;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) inset;
}
.supportTourCard__playIcon{
  width: 34px;
  height: 34px;
  margin-left: 4px;
  color: #fff;
}
body[data-theme="light"] .supportTourCard__playDisk{
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 2px 14px rgba(11, 12, 18, 0.08) inset,
    0 0 0 1px rgba(11, 12, 18, 0.06) inset;
}
body[data-theme="light"] .supportTourCard__playIcon{
  color: rgba(11, 12, 18, 0.86);
}
.supportTourCard__cta{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
body[data-theme="light"] .supportTourCard__cta{
  color: rgba(11, 12, 18, 0.72);
}