/* «О нас» в облике старой страницы (about.html старого сайта), 30.09.2026.
   Всё — только внутри .oa, чтобы не задеть site.css, шапку и подвал. */

.oa {
  --a1: #667eea; --a2: #764ba2; --a3: #f093fb;
  --t2: #b8b8b8;
  max-width: 1400px; margin: 0 auto; padding: 40px 0 0;
  text-align: center; line-height: 1.6;
}
.oa h2 {
  font-size: 2.5em; font-weight: 700; line-height: 1.2; margin: 0 0 40px;
  background: linear-gradient(135deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oa-section { margin-bottom: 80px; }

/* Hero */
.oa-hero {
  padding: 40px 20px; margin-bottom: 40px; border-radius: 20px;
  background: linear-gradient(180deg, rgb(102 126 234 / .1) 0%, transparent 100%);
}
.oa-hero h1 {
  font-size: 3.5em; font-weight: 900; line-height: 1.2; margin: 0 0 20px;
  background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3)); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: oa-grad 3s ease infinite;
}
.oa-hero p { max-width: 800px; margin: 0 auto; font-size: 1.5em; color: var(--t2); font-weight: 400; line-height: 1.6; }
@keyframes oa-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Containers */
.oa-box {
  background: rgb(15 15 45 / .9); border: 1px solid rgb(102 126 234 / .3); border-radius: 20px;
  padding: 40px 30px; backdrop-filter: blur(8px);
}
.oa-frame {
  background: linear-gradient(135deg, rgb(102 126 234 / .08), rgb(118 75 162 / .08));
  border: 2px solid rgb(102 126 234 / .3); border-radius: 20px; padding: 50px 40px;
  box-shadow: 0 20px 60px rgb(102 126 234 / .15); overflow: hidden;
}
.oa-lead {
  background: rgb(15 15 45 / .7); border: 1px solid rgb(102 126 234 / .2); border-radius: 20px;
  padding: 40px 30px; backdrop-filter: blur(8px);
}

/* Cards */
.oa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.oa-item {
  background: rgb(255 255 255 / .05); border: 1px solid rgb(102 126 234 / .2); border-radius: 12px;
  padding: 25px; transition: transform .3s ease, box-shadow .3s ease;
}
.oa-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgb(102 126 234 / .2); }
.oa-icon { font-size: 3rem; line-height: 1; color: var(--a1); margin: 8px 0 25px; }
.oa-item h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--a1); margin: 0 0 15px; }
.oa-item p { font-size: 1rem; color: rgb(255 255 255 / .9); line-height: 1.6; }
.oa-item--wide { max-width: 980px; margin: 0 auto; padding: 40px 48px; }
.oa-item--wide p { font-size: 1.08rem; max-width: 820px; margin-inline: auto; }
.oa-item--wide .oa-fine { margin-top: 16px; font-size: .85rem; line-height: 1.6; color: rgb(255 255 255 / .6); }

