* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background: #05040b;
  color: #fff;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.visual {
  position: relative;
  width: 1536px;
  height: 864px;
  overflow: hidden;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 9% 22%, rgba(119, 37, 240, 0.22), transparent 17%),
    radial-gradient(circle at 62% 19%, rgba(0, 168, 255, 0.12), transparent 23%),
    radial-gradient(circle at 78% 57%, rgba(255, 46, 214, 0.17), transparent 29%),
    linear-gradient(118deg, #03030a 0%, #050615 43%, #070816 64%, #03030a 100%);
  isolation: isolate;
}

.visual::before,
.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.visual::before {
  background:
    radial-gradient(circle at 0 67%, rgba(255, 46, 214, 0.64) 0 1px, transparent 2px),
    radial-gradient(circle at 4% 75%, rgba(255, 46, 214, 0.86) 0 3px, transparent 5px),
    radial-gradient(circle at 10% 78%, rgba(0, 191, 255, 0.82) 0 2px, transparent 4px),
    radial-gradient(circle at 88% 6%, rgba(40, 107, 255, 0.9) 0 3px, transparent 6px),
    radial-gradient(circle at 92% 13%, rgba(255, 46, 214, 0.62) 0 3px, transparent 6px),
    radial-gradient(ellipse at 0 78%, rgba(255, 46, 214, 0.3), transparent 24%),
    radial-gradient(ellipse at 96% 7%, rgba(86, 42, 255, 0.34), transparent 21%);
  mix-blend-mode: screen;
  opacity: 0.95;
}

