:root {
    --ink: #15182f;
    --inksoft: #393b57;
    --blue: #10a4d8;
    --blue-deep: #1672c9;
    --pink: #ff6177;
    --violet: #7357e9;
    --violet2: #9d75f4;
    --gold: #c79a42;
    --cream: #fffdf7;
    --paper: #f7f9ff;
    --sky: #e9f7ff;
    --line: rgba(21, 24, 47, .12);
    --shadow: 0 24px 70px rgba(40, 45, 90, .13);
    --container: min(1220px, calc(100% - 52px))
}
*, *::before, *::after {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}
body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font: 500 15px/1.64 Montserrat, Arial, sans-serif !important;
    overflow-x: hidden
}
body.noscroll {
    overflow: hidden
}
img {
    display: block;
    max-width: 100%
}
button, input, select, textarea {
    font: inherit
}
button {
    cursor: pointer
}
a {
    text-decoration: none;
    color: inherit
}
h1, h2, h3, p {
    margin-top: 0;
    font-family: Montserrat, Arial, sans-serif !important;
}
svg.for-teachers-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex: none
}
.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}
::selection {
    background: #d7c9ff;
    color: #171336
}
.container {
    width: var(--container);
    margin-inline: auto
}
.section {
    padding: 112px 0
}
.section-kicker {
    color: #7257cf;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .17em;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px
}
.section-title {
    font-size: clamp(36px, 4.05vw, 58px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: -.053em;
    margin: 0 0 22px
}
.gradient-text {
    color: var(--violet);
    background: linear-gradient(105deg, #7357e9 2%, #c166d2 50%, #eb7085 84%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}
.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
    margin-bottom: 47px
}
.section-heading .section-title {
    margin-bottom: 0
}
.heading-aside {
    width: 360px;
    max-width: 40%;
    color: #6a6a7f;
    line-height: 1.8;
    font-size: 14px;
    margin-bottom: 7px
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 999px;
    padding: 18px 27px;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    min-height: 58px
}
.btn .icon {
    width: 18px;
    height: 18px
}
.btn:hover {
    transform: translateY(-3px)
}
.btn:active {
    transform: translateY(-1px)
}
.btn-primary {
    color: #fff;
    background: linear-gradient(105deg, #7357e9, #986af0 60%, #ff6177);
    box-shadow: 0 14px 32px rgba(115, 87, 233, .27)
}
.btn-primary:hover {
    box-shadow: 0 20px 40px rgba(115, 87, 233, .38)
}
.btn-primary:disabled {
    opacity: .5;
    filter: grayscale(.35);
    cursor: not-allowed;
    box-shadow: none;
    transform: none
}
.btn-ghost {
    color: #272442;
    background: #fff;
    border: 1px solid rgba(115, 87, 233, .14);
    box-shadow: 0 12px 40px rgba(40, 45, 90, .07)
}
.btn-dark {
    background: #171a3a;
    color: #fff
}
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible {
    outline: 3px solid #00a1e4;
    outline-offset: 4px
}
/* navigation */
.site-header {
    height: 84px;
    background: rgba(255, 255, 255, .91);
    border-bottom: 1px solid rgba(16, 164, 216, .12);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px)
}
.header-inner {
    height: 84px;
    display: flex;
    align-items: center;
    gap: 25px
}
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none
}
.brand-symbol {
    object-fit: contain;
    width: 24px;
    height: 39px
}
.brand-text {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap
}
.brand-text strong {
    font-size: 20px;
    letter-spacing: -.03em;
    font-weight: 900
}
.brand-text > span:last-child {
    font-size: 9px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: .11em;
    max-width: 116px;
    white-space: normal
}
.brand-divider {
    height: 29px;
    width: 1px;
    background: #dddce6
}
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto
}
.desktop-nav a {
    font-size: 11px;
    color: #57556a;
    font-weight: 800;
    transition: color .2s;
    white-space: nowrap
}
.desktop-nav a:hover {
    color: var(--violet)
}
.header-action {
    background: #171a39;
    color: white;
    border-radius: 50px;
    padding: 12px 17px;
    display: flex;
    gap: 7px;
    align-items: center;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 9px 23px rgba(21, 24, 47, .14)
}
.header-action .icon {
    width: 16px;
    height: 16px
}
.menu-toggle {
    display: none;
    background: white;
    border: 1px solid var(--line);
    width: 46px;
    height: 46px;
    border-radius: 14px;
    place-items: center
}
.mobile-nav {
    display: none
}
/* hero */
.hero {
    position: relative;
    min-height: 725px;
    padding: 254px 0 77px;
    overflow: hidden;
    background: radial-gradient(circle at 92% 12%, rgba(16, 164, 216, .18), transparent 27%), radial-gradient(circle at 59% 74%, rgba(255, 97, 119, .11), transparent 26%), radial-gradient(circle at 7% 70%, rgba(115, 87, 233, .12), transparent 27%), linear-gradient(125deg, #f8fbff 1%, #faf6ff 54%, #fff9fa)
}
.hero-dots {
    position: absolute;
    width: 185px;
    height: 185px;
    left: -55px;
    bottom: 4%;
    background-image: radial-gradient(#a895e8 2px, transparent 2px);
    background-size: 18px 18px;
    opacity: .22;
    transform: rotate(18deg)
}
.hero-layout {
    display: grid;
    grid-template-columns:1.08fr .92fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2
}
.hero-content {
    padding-bottom: 8px
}
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .15em;
    color: #6651c2;
    margin-bottom: 22px
}
.eyebrow-line {
    height: 2px;
    width: 34px;
    background: linear-gradient(90deg, var(--blue), var(--violet))
}
.hero h1 {
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.06em;
    font-size: clamp(50px, 5.15vw, 76px);
    max-width: 705px;
    margin: 0 0 26px
}
.hero-gradient {
    display: block;
    background: linear-gradient(107deg, #7357e9 4%, #a778e9 48%, #e674b0 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
.hero-lead {
    font-size: 16px;
    line-height: 1.82;
    color: #51546f;
    max-width: 545px;
    margin-bottom: 25px
}
.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 33px
}
.hero-pills > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(115, 87, 233, .12);
    background: rgba(255, 255, 255, .74);
    border-radius: 999px;
    padding: 9px 13px;
    color: #45445e
}
.hero-pills .icon {
    width: 15px;
    height: 15px;
    color: #7761cc
}
.hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}
.hero-note {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #76748a;
    max-width: 510px;
    margin-top: 30px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.55
}
.hero-note-star {
    font: 800 34px/.9 Manrope, sans-serif;
    color: #ec799a
}
.hero-visual {
    min-height: 582px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center
}
.hero-photo-halo {
    position: absolute;
    width: 100%;
    height: 94%;
    top: 3%;
    background: linear-gradient(135deg, rgba(147, 189, 255, .54), rgba(255, 157, 193, .46) 53%, rgba(169, 124, 255, .54));
    border-radius: 270px 270px 44px 44px;
    transform: rotate(5deg);
    filter: blur(.3px)
}
.hero-photo-wrap {
    position: relative;
    width: 87%;
    height: 557px;
    border: 7px solid white;
    border-radius: 250px 250px 34px 34px;
    overflow: hidden;
    background: #d9e7f2;
    box-shadow: 0 27px 65px rgba(44, 56, 99, .2);
    transform: rotate(-2deg)
}
.hero-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 51% 22%;
    transform: scale(1.04) rotate(2deg)
}
.hero-floating {
    position: absolute;
    z-index: 3;
    background: white;
    box-shadow: 0 18px 60px rgba(49, 49, 111, .17);
    border: 1px solid rgba(255, 255, 255, .8)
}
.hero-floating-top {
    top: 13%;
    right: -8%;
    padding: 16px 19px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: rotate(5deg);
    font-size: 11px;
    line-height: 1.6;
    font-weight: 700
}
.hero-floating-top b {
    color: #7758d9
}
.floating-mark {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8e1ff;
    color: var(--violet)
}
.hero-floating-bottom {
    bottom: 4%;
    left: -6%;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    transform: rotate(-3deg)
}
.float-avatar {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #8060e9, #ff7190);
    border-radius: 14px;
    font-size: 14px;
    color: white;
    font-weight: 900
}
.hero-floating-bottom strong {
    display: block;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 900
}
.hero-floating-bottom small {
    display: block;
    color: #88869c;
    font-size: 10px;
    margin-top: 3px
}
.float-arrow {
    color: #9b83dc;
    margin-left: 16px;
    font-size: 22px
}
.hero-bottom-wave {
    position: absolute;
    width: 125%;
    height: 30px;
    left: -12%;
    bottom: -25px;
    border-radius: 50%;
    background: white
}
/* proof */
.proof-ribbon {
    background: #fff;
    border-bottom: 1px solid #f0eef5
}
.proof-grid {
    display: grid;
    grid-template-columns:1fr 1.17fr 1fr
}
.proof-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 20px;
    border-right: 1px solid var(--line)
}
.proof-item:first-child {
    padding-left: 0
}
.proof-item:last-child {
    border-right: 0
}
.proof-number {
    font-family: Manrope, sans-serif;
    font-weight: 800;
    color: #d2c9ef;
    font-size: 32px;
    letter-spacing: -.08em
}
.proof-item p {
    margin: 0;
    font-size: 12px;
    color: #656476;
    line-height: 1.55
}
.proof-item strong {
    color: #1f213e;
    font-weight: 900
}
/* story */
.story-section {
    padding: 106px 0
}
.story-grid {
    display: grid;
    grid-template-columns:1.1fr .9fr;
    gap: 84px;
    align-items: center
}
.story-picture {
    height: 458px;
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    background: #f4ecea;
    box-shadow: 0 25px 60px rgba(33, 43, 66, .1)
}
.story-picture img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 51% 50%
}
.story-photo-label {
    position: absolute;
    left: 23px;
    bottom: 23px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: #232239;
    background: rgba(255, 255, 255, .96);
    border-radius: 100px;
    padding: 12px 17px;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 10px 26px rgba(20, 20, 40, .16)
}
.small-dot, .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17bd97;
    display: inline-block
}
.story-copy .section-title {
    font-size: clamp(44px, 5vw, 66px);
    margin-bottom: 24px
}
.story-highlight {
    font-size: 20px;
    line-height: 1.55;
    font-weight: 800;
    color: #272643;
    margin-bottom: 20px;
    max-width: 550px
}
.story-copy > p:not(.story-highlight) {
    font-size: 14px;
    color: #66677d;
    line-height: 1.95;
    max-width: 510px
}
.story-principle {
    border-left: 3px solid #9d75f4;
    margin-top: 30px;
    display: flex;
    gap: 16px;
    background: #f7f5ff;
    padding: 18px 21px;
    border-radius: 0 18px 18px 0;
    color: #55556d;
    font-size: 12px;
    line-height: 1.75
}
.story-principle .icon {
    color: var(--violet);
    width: 25px;
    height: 25px
}
.story-principle strong {
    color: #221f45
}
/* cases */
.section-cases {
    background: linear-gradient(180deg, #f7faff, #fff 90%);
    padding-top: 106px
}
.case-feature {
    display: grid;
    grid-template-columns:1fr .94fr;
    min-height: 440px;
    border-radius: 36px;
    overflow: hidden;
    background: #24203f;
    box-shadow: 0 29px 66px rgba(30, 29, 76, .15)
}
.case-feature-copy {
    padding: 47px 47px 36px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: radial-gradient(circle at 4% 2%, rgba(167, 120, 255, .24), transparent 48%), linear-gradient(145deg, #2f2861, #1c1d3b 75%)
}
.case-tag {
    font-size: 10px;
    letter-spacing: .11em;
    font-weight: 900;
    color: #d9d2ff;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 23px
}
.case-index {
    letter-spacing: .15em;
    font-weight: 900;
    font-size: 10px;
    color: #c3b9e9
}
.case-feature h3 {
    font-size: clamp(28px, 3.1vw, 40px);
    line-height: 1.22;
    letter-spacing: -.055em;
    margin: 16px 0 17px;
    font-weight: 900;
    max-width: 470px;
    color: #fff;
}
.case-feature-copy > p {
    color: #d1d0e5;
    font-size: 13px;
    line-height: 1.8;
    max-width: 495px
}
.case-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px
}
.case-steps span {
    font-size: 10px;
    font-weight: 800;
    color: #f5efff;
    padding: 8px 9px;
    background: rgba(255, 255, 255, .1);
    border-radius: 9px
}
.case-steps b {
    font-weight: 900;
    color: #ffa0bf
}
.case-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    margin-top: auto;
    padding-top: 28px
}
.case-note {
    font-size: 10px;
    color: #aba9ca;
    line-height: 1.5
}
.case-link {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 7px
}
.case-link .icon {
    width: 15px;
    height: 15px
}
.case-screens {
    position: relative;
    background: radial-gradient(circle at 20% 82%, #fff1f5, transparent 44%), linear-gradient(135deg, #e9eaff, #d9eaff 55%, #f5e9ff);
    overflow: hidden
}
.case-screens::after {
    content: "";
    position: absolute;
    width: 310px;
    height: 310px;
    border: 1px solid rgba(107, 94, 200, .13);
    border-radius: 50%;
    right: -135px;
    top: -90px;
    box-shadow: 0 0 0 45px rgba(107, 94, 200, .05), 0 0 0 100px rgba(107, 94, 200, .035)
}
.case-screen {
    background: #fff;
    border: 7px solid #fff;
    position: absolute;
    box-shadow: 0 17px 45px rgba(35, 41, 90, .17);
    overflow: hidden;
    cursor: zoom-in
}
.case-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.screen-primary {
    width: 80%;
    height: 55%;
    left: 7%;
    top: 12%;
    border-radius: 19px;
    transform: rotate(-6deg);
    z-index: 2
}
.screen-secondary {
    width: 58%;
    height: 42%;
    right: 2%;
    bottom: 8%;
    border-radius: 15px;
    transform: rotate(7deg);
    z-index: 3
}
.screen-sticker {
    position: absolute;
    left: 7%;
    bottom: 9%;
    max-width: 150px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.45;
    color: #6256a3
}
.screen-sticker span {
    display: inline-block;
    margin-left: 5px
}
.case-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 22px;
    margin-top: 22px
}
.case-compact {
    border-radius: 30px;
    border: 1px solid #eeedf6;
    position: relative;
    overflow: hidden;
    padding: 32px 34px 25px;
    min-height: 456px;
    box-shadow: 0 11px 40px rgba(27, 38, 95, .055)
}
.case-document {
    background: #fbf9ff
}
.case-data {
    background: #f1faff
}
.case-compact-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px
}
.case-compact-top .case-index {
    color: #a3a2b6
}
.case-icon {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    border-radius: 15px
}
.case-icon .icon {
    width: 25px;
    height: 25px
}
.case-icon.purple {
    background: #e5ddff;
    color: #7557d8
}
.case-icon.blue {
    background: #d8f1ff;
    color: #167bb2
}
.case-icon.pink {
    background: #ffdfeb;
    color: #eb608b
}
.case-compact h3 {
    font-size: 25px;
    line-height: 1.23;
    letter-spacing: -.038em;
    margin: 0 0 14px;
    font-weight: 900;
    max-width: 430px
}
.case-compact > p, .case-wide-left > p {
    font-size: 12px;
    line-height: 1.85;
    color: #666a83;
    margin: 0 0 22px;
    max-width: 475px
}
.mini-workflow {
    padding: 18px 20px 16px;
    border: 1px solid #e2ddf5;
    border-radius: 17px;
    background: #fff
}
.mini-workflow-label, .mini-analytics-label {
    font-size: 9px;
    letter-spacing: .12em;
    font-weight: 900;
    color: #9286c5
}
.mini-workflow p {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.65;
    margin: 10px 0 13px;
    color: #363551
}
.mini-flow-tag {
    color: #5b55a2;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 7px
}
.mini-flow-tag .icon {
    width: 13px;
    height: 13px
}
.case-caption {
    font-size: 10px;
    color: #88899c;
    display: block;
    line-height: 1.6;
    margin-top: 16px
}
.mini-analytics {
    border: 1px solid #dbeaf6;
    border-radius: 17px;
    background: #fff;
    padding: 16px 20px 13px
}
.chart-illustration {
    height: 102px;
    margin: 9px 4px 10px;
    display: flex;
    align-items: end;
    gap: 12px;
    border-bottom: 1px solid #e6eaf3;
    padding-bottom: 1px
}
.chart-illustration i {
    display: block;
    flex: 1;
    height: var(--h);
    background: linear-gradient(180deg, #11b1db, #7c76e9);
    border-radius: 7px 7px 0 0;
    opacity: .78
}
.analytics-flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666b8d;
    gap: 7px;
    font-weight: 800;
    font-size: 10px
}
.analytics-flow b {
    color: #b9b9d8
}
.case-wide {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 244px;
    background: linear-gradient(110deg, #fff7f7, #fffdfb 70%)
}
.case-wide-left {
    max-width: 555px
}
.case-wide .case-compact-top {
    justify-content: flex-start;
    gap: 17px;
    margin-bottom: 12px
}
.case-wide h3 {
    max-width: 560px
}
.case-wide-left > p {
    margin-bottom: 8px
}
.case-flow-graphic {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    margin-right: 14px
}
.flow-node {
    width: 107px;
    height: 109px;
    border-radius: 19px;
    background: white;
    box-shadow: 0 15px 30px rgba(230, 119, 155, .1);
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    justify-content: center;
    border: 1px solid #f4e9f1;
    color: #8b77b6
}
.flow-node .icon {
    width: 28px;
    height: 28px;
    color: #bb68c4
}
.flow-node strong {
    font-size: 11px;
    color: #4c4868
}
.flow-connector {
    font-size: 20px;
    color: #d785c1;
    font-weight: 900
}
.case-tail {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    border-top: 1px solid #e9e8f2;
    padding-top: 24px
}
.case-tail-star {
    font-size: 38px;
    line-height: 1;
    color: var(--violet)
}
.case-tail p {
    font-size: 12px;
    color: #69677f;
    max-width: 785px;
    line-height: 1.8;
    margin: 0
}
.case-tail p strong {
    color: #282841
}
.case-tail a {
    white-space: nowrap;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 900;
    color: var(--violet)
}
.case-tail .icon {
    width: 17px;
    height: 17px
}
/* impact */
.impact-section {
    padding-top: 115px;
    padding-bottom: 124px
}
.impact-layout {
    display: grid;
    grid-template-columns:.85fr 1.15fr;
    gap: 80px;
    align-items: center
}
.impact-heading .section-title {
    max-width: 460px
}
.impact-heading > p {
    font-size: 14px;
    line-height: 1.92;
    color: #6a697e;
    max-width: 440px
}
.impact-quote {
    display: flex;
    align-items: start;
    gap: 14px;
    border-left: 3px solid var(--violet);
    padding: 12px 16px;
    background: #f6f4ff;
    margin-top: 27px;
    border-radius: 0 18px 18px 0;
    color: #57516e;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.85
}
.impact-quote .icon {
    color: var(--violet);
    width: 24px;
    height: 24px
}
.impact-cards {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}
.impact-card {
    padding: 26px 26px 24px;
    background: #f8f8fc;
    border: 1px solid #eeedf5;
    border-radius: 25px;
    min-height: 230px;
    position: relative;
    overflow: hidden
}
.impact-card:nth-child(2) {
    background: #f5fbff
}
.impact-card:nth-child(3) {
    background: #fff8f9
}
.impact-card:nth-child(4) {
    background: #f8f6ff
}
.impact-no {
    position: absolute;
    right: 20px;
    top: 13px;
    font: 900 35px/1 Manrope, sans-serif;
    letter-spacing: -.09em;
    color: rgba(124, 106, 187, .12)
}
.impact-card > .icon {
    color: #8269de;
    width: 26px;
    height: 26px;
    margin-bottom: 23px
}
.impact-card h3 {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -.02em;
    margin-bottom: 9px
}
.impact-card p {
    font-size: 11px;
    line-height: 1.8;
    color: #737184;
    max-width: 260px;
    margin: 0
}
/* program */
.program-section {
    color: #fff;
    background: radial-gradient(circle at 95% 2%, rgba(115, 87, 233, .32), transparent 37%), radial-gradient(circle at 2% 99%, rgba(16, 164, 216, .15), transparent 35%), #171a36;
    position: relative;
    overflow: hidden;
    padding: 112px 0 105px
}
.program-section::before {
    content: "";
    position: absolute;
    right: -180px;
    top: 240px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(255, 255, 255, .018), 0 0 0 160px rgba(255, 255, 255, .015)
}
.program-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 60px;
    position: relative
}
.kicker-light {
    color: #b5a8ff
}
.section-title-white {
    color: #fff;
    font-size: clamp(37px, 4.6vw, 63px);
    margin-bottom: 0
}
.program-shimmer {
    background: linear-gradient(110deg, #a7b4ff, #f9a8c4 65%, #ffcfdd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
.program-total {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 0;
    color: #c8c5e5;
    font-size: 11px;
    line-height: 1.55;
    font-weight: 700
}
.program-total > span {
    font: 800 94px/.9 Manrope, sans-serif;
    letter-spacing: -.11em;
    color: #fff
}
.program-timeline {
    max-width: 1020px;
    position: relative
}
.program-timeline h3 {
    color: #fff;
}
.program-row {
    display: grid;
    grid-template-columns:134px 46px minmax(0, 1fr);
    gap: 0;
    min-height: 92px
}
.program-time {
    font: 900 20px/1.3 Montserrat, sans-serif;
    letter-spacing: -.045em;
    color: #e9e7fd;
    white-space: nowrap;
    padding: 7px 0
}
.program-time small {
    display: block;
    font-size: 9px;
    color: #8d8fae;
    letter-spacing: .1em;
    font-weight: 800;
    margin-top: 4px
}
.program-line {
    position: relative;
    display: flex;
    justify-content: center
}
.program-line::before {
    content: "";
    width: 1px;
    background: rgba(173, 165, 232, .3);
    position: absolute;
    top: 15px;
    bottom: -14px
}
.program-row:last-child .program-line::before {
    display: none
}
.program-line i {
    width: 14px;
    height: 14px;
    border: 3px solid #826bda;
    background: #1b1e3e;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    box-shadow: 0 0 0 6px rgba(119, 88, 223, .13)
}
.program-description {
    padding: 1px 0 25px;
    border-bottom: 1px solid rgba(255, 255, 255, .095);
    margin-bottom: 22px
}
.program-row:last-child .program-description {
    border: 0
}
.program-description h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 900;
    margin: 2px 0 8px;
    letter-spacing: -.025em
}
.program-description p {
    font-size: 12px;
    color: #adafc7;
    margin-bottom: 0;
    line-height: 1.7
}
.program-row-highlight .program-description {
    border-radius: 13px;
    padding: 14px 18px 17px;
    margin-top: -11px;
    margin-bottom: 13px;
    background: rgba(115, 87, 233, .18);
    border: 1px solid rgba(173, 142, 255, .24)
}
.program-row-highlight .program-time {
    color: #c3b1ff
}
.program-row-highlight .program-line i {
    background: #ff7599;
    border-color: #ffd1e0
}
.program-popular {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    color: #fcaac5
}
.program-footer {
    display: flex;
    align-items: center;
    gap: 19px;
    max-width: 1110px;
    margin-top: 27px;
    padding: 20px 24px;
    border-radius: 19px;
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(255, 255, 255, .11)
}
.program-footer > .icon {
    width: 28px;
    height: 28px;
    color: #f6a9bc
}
.program-footer p {
    margin: 0;
    line-height: 1.7;
    font-size: 11px;
    color: #c3c2d8;
    flex: 1
}
.program-footer a {
    font-size: 11px;
    white-space: nowrap;
    font-weight: 900;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 9px
}
/* directions */
.directions-section {
    background: #fff;
    padding: 119px 0 104px
}
.directions-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 14px
}
.direction-card {
    border: 1px solid #e9e8f3;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(30, 42, 99, .045);
    transition: border-color .2s, background .2s
}
.direction-card[open] {
    border-color: #cfc4ff;
    background: #fcfbff
}
.direction-card summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 19px 22px;
    cursor: pointer;
    min-height: 91px
}
.direction-card summary::-webkit-details-marker {
    display: none
}
.direction-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 15px;
    flex: none
}
.direction-icon .icon {
    width: 23px;
    height: 23px
}
.icon-violet {
    color: #7556e9;
    background: #ece6ff
}
.icon-sky {
    color: #138fbf;
    background: #e3f5ff
}
.icon-pink {
    color: #e6638e;
    background: #ffe8f0
}
.icon-peach {
    color: #de8165;
    background: #ffede7
}
.icon-purple {
    color: #8551c0;
    background: #f2eaff
}
.icon-blue {
    color: #447ac1;
    background: #e7efff
}
.icon-green {
    color: #329b9b;
    background: #dcf7f4
}
.icon-gold {
    color: #bb8529;
    background: #fff3d7
}
.direction-title {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -.025em;
    line-height: 1.3;
    flex: 1
}
.direction-num {
    font-size: 10px;
    font-weight: 900;
    color: #c3c1d0
}
.direction-chevron {
    width: 17px !important;
    height: 17px !important;
    color: #797a9b;
    transition: transform .2s
}
.direction-card[open] .direction-chevron {
    transform: rotate(180deg)
}
.direction-extra {
    padding: 0 24px 23px 89px
}
.direction-extra p {
    font-size: 12px;
    line-height: 1.8;
    color: #696b83;
    margin-bottom: 16px
}
.direction-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}
.direction-chips span {
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 9px;
    font-weight: 800;
    background: #eeecfb;
    color: #7566a5
}
.directions-under {
    border: 1px solid #e6e4ee;
    border-radius: 25px;
    padding: 24px 30px;
    text-align: center;
    background: #f9faff;
    margin-top: 28px
}
.directions-under > span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    color: #777493
}
.tool-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 10px
}
.tool-cloud span {
    font-size: 12px;
    font-weight: 800;
    background: white;
    border-radius: 99px;
    padding: 10px 17px;
    color: #4c4b64;
    border: 1px solid #e6e4f1
}
.directions-under p {
    font-size: 10px;
    color: #9090a3;
    margin-bottom: 0
}
/* speaker */
.speaker-section {
    background: linear-gradient(135deg, #f9f8ff, #f3f7ff);
    padding: 110px 0 100px
}
.speaker-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px
}
.speaker-header .section-title {
    margin: 0
}
.speaker-header > p {
    font-size: 13px;
    color: #6d6b86;
    line-height: 1.85;
    max-width: 320px;
    margin-bottom: 6px
}
.speaker-layout {
    display: grid;
    grid-template-columns:.93fr 1.07fr;
    gap: 22px
}
.speaker-lead {
    height: 466px;
    overflow: hidden;
    border-radius: 30px;
    position: relative;
    background: #dde4e7
}
.speaker-lead-photo {
    position: absolute;
    inset: 0
}
.speaker-lead-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 31%
}
.speaker-lead::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(0deg, rgba(16, 17, 38, .85), transparent)
}
.speaker-lead-text {
    position: absolute;
    z-index: 2;
    left: 30px;
    bottom: 28px;
    color: white
}
.speaker-lead-text span {
    font-size: 9px;
    letter-spacing: .16em;
    font-weight: 900;
    color: #e7d9ff
}
.speaker-lead-text strong {
    display: block;
    font-size: 23px;
    line-height: 1.28;
    letter-spacing: -.035em;
    margin-top: 10px
}
.speaker-facts {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 15px
}
.speaker-fact {
    border: 1px solid #e7e4f2;
    border-radius: 25px;
    background: #fff;
    padding: 26px 22px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 28px rgba(38, 44, 95, .04)
}
.fact-no {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .11em;
    color: #927de2
}
.speaker-fact h3 {
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
    margin: 19px 0 12px;
    letter-spacing: -.03em
}
.speaker-fact p {
    font-size: 11px;
    line-height: 1.75;
    color: #777589;
    margin: 0
}
.speaker-fact a {
    color: #765adc;
    font-weight: 800;
    white-space: nowrap
}
.speaker-fact a .icon {
    vertical-align: middle;
    width: 12px;
    height: 12px
}
.speaker-gallery {
    display: grid;
    grid-template-columns:1.07fr 1fr .56fr;
    gap: 15px;
    margin-top: 20px
}
.speaker-gallery-photo {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    height: 213px
}
.speaker-gallery-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}
.speaker-gallery-photo::after {
    content: "";
    position: absolute;
    inset: 48% 0 0;
    background: linear-gradient(0deg, rgba(17, 18, 40, .5), transparent)
}
.speaker-gallery-photo span {
    position: absolute;
    bottom: 17px;
    left: 18px;
    color: white;
    font-size: 11px;
    font-weight: 800;
    z-index: 1
}
.gallery-lab img {
    object-position: center 33%
}
.speaker-gallery-caption {
    background: linear-gradient(120deg, #e3eaff, #eedfff);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    padding: 20px 29px
}
.gallery-symbol {
    font-size: 45px;
    color: #7958d6
}
.speaker-gallery-caption p {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.5
}
.speaker-gallery-caption em {
    font-style: normal;
    color: #7458cb
}
/* vote */
.vote-section {
    background: #fff;
    padding: 122px 0
}
.vote-layout {
    display: grid;
    grid-template-columns:.83fr 1.17fr;
    gap: 80px;
    align-items: center
}
.vote-intro {
    align-self: start;
    padding-top: 19px
}
.vote-intro .section-title {
    max-width: 410px
}
.vote-intro > p {
    font-size: 14px;
    line-height: 1.88;
    color: #69687f;
    margin: 0 0 28px
}
.vote-sidebar-note {
    display: flex;
    gap: 14px;
    align-items: start;
    border-radius: 19px;
    padding: 18px 18px;
    background: #f4f2ff;
    font-size: 11px;
    line-height: 1.8;
    color: #676080
}
.vote-sidebar-note > .icon {
    color: #8060d4;
    width: 22px;
    height: 22px
}
.vote-progress {
    margin-top: 35px;
    max-width: 290px
}
.vote-progress > span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    color: #665a9c;
    margin-bottom: 10px
}
.vote-progress-track {
    width: 100%;
    height: 7px;
    border-radius: 99px;
    background: #eceaf4;
    overflow: hidden
}
.vote-progress-track i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #795adf, #ff7294);
    border-radius: 99px;
    transition: width .23s
}
.vote-panel {
    background: #f8f8fe;
    border-radius: 34px;
    border: 1px solid #ebe8f6;
    padding: 28px;
    box-shadow: 0 22px 65px rgba(41, 46, 108, .09)
}
.vote-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
    font-size: 10px;
    letter-spacing: .13em;
    font-weight: 900;
    color: #686582
}
.vote-indicator {
    color: #8166e1;
    background: #ede7ff;
    padding: 7px 10px;
    border-radius: 10px
}
.vote-options {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 11px
}
.vote-option {
    border: 1px solid #e2dfea;
    background: #fff;
    border-radius: 15px;
    padding: 13px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    min-height: 66px;
    transition: border-color .2s, background .2s, transform .2s;
    color: #3e3a54
}
.vote-option:hover {
    border-color: #a899ed;
    transform: translateY(-2px)
}
.vote-option[aria-pressed=true] {
    border-color: #7557e8;
    background: #f0ebff;
    box-shadow: 0 0 0 1px #7557e8 inset
}
.vote-option > span:first-child {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f1eeff;
    color: #8063d0;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 12px
}
.vote-option[aria-pressed=true] > span:first-child {
    background: #7658e4;
    color: white
}
.vote-option .vote-opt-text {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    flex: 1
}
.vote-option .vote-check {
    color: var(--violet);
    width: 15px;
    height: 15px;
    opacity: 0
}
.vote-option[aria-pressed=true] .vote-check {
    opacity: 1
}
.vote-actions {
    display: flex;
    gap: 17px;
    align-items: center;
    margin-top: 23px
}
.vote-actions .btn {
    min-height: 51px;
    padding: 14px 23px;
    font-size: 11px
}
.vote-reset {
    border: 0;
    background: none;
    color: #797789;
    font-size: 11px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px
}
.vote-message {
    font-size: 11px;
    color: #656277;
    line-height: 1.7;
    margin-top: 13px;
    min-height: 20px
}
.vote-results {
    border-top: 1px solid #e0dced;
    padding-top: 20px;
    margin-top: 17px
}
.vote-result-heading {
    font-size: 12px;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
    margin-bottom: 13px
}
.vote-result-heading span {
    font-size: 10px;
    color: #85819c;
    font-weight: 700
}
.vote-result-row {
    display: grid;
    grid-template-columns:140px 1fr 24px;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
    font-size: 10px;
    color: #53536b;
    font-weight: 700
}
.vote-result-track {
    height: 8px;
    background: #eae7f4;
    border-radius: 99px;
    overflow: hidden
}
.vote-result-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #7859e8, #db80dc);
    border-radius: 99px;
    transition: width .4s
}
/* format */
.format-section {
    background: #f8faff;
    padding: 85px 0
}
.format-grid {
    display: grid;
    grid-template-columns:1.07fr .93fr;
    gap: 65px;
    align-items: center
}
.format-grid .section-title {
    font-size: clamp(36px, 3.8vw, 52px)
}
.format-grid > div:first-child > p {
    max-width: 590px;
    font-size: 13px;
    color: #77748a;
    line-height: 1.95
}
.format-tiles {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}
.format-tiles > div {
    border-radius: 19px;
    background: white;
    border: 1px solid #eae9f3;
    padding: 18px 19px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}
