.about-hero {
  background: radial-gradient(circle at 78% 30%, rgba(210, 158, 47, .12), transparent 30%), linear-gradient(110deg, #050505, #0c0a06 55%, #050505)
}

.about-hero .muted {
  max-width: 650px
}


.about-intro {
  background: linear-gradient(180deg, #060605, #0b0906)
}

.about-intro-grid {
  gap: 70px
}

.about-intro h2 span {
  color: #f1dfb8
}

.about-intro .btn {
  margin-top: 14px
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 25px 0 6px
}

.about-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(201, 154, 53, .3);
  color: #fed781;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(201, 154, 53, .035)
}

.about-product-stage {
  position: relative;
  min-height: 570px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle, rgba(193, 138, 35, .12), transparent 52%)
}

.about-product-img {
  position: relative;
  z-index: 2;
  width: 90%;
  /* height: 510px; */
  object-fit: cover;
  mix-blend-mode: screen;
  filter: contrast(1.1) saturate(.9);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent)
}

.about-orbit {
  position: absolute;
  border: 1px solid rgba(218, 177, 83, .22);
  border-radius: 50%;
  z-index: 1
}

.orbit-a {
  width: 500px;
  height: 500px
}

.orbit-b {
  width: 620px;
  height: 300px;
  transform: rotate(-15deg);
  border-color: rgba(218, 177, 83, .1)
}

.about-product-label {
  position: absolute;
  z-index: 3;
  right: 2%;
  top: 12%;
  display: flex;
  flex-direction: column;
  text-align: right;
  color: #a98b4c
}

.about-product-label small {
  font: 600 7px Inter, sans-serif;
  letter-spacing: 3px
}

.about-product-label strong {
  font: 500 42px/1 "Cormorant Garamond", serif;
  color: #e5c16c
}

.about-product-label span {
  font: 600 7px Inter, sans-serif;
  letter-spacing: 1px;
  color: #81704d
}


.vot-technology-story {
  background: radial-gradient(circle at 50% 48%, rgba(196, 140, 33, .08), transparent 35%), #060606
}

.vot-infographic {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: 14px;
  align-items: stretch
}

.vot-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.vot-tech-card,
.vot-tech-wide {
  position: relative;
  background: linear-gradient(145deg, #12100b, #070707);
  border: 1px solid rgba(201, 154, 53, .55);
  box-shadow: inset 0 0 30px rgba(201, 154, 53, .025);
  padding: 18px
}

.vot-tech-card:before,
.vot-tech-wide:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(201, 154, 53, .12);
  pointer-events: none
}

.vot-tech-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px
}

.vot-tech-number {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f5d98f, #a7751e);
  color: #211707;
  font: 700 20px "Cormorant Garamond", serif;
  border: 1px solid #f0d07e;
  box-shadow: 0 0 15px rgba(216, 169, 63, .12)
}

.vot-tech-card h3,
.vot-tech-wide h3 {
  margin: 0;
  color: #e5c16b;
  font: 600 23px/1.05 "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: .2px
}

.vot-tech-card p,
.vot-tech-wide p {
  position: relative;
  z-index: 2;
  color: #d0c7b7;
  font-size: 14px;
  line-height: 1.65;
  margin: 15px 0 10px
}

.vot-tech-card ul,
.vot-tech-wide ul {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-left: 18px;
  color: #c2baad;
  font-size: 13px;
  line-height: 1.7
}

.vot-tech-card li,
.vot-tech-wide li {
  margin: 2px 0
}

.vot-tech-card li::marker,
.vot-tech-wide li::marker {
  color: #d9b45b
}

.vot-tech-icon {
  position: relative;
  height: 84px;
  margin: 15px 0 2px;
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(201, 154, 53, .13);
  border-bottom: 1px solid rgba(201, 154, 53, .13);
  background: radial-gradient(circle, rgba(205, 156, 47, .13), transparent 55%)
}

.vot-tech-icon .tech-icon {
  transform: scale(1.1)
}


.tech-icon {
  position: relative;
  z-index: 3;
  display: block;
  width: 48px;
  height: 48px;
  color: #e2c06b
}

.tech-icon:before,
.tech-icon:after {
  content: "";
  position: absolute;
  display: block
}

.tech-visual-wood .tech-icon:before {
  width: 34px;
  height: 34px;
  left: 7px;
  top: 7px;
  border: 2px solid currentColor;
  border-radius: 8px 8px 14px 14px;
  box-shadow: inset 0 0 0 5px rgba(226, 192, 107, .08)
}

.tech-visual-wood .tech-icon:after {
  width: 22px;
  height: 2px;
  left: 13px;
  top: 23px;
  background: currentColor;
  box-shadow: 0 -7px 0 rgba(226, 192, 107, .65), 0 7px 0 rgba(226, 192, 107, .45);
  transform: rotate(-12deg)
}

.tech-visual-heat .tech-icon:before {
  width: 24px;
  height: 34px;
  left: 12px;
  top: 8px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 45% 45%;
  transform: rotate(12deg)
}

