.page-about .inner-main { padding-top: clamp(64px, 8vw, 105px); }
.about-hero { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; min-height: 610px; padding: clamp(56px, 7vw, 92px); overflow: hidden; border-radius: 38px 12px; background: linear-gradient(130deg, #10131b 0%, #181b25 62%, #211418 100%); color: #fff; text-align: left; box-shadow: 0 35px 90px rgba(18,24,36,.2); }
.about-hero__copy { position: relative; z-index: 2; align-self: center; }
.about-hero .kicker { color: #ff8886; }
.about-hero h1 { max-width: 780px; margin: 28px 0 26px; font-size: clamp(55px, 6.4vw, 92px); line-height: .94; letter-spacing: -.065em; }
.about-hero h1 em { color: #ef4948; }
.about-hero p { max-width: 610px; margin: 0; color: #adb5c5; }
.about-hero__orbit { --model-rx: 0deg; --model-ry: 0deg; --model-x: 0px; --model-y: 0px; position: relative; min-height: 430px; perspective: 1000px; transform-style: preserve-3d; transform: translate3d(var(--model-x), var(--model-y), 0) rotateX(var(--model-rx)) rotateY(var(--model-ry)); animation: about-model-auto 8s ease-in-out infinite; will-change: transform; }
.about-hero__orbit::before, .about-hero__orbit::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform-style: preserve-3d; }
.about-hero__orbit::before { width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 0 18px rgba(255,255,255,.012), 0 0 70px rgba(205,32,31,.08); transform: translate(-43%,-50%) rotateX(68deg) rotateZ(-12deg); animation: about-ring-one 18s linear infinite; }
.about-hero__orbit::after { width: 315px; height: 315px; border: 1px solid rgba(239,73,72,.36); box-shadow: inset 0 0 35px rgba(239,73,72,.045); transform: translate(-40%,-50%) rotateY(70deg) rotateZ(22deg); animation: about-ring-two 14s linear infinite reverse; }
.about-hero__orbit i { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; width: 142px; height: 142px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: radial-gradient(circle at 34% 27%, #ff8886 0%, #d82024 38%, #780b12 72%, #260207 100%); box-shadow: inset -23px -27px 42px rgba(25,0,3,.48), inset 12px 10px 22px rgba(255,255,255,.16), 0 0 0 16px rgba(239,73,72,.055), 0 28px 58px rgba(0,0,0,.44); transform: translate(-30%,-42%) translateZ(84px); }
.about-hero__orbit i::before { content:""; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.12); border-radius:50%; background:linear-gradient(145deg,rgba(255,255,255,.17),transparent 32%); }
.about-hero__orbit i::after { content:""; position:absolute; width:8px; height:8px; right:-55px; top:12px; border-radius:50%; background:#ff7775; box-shadow:-255px 145px 0 #7085bd, -85px 235px 0 #f0a1a0, 0 0 15px #ff7775; }
.about-hero__orbit i img { position:relative; z-index:2; width:102px; height:auto; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(30,0,0,.3)); }
.about-hero__orbit span { position: absolute; z-index: 3; padding: 10px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); color: #c8ced8; font: 500 9px/1 "DM Mono", monospace; letter-spacing: .12em; }
.about-hero__orbit span:first-child { top: 16%; right: 17%; transform: translateZ(35px); }
.about-hero__orbit span:nth-child(2) { top: 48%; right: 64%; transform: translateZ(60px); }
.about-hero__orbit span:nth-child(3) { right: 8%; bottom: 15%; transform: translateZ(45px); }
@keyframes about-model-auto {
  0%, 100% { transform: translate3d(var(--model-x), calc(var(--model-y) + 3px), 0) rotateX(calc(var(--model-rx) - 2deg)) rotateY(calc(var(--model-ry) - 4deg)); }
  50% { transform: translate3d(var(--model-x), calc(var(--model-y) - 7px), 0) rotateX(calc(var(--model-rx) + 3deg)) rotateY(calc(var(--model-ry) + 5deg)); }
}
@keyframes about-ring-one {
  to { transform: translate(-43%,-50%) rotateX(68deg) rotateZ(348deg); }
}
@keyframes about-ring-two {
  to { transform: translate(-40%,-50%) rotateY(70deg) rotateZ(382deg); }
}
.page-about .about-values { grid-template-columns: .8fr 1.2fr; gap: clamp(55px, 8vw, 120px); padding: clamp(105px, 10vw, 150px) 0; }
.page-about .about-values__intro { top: 140px; }
.page-about .about-values h2 { max-width: 460px; margin-top: 24px; font-size: clamp(38px, 4vw, 58px); letter-spacing: -.05em; }
.page-about .value-list { display: grid; gap: 18px; }
.page-about .value-list article { position: relative; min-height: 220px; padding: 34px 38px; overflow: hidden; border: 1px solid #e1e5eb; border-radius: 24px 7px; background: #fff; box-shadow: 0 18px 45px rgba(24,32,48,.06); }
.page-about .value-list article::after { content: attr(data-value); position: absolute; right: -8px; bottom: -13px; color: #f1f3f6; font: 700 clamp(42px,5vw,72px)/1 "Outfit"; letter-spacing: -.05em; }
.page-about .value-list article > * { position: relative; z-index: 1; }
.page-about .value-list h3 { margin: 28px 0 10px; font-size: clamp(28px,3vw,38px); letter-spacing: -.035em; }
.page-about .value-list p { max-width: 570px; font-size: 16px; }
@media (max-width: 800px) { .about-hero { grid-template-columns: 1fr; min-height: auto; padding: 48px 28px; } .about-hero__orbit { min-height: 260px; margin-top: 25px; } .page-about .about-values { display: block; padding-block: 80px; } .page-about .about-values__intro { position: static; margin-bottom: 42px; } }
@media (max-width: 520px) { .about-hero { width: calc(100% - 24px); border-radius: 26px 8px; } .about-hero h1 { font-size: clamp(46px,14vw,64px); } .page-about .value-list article { min-height: 200px; padding: 28px 24px; } }
@media (prefers-reduced-motion: reduce) { .about-hero__orbit, .about-hero__orbit::before, .about-hero__orbit::after { animation: none; } .about-hero__orbit { transition: none; transform: none; } }