:root { --about-content: min(1380px, calc(100% - 64px)); }

.about-public-page { margin: 0; background: #011b35; color: #edf7ff; }
.about-shell { min-height: 100vh; background: linear-gradient(180deg, rgba(1, 27, 53, .08), #011b35 86%), url("/assets/academy-raww-tech-background.png") center top / cover no-repeat, #011b35; }
.about-page { width: var(--about-content); margin: 0 auto; padding-bottom: clamp(60px, 8vw, 132px); }
.about-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #a9c9df; font-size: 11px; font-weight: 700; letter-spacing: .09em; line-height: 1.25; text-transform: uppercase; }
.about-eyebrow::before { width: 34px; height: 2px; background: #e88938; content: ""; flex: 0 0 auto; }
.about-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, .72fr); align-items: start; gap: clamp(48px, 8vw, 128px); min-height: 270px; padding: clamp(44px, 5vw, 72px) 0 clamp(20px, 2.5vw, 36px); }
.about-hero h1, .about-copy-block h2, .about-cta h2 { margin: 0; color: #eff8ff; font-size: clamp(30px, 2.15vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.03; }
.about-hero h1 { max-width: 22ch; text-wrap: balance; }
.about-hero h1 span { color: #4cc2f2; }
.about-lead { align-self: start; max-width: 470px; margin: 0; border-top: 1px solid rgba(157, 205, 235, .28); padding-top: 20px; color: #b2c7d7; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; }
.about-lead p { margin: 0 0 20px; }
.about-benefits { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(157, 205, 235, .26); border-bottom: 1px solid rgba(157, 205, 235, .26); }
.about-benefits article { display: flex; gap: 20px; min-height: 138px; padding: 34px 28px; border-right: 1px solid rgba(157, 205, 235, .2); }
.about-benefits article:last-child { border-right: 0; }
.about-benefits img, .about-directions img, .about-chain img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.about-benefits h2, .about-directions h3, .about-chain h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.2; }
.about-benefits p, .about-directions p, .about-chain p { margin: 0; color: #aac1d2; font-size: 14px; line-height: 1.46; }
.about-split { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.15fr); gap: clamp(72px, 11vw, 168px); padding: clamp(76px, 7.5vw, 116px) 0; }
.about-copy-block { max-width: 460px; }
.about-copy-block h2 { font-size: clamp(36px, 3.15vw, 54px); line-height: 1.04; margin-bottom: 30px; }
.about-copy-block > p:not(.about-eyebrow) { margin: 0 0 18px; color: #b2c7d7; font-size: 16px; line-height: 1.6; }
.about-outline-button, .about-primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(112, 190, 232, .55); border-radius: 3px; color: #edf7ff; font-weight: 750; font-size: 14px; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.about-outline-button:hover { background: rgba(96, 183, 231, .16); transform: translateY(-2px); }
.about-primary-button { border-color: #e9f6ff; background: #e9f6ff; color: #0a3452; }
.about-primary-button:hover { background: #fff; transform: translateY(-2px); }
.about-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(157, 205, 235, .26); }
.about-directions article { min-height: 196px; padding: 35px 30px; border-right: 1px solid rgba(157, 205, 235, .2); border-bottom: 1px solid rgba(157, 205, 235, .2); }
.about-directions article:nth-child(even) { border-right: 0; }
.about-directions img { margin-bottom: 20px; }
.about-community { padding-top: 20px; }
.about-chain { margin: 0; padding: 0; border: 1px solid rgba(112, 190, 232, .35); border-radius: 4px; list-style: none; }
.about-chain li { display: flex; align-items: center; gap: 22px; min-height: 116px; padding: 22px 30px; border-bottom: 1px solid rgba(112, 190, 232, .24); }
.about-chain li:last-child { border-bottom: 0; }
.about-process, .about-principles, .about-audience { padding: clamp(64px, 6.5vw, 96px) 0 0; }
.about-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(157, 205, 235, .26); border-bottom: 1px solid rgba(157, 205, 235, .26); }
.about-process-grid article { min-height: 250px; padding: 34px 30px; border-right: 1px solid rgba(157, 205, 235, .2); }
.about-process-grid article:last-child { border-right: 0; }
.about-process-grid b, .about-principles-grid b { display: block; color: #51c7f4; font-size: 31px; line-height: 1; }
.about-process-grid h2, .about-principles-grid h2 { margin: 22px 0 12px; font-size: 19px; }
.about-process-grid p, .about-principles-grid p { margin: 0; color: #aac1d2; font-size: 14px; line-height: 1.55; }
.about-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.about-principles-grid article { display: flex; gap: 22px; min-height: 225px; padding: 35px 30px; border-right: 1px solid rgba(157, 205, 235, .2); }
.about-principles-grid article:last-child { border-right: 0; }
.about-principles-grid h2 { margin-top: 0; }
.about-audience-layout { display: grid; grid-template-columns: minmax(300px, .54fr) minmax(620px, 1fr); gap: clamp(46px, 5.2vw, 94px); align-items: stretch; }
.about-audience-intro { display: flex; flex-direction: column; min-height: 100%; padding: 0 clamp(22px, 2.8vw, 46px) 0 0; border-right: 1px solid rgba(157, 205, 235, .42); }
.about-audience-intro h2 { max-width: 11ch; margin: 0; color: #eff8ff; font-size: clamp(36px, 3.15vw, 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.about-audience-intro h2 span { color: #4cc2f2; }
.about-audience-intro > p:not(.about-eyebrow) { max-width: 410px; margin: 30px 0 0; color: #c2d3e0; font-size: 17px; line-height: 1.68; }
.about-audience-note { margin-top: auto; padding-top: clamp(44px, 5vw, 88px); }
.about-audience-note img { width: 62px; height: 62px; margin-bottom: 20px; object-fit: contain; }
.about-audience-note p { max-width: 360px; margin: 0; color: #d7e6ef; font-size: 17px; line-height: 1.62; }
.about-audience-note strong { color: #4cc2f2; font-weight: 700; }
.about-audience-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-audience-cards article { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; min-height: 166px; padding: 28px 26px; border: 1px solid rgba(130, 191, 226, .3); border-radius: 10px; background: linear-gradient(135deg, rgba(5, 35, 67, .54), rgba(2, 23, 48, .24)); }
.about-audience-cards img { width: 68px; height: 68px; object-fit: contain; align-self: start; }
.about-audience-cards h3 { margin: 1px 0 11px; color: #f0f8ff; font-size: 19px; font-weight: 650; line-height: 1.17; }
.about-audience-cards p { margin: 0; color: #b3c7d7; font-size: 14px; line-height: 1.55; }
.about-cta { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(350px, .8fr) auto; align-items: end; gap: 54px; margin-top: clamp(72px, 7vw, 104px); padding-top: clamp(48px, 4vw, 64px); border-top: 1px solid rgba(157, 205, 235, .26); }
.about-cta h2 { font-size: clamp(34px, 3.2vw, 52px); line-height: 1.03; }
.about-cta > p { margin: 0; color: #b2c7d7; font-size: 15px; line-height: 1.55; }
.about-cta > div { display: flex; flex-direction: column; gap: 12px; min-width: 230px; }
.about-cta .about-outline-button, .about-cta .about-primary-button { margin: 0; }

.about-official { display: grid; grid-template-columns: minmax(260px, .58fr) minmax(0, 1.2fr); gap: clamp(52px, 8vw, 142px); margin-top: clamp(90px, 9vw, 138px); padding-top: clamp(54px, 5vw, 78px); border-top: 1px solid rgba(157, 205, 235, .26); }
.about-official-intro { align-self: start; }
.about-official h2 { margin: 0; color: #eff8ff; font-size: clamp(34px, 3.2vw, 52px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.about-official-intro > p:not(.about-eyebrow) { max-width: 350px; margin: 22px 0 0; color: #a9c1d3; font-size: 15px; line-height: 1.6; }
.about-official-list { margin: 0; border-top: 1px solid rgba(157, 205, 235, .26); }
.about-official-row { display: grid; grid-template-columns: minmax(175px, .68fr) minmax(0, 1.32fr); gap: clamp(24px, 3vw, 54px); padding: 18px 0; border-bottom: 1px solid rgba(157, 205, 235, .2); }
.about-official-row dt { color: #92acc1; font-size: 13px; line-height: 1.5; }
.about-official-row dd { margin: 0; color: #edf7ff; font-size: 15px; line-height: 1.55; }
.about-official-row a { color: #68c9f5; text-decoration-color: rgba(104, 201, 245, .45); text-underline-offset: 3px; }
.about-official-row a:hover { color: #c6eeff; }

@media (max-width: 980px) {
  :root { --about-content: min(100% - 40px, 760px); }
  .about-hero, .about-split, .about-cta, .about-official { grid-template-columns: 1fr; gap: 48px; }
  .about-hero { min-height: 0; padding-top: 44px; }
  .about-lead { max-width: none; }
  .about-benefits, .about-process-grid { grid-template-columns: 1fr 1fr; }
  .about-benefits article:nth-child(2) { border-right: 0; }
  .about-benefits article:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(157, 205, 235, .2); border-right: 0; }
  .about-process-grid article:nth-child(2) { border-right: 0; }
  .about-process-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(157, 205, 235, .2); }
  .about-process-grid article:nth-child(3) { border-right: 1px solid rgba(157, 205, 235, .2); }
  .about-principles-grid { grid-template-columns: 1fr; }
  .about-principles-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(157, 205, 235, .2); }
  .about-principles-grid article:last-child { border-bottom: 0; }
  .about-audience-layout { grid-template-columns: 1fr; gap: 52px; }
  .about-audience-intro { padding: 0 0 44px; border-right: 0; border-bottom: 1px solid rgba(157, 205, 235, .32); }
  .about-audience-note { margin-top: 46px; padding-top: 0; }
}

@media (max-width: 620px) {
  :root { --about-content: calc(100% - 32px); }
  .about-page { padding-bottom: 58px; }
  .about-hero { padding: 28px 0 56px; }
  .about-hero h1 { font-size: clamp(28px, 8.5vw, 36px); }
  .about-benefits, .about-directions, .about-process-grid { grid-template-columns: 1fr; }
  .about-benefits article, .about-benefits article:last-child, .about-process-grid article { grid-column: auto; border-right: 0; border-bottom: 1px solid rgba(157, 205, 235, .2); }
  .about-benefits article:last-child, .about-process-grid article:last-child { border-bottom: 0; }
  .about-directions article, .about-directions article:nth-child(even) { border-right: 0; }
  .about-directions article:last-child { border-bottom: 0; }
  .about-split { padding: 64px 0; gap: 44px; }
  .about-chain li { padding: 20px; }
  .about-audience { padding-top: 76px; }
  .about-audience-layout { gap: 38px; }
  .about-audience-intro { padding-bottom: 36px; }
  .about-audience-intro h2 { font-size: clamp(34px, 10.2vw, 46px); }
  .about-audience-intro > p:not(.about-eyebrow) { margin-top: 24px; font-size: 16px; }
  .about-audience-note { display: flex; align-items: flex-start; gap: 16px; margin-top: 34px; }
  .about-audience-note img { width: 46px; height: 46px; margin: 0; flex: 0 0 auto; }
  .about-audience-note p { font-size: 15px; }
  .about-audience-cards { grid-template-columns: 1fr; gap: 12px; }
  .about-audience-cards article { grid-template-columns: 56px minmax(0, 1fr); min-height: 0; gap: 16px; padding: 22px 18px; }
  .about-audience-cards img { width: 52px; height: 52px; }
  .about-audience-cards h3 { margin-top: 0; font-size: 18px; }
  .about-cta { gap: 30px; }
  .about-official { gap: 40px; margin-top: 78px; padding-top: 44px; }
  .about-official-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .about-official h2 { font-size: 36px; }
}