.format-tiles > div:first-child {
    grid-column: span 2;
    min-height: 105px
}
.format-tiles .icon {
    color: #7859db;
    width: 23px;
    height: 23px
}
.format-tiles strong {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900
}
.format-tiles span {
    font-size: 10px;
    line-height: 1.5;
    color: #77758a
}
/* contact */
.contact-section {
    background: #fff;
    padding: 102px 0
}
.contact-banner {
    min-height: 386px;
    background: radial-gradient(circle at 82% 90%, rgba(255, 132, 163, .25), transparent 35%), linear-gradient(111deg, #393080 1%, #7455e2 58%, #a16bea);
    color: #fff;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns:1.15fr .85fr;
    box-shadow: 0 30px 60px rgba(95, 69, 195, .2)
}
.contact-main {
    padding: 55px 0 52px 58px;
    position: relative;
    z-index: 2
}
.contact-main h2 {
    font-size: clamp(34px, 4.2vw, 55px);
    line-height: 1.17;
    font-weight: 900;
    letter-spacing: -.052em;
    margin-bottom: 15px;
    color: #fff;
}
.contact-main p {
    font-size: 12px;
    line-height: 1.8;
    color: #ddd7ff;
    max-width: 460px;
    margin-bottom: 26px
}
.contact-btn {
    background: white;
    color: #4c3999;
    min-height: 53px;
    padding: 16px 24px;
    font-size: 11px;
    box-shadow: 0 14px 26px rgba(25, 18, 90, .16)
}
.contact-email {
    font-size: 11px;
    color: #d0c8ff;
    margin-left: 15px;
    font-weight: 800
}
.contact-art {
    position: absolute;
    top: -200px;
    right: -180px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 80px rgba(255, 255, 255, .04), 0 0 0 180px rgba(255, 255, 255, .025)
}
.contact-art > span {
    display: none
}
.contact-side {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    z-index: 1
}
.contact-side-label {
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 900;
    color: #ded8ff
}
.contact-side-circle {
    width: 176px;
    height: 176px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .29), rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .29);
    box-shadow: 0 0 0 18px rgba(255, 255, 255, .05)
}
.contact-side-circle .icon {
    width: 82px;
    height: 82px;
    stroke-width: 1.3;
    color: #fff
}
.contact-side-small {
    font-size: 9px;
    letter-spacing: .14em;
    font-weight: 800;
    color: #d8d4ff
}
/* feedback */
.feedback-section {
    padding: 52px 0 112px;
    background: #fff
}
.feedback-layout {
    display: grid;
    grid-template-columns:.85fr 1.15fr;
    gap: 110px;
    align-items: start
}
.feedback-intro {
    padding-top: 29px
}
.feedback-intro p {
    font-size: 13px;
    color: #78768b;
    line-height: 1.95;
    max-width: 430px
}
.feedback-form {
    padding: 30px 35px;
    border: 1px solid #e7e5ee;
    border-radius: 28px;
    background: #faf9ff
}
.rating-field {
    border: none;
    padding: 0;
    margin: 0 0 24px
}
.rating-field legend, .feedback-label {
    display: block;
    font-size: 12px;
    font-weight: 900;
    color: #33314b;
    margin-bottom: 12px
}
.rating-options {
    display: flex;
    gap: 9px
}
.rating-options label {
    flex: 1;
    cursor: pointer
}
.rating-options input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}
.rating-options label span {
    width: 100%;
    display: grid;
    place-items: center;
    height: 46px;
    border-radius: 12px;
    background: white;
    border: 1px solid #e3e1ee;
    font-weight: 900;
    color: #6f6d84;
    transition: .2s
}
.rating-options input:checked + span {
    color: white;
    background: #7557e6;
    border-color: #7557e6;
    box-shadow: 0 6px 17px rgba(117, 87, 230, .22)
}
.rating-options input:focus-visible + span {
    outline: 3px solid #10a4d8;
    outline-offset: 3px
}
.rating-ends {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #9694a6;
    margin-top: 9px
}
.feedback-form select, .feedback-form textarea {
    width: 100%;
    border: 1px solid #e3dfed;
    background: white;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12px;
    color: #48465d;
    margin-bottom: 20px;
    outline-color: var(--violet)
}
.feedback-form textarea {
    resize: vertical;
    min-height: 90px
}
.feedback-form .btn {
    min-height: 50px;
    font-size: 11px;
    padding: 14px 22px
}
.feedback-response {
    font-size: 11px;
    color: #666484;
    line-height: 1.75;
    margin: 12px 0 0
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(16, 17, 33, .94);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 17px;
    padding: 50px 30px 30px
}
.lightbox[hidden] {
    display: none
}
.lightbox img {
    max-height: calc(100vh - 145px);
    max-width: min(1100px, 95vw);
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 30px 90px #0009
}
.lightbox p {
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 12px
}
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    border: 1px solid #ffffff50;
    background: #ffffff20;
    color: #fff;
    display: grid;
    place-items: center
}
.has-js .reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .25, 1)
}
.has-js .reveal.visible {
    opacity: 1;
    transform: none
}
/* breakpoints */
@media (max-width: 1160px) {
    .desktop-nav {
        gap: 14px
    }
    .desktop-nav a {
        font-size: 10px
    }
    .brand-text > span:last-child {
        max-width: 104px
    }
    .header-inner {
        gap: 14px
    }
    .header-action {
        font-size: 10px
    }
    .hero h1 {
        font-size: clamp(46px, 5.7vw, 66px)
    }
    .hero-layout {
        gap: 26px
    }
    .hero-floating-top {
        right: -3%
    }
    .hero-floating-bottom {
        left: -1%
    }
    .story-grid {
        gap: 45px
    }
    .impact-layout {
        gap: 37px
    }
    .vote-layout {
        gap: 40px
    }
    .feedback-layout {
        gap: 55px
    }
}
@media (max-width: 980px) {
    .desktop-nav, .header-action {
        display: none
    }
    .menu-toggle {
        display: grid;
        margin-left: auto
    }
    .site-header, .header-inner {
        height: 75px
    }
    .mobile-nav {
        display: grid;
        position: absolute;
        left: 0;
        right: 0;
        top: 75px;
        background: rgba(255, 255, 255, .985);
        border-bottom: 1px solid #e7e3ef;
        padding: 15px 26px 25px;
        box-shadow: 0 22px 42px rgba(20, 22, 55, .12);
        gap: 2px
    }
    .mobile-nav[hidden] {
        display: none
    }
    .mobile-nav a {
        padding: 12px 8px;
        font-size: 13px;
        font-weight: 800;
        border-bottom: 1px solid #f1eff7
    }
    .hero {
        padding: 214px 0 60px
    }
    .hero-layout {
        grid-template-columns:1fr 1fr
    }
    .hero h1 {
        font-size: clamp(40px, 5.3vw, 62px)
    }
    .hero-lead {
        font-size: 14px
    }
    .hero-visual {
        min-height: 495px
    }
    .hero-photo-wrap {
        height: 470px;
        width: 88%
    }
    .hero-floating-top {
        top: 6%;
        right: -3%
    }
    .hero-floating-bottom {
        left: -7%
    }
    .proof-item {
        padding-inline: 12px;
        gap: 10px
    }
    .proof-item p {
        font-size: 10px
    }
    .story-grid {
        grid-template-columns:1fr 1fr;
        gap: 30px
    }
    .story-picture {
        height: 405px
    }
    .story-highlight {
        font-size: 16px
    }
    .story-copy .section-title {
        font-size: 48px
    }
    .section {
        padding: 87px 0
    }
    .case-feature-copy {
        padding: 37px 30px
    }
    .case-feature h3 {
        color: #fff !important;
    }
    .case-feature {
        min-height: 408px
    }
    .case-screens {
        min-height: 408px
    }
    .case-bottom {
        flex-direction: column;
        align-items: start;
        gap: 8px
    }
    .impact-layout {
        grid-template-columns:.8fr 1.2fr
    }
    .impact-card {
        padding: 21px 19px
    }
    .program-total > span {
        font-size: 75px
    }
    .speaker-layout {
        grid-template-columns:1fr 1fr
    }
    .speaker-lead {
        height: 460px
    }
    .speaker-fact {
        padding: 20px 16px;
        min-height: 220px
    }
    .speaker-fact h3 {
        font-size: 15px
    }
    .speaker-gallery {
        grid-template-columns:1fr 1fr
    }
    .speaker-gallery-photo.gallery-lab {
        display: none
    }
    .vote-layout {
        grid-template-columns:.8fr 1.2fr;
        gap: 26px
    }
    .vote-panel {
        padding: 20px
    }
    .contact-main {
        padding-left: 40px
    }
    .feedback-layout {
        grid-template-columns:.85fr 1.15fr;
        gap: 30px
    }
}
@media (max-width: 750px) {
    :root {
        --container: min(100% - 34px, 560px)
    }
    html {
        scroll-padding-top: 82px
    }
    .site-header, .header-inner {
        height: 72px
    }
    .mobile-nav {
        top: 72px
    }
    .brand-text strong {
        font-size: 19px
    }
    .brand-text > span:last-child {
        font-size: 8px
    }
    .hero {
        padding: 173px 0 64px
    }
    .hero-layout {
        display: flex;
        flex-direction: column;
        gap: 27px
    }
    .hero-content {
        width: 100%
    }
    .eyebrow {
        font-size: 9px;
        letter-spacing: .12em;
        margin-bottom: 19px
    }
    .hero h1 {
        font-size: clamp(40px, 10.3vw, 65px);
        line-height: 1.06;
        margin-bottom: 20px
    }
    .hero-lead {
        font-size: 13px;
        line-height: 1.82;
        max-width: 530px
    }
    .hero-buttons {
        gap: 9px
    }
    .hero-buttons .btn {
        padding: 15px 18px;
        min-height: 51px;
        font-size: 11px
    }
    .hero-pills {
        gap: 7px;
        margin-bottom: 24px
    }
    .hero-pills > span {
        padding: 8px 9px;
        font-size: 10px
    }
    .hero-note {
        margin-top: 21px;
        font-size: 11px
    }
    .hero-visual {
        width: 100%;
        min-height: 385px;
        max-width: 440px;
        margin: 0 auto
    }
    .hero-photo-wrap {
        width: 83%;
        height: 370px;
        border-width: 5px;
        border-radius: 200px 200px 25px 25px
    }
    .hero-photo-halo {
        width: 92%;
        height: 90%;
        left: 4%
    }
    .hero-floating-top {
        right: -1%;
        top: 5%;
        padding: 10px 11px;
        font-size: 9px;
        border-radius: 14px
    }
    .floating-mark {
        width: 29px;
        height: 29px;
        border-radius: 9px
    }
    .floating-mark .icon {
        width: 17px;
        height: 17px
    }
    .hero-floating-bottom {
        left: -1%;
        bottom: -2%;
        padding: 10px;
        border-radius: 13px
    }
    .float-avatar {
        width: 36px;
        height: 36px;
        border-radius: 9px
    }
    .hero-floating-bottom strong {
        font-size: 10px
    }
    .hero-floating-bottom small {
        font-size: 8px
    }
    .float-arrow {
        margin-left: 4px
    }
    .proof-grid {
        grid-template-columns:1fr
    }
    .proof-item {
        padding: 12px 0;
        border-right: 0;
        border-bottom: 1px solid #f0eef6
    }
    .proof-item:last-child {
        border: 0
    }
    .proof-number {
        font-size: 26px;
        min-width: 35px
    }
    .proof-item p {
        font-size: 11px
    }
    .section {
        padding: 75px 0
    }
    .section-kicker {
        font-size: 10px;
        margin-bottom: 14px
    }
    .section-title {
        font-size: clamp(33px, 8.3vw, 48px)
    }
    .section-heading, .speaker-header {
        display: block;
        margin-bottom: 29px
    }
    .heading-aside {
        max-width: 100%;
        width: auto;
        margin: 14px 0 0;
        font-size: 12px
    }
    .story-grid {
        grid-template-columns:1fr;
        gap: 33px
    }
    .story-picture {
        height: 320px
    }
    .story-copy .section-title {
        font-size: clamp(42px, 9vw, 56px)
    }
    .story-highlight {
        font-size: 17px
    }
    .story-copy > p:not(.story-highlight) {
        font-size: 12px
    }
    .story-principle {
        margin-top: 20px
    }
    .section-cases {
        padding-top: 80px
    }
    .case-feature {
        grid-template-columns:1fr
    }
    .case-feature-copy {
        padding: 32px 25px 29px
    }
    .case-feature h3 {
        font-size: 32px
    }
    .case-steps {
        margin-bottom: 25px
    }
    .case-screens {
        height: 290px;
        min-height: 290px
    }
    .screen-primary {
        width: 69%;
        height: 65%;
        top: 6%
    }
    .screen-secondary {
        width: 55%;
        height: 49%;
        right: 6%;
        bottom: 2%
    }
    .screen-sticker {
        left: 6%;
        bottom: 11%;
        font-size: 9px
    }
    .case-grid {
        grid-template-columns:1fr;
        gap: 14px;
        margin-top: 14px
    }
    .case-compact {
        min-height: auto;
        padding: 25px 23px
    }
    .case-compact h3 {
        font-size: 23px
    }
    .case-wide {
        grid-column: 1;
        display: block
    }
    .case-flow-graphic {
        margin: 22px 0 0;
        justify-content: center
    }
    .flow-node {
        width: 80px;
        height: 86px;
        border-radius: 15px
    }
    .flow-node .icon {
        width: 23px;
        height: 23px
    }
    .flow-node strong {
        font-size: 9px
    }
    .case-tail {
        flex-wrap: wrap;
        gap: 15px
    }
    .case-tail a {
        margin-left: 0
    }
    .impact-layout {
        grid-template-columns:1fr;
        gap: 32px
    }
    .impact-heading .section-title {
        max-width: none
    }
    .impact-heading > p {
        max-width: none;
        font-size: 13px
    }
    .impact-cards {
        gap: 10px
    }
    .impact-card {
        min-height: 220px;
        padding: 19px 16px
    }
    .impact-card h3 {
        font-size: 13px
    }
    .impact-card p {
        font-size: 10px
    }
    .program-section {
        padding: 79px 0
    }
    .program-header {
        align-items: start;
        margin-bottom: 42px;
        flex-direction: column;
        gap: 18px
    }
    .program-total > span {
        font-size: 59px
    }
    .program-total {
        padding: 0
    }
    .program-row {
        grid-template-columns:84px 25px 1fr;
        min-height: 87px
    }
    .program-time {
        font-size: 13px
    }
    .program-description h3 {
        font-size: 14px
    }
    .program-description p {
        font-size: 11px
    }
    .program-description {
        padding-bottom: 18px;
        margin-bottom: 17px
    }
    .program-line i {
        width: 11px;
        height: 11px;
        border-width: 2px;
        margin-top: 9px
    }
    .program-footer {
        align-items: start;
        flex-wrap: wrap;
        gap: 12px
    }
    .program-footer p {
        flex-basis: calc(100% - 50px);
        font-size: 10px
    }
    .program-footer a {
        margin-left: 43px
    }
    .directions-grid {
        grid-template-columns:1fr;
        gap: 10px
    }
    .direction-card summary {
        min-height: 80px;
        padding: 16px 16px;
        gap: 12px
    }
    .direction-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px
    }
    .direction-title {
        font-size: 12px
    }
    .direction-extra {
        padding: 0 18px 19px 70px
    }
    .directions-under {
        padding: 21px 17px
    }
    .tool-cloud span {
        font-size: 10px;
        padding: 7px 12px
    }
    .speaker-layout {
        grid-template-columns:1fr;
        gap: 13px
    }
    .speaker-lead {
        height: 345px
    }
    .speaker-lead-photo img {
        object-position: 50% 40%
    }
    .speaker-facts {
        gap: 10px
    }
    .speaker-fact {
        min-height: 185px;
        padding: 19px 16px
    }
    .speaker-fact h3 {
        font-size: 14px;
        margin: 14px 0 9px
    }
    .speaker-fact p {
        font-size: 10px
    }
    .speaker-gallery {
        grid-template-columns:1fr;
        gap: 12px
    }
    .speaker-gallery-photo {
        height: 225px
    }
    .speaker-gallery-caption {
        min-height: 138px;
        order: 2
    }
    .vote-layout {
        grid-template-columns:1fr;
        gap: 28px
    }
    .vote-intro {
        padding: 0
    }
    .vote-progress {
        margin-top: 22px
    }
    .vote-panel {
        padding: 17px
    }
    .vote-options {
        gap: 8px
    }
    .vote-option {
        padding: 10px 9px;
        gap: 7px;
        min-height: 64px;
        border-radius: 12px
    }
    .vote-option > span:first-child {
        width: 26px;
        height: 28px;
        font-size: 10px
    }
    .vote-option .vote-opt-text {
        font-size: 10px
    }
    .vote-option .vote-check {
        display: none
    }
    .vote-actions {
        gap: 12px;
        flex-wrap: wrap
    }
    .vote-result-row {
        grid-template-columns:100px 1fr 20px;
        gap: 7px;
        font-size: 9px
    }
    .format-grid {
        grid-template-columns:1fr;
        gap: 23px
    }
    .format-grid .section-title {
        font-size: 38px
    }
    .format-tiles {
        grid-template-columns:1fr 1fr
    }
    .contact-section {
        padding: 64px 0
    }
    .contact-banner {
        grid-template-columns:1fr;
        border-radius: 30px;
        min-height: auto
    }
    .contact-main {
        padding: 38px 26px 44px
    }
    .contact-main h2 {
        font-size: 34px
    }
    .contact-main p {
        font-size: 11px
    }
    .contact-side {
        display: none
    }
    .contact-email {
        display: block;
        margin: 12px 0 0;
        font-size: 10px
    }
    .feedback-section {
        padding: 25px 0 85px
    }
    .feedback-layout {
        grid-template-columns:1fr;
        gap: 22px
    }
    .feedback-intro {
        padding-top: 0
    }
    .feedback-form {
        padding: 25px 19px
    }
    .footer-top {
        flex-wrap: wrap;
        gap: 15px
    }
    .footer-top > p {
        order: 3;
        flex-basis: 100%;
        font-size: 10px
    }
    .footer-bottom {
        font-size: 9px;
        line-height: 1.5
    }
}
@media (max-width: 400px) {
    .hero-buttons {
        align-items: stretch
    }
    .hero-buttons .btn {
        width: 100%
    }
    .hero-visual {
        min-height: 350px
    }
    .hero-photo-wrap {
        height: 335px
    }
    .hero-floating-top {
        right: -2%;
        font-size: 8px
    }
    .hero-floating-bottom {
        left: 0
    }
    .case-steps span {
        font-size: 9px
    }
    .impact-cards {
        grid-template-columns:1fr 1fr
    }
    .impact-card {
        padding: 17px 13px
    }
    .impact-card > .icon {
        margin-bottom: 15px
    }
    .direction-title {
        font-size: 11px
    }
    .speaker-fact {
        padding: 15px 12px
    }
    .speaker-fact h3 {
        font-size: 12px
    }
    .speaker-fact p {
        font-size: 9px
    }
    .speaker-fact .fact-no {
        font-size: 8px
    }
    .vote-option .vote-opt-text {
        font-size: 9px
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
    .has-js .reveal {
        opacity: 1 !important;
        transform: none !important
    }
}

/* v3.1: photo replacements, participant materials, form embedding and editorial typography */
.story-picture img {
    object-position: 55% 44%
}
.gallery-lab img {
    object-position: center 6%
}
.hero-kit-pill {
    background: #f4f0ff !important;
    border-color: #dacdff !important;
    color: #6547cc !important
}
.materials-kit {
    margin-top: 40px;
    display: grid;
    grid-template-columns:100px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 31px 34px;
    border-radius: 32px;
    border: 1px solid #d9ccff;
    background: radial-gradient(circle at 100% 0%, rgba(255, 170, 209, .34), transparent 33%), linear-gradient(108deg, #f0eaff 0%, #f9efff 51%, #eaf8ff 100%);
    box-shadow: 0 20px 54px rgba(99, 71, 191, .14);
    position: relative;
    overflow: hidden
}
.materials-kit:before {
    content: '✳';
    position: absolute;
    right: -15px;
    top: -79px;
    color: rgba(123, 84, 214, .07);
    font: 900 255px/1 Manrope, sans-serif;
    pointer-events: none
}
.materials-kit-symbol {
    width: 86px;
    height: 86px;
    border-radius: 25px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #7357e9, #b56bf1);
    color: #fff;
    box-shadow: 0 14px 31px rgba(106, 72, 204, .27)
}
.materials-kit-symbol .icon {
    width: 43px;
    height: 43px;
    stroke-width: 1.5
}
.materials-kit-copy {
    position: relative;
    z-index: 1
}
.materials-kit-kicker {
    font-size: 10px;
    letter-spacing: .12em;
    font-weight: 900;
    color: #7551c7;
    margin-bottom: 9px
}
.materials-kit h3 {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 900;
    letter-spacing: -.052em;
    line-height: 1.2;
    margin: 0 0 12px;
    max-width: 740px
}
.materials-kit h3 em {
    font-style: normal;
    color: #8054d8
}
.materials-kit p {
    font-size: 12px;
    line-height: 1.8;
    color: #62617a;
    max-width: 710px;
    margin: 0
}
.materials-kit-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e6dffc;
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(67, 53, 110, .08);
    color: #64519c;
    font-weight: 800;
    font-size: 10px;
    line-height: 1.5;
    white-space: nowrap
}
.materials-kit-badge .icon {
    color: #7e64e5
}
.speaker-header-description {
    max-width: 400px
}
.speaker-header-description > p {
    margin-bottom: 14px
}
.speaker-adult-chip {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    border-radius: 18px;
    background: #f0ecff;
    color: #6750bd;
    font-weight: 900;
    font-size: 10px;
    line-height: 1.5;
    border: 1px solid #e5dbfc
}
.speaker-adult-chip .icon {
    width: 17px;
    height: 17px
}
.contact-side-photo {
    position: relative;
    display: block;
    min-height: 385px;
    overflow: hidden
}
.contact-side-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 48%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 27%);
    mask-image: linear-gradient(to right, transparent 0%, #000 27%)
}
.contact-side-photo:after {
    content: '';
    position: absolute;
    inset: 50% 0 0;
    background: linear-gradient(0deg, rgba(32, 17, 89, .57), transparent);
    pointer-events: none
}
.contact-side-photo-label {
    position: absolute;
    right: 27px;
    bottom: 26px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    z-index: 1;
    text-shadow: 0 2px 12px rgba(13, 6, 37, .7);
    letter-spacing: .015em
}
.feedback-yandex {
    padding: 15px;
    background: #faf9ff;
    border: 1px solid #e7e5ee;
    border-radius: 28px;
    min-width: 0
}
.feedback-yandex[hidden], .feedback-form[hidden] {
    display: none !important
}
.feedback-yandex iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: 0;
    border-radius: 14px;
    background: #fff
}
.feedback-yandex-hint {
    font-size: 11px;
    color: #6a6780;
    line-height: 1.7;
    margin: 12px 12px 0
}
.feedback-yandex-hint a {
    color: #7457d1;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 800
}
.feedback-yandex-hint .icon {
    width: 13px;
    height: 13px;
    vertical-align: middle
}
body {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual
}
@media (max-width: 1160px) {
    .materials-kit {
        grid-template-columns:80px 1fr;
        gap: 18px
    }
    .materials-kit-symbol {
        width: 76px;
        height: 76px
    }
    .materials-kit-badge {
        grid-column: 2;
        width: max-content
    }
}
@media (max-width: 750px) {
    .materials-kit {
        grid-template-columns:1fr;
        gap: 16px;
        padding: 25px 21px;
        border-radius: 25px;
        margin-top: 24px
    }
    .materials-kit-symbol {
        width: 62px;
        height: 62px;
        border-radius: 18px
    }
    .materials-kit-symbol .icon {
        width: 31px;
        height: 31px
    }
    .materials-kit h3 {
        font-size: clamp(23px, 6.1vw, 30px)
    }
    .materials-kit p {
        font-size: 11px
    }
    .materials-kit-kicker {
        font-size: 9px
    }
    .materials-kit-badge {
        grid-column: 1
    }
    .speaker-header-description {
        max-width: 100%
    }
    .speaker-adult-chip {
        font-size: 9px
    }
    .contact-side.contact-side-photo {
        display: block;
        min-height: 235px;
        height: 235px
    }
    .contact-side-photo img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 16%);
        object-position: center 43%
    }
    .contact-main {
        padding-bottom: 10px
    }
    .contact-side-photo-label {
        bottom: 20px;
        font-size: 10px
    }
    .feedback-yandex {
        padding: 7px;
        border-radius: 18px
    }
    .feedback-yandex iframe {
        height: 650px;
        border-radius: 13px
    }
}

