:root {
  --ink: #25203a;
  --muted: #6e6980;
  --purple: #7658ca;
  --purple-dark: #563aa8;
  --lavender: #f2effb;
  --line: #e8e4f1;
  --mint: #4d9e91;
  --coral: #db715f;
  --gold: #c89236;
  --paper: #fffefd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.shell { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: #fff; background: var(--purple-dark); border-radius: 8px; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; }
.header-inner { min-height: 86px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; width: 144px; }
.brand img, .footer-brand img { display: block; width: 100%; height: auto; }
.header-nav { margin-left: auto; display: flex; gap: 28px; color: #625b75; font-size: .9rem; font-weight: 560; }
.header-nav a { transition: color .18s; }
.header-nav a:hover, .text-link:hover { color: var(--purple); }
.header-actions { display: flex; align-items: center; gap: 17px; font-size: .9rem; font-weight: 630; }
.landing-theme-toggle { width: 32px; height: 32px; }
.text-link { color: #514b64; transition: color .18s; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; font-weight: 670; line-height: 1; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .inline-link:focus-visible, .header-nav a:focus-visible, .footer-links a:focus-visible { outline: 3px solid #bda8f6; outline-offset: 3px; }
.button-small { padding: 12px 17px; color: #fff; background: var(--purple); box-shadow: 0 7px 16px rgba(94, 66, 170, .16); }
.button-small:hover { background: var(--purple-dark); }

.hero { position: relative; overflow: hidden; padding: 158px 0 104px; background: linear-gradient(111deg, #fffefd 0%, #fbf9ff 53%, #f0ebfc 100%); }
.hero::after { position: absolute; z-index: 0; right: -10%; bottom: -22%; width: 57%; aspect-ratio: 1; content: ""; border: 1px solid rgba(128, 94, 207, .11); border-radius: 50%; }
.hero-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-orb-one { top: 8%; right: 17%; width: 14px; height: 14px; background: #cfb7ff; }
.hero-orb-two { left: 5%; bottom: 17%; width: 10px; height: 10px; background: #90d1c5; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); align-items: center; gap: 48px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: var(--purple); font-size: .71rem; line-height: 1; font-weight: 760; letter-spacing: .115em; text-transform: uppercase; }
.eyebrow span { display: block; width: 20px; height: 2px; background: currentColor; }
.hero h1 { max-width: 550px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3rem, 5vw, 4.7rem); font-weight: 500; line-height: .99; letter-spacing: -.055em; }
.hero h1 em { display: block; color: var(--purple); font-style: italic; }
.hero-lead { max-width: 485px; margin: 26px 0 30px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button-main { min-height: 52px; padding: 0 21px; color: #fff; background: var(--purple); box-shadow: 0 14px 25px rgba(102, 72, 184, .23); }
.button-main:hover { background: var(--purple-dark); box-shadow: 0 17px 28px rgba(102, 72, 184, .28); }
.button-main span, .button-white span { font-size: 1.2em; }
.button-ghost { min-height: 52px; padding: 0 20px; color: #5c5570; background: rgba(255,255,255,.68); border: 1px solid #dfd9eb; }
.button-ghost:hover { background: #fff; }
.hero-note { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: #847d90; font-size: .8rem; }
.check { display: grid; width: 17px; height: 17px; place-items: center; color: var(--mint); background: #e1f2ef; border-radius: 50%; font-size: .65rem; font-weight: 800; }

.hero-stage { position: relative; min-height: 416px; padding: 29px 0 0 19px; }
.stage-glow { position: absolute; top: 2%; left: 8%; width: 84%; height: 90%; border-radius: 30px; background: linear-gradient(135deg, #dcd3fa, #cceae3); opacity: .62; transform: rotate(-4deg); }
.demo-window { position: relative; width: 100%; overflow: hidden; background: #fff; border: 1px solid rgba(129, 109, 177, .17); border-radius: 18px; box-shadow: 0 25px 60px rgba(70, 55, 105, .18); }
.demo-topbar { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eeeaf4; color: #5f5673; font-size: 9px; font-weight: 700; }
.demo-brand { display: flex; align-items: center; gap: 6px; }.demo-brand i { width: 12px; height: 12px; background: #8566cc; border-radius: 4px; }.demo-avatar { display: grid; width: 21px; height: 21px; place-items: center; color: #6b519c; background: #eee5fc; border-radius: 50%; font-size: 7px; }
.demo-body { display: flex; min-height: 336px; background: #fbfaff; }.demo-sidebar { width: 48px; padding-top: 19px; display: flex; flex-direction: column; align-items: center; gap: 18px; background: #f6f3fb; border-right: 1px solid #eeeaf4; }.demo-sidebar span { width: 17px; height: 17px; background: #ddd6e9; border-radius: 5px; }.demo-sidebar .sidebar-active { background: #a287de; box-shadow: 0 0 0 5px #ece6fb; }
.demo-content { flex: 1; padding: 24px 25px; }.demo-heading { display: flex; align-items: flex-start; justify-content: space-between; }.demo-heading small, .lesson-card small { display: block; color: #aaa3b6; font-size: 8px; }.demo-heading strong { display: block; margin-top: 5px; color: #3e374d; font-size: 16px; }.demo-heading button { padding: 8px 10px; color: #fff; background: #8566cc; border: 0; border-radius: 6px; font-size: 8px; font-weight: 700; }
.demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0; }.demo-stats div { padding: 12px 10px; background: #fff; border: 1px solid #f0edf5; border-radius: 8px; }.demo-stats b { display: block; color: #4b425e; font-size: 15px; }.demo-stats span { display: block; margin-top: 4px; color: #a29aaa; font-size: 8px; }.demo-row-title { display: flex; justify-content: space-between; margin-bottom: 9px; color: #565061; font-size: 9px; }.demo-row-title small { color: #886bc9; }
.lesson-card { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 7px 8px; margin-bottom: 6px; background: #fff; border: 1px solid #f0edf5; border-radius: 8px; color: #4e465e; font-size: 8px; }.lesson-card > span:nth-child(3) { flex: 1; }.lesson-card b { display: block; margin-bottom: 3px; font-size: 9px; }.lesson-time { width: 26px; color: #8e879b; font-weight: 600; }.lesson-avatar { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; font-size: 7px; font-weight: 750; }.lesson-avatar.violet { color: #7255a6; background: #eee5fb; }.lesson-avatar.mint { color: #418e81; background: #dcefe9; }.lesson-live, .lesson-soon { padding: 4px 6px; border-radius: 4px; font-size: 7px; font-weight: 650; }.lesson-live { color: #498e83; background: #e2f2ee; }.lesson-soon { color: #a57a30; background: #fbf0d9; }
.floating-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 10px 13px; background: rgba(255,255,255,.94); border: 1px solid rgba(218, 210, 235, .8); border-radius: 11px; box-shadow: 0 12px 25px rgba(62, 47, 92, .15); backdrop-filter: blur(10px); }.floating-card b, .floating-card small { display: block; }.floating-card b { color: #524960; font-size: 9px; }.floating-card small { margin-top: 2px; color: #968e9e; font-size: 8px; }.floating-work { right: -28px; bottom: 31px; }.floating-live { left: -20px; top: 97px; }.float-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; font-size: 13px; font-weight: 800; }.purple { color: #7155aa; background: #eee6fb; }.pulse { position: relative; display: block; width: 9px; height: 9px; background: #5cad9e; border-radius: 50%; }.pulse::after { position: absolute; inset: -4px; content: ""; border: 1px solid #8fcfc3; border-radius: inherit; animation: landing-pulse 2s infinite; }
@keyframes landing-pulse { 50% { transform: scale(1.45); opacity: .25; } 100% { transform: scale(1.45); opacity: 0; } }

.trust-strip { border-top: 1px solid #eeeaf3; border-bottom: 1px solid #eeeaf3; background: #fff; }.trust-items { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: #6d657b; font-size: .82rem; font-weight: 640; }.trust-items span { display: flex; align-items: center; gap: 8px; }.dot { width: 8px; height: 8px; border-radius: 50%; }.dot-purple { background: #9f82e5; }.dot-mint { background: #7fc5b8; }.dot-coral { background: #ee9a89; }.dot-gold { background: #e6bd77; }

.section { padding: 116px 0; }.features { background: #fffefd; }.section-heading { max-width: 600px; margin-bottom: 49px; }.section-heading h2, .workflow h2, .cta-card h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }.section-heading > p:last-child { margin: 17px 0 0; color: var(--muted); line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: 1.13fr 1fr 1fr; gap: 17px; }.feature-card { min-height: 259px; padding: 28px; background: #fbfaff; border: 1px solid var(--line); border-radius: 18px; transition: transform .2s, box-shadow .2s; }.feature-card:hover { transform: translateY(-3px); box-shadow: 0 13px 30px rgba(71, 53, 109, .09); }.feature-large { grid-row: span 2; min-height: 535px; background: linear-gradient(158deg, #f4efff, #faf9ff 68%); }.feature-wide { grid-column: span 2; min-height: 259px; display: flex; align-items: flex-start; gap: 19px; background: #fffaf3; }.feature-icon { display: grid; width: 44px; height: 44px; margin-bottom: 27px; place-items: center; border-radius: 12px; }.feature-icon svg { width: 24px; height: 24px; }.feature-icon-purple { color: #7153bc; background: #e9e0fa; }.feature-icon-mint { color: #3e9284; background: #dcf1ec; }.feature-icon-coral { color: #d76c5c; background: #fae4e0; }.feature-icon-gold { color: #bf892b; background: #fdf0d7; }.feature-card h3 { margin: 0; color: #40384e; font-size: 1.05rem; }.feature-card p { margin: 10px 0 0; color: #797285; font-size: .9rem; line-height: 1.62; }.mini-live { position: relative; display: flex; align-items: center; gap: 0; margin-top: 59px; padding: 21px 16px; background: rgba(255,255,255,.8); border: 1px solid #e6dff5; border-radius: 12px; }.mini-live-user { display: grid; width: 29px; height: 29px; place-items: center; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; font-size: 9px; font-weight: 800; }.mini-live-user.one { color: #6a5397; background: #dacdf3; }.mini-live-user.two { color: #3b857b; background: #c8e9e1; }.mini-live-user.three { color: #b46357; background: #f2cec8; }.mini-live-line { width: 1px; height: 22px; margin: 0 10px 0 14px; background: #e5dff0; }.mini-live b { color: #5b526b; font-size: 10px; }

.workflow { position: relative; overflow: hidden; background: #f6f3fb; }.workflow::before { position: absolute; top: -230px; right: -160px; width: 530px; height: 530px; content: ""; border: 1px solid rgba(126, 96, 196, .11); border-radius: 50%; }.workflow-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 100px; }.workflow-copy > p:not(.eyebrow) { max-width: 440px; margin: 21px 0 25px; color: var(--muted); line-height: 1.68; }.inline-link { color: var(--purple); font-size: .93rem; font-weight: 700; }.inline-link span { margin-left: 6px; font-size: 1.15em; }.steps { position: relative; display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }.steps::before { position: absolute; top: 36px; bottom: 36px; left: 23px; width: 1px; content: ""; background: #d9d1ea; }.steps li { position: relative; z-index: 1; display: flex; align-items: center; gap: 22px; min-height: 110px; }.step-number { display: grid; width: 47px; height: 47px; place-items: center; flex: 0 0 auto; color: var(--purple); background: #fff; border: 1px solid #e1d9f0; border-radius: 50%; box-shadow: 0 5px 14px rgba(74, 54, 112, .07); font-size: .78rem; font-weight: 770; }.steps h3 { margin: 0; color: #473e55; font-size: 1.02rem; }.steps p { margin: 5px 0 0; color: #797284; font-size: .89rem; }

.cta-section { padding: 106px 0; background: #fffefd; }.cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 45px; min-height: 313px; padding: 57px 65px; color: #fff; background: linear-gradient(120deg, #5f43aa, #7d5bc7); border-radius: 24px; }.cta-card::after { position: absolute; top: -180px; right: -110px; width: 490px; height: 490px; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }.cta-card > * { position: relative; z-index: 1; }.eyebrow-light { color: #d9c9ff; }.cta-card h2 { font-size: clamp(2.2rem, 4vw, 3.35rem); }.cta-card h2 + p { margin: 14px 0 0; color: #e9e3f8; line-height: 1.6; }.button-white { min-width: 250px; min-height: 52px; padding: 0 20px; color: #6147aa; background: #fff; box-shadow: 0 12px 26px rgba(35, 20, 73, .18); }.button-white:hover { background: #f9f6ff; }

.site-footer { padding: 34px 0; border-top: 1px solid #ede9f1; background: #fff; }.footer-inner { display: flex; align-items: center; gap: 28px; }.footer-brand { width: 125px; flex: 0 0 auto; }.footer-inner > p { margin: 0; color: #908999; font-size: .76rem; }.footer-links { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; color: #766f80; font-size: .73rem; }.footer-links a:hover { color: var(--purple); }

/* Публичная страница использует те же классы темы, что и кабинеты. */
html.theme-dark { --ink: #ede8f6; --muted: #afa8bb; --purple: #c0a5ff; --purple-dark: #ab8af8; --lavender: #1c1930; --line: #353044; --paper: #0d1117; }
html.theme-dark body { background: var(--paper); color: var(--ink); }
.theme-dark .site-header { background: rgba(13,17,23,.78); border-bottom: 1px solid rgba(48,54,61,.8); backdrop-filter: blur(16px); }
.theme-dark .brand img, .theme-dark .footer-brand img { filter: saturate(.88) brightness(1.15); }
.theme-dark .header-nav, .theme-dark .text-link { color: #cbc4d6; }
.theme-dark .hero { background: radial-gradient(circle at 82% 33%, #292244 0, #171722 32%, #0d1117 75%); }
.theme-dark .hero::after { border-color: rgba(192,165,255,.15); }.theme-dark .hero-orb-one { background: #8b6ed0; }.theme-dark .hero-orb-two { background: #559f95; }
.theme-dark .button-small, .theme-dark .button-main { color: #181322; background: #c0a5ff; box-shadow: 0 12px 27px rgba(0,0,0,.32); }.theme-dark .button-small:hover, .theme-dark .button-main:hover { background: #d0bbff; }
.theme-dark .button-ghost { color: #ddd6e9; background: rgba(30,34,44,.84); border-color: #3c374b; }.theme-dark .button-ghost:hover { background: #282332; }
.theme-dark .hero-note { color: #a9a3b3; }.theme-dark .check { color: #83d6c5; background: #173832; }
.theme-dark .stage-glow { opacity: .32; }.theme-dark .demo-window { border-color: #3a3648; box-shadow: 0 25px 60px rgba(0,0,0,.42); }.theme-dark .demo-topbar { color: #c6bece; background: #1b1f28; border-color: #34313d; }.theme-dark .demo-body { background: #161a22; }.theme-dark .demo-sidebar { background: #1d2029; border-color: #34313d; }.theme-dark .demo-sidebar span { background: #3b3747; }.theme-dark .demo-sidebar .sidebar-active { background: #9f7de1; box-shadow: 0 0 0 5px #2e2644; }.theme-dark .demo-heading strong, .theme-dark .demo-stats b, .theme-dark .demo-row-title, .theme-dark .lesson-card, .theme-dark .lesson-card b { color: #e4dfeb; }.theme-dark .demo-heading small, .theme-dark .lesson-card small, .theme-dark .demo-stats span { color: #9d97a9; }.theme-dark .demo-stats div, .theme-dark .lesson-card { background: #20242d; border-color: #36313f; }.theme-dark .floating-card { background: rgba(29,33,42,.94); border-color: #454050; }.theme-dark .floating-card b { color: #e2dce9; }.theme-dark .floating-card small { color: #aaa3b5; }
.theme-dark .trust-strip, .theme-dark .site-footer { background: #11151c; border-color: #2e303b; }.theme-dark .trust-items { color: #c0bbc8; }
.theme-dark .features, .theme-dark .cta-section { background: #0d1117; }.theme-dark .feature-card { background: #161a22; border-color: #34313d; }.theme-dark .feature-large { background: linear-gradient(158deg, #1e1b30, #161a22 68%); }.theme-dark .feature-wide { background: #201d17; }.theme-dark .feature-card:hover { box-shadow: 0 13px 30px rgba(0,0,0,.28); }.theme-dark .feature-card h3, .theme-dark .steps h3 { color: #e8e3ee; }.theme-dark .feature-card p, .theme-dark .steps p { color: #b1aaba; }.theme-dark .mini-live { background: rgba(29,33,42,.84); border-color: #3c3749; }.theme-dark .mini-live-line { background: #484150; }.theme-dark .mini-live b { color: #ded8e5; }
.theme-dark .workflow { background: #141722; }.theme-dark .workflow::before { border-color: rgba(192,165,255,.13); }.theme-dark .step-number { color: #cab3ff; background: #1e222c; border-color: #3e394c; box-shadow: 0 5px 14px rgba(0,0,0,.2); }.theme-dark .steps::before { background: #403a4c; }.theme-dark .cta-card { color: #fff; background: linear-gradient(120deg, #50358e, #6a4da9); }.theme-dark .footer-inner > p, .theme-dark .footer-links { color: #aaa4b2; }

@media (max-width: 900px) { .hero { padding-top: 135px; }.header-nav { display: none; }.hero-grid { grid-template-columns: 1fr; gap: 38px; }.hero-copy { max-width: 600px; }.hero-stage { width: min(670px, calc(100% - 26px)); margin: 0 auto; }.workflow-grid { grid-template-columns: 1fr; gap: 49px; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-large { grid-row: span 1; min-height: 345px; }.feature-wide { grid-column: span 2; }.mini-live { margin-top: 42px; }.cta-card { padding: 48px; } }
@media (max-width: 620px) { .shell { width: min(100% - 32px, 1140px); }.header-inner { min-height: 71px; }.brand { width: 118px; }.header-actions { margin-left: auto; gap: 12px; font-size: .8rem; }.landing-theme-toggle { display: none; }.button-small { padding: 10px 12px; }.hero { padding: 117px 0 65px; }.hero h1 { font-size: clamp(2.8rem, 13vw, 3.7rem); }.hero-lead { margin: 21px 0 25px; font-size: .98rem; }.button-main, .button-ghost { width: 100%; }.hero-stage { min-height: 295px; padding: 20px 0 0 10px; }.demo-body { min-height: 243px; }.demo-topbar { height: 36px; }.demo-sidebar { width: 34px; padding-top: 13px; gap: 12px; }.demo-sidebar span { width: 12px; height: 12px; border-radius: 4px; }.demo-content { padding: 16px 14px; }.demo-heading strong { font-size: 11px; }.demo-heading button { padding: 6px 7px; font-size: 6px; }.demo-stats { margin: 12px 0; gap: 5px; }.demo-stats div { padding: 8px 6px; }.demo-stats b { font-size: 11px; }.demo-stats span, .demo-heading small, .lesson-card small { font-size: 6px; }.demo-row-title { font-size: 7px; }.lesson-card { min-height: 36px; gap: 5px; padding: 5px; }.lesson-card b { font-size: 7px; }.lesson-time { width: 20px; font-size: 7px; }.lesson-avatar { width: 19px; height: 19px; font-size: 6px; }.lesson-live, .lesson-soon { padding: 3px; font-size: 5px; }.floating-card { padding: 7px 8px; gap: 6px; }.floating-card b { font-size: 7px; }.floating-card small { font-size: 6px; }.float-icon { width: 17px; height: 17px; font-size: 9px; }.floating-work { right: -12px; bottom: 8px; }.floating-live { left: -8px; top: 67px; }.trust-items { min-height: auto; padding: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; font-size: .73rem; }.section { padding: 76px 0; }.section-heading { margin-bottom: 32px; }.feature-grid { grid-template-columns: 1fr; gap: 12px; }.feature-card, .feature-large { min-height: auto; padding: 24px; }.feature-wide { grid-column: auto; display: block; }.feature-icon { margin-bottom: 20px; }.feature-wide .feature-icon { margin-bottom: 18px; }.mini-live { margin-top: 29px; }.workflow-grid { gap: 38px; }.steps li { gap: 15px; min-height: 99px; }.steps::before { left: 20px; }.step-number { width: 41px; height: 41px; }.cta-section { padding: 72px 0; }.cta-card { display: block; min-height: auto; padding: 37px 26px; border-radius: 18px; }.cta-card h2 { font-size: 2.45rem; }.button-white { width: 100%; margin-top: 27px; }.footer-inner { align-items: flex-start; flex-direction: column; gap: 15px; }.footer-links { justify-content: flex-start; margin-left: 0; gap: 10px 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .feature-card, .skip-link { transition: none; }.pulse::after { animation: none; } }