@font-face {
    font-family: "dsText";
    src: url("../fonts/NeueHaasUnicaW1G-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "dsText";
    src: url("../fonts/NeueHaasUnicaW1G-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "dsText";
    src: url("../fonts/NeueHaasUnicaW1G-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "dsHeading";
    src: url("../fonts/TinkoffSans.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "dsHeading";
    src: url("../fonts/TinkoffSans_Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "dsHeading";
    src: url("../fonts/TinkoffSans_Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #07191d;
    --deep: #0b2b31;
    --teal: #168a8f;
    --teal-soft: #d9f4ef;
    --coral: #e46b55;
    --amber: #efb84d;
    --paper: #f7f8f5;
    --line: rgba(7, 25, 29, 0.12);
    --muted: #657276;
    --white: #ffffff;
    --shadow: 0 22px 60px rgba(7, 25, 29, 0.18);
    --font-text: "Roboto", Arial, Helvetica, sans-serif;
    --font-display: "Roboto", Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--font-text);
    letter-spacing: 0;
}

body.modal-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr auto auto;
    align-items: center;
    gap: 16px;
    width: min(1160px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 7px;
    color: var(--white);
    background: rgba(7, 25, 29, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    backdrop-filter: blur(22px);
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.site-header.is-scrolled {
    background: rgba(7, 25, 29, 0.88);
    box-shadow: 0 18px 46px rgba(7, 25, 29, 0.25);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 5px 12px 5px 5px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
    transition: background 160ms ease, border-color 160ms ease;
}

.brand:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.brand__text {
    display: grid;
    gap: 1px;
    letter-spacing: 0;
}

.brand__mark,
.admin-brand__mark {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    background: var(--amber);
    border-radius: 10px;
}

.brand__mark img,
.admin-brand__mark img {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.brand__text strong {
    font-family: var(--font-text);
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.05;
}

.brand__text small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
}

.site-nav {
    display: flex;
    justify-content: center;
    justify-self: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.site-nav a,
.header-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    font-weight: 700;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.header-cta:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--amber);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 160ms ease, transform 160ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
}

.header-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.header-cta {
    color: var(--ink);
    background: var(--white);
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.header-cta:hover {
    color: var(--ink);
    background: var(--amber);
    transform: translateY(-1px);
}

.hero {
    position: relative;
    min-height: 92svh;
    overflow: hidden;
    display: grid;
    align-items: end;
    isolation: isolate;
    color: var(--white);
    background: var(--deep);
}

.hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(4, 17, 21, 0.9) 0%, rgba(4, 17, 21, 0.76) 38%, rgba(4, 17, 21, 0.12) 72%),
        linear-gradient(180deg, rgba(4, 17, 21, 0.05) 0%, rgba(4, 17, 21, 0.72) 100%),
        url("../images/hero-study.png") center / cover no-repeat;
    transform: scale(1.04);
}

.hero__symbols {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.22;
    pointer-events: none;
}

.hero__symbols span {
    position: absolute;
    display: inline-flex;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    letter-spacing: 0;
}

.hero__symbols span:nth-child(1) {
    top: 18%;
    left: 8%;
}

.hero__symbols span:nth-child(2) {
    top: 26%;
    right: 11%;
}

.hero__symbols span:nth-child(3) {
    bottom: 23%;
    left: 52%;
}

.hero__symbols span:nth-child(4) {
    top: 58%;
    left: 16%;
}

.hero__symbols span:nth-child(5) {
    bottom: 12%;
    right: 16%;
}

.hero__content {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 140px 0 48px;
}

.eyebrow,
.section-kicker {
    margin: 0 0 14px;
    color: var(--coral);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero h1 {
    max-width: 860px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.75rem, 6.4vw, 5.8rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.hero-title {
    display: grid;
    justify-items: center;
    gap: 0.06em;
}

.hero-title__surname,
.hero-title__name {
    display: block;
}

.hero-title__name {
    font-size: min(1em, 8.4vw);
    white-space: nowrap;
}

.hero__lead {
    max-width: 650px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.button,
.material-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 17px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: 0;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.button--primary {
    color: var(--ink);
    background: var(--amber);
    box-shadow: 0 16px 34px rgba(239, 184, 77, 0.25);
}

.button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(239, 184, 77, 0.32);
}

.button--ghost {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.button--ghost:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
}

.hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    max-width: 770px;
    margin-top: 44px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(16px);
}

.hero__metrics div {
    min-height: 112px;
    padding: 18px;
    background: rgba(7, 25, 29, 0.38);
}

.hero__metrics strong {
    display: block;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1;
}

.hero__metrics span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.76);
}

.section {
    padding: 92px 0;
}

.section__inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 34px;
}

.section h2,
.parallax-band h2,
.contact h2 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 4.1vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: 0;
}

.section--intro {
    background: var(--white);
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.68fr);
    gap: 48px;
    align-items: end;
}

.intro-text {
    margin: 0;
    color: #435155;
    font-size: 1.12rem;
}

.programs {
    background: linear-gradient(180deg, var(--paper), #eef7f3);
}

.program-grid,
.materials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.program-card,
.material-card,
.method-step,
.proof-list div,
.contact-form {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 30px rgba(7, 25, 29, 0.07);
}

.program-card {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    padding: 26px;
}

.program-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--teal), var(--coral), var(--amber));
}

.program-card__accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 38px;
    margin-bottom: 34px;
    padding: 8px 12px;
    color: var(--deep);
    background: var(--teal-soft);
    border-radius: 8px;
    font-weight: 900;
}

.program-card h3,
.material-card h3,
.method-step h3 {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.18;
    letter-spacing: 0;
}

.program-card p,
.material-card p,
.method-step p,
.proof-copy p,
.contact-copy p {
    color: var(--muted);
}

.program-card ul {
    display: grid;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.program-card li {
    position: relative;
    padding-left: 24px;
}

.program-card li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 10px;
    height: 2px;
    background: var(--coral);
}

.parallax-band {
    position: relative;
    min-height: 62vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--ink);
    isolation: isolate;
}

.parallax-band__image {
    position: absolute;
    inset: -12%;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(7, 25, 29, 0.82), rgba(7, 25, 29, 0.34)),
        url("../images/hero-study.png") center 58% / cover no-repeat;
    filter: saturate(0.88) contrast(1.08);
}

.parallax-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(90deg, black, transparent 72%);
}

.parallax-band__content {
    width: min(980px, calc(100% - 32px));
    margin: 0 auto;
}

.parallax-band__kicker {
    margin: 0 0 16px;
    color: var(--amber);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.method {
    background: var(--white);
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--line);
}

.method-step {
    min-height: 280px;
    padding: 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.method-step span {
    display: inline-flex;
    margin-bottom: 42px;
    color: var(--coral);
    font-weight: 900;
}

.materials {
    background: #eef7f3;
}

.materials-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 32px;
}

.materials-title {
    max-width: 980px;
}

.materials-controls {
    display: grid;
    grid-template-columns: minmax(260px, 440px) auto;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.filter-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.material-search {
    position: relative;
    display: grid;
    width: 100%;
}

.material-search span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.material-search input {
    width: 100%;
    min-height: 48px;
    padding: 12px 42px 12px 44px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
    outline: none;
}

.material-search > svg {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-50%);
    pointer-events: none;
}

.material-search input:focus {
    border-color: rgba(18, 109, 247, 0.4);
    box-shadow: 0 0 0 3px rgba(18, 109, 247, 0.12);
}

.material-search button {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    color: rgba(0, 0, 0, 0.58);
    background: #f6f7f8;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
}

.material-search button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    transform: translate(-50%, -50%);
}

.material-search button[hidden] {
    display: none;
}

.material-search button:hover {
    color: #111111;
    background: var(--amber);
}

.filter-tab {
    min-height: 38px;
    padding: 8px 13px;
    color: #445458;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 900;
}

.filter-tab.is-active,
.filter-tab:hover {
    color: var(--white);
    background: var(--deep);
}

.material-card {
    display: grid;
    grid-template-rows: 170px 1fr auto;
    min-height: 420px;
    overflow: hidden;
}

.material-card.is-hidden {
    display: none;
}

.material-card__visual {
    position: relative;
    display: grid;
    place-items: end start;
    padding: 18px;
    color: var(--white);
    background: var(--deep);
    overflow: hidden;
}

.material-card__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(45deg, transparent 0 46%, rgba(255, 255, 255, 0.18) 46% 48%, transparent 48% 100%);
    background-size: 100% 100%, 28px 28px;
}

.material-card__visual--pdf {
    background: linear-gradient(135deg, #123940, #d65f4c);
}

.material-card__visual--text {
    background: linear-gradient(135deg, #123940, #168a8f);
}

.material-card__visual--video {
    background:
        linear-gradient(135deg, rgba(7, 25, 29, 0.72), rgba(228, 107, 85, 0.68)),
        url("../images/hero-study.png") center / cover;
}

.material-card__visual span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    padding: 7px 10px;
    color: var(--ink);
    background: var(--amber);
    border-radius: 7px;
    font-weight: 900;
}

.material-card__body {
    padding: 22px 22px 8px;
}

.material-card__meta {
    margin-bottom: 10px;
    color: var(--coral);
    font-size: 0.82rem;
    font-weight: 900;
}

.material-action {
    width: calc(100% - 44px);
    margin: 16px 22px 22px;
    color: var(--white);
    background: var(--deep);
}

.material-action:hover {
    transform: translateY(-2px);
    background: var(--teal);
}

.materials-promo {
    background: #eef7f3;
}

.materials-promo__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.52fr);
    gap: 42px;
    align-items: center;
}

.materials-promo__copy p {
    max-width: 660px;
    margin: 22px 0 28px;
    color: var(--muted);
    font-size: 1.1rem;
}

.materials-promo__panel {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(36, 74, 127, 0.12);
}

.materials-promo__panel::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -72px;
    width: 190px;
    height: 190px;
    background: var(--amber);
    border-radius: 8px;
    opacity: 0.3;
    transform: rotate(-9deg);
}

.materials-promo__panel > * {
    position: relative;
    z-index: 1;
}

.materials-promo__list span {
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-ui-s, 400 15px / 20px var(--font-text));
}

.materials-promo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.materials-promo__chips span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 0 12px;
    color: var(--ink);
    background: #f6f7f8;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.materials-promo__list {
    display: grid;
    margin-top: 4px;
}

.materials-promo__list div {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 16px 0 16px 46px;
    border-top: 1px solid rgba(36, 74, 127, 0.08);
}

.materials-promo__list div::before {
    position: absolute;
    top: 18px;
    left: 0;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--ink);
    background: var(--amber);
    border-radius: 8px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.materials-promo__list div:nth-child(1)::before {
    content: "01";
}

.materials-promo__list div:nth-child(2)::before {
    content: "02";
}

.materials-promo__list div:nth-child(3)::before {
    content: "03";
}

.materials-promo__list b {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.materials-hero {
    position: relative;
    min-height: 72svh;
    overflow: hidden;
    display: grid;
    align-items: end;
    padding: 142px 0 72px;
    color: var(--white);
    background: var(--ink);
    isolation: isolate;
}

.materials-hero__image {
    position: absolute;
    inset: -10%;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(4, 17, 21, 0.9), rgba(4, 17, 21, 0.5)),
        linear-gradient(180deg, rgba(4, 17, 21, 0.08), rgba(4, 17, 21, 0.78)),
        url("../images/hero-study.png") center / cover no-repeat;
    transform: scale(1.04);
}

.materials-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, black, transparent 82%);
}

.materials-hero__content {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.materials-hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.65rem, 5.7vw, 5.15rem);
    line-height: 1.03;
    letter-spacing: 0;
}

.materials-hero p:not(.eyebrow) {
    max-width: 720px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.materials--page {
    background: linear-gradient(180deg, #eef7f3, var(--paper));
}

.materials-grid--catalog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof {
    background: var(--white);
}

.proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.72fr);
    gap: 42px;
    align-items: start;
}

