:root {
  --navy: #132d54;
  --navy-deep: #091c39;
  --blue: #4278ad;
  --blue-bright: #2e80d3;
  --powder: #dce8f4;
  --ice: #f2f7fb;
  --white: #fff;
  --ink: #132238;
  --muted: #607188;
  --line: rgba(19, 45, 84, .14);
  --shadow: 0 28px 80px rgba(19, 45, 84, .13);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--white); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
.topbar { position: sticky; z-index: 30; top: 0; padding: 10px 22px; border-bottom: 1px solid rgba(19,45,84,.08); background: rgba(255,255,255,.88); backdrop-filter: blur(20px) saturate(160%); }
.nav-shell { max-width: 1220px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 46px; height: 40px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; line-height: 1.1; }
.brand b { font-size: .88rem; letter-spacing: -.02em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; }
.nav-links { display: flex; gap: 28px; color: var(--muted); font-size: .78rem; }
.nav-links a, .footer-links a { text-decoration: none; transition: color .2s; }
.nav-links a:hover, .footer-links a:hover { color: var(--blue-bright); }
.nav-cta, .button { border: 0; border-radius: 999px; color: var(--white); background: var(--blue-bright); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.nav-cta { padding: 9px 16px; font-size: .76rem; }
.nav-cta:hover, .button:hover { transform: translateY(-2px); background: var(--navy); box-shadow: 0 14px 32px rgba(46,128,211,.24); }
.hero { position: relative; min-height: 820px; padding: 95px max(24px, calc((100vw - 1220px) / 2)) 80px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; overflow: hidden; background: radial-gradient(circle at 82% 30%, rgba(98,157,216,.24), transparent 28%), linear-gradient(150deg,#fff 0%,#f5f9fd 58%,#dce8f4 100%); }
.hero::before { content: ""; position: absolute; width: 420px; height: 100%; right: -110px; top: 0; background: var(--navy); opacity: .045; transform: skewX(-12deg); }
.hero-copy, .hero-art { position: relative; z-index: 2; }
.overline { margin: 0 0 18px; color: var(--blue-bright); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.overline-light { color: #9dc9f6; }
h1, h2, h3, h4, p { text-wrap: pretty; }
h1 { margin: 0; max-width: 760px; color: var(--navy-deep); font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.1rem, 7vw, 7.4rem); line-height: .9; letter-spacing: -.07em; }
h1 span, h2 span { color: var(--blue); }
h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 6vw, 6.2rem); line-height: .96; letter-spacing: -.065em; }
h3 { margin: 0; font-size: clamp(1.55rem, 2.7vw, 2.7rem); line-height: 1.05; letter-spacing: -.045em; }
.hero-lead { max-width: 650px; margin: 28px 0; color: var(--muted); font-size: clamp(1.04rem, 1.55vw, 1.28rem); }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { min-height: 52px; padding: 14px 25px; display: inline-flex; align-items: center; justify-content: center; }
.text-link { color: var(--blue-bright); font-weight: 700; text-decoration: none; }
.text-link span { display: inline-block; margin-left: 3px; transition: transform .2s; }
.text-link:hover span { transform: translateY(3px); }
.hero-pills { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 9px; }
.hero-pills span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.72); font-size: .73rem; font-weight: 650; }
.hero-art { min-height: 610px; }
.hero-seal { position: absolute; z-index: 3; width: 300px; height: 330px; top: 125px; left: 50%; padding: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 40% 40% 24px 24px; background: rgba(255,255,255,.8); box-shadow: var(--shadow); transform: translateX(-50%); backdrop-filter: blur(20px); }
.hero-seal img { width: 235px; }
.route-card { position: absolute; z-index: 4; padding: 14px 17px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.85); border-radius: 16px; background: rgba(255,255,255,.86); box-shadow: 0 18px 42px rgba(19,45,84,.13); font-size: .7rem; color: var(--muted); }
.route-card b { color: var(--navy); font-size: .82rem; }
.route-kz { top: 74px; left: 5px; }
.route-live { top: 285px; right: -15px; }
.route-ossd { bottom: 68px; left: 20px; }
.route-orbit { position: absolute; border: 1px solid rgba(46,128,211,.19); border-radius: 50%; }
.route-orbit-one { width: 550px; height: 550px; top: 30px; left: 50%; transform: translateX(-50%); }
.route-orbit-two { width: 420px; height: 420px; top: 95px; left: 50%; border-style: dashed; transform: translateX(-50%); animation: spin 32s linear infinite; }
.trust-strip { max-width: 1220px; margin: -46px auto 0; position: relative; z-index: 5; padding: 0 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.trust-item { min-height: 235px; padding: 27px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.95); box-shadow: 0 20px 55px rgba(19,45,84,.1); }
.trust-item strong { color: var(--blue-bright); font-family: Georgia, serif; font-size: 1.65rem; }
.trust-item h2 { margin-top: 34px; font-family: inherit; font-size: 1.12rem; letter-spacing: -.025em; }
.trust-item p { margin: 9px 0 0; color: var(--muted); font-size: .83rem; }
.section { max-width: 1220px; margin: auto; padding: 140px 24px; }
.editorial-intro { text-align: center; }
.editorial-intro h2, .editorial-intro > p:last-child { max-width: 980px; margin-left: auto; margin-right: auto; }
.editorial-intro > p:last-child { margin-top: 28px; color: var(--muted); font-size: 1.12rem; }
.feature-grid { padding-top: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.feature-card { min-height: 330px; padding: 34px; border-radius: 26px; background: var(--ice); }
.feature-card:nth-child(2), .feature-card:nth-child(3) { background: var(--powder); }
.feature-card span, .admission-card span, .event-card span { color: var(--blue-bright); font-size: .74rem; font-weight: 800; letter-spacing: .12em; }
.feature-card h3 { margin-top: 100px; }
.feature-card p { max-width: 520px; margin: 15px 0 0; color: var(--muted); }
.subjects { color: var(--white); background: var(--navy-deep); }
.subjects-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; }
.subjects-heading { align-self: start; position: sticky; top: 120px; }
.subjects-heading h2 { color: var(--white); font-size: clamp(3rem,5vw,5rem); }
.subjects-heading > p:last-child { margin-top: 24px; max-width: 520px; color: #aebdd0; }
.subject-list { border-top: 1px solid rgba(255,255,255,.16); }
.subject-row { padding: 32px 0; display: grid; grid-template-columns: 55px 1fr 1fr; gap: 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.16); }
.subject-row b { color: #91c7ff; font-family: Georgia,serif; font-size: 1.4rem; }
.subject-row h3 { font-size: 1.55rem; }
.subject-row p { margin: 0; color: #aebdd0; font-size: .86rem; }
.section-heading { max-width: 990px; margin-bottom: 65px; }
.pathway-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 85px; }
.pathway-grid { display: grid; gap: 18px; }
.pathway-card { min-height: 410px; padding: 40px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(150deg,#fff,#f1f7fc); box-shadow: 0 18px 55px rgba(19,45,84,.07); }
.pathway-card:nth-child(2) { color: var(--white); background: linear-gradient(145deg,var(--blue),var(--navy)); }
.pathway-label { margin: 0 0 70px; color: var(--blue-bright); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.pathway-card:nth-child(2) .pathway-label { color: #bce0ff; }
.pathway-card > p:not(.pathway-label) { color: var(--muted); }
.pathway-card:nth-child(2) > p:not(.pathway-label) { color: #c7d6e8; }
.pathway-note { margin-top: 25px; padding: 14px 16px; border-radius: 14px; background: rgba(66,120,173,.09); color: var(--muted); font-size: .78rem; }
.pathway-card:nth-child(2) .pathway-note { color: #d6e6f7; background: rgba(255,255,255,.09); }
.admission-section { color: var(--white); background: var(--blue); }
.admission-section .section-heading h2 span { color: #bcdfff; }
.admission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.admission-card { min-height: 360px; padding: 30px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(255,255,255,.08); }
.admission-card span { color: #cce7ff; }
.admission-card h3 { margin-top: 115px; font-size: 1.7rem; }
.admission-card p { color: #d9e8f7; font-size: .9rem; }
.section-note { max-width: 780px; margin: 30px 0 0; color: #d9e8f7; font-size: .8rem; }
.story-section .section-heading { max-width: 1100px; margin-bottom: 48px; }
.story-intro { max-width: 720px; color: var(--muted); font-size: 1rem; }
.featured-story-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: end; }
.featured-story-card { overflow: hidden; border-radius: 30px; background: var(--ice); box-shadow: 0 20px 55px rgba(19,45,84,.08); }
.featured-story-card:nth-child(2) { background: var(--powder); }
.featured-story-photo { height: 410px; overflow: hidden; background: var(--blue); }
.featured-story-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.featured-story-nurlan-o .featured-story-photo { height: 300px; }
.featured-story-nurlan-o .featured-story-photo img { object-fit: contain; }
.featured-story-copy { padding: 34px 38px 38px; }
.story-eyebrow { margin: 0 0 14px; color: var(--blue-bright); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.featured-story-copy h3, .story-dialog-copy h3 { font-family: Georgia,serif; font-size: 3.2rem; color: var(--navy); }
.featured-story-copy h4 { max-width: 620px; margin: 15px 0 24px; font-size: 1.1rem; line-height: 1.38; }
.story-open-link { color: var(--blue-bright); font-size: .84rem; font-weight: 800; text-decoration: none; }
.student-gallery { margin-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.student-gallery .gallery-card:last-child:nth-child(3n+1) { grid-column: 2; }
.gallery-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; color: var(--navy); background: #fff; box-shadow: 0 15px 42px rgba(19,45,84,.06); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.gallery-card:hover, .gallery-card:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(19,45,84,.13); }
.gallery-photo { display: block; aspect-ratio: 2.6 / 1; overflow: hidden; background: var(--blue); }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; }
.gallery-copy { min-height: 250px; padding: 24px; display: flex; flex-direction: column; }
.gallery-copy small { color: var(--blue-bright); font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.gallery-copy strong { margin-top: 22px; font-family: Georgia,serif; font-size: 2.15rem; letter-spacing: -.04em; }
.gallery-copy span { margin-top: 10px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.gallery-copy b { margin-top: auto; padding-top: 22px; color: var(--blue-bright); font-size: .75rem; }
.results-note { margin: 24px 0 0; color: var(--muted); font-size: .78rem; }
.dialog-open { overflow: hidden; }
.story-dialog { width: min(1000px,calc(100% - 36px)); max-height: min(780px,calc(100% - 36px)); padding: 0; overflow: hidden; border: 0; border-radius: 30px; background: #fff; box-shadow: 0 35px 100px rgba(4,20,45,.35); }
.story-dialog::backdrop { background: rgba(7,25,50,.72); backdrop-filter: blur(8px); }
.story-dialog-shell { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; max-height: inherit; overflow: auto; }
.story-dialog-close { position: absolute; z-index: 2; top: 16px; right: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(19,45,84,.15); cursor: pointer; font-size: 1.65rem; line-height: 1; }
.story-dialog-photo { min-height: 580px; background: var(--blue); }
.story-dialog-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-dialog-copy { padding: 58px 46px; }
.story-dialog-copy h4 { margin: 17px 0 20px; font-size: 1.12rem; line-height: 1.4; }
.story-dialog-copy ul { margin: 0 0 25px; padding-left: 20px; color: var(--muted); }
.story-dialog-copy li { margin: 10px 0; }
.dialog-disclaimer { margin-bottom: 25px; color: var(--muted); font-size: .72rem; }
.events { color: var(--white); background: var(--navy-deep); }
.events-heading { max-width: 850px; }
.events-heading h2 { color: var(--white); }
.event-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.event-card { min-height: 330px; padding: 30px; border: 1px solid rgba(255,255,255,.15); border-radius: 23px; background: rgba(255,255,255,.06); }
.event-card h3 { margin-top: 110px; font-size: 1.6rem; }
.event-card p { color: #aebdd0; font-size: .86rem; }
.faq-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 85px; }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-heading h2 { font-size: clamp(3rem,5vw,5rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 25px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { color: var(--blue-bright); font-size: 1.5rem; font-weight: 400; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 690px; margin: -7px 0 25px; color: var(--muted); }
.consultation { padding: 120px 24px; background: linear-gradient(145deg,#edf5fc,#dbe9f6); }
.consultation-inner { max-width: 1220px; margin: auto; display: grid; grid-template-columns: 1fr 430px; gap: 80px; align-items: center; }
.consultation-copy h2 { font-size: clamp(3.3rem,5.5vw,5.7rem); }
.consultation-copy > p:last-child { max-width: 650px; color: var(--muted); font-size: 1.05rem; }
.consultation-panel { min-height: 310px; padding: 35px; border: 1px solid rgba(255,255,255,.8); border-radius: 27px; background: rgba(255,255,255,.82); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.setup-notice span { color: var(--blue-bright); font-size: .76rem; font-weight: 800; }
.setup-notice h3 { margin-top: 40px; font-size: 2rem; }
.setup-notice p, .microcopy { color: var(--muted); font-size: .8rem; }
.consent { margin-bottom: 20px; display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: .8rem; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-bright); }
.button-full { width: 100%; }
.alert { padding: 12px 14px; border-radius: 12px; color: #725100; background: #fff1c7; font-size: .8rem; }
footer { max-width: 1220px; margin: auto; padding: 35px 24px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 58px; height: 50px; object-fit: contain; }
.footer-brand p { margin: 0; display: flex; flex-direction: column; font-size: .78rem; }
.footer-brand small { color: var(--muted); }
.footer-links { display: flex; gap: 22px; color: var(--muted); font-size: .76rem; }
.document-page { padding: 30px 20px; background: var(--ice); }
.document { max-width: 900px; margin: auto; padding: 70px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.document > a { color: var(--blue-bright); text-decoration: none; font-size: .84rem; }
.guide-brand { margin-top: 50px; display: flex; align-items: center; gap: 15px; color: var(--blue); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.guide-brand img { width: 72px; }
.document h1 { margin: 40px 0 28px; font-size: clamp(3.2rem,7vw,5.8rem); }
.document h2 { margin: 50px 0 13px; font-family: Georgia,serif; font-size: 2rem; letter-spacing: -.04em; }
.document h3 { margin-top: 25px; font-size: 1.2rem; }
.document p, .document li { color: var(--muted); }
.document .lead { font-size: 1.16rem; }
.guide-disclaimer { padding: 18px; border-radius: 14px; background: var(--ice); font-size: .82rem; }
.guide-callout { margin-top: 45px; padding: 25px; border-radius: 18px; color: var(--white); background: var(--navy); }
.guide-story-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.guide-story-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; color: var(--navy); background: var(--ice); text-decoration: none; }
.guide-story-card img { width: 100%; height: 125px; object-fit: cover; }
.guide-story-card span { padding: 12px; display: flex; flex-direction: column; }
.guide-story-card strong { font-family: Georgia,serif; font-size: 1.3rem; }
.guide-story-card small { margin-top: 4px; color: var(--blue-bright); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.guide-story-card b { margin-top: 10px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.guide-story-card em { margin-top: 12px; color: var(--blue-bright); font-size: .62rem; font-style: normal; font-weight: 800; }
.reveal { opacity: 1; transform: none; }
.reveal-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .reveal { opacity:1!important; transform:none!important; } }
@media (max-width:1000px) {
  .hero { min-height:auto; grid-template-columns:1fr; }
  .hero-art { max-width:620px; width:100%; margin:auto; }
  .subjects-inner, .pathway-section, .faq-section, .consultation-inner { grid-template-columns:1fr; }
  .subjects-heading, .faq-heading { position:static; }
  .featured-story-grid { grid-template-columns:1fr 1fr; }
  .student-gallery { grid-template-columns:repeat(2,1fr); }
  .student-gallery .gallery-card:last-child:nth-child(3n+1) { grid-column:auto; }
  .story-dialog-shell { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .topbar { padding:9px 13px; }
  .nav-links, .brand small { display:none; }
  .brand img { width:38px; height:34px; }
  .brand b { font-size:.78rem; }
  .nav-cta { padding:8px 11px; font-size:.68rem; }
  .hero { padding:70px 18px 45px; gap:15px; }
  h1 { font-size:clamp(3.45rem,16vw,5.1rem); }
  h2 { font-size:clamp(3rem,13vw,4.4rem); }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-art { min-height:500px; transform:scale(.82); transform-origin:top center; margin-bottom:-85px; }
  .trust-strip { margin:0; padding:18px; grid-template-columns:1fr; }
  .trust-item { min-height:auto; }
  .trust-item h2 { margin-top:20px; }
  .section { padding:90px 18px; }
  .feature-grid, .admission-grid, .event-grid { grid-template-columns:1fr; }
  .feature-card, .admission-card, .event-card { min-height:260px; }
  .feature-card h3, .admission-card h3, .event-card h3 { margin-top:65px; }
  .subjects-inner { gap:55px; }
  .subject-row { grid-template-columns:42px 1fr; }
  .subject-row p { grid-column:2; }
  .pathway-section { gap:10px; }
  .pathway-card { min-height:360px; padding:28px; }
  .featured-story-grid, .student-gallery, .story-dialog-shell, .guide-story-grid { grid-template-columns:1fr; }
  .student-gallery .gallery-card:last-child:nth-child(3n+1) { grid-column:auto; }
  .featured-story-photo, .featured-story-nurlan-o .featured-story-photo { height:300px; }
  .featured-story-copy { padding:28px; }
  .featured-story-copy h3, .story-dialog-copy h3 { font-size:2.7rem; }
  .gallery-copy { min-height:220px; }
  .story-dialog { width:calc(100% - 20px); max-height:calc(100% - 20px); border-radius:22px; }
  .story-dialog-photo { min-height:230px; max-height:260px; }
  .story-dialog-copy { padding:30px 24px; }
  .consultation { padding:85px 18px; }
  .consultation-copy h2 { font-size:2.65rem; }
  footer { padding:30px 18px; display:block; }
  .footer-links { margin-top:22px; }
  .document-page { padding:0; }
  .document { padding:40px 20px; border-radius:0; }
}
@media (max-width:430px) {
  .hero-art { display:none; }
  .hero-pills { margin-top:35px; }
  .gallery-copy strong { font-size:1.9rem; }
}
