/* Interface narrative v4: every public section behaves like part of the product. */
:root {
  --ui-night: #171921;
  --ui-panel: #20232d;
  --ui-soft: #eef0f4;
  --ui-violet: #5658e8;
  --ui-lime: #d9ff68;
  --ui-border: #e0e3e9;
}

html { scroll-padding-top: 92px; }

.interface-window {
  background: #fff;
  border: 1px solid var(--ui-border);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(24, 27, 39, .10);
  overflow: hidden;
}

.interface-chrome {
  align-items: center;
  background: #242630;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #9ea2ae;
  display: flex;
  height: 48px;
  padding: 0 18px;
}

.interface-chrome > div { display: flex; gap: 6px; }
.interface-chrome > div i { background: #5d606b; border-radius: 50%; height: 8px; width: 8px; }
.interface-chrome > div i:first-child { background: #ff796f; }
.interface-chrome > div i:nth-child(2) { background: #ffd36a; }
.interface-chrome > div i:nth-child(3) { background: #6edb91; }
.interface-chrome > span { font-size: 9px; letter-spacing: .05em; margin: auto; text-transform: lowercase; }
.interface-chrome > b { background: rgba(255, 255, 255, .08); border-radius: 7px; color: #fff; font-size: 8px; padding: 6px 8px; text-transform: uppercase; }
.interface-chrome--light { background: #f8f9fb; border-color: var(--ui-border); color: #8b909b; }
.interface-chrome--light > b { background: #ecedf2; color: #555a65; }

/* Hero screen gains product-like depth without becoming a decorative mockup. */
.product-demo { transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.product-demo.is-pointed { box-shadow: 0 60px 130px rgba(28, 29, 40, .32); }
.demo-journey li { transition: background .2s ease, padding .2s ease; }
.demo-journey li:hover { background: #f8f8ff; padding-inline: 8px; }

/* Knowledge browser. */
.public-subjects { background: #fff; }
.subject-browser { background: #f6f7f9; }
.subject-browser-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 640px; }
.subject-browser-layout > aside {
  background: #f0f1f5;
  border-right: 1px solid var(--ui-border);
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
}
.subject-browser-layout > aside > small { color: #979ca7; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.subject-browser-layout > aside > strong { font-size: 25px; letter-spacing: -.05em; margin-top: 6px; }
.subject-browser-layout > aside nav { display: grid; gap: 6px; margin-top: 30px; }
.subject-browser-layout > aside nav a {
  align-items: center;
  border-radius: 11px;
  color: #525762;
  display: grid;
  font-size: 11px;
  font-weight: 700;
  gap: 9px;
  grid-template-columns: 9px 1fr auto;
  padding: 12px 10px;
  text-decoration: none;
}
.subject-browser-layout > aside nav a:first-child,
.subject-browser-layout > aside nav a:hover { background: #fff; color: var(--v3-ink); }
.subject-browser-layout > aside nav a > i { background: var(--subject-accent, var(--ui-violet)); border-radius: 3px; height: 9px; width: 9px; }
.subject-browser-layout > aside nav a span { color: #9a9faa; font-size: 8px; }
.subject-browser-layout > aside > div {
  background: var(--ui-night);
  border-radius: 14px;
  color: #fff;
  margin-top: auto;
  padding: 16px;
}
.subject-browser-layout > aside > div span { align-items: center; background: var(--ui-lime); border-radius: 8px; color: var(--ui-night); display: flex; font-size: 18px; height: 28px; justify-content: center; width: 28px; }
.subject-browser-layout > aside > div p { color: #b7bac3; font-size: 13px; line-height: 1.55; margin: 14px 0 0; }
.subject-browser-layout > main { padding: 26px; }
.browser-toolbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 20px; }
.browser-toolbar > span { font-size: 12px; font-weight: 800; }
.browser-toolbar > div { align-items: center; display: flex; gap: 8px; }
.browser-toolbar > div i { border: 1px solid #cfd2da; border-radius: 4px; height: 18px; width: 18px; }
.browser-toolbar > div i:first-child { background: var(--ui-night); }
.browser-toolbar > div b { color: #979ca6; font-size: 8px; font-weight: 700; margin-left: 5px; }
.subject-browser .subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subject-browser .subject-card { background: #fff; border: 1px solid var(--ui-border); min-height: 520px; transition: border-color .2s ease, box-shadow .2s ease, transform .25s ease; }
.subject-browser .subject-card:hover { border-color: transparent; box-shadow: 0 24px 55px rgba(25, 28, 38, .12); transform: translateY(-6px); }
.subject-browser .subject-card > span { background: #f0f1f5; border-radius: 99px; padding: 6px 8px; }
.subject-browser .subject-card > b { align-items: center; background: color-mix(in srgb, var(--subject-accent) 12%, white); border-radius: 18px; display: flex; height: 90px; justify-content: center; width: 90px; }
.subject-browser .subject-card h3 { font-size: clamp(26px, 1.9vw, 31px); overflow-wrap: anywhere; }

/* Public program marketplace. */
.public-programs { background: #eeeff3; }
.catalog-window { background: #fff; }
.catalog-toolbar { align-items: end; border-bottom: 1px solid var(--ui-border); display: flex; justify-content: space-between; padding: 28px 30px; }
.catalog-toolbar > div { display: grid; gap: 5px; }
.catalog-toolbar strong { font-size: 18px; letter-spacing: -.035em; }
.catalog-toolbar span { color: #858a95; font-size: 9px; }
.catalog-toolbar nav { background: #f0f1f4; border-radius: 11px; display: flex; gap: 3px; padding: 4px; }
.catalog-toolbar button { background: transparent; border: 0; border-radius: 8px; color: #737883; cursor: pointer; font: 750 9px Manrope, sans-serif; min-height: 32px; padding: 0 13px; }
.catalog-toolbar button.is-active { background: #fff; box-shadow: 0 3px 10px rgba(25, 28, 38, .08); color: var(--ui-night); }
.catalog-window .public-program-grid { gap: 1px; background: var(--ui-border); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.catalog-window .public-program-card:has(.public-program-visual),
.catalog-window .public-program-card { border: 0; border-radius: 0; min-height: 650px; transition: opacity .2s ease, transform .2s ease; }
.catalog-window .public-program-card.is-filtered { display: none; }
.catalog-window .public-program-visual { height: 245px; }
.catalog-window .public-program-card:hover .public-program-visual img { transform: scale(1.035); }
.catalog-window .public-program-visual img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.catalog-window .public-program-card:not(:has(.public-program-visual)) {
  display: grid;
  grid-template-rows: auto 245px 1fr auto;
  overflow: hidden;
  padding: 0;
}
.catalog-window .public-program-card:not(:has(.public-program-visual)) > header { grid-row: 1; padding: 20px; }
.catalog-window .public-program-card:not(:has(.public-program-visual))::before {
  align-items: center;
  background: radial-gradient(circle at 22% 28%, rgba(86,88,232,.16) 0 18%, transparent 18.5%), linear-gradient(145deg, #eef0ff, #f8f8ff);
  color: var(--ui-violet);
  content: "Σ";
  display: flex;
  font-size: 92px;
  font-weight: 800;
  grid-row: 2;
  justify-content: center;
  letter-spacing: -.08em;
}
.catalog-window .public-program-card:not(:has(.public-program-visual)):nth-child(4)::before {
  background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), repeating-linear-gradient(0deg, transparent 0 24px, rgba(86,88,232,.12) 25px), #dceaff;
  color: #3272e5;
  content: "</>";
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 62px;
}
.catalog-window .public-program-card:not(:has(.public-program-visual)) .public-program-content { align-self: start; grid-row: 3; padding: 28px; }
.catalog-window .public-program-card:not(:has(.public-program-visual)) > footer { grid-row: 4; margin: 0 28px; padding: 22px 0 28px; }

/* Live lesson screen. */
.interface-session { align-items: stretch; background: var(--ui-night); border-radius: 28px; gap: 1px; grid-template-columns: 1.25fr .75fr; margin: 16px; min-height: 760px; overflow: hidden; }
.session-screen { background: #20232c; min-width: 0; overflow: hidden; }
.session-live { align-items: center; display: flex; gap: 5px; }
.session-live i { animation: live-pulse 1.4s ease-in-out infinite; background: #ff7067; border-radius: 50%; height: 5px; width: 5px; }
.session-layout { display: grid; grid-template-columns: 68px minmax(0, 1fr); min-height: 712px; }
.session-layout > aside { align-items: center; background: #1b1d25; border-right: 1px solid rgba(255,255,255,.06); color: #fff; display: flex; flex-direction: column; padding: 25px 0; }
.session-layout > aside strong { font-size: 12px; }
.session-layout > aside small { color: #717582; font-size: 6px; margin-top: 4px; text-transform: uppercase; }
.session-layout > aside nav { display: grid; gap: 18px; margin-top: 65px; }
.session-layout > aside nav i { align-items: center; border: 1px solid #4f5360; border-radius: 8px; color: #777b87; display: flex; font-size: 7px; font-style: normal; height: 28px; justify-content: center; width: 28px; }
.session-layout > aside nav i.is-active { background: var(--ui-violet); border-color: var(--ui-violet); color: #fff; }
.session-layout > aside > span { align-items: center; background: var(--ui-lime); border-radius: 9px; color: var(--ui-night); display: flex; font-size: 8px; font-weight: 800; height: 30px; justify-content: center; margin-top: auto; width: 30px; }
.session-layout > main { background: #f4f5f7; color: var(--ui-night); padding: 35px; }
.session-heading { align-items: center; display: flex; justify-content: space-between; }
.session-heading small { color: #8e939e; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.session-heading h3 { font-size: clamp(24px, 2.3vw, 38px); letter-spacing: -.055em; margin: 6px 0 0; }
.session-heading button { background: var(--ui-night); border: 0; border-radius: 10px; color: #fff; font: 750 9px Manrope, sans-serif; padding: 11px 14px; }
.session-focus { background: var(--ui-violet); border-radius: 18px; color: #fff; margin-top: 28px; min-height: 230px; overflow: hidden; padding: 26px; position: relative; }
.session-focus::after { background: var(--ui-lime); border-radius: 50%; content: ""; filter: blur(1px); height: 160px; opacity: .95; position: absolute; right: -45px; top: -55px; width: 160px; }
.session-focus > span { color: #c6c7ff; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.session-focus h4 { font-size: clamp(24px, 2.5vw, 42px); letter-spacing: -.06em; line-height: 1.05; margin: 36px 0; position: relative; z-index: 1; }
.session-focus > div { display: flex; gap: 7px; }
.session-focus > div i { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); border-radius: 99px; font-size: 8px; font-style: normal; padding: 7px 9px; }
.session-board { display: grid; gap: 12px; grid-template-columns: 1fr .9fr; margin-top: 12px; }
.session-board > div, .session-board > aside { background: #fff; border: 1px solid var(--ui-border); border-radius: 16px; min-height: 170px; padding: 20px; }
.session-board small { color: #9398a3; font-size: 7px; font-weight: 750; text-transform: uppercase; }
.session-board > div strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(21px, 2.2vw, 34px); margin-top: 28px; }
.session-board > div span { display: flex; gap: 4px; margin-top: 28px; }
.session-board > div span i { animation: sound-wave 1.2s ease-in-out infinite; background: var(--ui-violet); border-radius: 99px; height: 8px; width: 3px; }
.session-board > div span i:nth-child(2) { animation-delay: -.2s; height: 15px; }
.session-board > div span i:nth-child(3) { animation-delay: -.4s; height: 21px; }
.session-board > div span i:nth-child(4) { animation-delay: -.6s; height: 13px; }
.session-board > aside p { font-size: 10px; line-height: 1.6; margin: 20px 0; }
.session-board > aside b { color: #48a477; font-size: 7px; }
.interface-session .method-copy { border-radius: 0; }

/* Mentor console / messages. */
.mentor-console .teacher-showcase { background: #f4f5f7; gap: 1px; grid-template-columns: 1.1fr .9fr; }
.mentor-console .public-teacher-card { border: 0; border-radius: 0; min-height: 550px; }
.mentor-console .public-teacher-card > div:last-child > small { align-items: center; color: #737884; display: flex; font-size: 8px; gap: 7px; margin-top: 25px; }
.mentor-console .public-teacher-card > div:last-child > small i { background: #51c889; border-radius: 50%; height: 7px; width: 7px; }
.mentor-console .teacher-quote { border: 0; border-radius: 0; display: flex; flex-direction: column; min-height: 550px; padding-top: 26px; }
.mentor-console .teacher-quote header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; margin-bottom: 35px; padding-bottom: 18px; }
.mentor-console .teacher-quote header span { color: #8d919c; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.mentor-console .teacher-quote header b { color: #6d7180; font-size: 7px; margin-left: auto; }
.mentor-console .teacher-quote > div { display: flex; gap: 2px; margin-left: auto; margin-top: auto; }
.mentor-console .teacher-quote > div i { color: var(--ui-lime); font-size: 9px; font-style: normal; }

/* The lead form is an onboarding flow inside the platform. */
.interface-onboarding { background: #dfe0ff; border-radius: 28px; overflow: hidden; }
.interface-onboarding .request-copy { border-radius: 0; }
.onboarding-steps { display: grid !important; gap: 7px; margin: 48px 0 32px; }
.onboarding-steps span { align-items: center; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; color: #c8c9ff; display: flex; font-size: 12px; gap: 10px; padding: 10px; }
.onboarding-steps span i { align-items: center; border: 1px solid currentColor; border-radius: 7px; display: flex; font-style: normal; height: 24px; justify-content: center; width: 24px; }
.onboarding-steps span.is-active { background: #fff; color: var(--ui-night); }
.onboarding-steps span.is-active i { background: var(--ui-lime); border-color: var(--ui-lime); }
.interface-onboarding .public-form { border: 0; border-radius: 0; padding-top: 0; }
.form-appbar { align-items: center; border-bottom: 1px solid var(--ui-border); display: flex; height: 49px; margin: 0 -40px 30px; padding: 0 20px; }
.form-appbar > div { display: flex; gap: 5px; }
.form-appbar > div i { background: #d1d4db; border-radius: 50%; height: 7px; width: 7px; }
.form-appbar > span { color: #999ea8; font-size: 8px; margin: auto; text-transform: lowercase; }
.form-appbar > b { background: #efefff; border-radius: 7px; color: var(--ui-violet); font-size: 12px; padding: 6px 8px; text-transform: uppercase; }
.public-form-intro { margin-bottom: 25px; }
.public-form-intro small { color: var(--ui-violet); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.public-form-intro h3 { font-size: 27px; letter-spacing: -.05em; margin: 7px 0; }
.public-form-intro p { color: #8a8f99; font-size: 14px; margin: 0; line-height: 1.6; }

/* Inner public pages use the same application frame language. */
.public-inner-hero, .subject-profile-hero, .course-detail-hero, .contact-layout {
  border: 8px solid var(--ui-panel);
  box-shadow: 0 35px 90px rgba(24,27,39,.16);
  overflow: hidden;
  padding-top: max(90px, 9vw);
  position: relative;
}
.public-inner-hero--about {
  background: var(--ui-night);
  color: #fff;
}
.public-inner-hero--about .public-eyebrow { color: #8d8fff; }
.public-inner-hero--about h1 { color: #fff; }
.public-inner-hero--about h1 em { color: var(--ui-lime); }
.public-inner-hero--about > p { color: #b8bdc9; }
.contact-layout { padding-top: 42px; }
.public-inner-hero::before, .subject-profile-hero::before, .course-detail-hero::before, .contact-layout::before {
  align-items: center;
  background: #242630;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #9195a1;
  content: "открытая страница";
  display: flex;
  font-size: 8px;
  height: 42px;
  left: 0;
  letter-spacing: .05em;
  padding-left: 58px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.public-inner-hero::after, .subject-profile-hero::after, .course-detail-hero::after, .contact-layout::after {
  background: radial-gradient(circle, #ff796f 0 3px, transparent 4px) 0 0/14px 14px,
              radial-gradient(circle, #ffd36a 0 3px, transparent 4px) 14px 0/14px 14px,
              radial-gradient(circle, #6edb91 0 3px, transparent 4px) 28px 0/14px 14px;
  content: "";
  height: 14px;
  left: 16px;
  position: absolute;
  top: 15px;
  width: 42px;
  z-index: 4;
}

.portal-login-brand { max-width: calc(100% - 150px); }
.portal-login-brand .public-brand-type strong { color: var(--ui-night); }

@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px rgba(255,112,103,.13); opacity: .65; } }
@keyframes sound-wave { 50% { transform: scaleY(.45); } }

@media (max-width: 1280px) {
  .subject-browser .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject-browser .subject-card:last-child { grid-column: 1 / -1; min-height: 390px; }
  .catalog-window .public-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .subject-profile-hero, .course-detail-hero { grid-template-columns: 1fr; }
  .subject-profile-hero > aside, .course-detail-hero > aside { display: none; }
}

@media (max-width: 980px) {
  .subject-browser-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .interface-session { grid-template-columns: 1fr; }
  .session-screen { min-height: 720px; }
  .mentor-console .teacher-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .interface-window, .interface-session, .interface-onboarding { border-radius: 18px; }
  .interface-chrome { height: 42px; padding-inline: 12px; }
  .subject-browser-layout { display: block; min-height: 0; }
  .subject-browser-layout > aside { border-bottom: 1px solid var(--ui-border); border-right: 0; padding: 18px; }
  .subject-browser-layout > aside > strong, .subject-browser-layout > aside > div { display: none; }
  .subject-browser-layout > aside nav { display: flex; margin-top: 12px; overflow-x: auto; padding-bottom: 3px; }
  .subject-browser-layout > aside nav a { background: #fff; flex: 0 0 auto; }
  .subject-browser-layout > main { padding: 12px; }
  .browser-toolbar { padding: 4px 5px 8px; }
  .browser-toolbar > div i { display: none; }
  .subject-browser .subject-grid { grid-template-columns: 1fr; }
  .subject-browser .subject-card, .subject-browser .subject-card:last-child { grid-column: auto; min-height: 430px; }
  .subject-browser .subject-card h3 { font-size: 34px; }
  .catalog-toolbar { align-items: stretch; display: grid; gap: 18px; padding: 20px 16px; }
  .catalog-toolbar nav { overflow-x: auto; width: 100%; }
  .catalog-window .public-program-grid { grid-template-columns: 1fr; }
  .catalog-window .public-program-card:has(.public-program-visual), .catalog-window .public-program-card { min-height: 600px; }
  .interface-session { margin: 8px; }
  .session-layout { grid-template-columns: 42px minmax(0, 1fr); min-height: 620px; }
  .session-layout > aside { padding-block: 16px; }
  .session-layout > aside strong { font-size: 8px; }
  .session-layout > aside nav { gap: 13px; margin-top: 40px; }
  .session-layout > aside nav i { height: 23px; width: 23px; }
  .session-layout > main { padding: 20px 12px; }
  .session-heading h3 { font-size: 22px; }
  .session-heading button { font-size: 0; padding: 10px; }
  .session-heading button::after { content: "✓"; font-size: 12px; }
  .session-focus { min-height: 205px; padding: 20px; }
  .session-focus h4 { font-size: 28px; }
  .session-board { grid-template-columns: 1fr; }
  .session-board > aside { display: none; }
  .mentor-console .public-teacher-card, .mentor-console .teacher-quote { min-height: 480px; }
  .form-appbar { margin-inline: -24px; }
  .public-inner-hero, .subject-profile-hero, .course-detail-hero, .contact-layout { border-width: 5px; margin: 8px; }
  .subject-profile-hero h1 { font-size: clamp(42px, 13.5vw, 52px); hyphens: none; overflow-wrap: anywhere; }
  .public-inner-hero--about h1 { font-size: clamp(40px, 13vw, 52px); hyphens: none; overflow-wrap: normal; }
  .about-editorial > div { left: 20px; right: 20px; }
  .about-editorial > div span { font-size: clamp(38px, 14vw, 54px); line-height: .78; }
  .about-editorial > div p { font-size: clamp(21px, 7.2vw, 27px); max-width: 100%; }
  .portal-login-brand { max-width: calc(100% - 24px); }
  .portal-login-back {
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    display: flex;
    min-height: 34px;
    padding: 0 12px;
    right: 20px;
    top: 106px;
  }
  .portal-login-back::after { font-size: 9px; }
}

@media (max-width: 520px) {
  .subject-browser-layout > aside nav { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .subject-browser-layout > aside nav a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .session-live i, .session-board > div span i { animation: none; }
  .product-demo { transition: none; }
}