.visual::after {
  background:
    radial-gradient(circle at 19% 8%, rgba(255, 46, 214, 0.7) 0 1px, transparent 3px),
    radial-gradient(circle at 28% 17%, rgba(61, 220, 255, 0.62) 0 1px, transparent 3px),
    radial-gradient(circle at 54% 20%, rgba(255, 255, 255, 0.45) 0 1px, transparent 3px),
    radial-gradient(circle at 67% 14%, rgba(61, 220, 255, 0.52) 0 1px, transparent 3px),
    radial-gradient(circle at 77% 35%, rgba(255, 46, 214, 0.54) 0 2px, transparent 4px),
    radial-gradient(circle at 90% 78%, rgba(255, 76, 242, 0.58) 0 2px, transparent 5px),
    radial-gradient(circle at 72% 8%, rgba(61, 220, 255, 0.11), transparent 17%),
    radial-gradient(circle at 51% 94%, rgba(0, 191, 255, 0.09), transparent 21%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.bg-layer,
.light-layer,
.character-wrap,
.character-wrap::after,
.character {
  position: absolute;
}

.bg-layer {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(26, 76, 255, 0.1) 22.35%, transparent 22.9% 36%, rgba(255, 46, 214, 0.14) 36.25%, transparent 37% 100%),
    linear-gradient(134deg, transparent 0 52%, rgba(61, 220, 255, 0.15) 52.15%, transparent 52.9% 100%),
    linear-gradient(152deg, rgba(255, 46, 214, 0.03), transparent 21% 71%, rgba(0, 191, 255, 0.05) 85%, transparent),
    repeating-linear-gradient(90deg, rgba(80, 135, 255, 0.035) 0 1px, transparent 1px 94px),
    repeating-linear-gradient(0deg, rgba(80, 135, 255, 0.025) 0 1px, transparent 1px 86px);
}

.bg-layer::before,
.bg-layer::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.bg-layer::before {
  left: -260px;
  top: -230px;
  width: 2130px;
  height: 1250px;
  transform: rotate(-25deg);
  background:
    repeating-linear-gradient(90deg,
      transparent 0 48px,
      rgba(0, 123, 255, 0.16) 49px 51px,
      transparent 52px 90px,
      rgba(255, 46, 214, 0.18) 91px 93px,
      transparent 94px 164px),
    linear-gradient(90deg, transparent 0 22%, rgba(255, 46, 214, 0.38) 22.15%, transparent 22.8% 35%, rgba(61, 220, 255, 0.28) 35.15%, transparent 35.8%),
    linear-gradient(90deg, transparent 0 43%, rgba(69, 216, 255, 0.36) 43.15%, transparent 43.6% 52%, rgba(255, 46, 214, 0.5) 52.15%, transparent 52.75%),
    linear-gradient(90deg, transparent 0 67%, rgba(143, 53, 255, 0.42) 67.25%, transparent 67.9%),
    linear-gradient(90deg, transparent 0 79%, rgba(0, 191, 255, 0.34) 79.2%, transparent 79.7%);
  filter: blur(0.2px);
  opacity: 0.93;
}

.bg-layer::after {
  inset: 0;
  background:
    radial-gradient(circle at 3% 72%, rgba(255, 46, 214, 0.96) 0 2px, transparent 3px),
    radial-gradient(circle at 13% 7%, rgba(255, 46, 214, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 18%, rgba(0, 191, 255, 0.95) 0 2px, transparent 4px),
    radial-gradient(circle at 77% 38%, rgba(255, 46, 214, 0.8) 0 3px, transparent 5px),
    radial-gradient(circle at 96% 5%, rgba(255, 46, 214, 0.75) 0 4px, transparent 6px),
    radial-gradient(circle at 5% 84%, rgba(61, 220, 255, 0.72) 0 2px, transparent 4px),
    radial-gradient(circle at 93% 10%, rgba(0, 97, 255, 0.85) 0 2px, transparent 4px),
    repeating-linear-gradient(145deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(32deg, rgba(61, 220, 255, 0.024) 0 1px, transparent 1px 24px);
  mix-blend-mode: screen;
  opacity: 0.54;
}

.light-layer {
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(124deg, transparent 0 13%, rgba(255, 46, 214, 0.26) 13.15%, rgba(255, 255, 255, 0.35) 13.35%, transparent 13.8%),
    linear-gradient(124deg, transparent 0 57%, rgba(0, 191, 255, 0.3) 57.15%, rgba(255, 255, 255, 0.34) 57.35%, transparent 57.8%),
    linear-gradient(124deg, transparent 0 73%, rgba(255, 46, 214, 0.33) 73.15%, rgba(255, 255, 255, 0.3) 73.35%, transparent 73.9%),
    linear-gradient(124deg, transparent 0 88%, rgba(61, 220, 255, 0.28) 88.1%, transparent 88.6%);
  mix-blend-mode: screen;
}

.light-layer::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -132px;
  width: 470px;
  height: 116px;
  transform: rotate(-30deg);
  background: linear-gradient(90deg, transparent, rgba(61, 220, 255, 0.28), rgba(255, 46, 214, 0.72), rgba(255, 255, 255, 0.68), rgba(61, 220, 255, 0.42), transparent);
  filter: blur(8px);
  opacity: 0.58;
}

.light-layer::after {
  content: "";
  position: absolute;
  right: -68px;
  bottom: 26px;
  width: 575px;
  height: 112px;
  transform: rotate(-30deg);
  background: linear-gradient(90deg, transparent, rgba(0, 191, 255, 0.22), rgba(255, 76, 242, 0.72), rgba(255, 255, 255, 0.74), rgba(143, 53, 255, 0.45), transparent);
  filter: blur(9px);
  opacity: 0.48;
}

.ray,
.spark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.ray {
  height: 4px;
  transform: rotate(-32deg);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor, rgba(255, 255, 255, 0.9), currentColor, transparent);
  filter: blur(0.35px) drop-shadow(0 0 12px currentColor);
  opacity: 0.9;
}

.ray-1 {
  left: -44px;
  top: 138px;
  width: 310px;
  color: #b14dff;
}

.ray-2 {
  left: 769px;
  top: 115px;
  width: 294px;
  color: #ff2ed6;
}

.ray-3 {
  left: 1001px;
  top: 520px;
  width: 380px;
  height: 5px;
  color: #ff4cf2;
}

.ray-4 {
  left: 1194px;
  top: 80px;
  width: 348px;
  color: #00bfff;
}

.ray-5 {
  left: 15px;
  top: 765px;
  width: 368px;
  height: 5px;
  color: #ff2ed6;
}

.ray-6 {
  left: 1267px;
  top: 710px;
  width: 340px;
  height: 5px;
  color: #3ddcff;
}

.spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 12px 4px currentColor,
    0 0 32px 13px currentColor;
  color: #ff2ed6;
  opacity: 0.95;
}

.spark-1 {
  left: 773px;
  top: 150px;
}

.spark-2 {
  left: 315px;
  top: 30px;
  color: #3ddcff;
}

.spark-3 {
  right: 111px;
  bottom: 128px;
  color: #ff4cf2;
}

.character-wrap {
  left: 0;
  top: 0;
  width: 346px;
  height: 864px;
  z-index: 3;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0 76%, rgba(0, 0, 0, 0.84) 89%, transparent 100%),
    linear-gradient(90deg, #000 0 79%, rgba(0, 0, 0, 0.62) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0 76%, rgba(0, 0, 0, 0.84) 89%, transparent 100%),
    linear-gradient(90deg, #000 0 79%, rgba(0, 0, 0, 0.62) 90%, transparent 100%);
  mask-composite: intersect;
}

.character-wrap::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 28px;
  width: 290px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 53, 255, 0.45), rgba(255, 46, 214, 0.1) 48%, transparent 72%);
  filter: blur(13px);
  z-index: 1;
  mix-blend-mode: screen;
}