.tech-visual-heat .tech-icon:after {
  width: 2px;
  height: 40px;
  left: 23px;
  top: 4px;
  background: currentColor;
  box-shadow: 8px 0 0 rgba(226, 192, 107, .5), -8px 0 0 rgba(226, 192, 107, .5);
  opacity: .7
}

.tech-visual-crystal .tech-icon:before {
  width: 30px;
  height: 30px;
  left: 9px;
  top: 9px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
  border-radius: 4px
}

.tech-visual-crystal .tech-icon:after {
  width: 2px;
  height: 38px;
  left: 23px;
  top: 5px;
  background: currentColor;
  transform: rotate(45deg);
  box-shadow: 10px 10px 0 rgba(226, 192, 107, .35)
}

.tech-visual-moxa .tech-icon:before {
  width: 30px;
  height: 30px;
  left: 9px;
  top: 10px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 45% 45%
}

.tech-visual-moxa .tech-icon:after {
  width: 8px;
  height: 8px;
  left: 20px;
  top: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 7px 0 -1px #0b0905
}

.tech-visual-light .tech-icon:before {
  width: 34px;
  height: 34px;
  left: 7px;
  top: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(226, 192, 107, .22)
}

.tech-visual-light .tech-icon:after {
  width: 44px;
  height: 2px;
  left: 2px;
  top: 23px;
  background: currentColor;
  box-shadow: 0 -13px 0 rgba(226, 192, 107, .55), 0 13px 0 rgba(226, 192, 107, .55);
  transform: rotate(90deg)
}

.tech-visual-wave .tech-icon:before {
  width: 42px;
  height: 20px;
  left: 3px;
  top: 14px;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  transform: skewY(-18deg)
}

.tech-visual-wave .tech-icon:after {
  width: 42px;
  height: 20px;
  left: 3px;
  top: 24px;
  border-top: 2px solid rgba(226, 192, 107, .55);
  border-radius: 50%;
  transform: skewY(18deg)
}

.tech-visual-magnetic .tech-icon:before {
  width: 34px;
  height: 34px;
  left: 7px;
  top: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  transform: rotate(-28deg)
}

.tech-visual-magnetic .tech-icon:after {
  width: 34px;
  height: 34px;
  left: 7px;
  top: 7px;
  border: 2px solid rgba(226, 192, 107, .5);
  border-radius: 50%;
  border-left-color: transparent;
  transform: rotate(-28deg)
}

/* Center product */
.vot-center-product {
  position: relative;
  min-height: 780px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(201, 154, 53, .35);
  background: radial-gradient(circle at 50% 50%, rgba(218, 167, 54, .15), transparent 42%), linear-gradient(180deg, #0d0c09, #030303)
}

.vot-center-product:after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c99a35, transparent);
  opacity: .7
}

.vot-center-product img {
  position: relative;
  z-index: 3;
  width: 96%;
  /* height: 570px; */
  object-fit: cover;
  mix-blend-mode: screen;
  filter: contrast(1.12) saturate(.92);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 87%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 87%, transparent)
}

.center-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 176, 61, .25), transparent 68%);
  filter: blur(15px)
}

.center-ring {
  position: absolute;
  border: 1px solid rgba(222, 179, 82, .18);
  border-radius: 50%
}

.ring-x {
  width: 520px;
  height: 520px
}

.ring-y {
  width: 360px;
  height: 600px;
  transform: rotate(20deg);
  border-color: rgba(222, 179, 82, .08)
}

.center-title {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column
}

.center-title strong {
  font: 600 58px/.75 "Cormorant Garamond", serif;
  color: #e9c66e;
  letter-spacing: -2px
}

.center-title span {
  font: 600 31px/.9 "Cormorant Garamond", serif;
  color: #e5c074;
  letter-spacing: 2px
}

.center-title small {
  font: 600 10px Inter, sans-serif;
  color: #eee7d9;
  letter-spacing: 3px;
  margin-top: 5px
}

.center-caption {
  position: absolute;
  z-index: 4;
  bottom: 9%;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column
}

.center-caption span {
  font: 700 20px "Cormorant Garamond", serif;
  color: #e6c56f
}

.center-caption b {
  font: 600 10px Inter, sans-serif;
  color: #89774e;
  letter-spacing: 2px
}

/* Terahertz wide card */
.vot-tech-wide {
  margin: 14px 24% 0;
  display: grid;
  grid-template-columns: auto 130px 1fr;
  gap: 18px;
  align-items: center
}

.vot-tech-wide .vot-tech-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.wide-icon {
  height: 82px;
  display: grid;
  place-items: center;
  position: relative;
  background: radial-gradient(circle, rgba(201, 154, 53, .16), transparent 65%);
  border: 1px solid rgba(201, 154, 53, .16)
}

.wide-icon b {
  position: absolute;
  color: #e1bd69;
  font: 500 17px "Cormorant Garamond", serif;
  letter-spacing: 2px
}

.vot-tech-wide p {
  margin: 0
}

.vot-tech-wide ul {
  grid-column: 3
}

/* Benefits strip */
.benefit-story {
  background: linear-gradient(180deg, #080705, #050505)
}

.benefit-story-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid rgba(201, 154, 53, .45);
  background: rgba(12, 10, 7, .75)
}