.proof-grid--single {
    grid-template-columns: minmax(0, 760px);
}

.proof-copy p {
    max-width: 660px;
    margin-top: 22px;
    font-size: 1.1rem;
}

.proof-list {
    display: grid;
    gap: 12px;
}

.proof-list div {
    padding: 22px;
}

.proof-list strong,
.proof-list span {
    display: block;
}

.proof-list strong {
    margin-bottom: 8px;
    font-size: 1.05rem;
}

.proof-list span {
    color: var(--muted);
}

.contact {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    color: var(--white);
    background: var(--ink);
}

.contact__parallax {
    position: absolute;
    top: 8%;
    right: -8%;
    color: rgba(255, 255, 255, 0.07);
    font-size: clamp(6rem, 16vw, 18rem);
    line-height: 0.85;
    font-weight: 900;
    letter-spacing: 0;
    pointer-events: none;
    white-space: nowrap;
}

.contact-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.64fr);
    gap: 46px;
    align-items: start;
}

.contact-copy p {
    max-width: 560px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.1rem;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.contact-links a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.08);
}

.contact-links a:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.13);
}

.contact-form {
    display: grid;
    gap: 14px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.contact-form label {
    display: grid;
    gap: 7px;
}

.contact-form span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    font-weight: 700;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 13px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    outline: 0;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.48);
}

.contact-form select {
    color: rgba(255, 255, 255, 0.9);
}

.contact-form select option {
    color: var(--ink);
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px max(16px, calc((100% - 1180px) / 2));
    color: rgba(255, 255, 255, 0.72);
    background: #061316;
}

.site-footer a:hover {
    color: var(--white);
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 620ms ease, transform 620ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    place-items: center;
    padding: 20px;
}

.video-modal.is-open {
    display: grid;
}

.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(7, 25, 29, 0.78);
    backdrop-filter: blur(10px);
}

.video-modal__dialog {
    position: relative;
    width: min(920px, 100%);
    max-height: min(86vh, 720px);
    overflow: auto;
    padding: 18px;
    color: var(--white);
    background: #07191d;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.video-modal__dialog h2 {
    margin: 0 52px 14px 0;
    font-size: 1.2rem;
}

.video-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    cursor: pointer;
}

.video-modal iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 280px;
    border: 0;
    border-radius: 8px;
    background: #03090a;
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .site-nav {
        display: none;
    }

    .hero__content {
        padding-top: 132px;
    }

    .intro-grid,
    .materials-head,
    .materials-promo__grid,
    .proof-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .program-grid,
    .materials-grid,
    .materials-grid--catalog {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .materials-controls {
        grid-template-columns: minmax(0, 1fr);
        justify-items: stretch;
    }

    .material-search {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .site-header {
        width: calc(100% - 20px);
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-content: space-between;
        margin-top: 10px;
        padding: 8px;
    }

    .brand {
        min-height: auto;
        padding: 4px;
    }

    .brand__text {
        display: none;
    }

    .header-cta {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 0.92rem;
    }

    .hero {
        min-height: 92svh;
    }

    .hero__backdrop {
        background:
            linear-gradient(180deg, rgba(4, 17, 21, 0.66) 0%, rgba(4, 17, 21, 0.9) 74%),
            url("../images/hero-study.png") 66% center / cover no-repeat;
    }

    .hero__content {
        width: min(100% - 24px, 1180px);
        padding-top: 104px;
        padding-bottom: 24px;
    }

    .hero h1 {
        font-size: clamp(1.82rem, 7.9vw, 2.55rem);
        line-height: 1.12;
    }

    .hero__lead {
        font-size: 1rem;
    }

    .hero__actions,
    .contact-links,
    .materials-controls,
    .material-search,
    .filter-tabs {
        width: 100%;
    }

    .button,
    .material-action {
        width: 100%;
    }

    .hero__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 22px;
    }

    .hero__metrics div {
        min-height: auto;
        padding: 13px 10px;
    }

    .hero__metrics strong {
        font-size: 1.42rem;
    }

    .hero__metrics span {
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .section,
    .contact {
        padding: 68px 0;
    }

    .program-grid,
    .materials-grid,
    .materials-grid--catalog,
    .method-grid {
        grid-template-columns: 1fr;
    }

    .method-step {
        min-height: auto;
        border-radius: 0;
    }

    .materials-head {
        align-items: start;
    }

    .filter-tabs {
        overflow-x: auto;
    }

    .material-card {
        min-height: 0;
    }

    .materials-hero {
        min-height: 68svh;
        padding: 108px 0 54px;
    }

    .materials-hero h1 {
        font-size: clamp(1.82rem, 8.2vw, 2.65rem);
        line-height: 1.12;
    }

    .materials-promo__panel {
        padding: 18px;
    }

    .materials-promo__chips span {
        min-height: 34px;
        padding: 0 10px;
    }

    .materials-promo__list div {
        padding-left: 42px;
    }

    .contact__parallax {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    [data-parallax] {
        transform: none !important;
    }
}

/* T-education inspired visual system */
:root {
    --ink: #333333;
    --deep: #333333;
    --teal: #126df7;
    --teal-soft: #eef2f7;
    --coral: #126df7;
    --amber: #ffdd2d;
    --paper: #ffffff;
    --line: rgba(36, 74, 127, 0.12);
    --muted: rgba(0, 0, 0, 0.54);
    --white: #ffffff;
    --surface: #f6f7f8;
    --surface-strong: #eef2f7;
    --shadow: 0 18px 44px rgba(36, 74, 127, 0.08);
    --font-text: var(--tui-font-text, haas, pragmatica, -apple-system, "system-ui", Roboto, "Helvetica Neue", Arial, sans-serif);
    --font-display: var(--tui-font-heading, dsHeading, "dsHeading Fallback", -apple-system, "system-ui", "Segoe UI", "Helvetica Neue", sans-serif);
}

body {
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.6 var(--font-text);
}

.site-header {
    width: 100%;
    margin-top: 0;
    padding: 16px max(24px, calc((100% - 1104px) / 2));
    color: var(--ink);
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(18px);
}

.menu-toggle {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--ink);
    background: rgba(36, 74, 127, 0.06);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 18px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}

.menu-toggle span:nth-child(1) {
    transform: translate(-50%, -8px);
}

.menu-toggle span:nth-child(2) {
    transform: translate(-50%, -50%);
}

.menu-toggle span:nth-child(3) {
    transform: translate(-50%, 6px);
}

.site-header.is-menu-open .menu-toggle span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.site-header.is-menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .menu-toggle span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(36, 74, 127, 0.08);
}

.brand {
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
}

.brand:hover {
    background: transparent;
    border-color: transparent;
}

.brand__text strong {
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
}

.brand__text small {
    color: rgba(0, 0, 0, 0.5);
    font-size: 0.72rem;
    font-weight: 400;
}

.site-nav {
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
}

.site-nav a,
.header-cta {
    min-height: 36px;
    padding: 8px 13px;
    color: rgba(0, 0, 0, 0.78);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--ink);
    background: rgba(36, 74, 127, 0.06);
}

.site-nav a::after {
    display: none;
}

.header-cta {
    color: #111111;
    background: rgba(36, 74, 127, 0.06);
    box-shadow: none;
}

.header-cta:hover {
    color: #126df7;
    background: rgba(36, 74, 127, 0.1);
    transform: none;
}

.hero {
    min-height: 92svh;
    align-items: start;
    color: var(--ink);
    background: #ffffff;
}

.hero__backdrop {
    inset: 0;
    z-index: -2;
    height: auto;
    background:
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 34%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.84) 68%, #ffffff 100%),
        url("../images/hero-study.png") center 64% / cover no-repeat;
    opacity: 1;
    transform: none;
}

.hero__backdrop::before,
.hero__backdrop::after {
    display: none;
}

.hero__symbols {
    color: var(--ink);
    opacity: 0.07;
}

.hero__symbols span {
    inset: auto;
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
    white-space: nowrap;
}

.hero__symbols span:nth-child(1) {
    top: 21%;
    left: 7%;
}

.hero__symbols span:nth-child(2) {
    top: 20%;
    right: 7%;
}

.hero__symbols span:nth-child(3) {
    bottom: 18%;
    left: 8%;
}

.hero__symbols span:nth-child(4) {
    top: 56%;
    left: 8%;
}

.hero__symbols span:nth-child(5) {
    bottom: 12%;
    right: 8%;
}

.hero__symbols span:nth-child(6) {
    top: 48%;
    right: 9%;
}

.hero__symbols span:nth-child(7) {
    bottom: 31%;
    right: 16%;
}

.hero__content {
    width: min(1104px, calc(100% - 32px));
    padding: 88px 0 52px;
    text-align: center;
}

.hero__notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 96px;
    margin: 0 0 70px;
    padding: 22px 24px;
    text-align: left;
    background: var(--surface);
    border-radius: 24px;
}

.hero__notice strong,
.hero__notice span {
    display: block;
}

.hero__notice strong {
    margin-bottom: 6px;
    color: var(--ink);
    font: var(--tui-font-text-m-bold, 500 15px / 24px var(--font-text));
}

.hero__notice span {
    color: rgba(0, 0, 0, 0.68);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.hero__notice a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    color: #126df7;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.eyebrow,
.section-kicker {
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
}

.hero h1 {
    max-width: 820px;
    margin: 0 auto;
    color: var(--ink);
    font: var(--tui-font-heading-1, 700 50px / 56px var(--font-display));
    font-size: clamp(3rem, 5vw, 4.8rem);
    line-height: 1.08;
}

.hero__lead {
    max-width: 720px;
    margin: 24px auto 0;
    color: rgba(0, 0, 0, 0.68);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.hero-photo {
    display: inline-grid;
    width: 142px;
    height: 142px;
    place-items: center;
    margin: 24px auto 0;
    padding: 7px;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 50%;
    box-shadow: 0 18px 44px rgba(36, 74, 127, 0.08);
}

.hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}

.hero__actions {
    justify-content: center;
    margin-top: 34px;
}

.button,
.material-action {
    min-height: 44px;
    border-radius: 10px;
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.button--primary {
    color: #333333;
    background: var(--amber);
    box-shadow: none;
}

.button--primary:hover {
    background: #ffd42a;
    transform: none;
    box-shadow: none;
}

.button--ghost {
    color: #126df7;
    background: rgba(36, 74, 127, 0.06);
    border: 0;
}

.button--ghost:hover {
    color: #126df7;
    background: rgba(36, 74, 127, 0.1);
    transform: none;
}

.hero__metrics {
    max-width: 820px;
    margin: 44px auto 0;
    gap: 16px;
    overflow: visible;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

.hero__metrics div {
    min-height: 126px;
    padding: 22px;
    text-align: left;
    background: var(--surface);
    border-radius: 24px;
}

.hero__metrics strong {
    color: var(--ink);
    font: var(--tui-font-heading-3, 500 36px / 40px var(--font-display));
}

.hero__metrics span {
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.section {
    padding: 72px 0;
}

.section__inner {
    width: min(1104px, calc(100% - 32px));
}

.section h2,
.parallax-band h2,
.contact h2 {
    color: var(--ink);
    font: var(--tui-font-heading-2, 700 44px / 48px var(--font-display));
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    line-height: 1.12;
}

.section--intro,
.programs,
.method,
.proof {
    background: var(--paper);
}

.section--intro {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 100%);
}

.section--intro::before {
    content: "";
    position: absolute;
    top: 36px;
    right: max(24px, calc((100% - 1180px) / 2));
    width: 180px;
    height: 180px;
    background: var(--amber);
    border-radius: 36px;
    opacity: 0.9;
    transform: rotate(8deg);
}

.lesson-video {
    position: relative;
    overflow: hidden;
    padding: 86px 0;
    background:
        linear-gradient(rgba(36, 74, 127, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 74, 127, 0.055) 1px, transparent 1px),
        #f6f8fb;
    background-size: 42px 42px, 42px 42px, auto;
    isolation: isolate;
}

.lesson-video::after {
    content: "";
    position: absolute;
    right: max(20px, calc((100% - 1180px) / 2));
    bottom: -64px;
    z-index: 0;
    width: 220px;
    height: 220px;
    background: var(--amber);
    border-radius: 44px;
    opacity: 0.92;
    pointer-events: none;
    transform: rotate(-8deg);
}

.lesson-video__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(540px, 1.12fr);
    gap: 52px;
    align-items: center;
}

.lesson-video__copy {
    position: relative;
    max-width: 500px;
    padding: 34px 0 34px 28px;
    border-left: 8px solid var(--amber);
}

.lesson-video__copy h2 {
    margin-top: 12px;
    max-width: 520px;
}

.lesson-video__copy p:not(.section-kicker) {
    margin: 18px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.lesson-video__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.lesson-video__badges span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.74);
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(36, 74, 127, 0.05);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.lesson-video__stage {
    position: relative;
    min-width: 0;
}

.lesson-video__stage::before {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -22px;
    left: 58px;
    z-index: -1;
    height: 42%;
    background: var(--amber);
    border-radius: 28px;
    box-shadow: 0 22px 42px rgba(255, 211, 42, 0.22);
    transform: rotate(2deg);
}

.lesson-video__media {
    position: relative;
    min-width: 0;
    padding: 12px;
    background: #ffffff;
    border: 0;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(36, 74, 127, 0.13);
}

.lesson-video__media::before {
    display: none;
}

.lesson-video__media video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111827;
    border-radius: 20px;
}

.lesson-video__media p {
    margin: 12px 8px 2px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-ui-s, 400 13px / 16px var(--font-text));
}