.character-wrap::after {
  content: "";
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse at 42% 22%, transparent 0 118px, rgba(5, 4, 11, 0.04) 170px, transparent 245px),
    linear-gradient(90deg, transparent 0 61%, rgba(5, 4, 11, 0.28) 82%, rgba(5, 4, 11, 0.88) 100%),
    linear-gradient(180deg, transparent 0 42%, rgba(5, 4, 11, 0.13) 58%, rgba(5, 4, 11, 0.63) 83%, rgba(5, 4, 11, 0.95) 100%);
  pointer-events: none;
}

.character {
  left: 0;
  top: 0;
  width: 340px;
  height: 864px;
  object-fit: fill;
  z-index: 2;
  filter: contrast(1.12) saturate(1.08) brightness(0.97) drop-shadow(0 0 22px rgba(255, 46, 214, 0.36));
}

.date-badge {
  position: absolute;
  left: 320px;
  top: 28px;
  z-index: 8;
  width: 280px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid rgba(200, 220, 255, 0.8);
  border-radius: 999px;
  background: rgba(3, 4, 12, 0.66);
  box-shadow:
    0 0 12px rgba(255, 40, 230, 0.7),
    inset 0 0 10px rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.9);
  white-space: nowrap;
}

.date-badge span {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff2ed6;
  box-shadow:
    0 0 10px #ff2ed6,
    0 0 18px #ff4cf2;
}

.main-title {
  position: absolute;
  left: 325px;
  top: 76px;
  z-index: 7;
  width: 925px;
  height: 185px;
  margin: 0;
  color: #fff;
}

.main-title::after {
  content: "";
  position: absolute;
  left: 455px;
  top: 103px;
  z-index: -1;
  width: 570px;
  height: 32px;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 255, 0.34), rgba(255, 46, 214, 0.68), rgba(255, 76, 242, 0.42), transparent);
  filter: blur(10px);
  opacity: 0.82;
}

.title-small,
.title-large {
  display: block;
  white-space: nowrap;
}

.title-small {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 4px;
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.62),
    0 3px 0 rgba(255, 255, 255, 0.18),
    4px 0 0 rgba(90, 170, 255, 0.18);
  filter: contrast(1.18);
}

.title-large {
  margin-top: 2px;
  font-size: 94px;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 2px;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.42),
    0 0 18px rgba(61, 220, 255, 0.44),
    0 0 28px rgba(255, 46, 214, 0.44),
    0 5px 0 rgba(34, 53, 103, 0.4);
  filter: contrast(1.12);
}

