.about-intro { position: relative; isolation: isolate; overflow: hidden; padding: clamp(70px, 9vw, 128px) 0 100px; background: radial-gradient(ellipse 52% 74% at 78% 43%, rgba(107, 70, 33, .36), transparent 75%), #0c0a08; }
.about-intro::after { content: ""; position: absolute; inset: auto 0 0; height: 110px; background: linear-gradient(transparent, #0c0a08); pointer-events: none; }
.about-light { position: absolute; z-index: -1; inset: -15%; background: repeating-conic-gradient(from 240deg at 75% 28%, transparent 0deg, rgba(240, 203, 133, .045) 2deg, transparent 8deg, transparent 18deg); mask-image: radial-gradient(ellipse 65% 70% at 75% 28%, #000, transparent 80%); animation: about-light-breathe 14s ease-in-out infinite alternate; }
.about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.about-hero-copy { position: relative; z-index: 2; }
.about-hero-copy h1 { max-width: 10ch; font-size: clamp(3.7rem, 6vw, 6.7rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 22px; }
.about-hero-copy h1 em { color: #e4c478; font-weight: 500; }
.about-hero-copy .lede { max-width: 32rem; color: #cabba4; font-size: clamp(1.08rem, 1.4vw, 1.27rem); line-height: 1.65; }
.about-hero-actions { margin-top: 30px; }
.about-hero-actions .btn { display: inline-flex; align-items: center; gap: 20px; min-height: 52px; text-decoration: none; }
.about-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; color: #baa888; font-size: .85rem; }
.about-proof span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; border-radius: 50%; background: #e1bf76; box-shadow: 0 0 7px #e1bf76; }
.about-stage { position: relative; min-height: 620px; perspective: 1250px; transform-style: preserve-3d; }
.about-orbit { position: absolute; width: min(540px, 100%); aspect-ratio: 1; top: 48%; left: 50%; transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-17deg); border: 1px solid rgba(225, 182, 103, .28); border-radius: 50%; box-shadow: 0 0 70px rgba(213, 145, 52, .11); animation: about-orbit-turn 40s linear infinite; }
.about-device { position: absolute; width: clamp(210px, 24vw, 280px); aspect-ratio: 9 / 19.3; left: 50%; top: 49%; padding: 7px; overflow: hidden; border: 1px solid rgba(247, 219, 159, .5); border-radius: 31px; background: linear-gradient(140deg, #866c4a, #1e1b18 24%, #090a0d 70%, #705735); box-shadow: 0 38px 67px rgba(0, 0, 0, .5), 0 0 0 4px #110f0e, inset 0 1px rgba(255, 255, 255, .3); transition: translate .18s ease-out; }
.about-device img { width: 100%; height: 100%; display: block; border-radius: 24px; object-fit: cover; object-position: top; }
.about-device-back { transform: translate3d(-93%, -51%, -65px) rotateY(18deg) rotateZ(-9deg) scale(.85); filter: brightness(.72); }
.about-device-front { transform: translate3d(-21%, -48%, 80px) rotateY(-12deg) rotateZ(5deg); }
.about-stage-note { position: absolute; right: -2%; top: 15%; padding: 11px 15px; border: 1px solid rgba(236, 203, 135, .36); border-radius: 12px; background: rgba(33, 27, 20, .88); box-shadow: 0 17px 30px rgba(0, 0, 0, .3); color: #f2e4c8; font-size: .82rem; font-weight: 700; backdrop-filter: blur(10px); transition: translate .18s ease-out; }
.about-stage-note span { color: #edca82; margin-right: 7px; }
.about-intro a:focus-visible { outline: 2px solid #f2d88d; outline-offset: 4px; }
@keyframes about-light-breathe { from { opacity: .45; transform: rotate(-3deg); } to { opacity: .9; transform: rotate(3deg); } }
@keyframes about-orbit-turn { to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(343deg); } }
@media (max-width: 800px) {
  .about-intro { padding: 68px 0 35px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .about-hero-copy h1 { font-size: clamp(3.7rem, 11vw, 5.6rem); }
  .about-stage { min-height: 510px; width: min(500px, 100%); margin: 10px auto 0; }
  .about-device { width: clamp(190px, 43vw, 245px); }
  .about-stage-note { right: 1%; }
}
@media (max-width: 420px) { .about-stage { min-height: 440px; } .about-device { width: 195px; } .about-stage-note { top: 8%; right: 0; } }
@media (prefers-reduced-motion: reduce) { .about-light, .about-orbit { animation: none; } .about-device, .about-stage-note { transition: none; } }