/* Original: theme.css */
/* Shared theme. Existing stylesheet colors use these tokens with unchanged light fallbacks. */
:root { color-scheme: light; }
.darja-theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; flex-shrink:0; min-height:44px; padding:9px 13px; margin:0; border:1px solid #cf91ae; border-radius:999px; background:#fbf0f6; color:#69475a; font:500 14px/1.4 "Poppins",sans-serif; white-space:nowrap; cursor:pointer; box-shadow:none; }
.darja-theme-toggle svg { width:18px; height:18px; margin:0; }
.darja-theme-toggle:hover { background:#f8dce8; transform:none; opacity:1; }
.darja-theme-toggle:focus-visible { outline:3px solid #b65f85; outline-offset:3px; }
/* Reserve a real header column for the switch rather than overlaying navigation. */
body > :is(.navbar,.site-header):has(.darja-theme-toggle) { display:grid!important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; }
body > :is(.navbar,.site-header) > .darja-theme-toggle { grid-column:3; grid-row:1; }
body > :is(.navbar,.site-header) > .language-switcher:not(:has(*)) { display:none; }
body > :is(.navbar,.site-header) > [data-lesson-menu-nav] { position:static!important; transform:none!important; left:auto!important; right:auto!important; width:auto!important; margin:0 auto!important; grid-column:2; justify-content:center!important; gap:20px; }
@media (max-width:1100px) { body > :is(.navbar,.site-header) > [data-lesson-menu-nav] { gap:12px; } body > :is(.navbar,.site-header) > [data-lesson-menu-nav] a { font-size:16px; } }
@media (max-width:900px) {
 body > :is(.navbar,.site-header):has(.darja-theme-toggle) { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:8px 18px; }
 body > :is(.navbar,.site-header) > [data-lesson-menu-nav] { grid-column:1 / -1; grid-row:2; margin:0!important; width:100%!important; display:flex!important; flex-wrap:wrap!important; justify-content:flex-start!important; gap:6px 14px!important; }
 body > :is(.navbar,.site-header) > .darja-theme-toggle { grid-column:2; grid-row:1; }
 body > :is(.navbar,.site-header) > [data-lesson-menu-nav] a { font-size:14px; }
}
@media screen {
 html[data-theme="dark"] {
  color-scheme:dark;
  --page:#17151d; --cream:#17151d; --cream2:#24202d; --paper:#24212b; --surface:#24212b; --white:#24212b;
  --ink:#f2ebf4; --ink-soft:#c6bbce; --body:#e4dce8; --muted:#beb2c7; --arabic:#d3c3df;
  --line:#4a3d50; --border:#4a3d50; --lavender:#292332;
  --rose:#743f5b; --rose-hover:#854c69; --rose-soft:#392534; --rose-deep:#efaccb;
  --pink:#743f5b; --pink-dark:#efaccb; --pink-soft:#392534;
  --sage-bg:#22352e; --sage:#365e51; --sage-d:#a8d6c5; --mint:#22352e;
  --peach-bg:#3c2b30; --peach:#5e3f48; --peach-d:#edb4c4;
  --sky-bg:#252c40; --sky:#3d4b68; --sky-d:#bbc9ec;
  --sand-bg:#37302b; --sand:#5c4b34; --sand-d:#e4c999;
  --teal-soft:#22352e; --teal:#93d4c5; --teal-dark:#a8d6c5; --gold:#e4c999;
  --shadow:0 14px 36px #0005; --shadow-sm:0 8px 22px #0004;
  --darja-bg-1:#413725;
  --darja-line-2:#405364;
  --darja-bg-3:#31231c;
  --darja-bg-4:#1c2a31;
  --darja-bg-5:#232f1e;
  --darja-bg-6:rgba(49,43,28,0.920);
  --darja-line-7:#645540;
  --darja-bg-8:#27222b;
  --darja-shadow-9:#000000;
  --darja-fg-10:#fff;
  --darja-shadow-11:rgba(0,0,0,0.120);
  --darja-bg-12:#3d514b;
  --darja-bg-13:#1e2926;
  --darja-bg-14:#412a25;
  --darja-shadow-15:#000000;
  --darja-bg-16:#2b3b2e;
  --darja-line-17:#645740;
  --darja-bg-18:#312b1c;
  --darja-line-19:#486241;
  --darja-fg-20:#f2ebf4;
  --darja-bg-21:#385746;
  --darja-bg-22:#413b25;
  --darja-bg-23:#413a25;
  --darja-line-24:#645c40;
  --darja-shadow-25:#000000;
  --darja-line-26:#644640;
  --darja-bg-27:#312a1c;
  --darja-bg-28:#31251c;
  --darja-bg-29:#31291c;
  --darja-shadow-30:rgba(0,0,0,0.200);
  --darja-bg-31:rgba(61,81,75,0.180);
  --darja-line-32:#525252;
  --darja-shadow-33:rgba(0,0,0,0.150);
  --darja-line-34:#645440;
  --darja-bg-35:#413b25;
  --darja-line-36:#645d40;
  --darja-fg-37:#e9d88b;
  --darja-bg-38:#413625;
  --darja-bg-39:#312b1c;
  --darja-fg-40:#fff6e8;
  --darja-line-41:#465d55;
  --darja-bg-42:#412d25;
  --darja-fg-43:#d4a8a0;
  --darja-bg-44:#254125;
  --darja-line-45:#406351;
  --darja-fg-46:#9dd7b8;
  --darja-bg-47:#31211c;
  --darja-line-48:#644740;
  --darja-fg-49:#e19e93;
  --darja-bg-50:#312c1c;
  --darja-fg-51:#a1d3b6;
  --darja-fg-52:#efe9d8;
  --darja-bg-53:rgba(61,81,75,0.450);
  --darja-shadow-54:rgba(0,0,0,0.250);
  --darja-bg-55:#211c31;
  --darja-fg-56:#f2ebf4;
  --darja-fg-57:#c6bbce;
  --darja-shadow-58:rgba(0,0,0,0.050);
  --darja-fg-59:#f2ebf4;
  --darja-fg-60:#ea8faa;
  --darja-bg-61:#31261c;
  --darja-line-62:#634159;
  --darja-fg-63:#f2ebf4;
  --darja-shadow-64:rgba(0,0,0,0.110);
  --darja-bg-65:#311c25;
  --darja-fg-66:#d89cb7;
  --darja-bg-67:rgba(33,28,49,0.950);
  --darja-fg-68:#c6bbce;
  --darja-shadow-69:rgba(0,0,0,0.060);
  --darja-bg-70:#412531;
  --darja-bg-71:#412531;
  --darja-fg-72:#c6bbce;
  --darja-fg-73:#e9a6c3;
  --darja-fg-74:#c6bbce;
  --darja-bg-75:#2d1c31;
  --darja-line-76:#644050;
  --darja-shadow-77:rgba(0,0,0,0.070);
  --darja-bg-78:#3e2838;
  --darja-line-79:#64404f;
  --darja-line-80:#64404f;
  --darja-bg-81:#5b3345;
  --darja-bg-82:rgba(72,63,80,0.340);
  --darja-bg-83:#483f50;
  --darja-line-84:rgba(100,64,80,0.450);
  --darja-bg-85:#27222b;
  --darja-shadow-86:rgba(0,0,0,0.050);
  --darja-fg-87:#c6bbce;
  --darja-fg-88:#d2a2b8;
  --darja-line-89:#64404f;
  --darja-fg-90:#d2a2b8;
  --darja-bg-91:rgba(39,34,43,0.920);
  --darja-fg-92:#f0e3b1;
  --darja-fg-93:#f2ebf4;
  --darja-line-94:#524b58;
  --darja-fg-95:#f2ebf4;
  --darja-bg-96:#27222b;
  --darja-shadow-97:rgba(0,0,0,0.050);
  --darja-bg-98:#253d41;
  --darja-bg-99:#41252d;
  --darja-fg-100:#ffffff;
  --darja-shadow-101:rgba(0,0,0,0.080);
  --darja-fg-102:#e98ba9;
  --darja-bg-103:#311c22;
  --darja-bg-104:#1c2731;
  --darja-line-105:#525252;
  --darja-fg-106:#c6bbce;
  --darja-fg-107:#c6bbce;
  --darja-bg-108:rgba(39,34,43,0.630);
  --darja-fg-109:#c6bbce;
  --darja-bg-110:rgba(39,34,43,0.880);
  --darja-fg-111:#ffffff;
  --darja-fg-112:#f2ebf4;
  --darja-line-113:#525252;
  --darja-fg-114:#c6bbce;
  --darja-fg-115:#e9da8b;
  --darja-line-116:rgba(100,64,79,0.450);
  --darja-shadow-117:rgba(0,0,0,0.090);
  --darja-fg-118:#d2a2bb;
  --darja-fg-119:#c6bbce;
  --darja-fg-120:#c6bbce;
  --darja-shadow-121:rgba(0,0,0,0.070);
  --darja-line-122:rgba(82,82,82,0.850);
  --darja-shadow-123:rgba(0,0,0,0.140);
  --darja-bg-124:#312a1c;
  --darja-line-125:#525252;
  --darja-shadow-126:rgba(0,0,0,0.130);
  --darja-fg-127:#c6bbce;
  --darja-fg-128:#c6bbce;
  --darja-bg-129:rgba(39,34,43,0.960);
  --darja-shadow-130:rgba(0,0,0,0.120);
  --darja-fg-131:#c6bbce;
  --darja-bg-132:#231c31;
  --darja-shadow-133:#000000;
  --darja-fg-134:#dc98b6;
  --darja-shadow-135:rgba(0,0,0,0.070);
  --darja-fg-136:#d4a0b7;
  --darja-bg-137:#2d1c31;
  --darja-fg-138:#c6bbce;
  --darja-bg-139:#254138;
  --darja-bg-140:#31251c;
  --darja-line-141:#644e40;
  --darja-shadow-142:rgba(0,0,0,0.050);
  --darja-shadow-143:rgba(0,0,0,0.100);
  --darja-fg-144:#e6c88e;
  --darja-fg-145:#c6bbce;
  --darja-bg-146:#412532;
  --darja-fg-147:#c6bbce;
  --darja-fg-148:#c6bbce;
  --darja-fg-149:#c6bbce;
  --darja-fg-150:#c6bbce;
  --darja-fg-151:#e49abb;
  --darja-fg-152:#c6bbce;
  --darja-fg-153:#e5a0bd;
  --darja-shadow-154:rgba(0,0,0,0.120);
  --darja-bg-155:#335b42;
  --darja-bg-156:#4b335b;
  --darja-bg-157:#33515b;
  --darja-shadow-158:rgba(0,0,0,0.240);
  --darja-bg-159:rgba(35,45,42,.52);
  --darja-line-160:#644054;
  --darja-fg-161:#f2ebf4;
  --darja-bg-162:#2f1d29;
  --darja-line-163:#644050;
  --darja-fg-164:#d2a2ba;
  --darja-bg-165:#1c3129;
  --darja-line-166:#495b53;
  --darja-fg-167:#f2ebf4;
  --darja-bg-168:#412531;
  --darja-fg-169:#f2ebf4;
  --darja-fg-170:#e68fa2;
  --darja-fg-171:#a2d2c0;
  --darja-line-172:#406353;
  --darja-shadow-173:rgba(0,0,0,0.133);
  --darja-fg-174:#d2a2bd;
  --darja-bg-175:#2b2129;
  --darja-fg-176:#c6bbce;
  --darja-line-177:#5c4758;
  --darja-fg-178:#c6bbce;
  --darja-fg-179:#d2a2ba;
  --darja-bg-180:rgba(39,34,43,0.650);
  --darja-fg-181:#c6bbce;
  --darja-fg-182:#c6bbce;
  --darja-fg-183:#c6bbce;
  --darja-bg-184:#311c25;
  --darja-fg-185:#c6bbce;
  --darja-line-186:#644053;
  --darja-bg-187:#1c3121;
  --darja-line-188:#475c4d;
  --darja-bg-189:#31211c;
  --darja-line-190:#644a40;
  --darja-fg-191:#a2d2b2;
  --darja-fg-192:#d6ad9f;
  --darja-fg-193:#a2d2b1;
  --darja-line-194:#5d4659;
  --darja-bg-195:#301d30;
  --darja-bg-196:#311c27;
  --darja-shadow-197:rgba(0,0,0,0.200);
  --darja-bg-198:rgba(48, 42, 53, .45);
  --darja-fg-199:#d2a2bd;
  --darja-line-200:#624159;
  --darja-fg-201:#c6bbce;
  --darja-line-202:#644050;
  --darja-fg-203:#d3a1bd;
  --darja-bg-204:#412530;
  --darja-bg-205:#311c25;
  --darja-line-206:#644051;
  --darja-fg-207:#a2d2c4;
  --darja-bg-208:#1c312a;
  --darja-fg-209:#d4a0b4;
  --darja-bg-210:#311c23;
  --darja-fg-211:#d2a2b9;
  --darja-line-212:#64404e;
  --darja-bg-213:rgba(65,37,47,0.100);
  --darja-bg-214:rgba(51,91,89,0.100);
  --darja-bg-215:rgba(39,34,43,0.960);
  --darja-line-216:rgba(64,100,97,0.080);
  --darja-shadow-217:rgba(0,0,0,0.050);
  --darja-fg-218:#f2ebf4;
  --darja-bg-219:rgba(39,34,43,0.980);
  --darja-line-220:rgba(64,100,97,0.120);
  --darja-bg-221:#1c3131;
  --darja-line-222:#645940;
  --darja-fg-223:#e9c78b;
  --darja-fg-224:#c6bbce;
  --darja-shadow-225:rgba(0,0,0,0.250);
  --darja-shadow-226:rgba(0,0,0,0.320);
  --darja-fg-227:#c6bbce;
  --darja-bg-228:#222b29;
  --darja-bg-229:#1f2e2c;
  --darja-bg-230:#335b58;
  --darja-bg-231:#1c312d;
  --darja-line-232:#40645f;
  --darja-fg-233:#de96a3;
  --darja-fg-234:#f2ebf4;
  --darja-line-235:#42615b;
  --darja-line-236:#406460;
  --darja-shadow-237:rgba(0,0,0,0.100);
  --darja-bg-238:#1c312d;
  --darja-shadow-239:rgba(0,0,0,0.220);
  --darja-fg-240:#c6bbce;
  --darja-fg-241:#d69eb6;
  --darja-bg-242:#311c25;
  --darja-line-243:#64404c;
  --darja-bg-244:rgba(39,34,43,0.380);
  --darja-line-245:rgba(100,64,76,0.320);
  --darja-line-246:rgba(100,64,76,0.380);
  --darja-shadow-247:rgba(0,0,0,0.240);
  --darja-shadow-248:rgba(0,0,0,0.480);
  --darja-fg-249:#c6bbce;
  --darja-line-250:rgba(100,64,76,0.550);
  --darja-shadow-251:#000000;
  --darja-shadow-252:rgba(0,0,0,0.140);
  --darja-line-253:#644052;
  --darja-fg-254:#c6bbce;
  --darja-line-255:#5e455e;
  --darja-bg-256:#311c28;
  --darja-line-257:#614253;
  --darja-line-258:#5b4261;
  --darja-bg-259:rgba(61,81,75,0.940);
  --darja-shadow-260:rgba(0,0,0,0.220);
  --darja-fg-261:#c6bbce;
  --darja-line-262:#644050;
  --darja-line-263:#405864;
  --darja-fg-264:#a2c2d2;
  --darja-line-265:#645940;
  --darja-fg-266:#d5c4a0;
  --darja-line-267:#465e55;
  --darja-fg-268:#c6bbce;
  --darja-bg-269:rgba(39,34,43,0.960);
  --darja-fg-270:#d69eb7;
  --darja-fg-271:#d2a2b7;
  --darja-fg-272:#c6bbce;
  --darja-shadow-273:rgba(0,0,0,0.280);
  --darja-fg-274:#d2a2b8;
  --darja-shadow-275:rgba(0,0,0,0.160);
  --darja-bg-276:rgba(39,34,43,0.940);
  --darja-fg-277:#d2a2ba;
  --darja-fg-278:#d4a0b8;
  --darja-fg-279:#d2a2bc;
  --darja-bg-280:#335b3e;
  --darja-fg-281:#c6bbce;
  --darja-fg-282:#f2ebf4;
  --darja-bg-283:#31241c;
  --darja-line-284:#644b40;
  --darja-shadow-285:rgba(0,0,0,0.200);
  --darja-line-286:#64404d;
  --darja-bg-287:#5b3342;
  --darja-fg-288:#d89cb3;
  --darja-line-289:#64404c;
  --darja-fg-290:#da9ab3;
  --darja-shadow-291:rgba(0,0,0,0.160);
  --darja-bg-292:rgba(47, 36, 48, 0.45);
  --darja-fg-293:#c6bbce;
  --darja-bg-294:rgba(39,34,43,0.970);
  --darja-line-295:#614064;
  --darja-shadow-296:rgba(0,0,0,0.050);
  --darja-fg-297:#f2ebf4;
  --darja-fg-298:#dc98b8;
  --darja-bg-299:#2d1c31;
  --darja-fg-300:#d2a2bc;
  --darja-fg-301:#c6bbce;
  --darja-line-302:#5b4064;
  --darja-line-303:#63415f;
  --darja-shadow-304:rgba(0,0,0,0.024);
  --darja-line-305:#644050;
  --darja-bg-306:#311c2a;
  --darja-fg-307:#dd97b6;
  --darja-fg-308:#d2a2bc;
  --darja-bg-309:#5b3346;
  --darja-line-310:#644051;
  --darja-fg-311:#d99cb7;
  --darja-line-312:#644056;
  --darja-line-313:#644060;
  --darja-fg-314:#db9ab8;
  --darja-line-315:#574064;
  --darja-shadow-316:rgba(0,0,0,0.067);
  --darja-bg-317:#4b335b;
  --darja-bg-318:#33535b;
 }
 html[data-theme="dark"] body { background-color:#17151d; background-image:none; }
 html[data-theme="dark"] body::before { opacity:.12; }
 html[data-theme="dark"] .darja-theme-toggle { color:#f0b5d0; background:#392534; border-color:#88536d; }
 html[data-theme="dark"] .darja-theme-toggle:hover { background:#4b3043; }
 html[data-theme="dark"] :is(.btn-primary,.btn,.hero-start-btn,.hero-test-btn,.darja-signup button,.darja-contact-send,.category.active,.open) { color:#f8edf4!important; }
 html[data-theme="dark"] :is(.vcard,.vocab-card) { --accent-soft:#292332!important; }
 html[data-theme="dark"] :is(.brand-logo,.brand-link,.logo) img { background:#fff; border-radius:8px; }
 html[data-theme="dark"] :focus-visible { outline-color:#efaccb!important; }
 html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder { color:#b6aabb; }
 html[data-theme="dark"] [class*="bg-gradient-"] { background-image:none!important; background-color:#24212b!important; }
 html[data-theme="dark"] .bg-azure-100 { background-color:#231c31!important; }
 html[data-theme="dark"] .bg-azure-200\/60 { background-color:#302541!important; }
 html[data-theme="dark"] .bg-azure-400 { background-color:#302541!important; }
 html[data-theme="dark"] .bg-azure-50 { background-color:#231c31!important; }
 html[data-theme="dark"] .bg-azure-50\/20 { background-color:#231c31!important; }
 html[data-theme="dark"] .bg-azure-50\/60 { background-color:#231c31!important; }
 html[data-theme="dark"] .bg-azure-50\/70 { background-color:#231c31!important; }
 html[data-theme="dark"] .bg-azure-500 { background-color:#42335b!important; }
 html[data-theme="dark"] .bg-ink-900 { background-color:#483f50!important; }
 html[data-theme="dark"] .bg-sage-100 { background-color:#1c312a!important; }
 html[data-theme="dark"] .bg-sage-400 { background-color:#335b51!important; }
 html[data-theme="dark"] .bg-sage-50 { background-color:#1c312a!important; }
 html[data-theme="dark"] .bg-sage-500 { background-color:#345b51!important; }
 html[data-theme="dark"] .bg-sage-600 { background-color:#335b52!important; }
 html[data-theme="dark"] .bg-sand-100 { background-color:#2b1c31!important; }
 html[data-theme="dark"] .bg-sand-100\/60 { background-color:#2b1c31!important; }
 html[data-theme="dark"] .bg-sand-100\/70 { background-color:#2b1c31!important; }
 html[data-theme="dark"] .bg-sand-200 { background-color:#3d273f!important; }
 html[data-theme="dark"] .bg-sand-200\/70 { background-color:#3d273f!important; }
 html[data-theme="dark"] .bg-sand-50 { background-color:#2a1c31!important; }
 html[data-theme="dark"] .bg-sand-50\/60 { background-color:#2a1c31!important; }
 html[data-theme="dark"] .bg-sand-50\/70 { background-color:#2a1c31!important; }
 html[data-theme="dark"] .bg-sand-50\/80 { background-color:#2a1c31!important; }
 html[data-theme="dark"] .bg-sand-600 { background-color:#503f4f!important; }
 html[data-theme="dark"] .bg-terracotta-100 { background-color:#311c25!important; }
 html[data-theme="dark"] .bg-terracotta-200 { background-color:#412531!important; }
 html[data-theme="dark"] .bg-terracotta-400 { background-color:#412531!important; }
 html[data-theme="dark"] .bg-terracotta-50 { background-color:#311c24!important; }
 html[data-theme="dark"] .bg-terracotta-50\/20 { background-color:#311c24!important; }
 html[data-theme="dark"] .bg-terracotta-50\/50 { background-color:#311c24!important; }
 html[data-theme="dark"] .bg-terracotta-50\/70 { background-color:#311c24!important; }
 html[data-theme="dark"] .bg-terracotta-500 { background-color:#412531!important; }
 html[data-theme="dark"] .bg-white { background-color:#27222b!important; }
 html[data-theme="dark"] .bg-white\/90 { background-color:#27222b!important; }
 html[data-theme="dark"] .border-azure-100\/90 { border-color:#4d4064!important; }
 html[data-theme="dark"] .border-azure-200\/80 { border-color:#4e4064!important; }
 html[data-theme="dark"] .border-sage-200 { border-color:#406459!important; }
 html[data-theme="dark"] .border-sand-100 { border-color:#594064!important; }
 html[data-theme="dark"] .border-sand-200 { border-color:#614064!important; }
 html[data-theme="dark"] .border-sand-200\/70 { border-color:#614064!important; }
 html[data-theme="dark"] .border-sand-200\/80 { border-color:#614064!important; }
 html[data-theme="dark"] .border-sand-200\/90 { border-color:#614064!important; }
 html[data-theme="dark"] .border-sand-300 { border-color:#5e4064!important; }
 html[data-theme="dark"] .border-terracotta-100 { border-color:#644050!important; }
 html[data-theme="dark"] .border-terracotta-200 { border-color:#64404f!important; }
 html[data-theme="dark"] .border-terracotta-200\/80 { border-color:#64404f!important; }
 html[data-theme="dark"] .border-terracotta-200\/90 { border-color:#64404f!important; }
 html[data-theme="dark"] .focus\:border-azure-400:focus { border-color:#4e4064!important; }
 html[data-theme="dark"] .focus\:border-terracotta-400:focus { border-color:#64404f!important; }
 html[data-theme="dark"] .hover\:bg-azure-600:hover { background-color:#45335b!important; }
 html[data-theme="dark"] .hover\:bg-sand-100:hover { background-color:#2b1c31!important; }
 html[data-theme="dark"] .hover\:bg-sand-100\/70:hover { background-color:#2b1c31!important; }
 html[data-theme="dark"] .hover\:bg-sand-200:hover { background-color:#3d273f!important; }
 html[data-theme="dark"] .hover\:bg-sand-200\/70:hover { background-color:#3d273f!important; }
 html[data-theme="dark"] .hover\:bg-sand-50:hover { background-color:#2a1c31!important; }
 html[data-theme="dark"] .hover\:bg-sand-50\/70:hover { background-color:#2a1c31!important; }
 html[data-theme="dark"] .hover\:bg-terracotta-100:hover { background-color:#311c25!important; }
 html[data-theme="dark"] .hover\:bg-terracotta-50:hover { background-color:#311c24!important; }
 html[data-theme="dark"] .hover\:bg-terracotta-600:hover { background-color:#5b3346!important; }
 html[data-theme="dark"] .hover\:bg-white:hover { background-color:#27222b!important; }
 html[data-theme="dark"] .hover\:border-sand-300:hover { border-color:#5e4064!important; }
 html[data-theme="dark"] .hover\:text-terracotta-500:hover { color:#dc98b6!important; }
 html[data-theme="dark"] .hover\:text-terracotta-600:hover { color:#d4a0b8!important; }
 html[data-theme="dark"] .text-azure-500 { color:#b4a2d2!important; }
 html[data-theme="dark"] .text-azure-600 { color:#b7a2d2!important; }
 html[data-theme="dark"] .text-ink-300 { color:#c6bbce!important; }
 html[data-theme="dark"] .text-ink-500 { color:#c6bbce!important; }
 html[data-theme="dark"] .text-ink-700 { color:#c6bbce!important; }
 html[data-theme="dark"] .text-ink-900 { color:#f2ebf4!important; }
 html[data-theme="dark"] .text-sage-500 { color:#a2d2c7!important; }
 html[data-theme="dark"] .text-sage-600 { color:#a2d2c7!important; }
 html[data-theme="dark"] .text-sand-600 { color:#c6bbce!important; }
 html[data-theme="dark"] .text-terracotta-100 { color:#fbe0ec!important; }
 html[data-theme="dark"] .text-terracotta-500 { color:#dc98b6!important; }
 html[data-theme="dark"] .text-terracotta-600 { color:#d4a0b8!important; }
 html[data-theme="dark"] .text-white { color:#fff!important; }
}
@media print { .darja-theme-toggle { display:none!important; } }

/* Original: cookie-consent.css */
.cookie-consent {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  z-index: 10000;
  max-width: 720px;
  margin: auto;
  padding: 20px;
  color: var(--darja-fg-282, #2f2430);
  background: var(--darja-bg-283, #fffaf7);
  border: 1px solid var(--darja-line-284, #ead7ce);
  border-radius: 18px;
  box-shadow: 0 12px 40px var(--darja-shadow-285, rgba(57, 36, 44, 0.2));
  font-family: "Poppins", sans-serif;
}

.cookie-consent[hidden],
.cookie-settings-button[hidden] {
  display: none !important;
}

.cookie-consent h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  line-height: 1.35;
}

.cookie-consent p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.cookie-consent button,
.cookie-settings-button {
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--darja-line-286, #9f3f63);
  border-radius: 999px;
  font: 600 0.9rem/1 "Poppins", sans-serif;
  cursor: pointer;
}

.cookie-consent__accept {
  color: var(--darja-fg-10, #fff);
  background: var(--darja-bg-287, #9f3f63);
}

.cookie-consent__reject {
  color: var(--darja-fg-288, #9f3f63);
  background: var(--darja-bg-8, #fff);
}

.cookie-consent button:focus-visible,
.cookie-settings-button:focus-visible {
  outline: 3px solid var(--darja-line-289, #efb4c9);
  outline-offset: 3px;
}

.cookie-settings-button {
  position: static;
  display: block;
  margin: 20px auto;
  width: fit-content;
  min-height: 38px;
  padding: 8px 13px;
  color: var(--darja-fg-290, #6f2944);
  background: var(--darja-bg-283, #fffaf7);
  box-shadow: 0 4px 18px var(--darja-shadow-291, rgba(57, 36, 44, 0.16));
  font-size: 0.75rem;
}

@media (max-width: 520px) {
  .cookie-consent {
    width: calc(100% - 20px);
    padding: 17px;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-consent button {
    width: 100%;
  }
}

/* In-page access: visible near the top, never overlays lesson content. */
.cookie-privacy-bar { display: flex; justify-content: center; padding: 8px 16px; background: var(--darja-bg-55, #f9f7ff); }
.cookie-privacy-bar .cookie-settings-button { position: static; margin: 0; min-height: 38px; }
.cookie-privacy-bar:has(.cookie-settings-button[hidden]) { display: none; }

.cookie-consent::backdrop { background: var(--darja-bg-292, rgba(47, 36, 48, 0.45)); }

/* Keep focus outlines immediate; animate only the button's visual states. */
.cookie-consent button {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}

/* Original: style.css */
* {
  margin: 1px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: var(--darja-bg-55, #f9f7ff);
  color: var(--darja-fg-95, #333);
  zoom: 0.9;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
padding: 6px 24px;
min-height: 84px;
  background: var(--darja-bg-96, white);
  box-shadow: 0 4px 20px var(--darja-shadow-97, rgba(0,0,0,0.05));
  position: sticky;
  top: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  
}

.logo img {
  width: 40px;
  
}

nav {
  display: flex;
  gap: 25px;
}

nav a {
  text-decoration: none;
  color: var(--darja-fg-59, #444);
  font-weight: 500;
  font-size: 20px;
}

nav a:hover {
  color: var(--darja-fg-60, #ff7aa2);
}

.auth {
  display: flex;
  gap: 15px;
  align-items: center;
}

.auth button {
  background: var(--darja-bg-98, #7bdff2);
  border: none;
  padding: 10px 18px;
  border-radius: 25px;
  cursor: pointer;
}

/* HERO */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 8%;
}

.hero-title {
  max-width: 570px;
  margin: 0;
  color: var(--darja-fg-63, #3f4c4a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -2px;
}

.hero-title em {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  color: var(--darja-fg-73, #e9a6c3);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.05;
}

/* Soft hand-drawn underline */
.hero-title em::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: -10px;
  width: 82%;
  height: 4px;
  background: var(--darja-bg-70, #e9a6c3);
  border-radius: 50%;
  transform: rotate(-1.5deg);
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 42px;
    letter-spacing: -1px;
  }
}

.hero-text p {
  margin-top: 35px;
  font-size: 18px;
  color: var(--darja-fg-74, #666);
}

.hero-text button {
  margin-top: 25px;
  padding: 14px 28px;
  border: none;
  border-radius: 25px;
  background: var(--darja-bg-99, #ff7aa2);
  color: var(--darja-fg-100, white);
  cursor: pointer;
}

.hero-image img {
  width: 420px;
}

/* COURSES */
.courses {
  padding: 80px 8%;
  text-align: center;
}

.courses h2 {
  font-size: 32px;
  margin-bottom: 40px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 20px;
  justify-content: center;
}

.card {
  background: var(--darja-bg-96, white);
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 15px var(--darja-shadow-101, rgba(0, 0, 0, 0.08));
}

.card img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0 auto 12px;
}

.card h3 {
  margin: 8px 0;
  font-size: 18px;
}

.card p {
  margin: 5px 0;
  color: var(--darja-fg-102, #ff6b9a);
  font-weight: bold;
}
/* ABOUT */
.about {
  padding: 80px 8%;
}

.about-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, var(--darja-bg-103, #ffe3ec), var(--darja-bg-104, #e3f2ff));
  padding: 50px;
  border-radius: 25px;
}

.about-text h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.about-text p {
  line-height: 1.8;
  color: var(--darja-fg-59, #444);
}

.about-image img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--darja-line-105, white);
}

/* RESPONSIVE */
@media (max-width: 768px) {

  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-image img {
    width: 300px;
    margin-top: 30px;
  }

  .about-box {
    flex-direction: column;
    text-align: center;
  }

  nav {
    display: none;
  }
  
}

/* NEW SECTIONS */

.benefits {
  padding: 90px 8%;
  text-align: center;
}

.benefits h2 {
  font-size: 36px;
  margin-bottom: 50px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.benefit-card {
  background: var(--darja-bg-96, white);
  padding: 35px;
  border-radius: 25px;
  box-shadow: 0 10px 25px var(--darja-shadow-97, rgba(0,0,0,0.05));
}

.benefit-card span {
  font-size: 40px;
}

.benefit-card h3 {
  margin: 15px 0;
}

.benefit-card p {
  color: var(--darja-fg-74, #666);
}

.booking {
  padding-top: 45px;
}

.booking-box {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  overflow: hidden;
  background: var(--darja-bg-75, #f2eaf4);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.booking-content {
  padding: 52px;
}

.booking-content .section-kicker {
  color: var(--darja-fg-106, #927fa5);
}

.booking-content h2 {
  max-width: 450px;
}

.booking-content p {
  max-width: 470px;
  color: var(--darja-fg-107, #6f7884);
}

.booking-list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 25px 0 28px;
}

.booking-list span {
  padding: 7px 11px;
  background: var(--darja-bg-108, rgba(255,255,255,.63));
  border-radius: 999px;
  color: var(--darja-fg-109, #756582);
  font-size: 12px;
  font-weight: 800;
}

.booking-form {
  margin: 27px;
  padding: 28px;
  background: var(--darja-bg-110, rgba(255,255,255,.88));
  border-radius: 23px;
}

.booking-form h3 {
  margin-bottom: 4px;
  color: var(--ink-dark);
  font-size: 21px;
}

.booking-form > p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 13px;
}

.calendar-booking {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 390px;
}

.calendar-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: var(--darja-bg-75, #f2eaf4);
  border-radius: 50%;
  font-size: 26px;
}

.calendar-benefits {
  margin: 3px 0 24px;
}

.calendar-benefits p {
  margin: 9px 0;
  color: var(--darja-fg-109, #756582);
  font-size: 13px;
  font-weight: 600;
}

/* Soft pink booking buttons */
.booking .secondary-btn,
.booking .primary-btn {
  display: inline-block;
  padding: 12px 18px;
  background: var(--darja-bg-70, #e9a6c3);
  color: var(--darja-fg-111, #ffffff);
  border: 1px solid var(--darja-line-79, #e9a6c3);
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, transform .2s;
}

.booking .secondary-btn:hover,
.booking .primary-btn:hover {
  background: var(--darja-bg-71, #d98eaf);
  border-color: var(--darja-line-89, #d98eaf);
  color: var(--darja-fg-111, #ffffff);
  transform: translateY(-2px);
}

.booking-calendar-btn {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 768px) {
  .booking-box {
    grid-template-columns: 1fr;
  }

  .booking-content {
    padding: 34px 24px 18px;
  }

  .booking-form {
    margin: 18px;
    padding: 25px;
  }

  .calendar-booking {
    min-height: 340px;
  }
}
.preview {
  margin: 40px 8%;
  padding: 70px;
  text-align: center;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--darja-bg-103, #ffe3ec), var(--darja-bg-104, #e3f2ff));
}

.preview h2 {
  font-size: 34px;
  margin-bottom: 15px;
}

.preview p {
  color: var(--darja-fg-112, #555);
  margin-bottom: 25px;
}

.preview button {
  background: var(--darja-bg-99, #ff7aa2);
  color: var(--darja-fg-100, white);
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
}

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.testimonial-card {
  max-width: 700px;
  margin: auto;
  background: var(--darja-bg-96, white);
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 10px 25px var(--darja-shadow-97, rgba(0,0,0,0.05));
}

.testimonial-card p {
  font-size: 20px;
  line-height: 1.8;
  color: var(--darja-fg-59, #444);
}

.testimonial-card h4 {
  margin-top: 20px;
  color: var(--darja-fg-60, #ff7aa2);
}
/* FAQ */

.faq {
  padding: 90px 8%;
  text-align: center;
}

.faq h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.faq-container {
  max-width: 800px;
  margin: auto;
}

.faq details {
  background: var(--darja-bg-96, white);
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 8px 20px var(--darja-shadow-97, rgba(0,0,0,0.05));
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
}

.faq p {
  margin-top: 15px;
  color: var(--darja-fg-74, #666);
  line-height: 1.6;
}

/* FOOTER */

.footer {
  background: var(--darja-bg-96, white);
  text-align: center;
  padding: 50px 8%;
  margin-top: 80px;
  border-top: 1px solid var(--darja-line-113, #eee);
}

.footer h3 {
  margin-bottom: 10px;
}

.footer p {
  color: var(--darja-fg-74, #666);
}

.footer-links {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.footer-links a {
  text-decoration: none;
  color: var(--darja-fg-60, #ff7aa2);
  font-weight: 600;
}

.footer-links a:hover {
  opacity: 0.8;
}

.copyright {
  font-size: 14px;
  color: var(--darja-fg-114, #999);
}
/* FINAL IMPROVEMENTS */

html {
  scroll-behavior: smooth;
}

.navbar {
  z-index: 1000;
}

button {
  transition: 0.3s;
}

button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.main-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 28px;
  border-radius: 25px;
  background: var(--darja-bg-99, #ff7aa2);
  color: var(--darja-fg-100, white);
  text-decoration: none;
  transition: 0.3s;
}

.main-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
/* HERO STICKERS */

/* HERO STICKERS */

.hero-stickers {
  position: relative;
  width: 520px;
  height: 430px;
  margin: auto;
}

.sticker {
  position: absolute;
  width: 105px;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.08));
  animation: explodeFloat 5s ease-in-out infinite;
  will-change: transform;
}

/* TOP */

.blue-door {
  left: 60px;
  top: 40px;
  --x: -18px;
  --y: -18px;
}

.pastries {
  left: 200px;
  top: 35px;
  --x: 0px;
  --y: -24px;
}

.clothes {
  right: 70px;
  top: 45px;
  --x: 18px;
  --y: -18px;
}

/* MIDDLE */

.flag {
  left: 85px;
  top: 165px;
  --x: -24px;
  --y: 0px;
}

.radio {
  left: 215px;
  top: 155px;
  --x: 0px;
  --y: -10px;
}

.harissa {
  right: 95px;
  top: 165px;
  --x: 24px;
  --y: 0px;
}

/* BOTTOM */

.map {
  left: 70px;
  bottom: 45px;
  --x: -18px;
  --y: 18px;
}

.inshallah {
  left: 205px;
  bottom: 35px;
  width: 120px;
  --x: 0px;
  --y: 24px;
}

.passport {
  right: 75px;
  bottom: 45px;
  --x: 18px;
  --y: 18px;
}

/* CHILI */

.chili {
  left: 300px;
  top: 230px;
  width: 85px;
  --x: 14px;
  --y: 12px;
  animation: chiliWiggle 4s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes explodeFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(var(--x), var(--y)) scale(1.04) rotate(3deg);
  }
}

@keyframes chiliWiggle {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(14px, 12px) scale(1.05) rotate(6deg);
  }
}

/* MOBILE */

@media (max-width: 768px) {
  .hero-stickers {
    width: 330px;
    height: 320px;
    margin-top: 30px;
  }

  .sticker {
    width: 70px;
  }

  .inshallah {
    width: 85px;
  }

  .blue-door {
    left: 25px;
    top: 25px;
  }

  .pastries {
    left: 125px;
    top: 20px;
  }

  .clothes {
    right: 25px;
    top: 25px;
  }

  .flag {
    left: 40px;
    top: 125px;
  }

  .radio {
    left: 130px;
    top: 115px;
  }

  .harissa {
    right: 45px;
    top: 125px;
  }

  .map {
    left: 35px;
    bottom: 25px;
  }

  .inshallah {
    left: 125px;
    bottom: 20px;
  }

  .passport {
    right: 35px;
    bottom: 25px;
  }

}
/* TESTIMONIAL GRID */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: auto;
}

/* TESTIMONIALS */

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 42px;
  margin-bottom: 50px;
}

/* TESTIMONIALS */

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: auto;
}

.testimonial-card {
  background: var(--darja-bg-96, white);
  padding: 25px;
  border-radius: 25px;
  box-shadow: 0 10px 25px var(--darja-shadow-97, rgba(0,0,0,0.05));
  text-align: center;
  transition: 0.3s;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.testimonial-card p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--darja-fg-59, #444);
  margin-bottom: 15px;
}

.testimonial-card h4 {
  color: var(--darja-fg-60, #ff7aa2);
  font-size: 20px;
  margin-bottom: 10px;
}

.stars {
  font-size: 24px;
  color: var(--darja-fg-115, gold);
  margin-top: 10px;
  letter-spacing: 2px;
}

.stats p {
  color: var(--darja-fg-74, #666);
}

@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    gap: 25px;
  }
}

/* ==================================================
   POCKET DARJA INTERACTIVE PHRASES
================================================== */

[hidden] {
  display: none !important;
}

.pocket-section {
  padding: 90px 8%;
  background: var(--darja-bg-55, #f9f7ff);
}

.section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-label {
  display: inline-block;
  padding: 7px 15px;
  color: var(--darja-fg-72, #755d70);
  background: var(--darja-bg-65, #f8dce8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 18px 0 12px;
  color: var(--darja-fg-56, #46505b);
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
}

.section-heading h2 em {
  color: var(--darja-fg-73, #e9a6c3);
  font-weight: 400;
}

.section-heading p {
  color: var(--darja-fg-68, #7b8494);
  font-size: 15px;
  line-height: 1.7;
}

.pocket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.flip-scene {
  perspective: 1400px;
}

.darja-flip-card {
  position: relative;
  width: 100%;
  max-width: 590px;
  min-height: 340px;
  margin: 0 auto;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}

.darja-flip-card.flipped {
  transform: rotateY(180deg);
}

.darja-flip-card:focus-visible {
  outline: 4px solid var(--darja-line-116, rgba(233, 166, 195, .45));
  outline-offset: 6px;
}

.darja-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px;
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 30px;
  box-shadow: 0 16px 35px var(--darja-shadow-117, rgba(70, 62, 77, .09));
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.darja-card-front {
  background: linear-gradient(145deg, var(--darja-bg-85, #ffffff), var(--darja-bg-75, #f2eaf4));
}

.darja-card-back {
  background: linear-gradient(145deg, var(--darja-bg-85, #ffffff), var(--darja-bg-65, #f8dce8));
  transform: rotateY(180deg);
}

.phrase-arabic {
  color: var(--darja-fg-57, #536577);
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1.4;
}

.phrase-latin {
  margin-top: 8px;
  color: var(--darja-fg-118, #9d6f87);
  font-size: 18px;
  font-weight: 700;
}

.phrase-meaning {
  max-width: 430px;
  color: var(--darja-fg-56, #46505b);
  font-family: Georgia, serif;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.35;
}

.phrase-example {
  margin-top: 20px;
  padding: 10px 18px;
  color: var(--darja-fg-119, #8d6379);
  background: var(--darja-bg-85, #ffffff);
  border: 1px dashed var(--darja-line-79, #e9a6c3);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.phrase-hint {
  margin-top: 24px;
  color: var(--darja-fg-120, #89919e);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.phrase-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.phrase-control {
  padding: 11px 18px;
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-70, #e9a6c3);
  border: 1px solid var(--darja-line-79, #e9a6c3);
  border-radius: 13px;
  box-shadow: 0 7px 18px var(--darja-shadow-121, rgba(70, 62, 77, .07));
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.phrase-control:hover {
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-71, #d98eaf);
  border-color: var(--darja-line-89, #d98eaf);
}

.phrase-menu {
  padding: 22px;
  background: var(--darja-bg-85, #ffffff);
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 25px;
  box-shadow: 0 12px 28px var(--darja-shadow-121, rgba(70, 62, 77, .07));
}

.phrase-menu h3 {
  margin-bottom: 15px;
  color: var(--darja-fg-68, #7b8494);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.phrase-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 13px;
  color: var(--darja-fg-57, #536577);
  background: var(--darja-bg-85, #ffffff);
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .2s, background .2s;
}

.phrase-choice:hover {
  background: var(--darja-bg-65, #f8dce8);
  transform: translateX(4px);
}

.phrase-choice.active {
  background: var(--darja-bg-70, #e9a6c3);
  border-color: var(--darja-line-79, #e9a6c3);
}

.phrase-choice span {
  font-size: 17px;
}

.phrase-choice small {
  color: var(--darja-fg-68, #7b8494);
  font-size: 12px;
  font-weight: 700;
}

.phrase-choice.active span,
.phrase-choice.active small {
  color: var(--darja-fg-111, #ffffff);
}

@media (max-width: 850px) {
  .pocket-layout {
    grid-template-columns: 1fr;
  }

  .phrase-menu {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .pocket-section {
    padding: 70px 5%;
  }

  .darja-flip-card {
    min-height: 310px;
  }

  .darja-card-face {
    padding: 25px;
  }

  .phrase-control {
    padding: 10px 13px;
    font-size: 12px;
  }
}

/* ==================================================
   HERO PORTRAIT — REPLACES THE STICKER COLLAGE
================================================== */

.hero-portrait {
  position: relative;
  width: min(48vw, 560px);
  min-width: 420px;
  margin: 0 auto;
  padding: 28px 22px 35px;
}

.portrait-shape {
  width: 100%;
  aspect-ratio: .88;
  overflow: hidden;
  background: var(--darja-bg-75, #f2eaf4);
  border: 8px solid var(--darja-line-122, rgba(255, 255, 255, .85));
  border-radius: 48% 48% 46% 54% / 42% 44% 56% 58%;
  box-shadow: 0 22px 50px var(--darja-shadow-123, rgba(71, 61, 80, .14));
}

.portrait-shape img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
}

.greeting-note {
  position: absolute;
  top: 0;
  right: -8px;
  min-width: 165px;
  padding: 16px 20px;
  background: var(--darja-bg-124, #fff4dc);
  border: 6px solid var(--darja-line-125, #ffffff);
  border-radius: 25px 25px 7px 25px;
  box-shadow: 0 14px 28px var(--darja-shadow-126, rgba(71, 61, 80, .13));
  text-align: center;
  transform: rotate(4deg);
}

.greeting-note strong {
  display: block;
  color: var(--darja-fg-127, #526470);
  font-size: 27px;
  line-height: 1.2;
}

.greeting-note span {
  display: block;
  margin-top: 5px;
  color: var(--darja-fg-128, #7c8490);
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}

.teacher-note {
  position: absolute;
  left: -28px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  padding: 17px 22px;
  background: var(--darja-bg-129, rgba(255, 255, 255, .96));
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 25px;
  box-shadow: 0 15px 32px var(--darja-shadow-130, rgba(71, 61, 80, .12));
}

.teacher-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-70, #e9a6c3);
  border-radius: 50%;
  font-size: 20px;
}

.teacher-note strong,
.teacher-note small {
  display: block;
}

.teacher-note strong {
  color: var(--darja-fg-131, #4e5965);
  font-size: 15px;
}

.teacher-note small {
  margin-top: 5px;
  color: var(--darja-fg-68, #7b8494);
  font-size: 12px;
}

.portrait-flower {
  position: absolute;
  left: 0;
  top: 30%;
  width: 58px;
  height: 58px;
  background: var(--darja-bg-132, #e9e2f5);
  border-radius: 50% 50% 48% 52%;
  box-shadow: 18px 0 var(--darja-shadow-133, #e9e2f5), -18px 0 var(--darja-shadow-133, #e9e2f5),
              0 18px var(--darja-shadow-133, #e9e2f5), 0 -18px var(--darja-shadow-133, #e9e2f5);
}

.portrait-flower span {
  position: absolute;
  inset: 17px;
  z-index: 1;
  background: var(--darja-bg-71, #d98eaf);
  border-radius: 50%;
}

@media (max-width: 980px) {
  .hero {
    flex-direction: column;
    gap: 55px;
    text-align: center;
  }

  .hero-portrait {
    width: min(82vw, 540px);
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .hero-portrait {
    width: 92vw;
    padding: 20px 15px 75px;
  }

  .greeting-note {
    right: 2px;
    min-width: 135px;
    padding: 12px 14px;
  }

  .greeting-note strong {
    font-size: 22px;
  }

  .teacher-note {
    left: 50%;
    bottom: 8px;
    min-width: min(90vw, 310px);
    transform: translateX(-50%);
  }

  .portrait-flower {
    left: 5px;
    top: 34%;
    transform: scale(.72);
  }
}
/* STATS SECTION */

.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  text-align: center;
  padding: 40px 8%;
  width: 100%;
}

.stats div {
  min-width: 150px;
}

.stats h3 {
  font-size: 32px;
  color: var(--darja-fg-60, #ff7aa2);
  margin-bottom: 5px;
}

.stats p {
  color: var(--darja-fg-74, #666);
  font-size: 16px;
}

@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    gap: 25px;
  }
}
.experience-text {
  display: flex;
  flex-direction: column;
}

.experience-text strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--darja-fg-131, #4e5965);
  font-size: 18px;
  line-height: 1.2;
}

.experience-number {
  color: var(--darja-fg-134, #d98eaf);
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 700;
}

.experience-text small {
  margin-top: 5px;
  color: var(--darja-fg-68, #7b8494);
  font-size: 12px;
  letter-spacing: 0.2px;
}
/* ========================================
   SPOTIFY PODCAST SECTION
======================================== */

.podcast-section {
  padding: 70px 8%;
  background: var(--darja-bg-75, #f2eaf4);
  text-align: center;
}


/* PODCAST TITLE */

.podcast-heading {
  max-width: 700px;
  margin: 0 auto 35px;
}

.podcast-label {
  display: inline-block;
  padding: 7px 16px;
  color: var(--darja-fg-72, #755d70);
  background: var(--darja-bg-85, #ffffff);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.podcast-heading h2 {
  margin: 18px 0 13px;
  color: var(--darja-fg-63, #3f4c4a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
}

.podcast-heading h2 em {
  color: var(--darja-fg-73, #e9a6c3);
  font-weight: 500;
}

.podcast-heading p {
  margin: 0;
  color: var(--darja-fg-107, #6f7884);
  font-size: 16px;
  line-height: 1.7;
}


/* LIST OF EPISODES */

.podcast-episodes {
  display: grid;
  gap: 16px;
  max-width: 950px;
  margin: 0 auto;
}


/* ONE EPISODE ROW */

.podcast-episode {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.8fr);
  align-items: stretch;
  gap: 14px;
}


/* SMALL SPOTIFY PLAYER */

.episode-audio {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 6px;
  background: var(--darja-bg-85, #ffffff);
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 16px;
  box-shadow: 0 7px 18px var(--darja-shadow-135, rgba(70, 62, 77, 0.07));
}

.episode-audio iframe {
  display: block;
  width: 100%;
  height: 152px !important;
  border: none;
  border-radius: 12px;
}


/* SMALL PDF CARD */

.podcast-resource {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  background: var(--darja-bg-85, #ffffff);
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 16px;
  box-shadow: 0 7px 18px var(--darja-shadow-135, rgba(70, 62, 77, 0.07));
  text-align: left;
}


/* PDF ICON */

.resource-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-70, #e9a6c3);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}


/* PDF INFORMATION */

.resource-information {
  min-width: 0;
  background: transparent;
}

.resource-information span {
  display: block;
  color: var(--darja-fg-136, #b65f85);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.resource-information h3 {
  margin: 3px 0 0;
  color: var(--darja-fg-63, #3f4c4a);
  font-size: 14px;
  line-height: 1.25;
}

.resource-information p {
  display: none;
}


/* PDF DOWNLOAD BUTTON */

.pdf-download-button {
  grid-column: 1 / -1;
  display: block;
  padding: 9px 12px;
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-70, #e9a6c3);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.pdf-download-button:hover {
  color: var(--darja-fg-111, #ffffff);
  background: var(--darja-bg-71, #d98eaf);
  transform: translateY(-1px);
}


/* TABLET AND PHONE */

@media (max-width: 750px) {
  .podcast-section {
    padding: 60px 5%;
  }

  .podcast-heading {
    margin-bottom: 28px;
  }

  .podcast-episode {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .episode-audio,
  .podcast-resource {
    width: 100%;
  }

  .episode-audio iframe {
    height: 152px !important;
  }
}
/* LANGUAGE SELECTOR */

.language-switcher {
  margin-left: 15px;
}

.language-switcher select {
  padding: 9px 32px 9px 13px;
  color: var(--darja-fg-63, #3f4c4a);
  background-color: var(--darja-bg-85, #ffffff);
  border: 1px solid var(--darja-line-62, #eadfe7);
  border-radius: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.language-switcher select:hover,
.language-switcher select:focus {
  border-color: var(--darja-line-79, #e9a6c3);
}


/* LANGUAGE SELECTOR ON PHONE */

@media (max-width: 750px) {
  .language-switcher {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
  }

  .language-switcher select {
    width: auto;
  }
}
/* ========================================
   TESTIMONIALS — SOFT CARD DESIGN
======================================== */

.quotes-band {
  background: var(--darja-bg-137, #f7f2f8);
}

.quotes-band section {
  padding: 75px 0 !important;
}

.quotes-band .container {
  width: min(1180px, 90%);
  margin: 0 auto;
}


/* SECTION TITLE */

.quotes-band .section-head {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.quotes-band .kicker {
  display: inline-block;
  padding: 7px 16px;
  color: var(--darja-fg-138, #557068);
  background: var(--darja-bg-139, #dcefe9);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.quotes-band .section-head h2 {
  margin: 17px 0 0;
  color: var(--darja-fg-63, #3f4c4a);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.2;
}

.quotes-band .section-head h2 em {
  color: var(--darja-fg-73, #e9a6c3);
  font-weight: 500;
}


/* TESTIMONIAL GRID */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}


/* TESTIMONIAL CARD */

.quote {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: var(--darja-bg-140, #fffaf6);
  border: 1px solid var(--darja-line-141, #eadfd8);
  border-radius: 28px;
  box-shadow: 0 10px 30px var(--darja-shadow-142, rgba(70, 62, 77, 0.05));
  text-align: left;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.quote:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px var(--darja-shadow-143, rgba(70, 62, 77, 0.1));
}


/* STARS */

.quotes-band .stars {
  margin-bottom: 20px;
  color: var(--darja-fg-144, #d9aa50);
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center
}


/* REVIEW TEXT */

.quote > p {
  flex: 1;
  max-height: 250px;
  margin: 0 0 25px;
  padding-right: 8px;
  overflow-y: auto;
  color: var(--darja-fg-145, #657080);
  font-size: 14px;
  line-height: 1.75;
}

/* Soft scrollbar for longer reviews */

.quote > p::-webkit-scrollbar {
  width: 5px;
}

.quote > p::-webkit-scrollbar-track {
  background: transparent;
}

.quote > p::-webkit-scrollbar-thumb {
  background: var(--darja-bg-146, #ead2dd);
  border-radius: 20px;
}


/* REVIEWER INFORMATION */

.quote-person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
}



.q-name {
  color: var(--darja-fg-63, #3f4c4a);
  font-size: 15px;
  font-weight: 700;
}

.q-role {
  margin-top: 3px;
  color: var(--darja-fg-147, #87909c);
  font-size: 12px;
  line-height: 1.4;
}


/* TABLET */

@media (max-width: 950px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* PHONE */

@media (max-width: 650px) {
  .quotes-band section {
    padding: 60px 0 !important;
  }

  .quotes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quote {
    padding: 23px;
    border-radius: 22px;
  }

  .quote > p {
    max-height: 280px;
  }
}
/* Full navbar logo */

.logo-only {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-only img {
width: 170px;
height: auto;
max-height: 62px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .logo-only img {
width: 155px;
max-height: 61px;
  }
}
.logo-only {
  position: relative;
  left: 0;
}
/* NEW WEBSITE FOOTER */

.site-footer {
  padding: 65px 7% 25px;
  color: var(--darja-fg-148, #59636f);
  background: var(--darja-bg-61, #fffdfb);
  border-top: 1px solid var(--darja-line-62, #eadfe7);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1.3fr;
  gap: 55px;
  max-width: 1250px;
  margin: 0 auto;
  padding-bottom: 45px;
}

.footer-brand img {
  display: block;
  width: 190px;
  height: auto;
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 310px;
  margin: 0;
  color: var(--darja-fg-149, #77818e);
  font-size: 14px;
  line-height: 1.8;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-column h3 {
  margin: 6px 0 8px;
  color: var(--darja-fg-63, #3f4c4a);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.footer-column a {
  color: var(--darja-fg-150, #697382);
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-column a:hover {
  color: var(--darja-fg-151, #e49abb);
  transform: translateX(3px);
}

.footer-contact p {
  margin: 0;
  color: var(--darja-fg-149, #77818e);
  font-size: 14px;
}

.footer-contact a {
  color: var(--darja-fg-66, #c66f96);
  overflow-wrap: anywhere;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid var(--darja-line-62, #eadfe7);
}

.footer-bottom p {
  margin: 0;
  color: var(--darja-fg-152, #89919c);
  font-size: 13px;
}

.footer-bottom span {
  color: var(--darja-fg-73, #e9a6c3);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 50px 7% 22px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* Soft pink testimonial stars */

.quotes .stars {
  color: var(--darja-fg-153, #e5a0bd);
}
/* Smooth movement between website sections */

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Keep footer email clear on desktop */

.footer-contact a {
  direction: ltr;
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 600px) {
  .footer-contact a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.podcast-nav {
  display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* PODCAST PLATFORM BUTTONS */

.podcast-platforms {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.podcast-platforms a {
  display: inline-flex;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 30px;
  color: var(--darja-fg-100, white);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 18px var(--darja-shadow-154, rgba(0, 0, 0, 0.12));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.podcast-platforms a:nth-child(1) {
  background: var(--darja-bg-155, #1db954);
}

.podcast-platforms a:nth-child(2) {
  background: var(--darja-bg-156, #872ec4);
}

.podcast-platforms a:nth-child(3) {
  background: var(--darja-bg-157, #00a8e1);
}

.podcast-platforms a:hover {
  color: var(--darja-fg-100, white);
  transform: translateY(-2px);
  opacity: 0.9;
}

@media (max-width: 600px) {
  .podcast-platforms {
    flex-direction: column;
    align-items: center;
  }

  .podcast-platforms a {
    width: 100%;
    max-width: 280px;
  }
}
/* MATCH HOME AND PODCAST MOBILE NAVBAR */
@media (max-width: 760px) {
  .navbar {
    min-height: 150px;
    padding: 13px 20px 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .logo-only img {
    width: 155px;
    max-height: 61px;
  }

  .podcast-nav {
    position: static;
    width: 100%;
    transform: none;
    justify-content: flex-start;
    gap: 11px 22px;
    padding: 6px 2px;
    overflow-x: auto;
  }

  .podcast-nav a {
    font-size: 16px;
    white-space: nowrap;
  }
}


/* Smaller homepage portrait — desktop */
@media (min-width: 981px) {
  .hero-portrait {
    width: min(38vw, 430px);
    min-width: 320px;
  }
}

/* Smaller homepage portrait — tablet */
@media (min-width: 601px) and (max-width: 980px) {
  .hero-portrait {
    width: min(72vw, 430px);
  }
}

/* Smaller homepage portrait — mobile */
@media (max-width: 600px) {
  .hero-portrait {
    width: 84vw;
  }
}

/* Smaller About section picture */
.about-image img {
  width: 210px;
  height: 210px;
}