.intro-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    gap: 56px;
    align-items: center;
}

.intro-copy {
    position: relative;
    z-index: 1;
}

.intro-copy h2 {
    max-width: 620px;
    font-size: clamp(2.55rem, 3.7vw, 3.05rem);
    line-height: 1.1;
}

.intro-text {
    max-width: 560px;
    margin: 24px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.intro-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.intro-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.72);
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(36, 74, 127, 0.05);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.intro-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 16px;
    align-items: stretch;
}

.intro-plan-card,
.intro-score-card,
.intro-stack-card,
.intro-formula-card {
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 24px;
    box-shadow: 0 18px 44px rgba(36, 74, 127, 0.08);
}

.intro-plan-card {
    grid-row: span 2;
    min-height: 360px;
    padding: 24px;
}

.intro-plan-card__header {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(36, 74, 127, 0.08);
}

.intro-plan-card__header span,
.intro-score-card span,
.intro-stack-card span {
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.intro-plan-card__header strong {
    color: var(--ink);
    font: var(--tui-font-heading-3, 500 28px / 32px var(--font-display));
}

.intro-steps {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.intro-steps div {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(36, 74, 127, 0.07);
}

.intro-steps div:last-child {
    border-bottom: 0;
}

.intro-steps mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #333333;
    background: var(--amber);
    border-radius: 12px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.intro-steps span {
    color: var(--ink);
    font: var(--tui-font-text-m-bold, 500 15px / 24px var(--font-text));
}

.intro-steps strong {
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-text-ui-s, 400 13px / 16px var(--font-text));
}

.intro-score-card {
    display: grid;
    align-content: space-between;
    min-height: 172px;
    padding: 20px;
    color: var(--ink);
    background: #eef2f7;
}

.intro-score-card strong {
    margin-top: 8px;
    color: var(--ink);
    font: var(--tui-font-heading-2, 700 44px / 48px var(--font-display));
}

.intro-progress {
    height: 8px;
    overflow: hidden;
    background: rgba(36, 74, 127, 0.1);
    border-radius: 999px;
}

.intro-progress span {
    display: block;
    width: 72%;
    height: 100%;
    background: #126df7;
    border-radius: inherit;
}

.intro-stack-card {
    display: grid;
    align-content: start;
    min-height: 172px;
    padding: 20px;
}

.intro-stack-card strong {
    margin-top: 10px;
    color: var(--ink);
    font: var(--tui-font-text-l-bold, 500 17px / 28px var(--font-text));
}

.intro-stack-card small {
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.56);
    font-size: 0.9rem;
    line-height: 1.45;
}

.intro-formula-card {
    position: absolute;
    right: 136px;
    bottom: -28px;
    display: grid;
    gap: 4px;
    width: 210px;
    padding: 18px;
    color: #333333;
    background: var(--amber);
    border: 0;
    transform: rotate(-3deg);
}