/* Stats */
.oa-stats {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px;
  max-width: 1100px; margin: 40px auto 0; padding: 0;
}
.oa-stats li {
  display: flex; flex-direction: column; gap: 6px;
  padding: 30px 15px; border-radius: 20px; background: rgb(255 255 255 / .03); border: 1px solid rgb(255 255 255 / .1);
}
.oa-stats b {
  font-size: 2.5em; font-weight: 700; line-height: 1.2;
  background: linear-gradient(135deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oa-stats span { color: var(--t2); font-size: .9em; text-transform: uppercase; letter-spacing: 1px; }
.oa-note { margin-top: 14px; font-size: .85em; color: #8a8a8a; }

/* The two recommendations — as on the old page */
.oa-quote {
  position: relative; max-width: 900px; margin: 0 auto; padding: 40px; text-align: left;
  background: rgb(255 255 255 / .03); border: 1px solid rgb(102 126 234 / .2); border-radius: 15px;
}
.oa-quote + .oa-quote { margin-top: 40px; }
.oa-quote__mark { position: absolute; top: 20px; left: 30px; font: 3rem/1 Georgia, serif; color: rgb(102 126 234 / .3); }
.oa-quote__text { padding-left: 20px; margin-bottom: 30px; font-size: 1.15rem; line-height: 1.8; color: rgb(255 255 255 / .9); }
.oa-quote__text p + p { margin-top: 20px; }
.oa-quote__by { border-top: 1px solid rgb(102 126 234 / .2); padding-top: 25px; margin-top: 30px; }
.oa-quote__name {
  font-weight: 600; font-size: 1.1rem; margin-bottom: 8px;
  background: linear-gradient(135deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.oa-quote__role { color: rgb(255 255 255 / .7); font-size: .95rem; line-height: 1.5; }



/* ===== Student reviews: carousel (scroll-snap) ↔ all (masonry) ===== */
.rev { max-width: 1100px; margin: 60px auto 0; text-align: left; }
.rev__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 22px; }
.rev__title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #f8f9fa; }
.rev__count { margin: 0; color: var(--t2); font-size: .95rem; }
.rev__controls { margin-left: auto; display: flex; gap: 10px; }
.rev__arrow {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  color: #f8f9fa; background: rgb(255 255 255 / .04); border: 1px solid rgb(102 126 234 / .4); transition: background .2s, border-color .2s, opacity .2s;
}
.rev__arrow:hover:not(:disabled) { background: rgb(102 126 234 / .18); border-color: var(--a1); }
.rev__arrow:disabled { opacity: .35; cursor: default; }

.rev__track {
  list-style: none; margin: 0; padding: 4px 2px 18px; display: flex; align-items: flex-start; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgb(102 126 234 / .5) transparent;
}
.rev__track:focus-visible { outline: 2px solid var(--a3); outline-offset: 4px; border-radius: 16px; }

.rev-card {
  flex: 0 0 calc((100% - 40px) / 2.18); min-width: 0; overflow-wrap: break-word; scroll-snap-align: start; position: relative;
  padding: 26px; border-radius: 15px; background: rgb(255 255 255 / .035); border: 1px solid rgb(102 126 234 / .22);
}
.rev-card__who { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgb(102 126 234 / .2); }
.rev-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(102 126 234 / .35); }
.rev-card__id { flex: 1; min-width: 0; }
.rev-card__name {
  display: inline-block; font-weight: 700; font-size: 1.08rem; line-height: 1.3;
  background: linear-gradient(135deg, var(--a1), var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rev-card__name:hover { text-decoration: underline; text-decoration-color: var(--a1); }
.rev-card__sig { grid-column: 1 / -1; margin-top: 12px; color: rgb(255 255 255 / .72); font-size: .88rem; line-height: 1.45; }
.rev-card__who .tr-orig { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
.rev-card__country { display: block; margin-top: 2px; color: var(--t2); font-size: .85rem; }
.rev-card__li {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -6px 0 0; align-self: start;
  border-radius: 10px; color: #6f9ef8; transition: background .2s;
}
.rev-card__li:hover { background: rgb(102 126 234 / .15); }
.rev-card__text {
  position: relative; color: rgb(255 255 255 / .9); font-size: 1rem; line-height: 1.7;
  max-height: calc(1.7em * 6); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.rev-card__text p + p { margin-top: 10px; }
.rev-card.is-short .rev-card__text, .rev-card.is-open .rev-card__text, .rev.is-grid .rev-card__text {
  max-height: none; -webkit-mask-image: none; mask-image: none;
}
.rev-card__more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0 16px;
  border-radius: 22px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; color: #9fb0ff;
  background: rgb(102 126 234 / .1); border: 1px solid rgb(102 126 234 / .28);
}
.rev-card__more:hover { background: rgb(102 126 234 / .2); }
.rev-card.is-short .rev-card__more, .rev.is-grid .rev-card__more { display: none; }

.rev__foot { margin-top: 18px; text-align: center; }
.rev__all {
  min-height: 48px; padding: 12px 30px; border: 0; border-radius: 50px; cursor: pointer; font: inherit; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 10px 30px rgb(102 126 234 / .25);
}
.rev__all:hover { box-shadow: 0 14px 36px rgb(102 126 234 / .4); }

/* All reviews: masonry */
.rev.is-grid .rev__track { display: block; columns: 2; column-gap: 20px; overflow: visible; scroll-snap-type: none; padding: 0; }
.rev.is-grid .rev-card { display: inline-block; width: 100%; margin: 0 0 20px; break-inside: avoid; }
.rev.is-grid .rev__controls { display: none; }

/* Responsive — breakpoints as on the old page */
@media (max-width: 992px) {
  .oa-hero h1 { font-size: 2.8em; }
  .oa-hero p { font-size: 1.2em; }
  .oa h2 { font-size: 2em; }
}
@media (max-width: 768px) {
  .oa { padding-top: 24px; }
  .oa-hero h1 { font-size: 2.2em; }
  .oa-hero p { font-size: 1.1em; }
  .oa-grid { grid-template-columns: 1fr; }
  .oa-box, .oa-lead { padding: 30px 18px; }
  .oa-frame { padding: 30px 16px; }
  .oa-item--wide { padding: 28px 20px; }
  .oa-quote { padding: 28px 20px; }
  .oa-quote__mark { left: 12px; top: 12px; }
  .oa-quote__text { font-size: 1.05rem; padding-left: 10px; }
  .oa-section { margin-bottom: 56px; }
  .rev__controls { display: none; }
  .rev__track { gap: 14px; }
  .rev-card { flex-basis: 82%; padding: 20px; }
  .rev-card__avatar { width: 46px; height: 46px; }
  .rev-card__who { column-gap: 10px; }
  .rev.is-grid .rev__track { columns: 1; }
}
@media (max-width: 480px) {
  .oa-hero h1 { font-size: 1.8em; }
  .oa-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .oa-stats li { padding: 22px 10px; }
  .oa-stats b { font-size: 1.9em; }
  .oa-stats span { font-size: .82em; letter-spacing: .5px; }
}
@media (prefers-reduced-motion: reduce) {
  .oa-hero h1 { animation: none; }
  .oa-item, .rev__arrow { transition: none; }
  .oa-item:hover { transform: none; }
  .rev__track { scroll-behavior: auto; }
}

/* 4 карточки в первом блоке: 4 в ряд на широком ПК, 2×2 на среднем, 1 на телефоне */
.oa-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1200px) { .oa-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .oa-grid--4 { grid-template-columns: 1fr; } }