/* V23 — About section refined to match the approved concept.
   Keeps the Viking-like strong typography and whitespace,
   while using the supplied Platonik four-point symbol in a balanced way. */
.site--platonik main > .about-section {
  min-height: max(700px, 96svh);
  padding: clamp(118px, 12svh, 165px) var(--gutter) clamp(100px, 12svh, 160px);
  background: transparent !important;
  overflow: clip;
}

.site--platonik .about-grid {
  width: min(100%, 1560px);
  max-width: 1560px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: clamp(52px, 5.3vw, 120px);
  align-items: center;
  margin: 0 auto;
}

.site--platonik .about-copy {
  max-width: 730px;
  position: relative;
  z-index: 2;
}

.site--platonik .about-copy .overline {
  color: #fff !important;
  opacity: .97;
  font-size: clamp(15px, 1.12vw, 20px);
  font-weight: 760;
  letter-spacing: .10em;
  margin: 0 0 clamp(28px, 4vw, 54px);
}

.site--platonik .about-copy h2 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(38px, 3.45vw, 66px) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
  max-width: 760px;
  margin: 0 0 clamp(24px, 2.7vw, 36px);
  color: #fff !important;
  text-shadow: none !important;
  text-wrap: balance;
}

.site--platonik .about-copy > p {
  max-width: 640px;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(17px, 1.08vw, 20px) !important;
  font-weight: 400;
  line-height: 1.68 !important;
  margin: 0 0 30px;
}

.site--platonik .about-copy .text-action {
  color: #fff !important;
  font-size: clamp(14px, .98vw, 17px);
  font-weight: 760;
  letter-spacing: .055em;
  padding: 9px 0 15px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.64) !important;
  transition: opacity .2s, border-color .2s;
}

.site--platonik .about-copy .text-action:hover {
  opacity: .75;
  border-bottom-color: #fff !important;
}

.site--platonik .about-extra {
  max-width: 635px;
  background: rgba(5,33,116,.13) !important;
  border-left: 2px solid rgba(255,255,255,.68) !important;
  padding: 14px 18px;
  border-radius: 0 9px 9px 0;
}

.site--platonik .about-extra p {
  color: #fff !important;
  font-size: 15px !important;
}

.site--platonik .brand-stat--v21 {
  width: 100%;
  max-width: none;
  min-height: clamp(410px, 41vw, 610px);
  height: auto;
  position: relative;
  display: block;
  align-self: center;
  overflow: visible;
}

.site--platonik .brand-stat--v21::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 4%;
  top: 19%;
  bottom: 20%;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8,34,170,.58), rgba(14,41,150,.36));
  border: 1px solid rgba(219,238,255,.15);
  box-shadow: 0 28px 80px rgba(4,21,102,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site--platonik .brand-stat--v21::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 14%;
  bottom: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

.about-stat-panel {
  position: absolute;
  z-index: 2;
  left: 13%;
  top: 50%;
  transform: translateY(-53%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 38%;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.about-stat-number {
  font: 800 clamp(128px, 11vw, 212px)/.90 Arial, Helvetica, sans-serif;
  letter-spacing: -.08em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 10px 32px rgba(7,39,143,.06);
}

.about-stat-label {
  color: #fff;
  font: 700 clamp(22px, 1.86vw, 33px)/1.15 Arial, Helvetica, sans-serif;
  letter-spacing: -.03em;
  text-align: left;
  margin-top: 16px;
}

.about-stat-rule {
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: rgba(212,234,255,.9);
  margin-top: 18px;
}

.about-brand-symbol {
  position: absolute;
  z-index: 3;
  width: min(61%, 470px);
  height: auto;
  right: 0;
  top: 2%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 26px 55px rgba(10,23,84,.15));
  opacity: .96;
  pointer-events: none;
  animation: platonik-symbol-breathe 9s ease-in-out infinite alternate;
}

@keyframes platonik-symbol-breathe {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(0,-8px,0); }
}

.about-brand-note {
  display: block;
  position: absolute;
  left: 8%;
  bottom: 4.5%;
  right: 6%;
  font: 650 clamp(11px,.84vw,14px)/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: .19em;
  color: rgba(255,255,255,.82);
  text-align: center;
}

@media (max-width: 1180px) {
  .site--platonik .about-grid {
    column-gap: 34px;
    grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  }
  .site--platonik .brand-stat--v21 {
    min-height: clamp(385px, 45vw, 540px);
  }
  .about-stat-number {
    font-size: clamp(116px, 10.4vw, 176px);
  }
  .about-brand-symbol {
    width: min(60%, 410px);
    top: 4%;
    right: -1%;
  }
  .about-stat-panel {
    left: 12%;
    width: 40%;
  }
}

@media (max-width: 900px) {
  .site--platonik main > .about-section {
    min-height: 0;
    padding: 110px 27px 78px;
  }
  .site--platonik .about-grid {
    grid-template-columns: minmax(0,1fr);
    row-gap: 48px;
    width: min(100%, 680px);
  }
  .site--platonik .about-copy .overline {
    margin-bottom: 24px;
  }
  .site--platonik .about-copy h2 {
    font-size: clamp(36px, 6.6vw, 54px) !important;
  }
  .site--platonik .about-copy > p {
    font-size: 17px !important;
  }
  .site--platonik .brand-stat--v21 {
    width: min(100%, 640px);
    min-height: 420px;
    margin-inline: auto;
  }
  .site--platonik .brand-stat--v21::before {
    left: 4%;
    right: 4%;
    top: 18%;
    bottom: 21%;
  }
  .about-stat-panel {
    left: 12%;
    top: 52%;
    width: 38%;
  }
  .about-stat-number {
    font-size: clamp(122px, 18vw, 176px);
  }
  .about-brand-symbol {
    width: min(55%, 320px);
    top: 5%;
    right: 2%;
  }
  .about-brand-note {
    left: 6%;
    right: 6%;
    bottom: 6%;
    font-size: 11px;
    letter-spacing: .13em;
  }
}

@media (max-width: 560px) {
  .site--platonik main > .about-section {
    padding: 93px 22px 66px;
  }
  .site--platonik .about-grid {
    gap: 24px;
  }
  .site--platonik .about-copy h2 {
    font-size: clamp(32px, 9vw, 43px) !important;
    line-height: 1.13 !important;
  }
  .site--platonik .about-copy > p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
  .site--platonik .brand-stat--v21 {
    min-height: 330px;
  }
  .site--platonik .brand-stat--v21::before {
    left: 3%;
    right: 3%;
    top: 21%;
    bottom: 18%;
    border-radius: 16px;
  }
  .about-stat-panel {
    left: 11%;
    top: 54%;
    width: 41%;
  }
  .about-stat-number {
    font-size: clamp(90px, 24vw, 140px);
  }
  .about-stat-label {
    font-size: clamp(17px, 4.6vw, 22px);
    margin-top: 10px;
  }
  .about-stat-rule {
    width: 32px;
    margin-top: 12px;
  }
  .about-brand-symbol {
    width: min(58%, 220px);
    top: 3%;
    right: 1%;
  }
  .about-brand-note {
    left: 7%;
    right: 7%;
    bottom: 7%;
    font-size: 10px;
    letter-spacing: .08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-brand-symbol { animation: none !important; }
}