.benefit-story-grid article {
  min-height: 190px;
  padding: 28px 18px;
  text-align: center;
  border-right: 1px solid rgba(201, 154, 53, .28);
  position: relative
}

.benefit-story-grid article:last-child {
  border-right: 0
}

.benefit-icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin: 0 auto 13px;
  border: 1px solid rgba(218, 177, 83, .5);
  border-radius: 50%;
  color: #e5c16a;
  font-size: 25px
}

.benefit-story-grid strong {
  display: block;
  color: #e0bf6c;
  font: 600 18px/1.05 "Cormorant Garamond", serif;
  text-transform: uppercase
}

.benefit-story-grid p {
  color: #a8a094;
  font-size: 12px;
  line-height: 1.5;
  margin: 10px 0 0
}

.wellness-note {
  max-width: 780px;
  margin: 20px auto 0;
  text-align: center;
  color: #625d54;
  font-size: 12px
}

/* Values */
.about-values {
  background: #070706
}

.about-value-list {
  border-top: 1px solid rgba(201, 154, 53, .25)
}

.about-value-list>div {
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(201, 154, 53, .18)
}

.about-value-list b {
  grid-row: span 2;
  color: #d7ae55;
  font: 600 22px "Cormorant Garamond", serif
}

.about-value-list span {
  color: #e1c27a;
  font: 600 20px "Cormorant Garamond", serif
}

.about-value-list small {
  color: #817c73;
  font-size: 12px
}

/* Responsive — only for Tentang V.O.T */
@media(max-width:1000px) {
  .vot-infographic {
    grid-template-columns: 1fr 1fr
  }

  .vot-center-product {
    grid-column: 1/-1;
    grid-row: 1;
    min-height: 620px
  }

  .left-stack {
    grid-column: 1
  }

  .right-stack {
    grid-column: 2
  }

  .vot-tech-wide {
    margin-left: 0;
    margin-right: 0
  }

  .benefit-story-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .benefit-story-grid article:nth-child(3) {
    border-right: 0
  }

  .benefit-story-grid article:nth-child(n+4) {
    border-top: 1px solid rgba(201, 154, 53, .28)
  }
}


@media (max-width: 430px) {
  .tech-visual-wave {
    margin-bottom: 20px;
  }

  .vot-tech-wide .wide-icon {

    margin-bottom: 40px;
  }
}


@media (max-width: 760px) {
  .tech-visual-wave {
    margin-bottom: 20px;
  }

  .vot-tech-wide .wide-icon {

    margin-bottom: 40px;
  }
}

@media(max-width:760px) {
  .about-intro-grid {
    gap: 30px
  }

  .about-product-stage {
    min-height: 420px
  }

  .about-product-img {
    height: 280px
  }

  .about-product-label {
    top: 8%;
    right: 3%
  }

  .about-product-label strong {
    font-size: 31px
  }

  .about-orbit.orbit-a {
    width: 340px;
    height: 340px
  }

  .about-orbit.orbit-b {
    width: 420px;
    height: 230px
  }

  .vot-infographic {
    display: flex;
    flex-direction: column
  }

  .vot-center-product {
    order: -1;
    min-height: 500px
  }

  .vot-center-product img {
    height: 280px
  }

  .center-title {
    top: 9%
  }

  .center-title strong {
    font-size: 44px
  }

  .center-title span {
    font-size: 25px
  }

  .center-title small {
    font-size: 8px
  }

  .center-caption {
    bottom: 7%
  }

  .vot-side-stack {
    display: grid;
    grid-template-columns: 1fr
  }

  .vot-tech-card h3,
  .vot-tech-wide h3 {
    font-size: 22px
  }

  .vot-tech-card p,
  .vot-tech-wide p {
    font-size: 14px
  }

  .vot-tech-card ul,
  .vot-tech-wide ul {
    font-size: 13px
  }

  .vot-tech-wide {
    display: block
  }



  .vot-tech-wide ul {
    margin-top: 8px
  }

  .benefit-story-grid {
    grid-template-columns: 1fr 1fr
  }

  .benefit-story-grid article:nth-child(2),
  .benefit-story-grid article:nth-child(4) {
    border-right: 0
  }

  .benefit-story-grid article:nth-child(3),
  .benefit-story-grid article:nth-child(5) {
    border-top: 1px solid rgba(201, 154, 53, .28)
  }

  .benefit-story-grid article {
    min-height: 180px
  }

  .benefit-story-grid strong {
    font-size: 17px
  }
}

@media(max-width:480px) {
  .benefit-story-grid {
    grid-template-columns: 1fr
  }

  .benefit-story-grid article {
    border-right: 0 !important;
    border-top: 1px solid rgba(201, 154, 53, .28)
  }

  .benefit-story-grid article:first-child {
    border-top: 0
  }

  .vot-tech-top {
    align-items: flex-start
  }

  .vot-tech-card h3,
  .vot-tech-wide h3 {
    font-size: 20px
  }

  .about-tags span {
    font-size: 8px
  }
}