:root{--ink:#172522;--muted:#66736f;--cream:#f6f3ec;--paper:#fff;--green:#0d6655;--green-dark:#094a3e;--mint:#dfeee8;--gold:#e0a931;--line:#e5e8e4;--shadow:0 20px 60px rgba(24,43,37,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:var(--paper)}button,a{font:inherit}button{cursor:pointer}.site-header{height:82px;display:flex;align-items:center;padding:0 max(5vw,32px);border-bottom:1px solid var(--line);position:relative;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 22px Manrope,sans-serif;letter-spacing:-.8px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--green);color:white;font-size:18px}.main-nav{display:flex;gap:34px;margin:auto}.main-nav a{color:#68716e;text-decoration:none;font-weight:600;font-size:14px;padding:30px 0;position:relative}.main-nav a.active{color:var(--ink)}.main-nav a.active:after{content:"";height:2px;background:var(--green);position:absolute;left:0;right:0;bottom:0}.header-actions{display:flex;align-items:center;gap:12px}.icon-button,.profile-button,.round-sound{border:0;display:grid;place-items:center}.icon-button{background:transparent;width:40px;height:40px}.icon-button svg,.round-sound svg,.listen-button svg{width:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-button{width:39px;height:39px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:12px}.hero{min-height:670px;background:var(--cream);display:grid;grid-template-columns:1.03fr .97fr;align-items:center;padding:70px max(7vw,50px);overflow:hidden}.hero-copy{max-width:610px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--green);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}.pulse{width:8px;height:8px;background:var(--gold);border-radius:50%;box-shadow:0 0 0 5px rgba(224,169,49,.15)}h1,h2{font-family:Manrope,sans-serif;letter-spacing:-.05em;margin:0}.hero h1{font-size:clamp(54px,6vw,86px);line-height:.98;margin:25px 0 26px}.hero-copy>p{font-size:18px;line-height:1.7;color:var(--muted);max-width:550px;margin:0}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:35px}.primary-button,.light-button{border:0;border-radius:12px;padding:16px 22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:30px;transition:.2s}.primary-button{background:var(--green);color:white;box-shadow:0 8px 20px rgba(13,102,85,.18)}.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}.text-button{border:0;background:none;color:var(--ink);font-weight:700;display:flex;gap:12px}.micro-stats{display:flex;gap:0;margin-top:58px}.micro-stats div{display:flex;flex-direction:column;padding:0 34px;border-right:1px solid #d9dbd5}.micro-stats div:first-child{padding-left:0}.micro-stats div:last-child{border:0}.micro-stats strong{font:700 20px Manrope}.micro-stats span{font-size:12px;color:var(--muted);margin-top:4px}.hero-card-wrap{position:relative;display:grid;place-items:center;min-height:500px}.word-card{position:relative;z-index:2;width:min(420px,85%);background:white;border-radius:22px;padding:30px 34px 34px;box-shadow:var(--shadow);transform:rotate(1.5deg)}.word-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.round-sound{width:42px;height:42px;border-radius:50%;background:var(--mint);color:var(--green)}.kazakh-word{font:800 clamp(48px,5vw,72px) Manrope;margin-top:44px;letter-spacing:-.05em}.pronunciation{color:var(--green);font-weight:700;letter-spacing:.14em;font-size:13px;margin:3px 0 28px}.translation{font:700 25px Manrope;border-top:1px solid var(--line);padding-top:24px}.example{margin-top:25px;padding:18px 20px 18px 30px;background:#f7f8f5;border-radius:10px;line-height:1.55;position:relative}.example>span{position:absolute;left:16px;top:22px;width:4px;height:4px;background:var(--gold);border-radius:50%}.example small{color:var(--muted)}.ornament{position:absolute;border:2px solid rgba(13,102,85,.13);transform:rotate(45deg)}.ornament:before,.ornament:after{content:"";position:absolute;border:inherit}.ornament-one{width:270px;height:270px;right:-100px;top:30px}.ornament-one:before{inset:28px}.ornament-one:after{inset:60px}.ornament-two{width:130px;height:130px;left:10px;bottom:20px}.ornament-two:before{inset:20px}.ornament-two:after{inset:40px}.course-section{padding:105px max(7vw,50px) 120px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.section-kicker{font-weight:800;color:var(--green);font-size:11px;letter-spacing:.16em}.section-heading h2,.practice-copy h2{font-size:clamp(38px,4vw,55px);margin-top:12px}.course-progress{width:260px}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px}.progress-label strong{color:var(--green)}.progress-track{height:6px;border-radius:10px;background:#e8ece9;overflow:hidden}.progress-track span,.modal-progress span{height:100%;display:block;background:var(--green);border-radius:inherit;transition:.4s}.filter-row{display:flex;gap:9px;margin:45px 0 28px}.filter{border:1px solid var(--line);background:white;border-radius:100px;padding:9px 17px;color:var(--muted);font-weight:600;font-size:13px}.filter.active{color:white;background:var(--ink);border-color:var(--ink)}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lesson-card{border:1px solid var(--line);border-radius:16px;padding:25px;background:white;min-height:235px;display:flex;flex-direction:column;transition:.25s;position:relative;overflow:hidden}.lesson-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(20,45,38,.09);border-color:#cfdad5}.lesson-card.completed{background:#f5faf7}.lesson-number{font:700 12px Manrope;color:var(--green);letter-spacing:.1em}.lesson-icon{width:48px;height:48px;border-radius:13px;background:var(--cream);display:grid;place-items:center;font-size:23px;margin:16px 0}.lesson-card h3{font:700 18px Manrope;margin:0 0 5px}.lesson-card p{color:var(--muted);font-size:13px;margin:0}.lesson-meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12px;color:var(--muted)}.lesson-start{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:white;color:var(--green);font-size:17px}.lesson-card.locked{opacity:.58}.lesson-card.locked .lesson-start{color:var(--muted)}.completed-badge{color:var(--green);font-weight:700}.practice-section{background:var(--green);color:#fff;padding:80px max(9vw,70px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.section-kicker.light{color:#a9d8ca}.practice-copy h2{margin:12px 0 18px}.practice-copy p{color:#c1d9d3;line-height:1.65;max-width:460px}.light-button{background:white;color:var(--green);margin-top:16px}.streak-card{background:#fff;color:var(--ink);border-radius:18px;padding:28px 30px;box-shadow:0 20px 60px rgba(0,0,0,.15)}.streak-head{display:flex;justify-content:space-between;font-size:13px}.streak-head>span{color:var(--muted)}.streak-head strong span{color:var(--green)}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:25px 0}.day{text-align:center;color:var(--muted);font-size:11px}.day-circle{margin:8px auto 0;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--ink)}.day.done .day-circle{background:var(--green);color:white;border-color:var(--green)}.day.today .day-circle{border:2px solid var(--gold)}.streak-footer{border-top:1px solid var(--line);padding-top:20px;display:flex;gap:12px;align-items:center}.streak-footer>span{font-size:25px}.streak-footer div{display:flex;flex-direction:column}.streak-footer small{color:var(--muted);margin-top:2px}footer{display:flex;align-items:center;gap:30px;padding:32px max(5vw,32px);color:var(--muted);font-size:13px}footer p{margin-right:auto}.footer-brand{font-size:18px}.footer-brand .brand-mark{width:29px;height:29px;font-size:14px}.modal-backdrop{position:fixed;inset:0;background:rgba(12,26,22,.6);z-index:20;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(5px)}.modal-backdrop.open{display:flex}.lesson-modal{width:min(560px,100%);background:white;border-radius:22px;padding:38px;position:relative;animation:pop .25s ease}.modal-close{position:absolute;right:20px;top:14px;border:0;background:none;font-size:27px;color:var(--muted)}.modal-progress{height:5px;background:var(--line);border-radius:10px;margin:4px 40px 34px 0}.modal-progress span{width:33%}.modal-kicker{font-size:11px;letter-spacing:.12em;color:var(--green);font-weight:800}.lesson-modal h2{font-size:30px;letter-spacing:-.03em;margin:12px 0 18px}.listen-button{border:1px solid var(--line);background:white;border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:8px;color:var(--green);font-weight:700}.listen-button svg{width:18px}.answer-options{display:grid;gap:10px;margin:28px 0 16px}.answer{padding:15px 17px;border:1px solid var(--line);border-radius:11px;background:white;text-align:left;font-weight:600;color:var(--ink)}.answer:hover{border-color:#91b7aa}.answer.selected{border:2px solid var(--green);background:#f1f8f5}.answer.correct{border-color:#3b9b62;background:#eaf8ef}.answer.wrong{border-color:#d95e5e;background:#fff0f0}.feedback{min-height:24px;font-size:13px;font-weight:600}.feedback.good{color:#27814b}.feedback.bad{color:#bd4444}.modal-next{width:100%;margin-top:8px}.modal-next:disabled{opacity:.4;cursor:not-allowed;transform:none}@keyframes pop{from{opacity:0;transform:translateY(15px) scale(.98)}}
.history-section{padding:110px max(7vw,50px);background:#f6f3ec}.history-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:55px}.history-intro h2,.library-heading h2{font-size:clamp(38px,4vw,55px);margin-top:12px}.history-intro p,.library-heading p{color:var(--muted);line-height:1.7;margin:0;max-width:540px}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#dcded8;border:1px solid #dcded8;border-radius:18px;overflow:hidden}.history-card{background:#fff;padding:30px;min-height:280px}.history-card.featured{background:var(--green);color:white}.history-year{font:800 12px Manrope;color:var(--green);letter-spacing:.1em}.featured .history-year{color:#b4e0d4}.history-card h3{font:700 20px Manrope;margin:40px 0 14px}.history-card p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}.featured p{color:#c6ddd7}.library-section{padding:105px max(7vw,50px) 115px;background:#162723;color:white}.library-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:44px}.library-heading p{color:#b8c7c3}.video-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px}.video-card{text-decoration:none;color:inherit;background:#213630;border-radius:16px;overflow:hidden;transition:.25s}.video-card:hover{transform:translateY(-4px);background:#28433b}.video-thumb{height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background-color:#d9af52;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 22%),linear-gradient(135deg,#0d6655,#d9af52)}.thumb-two{background-image:radial-gradient(circle at 80% 30%,rgba(255,255,255,.2),transparent 25%),linear-gradient(140deg,#55766e,#122f29)}.thumb-three{background-image:linear-gradient(135deg,#e5c57b,#996d2d)}.video-thumb:before{content:'Қ Ә Ң';font:800 46px Manrope;color:rgba(255,255,255,.22);letter-spacing:.08em;position:absolute;transform:rotate(-8deg)}.play{width:54px;height:54px;border-radius:50%;background:white;color:var(--green);display:grid;place-items:center;padding-left:3px;position:relative;z-index:2;box-shadow:0 8px 30px rgba(0,0,0,.2)}.duration{position:absolute;right:12px;bottom:10px;background:rgba(0,0,0,.65);padding:4px 7px;border-radius:5px;font-size:10px}.video-info{padding:22px}.video-info>span{font-size:10px;color:#9fcfc1;letter-spacing:.13em;font-weight:800}.video-info h3{font:700 19px Manrope;margin:9px 0 8px}.video-info p{font-size:13px;color:#aec0bb;line-height:1.55;margin:0}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:80px}.hero-card-wrap{min-height:470px;margin-top:30px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.practice-section{grid-template-columns:1fr;gap:45px}.main-nav{display:none}.timeline{grid-template-columns:repeat(2,1fr)}.video-grid{grid-template-columns:1fr 1fr}.video-card.large{grid-column:1/-1}.history-intro{grid-template-columns:1fr}.library-heading{align-items:flex-start;flex-direction:column}}@media(max-width:600px){.site-header{height:68px;padding:0 20px}.hero,.course-section,.practice-section,.history-section,.library-section{padding-left:22px;padding-right:22px}.hero{padding-top:60px}.hero h1{font-size:49px}.hero-actions{align-items:flex-start;flex-direction:column}.micro-stats{gap:0}.micro-stats div{padding:0 16px}.word-card{width:95%;padding:25px}.section-heading{align-items:flex-start;flex-direction:column}.course-progress{width:100%}.lesson-grid,.timeline,.video-grid{grid-template-columns:1fr}.video-card.large{grid-column:auto}.filter-row{overflow:auto;padding-bottom:4px}.practice-section{padding-top:60px;padding-bottom:60px}.week{gap:3px}.day-circle{width:32px;height:32px}footer{align-items:flex-start;flex-direction:column;gap:10px}.lesson-modal{padding:30px 22px}.header-actions .icon-button{display:none}.history-card{min-height:auto}.history-card h3{margin-top:22px}}

/* Reliable mobile navigation fallback, including direct file previews. */
@media (max-width:600px) {
  body{padding-top:68px;padding-bottom:72px}
  .site-header{position:fixed;top:0;right:0;left:0;z-index:50;display:flex;width:100%;height:68px;padding:0 14px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header .brand{position:relative;z-index:3;display:flex!important;flex:0 0 36px;width:36px;min-width:36px}
  .site-header .brand>span{display:none}
  .site-header .brand-mark{display:block!important;width:36px;height:36px;border-radius:10px}
  .site-header .header-actions{display:flex!important;margin-left:auto;gap:4px}
  .site-header .language-picker{position:absolute;top:50%;left:50%;z-index:4;display:flex!important;transform:translate(-50%,-50%)}
  .site-header .language-picker button{min-width:44px;height:34px;padding:0 11px}
  .site-header .header-actions>:not(.language-picker){display:none!important}
  .site-header .main-nav{position:fixed!important;top:auto!important;right:0!important;bottom:0!important;left:0!important;z-index:50;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;width:100%;height:64px;margin:0;padding:0 6px;border-top:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 -8px 26px rgba(20,42,35,.09)}
  .site-header .main-nav a{display:flex;align-items:center;justify-content:center;padding:8px 3px;color:var(--muted);font-size:11px;text-align:center}
  .site-header .main-nav a.active{margin:7px 2px;padding:0 3px;border-radius:12px;background:#f0f7f4;color:var(--green)}
  .site-header .main-nav a.active:after{display:none}
}