body:has(.landing-page) > .topbar { display: none; }
#app:has(.landing-page) { max-width: none; margin: 0; padding: 0; }
#app .landing-page { color: #21314a; background: #f7f8fc; padding: 0 6%; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.landing-page a { text-decoration: none; }
.landing-nav { max-width: 1240px; margin: auto; display: flex; align-items: center; gap: 32px; min-height: 96px; border-bottom: 1px solid #e1e5ee; }
.landing-name { color: #253752; font-size: 27px; font-weight: 800; letter-spacing: -1px; margin-right: auto; }
.landing-name span { color: #7886a0; font-weight: 500; }
.landing-nav-link { color: #69758a; font-size: 14px; }
.landing-login-link { color: #314eb7; font-size: 14px; font-weight: 650; display: flex; gap: 24px; }
.landing-hero { max-width: 1240px; margin: auto; padding: 76px 0 82px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 80px; }
#app .landing-kicker { color: #6276ac; text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; font-weight: 700; margin: 0 0 24px; display: flex; align-items: center; gap: 10px; }
.landing-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: #678a73; }
#app .landing-intro h1 { font-size: clamp(40px, 4.4vw, 65px); line-height: 1.08; letter-spacing: -2.8px; font-weight: 650; margin: 0 0 26px; }
.landing-intro h1 em { color: #4b65cf; font-style: normal; }
#app .landing-description { max-width: 470px; color: #718096; font-size: 17px; line-height: 1.7; margin: 0 0 32px; }
.landing-cta { display: inline-flex; justify-content: space-between; align-items: center; gap: 36px; background: #4b65cf; color: white; padding: 17px 23px; border-radius: 12px; font-size: 14px; font-weight: 650; transition: background .2s, transform .2s; }
.landing-cta:hover { background: #3650b9; transform: translateY(-2px); }
.landing-subjects { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.landing-subjects span { font-size: 11px; color: #78859a; border: 1px solid #e0e5f0; border-radius: 30px; padding: 7px 12px; }
#app .landing-login-card { background: white; border: 1px solid #e2e7f1; padding: 38px; border-radius: 24px; box-shadow: 0 20px 70px #28456a0a; scroll-margin-top: 24px; }
.landing-card-icon { background: #edf1fd; color: #4b65cf; border-radius: 14px; display: grid; place-items: center; width: 48px; height: 48px; font-size: 26px; margin-bottom: 26px; }
#app .landing-login-card .landing-kicker { margin-bottom: 12px; font-size: 10px; letter-spacing: 1.4px; }
#app .landing-login-card h2 { margin: 0 0 10px; font-size: 28px; font-weight: 650; letter-spacing: -.8px; }
#app .landing-login-description { font-size: 13px; color: #7a879a; margin: 0 0 28px; }
#app .landing-login-card .auth-form { gap: 18px; }
#app .landing-login-card label { color: #53627b; font-size: 12px; font-weight: 600; display: grid; gap: 8px; }
#app .landing-login-card input { width: 100%; min-height: 48px; border: 1px solid #dce3ee; border-radius: 10px; padding: 12px 14px; background: #fafbfe; color: #21314a; font-size: 14px; }
.landing-login-card input::placeholder { color: #9aa5b7; }
#app .landing-login-card .primary-button { display: flex; justify-content: space-between; align-items: center; min-height: 49px; border-radius: 10px; padding: 13px 17px; font-size: 14px; background: #4b65cf; color: #fff; border: 0; }
#app .landing-access-note { color: #8894a7; font-size: 11px; line-height: 1.7; margin: 24px 0 0; text-align: center; }
.landing-page a:focus-visible, .landing-page input:focus-visible, .landing-page button:focus-visible { outline: 3px solid #a5b5ef; outline-offset: 4px; }
.landing-features { max-width: 1240px; margin: auto; padding: 44px 0 66px; border-top: 1px solid #e1e5ee; }
#app .landing-section-heading .landing-kicker { margin-bottom: 12px; }
#app .landing-section-heading h2 { margin: 0 0 30px; font-size: 29px; letter-spacing: -.8px; font-weight: 650; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.landing-feature-grid article { padding: 25px 27px; background: #fff; border: 1px solid #e5e9f1; border-radius: 16px; }
.landing-feature-icon { color: #8292bd; font-size: 12px; font-weight: 700; }
#app .landing-feature-grid h3 { font-size: 17px; font-weight: 650; margin: 22px 0 10px; }
#app .landing-feature-grid p { font-size: 13px; line-height: 1.8; color: #7b879b; margin: 0; }
.landing-footer { max-width: 1240px; margin: auto; padding: 24px 0; border-top: 1px solid #e1e5ee; display: flex; justify-content: space-between; gap: 20px; color: #8b97a9; font-size: 11px; }
@media (max-width: 900px) { .landing-hero { gap: 35px; } #app .landing-login-card { padding: 28px; } #app .landing-intro h1 { letter-spacing: -1.8px; } }
@media (max-width: 680px) { #app .landing-page { padding: 0 22px; } .landing-nav { min-height: 76px; gap: 16px; } .landing-name { font-size: 23px; } .landing-nav-link { display: none; } .landing-login-link { font-size: 12px; gap: 10px; } .landing-hero { grid-template-columns: 1fr; padding: 44px 0; gap: 40px; } #app .landing-intro h1 { font-size: 43px; } #app .landing-description { font-size: 15px; } .landing-subjects { margin-top: 24px; } .landing-feature-grid { grid-template-columns: 1fr; gap: 12px; } .landing-features { padding: 34px 0; } #app .landing-section-heading h2 { font-size: 25px; } .landing-footer { flex-direction: column; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .landing-cta { transition: none; } }

.landing-teachers-link { color: #69758a; font-size: 14px; white-space: nowrap; }
.landing-teachers-link:hover, .landing-nav-link:hover { color: #314eb7; }
.landing-teachers { max-width: 1240px; margin: auto; padding: 44px 0 54px; border-top: 1px solid #e1e5ee; scroll-margin-top: 24px; }
#app .landing-teachers-description { max-width: 580px; color: #7b879b; font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
@media (max-width: 680px) {
  .landing-nav { flex-wrap: wrap; padding: 18px 0; row-gap: 16px; }
  .landing-teachers-link { order: 3; flex-basis: 100%; font-size: 13px; }
  .landing-teachers { padding: 34px 0; }
}

.landing-teacher-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 28px; }
.landing-teacher-card { display: flex; align-items: center; gap: 22px; padding: 28px; border: 1px solid #e5e9f1; border-radius: 16px; background: #fff; }
.landing-teacher-avatar { display: grid; place-items: center; width: 68px; height: 68px; flex-shrink: 0; border-radius: 20px; background: #edf1fd; color: #4b65cf; font-size: 22px; font-weight: 650; }
.landing-teacher-avatar-teal { background: #eaf4f1; color: #458579; }
#app .landing-teacher-card h3 { margin: 0 0 7px; font-size: 19px; font-weight: 650; }
#app .landing-teacher-card p { margin: 0; font-size: 13px; color: #7b879b; }
@media (max-width: 680px) { .landing-teacher-grid { grid-template-columns: 1fr; gap: 12px; } .landing-teacher-card { padding: 22px; gap: 16px; } #app .landing-teacher-card h3 { font-size: 17px; } }

.landing-teacher-button { width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s,box-shadow .2s; }
.landing-teacher-button:hover { border-color:#91a3d7; box-shadow:0 8px 24px #28456a0c; }
.landing-teacher-button:focus-visible, .teacher-profile-close:focus-visible { outline:3px solid #4b65cf; outline-offset:4px; }
.landing-teacher-photo { object-fit:cover; object-position:48% 65%; }
.landing-teacher-info { display:grid; gap:7px; }
.landing-teacher-name { font-size:19px; font-weight:650; }
.landing-teacher-subject { font-size:13px; color:#7b879b; }
.landing-teacher-arrow { margin-left:auto; color:#458579; font-size:24px; }
html:has(.teacher-profile[open]) { overflow:hidden; }
.teacher-profile { box-sizing:border-box; width:min(940px,calc(100% - 40px)); max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid #dce3ee; border-radius:24px; color:#21314a; background:white; box-shadow:0 28px 100px #13233d40; overflow:auto; }
.teacher-profile::backdrop { background:#14243e99; backdrop-filter:blur(5px); }
.teacher-profile-layout { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr); }
.teacher-profile-portrait { background:#eaf0f2; min-height:100%; }
.teacher-profile-portrait img { display:block; width:100%; height:100%; min-height:520px; object-fit:cover; object-position:48% 70%; }
.teacher-profile-content { padding:42px 36px 34px; }
.teacher-profile-close { position:absolute; z-index:1; top:12px; right:12px; width:36px; height:36px; display:grid; place-items:center; border:1px solid #dce3ee; border-radius:50%; color:#35445d; background:#ffffffed; font:26px/1 system-ui,sans-serif; cursor:pointer; }
#app .teacher-profile-eyebrow { margin:0 0 12px; color:#458579; text-transform:uppercase; letter-spacing:1.6px; font-size:10px; font-weight:700; }
#app .teacher-profile-content h2 { margin:0 0 8px; font-size:31px; line-height:1.2; letter-spacing:-.8px; }
#app .teacher-profile-subjects { margin:0 0 20px; color:#64748b; font-size:14px; }
.teacher-profile-facts { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.teacher-profile-facts span { padding:7px 10px; border-radius:8px; background:#eef5f2; color:#3c7165; font-size:11px; }
#app .teacher-profile-content h3 { margin:22px 0 8px; font-size:16px; }
#app .teacher-profile-content p:not(.teacher-profile-eyebrow):not(.teacher-profile-subjects) { margin:0 0 12px; color:#59677d; font-size:14px; line-height:1.75; }
@media(max-width:680px) {
  .landing-teacher-name { font-size:17px; }
  .teacher-profile { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:18px; }
  .teacher-profile-layout { grid-template-columns:1fr; }
  .teacher-profile-portrait { height:260px; min-height:0; }
  .teacher-profile-portrait img { height:260px; min-height:0; object-position:50% 64%; }
  .teacher-profile-content { padding:26px 22px; }
  #app .teacher-profile-content h2 { font-size:27px; }
}

.landing-teacher-photo-aleksandr { object-position:50% 28%; }

.teacher-profile-booking { margin-top:18px; max-width:100%; box-sizing:border-box; text-align:center; }
@media(max-width:680px) { .teacher-profile-booking { display:flex; width:100%; gap:16px; } }