.about-hero { padding: 82px 0 105px; overflow: hidden; }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr); align-items: center; gap: 90px; }
.about-copy h1 { max-width: 690px; margin-bottom: 28px; font-size: clamp(3rem, 5vw, 5rem); }
.about-lead { max-width: 650px; margin-bottom: 34px; font-size: 1.12rem; }
.about-actions { display: flex; align-items: center; gap: 30px; }

.library-visual { position: relative; min-height: 525px; overflow: hidden; padding: 34px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 82% 8%, rgba(69,172,239,.4), transparent 28%), radial-gradient(circle at 15% 90%, rgba(179,29,239,.5), transparent 33%), #11111a; box-shadow: var(--shadow); }
.library-visual::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(#000, transparent 88%); }
.visual-top, .visual-status { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.visual-top { color: #b9b6c1; font-size:.75rem; font-weight:700; letter-spacing: .15em; }
.visual-top i { width: 8px; height: 8px; border-radius: 50%; background: #56d79a; box-shadow: 0 0 0 6px rgba(86,215,154,.1); }
.media-shelf { position: relative; z-index: 1; display: flex; align-items: end; }
.shelf-one { gap: 13px; margin-top: 56px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.13); }
.media-tile { display: flex; flex: 1; aspect-ratio: .78; align-items: flex-end; padding: 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 17px; font-size: 1.2rem; font-weight:700; box-shadow: 0 18px 32px rgba(0,0,0,.18); }
.tile-violet { background: linear-gradient(145deg, #b127ea, #6539d6); }
.tile-blue { transform: translateY(-10px); background: linear-gradient(145deg, #44b5e9, #3857c9); }
.tile-pink { background: linear-gradient(145deg, #f060b0, #8b29d5); }
.tile-dark { transform: translateY(-18px); background: linear-gradient(145deg, #41435d, #242536); }
.shelf-two { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
.media-line { height: 12px; border-radius: 99px; background: linear-gradient(90deg, rgba(196,100,255,.7), rgba(82,161,240,.34)); }
.media-line.wide { width: 90%; }
.media-line:not(.wide):not(.short) { width: 68%; }
.media-line.short { width: 46%; }
.visual-status { position: absolute; right: 34px; bottom: 31px; left: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #9693a0; font-size:.75rem; letter-spacing: .08em; }
.visual-status b { color: #fff; }
.visual-status span { display: flex; align-items: center; gap: 9px; }
.visual-status i { width: 7px; height: 7px; border-radius: 50%; background: #56d79a; }

.belief-section { padding: 115px 0 125px; background: var(--soft); }
.belief-grid { display: grid; grid-template-columns: .95fr 1fr; gap: 100px; margin-bottom: 72px; }
.belief-heading h2 { max-width: 620px; margin-bottom: 0; font-size: clamp(2.6rem, 4vw, 4rem); }
.belief-statement { padding-top: 43px; }
.belief-statement p { max-width: 610px; margin-bottom: 18px; font-size:1.0625rem; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dcdbe2; }
.principle-grid article { position: relative; padding: 44px 42px 4px 0; }
.principle-grid article + article { padding-left: 42px; border-left: 1px solid #dcdbe2; }
.principle-number { display: block; margin-bottom: 34px; color: #9a97a2; font-size: .75rem; font-weight:700; letter-spacing: .1em; }
.principle-icon { position: relative; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 17px; background: #fff; box-shadow: 0 10px 28px rgba(25,15,40,.07); }
.icon-own i { position: absolute; inset: 15px; border: 2px solid var(--violet); border-radius: 7px; }
.icon-own i::after { position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border: 3px solid #fff; border-radius: 50%; background: var(--blue); content: ""; }
.icon-local i:first-child { position: absolute; inset: 15px 13px; border: 2px solid #4a68df; border-radius: 50%; }
.icon-local i:last-child { position: absolute; top: 26px; left: 17px; width: 22px; height: 2px; background: #4a68df; }
.icon-calm { display: flex; align-items: center; justify-content: center; gap: 4px; }
.icon-calm i { width: 5px; border-radius: 9px; background: linear-gradient(var(--violet), var(--blue)); }
.icon-calm i:nth-child(1) { height: 12px; }
.icon-calm i:nth-child(2) { height: 24px; }
.icon-calm i:nth-child(3) { height: 17px; }
.principle-grid h3 { margin-bottom: 15px; font-size: 1.42rem; }
.principle-grid p { max-width: 340px; margin: 0; font-size:1.0625rem; }

.compare-teaser { padding: 115px 0 60px 0; }
.compare-teaser-inner { padding: 46px 50px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--soft); box-shadow: var(--shadow-sm); }
.compare-teaser-inner h2 { max-width: 560px; margin-bottom: 16px; font-size: clamp(1.9rem, 2.9vw, 2.5rem); }
.compare-teaser-inner p { max-width: 560px; margin-bottom: 20px; font-size: 1.0625rem; }

.origin-section { padding: 120px 0; }
.origin-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; padding: 70px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 10% 88%, rgba(147,27,226,.28), transparent 30%), #101017; }
.origin-label { display: flex; flex-direction: column; justify-content: space-between; min-height: 350px; padding-right: 55px; border-right: 1px solid rgba(255,255,255,.11); }
.origin-label span { color: #B79DF3; font-size: .76rem; font-weight:700; letter-spacing: .14em; }
.origin-label b { color: #b0adb7; font-size: 1.02rem; line-height: 1.5; }
.origin-copy h2 { margin-bottom: 30px; font-size: clamp(2.5rem, 3.7vw, 3.8rem); }
.origin-copy p { max-width: 660px; margin-bottom: 18px; color: #a8a5b0; }

.direction-section { padding: 115px 0 125px; background: #fff; }
.direction-head { display: grid; grid-template-columns: 1fr .62fr; align-items: end; gap: 80px; margin-bottom: 65px; }
.direction-head h2 { max-width: 700px; margin-bottom: 0; font-size: clamp(2.6rem, 4vw, 4rem); }
.direction-head > p { margin-bottom: 7px; }
.media-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.roadmap-item { min-height: 360px; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.roadmap-item:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(23, 14, 46, .12); }
.roadmap-item.active { color: #fff; border-color: transparent; background: linear-gradient(145deg, #8e1be2, #4b68df); box-shadow: 0 20px 45px rgba(76, 40, 180, .3); }
.roadmap-status { display: block; margin-bottom: 55px; color: #92909c; font-size:.75rem; font-weight:700; letter-spacing: .12em; }
.roadmap-item.active .roadmap-status { color: rgba(255,255,255,.68); }
.roadmap-mark { display: grid; width: 62px; aspect-ratio: 1; margin-bottom: 30px; place-items: center; border-radius: 18px; color: var(--violet); background: #f4eafa; font-size: 1.45rem; font-weight:700; }
.roadmap-item.active .roadmap-mark { color: #fff; background: rgba(255,255,255,.16); }
.roadmap-item h3 { margin-bottom: 14px; font-size: 1.55rem; }
.roadmap-item p { margin: 0; font-size:1.0625rem; }
.roadmap-item.active p { color: rgba(255,255,255,.76); }

.promise-section { padding: 120px 0; color: #fff; background: #0d0d12; }
.promise-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }
.promise-quote { position: relative; padding: 48px 0 28px 45px; border-left: 1px solid rgba(255,255,255,.15); }
.quote-mark { position: absolute; top: -12px; left: 40px; color: #7C4DE9; font-family: Georgia, serif; font-size: 6rem; line-height: 1; }
.promise-quote blockquote { margin: 34px 0 0; color: #e8e6ec; font-size: clamp(1.65rem, 2.7vw, 2.65rem); font-weight: 650; line-height: 1.3; letter-spacing: -.035em; }
.promise-copy h2 { max-width: 620px; margin-bottom: 22px; font-size: clamp(2.5rem, 3.7vw, 3.8rem); }
.promise-copy > p:not(.eyebrow) { max-width: 610px; margin-bottom: 32px; color: #a3a1ab; }

.about-links { padding: 100px 0; }
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.link-grid a { padding: 40px 35px 42px 0; }
.link-grid a + a { padding-left: 35px; border-left: 1px solid var(--line); }
.link-grid span { color: #94919c; font-size:.75rem; font-weight:700; letter-spacing: .11em; text-transform: uppercase; }
.link-grid h3 { margin: 24px 0 30px; font-size: 1.45rem; }
.link-grid b { color: var(--violet); font-size: .9rem; }
.link-grid a:hover h3 { color: var(--violet); }

@media (max-width: 980px) {
  .about-hero-grid, .belief-grid, .direction-head, .promise-grid { grid-template-columns: 1fr; gap: 45px; }
  .about-copy h1 { max-width: 760px; }
  .library-visual { width: min(100%, 650px); min-height: 500px; }
  .belief-statement { padding-top: 0; }
  .origin-panel { grid-template-columns: 1fr; gap: 46px; }
  .origin-label { min-height: 0; padding-right: 0; padding-bottom: 35px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .origin-label b { margin-top: 70px; }
  .principle-grid, .media-roadmap, .link-grid { grid-template-columns: 1fr; }
  .principle-grid article, .principle-grid article + article { padding: 38px 0; border-left: 0; border-bottom: 1px solid #dcdbe2; }
  .roadmap-item { min-height: 320px; }
  .link-grid a, .link-grid a + a { padding: 34px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 650px) {
  .about-hero { padding: 58px 0 82px; }
  .about-hero-grid { gap: 55px; }
  .about-copy h1 { font-size: clamp(2.55rem, 11.5vw, 3.55rem); }
  .about-actions { align-items: flex-start; flex-direction: column; gap: 22px; }
  .library-visual { min-height: 410px; padding: 24px; border-radius: 22px; }
  .shelf-one { gap: 8px; margin-top: 48px; }
  .media-tile { padding: 10px; border-radius: 12px; }
  .visual-status { right: 24px; bottom: 22px; left: 24px; }
  .belief-section, .direction-section { padding: 84px 0 90px; }
  .compare-teaser { padding: 0 0 80px; }
  .compare-teaser-inner { padding: 34px 26px; }
  .belief-heading h2, .direction-head h2 { font-size: 2.45rem; }
  .origin-section, .promise-section { padding: 85px 0; }
  .origin-panel { padding: 42px 28px; border-radius: 22px; }
  .origin-copy h2, .promise-copy h2 { font-size: 2.35rem; }
  .promise-quote { padding-left: 28px; }
  .quote-mark { left: 25px; }
  .promise-quote blockquote { font-size: 1.7rem; }
  .about-links { padding: 75px 0; }
}