.title-large .course-part,
.title-large .fixed-part,
.title-large .pink-part,
.title-large strong {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.title-large .course-part {
  background-image: linear-gradient(180deg, #ffffff 0%, #f5fbff 34%, #bdefff 62%, #f8fdff 100%);
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.5),
    0 0 18px rgba(61, 220, 255, 0.44);
}

.title-large .fixed-part {
  font-style: normal;
  font-weight: 900;
  background-image: linear-gradient(105deg, #eefbff 0%, #78e6ff 22%, #26baff 48%, #8f35ff 78%, #d945ff 100%);
  text-shadow:
    0 0 9px rgba(61, 220, 255, 0.62),
    0 0 22px rgba(143, 53, 255, 0.62);
}

.title-large .pink-part {
  font-style: normal;
  font-weight: 900;
  background-image: linear-gradient(120deg, #c8fbff 0%, #b14dff 31%, #ff4cf2 66%, #ff2ed6 100%);
  text-shadow:
    0 0 9px rgba(255, 76, 242, 0.68),
    0 0 24px rgba(255, 46, 214, 0.72);
}

.right-logo {
  position: absolute;
  left: 1143px;
  top: 12px;
  z-index: 4;
  width: 286px;
  height: 158px;
  color: transparent;
  background: linear-gradient(125deg, rgba(77, 160, 255, 0.95), rgba(25, 91, 217, 0.72) 51%, rgba(255, 46, 214, 0.82));
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 70px;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -1px;
  opacity: 0.58;
  text-shadow: 0 0 17px rgba(61, 121, 255, 0.48);
  transform: rotate(1deg);
}

.right-logo b {
  position: relative;
  top: -3px;
  display: inline-block;
  margin-left: 104px;
  color: #ff4cf2;
  font-size: 28px;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 0 13px rgba(255, 46, 214, 0.68);
}

.logo-arrows {
  position: absolute;
  left: 1170px;
  top: 137px;
  z-index: 5;
  color: #ff2ed6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 37px;
  line-height: 1;
  letter-spacing: -9px;
  opacity: 0.72;
  text-shadow: 0 0 13px rgba(255, 46, 214, 0.72);
}

.lead {
  position: absolute;
  left: 335px;
  top: 270px;
  z-index: 7;
  width: 930px;
  height: 76px;
  margin: 0;
  color: #f4f7ff;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(255, 255, 255, 0.25);
}

.summary-card {
  position: absolute;
  z-index: 7;
  height: 105px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(119deg, rgba(255, 255, 255, 0.05), transparent 11% 52%, rgba(45, 147, 255, 0.13) 63%, transparent 68%, rgba(255, 46, 214, 0.15)),
    linear-gradient(180deg, rgba(17, 18, 49, 0.62), rgba(3, 4, 14, 0.76)),
    rgba(4, 5, 17, 0.84);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(90, 226, 255, 0.98);
  box-shadow:
    0 0 18px rgba(61, 220, 255, 0.78),
    0 0 31px rgba(143, 53, 255, 0.22),
    inset 0 0 27px rgba(120, 60, 255, 0.3),
    inset 0 0 44px rgba(0, 191, 255, 0.08);
}

.summary-card::before,
.summary-card::after,
.cost-item::before,
.cost-item::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.summary-card::before {
  inset: 0;
  background:
    linear-gradient(132deg, transparent 0 45%, rgba(61, 220, 255, 0.16) 45.35%, transparent 47%),
    linear-gradient(132deg, transparent 0 62%, rgba(61, 220, 255, 0.28) 62.35%, transparent 64%),
    linear-gradient(132deg, transparent 0 70%, rgba(255, 46, 214, 0.62) 70.35%, rgba(255, 255, 255, 0.5) 71%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(79, 121, 255, 0.08) 0 1px, transparent 1px 60px);
  opacity: 0.86;
}

.summary-card::after {
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  opacity: 0.85;
}

.cost-card {
  left: 335px;
  top: 378px;
  width: 560px;
}

.count-card {
  left: 915px;
  top: 378px;
  width: 410px;
  border-color: rgba(255, 76, 242, 0.98);
  box-shadow:
    0 0 19px rgba(255, 45, 230, 0.82),
    0 0 31px rgba(143, 53, 255, 0.24),
    inset 0 0 27px rgba(120, 60, 255, 0.32),
    inset 0 0 44px rgba(255, 45, 230, 0.08);
}

.summary-label {
  position: absolute;
  left: 30px;
  top: 14px;
  z-index: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.1px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.74);
}

.summary-value {
  position: absolute;
  left: 30px;
  top: 39px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  white-space: nowrap;
}

.summary-value span {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow:
    0 0 12px rgba(70, 190, 255, 0.9),
    0 0 20px rgba(255, 255, 255, 0.42);
}

.summary-value em {
  margin-left: 14px;
  margin-bottom: 6px;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.count-card .summary-value span {
  font-size: 60px;
  color: #fff4ff;
  text-shadow:
    0 0 12px rgba(255, 76, 242, 0.95),
    0 0 20px rgba(255, 255, 255, 0.55);
}

.count-card .summary-value em {
  margin-left: 18px;
  margin-bottom: 9px;
  font-size: 24px;
}

.cost-grid {
  position: absolute;
  left: 335px;
  top: 500px;
  z-index: 7;
  width: 990px;
  height: 325px;
  display: grid;
  grid-template-columns: repeat(3, 323px);
  grid-template-rows: repeat(4, 73px);
  column-gap: 13px;
  row-gap: 10px;
}

.cost-item {
  position: relative;
  width: 323px;
  height: 73px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.045), transparent 21% 54%, rgba(45, 147, 255, 0.13) 63%, transparent 70%, rgba(255, 46, 214, 0.18)),
    linear-gradient(180deg, rgba(15, 17, 45, 0.55), rgba(2, 3, 13, 0.82)),
    rgba(4, 5, 17, 0.86);
  border: 1px solid rgba(255, 45, 230, 0.92);
  box-shadow:
    0 0 14px rgba(255, 45, 230, 0.72),
    0 0 26px rgba(61, 220, 255, 0.16),
    inset 0 0 21px rgba(85, 120, 255, 0.24),
    inset 0 0 32px rgba(255, 45, 230, 0.07);
}

.cost-item::before {
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 28%, rgba(61, 220, 255, 0.12) 28.4%, transparent 30%),
    linear-gradient(135deg, transparent 0 52%, rgba(61, 220, 255, 0.2) 52.4%, transparent 54% 76%, rgba(255, 76, 242, 0.4) 76.4%, transparent 79%),
    linear-gradient(135deg, transparent 0 86%, rgba(255, 255, 255, 0.2) 86.25%, transparent 87%),
    repeating-linear-gradient(0deg, rgba(85, 120, 255, 0.042) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(85, 120, 255, 0.048) 0 1px, transparent 1px 58px);
  opacity: 0.86;
}