/* Header summary retained after wrapping it with an adult-learning badge. */
.speaker-header-description > p {
    font-size: 13px;
    line-height: 1.85;
    color: #6d6b86;
    max-width: 340px;
    margin: 0 0 14px
}
@media (max-width: 750px) {
    .speaker-header-description > p {
        font-size: 12px;
        max-width: 100%
    }
}

/* v3.2: Restore laboratory photo on tablets/phones and prevent mobile heading overflow. */
@media (min-width: 751px) and (max-width: 980px) {
    .speaker-gallery-photo.gallery-lab {
        display: block;
        grid-column: 2;
        grid-row: 1;
    }
    .speaker-gallery-caption {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 122px;
    }
}
@media (max-width: 750px) {
    .speaker-gallery-photo.gallery-lab {
        display: block;
        grid-column: auto;
        grid-row: auto;
        height: 285px;
    }
    .speaker-gallery-photo.gallery-lab img {
        object-position: center 9%;
    }
    .format-grid, .format-grid > div, .format-tiles {
        min-width: 0;
    }
    .format-grid .section-title {
        font-size: clamp(26px, 7.7vw, 38px);
        line-height: 1.18;
        letter-spacing: -.05em;
    }
}
@media (max-width: 360px) {
    .format-tiles {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 751px) and (max-width: 850px) {
    .format-grid .section-title {
        font-size: clamp(29px, 3.8vw, 34px);
    }
}
@media (max-width: 360px) {
    .format-tiles > div:first-child {
        grid-column: auto;
    }
}