.intro-formula-card span {
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.intro-formula-card strong {
    font: var(--tui-font-heading-3, 500 25px / 30px var(--font-display));
}

.intro-visual--proof {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
}

.intro-proof-card {
    display: grid;
    gap: 12px;
    min-height: 136px;
    align-content: center;
    padding: 24px 26px;
    background: #f1f3f5;
    border: 1px solid rgba(36, 74, 127, 0.06);
    border-radius: 24px;
}

.intro-proof-card strong {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.intro-proof-card span {
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.intro-proof-card__link {
    justify-self: start;
    color: var(--ink);
    border-bottom: 2px solid var(--amber);
    font: var(--tui-font-text-ui-m-bold, 600 15px / 20px var(--font-text));
    text-decoration: none;
}

.intro-proof-card__link:hover {
    color: var(--blue);
}

.intro-text,
.program-card p,
.material-card p,
.method-step p,
.proof-copy p,
.contact-copy p {
    color: rgba(0, 0, 0, 0.62);
}

.program-grid,
.materials-grid {
    gap: 24px;
}

.program-card,
.material-card,
.proof-list div,
.contact-form {
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: none;
}

.program-card {
    min-height: 300px;
    padding: 28px 30px;
}

.program-card::before {
    display: none;
}

.program-card__accent {
    min-height: 34px;
    margin-bottom: 28px;
    color: #333333;
    background: var(--amber);
    border-radius: 10px;
    font-weight: 500;
}

.program-card h3,
.material-card h3,
.method-step h3 {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.program-card li::before {
    background: #126df7;
}

.parallax-band {
    min-height: 420px;
    color: var(--ink);
    background: #f6f7f8;
}

.parallax-band__image {
    inset: -1px;
    background:
        linear-gradient(90deg, #f6f7f8 0%, rgba(246, 247, 248, 0.99) 34%, rgba(246, 247, 248, 0.9) 58%, rgba(246, 247, 248, 0.96) 100%),
        linear-gradient(180deg, rgba(246, 247, 248, 0.28), #f6f7f8),
        url("../images/hero-study.png") right center / cover no-repeat;
    filter: none;
    opacity: 1;
    transform: none;
}

.parallax-band::after {
    display: none;
}

.parallax-band__kicker {
    color: rgba(0, 0, 0, 0.55);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
}

.parallax-band__content {
    width: min(1104px, calc(100% - 32px));
}

.parallax-band h2 {
    max-width: 820px;
    font-size: clamp(1.8rem, 2.7vw, 2.55rem);
    line-height: 1.14;
}

.parallax-quote {
    position: relative;
    max-width: 850px;
    margin: 0;
    padding: 34px 38px 30px 104px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(36, 74, 127, 0.12);
    backdrop-filter: blur(18px);
}

.parallax-quote::before {
    content: "“";
    position: absolute;
    top: 22px;
    left: 30px;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--amber);
    border-radius: 8px;
    font: 900 58px / 1 Georgia, serif;
}

.parallax-quote blockquote {
    margin: 0;
}

.parallax-quote p {
    margin: 0;
    color: var(--ink);
    font: var(--tui-font-heading-2, 700 44px / 48px var(--font-display));
    font-size: clamp(1.55rem, 2.35vw, 2.25rem);
    line-height: 1.16;
}

.parallax-quote figcaption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.parallax-quote figcaption:empty {
    display: none;
}

.parallax-quote figcaption::before {
    content: "";
    width: 28px;
    height: 2px;
    background: #126df7;
    border-radius: 999px;
}

.method-grid {
    gap: 16px;
    overflow: visible;
    border: 0;
    background: transparent;
}

.method-step {
    min-height: 260px;
    padding: 26px;
    border-radius: 24px;
    background: var(--surface);
}

.method-step span {
    color: #126df7;
    font-weight: 500;
}

.portal-flow {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    isolation: isolate;
}

.portal-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(36, 74, 127, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 74, 127, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, transparent 0%, #000000 18%, #000000 82%, transparent 100%);
}

.portal-flow::after {
    display: none;
}

.portal-flow__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 0.68fr);
    gap: 56px;
    align-items: center;
}

.portal-flow__copy > p:not(.section-kicker) {
    max-width: 660px;
    margin: 22px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.portal-flow__points {
    display: grid;
    max-width: 700px;
    margin-top: 30px;
    border-top: 1px solid rgba(36, 74, 127, 0.1);
    border-bottom: 1px solid rgba(36, 74, 127, 0.1);
}

.portal-flow__point {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 0;
}

.portal-flow__point + .portal-flow__point {
    border-top: 1px solid rgba(36, 74, 127, 0.08);
}

.portal-flow__point > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #333333;
    background: var(--amber);
    border-radius: 12px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.portal-flow__point h3,
.portal-flow__point p {
    margin: 0;
}

.portal-flow__point h3 {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.portal-flow__point p {
    margin-top: 7px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.portal-flow__preview {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 20px;
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(36, 74, 127, 0.1);
}

.portal-flow__preview::before {
    display: none;
}

.portal-flow__tabs,
.portal-dashboard {
    position: relative;
    z-index: 1;
}

.portal-flow__tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 12px;
}

.portal-flow__tabs span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.64);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.portal-flow__tabs span:first-child {
    color: #333333;
    background: var(--amber);
}

.portal-dashboard {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.portal-dashboard__top,
.portal-dashboard__row,
.portal-report {
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 20px;
}

.portal-dashboard__top {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
}

.portal-dashboard__top div,
.portal-dashboard__row div:last-child,
.portal-report > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.portal-dashboard__top span,
.portal-dashboard__row span,
.portal-report span {
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.portal-dashboard__top strong,
.portal-dashboard__row strong,
.portal-report strong {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.portal-dashboard__top mark {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.portal-dashboard__row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
}

.portal-dashboard__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #333333;
    background: var(--amber);
    border-radius: 12px;
}

.portal-dashboard__icon--blue {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.portal-report {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
}

.portal-report span,
.portal-report strong {
    color: var(--ink);
}

.portal-report span {
    color: rgba(0, 0, 0, 0.5);
}

.portal-report__bars {
    display: grid;
    gap: 8px;
}

.portal-report__bars span {
    position: relative;
    display: block;
    height: 8px;
    overflow: hidden;
    background: rgba(36, 74, 127, 0.08);
    border-radius: 999px;
}

.portal-report__bars span::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar);
    background: rgba(18, 109, 247, 0.42);
    border-radius: inherit;
}

.materials,
.materials-promo,
.materials--page {
    background: var(--surface-strong);
}

.filter-tabs {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
}

.filter-tab {
    color: rgba(0, 0, 0, 0.68);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
    white-space: nowrap;
}

.filter-tab.is-active,
.filter-tab:hover {
    color: var(--ink);
    background: var(--amber);
}

.material-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    padding: 24px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.material-card:hover {
    border-color: rgba(18, 109, 247, 0.2);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

.material-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--amber);
}

.material-card::after {
    content: "";
    position: absolute;
    top: -52px;
    right: -42px;
    width: 154px;
    height: 154px;
    background: rgba(255, 221, 45, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.material-card[data-type="text"]::before {
    background: #126df7;
}

.material-card[data-type="text"]::after {
    background: rgba(18, 109, 247, 0.1);
}

.material-card[data-type="video"]::before {
    background: #111111;
}

.material-card[data-type="video"]::after {
    background: rgba(0, 0, 0, 0.06);
}

.material-card[data-type="article"]::before {
    background: #ffdd2d;
}

.material-card[data-type="article"]::after {
    background: rgba(255, 221, 45, 0.16);
}

.material-card > * {
    position: relative;
    z-index: 1;
}

.material-card__top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

.material-card__icon {
    display: grid;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #111111;
    background: var(--amber);
    border-radius: 16px;
}

.material-card__icon svg {
    width: 25px;
    height: 25px;
}

.material-card__icon--text {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.material-card__icon--video {
    color: #ffffff;
    background: #111111;
}

.material-card__icon--article {
    color: #111111;
    background: var(--amber);
}

.material-card__labels {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.material-card__tag {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    padding: 5px 10px;
    color: #333333;
    background: rgba(255, 221, 45, 0.72);
    border-radius: 999px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.material-card[data-category="oge"] .material-card__tag {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.material-card[data-category="ege_base"] .material-card__tag {
    color: rgba(0, 0, 0, 0.7);
    background: #eef2f7;
}

.material-card[data-category="cheatsheets"] .material-card__tag {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.1);
}

.material-card__meta {
    margin: 0;
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
}

.material-card__body {
    display: grid;
    gap: 12px;
    padding: 0;
}

.material-card__body h3,
.material-card__body p {
    margin: 0;
}

.material-card__footer {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 24px;
}

.material-card__hint {
    min-width: 0;
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.material-action {
    flex: 0 0 auto;
    width: auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 14px;
    color: #333333;
    background: var(--amber);
    border-radius: 12px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
    white-space: nowrap;
}

.materials-empty {
    display: grid;
    grid-column: 1 / -1;
    gap: 8px;
    min-height: 180px;
    align-content: center;
    padding: 28px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.materials-empty strong {
    color: var(--ink);
    font: var(--tui-font-heading-4, 600 24px / 30px var(--font-display));
}

.materials-empty span {
    max-width: 520px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.materials-empty--search {
    margin-top: 18px;
}

.materials-empty[hidden] {
    display: none;
}

.material-action:hover {
    color: #333333;
    background: #ffd42a;
    transform: translateY(-1px);
}

.pricing {
    background: #ffffff;
}

.pricing-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.46fr);
    gap: 30px;
    align-items: end;
    margin-bottom: 24px;
}

.pricing-head p:not(.section-kicker) {
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.pricing-head--solo {
    grid-template-columns: minmax(0, 760px);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.pricing-card {
    position: relative;
    display: grid;
    min-height: 360px;
    align-content: space-between;
    gap: 22px;
    overflow: hidden;
    padding: 30px;
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(36, 74, 127, 0.08);
}

.pricing-card::after {
    content: "";
    position: absolute;
    top: -58px;
    right: -44px;
    width: 170px;
    height: 170px;
    background: var(--amber);
    border-radius: 34px;
    opacity: 0.42;
    transform: rotate(9deg);
    pointer-events: none;
}

.pricing-card > * {
    position: relative;
    z-index: 1;
}

.pricing-card__top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.pricing-card__label,
.pricing-card__discount {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.pricing-card__label {
    color: var(--ink);
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
}

.pricing-card__discount {
    color: #333333;
    background: var(--amber);
}

.pricing-card h3 {
    max-width: 520px;
    margin: 0;
    color: var(--ink);
    font: var(--tui-font-heading-4, 600 28px / 34px var(--font-display));
}

.pricing-card__pricebox {
    display: grid;
    gap: 6px;
}

.pricing-card__caption {
    color: rgba(0, 0, 0, 0.46);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.pricing-card__old {
    width: max-content;
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
    text-decoration: line-through;
    text-decoration-color: #e04f3d;
    text-decoration-thickness: 2px;
}

.pricing-card__price {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.pricing-card__price strong {
    color: var(--ink);
    font: var(--tui-font-heading-1, 700 56px / 60px var(--font-display));
    font-size: clamp(2.65rem, 4vw, 3.75rem);
    letter-spacing: 0;
}

.pricing-card__price span {
    margin-bottom: 8px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.pricing-card p {
    max-width: 540px;
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.pricing-card__cta {
    justify-self: start;
    width: fit-content;
    margin-top: 2px;
    padding-right: 20px;
    padding-left: 20px;
}

.pricing-card__cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.result-cases {
    background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.result-cases__head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.52fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 28px;
}

.result-cases__head p:not(.section-kicker) {
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.result-cases__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.result-case-card {
    position: relative;
    display: grid;
    grid-template-rows: minmax(118px, auto) minmax(126px, auto) minmax(74px, auto) minmax(0, 1fr);
    min-height: 420px;
    gap: 22px;
    overflow: hidden;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(36, 74, 127, 0.08);
}

.result-case-card::after {
    content: "";
    position: absolute;
    top: -72px;
    right: -68px;
    width: 150px;
    height: 150px;
    background: var(--amber);
    border-radius: 30px;
    opacity: 0.34;
    transform: rotate(9deg);
    pointer-events: none;
}

.result-case-card > * {
    position: relative;
    z-index: 1;
}

.result-case-card__top {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 118px;
}

.result-case-card__top span {
    display: inline-flex;
    width: max-content;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    color: #333333;
    background: var(--amber);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.result-case-card__top strong {
    max-width: 300px;
    color: var(--ink);
    font: var(--tui-font-heading-4, 600 28px / 34px var(--font-display));
}

.result-case-card__scores {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 126px;
}

.result-case-card__scores div {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 116px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
}

.result-case-card__scores span,
.result-case-card__scores small {
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.result-case-card__scores strong {
    color: var(--ink);
    font: var(--tui-font-heading-1, 700 52px / 56px var(--font-display));
    letter-spacing: 0;
}

.result-case-card__scores svg {
    width: 28px;
    height: 28px;
    justify-self: center;
    color: #126df7;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.result-case-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-height: 74px;
    margin: 0;
}

.result-case-card__meta div {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 12px;
    background: rgba(255, 221, 45, 0.22);
    border-radius: 8px;
}

.result-case-card__meta dt {
    color: rgba(0, 0, 0, 0.48);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.result-case-card__meta dd {
    margin: 0;
    color: var(--ink);
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.result-case-card p {
    align-self: start;
    margin: 0;
    color: rgba(0, 0, 0, 0.64);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.result-cases__note {
    max-width: 820px;
    margin: 24px 0 0;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-m, 400 15px / 24px var(--font-text));
}

.proof-list div {
    background: var(--surface);
}

.contact {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface) 28%, var(--surface) 100%);
    isolation: isolate;
}

.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(36, 74, 127, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 74, 127, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, transparent 0%, black 34%, black 100%);
    pointer-events: none;
}

.contact__parallax {
    display: none;
}

.contact-grid {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 0.82fr) minmax(420px, 0.62fr);
    gap: 58px;
    align-items: center;
}

.contact-copy p,
.contact-form span {
    color: rgba(0, 0, 0, 0.62);
}

.contact-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 620px;
    margin-top: 28px;
}

.contact-highlights span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 12px;
    color: rgba(0, 0, 0, 0.7);
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.contact-badge {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    margin: 0 0 16px;
    padding: 8px 14px;
    color: #111111;
    background: var(--amber);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.contact-links a {
    color: #126df7;
    background: #ffffff;
    border: 1px solid var(--line);
}

.contact-links a:hover {
    color: #126df7;
    background: rgba(36, 74, 127, 0.06);
}

.contact-form {
    background: #ffffff;
    border: 0;
    box-shadow: var(--shadow);
    backdrop-filter: none;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

.contact-form select {
    color: var(--ink);
}

.contact-direct-card {
    display: grid;
    gap: 24px;
    padding: 30px;
    background: #ffffff;
    border: 0;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.contact-direct-card__head {
    display: grid;
    gap: 8px;
}

.contact-direct-card__head div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.contact-direct-card__head span {
    color: rgba(0, 0, 0, 0.46);
    font: var(--tui-font-text-ui-xs-bold, 500 11px / 13px var(--font-text));
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.contact-direct-card h3 {
    margin: 0;
    color: var(--ink);
    font: var(--tui-font-heading-4, 600 28px / 34px var(--font-display));
}

.contact-direct-card p {
    max-width: 240px;
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-ui-s, 400 13px / 18px var(--font-text));
}

.contact-direct-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.contact-direct-action {
    display: grid;
    gap: 10px;
    justify-items: center;
    align-items: center;
    min-height: 86px;
    padding: 14px 10px;
    text-align: center;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.contact-direct-action:hover {
    color: var(--ink);
    background: rgba(255, 221, 45, 0.28);
    border-color: rgba(255, 221, 45, 0.7);
    transform: translateY(-1px);
}

.contact-direct-action--primary {
    background: var(--surface);
    border-color: rgba(36, 74, 127, 0.08);
}

.contact-direct-action--telegram {
    background: var(--surface);
}

.contact-direct-action--phone {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-column: 1 / -1;
    justify-items: start;
    min-height: 72px;
    padding: 16px 18px;
    text-align: left;
    background: var(--surface);
}

.contact-direct-action--max {
    background: var(--surface);
}

.contact-direct-action img,
.contact-direct-action svg {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.contact-direct-action svg {
    color: #126df7;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-direct-action span {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.contact-direct-action strong {
    color: var(--ink);
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.contact-phone-number {
    white-space: nowrap;
    font: var(--tui-font-text-ui-m-bold, 500 15px / 20px var(--font-text));
}

.contact-direct-action small {
    color: rgba(0, 0, 0, 0.52);
    font: var(--tui-font-text-ui-s, 400 13px / 18px var(--font-text));
}

.site-footer {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    background: #111111;
    border-top: 0;
    padding: 0;
}

.site-footer a:hover {
    color: #ffffff;
}

.footer-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) repeat(3, minmax(150px, 0.65fr));
    gap: 32px;
    padding: 0 0 36px;
}

.footer-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.footer-column h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.2;
}

.footer-column p {
    max-width: 440px;
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.65;
}

.footer-column a,
.footer-column span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.95rem;
}

.footer-column a {
    transition: color 160ms ease;
}

.footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.footer-tags span {
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 0.84rem;
}

.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 55;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    color: #111111;
    background: var(--amber);
    border-radius: 50%;
    box-shadow: 0 18px 36px rgba(36, 74, 127, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.94);
    transition: opacity 180ms ease, transform 180ms ease, background 160ms ease, box-shadow 160ms ease;
}

.scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.scroll-top svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scroll-top:hover {
    color: #111111;
    background: #ffe76d;
    box-shadow: 0 20px 42px rgba(36, 74, 127, 0.26);
    transform: translateY(-2px) scale(1);
}

.scroll-top:focus-visible {
    outline: 3px solid rgba(18, 109, 247, 0.34);
    outline-offset: 4px;
}

.video-modal__overlay {
    background: rgba(0, 0, 0, 0.48);
}

.video-modal__dialog {
    color: var(--ink);
    background: #ffffff;
    border: 0;
    border-radius: 24px;
}

.video-modal__close {
    color: var(--ink);
    background: var(--surface);
    border: 0;
}

.materials-page .site-header {
    background: rgba(255, 255, 255, 0.96);
}

.materials-hero {
    min-height: 66svh;
    padding: 126px 0 64px;
    color: var(--ink);
    background: #ffffff;
}

.materials-hero__image {
    inset: 0;
    height: auto;
    background:
        linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 32%, rgba(255, 255, 255, 0.91) 54%, rgba(255, 255, 255, 0.86) 68%, #ffffff 100%),
        url("../images/hero-study.png") center 64% / cover no-repeat;
    opacity: 1;
    transform: none;
}

.materials-hero::after {
    display: none;
}

.materials-hero__content {
    width: min(1104px, calc(100% - 32px));
    text-align: center;
}

.materials-hero h1 {
    max-width: 820px;
    margin: 0 auto;
    color: var(--ink);
    font: var(--tui-font-heading-1, 700 50px / 56px var(--font-display));
    font-size: clamp(2.8rem, 4.8vw, 4.7rem);
    line-height: 1.08;
}

.materials-hero p:not(.eyebrow) {
    max-width: 740px;
    margin: 24px auto 0;
    color: rgba(0, 0, 0, 0.68);
}

.article-page {
    background: var(--surface-strong);
}

.article-shell {
    width: min(100% - 48px, 980px);
    margin: 0 auto;
    padding: 132px 0 84px;
}

.article-hero {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}

.article-back {
    width: fit-content;
    color: #126df7;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.article-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.article-labels span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    color: #333333;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.article-labels span:first-child {
    background: var(--amber);
    border-color: transparent;
}

.article-hero h1 {
    max-width: 860px;
    margin: 0;
    font: var(--tui-font-heading-1, 700 64px / 70px var(--font-display));
    letter-spacing: 0;
}

.article-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-xl, 400 24px / 32px var(--font-text));
}

.article-card {
    display: grid;
    gap: 34px;
    padding: clamp(24px, 5vw, 54px);
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.article-body {
    color: #333333;
    font: var(--tui-font-text-l, 400 20px / 32px var(--font-text));
}

.article-body > *:first-child {
    margin-top: 0;
}

.article-body > *:last-child {
    margin-bottom: 0;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    margin: 34px 0 14px;
    color: var(--ink);
    font-family: var(--font-display);
    letter-spacing: 0;
    line-height: 1.14;
}

.article-body h2 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.article-body h3 {
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.article-body h4 {
    font-size: 1.25rem;
}

.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body figure,
.article-body pre,
.article-body hr {
    margin: 0 0 22px;
}

.article-body ul,
.article-body ol {
    padding-left: 1.3em;
}

.article-body li + li {
    margin-top: 8px;
}

.article-body a {
    color: #126df7;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-body blockquote {
    padding: 18px 20px;
    color: var(--ink);
    background: rgba(255, 221, 45, 0.24);
    border-left: 5px solid var(--amber);
    border-radius: 8px;
}

.article-body video,
.article-body iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 8px;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 8px;
}

.article-body iframe {
    aspect-ratio: 16 / 9;
}

.article-body figcaption {
    margin-top: 9px;
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-s, 400 13px / 16px var(--font-text));
}

.article-body pre,
.article-body code {
    color: #111111;
    background: #f6f7f8;
    border-radius: 8px;
}

.article-body pre {
    overflow-x: auto;
    padding: 16px;
}

.article-body code {
    padding: 2px 5px;
}

.article-body hr {
    border: 0;
    border-top: 1px solid var(--line);
}

.article-reactions {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    background: #f6f7f8;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

.article-reactions strong,
.article-reactions span {
    display: block;
}

.article-reactions strong {
    color: var(--ink);
    font: var(--tui-font-heading-5, 600 22px / 28px var(--font-display));
}

.article-reactions div > span {
    margin-top: 4px;
    color: rgba(0, 0, 0, 0.58);
    font: var(--tui-font-text-ui-s, 400 13px / 16px var(--font-text));
}

.article-reactions__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.article-reactions button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #333333;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    cursor: pointer;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.article-reactions button:hover,
.article-reactions button.is-active {
    background: var(--amber);
    border-color: transparent;
}

.article-reactions button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.article-reactions button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.article-reactions b {
    min-width: 18px;
    color: rgba(0, 0, 0, 0.64);
    font: inherit;
    text-align: right;
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: auto 1fr auto auto;
        padding: 12px 16px;
    }

    .hero__content {
        padding-top: 84px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 16px;
        right: 16px;
        display: none;
        grid-template-columns: 1fr;
        justify-self: stretch;
        gap: 4px;
        padding: 8px;
        background: #ffffff;
        border: 1px solid rgba(36, 74, 127, 0.08);
        border-radius: 16px;
        box-shadow: 0 18px 44px rgba(36, 74, 127, 0.14);
    }

    .site-header.is-menu-open .site-nav {
        display: grid;
    }

    .site-nav a {
        min-height: 44px;
        justify-content: flex-start;
        color: var(--ink);
    }

    .hero__notice,
    .materials-promo__grid {
        grid-template-columns: 1fr;
    }

    .section--intro::before {
        top: 108px;
        right: -36px;
    }

    .intro-copy h2 {
        max-width: 760px;
        font-size: 2.85rem;
    }

    .intro-text {
        max-width: 720px;
    }

    .intro-visual {
        max-width: 760px;
        grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .scroll-top {
        right: 18px;
        bottom: 18px;
        width: 52px;
        height: 52px;
    }

    .hero__notice {
        display: grid;
        justify-items: start;
        margin-bottom: 52px;
    }

    .article-shell {
        padding-top: 112px;
    }

    .article-hero h1 {
        font-size: clamp(2.4rem, 7vw, 3.6rem);
        line-height: 1.08;
    }
}

@media (max-width: 700px) {
    .site-header {
        width: 100%;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.94);
        border-radius: 0;
    }

    .brand {
        padding: 0;
    }

    .header-cta {
        color: #126df7;
        background: rgba(36, 74, 127, 0.06);
        padding: 8px 12px;
        justify-self: end;
        width: auto;
    }

    .header-actions {
        gap: 6px;
        justify-self: end;
    }

    .header-cta--student {
        order: 2;
        min-height: 36px;
        padding: 8px 10px;
        color: #126df7;
        background: rgba(36, 74, 127, 0.06);
        box-shadow: none;
    }

    .header-cta--contact {
        order: 1;
        display: inline-flex;
        min-height: 36px;
        padding: 8px 12px;
        color: var(--ink);
        background: var(--amber);
        box-shadow: none;
    }

    .menu-toggle {
        width: 38px;
        height: 38px;
    }

    .site-nav {
        left: 12px;
        right: 12px;
    }

    .hero {
        min-height: 92svh;
    }

    .hero__content {
        width: calc(100% - 24px);
        padding-top: 78px;
        padding-bottom: 32px;
    }

    .hero__notice {
        min-height: auto;
        margin-bottom: 42px;
        padding: 18px;
        border-radius: 20px;
    }

    .hero h1 {
        font-size: clamp(2.15rem, 10.8vw, 3.05rem);
        line-height: 1.08;
    }

    .hero__backdrop::before {
        inset: 270px -44px 52px;
    }

    .hero__backdrop::after {
        right: -42px;
        bottom: 8%;
        width: 300px;
        height: 230px;
        opacity: 0.44;
    }

    .hero__symbols {
        opacity: 0.06;
    }

    .hero__symbols span {
        font-size: 0.86rem;
        line-height: 1.2;
    }

    .hero__symbols span:nth-child(2),
    .hero__symbols span:nth-child(6) {
        display: none;
    }

    .hero__lead {
        font-size: 1rem;
        line-height: 1.55;
    }

    .hero__metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hero__metrics div {
        min-height: auto;
        padding: 18px;
    }

    .section--intro::before {
        width: 126px;
        height: 126px;
        border-radius: 28px;
    }

    .intro-copy h2 {
        font-size: 2.2rem;
        line-height: 1.12;
    }

    .intro-pills {
        gap: 8px;
    }

    .intro-pills span {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 0.82rem;
    }

    .article-shell {
        width: calc(100% - 24px);
        padding: 96px 0 58px;
    }

    .article-hero {
        gap: 14px;
        margin-bottom: 18px;
    }

    .article-hero h1 {
        font-size: clamp(2rem, 9vw, 2.75rem);
        line-height: 1.08;
    }

    .article-hero p,
    .article-body {
        font-size: 1rem;
        line-height: 1.62;
    }

    .article-card {
        padding: 20px;
    }

    .article-reactions {
        display: grid;
        gap: 14px;
        padding: 16px;
    }

    .article-reactions__actions,
    .article-reactions button {
        width: 100%;
    }

    .article-reactions button {
        justify-content: center;
    }

    .intro-visual {
        grid-template-columns: 1fr;
    }

    .intro-plan-card,
    .intro-score-card,
    .intro-stack-card,
    .intro-formula-card {
        border-radius: 20px;
    }

    .intro-plan-card {
        grid-row: auto;
        min-height: auto;
        padding: 18px;
    }

    .intro-plan-card__header {
        display: grid;
    }

    .intro-steps div {
        grid-template-columns: 38px 1fr;
        gap: 8px 10px;
    }

    .intro-steps strong {
        grid-column: 2;
    }

    .intro-score-card,
    .intro-stack-card {
        min-height: auto;
    }

    .intro-formula-card {
        position: static;
        width: auto;
        transform: none;
    }

    .section h2,
    .contact h2,
    .materials-hero h1 {
        font-size: clamp(1.65rem, 7.4vw, 2rem);
        line-height: 1.14;
    }

    .parallax-band h2 {
        font-size: clamp(1.55rem, 7vw, 1.95rem);
        line-height: 1.14;
    }

    .parallax-band {
        min-height: auto;
        padding: 58px 0;
    }

    .parallax-band__content {
        width: min(100% - 32px, 520px);
    }

    .parallax-band__kicker {
        margin-bottom: 18px;
        line-height: 1.35;
    }

    .parallax-quote {
        padding: 74px 24px 28px;
    }

    .parallax-quote::before {
        top: 22px;
        left: 24px;
        width: 44px;
        height: 44px;
        font-size: 50px;
    }

    .parallax-quote p {
        font-size: clamp(1.15rem, 5.2vw, 1.55rem);
        line-height: 1.28;
    }

    .parallax-quote figcaption {
        margin-top: 22px;
        font-size: 0.95rem;
    }

    .section--intro .intro-copy h2 {
        font-size: 2rem;
        line-height: 1.12;
    }

    .materials-hero {
        min-height: 64svh;
        padding: 104px 0 52px;
    }

    .materials-hero__content {
        text-align: left;
    }

    .materials-hero h1,
    .materials-hero p:not(.eyebrow) {
        margin-left: 0;
        margin-right: 0;
    }

    .material-card,
    .program-card,
    .method-step,
    .proof-list div,
    .contact-form,
    .contact-direct-card {
        border-radius: 20px;
    }

    .material-card {
        min-height: 0;
        padding: 20px;
    }

    .material-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .material-action {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .intro-visual {
        width: 100%;
        max-width: 100%;
        transform: none !important;
    }
}

@media (max-width: 700px) {
    .section--intro {
        overflow: hidden;
    }

    .section--intro::before {
        top: 86px;
        right: -44px;
        width: 104px;
        height: 104px;
        border-radius: 24px;
        opacity: 0.5;
    }

    .intro-grid {
        gap: 28px;
        align-items: start;
    }

    .intro-copy,
    .intro-copy h2,
    .intro-text {
        max-width: 100%;
        min-width: 0;
    }

    .intro-visual {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .intro-plan-card,
    .intro-score-card,
    .intro-stack-card,
    .intro-formula-card {
        width: 100%;
    }

    .intro-plan-card {
        padding: 16px;
    }

    .intro-plan-card__header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .intro-plan-card__header strong {
        font-size: 1.45rem;
        line-height: 1.12;
        white-space: nowrap;
    }

    .intro-steps {
        gap: 8px;
        margin-top: 14px;
    }

    .intro-steps div {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 8px;
        min-height: 50px;
        padding: 8px 0;
    }

    .intro-steps mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .intro-steps span {
        min-width: 0;
        line-height: 1.35;
    }

    .intro-steps strong {
        grid-column: auto;
        justify-self: end;
        white-space: nowrap;
    }

    .intro-score-card,
    .intro-stack-card {
        padding: 16px;
    }

    .intro-score-card {
        min-height: 132px;
    }

    .intro-score-card strong {
        font-size: 2.25rem;
        line-height: 1.1;
    }

    .intro-stack-card strong {
        font-size: 1rem;
        line-height: 1.35;
    }

    .intro-formula-card {
        justify-self: end;
        width: min(100%, 220px);
        padding: 14px 16px;
        transform: rotate(-2deg);
    }

    .intro-formula-card strong {
        font-size: 1.35rem;
        line-height: 1.2;
    }
}

.contact-alert {
    padding: 12px 14px;
    color: var(--ink);
    border-radius: 14px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 18px var(--font-text));
}

.contact-alert--success {
    background: rgba(255, 221, 45, 0.64);
}

.contact-alert--error {
    color: #9f1c12;
    background: rgba(214, 52, 38, 0.1);
}

.contact-form .contact-form__trap {
    position: absolute;
    left: -100vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.reviews {
    background: #ffffff;
}

.reviews-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.52fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 28px;
}

.reviews-head p:not(.section-kicker) {
    margin: 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.review-card {
    display: grid;
    min-height: 330px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 24px;
}

.review-card__top {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.review-card__top span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 12px;
    color: #333333;
    background: var(--amber);
    border-radius: 10px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.review-card__top svg {
    width: 34px;
    height: 34px;
    color: rgba(18, 109, 247, 0.34);
    stroke-width: 1.7;
}

.review-card p {
    margin: 0;
    color: var(--ink);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.review-card footer {
    align-self: end;
    margin-top: 28px;
    color: rgba(0, 0, 0, 0.52);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.faq {
    background: #ffffff;
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.48fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.faq-copy {
    position: sticky;
    top: 104px;
}

.faq-copy p:not(.section-kicker) {
    max-width: 420px;
    margin: 18px 0 0;
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.faq-copy__button {
    margin-top: 28px;
    color: #126df7;
    background: rgba(36, 74, 127, 0.06);
}

.faq-copy__button:hover {
    color: #126df7;
    background: rgba(36, 74, 127, 0.1);
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 22px;
    transition: background 160ms ease, border-color 160ms ease;
}

.faq-item[open] {
    background: #ffffff;
    border-color: rgba(18, 109, 247, 0.18);
    box-shadow: 0 18px 48px rgba(36, 74, 127, 0.08);
}

.faq-item summary {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    padding: 22px 24px;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary span {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.faq-item summary svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #111111;
    transition: transform 160ms ease;
}

.faq-item[open] summary svg {
    transform: rotate(180deg);
}

.faq-item p {
    max-width: 780px;
    margin: 0;
    padding: 0 24px 24px;
    color: rgba(0, 0, 0, 0.64);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.contact-links a {
    overflow-wrap: anywhere;
}

.contact-links--email {
    margin-top: 10px;
}

.messenger-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.contact-messengers {
    margin-top: 14px;
}

.messenger-link {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #111111;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.messenger-link:hover {
    color: #111111;
    background: var(--amber);
    border-color: var(--amber);
    transform: translateY(-1px);
}

.messenger-link img {
    display: block;
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.messenger-link--whatsapp:hover {
    background: #ddf7e7;
    border-color: rgba(26, 158, 87, 0.22);
}

.messenger-link--telegram:hover {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
    border-color: rgba(18, 109, 247, 0.16);
}

.messenger-link--max img {
    width: 25px;
    height: 25px;
    border-radius: 7px;
}

.footer-messengers,
.privacy-messengers {
    margin-top: 4px;
}

.footer-contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}

.footer-contact-row .footer-messengers {
    margin-top: 0;
}

.site-footer .messenger-link {
    width: 26px;
    height: 26px;
    color: #ffffff;
    background: transparent;
    border-color: transparent;
}

.site-footer .messenger-link:hover {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
}

.site-footer .messenger-link img {
    width: 18px;
    height: 18px;
    opacity: 1;
    filter: none;
}

.site-footer .messenger-link--max img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.site-footer .messenger-link:hover img {
    opacity: 0.78;
}

.contact-form .contact-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 2px;
}

.contact-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: var(--amber);
    cursor: pointer;
}

.contact-form .contact-consent span {
    color: rgba(0, 0, 0, 0.62);
    font: var(--tui-font-text-ui-s, 400 13px / 18px var(--font-text));
}

.contact-consent a {
    color: #126df7;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.privacy-page {
    background: #ffffff;
}

.privacy-hero {
    padding: 138px 0 54px;
    background: #ffffff;
}

.privacy-hero__inner {
    text-align: center;
}

.privacy-hero h1 {
    max-width: 880px;
    margin: 0 auto;
    color: var(--ink);
    font: var(--tui-font-heading-1, 700 50px / 56px var(--font-display));
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: 1.06;
}

.privacy-hero p:not(.section-kicker) {
    max-width: 720px;
    margin: 22px auto 0;
    color: rgba(0, 0, 0, 0.64);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.privacy-content {
    background: var(--surface-strong);
}

.privacy-grid {
    display: grid;
    grid-template-columns: minmax(230px, 0.32fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.privacy-note,
.privacy-card {
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 24px;
}

.privacy-note {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 10px;
    padding: 22px;
}

.privacy-note strong {
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.privacy-note a {
    color: #126df7;
    overflow-wrap: anywhere;
}

.privacy-note .messenger-link {
    color: #111111;
}

.privacy-note .messenger-link:hover {
    color: #111111;
}

.privacy-note span {
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.5);
    font: var(--tui-font-text-ui-s, 400 13px / 18px var(--font-text));
}

.privacy-card {
    padding: 30px;
}

.privacy-card h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font: var(--tui-font-heading-6, 500 20px / 24px var(--font-display));
}

.privacy-card p {
    margin: 0 0 28px;
    color: rgba(0, 0, 0, 0.64);
    font: var(--tui-font-text-l, 400 17px / 28px var(--font-text));
}

.privacy-card p:last-child {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .section--intro {
        overflow: hidden;
    }

    .section--intro::before {
        top: 104px;
        right: -44px;
        width: 120px;
        height: 120px;
        border-radius: 28px;
        opacity: 0.48;
    }

    .section--intro .intro-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        align-items: start;
    }

    .lesson-video__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .lesson-video__copy {
        max-width: 720px;
    }

    .lesson-video__stage {
        max-width: 760px;
    }

    .intro-copy,
    .intro-copy h2,
    .intro-text,
    .intro-visual {
        max-width: 100%;
        min-width: 0;
    }

    .intro-visual {
        width: 100%;
        transform: none !important;
    }

    .intro-proof-card {
        width: 100%;
        max-width: 100%;
    }

    .reviews-head,
    .result-cases__head,
    .pricing-head,
    .pricing-grid,
    .result-cases__grid,
    .reviews-grid,
    .contact-grid,
    .portal-flow__grid,
    .faq-layout,
    .privacy-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-grid {
        gap: 34px;
        align-items: start;
    }

    .portal-flow__grid {
        gap: 32px;
    }

    .portal-flow::after {
        top: 82px;
        right: -40px;
        width: 118px;
        height: 118px;
        opacity: 0.34;
    }

    .faq-copy,
    .privacy-note {
        position: static;
    }

    .faq-copy p:not(.section-kicker) {
        max-width: 720px;
    }

    .review-card {
        min-height: auto;
    }
}

@media (max-width: 700px) {
    .section--intro {
        padding-top: 58px;
    }

    .section--intro::before {
        top: 92px;
        right: -54px;
        width: 110px;
        height: 110px;
        opacity: 0.42;
    }

    .section--intro .intro-grid {
        gap: 26px;
    }

    .lesson-video {
        padding: 48px 0;
    }

    .lesson-video__grid {
        gap: 22px;
    }

    .lesson-video__copy h2 {
        font-size: 1.85rem;
        line-height: 1.12;
    }

    .lesson-video__copy p:not(.section-kicker) {
        font-size: 1rem;
        line-height: 1.55;
    }

    .lesson-video__media {
        padding: 8px;
        border-radius: 20px;
    }

    .lesson-video__media video {
        border-radius: 14px;
    }

    .intro-copy h2,
    .section--intro .intro-copy h2 {
        font-size: 1.85rem;
        line-height: 1.12;
    }

    .intro-text {
        margin-top: 18px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .intro-visual {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .intro-proof-card {
        min-height: auto;
        padding: 16px;
        border-radius: 20px;
    }

    .intro-proof-card span {
        font-size: 1rem;
        line-height: 1.55;
    }

    .intro-plan-card,
    .intro-score-card,
    .intro-stack-card,
    .intro-formula-card {
        width: 100%;
        max-width: 100%;
    }

    .intro-plan-card {
        grid-row: auto;
        min-height: auto;
        padding: 16px;
    }

    .intro-plan-card__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .intro-plan-card__header strong {
        font-size: 1.45rem;
        line-height: 1.12;
    }

    .intro-steps div {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .intro-steps strong {
        grid-column: auto;
    }

    .intro-score-card,
    .intro-stack-card {
        min-height: auto;
        padding: 16px;
    }

    .intro-formula-card {
        justify-self: stretch;
        width: 100%;
        transform: none;
    }

    .reviews-head {
        gap: 18px;
    }

    .result-cases__head {
        gap: 18px;
    }

    .result-cases__head p:not(.section-kicker) {
        font-size: 1rem;
        line-height: 1.55;
    }

    .result-case-card {
        grid-template-rows: none;
        min-height: 0;
        gap: 18px;
        padding: 22px;
        border-radius: 20px;
    }

    .result-case-card__top,
    .result-case-card__scores,
    .result-case-card__scores div,
    .result-case-card__meta {
        min-height: 0;
    }

    .result-case-card::after {
        top: -58px;
        right: -58px;
        width: 130px;
        height: 130px;
        border-radius: 28px;
    }

    .result-case-card__top strong {
        font-size: 1.45rem;
        line-height: 1.18;
    }

    .result-case-card__scores {
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
        gap: 8px;
    }

    .result-case-card__scores div {
        padding: 14px;
    }

    .result-case-card__scores strong {
        font-size: clamp(2.25rem, 14vw, 3rem);
        line-height: 1.08;
    }

    .result-case-card__scores svg {
        width: 24px;
        height: 24px;
    }

    .result-case-card__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .pricing-head {
        gap: 16px;
        margin-bottom: 18px;
    }

    .pricing-head p:not(.section-kicker) {
        font-size: 1rem;
        line-height: 1.55;
    }

    .pricing-card {
        min-height: 0;
        gap: 18px;
        padding: 22px;
        border-radius: 20px;
    }

    .pricing-card::after {
        top: -54px;
        right: -54px;
        width: 138px;
        height: 138px;
        border-radius: 28px;
    }

    .pricing-card h3 {
        font-size: 1.35rem;
        line-height: 1.18;
    }

    .pricing-card__price strong {
        font-size: clamp(2.25rem, 12vw, 3rem);
        line-height: 1.08;
    }

    .pricing-card__cta {
        width: 100%;
    }

    .portal-flow__copy h2 {
        font-size: 1.85rem;
        line-height: 1.12;
    }

    .portal-flow__copy > p:not(.section-kicker) {
        margin-top: 18px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .portal-flow__points {
        margin-top: 22px;
    }

    .portal-flow__point {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 13px;
        padding: 16px 0;
    }

    .portal-flow__point > span {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .portal-flow__point h3,
    .portal-dashboard__top strong,
    .portal-dashboard__row strong,
    .portal-report strong {
        font-size: 1.12rem;
        line-height: 1.2;
    }

    .portal-flow__preview {
        padding: 14px;
        border-radius: 20px;
    }

    .portal-flow__tabs {
        width: 100%;
    }

    .portal-flow__tabs span {
        flex: 1 1 0;
        justify-content: center;
        padding-right: 8px;
        padding-left: 8px;
        text-align: center;
    }

    .portal-dashboard__top {
        display: grid;
        align-items: start;
        padding: 16px;
    }

    .portal-dashboard__row {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px 16px;
    }

    .portal-report {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 18px;
    }

    .review-card {
        padding: 20px;
        border-radius: 20px;
    }

    .review-card__top {
        margin-bottom: 20px;
    }

    .review-card p {
        font-size: 1rem;
        line-height: 1.55;
    }

    .faq-layout {
        gap: 22px;
    }

    .faq-item {
        border-radius: 18px;
    }

    .faq-item summary {
        min-height: 68px;
        padding: 18px;
    }

    .faq-item summary span {
        font-size: 1rem;
        line-height: 1.35;
    }

    .faq-item p {
        padding: 0 18px 18px;
        font-size: 1rem;
        line-height: 1.55;
    }

    .contact-direct-card {
        gap: 18px;
        padding: 22px;
        border-radius: 20px;
    }

    .contact-direct-card__head {
        display: grid;
        gap: 10px;
    }

    .contact-direct-card p {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.55;
    }

    .contact-direct-card h3 {
        font-size: 1.45rem;
        line-height: 1.18;
    }

    .contact-direct-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .contact-direct-action {
        grid-template-columns: minmax(0, 1fr);
        min-height: 74px;
        align-content: center;
        padding: 12px 8px;
    }

    .contact-direct-action img,
    .contact-direct-action svg {
        width: 28px;
        height: 28px;
    }

    .contact-direct-action strong {
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .contact-phone-number {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .contact-direct-action--phone {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 72px;
        padding: 15px;
    }

    .contact-direct-action small {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .privacy-hero {
        padding: 112px 0 44px;
    }

    .privacy-hero__inner {
        text-align: left;
    }

    .privacy-hero h1,
    .privacy-hero p:not(.section-kicker) {
        margin-left: 0;
        margin-right: 0;
    }

    .privacy-card,
    .privacy-note {
        padding: 20px;
        border-radius: 20px;
    }

    .privacy-card h2 {
        font-size: 1rem;
        line-height: 1.35;
    }

    .privacy-card p {
        margin-bottom: 22px;
        font-size: 1rem;
        line-height: 1.55;
    }
}

.student-page {
    min-height: 100vh;
    color: var(--ink);
    background: #f6f7f8;
}

.student-header {
    position: sticky;
    top: 14px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(220px, auto) 1fr auto;
    gap: 14px;
    align-items: center;
    width: min(1180px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 7px;
    color: var(--white);
    background: rgba(7, 25, 29, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(7, 25, 29, 0.18);
}

.student-header form {
    margin: 0;
}

.student-header .brand,
.student-header .brand:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
}

.student-header .brand__text strong {
    color: var(--white);
}

.student-header .brand__text small {
    color: rgba(255, 255, 255, 0.62);
}

.student-header__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.student-header__nav a,
.student-header__link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

.student-header__nav a:hover,
.student-header__link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
}

.student-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 26px 0 82px;
}

.student-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
    gap: 26px;
    align-items: end;
    min-height: 330px;
    padding: clamp(26px, 5vw, 48px);
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(110deg, rgba(7, 25, 29, 0.96), rgba(7, 25, 29, 0.84) 44%, rgba(7, 25, 29, 0.5)),
        url("../images/hero-study.png") center / cover no-repeat;
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(7, 25, 29, 0.16);
}

.student-hero::before,
.student-hero::after {
    content: "x² + y² = r²";
    position: absolute;
    color: rgba(255, 255, 255, 0.13);
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: 900;
    pointer-events: none;
}

.student-hero::before {
    top: 28px;
    right: 36px;
}

.student-hero::after {
    content: "sin² α + cos² α = 1";
    left: 34px;
    bottom: 24px;
    font-size: clamp(1.2rem, 4vw, 2.8rem);
}

.student-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 5.1rem);
    font-weight: 900;
    line-height: 1.02;
}

.student-hero p:not(.section-kicker) {
    position: relative;
    z-index: 1;
    max-width: 650px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 2vw, 1.22rem);
}

.student-hero .section-kicker {
    position: relative;
    z-index: 1;
    color: var(--amber);
}

.student-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.student-hero__actions .button {
    min-height: 44px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
}

.student-hero__actions .button--primary {
    color: var(--ink);
    background: var(--amber);
    border-color: transparent;
}

.student-hero__actions .button--ghost {
    color: var(--white);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.student-hero__actions .button:disabled {
    cursor: default;
    opacity: 0.68;
    transform: none;
}

.student-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    backdrop-filter: blur(18px);
}

.student-stats--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.student-stats div {
    min-height: 118px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.12);
}

.student-stats span {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
    font-weight: 800;
}

.student-stats strong {
    display: block;
    margin-top: 10px;
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.9rem);
    line-height: 1;
}

.student-alert {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    font-weight: 700;
}

.student-alert--success {
    color: #0f5132;
    background: #eaf8f0;
    border: 1px solid #bee7cf;
}

.student-alert--error {
    color: #7a240f;
    background: #fff0e8;
    border: 1px solid #ffd5c0;
}

.student-section {
    margin-top: 42px;
}

.student-list-panel {
    display: grid;
    gap: 22px;
    padding: clamp(18px, 4vw, 32px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(36, 74, 127, 0.08);
}

.student-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
    align-items: end;
    margin-bottom: 18px;
}

.student-section__head .section-kicker,
.student-section__head h2 {
    grid-column: 1;
}

.student-section__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 900;
    line-height: 1.06;
}

.student-section__head span {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 10px 12px;
    color: rgba(7, 25, 29, 0.62);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 800;
}

.student-list-panel .student-section__head {
    display: block;
    margin-bottom: 0;
}

.student-list-panel .student-section__head .section-kicker {
    margin-bottom: 7px;
}

.student-list-panel .student-section__head h2 {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.student-list-panel .student-section__head span {
    display: block;
    margin-top: 6px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.student-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.student-task-card,
.student-lesson-card,
.student-empty-state {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(7, 25, 29, 0.08);
}

.student-task-card {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.student-card__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.student-card__head h3,
.student-lesson-card h3,
.student-empty-state h3 {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1.14;
}

.student-card__head time {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 800;
}

.student-badge {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 8px 10px;
    color: var(--ink);
    background: var(--amber);
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 900;
}

.student-badge--paid {
    color: #0f5132;
    background: #eaf8f0;
}

.student-badge--payment-paid {
    color: #0f5132;
    background: #e7f7ee;
    border: 1px solid rgba(15, 81, 50, 0.12);
}

.student-badge--payment-unpaid {
    color: #9b1c1c;
    background: #fff0f0;
    border: 1px solid rgba(155, 28, 28, 0.12);
}

.student-badge--payment-free {
    color: #24527a;
    background: #edf5ff;
    border: 1px solid rgba(36, 82, 122, 0.12);
}

.student-badge--unpaid {
    color: var(--ink);
    background: var(--amber);
}

.student-badge--pending {
    color: rgba(0, 0, 0, 0.62);
    background: #eef1f4;
}

.student-badge--overdue {
    color: #9b1c1c;
    background: #fff0f0;
}

.student-badge--submitted {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.student-badge--checked {
    color: #0f7b45;
    background: #eaf8f0;
}

.takmatika-pagination {
    margin-top: 18px;
}

.takmatika-pagination__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.takmatika-pagination__button,
.takmatika-pagination__info {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.takmatika-pagination__button {
    color: #126df7;
    background: rgba(36, 74, 127, 0.06);
}

.takmatika-pagination__button:not(.is-disabled):hover {
    color: #333333;
    background: var(--amber);
}

.takmatika-pagination__button.is-disabled {
    color: rgba(0, 0, 0, 0.32);
    background: #f6f7f8;
}

.takmatika-pagination__info {
    color: rgba(0, 0, 0, 0.56);
}

.student-payment-notice {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 18px;
    align-items: start;
    margin-top: 24px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(7, 25, 29, 0.08);
}

.student-payment-notice h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
}

.student-payment-notice__list {
    display: grid;
    gap: 8px;
}

.student-payment-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 12px;
    color: var(--ink);
    text-align: left;
    background: #f6f7f8;
    border: 1px solid rgba(36, 74, 127, 0.1);
    border-radius: 8px;
    cursor: pointer;
}

.student-payment-row:hover {
    background: #eef2f7;
}

.student-payment-row span,
.student-payment-row small {
    color: var(--muted);
    font-weight: 800;
}

.student-payment-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-auth-card {
    width: min(100%, 640px);
    margin-top: 8vh;
}

.student-auth-card h1 {
    font-size: clamp(2.25rem, 7vw, 3.6rem);
    line-height: 1.06;
}

.student-auth-form {
    display: grid;
    gap: 14px;
}

.student-auth-form label {
    display: grid;
    gap: 7px;
    color: rgba(7, 25, 29, 0.72);
    font-weight: 800;
}

.student-auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    color: var(--ink);
    background: #f6f7f8;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
}

.student-auth-form input:focus {
    background: #ffffff;
    border-color: rgba(18, 109, 247, 0.45);
    box-shadow: 0 0 0 4px rgba(18, 109, 247, 0.08);
}

.student-auth-card__note {
    color: var(--muted);
    font-size: 0.95rem;
}

.student-task-card__text,
.student-solution p,
.student-feedback p,
.student-lesson-card p {
    margin: 0;
    color: var(--muted);
}

.student-solution,
.student-feedback {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #f6f7f8;
    border: 1px solid rgba(7, 25, 29, 0.08);
    border-radius: 8px;
}

.student-solution strong,
.student-feedback strong {
    color: var(--ink);
}

.student-feedback {
    background: rgba(239, 184, 77, 0.18);
    border-color: rgba(239, 184, 77, 0.4);
}

.student-feedback--compact {
    margin-top: 12px;
}

.student-files,
.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.file-card {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-content: start;
    gap: 9px;
    padding: 10px;
    overflow: hidden;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid rgba(7, 25, 29, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(7, 25, 29, 0.05);
}

.file-card:hover {
    border-color: rgba(18, 109, 247, 0.2);
    box-shadow: 0 12px 28px rgba(7, 25, 29, 0.08);
}

.file-card__thumb {
    display: flex;
    width: 100%;
    height: 88px;
    min-height: 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.62);
    background: #f1f3f5;
    border: 1px solid rgba(7, 25, 29, 0.08);
    border-radius: 8px;
    font: 900 0.9rem / 1 var(--font-text);
    text-transform: uppercase;
}

.file-card__thumb--image {
    background: #eef2f4;
}

.file-card__thumb--board {
    color: var(--ink);
    background: var(--amber);
    border-color: transparent;
}

.file-card__thumb--video {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.file-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-card__thumb span {
    max-width: 100%;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card__body {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.file-card__name,
.file-card__meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card__name {
    color: var(--ink);
    font-weight: 900;
}

.file-card__meta {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.student-upload-form {
    display: grid;
    gap: 12px;
    padding-top: 4px;
}

.student-upload-form label {
    display: grid;
    gap: 7px;
    color: rgba(7, 25, 29, 0.72);
    font-weight: 800;
}

.student-upload-form textarea,
.student-upload-form input[type="file"] {
    width: 100%;
    min-height: 46px;
    padding: 12px;
    color: var(--ink);
    background: #f6f7f8;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.student-upload-form textarea {
    resize: vertical;
}

.student-lesson-list {
    display: grid;
    gap: 14px;
}

.student-lesson-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 18px;
}

.student-lesson-card time {
    display: grid;
    min-height: 104px;
    place-items: center;
    padding: 12px;
    color: var(--ink);
    background: var(--amber);
    border-radius: 8px;
    text-align: center;
}

.student-lesson-card time strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    line-height: 1;
}

.student-lesson-card time span {
    display: block;
    margin-top: 6px;
    font-weight: 900;
}

.student-confirmed,
.student-confirm-button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    margin-top: 12px;
    padding: 8px 11px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 900;
}

.student-lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.student-confirmed {
    color: #0f5132;
    background: #eaf8f0;
}

.student-confirmed--cancelled {
    color: #9b1c1c;
    background: #fff0f0;
}

.student-confirm-button {
    color: var(--white);
    background: var(--deep);
    border: 0;
    cursor: pointer;
}

.student-confirm-button:hover {
    background: #123c44;
}

.student-confirm-button--danger {
    color: #9b1c1c;
    background: #fff0f0;
}

.student-confirm-button--danger:hover {
    color: #7a1515;
    background: #ffe3e3;
}

.student-empty-state {
    display: grid;
    max-width: 720px;
    gap: 18px;
    margin: 12vh auto 0;
    padding: clamp(24px, 5vw, 46px);
}

.student-empty-state h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    line-height: 1.04;
}

.student-empty-state p {
    margin: 0;
    color: var(--muted);
    font-size: 1.1rem;
}

.student-empty-state--inline {
    max-width: none;
    margin: 0;
}

@media (max-width: 980px) {
    .student-header,
    .student-hero,
    .student-card-grid {
        grid-template-columns: 1fr;
    }

    .student-header {
        position: static;
    }

    .student-header__nav {
        justify-content: flex-start;
    }

    .student-stats,
    .student-stats--four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .student-header {
        grid-template-columns: auto 1fr;
        width: min(100% - 20px, 1180px);
        margin-top: 10px;
    }

    .student-header form {
        justify-self: end;
    }

    .student-header__nav {
        display: none;
    }

    .student-brand .brand__text {
        display: none;
    }

    .student-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 14px;
    }

    .student-hero {
        min-height: auto;
        padding: 24px;
    }

    .student-hero h1,
    .student-empty-state h1 {
        font-size: clamp(2rem, 14vw, 3.2rem);
        line-height: 1.04;
    }

    .student-hero::before {
        top: 18px;
        right: 18px;
        font-size: 2.2rem;
    }

    .student-files,
    .file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .file-card {
        gap: 7px;
        padding: 8px;
        box-shadow: 0 6px 16px rgba(7, 25, 29, 0.05);
    }

    .file-card__thumb {
        height: 64px;
        border-radius: 8px;
        font-size: 0.74rem;
    }

    .file-card__name {
        font-size: 0.88rem;
        line-height: 1.18;
    }

    .file-card__meta {
        font-size: 0.74rem;
        line-height: 1.2;
    }

    .student-hero::after {
        left: 20px;
        bottom: 18px;
        font-size: 1.1rem;
    }

    .student-hero__actions .button {
        width: 100%;
    }

    .student-stats,
    .student-stats--four {
        grid-template-columns: 1fr;
    }

    .student-stats div {
        min-height: 86px;
    }

    .student-section {
        margin-top: 30px;
    }

    .student-list-panel {
        gap: 16px;
        padding: 16px;
    }

    .student-list-panel .student-section__head h2 {
        font-size: 1.65rem;
    }

    .student-payment-notice {
        grid-template-columns: 1fr;
    }

    .student-payment-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .student-auth-card {
        margin-top: 24px;
    }

    .student-auth-card h1 {
        font-size: clamp(2.1rem, 11vw, 3rem);
    }

    .student-section__head {
        grid-template-columns: 1fr;
    }

    .student-section__head .section-kicker,
    .student-section__head h2,
    .student-section__head span {
        grid-column: auto;
        grid-row: auto;
    }

    .student-section__head h2 {
        font-size: 1.8rem;
    }

    .student-card__head,
    .student-lesson-card {
        grid-template-columns: 1fr;
    }

    .student-card__head {
        display: grid;
    }

    .student-card__head time {
        justify-self: start;
    }

    .student-task-card,
    .student-lesson-card,
    .student-empty-state {
        padding: 18px;
    }

    .student-lesson-card time {
        min-height: 76px;
        justify-items: start;
        text-align: left;
    }
}

.student-site-header .student-logout {
    margin: 0;
}

.student-site-header--simple {
    grid-template-columns: minmax(220px, auto) 1fr auto;
}

.student-site-header--simple .student-logout,
.student-site-header--simple > .header-cta {
    grid-column: 3;
    justify-self: end;
}

.student-site-header .header-cta {
    border: 0;
}

.student-shell {
    padding-top: 112px;
}

.student-hero--compact {
    min-height: 250px;
}

.student-hero--compact h1 {
    font-size: clamp(2.15rem, 5.4vw, 4.4rem);
}

.student-hero--compact .student-stats div {
    min-height: 92px;
}

.student-record-list {
    display: grid;
    gap: 10px;
}

.student-record-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    min-height: 74px;
    padding: 14px;
    color: var(--ink);
    text-align: left;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(7, 25, 29, 0.06);
    cursor: pointer;
    text-decoration: none;
}

.student-list-panel .student-record-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 74px;
    background: #f6f7f8;
    box-shadow: none;
}

.student-record-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(7, 25, 29, 0.09);
}

.student-list-panel .student-record-row:hover {
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(36, 74, 127, 0.08);
}

.student-record-row--lesson {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.student-record-row--portal-homework {
    grid-template-columns: minmax(0, 1fr) auto;
}

.student-record-row--portal-homework {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.student-record-row__main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.student-record-row__main strong {
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-record-row__main small,
.student-record-row__meta {
    color: var(--muted);
    font-weight: 700;
}

.student-record-row--portal-homework .student-record-row__meta {
    justify-self: end;
    white-space: nowrap;
}

.student-record-row--portal-homework .student-badge {
    justify-self: end;
}

.student-record-row__date {
    display: grid;
    min-width: 68px;
    min-height: 58px;
    place-items: center;
    padding: 8px;
    color: var(--ink);
    background: var(--amber);
    border-radius: 8px;
    text-align: center;
}

.student-record-row__date strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1;
}

.student-record-row__date small {
    font-weight: 900;
}

.student-dialog {
    width: min(760px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    overflow: visible;
}

.student-dialog::backdrop {
    background: rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(6px);
}

.student-dialog__panel {
    display: grid;
    max-height: calc(100dvh - 48px);
    gap: 16px;
    padding: clamp(18px, 4vw, 28px);
    overflow: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.student-dialog__head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
}

.student-dialog__head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4vw, 2.6rem);
    line-height: 1.08;
}

.student-dialog__close {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.72);
    background: #f1f3f5;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font: 500 28px / 1 var(--font-text);
}

.student-dialog__meta {
    margin: 0;
    color: var(--muted);
    font-weight: 800;
}

.student-dialog__block {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: #f6f7f8;
    border: 1px solid rgba(7, 25, 29, 0.08);
    border-radius: 8px;
}

.student-dialog__block strong {
    color: var(--ink);
}

.student-dialog__block p {
    margin: 0;
    color: var(--muted);
}

.student-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.student-homework-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.38fr);
    gap: 18px;
    align-items: start;
}

.student-homework-layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.student-homework-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.student-homework-main,
.student-homework-side {
    display: grid;
    gap: 14px;
}

.student-homework-side {
    position: sticky;
    top: 104px;
}

.student-homework-block {
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(7, 25, 29, 0.06);
}

.student-homework-submit {
    padding: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(7, 25, 29, 0.08);
}

.student-homework-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

@media (max-width: 980px) {
    .student-shell {
        padding-top: 92px;
    }

    .student-page .site-header {
        grid-template-columns: auto 1fr auto auto;
    }

    .student-page .site-header.student-site-header--simple {
        grid-template-columns: auto 1fr auto;
    }
}

@media (max-width: 700px) {
    .student-shell {
        width: min(100% - 20px, 1180px);
        padding-top: 78px;
    }

    .student-hero--compact {
        padding: 20px;
    }

    .student-hero--compact h1 {
        font-size: clamp(2rem, 12vw, 3rem);
    }

    .student-hero--compact .student-stats,
    .student-hero--compact .student-stats--four {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-hero--compact .student-stats--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-hero--compact .student-stats div {
        min-height: 72px;
        padding: 12px;
    }

    .student-hero--compact .student-stats span {
        font-size: 0.72rem;
    }

    .student-hero--compact .student-stats strong {
        font-size: 1.55rem;
    }

    .student-hero--compact .student-hero__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .student-hero--compact .student-hero__actions .button {
        width: 100%;
        min-height: 42px;
        padding: 10px;
        text-align: center;
    }

    .student-record-row,
    .student-record-row--lesson,
    .student-record-row--portal-homework {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
    }

    .student-list-panel .student-record-row {
        grid-template-columns: 1fr;
    }

    .student-record-row .student-badge,
    .student-record-row__date {
        justify-self: start;
    }

    .student-record-row__meta {
        justify-self: start;
    }

    .student-record-row--portal-homework .student-record-row__meta,
    .student-record-row--portal-homework .student-badge {
        justify-self: start;
        white-space: normal;
    }

    .student-dialog {
        width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
    }

    .student-dialog__panel {
        max-height: calc(100dvh - 16px);
    }

    .student-dialog__actions .button {
        width: 100%;
    }

    .student-homework-layout {
        grid-template-columns: 1fr;
    }

    .student-homework-side {
        position: static;
    }

    .student-homework-actions .button {
        width: 100%;
    }
}

.student-site-header--simple {
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) auto;
}

.student-site-header--simple .student-logout,
.student-site-header--simple > .header-cta {
    grid-column: 3;
    justify-self: end;
    margin-left: auto;
}

.student-site-header--simple .brand,
.student-site-header--simple .brand__text {
    min-width: 0;
}

.student-page .student-files,
.student-page .file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    min-width: 0;
    max-width: 100%;
}

.student-page .student-files .file-card,
.student-page .file-grid .file-card {
    display: grid;
    align-content: start;
    gap: 9px;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    color: var(--ink);
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(36, 74, 127, 0.08);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(36, 74, 127, 0.05);
}

.student-page .student-files .file-card__thumb,
.student-page .file-grid .file-card__thumb {
    display: flex;
    width: 100%;
    height: 88px;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.62);
    background: #f1f3f5;
    border: 1px solid rgba(36, 74, 127, 0.1);
    border-radius: 8px;
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
    text-transform: uppercase;
}

.student-page .student-files .file-card__thumb--image,
.student-page .file-grid .file-card__thumb--image {
    background: #eef2f4;
}

.student-page .student-files .file-card__thumb--board,
.student-page .file-grid .file-card__thumb--board {
    color: var(--ink);
    background: var(--amber);
    border-color: transparent;
}

.student-page .student-files .file-card__thumb--video,
.student-page .file-grid .file-card__thumb--video {
    color: #126df7;
    background: rgba(18, 109, 247, 0.1);
}

.student-page .student-files .file-card__thumb img,
.student-page .file-grid .file-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-page .student-files .file-card__thumb span,
.student-page .file-grid .file-card__thumb span {
    max-width: 100%;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-page .student-files .file-card__body,
.student-page .file-grid .file-card__body {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.student-page .student-files .file-card__name,
.student-page .file-grid .file-card__name,
.student-page .student-files .file-card__meta,
.student-page .file-grid .file-card__meta {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-page .student-files .file-card__name,
.student-page .file-grid .file-card__name {
    color: var(--ink);
    font: var(--tui-font-text-ui-s-bold, 500 13px / 16px var(--font-text));
}

.student-page .student-files .file-card__meta,
.student-page .file-grid .file-card__meta {
    color: var(--muted);
    font: var(--tui-font-text-ui-xs, 400 11px / 14px var(--font-text));
}

@media (max-width: 700px) {
    .student-site-header--simple {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .student-page .student-files,
    .student-page .file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .student-page .student-files .file-card,
    .student-page .file-grid .file-card {
        gap: 7px;
        padding: 8px;
    }

    .student-page .student-files .file-card__thumb,
    .student-page .file-grid .file-card__thumb {
        height: 64px;
        font-size: 0.74rem;
    }
}