.cost-item::after {
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.cost-item h2,
.cost-item p {
  position: absolute;
  left: 95px;
  z-index: 1;
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

.cost-item h2 {
  top: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.cost-item p {
  top: 36px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.7),
    0 0 12px rgba(255, 76, 242, 0.36);
}

.icon-badge {
  position: absolute;
  left: 20px;
  top: 15px;
  z-index: 2;
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
  border: 1px solid currentColor;
  background: rgba(14, 16, 40, 0.78);
  box-shadow:
    0 0 10px currentColor,
    inset 0 0 13px rgba(255, 255, 255, 0.12);
  text-shadow: 0 0 9px currentColor;
}

.icon-badge::before,
.icon-badge::after {
  content: "";
  position: absolute;
}

.tone-pink {
  border-color: rgba(255, 45, 230, 0.98);
}

.tone-pink .icon-badge {
  color: #ff4cf2;
}

.tone-cyan {
  border-color: rgba(61, 220, 255, 0.98);
  box-shadow:
    0 0 15px rgba(61, 220, 255, 0.74),
    0 0 26px rgba(255, 45, 230, 0.16),
    inset 0 0 21px rgba(85, 120, 255, 0.24);
}

.tone-cyan .icon-badge {
  color: #3ddcff;
}

.tone-blue {
  border-color: rgba(100, 115, 255, 0.98);
  box-shadow:
    0 0 15px rgba(85, 120, 255, 0.72),
    0 0 26px rgba(255, 45, 230, 0.14),
    inset 0 0 21px rgba(85, 120, 255, 0.26);
}

.tone-blue .icon-badge {
  color: #7588ff;
}

.tone-green {
  border-color: rgba(83, 255, 211, 0.98);
  box-shadow:
    0 0 15px rgba(83, 255, 211, 0.72),
    0 0 26px rgba(255, 45, 230, 0.14),
    inset 0 0 21px rgba(85, 120, 255, 0.24);
}

.tone-green .icon-badge {
  color: #53ffd3;
}

.arrow {
  position: absolute;
  right: 20px;
  top: 25px;
  z-index: 2;
  color: #ff4cf2;
  font-size: 26px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 0 10px rgba(255, 76, 242, 0.9);
}

.video-icon::before {
  width: 21px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.video-icon::after {
  left: 18px;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #1c1130;
}

.instagram-icon::before {
  width: 21px;
  height: 21px;
  border: 3px solid currentColor;
  border-radius: 8px;
  box-shadow: 0 0 8px currentColor;
}

.instagram-icon::after {
  width: 7px;
  height: 7px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow:
    9px -9px 0 -4px currentColor,
    0 0 8px currentColor;
}

.line-icon {
  font-size: 10px;
  border-radius: 50%;
  clip-path: none;
  font-family: Arial, sans-serif;
  font-weight: 900;
}

.people-icon {
  font-size: 18px;
  letter-spacing: -5px;
  padding-right: 3px;
}

.briefcase-icon::before {
  width: 25px;
  height: 17px;
  top: 17px;
  left: 8px;
  border: 3px solid currentColor;
  border-radius: 3px;
  box-shadow: 0 0 9px currentColor;
}

.briefcase-icon::after {
  width: 12px;
  height: 6px;
  top: 11px;
  left: 15px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.ai-icon {
  font-size: 16px;
  outline: 1px dashed currentColor;
  outline-offset: -8px;
}

.palette-icon {
  font-size: 35px;
}

.palette-icon::before {
  width: 9px;
  height: 9px;
  left: 12px;
  top: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    10px -3px 0 -1px currentColor,
    13px 9px 0 -2px currentColor,
    0 0 8px currentColor;
}

.dots-icon {
  font-size: 22px;
  letter-spacing: 2px;
}

.scale-icon {
  font-size: 31px;
}