/* ============================================================
   ZNOHUB landing — main stylesheet
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --color-primary: #0c01ff;
  --color-primary-soft: rgba(12, 1, 255, 0.08);
  --color-dark: #0b1020;
  --color-text: #5e6a7d;
  --color-muted: #8a94a6;
  --color-border: #edeff3;
  --color-border-soft: #f1f3f8;
  --color-bg: #f8f9fa;
  --color-bg-gray: #f2f4f8;
  --color-white: #fff;
  --color-sky: #0583f2;

  --shadow-card: 0 0.125rem 0.25rem 0 rgba(11, 16, 32, 0.04);
  --shadow-tag: 0 0.125rem 0.25rem 0 rgba(11, 16, 32, 0.12);

  --radius-card: 1.5rem;
  --radius-pill: 6.25rem;

  --font-main: "nexa-text", "Nexa Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --container-width: 75rem;
  --container-wide: 77rem;
  --section-padding: 7.5rem;

  /* chart timings — mirrored in js/main.js */
  --chart-build: 4200ms;
  --chart-wave-period: 10000ms;

  /* contact-widget toggle icons */
  --icon-plan-premium: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2.15101 20.7502C2.23757 21.605 2.28086 22.0324 2.56644 22.2906C2.85203 22.5487 3.28163 22.5487 4.14083 22.5487H21.8588C22.718 22.5487 23.1476 22.5487 23.4332 22.2906C23.7187 22.0324 23.762 21.605 23.8486 20.7502L24.7957 11.3977C24.9969 9.41045 25.0975 8.41682 24.5203 8.09744C23.943 7.77806 23.1546 8.39121 21.578 9.61751L19.9922 10.8509C19.1012 11.5439 18.6557 11.8904 18.1942 11.7857C17.7326 11.681 17.4802 11.1762 16.9754 10.1666L14.7887 5.79306C14.0081 4.23196 13.6178 3.45142 12.9998 3.45142C12.3818 3.45142 11.9915 4.23196 11.2109 5.79306L9.02416 10.1666C8.51938 11.1762 8.26699 11.681 7.80543 11.7857C7.34387 11.8904 6.89839 11.5439 6.00742 10.8509L4.42163 9.61751C2.84496 8.39121 2.05662 7.77806 1.47934 8.09744C0.902061 8.41682 1.00268 9.41045 1.20392 11.3977L2.15101 20.7502Z' fill='black'/%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2899 12.7136C15.0688 16.4916 16.1923 11.8542 18.5985 14.2584C20.9187 16.5776 22.2519 17.0424 19.3136 19.9807C18.9447 20.2764 16.6057 23.8368 8.38524 15.6183C0.164742 7.39977 3.72116 5.05784 4.01686 4.68994C6.96307 1.74374 7.41998 3.08481 9.74016 5.403C12.1454 7.80922 7.51097 8.93568 11.2899 12.7136Z' fill='black'/%3E%3C/svg%3E");
  --icon-instagram: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Instagram_logo_2022 1'%3E%3Cpath id='Vector' d='M10.0011 1.66667C7.73789 1.66667 7.45386 1.67656 6.56496 1.71702C5.6778 1.75764 5.07224 1.8981 4.54237 2.10418C3.99427 2.31702 3.52933 2.60174 3.06614 3.06511C2.6026 3.52831 2.31787 3.99323 2.10432 4.54115C1.89772 5.07119 1.75709 5.67691 1.71717 6.56372C1.67741 7.45261 1.66699 7.73681 1.66699 10C1.66699 12.2632 1.67706 12.5464 1.71734 13.4352C1.75814 14.3224 1.89859 14.928 2.10449 15.4578C2.31752 16.0059 2.60224 16.4708 3.06561 16.934C3.52865 17.3976 3.99358 17.683 4.54132 17.8958C5.07153 18.1019 5.67728 18.2424 6.56426 18.283C7.45317 18.3234 7.73702 18.3333 10.0001 18.3333C12.2635 18.3333 12.5466 18.3234 13.4355 18.283C14.3227 18.2424 14.9289 18.1019 15.4591 17.8958C16.0071 17.683 16.4713 17.3976 16.9343 16.934C17.3979 16.4708 17.6826 16.0059 17.8962 15.458C18.101 14.928 18.2416 14.3222 18.2833 13.4354C18.3232 12.5465 18.3337 12.2632 18.3337 10C18.3337 7.7368 18.3232 7.45279 18.2833 6.56389C18.2416 5.67674 18.101 5.07119 17.8962 4.54133C17.6826 3.99323 17.3979 3.5283 16.9343 3.06511C16.4708 2.60156 16.0072 2.31684 15.4586 2.10417C14.9274 1.8981 14.3215 1.75764 13.4343 1.71702C12.5454 1.67656 12.2624 1.66667 9.9985 1.66667H10.0011ZM9.25353 3.16841C9.47541 3.16806 9.72298 3.16841 10.0011 3.16841C12.2261 3.16841 12.4898 3.1764 13.3685 3.21633C14.181 3.25348 14.622 3.38924 14.9157 3.5033C15.3046 3.65434 15.5819 3.8349 15.8734 4.12657C16.1651 4.41824 16.3456 4.69602 16.497 5.0849C16.6111 5.3783 16.747 5.81927 16.784 6.63178C16.8239 7.51025 16.8326 7.77414 16.8326 9.9981C16.8326 12.222 16.8239 12.486 16.784 13.3644C16.7468 14.1769 16.6111 14.6179 16.497 14.9113C16.346 15.3002 16.1651 15.5771 15.8734 15.8686C15.5817 16.1603 15.3048 16.3408 14.9157 16.4918C14.6223 16.6064 14.181 16.7418 13.3685 16.779C12.49 16.8189 12.2261 16.8276 10.0011 16.8276C7.77591 16.8276 7.51219 16.8189 6.63371 16.779C5.82121 16.7415 5.38023 16.6057 5.0863 16.4917C4.69741 16.3406 4.41962 16.1601 4.12796 15.8684C3.83629 15.5767 3.65573 15.2997 3.50434 14.9106C3.39027 14.6172 3.25433 14.1762 3.21736 13.3637C3.17743 12.4852 3.16944 12.2214 3.16944 9.99601C3.16944 7.77067 3.17743 7.50816 3.21736 6.62969C3.25451 5.81719 3.39027 5.37622 3.50434 5.08247C3.65538 4.69358 3.83629 4.4158 4.12796 4.12414C4.41962 3.83247 4.69741 3.65192 5.0863 3.50053C5.38005 3.38594 5.82121 3.25053 6.63371 3.2132C7.40247 3.17847 7.70039 3.16806 9.25353 3.16632L9.25353 3.16841ZM14.4494 4.55209C13.8973 4.55209 13.4494 4.99949 13.4494 5.55174C13.4494 6.10383 13.8973 6.55174 14.4494 6.55174C15.0015 6.55174 15.4494 6.10383 15.4494 5.55174C15.4494 4.99966 15.0015 4.55175 14.4494 4.55175L14.4494 4.55209ZM10.0011 5.72049C7.63771 5.72049 5.72155 7.63664 5.72155 10C5.72155 12.3634 7.63771 14.2786 10.0011 14.2786C12.3645 14.2786 14.28 12.3634 14.28 10C14.28 7.63664 12.3643 5.72049 10.0009 5.72049H10.0011ZM10.0011 7.22223C11.5351 7.22223 12.7789 8.46581 12.7789 10C12.7789 11.534 11.5351 12.7778 10.0011 12.7778C8.46689 12.7778 7.2233 11.534 7.2233 10C7.2233 8.46581 8.46689 7.22223 10.0011 7.22223Z' fill='%235E6A7D'/%3E%3Cpath id='Vector (Stroke)' d='M18.1665 10C18.1665 8.30317 18.161 7.72089 18.1413 7.16227L18.1169 6.57145C18.0759 5.70008 17.9377 5.11235 17.7401 4.60124V4.60042C17.5343 4.07277 17.262 3.62803 16.8164 3.18278C16.3703 2.73668 15.9264 2.46478 15.3979 2.25993C14.8855 2.06117 14.2975 1.92304 13.4261 1.88314C12.5413 1.84287 12.261 1.8335 9.99919 1.8335C7.73836 1.8335 7.45714 1.84287 6.57227 1.88314C5.70082 1.92304 5.11297 2.0604 4.60205 2.25911V2.25993C4.07412 2.46499 3.62912 2.7371 3.18359 3.18278C2.73761 3.62843 2.46493 4.07397 2.25911 4.60205C2.06 5.11299 1.92234 5.70068 1.88314 6.57145C1.84356 7.45646 1.8335 7.73801 1.8335 10C1.8335 12.2623 1.84304 12.5426 1.88314 13.4277C1.92322 14.2989 2.06066 14.8863 2.25911 15.3971C2.46438 15.9253 2.73698 16.3708 3.18278 16.8164H3.18359C3.62905 17.2623 4.07367 17.5359 4.60124 17.7409C5.1125 17.9396 5.70025 18.0769 6.57145 18.1169C7.45659 18.1571 7.73782 18.1665 10 18.1665C12.2623 18.1665 12.5426 18.1571 13.4277 18.1169C14.2991 18.0769 14.8875 17.9396 15.3988 17.7409V17.7401C15.9264 17.5351 16.3709 17.2624 16.8164 16.8164C17.2622 16.3709 17.5343 15.9258 17.7401 15.3979L17.8117 15.2018C17.9709 14.7349 18.081 14.1898 18.1169 13.4277L18.1413 12.8369C18.161 12.2786 18.1665 11.6966 18.1665 10ZM3.00212 9.99593C3.00212 7.77002 3.01084 7.50425 3.05094 6.62191C3.08895 5.79113 3.22832 5.33224 3.3488 5.02197C3.5081 4.61187 3.70154 4.31443 4.0096 4.00635C4.31775 3.69819 4.61533 3.50515 5.02523 3.34554C5.33578 3.2244 5.79522 3.08505 6.62598 3.04688L7.14355 3.0249C7.62652 3.00718 8.08708 3.00099 9.25293 2.99967H9.42057V3.00212C9.59808 3.00206 9.79097 3.00212 10.0008 3.00212C11.6699 3.00212 12.2373 3.00656 12.7889 3.02572L13.3757 3.05013L13.6702 3.06885C14.3189 3.12266 14.7041 3.24256 14.9756 3.34798C15.3858 3.50732 15.6832 3.70058 15.9912 4.00879C16.2993 4.31697 16.4924 4.61443 16.652 5.02441L16.744 5.28809C16.8359 5.58686 16.9215 6.00094 16.9499 6.62435C16.99 7.50654 16.9987 7.77377 16.9987 9.99837C16.9987 12.2225 16.99 12.4896 16.9499 13.3716V13.3724C16.9119 14.2029 16.7725 14.6616 16.652 14.9715C16.4927 15.3818 16.2992 15.6785 15.9912 15.9863C15.6831 16.2944 15.386 16.487 14.9756 16.6463C14.6653 16.7675 14.2063 16.9078 13.3757 16.9458C12.4934 16.9859 12.2265 16.9946 10.0008 16.9946C7.77502 16.9946 7.50815 16.9859 6.62598 16.9458C5.79542 16.9075 5.33647 16.7676 5.02604 16.6471H5.02523C4.61522 16.4879 4.31776 16.2945 4.0096 15.9863C3.70146 15.6782 3.50848 15.3811 3.3488 14.9707C3.22832 14.6608 3.08877 14.2021 3.05094 13.3716C3.01083 12.4892 3.00212 12.2219 3.00212 9.99593ZM14.113 10C14.113 7.72872 12.272 5.88715 10.0008 5.88704C7.72947 5.88704 5.88786 7.72868 5.88786 10C5.88786 12.2713 7.72942 14.1121 10.0008 14.1121C12.2722 14.1121 14.113 12.2713 14.113 10ZM12.6123 10C12.6123 8.55787 11.4428 7.38853 10.0008 7.38851C8.55865 7.38851 7.38932 8.55785 7.38932 10C7.38932 11.442 8.55866 12.6115 10.0008 12.6115C11.4428 12.6115 12.6123 11.442 12.6123 10ZM15.2824 5.55176C15.2824 5.12056 14.9545 4.76529 14.5345 4.72249L14.4491 4.71842C13.9889 4.71845 13.6157 5.09167 13.6157 5.55176C13.6157 6.01177 13.989 6.38507 14.4491 6.38509C14.9091 6.38509 15.2824 6.01179 15.2824 5.55176ZM12.9452 10C12.9452 11.6261 11.6269 12.9443 10.0008 12.9443C8.37455 12.9443 7.05648 11.6261 7.05648 10C7.05648 8.37375 8.37456 7.05566 10.0008 7.05566C11.6269 7.05568 12.9451 8.37376 12.9452 10ZM14.4466 10C14.4466 12.4554 12.4562 14.445 10.0008 14.445C7.54542 14.445 5.5542 12.4555 5.5542 10C5.5542 7.62127 7.42294 5.67892 9.77214 5.5599L10.0008 5.5542L10.2295 5.5599C12.5786 5.67904 14.4466 7.62137 14.4466 10ZM18.5002 10C18.5002 11.698 18.494 12.2835 18.4741 12.8467L18.4497 13.4432C18.4126 14.2329 18.2976 14.8091 18.1274 15.3084L18.0509 15.5184C17.8297 16.0861 17.5327 16.5709 17.0516 17.0516C16.5712 17.5325 16.0872 17.8303 15.5192 18.0509C14.9701 18.2644 14.3459 18.4083 13.4432 18.4497H13.4424C12.5501 18.4903 12.2637 18.5002 10 18.5002C7.73609 18.5002 7.44866 18.4903 6.55599 18.4497C5.6535 18.4083 5.02985 18.2643 4.48079 18.0509C3.91299 17.8303 3.42811 17.5326 2.94759 17.0516C2.46679 16.571 2.1698 16.0863 1.94906 15.5184C1.73583 14.9697 1.59184 14.3459 1.55029 13.4432V13.4424C1.50987 12.5501 1.49984 12.2638 1.49984 10C1.49984 7.73585 1.51037 7.44852 1.55029 6.55599C1.59094 5.65351 1.73507 5.02979 1.94906 4.48079C2.17027 3.9132 2.46672 3.42821 2.94759 2.94759L3.12826 2.77507C3.55087 2.39306 3.98461 2.14207 4.48161 1.94906C5.03039 1.73562 5.65403 1.59165 6.5568 1.55029C7.44916 1.50968 7.7365 1.50066 9.99837 1.50065V1.49984H10.0008V1.50065C12.2632 1.50066 12.5492 1.50968 13.4416 1.55029L13.7679 1.57064C14.4995 1.62874 15.0371 1.76239 15.5184 1.94906C16.0872 2.16955 16.5706 2.46662 17.0516 2.94759C17.5326 3.42829 17.8297 3.91292 18.0509 4.48079V4.48161C18.263 5.03011 18.4073 5.65334 18.4497 6.55599V6.5568C18.4898 7.44904 18.5002 7.73619 18.5002 10ZM3.33577 9.99593C3.33577 12.2206 3.34403 12.4815 3.38379 13.3561C3.41993 14.1502 3.55204 14.5734 3.65967 14.8503C3.80275 15.2179 3.97052 15.4752 4.24561 15.7503C4.52069 16.0254 4.77887 16.1935 5.14648 16.3363C5.42392 16.4439 5.84747 16.5755 6.64144 16.6121C7.51572 16.6519 7.77676 16.661 10.0008 16.661C12.2247 16.661 12.4859 16.6519 13.3602 16.6121C14.1544 16.5758 14.5786 16.4443 14.8551 16.3363L14.9878 16.2817C15.2872 16.1502 15.5144 15.9912 15.7552 15.7503C16.0303 15.4754 16.1985 15.2183 16.3411 14.8511C16.4488 14.5743 16.5807 14.151 16.617 13.3569C16.6568 12.4823 16.6659 12.2213 16.6659 9.99837C16.6659 7.77516 16.6568 7.51364 16.617 6.639C16.5809 5.84541 16.4487 5.42247 16.3411 5.14567C16.198 4.77806 16.0302 4.51982 15.7552 4.24479V4.24398C15.4804 3.969 15.2225 3.80156 14.8551 3.65885C14.5779 3.55121 14.1543 3.41929 13.3602 3.38298C12.4858 3.34324 12.2248 3.33496 10.0008 3.33496H9.0861V3.33333C7.67934 3.33565 7.37787 3.34561 6.64063 3.37891C6.04489 3.40631 5.65801 3.48827 5.38493 3.57259L5.14648 3.6556C4.77878 3.79874 4.52069 3.96726 4.24561 4.24235C3.97063 4.51735 3.80235 4.77518 3.65967 5.14242C3.55203 5.41962 3.4201 5.84325 3.38379 6.63737C3.34404 7.51186 3.33578 7.77138 3.33577 9.99593ZM15.616 5.55176C15.616 6.19588 15.0932 6.71875 14.4491 6.71875C13.8049 6.71873 13.2821 6.19587 13.2821 5.55176C13.2821 4.9655 13.7151 4.48132 14.2782 4.3986V4.38477H14.4491C15.0932 4.38477 15.616 4.90762 15.616 5.55176Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E");
  --icon-tiktok: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Instagram_logo_2022 1'%3E%3Cpath id='Subtract' d='M10.3241 12.7354C10.3241 12.8838 10.3243 13.0304 10.3181 13.1754C10.3181 13.1933 10.3161 13.2102 10.3151 13.2296C10.3151 13.2376 10.3148 13.2464 10.313 13.2547V13.2607C10.2829 13.6578 10.1556 14.0414 9.94238 14.3778C9.72918 14.714 9.43672 14.9927 9.09055 15.1894C8.72965 15.3947 8.32145 15.5023 7.90623 15.5018C6.57261 15.5018 5.49143 14.4149 5.49139 13.0719C5.49139 11.7289 6.57259 10.641 7.90623 10.641C8.15868 10.6407 8.40956 10.6813 8.64957 10.7595L8.65259 7.84442C7.92407 7.75038 7.18383 7.80795 6.47882 8.01418C5.77377 8.22044 5.11918 8.57092 4.55619 9.0428C4.06287 9.47142 3.6482 9.98337 3.33069 10.5546C3.20985 10.7629 2.75309 11.5999 2.69784 12.9584C2.66313 13.7295 2.8948 14.5287 3.00522 14.8589V14.8659C3.07468 15.0604 3.34418 15.7239 3.78272 16.2833C4.13621 16.7318 4.55395 17.1257 5.02228 17.4526V17.4455L5.02931 17.4526C6.40536 18.3876 7.93021 18.3333 7.95144 18.3325C8.21738 18.3218 9.10847 18.3328 10.1202 17.8534C11.2424 17.3218 11.8811 16.5294 11.8811 16.5294C12.2892 16.0563 12.6144 15.5174 12.8414 14.9353C13.1004 14.2544 13.1869 13.4375 13.1869 13.1111V7.2387C13.2228 7.26026 13.6842 7.56617 13.6842 7.56617C13.7046 7.57919 14.3666 7.99755 15.3898 8.27133C16.1356 8.46917 17.1407 8.51041 17.1407 8.51041V5.66864C16.7886 5.70683 16.0735 5.59559 15.3416 5.23068C15.2291 5.17254 15.1193 5.10891 15.0132 5.03982C14.7047 4.83588 14.4215 4.59607 14.1704 4.32461C13.5419 3.60554 13.3076 2.87554 13.2211 2.36481H13.2241C13.1519 1.94089 13.1824 1.66667 13.1869 1.66667H10.3241V12.7354Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E");
  --icon-telegram: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Telegram_black_logo 1'%3E%3Cpath id='Vector' d='M17.258 3.04541C17.258 3.04541 18.8769 2.41416 18.742 3.9472C18.697 4.57846 18.2923 6.78783 17.9775 9.17758L16.8983 16.2566C16.8983 16.2566 16.8084 17.2937 15.9989 17.474C15.1895 17.6544 13.9753 16.8428 13.7505 16.6624C13.5706 16.5272 10.3778 14.4981 9.25358 13.5062C8.93879 13.2356 8.57904 12.6945 9.29854 12.0633L14.0203 7.55438C14.5599 7.01329 15.0995 5.75079 12.8511 7.28383L6.55546 11.5673C6.55546 11.5673 5.83596 12.0182 4.48692 11.6124L1.56393 10.7106C1.56393 10.7106 0.484671 10.0343 2.3284 9.35792C6.82529 7.23871 12.3565 5.07442 17.258 3.04541Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.2 5.2l9.6 9.6M14.8 5.2l-9.6 9.6' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* phones scale proportionally to the 390px mobile canvas (no clamp) */
@media (max-width: 480px) {
  html {
    font-size: calc(100vw / 390 * 14);
  }
}

/* stepped container widths */
@media (max-width: 1280px) {
  :root {
    --container-width: 1024px;
    --container-wide: 1024px;
  }
}

@media (max-width: 1100px) {
  :root {
    --container-width: 768px;
    --container-wide: 768px;
  }
}

body {
  font-family: var(--font-main);
  font-size: 1.0625rem;
  font-weight: 500; /* Adobe kit: 500 = Nexa Text Regular (400 is the thinner Book) */
  line-height: 1.4;
  color: var(--color-dark);
  background: var(--color-white);
}

/* ---------- Main ---------- */
.main {
  border-radius: 5rem;
  background: #f8f9fa;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(11, 16, 32, 0.04);
  overflow: clip;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-width) + 4rem);
  margin: 0 auto;
  padding: 0 2rem;
}

.container--wide {
  max-width: calc(var(--container-wide) + 4rem);
}

/* ---------- Accessibility ---------- */
/* the UA outline is invisible on the blue buttons and blue sections */
:focus-visible {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
  border-radius: 0.25rem;
}

.section--blue :focus-visible,
.btn--primary:focus-visible,
.faq-item--open :focus-visible {
  outline-color: var(--color-white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  font-weight: 600; /* kit: Bold */
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, background 0.2s ease;
}

/* unified interaction: hover lifts 0.125rem + darkens, active presses back down */
.btn:hover {
  transform: translateY(-0.125rem);
}

.btn:active {
  transform: translateY(0);
}

.btn > span {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.25rem;
}

.btn--sm {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.0094rem;
}

.btn--lg {
  height: 3.75rem;
  padding: 0 1.75rem;
  font-size: 1.0625rem;
  letter-spacing: -0.0106rem;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: #0a01d9;
}

.btn--primary:active {
  background: #0901c0;
}

.btn--outline {
  background: var(--color-white);
  border: 0.0625rem solid var(--color-border);
  color: var(--color-dark);
}

.btn--outline:hover {
  background: #f8f9fa;
}

.btn--outline:active {
  background: var(--color-bg-gray);
}

.btn--sky {
  background: var(--color-sky);
  color: var(--color-white);
}

.btn--sky:hover {
  background: #046fce;
}

.btn--sky:active {
  background: #035fb2;
}

/* ---------- Badges / pills ---------- */
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.8125rem;
  letter-spacing: 0.0406rem;
  text-transform: uppercase;
}

/* animated gradient border: a soft highlight band loops along the pill */
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.0938rem;
  background: linear-gradient(110deg, rgba(12, 1, 255, 0) 42%, rgba(12, 1, 255, 0.16) 50.49%, rgba(12, 1, 255, 0) 59%);
  background-size: 400% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: badge-border-shimmer 3.5s linear infinite;
  pointer-events: none;
}

@keyframes badge-border-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: var(--color-dark);
}

.badge-pill--gray {
  background: var(--color-bg);
}

/* ---------- Subject icons (mask, colored via `color`) ---------- */
.subject-icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.subject-icon--math      { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6301 21.9483C19.2476 17.0956 20.7271 12.8146 20.9181 12.4351L21.2654 11.7451L32.5701 11.8101L43.8749 11.8751V13.8751V15.8751L34.0006 16.0001L24.1261 16.1251L20.6071 26.6251C18.6714 32.4001 16.8994 37.3218 16.6689 37.5626C16.0859 38.1713 12.9711 38.1913 12.4679 37.5898C12.2794 37.3643 11.3919 35.3111 10.4959 33.0273L8.86663 28.8751L7.49588 28.7501L6.12488 28.6251V26.6251V24.6251H8.98063H11.8364L13.0051 27.6123C13.6481 29.2556 14.2901 30.6386 14.4319 30.6858C14.5736 30.7331 16.0129 26.8011 17.6301 21.9483Z' fill='black'/%3E%3Cpath d='M29.0414 25.8088C26.2956 21.5401 26.4406 21.7983 26.6249 21.5001C26.7099 21.3626 27.7176 21.2501 28.8646 21.2501H30.9496L32.2874 23.4028C33.0229 24.5868 33.7374 25.5713 33.8749 25.5903C34.0124 25.6093 34.7759 24.6408 35.5716 23.4376L37.0184 21.2501H39.1341C40.8209 21.2501 41.2499 21.3241 41.2499 21.6146C41.2499 21.8151 40.4289 23.2493 39.4256 24.8021C38.4221 26.3548 37.3544 28.0306 37.0529 28.5261L36.5044 29.4268L39.0126 33.3456C40.3919 35.5008 41.4531 37.3736 41.3706 37.5071C41.2879 37.6408 40.2809 37.7501 39.1324 37.7501H37.0446L35.6249 35.5001C34.8441 34.2626 34.0746 33.2506 33.9151 33.2511C33.7554 33.2516 32.9794 34.2641 32.1904 35.5011L30.7561 37.7501H28.6279C27.0594 37.7501 26.4999 37.6656 26.4999 37.4283C26.4999 37.1236 30.5131 30.6418 31.0139 30.1376C31.4554 29.6931 31.2506 29.2436 29.0414 25.8088Z' fill='black'/%3E%3C/svg%3E"); }
.subject-icon--ukrainian { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.62476 12.1251L8.62476 11.9556C9.17476 11.8623 10.937 11.8281 12.5408 11.8796C16.6405 12.0113 19.6715 13.0381 22.4545 15.2378L23.7498 16.2618V28.7558C23.7498 37.6456 23.6708 41.2501 23.4758 41.2501C23.3253 41.2501 22.8765 41.0183 22.4788 40.7353C21.2813 39.8826 18.2362 38.5918 16.364 38.1433C15.227 37.8711 13.3673 37.7046 11.114 37.6733L7.62476 37.6251V24.8751V12.1251Z' fill='black'/%3E%3Cpath d='M27.3123 15.4416C28.9998 13.8823 32.4418 12.4211 35.6248 11.9126C36.853 11.7166 42.0163 11.9166 42.27 12.1703C42.4115 12.3118 42.4787 17.4018 42.4395 25.0148L42.3748 37.6251L38.2498 37.7723C33.5178 37.9416 31.4507 38.4606 28.4115 40.2431C27.4692 40.7956 26.5972 41.1853 26.474 41.1091C26.3465 41.0303 26.2498 35.6703 26.2498 28.6968V16.4233L27.3123 15.4416Z' fill='black'/%3E%3C/svg%3E"); }
.subject-icon--biology   { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40.6287 11.3134C43.7212 11.1163 43.8361 11.2214 43.8001 14.216C43.7477 18.5981 42.1426 22.6226 39.3114 25.47C38.1137 26.6745 36.5068 27.7401 34.8085 28.5268C34.7812 28.5402 34.753 28.5542 34.7234 28.5679C34.4572 28.6915 34.1826 28.8074 33.9026 28.9166C33.2067 29.1931 32.505 29.4198 31.8185 29.5875C29.887 30.0997 28.005 30.337 26.9799 30.4045L26.9148 36.1269L26.8492 41.8555H23.1582L22.9122 30.2906L21.6819 30.1007C15.3827 29.1295 13.5852 28.3663 10.6186 25.4027C8.39476 23.181 7.30438 21.2807 6.51871 18.2561C5.97911 16.1798 5.88364 11.9907 6.36444 11.4922C6.59649 11.2516 7.24544 11.213 9.00962 11.3343C14.0827 11.6835 17.5636 13.1003 20.428 15.9822C22.6384 18.2058 23.6143 19.9953 24.5073 23.4623C24.6554 24.0375 24.8603 24.5079 24.9624 24.5081C25.0645 24.5081 25.2773 23.8921 25.4353 23.1391C25.9725 20.5786 27.338 18.2017 29.5323 16.0074C32.4708 13.0689 35.9105 11.6139 40.6287 11.3134Z' fill='black'/%3E%3C/svg%3E"); }
.subject-icon--history   { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.4231 11.1445C23.4231 7.16553 23.5079 5.51529 23.7231 5.30004C24.2116 4.81154 25.7856 4.93378 26.2981 5.50003C26.7039 5.94828 27.0681 6.00003 29.8221 6.00003C31.5114 6.00003 32.9344 6.08428 32.9841 6.18753C33.0336 6.29078 33.0121 7.72503 32.9364 9.37503L32.7981 12.375L29.6731 12.5L26.5481 12.625L26.4746 14.593C26.4196 16.0605 26.4951 16.6653 26.7709 16.97C26.9744 17.1948 27.1761 17.9403 27.2194 18.6268L27.2981 19.875H28.2981H29.2981L29.4231 18.5L29.5481 17.125H31.9231H34.2981V21.1225V25.12L33.5481 25.25L32.7981 25.38V27.7525V30.125H35.0481H37.2981L37.4231 28.25L37.5481 26.375H40.1731H42.7981V35.625V44.875H36.0481H29.2981L29.1731 40.6045C29.0501 36.3985 29.0376 36.3203 28.3476 35.4168C27.3474 34.1065 26.3744 33.6715 24.7469 33.8063C23.3219 33.9245 22.4439 34.418 21.5636 35.5953C21.1034 36.2108 21.0346 36.7455 20.9231 40.5798L20.7981 44.875L14.1899 44.9418C10.5554 44.9785 7.49487 44.9218 7.38887 44.8158C7.05037 44.4773 6.83612 27.3798 7.16287 26.7693C7.43187 26.2668 7.61062 26.2373 9.99912 26.304L12.5481 26.375L12.6731 28.25L12.7981 30.125H15.0481H17.2981V27.7525V25.38L16.5481 25.2513L15.7981 25.1225L15.5761 21.4565C15.4539 19.4403 15.4224 17.6128 15.5056 17.3953C15.6284 17.0758 16.0846 17 17.8846 17C20.4281 17 20.6011 17.1073 20.7184 18.755C20.7966 19.8533 20.8151 19.875 21.6731 19.875H22.5481L22.6229 18.5828C22.6659 17.8405 22.8521 17.1628 23.0604 16.9898C23.3574 16.7433 23.4231 15.6838 23.4231 11.1445Z' fill='black'/%3E%3C/svg%3E"); }
.subject-icon--english   { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3095 7.50791C15.848 7.61666 14.3267 7.80391 13.5702 8.09141C9.94424 9.46841 6.94024 12.8814 6.03299 16.6547C5.58249 18.5279 5.69474 28.4782 6.18749 30.3564C7.17099 34.1059 9.64624 36.9279 13.2257 38.3807L14.6845 38.9729L14.8095 41.6739L14.9345 44.3752L16.045 44.3232C17.0982 44.2737 17.292 44.1349 19.799 41.6357L22.4427 39.0002H28.4787C33.7007 39.0002 34.7202 38.9362 36.0367 38.5264C39.047 37.5897 41.4972 35.4619 42.843 32.6159C43.9455 30.2849 44.1165 28.7719 43.9995 22.3834C43.9055 17.2407 43.8357 16.4649 43.3467 15.1252C41.8477 11.0189 37.943 7.89591 33.961 7.61816C31.0257 7.41341 21.9035 7.34916 18.3095 7.50791ZM20.936 15.5024C21.0217 15.6414 21.8632 17.9757 22.8062 20.6899C23.749 23.4044 24.8865 26.6189 25.3335 27.8334C26.2672 30.3694 26.1855 30.5697 24.315 30.3302C22.9267 30.1524 22.8647 30.0972 22.209 28.4519L21.68 27.1252H18.9407H16.2012L15.8525 28.3752C15.6605 29.0627 15.39 29.7659 15.251 29.9377C14.9602 30.2972 12.4125 30.3692 12.1992 30.0242C12.0962 29.8574 15.2712 20.1539 16.9307 15.5627C17.0697 15.1782 20.7017 15.1234 20.936 15.5024ZM35.0545 19.5627C37.083 20.5992 37.1845 20.9039 37.1845 25.9554V30.3752L36.5055 30.4534C36.132 30.4964 35.4497 30.3529 34.9892 30.1344C34.234 29.7759 34.0622 29.7744 33.2387 30.1187C32.085 30.6007 29.9977 30.6104 29.0842 30.1379C28.0557 29.6062 27.4645 28.5519 27.4645 27.2502C27.4645 25.2232 28.7522 24.1027 31.3722 23.8499C34.2085 23.5764 34.3095 23.5397 34.3095 22.7777C34.3095 21.6989 33.5372 21.1539 32.2525 21.3259C31.5627 21.4182 31.063 21.6514 30.8415 21.9844C30.573 22.3879 30.2332 22.5002 29.279 22.5002C28.2162 22.5002 28.0595 22.4342 28.0595 21.9877C28.0595 20.7529 28.9415 19.8509 30.8095 19.1752C31.7955 18.8187 33.9902 19.0189 35.0545 19.5627ZM18.5797 19.8217C17.9887 21.3759 17.303 24.0374 17.4372 24.2547C17.6232 24.5557 20.4782 24.5839 20.662 24.2867C20.8442 23.9917 19.3002 19.2502 19.022 19.2502C18.8982 19.2502 18.6992 19.5074 18.5797 19.8217ZM31.8735 25.7382C30.7377 26.0157 30.2715 26.4739 30.3592 27.2269C30.4687 28.1647 31.5067 28.6009 32.8 28.2527C33.908 27.9544 34.3805 27.3234 34.2625 26.3004C34.1985 25.7459 34.0505 25.6177 33.4345 25.5827C33.022 25.5592 32.3195 25.6292 31.8735 25.7382Z' fill='black'/%3E%3C/svg%3E"); }
.subject-icon--geography { --icon: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.2148 5.8309C29.7971 3.92051 39.1448 8.71165 42.8129 16.8831L42.9213 17.1283C44.0201 19.6459 44.4237 21.7169 44.4289 24.7601C44.4339 27.7849 44.0187 30.3225 43.058 32.6278C42.0972 34.9335 40.6001 36.984 38.4733 39.0479C35.9559 41.491 33.6975 42.8066 30.2358 43.8507C28.6304 44.335 27.7387 44.4295 25.0278 44.4295C23.1572 44.4295 21.7256 44.3189 20.3468 43.9972C18.9676 43.6753 17.6586 43.1462 16.0285 42.3289C9.89226 39.2524 5.89085 33.2436 5.45207 26.4408C4.9905 19.2782 8.58236 12.268 14.6589 8.47568C16.8456 7.11083 18.5501 6.42408 21.2148 5.8309ZM28.3205 9.03452C25.5929 8.54988 22.5969 8.43519 19.9735 9.46373C19.6796 9.57897 19.759 9.9711 20.0731 10.0036C20.5456 10.0524 21.0121 10.138 21.4618 10.3194C21.8207 10.4642 22.1354 10.6093 22.3219 10.847C23.739 12.6534 21.9087 12.1972 24.016 14.6148C24.5769 15.2584 24.8546 15.9769 24.7328 16.5907C24.6703 16.9059 24.5023 17.1812 24.2336 17.3729C23.969 17.5616 23.6322 17.6519 23.2541 17.6519C23.1134 17.652 23.0665 17.6827 23.0539 17.6932C23.0437 17.7017 23.0094 17.7348 22.9906 17.859C22.9494 18.1315 22.8203 18.3624 22.6032 18.5406C22.3977 18.7093 22.1297 18.8177 21.8254 18.8934C21.6938 18.9262 21.4645 19.0566 21.1674 19.2987C20.8829 19.5305 20.5744 19.8329 20.289 20.1556C20.0033 20.4786 19.7485 20.813 19.5678 21.1063C19.4773 21.253 19.4093 21.3833 19.3649 21.492C19.3184 21.6058 19.3081 21.6717 19.308 21.6974C19.308 22.4663 18.8572 23.0645 18.2941 23.3087C18.0118 23.4311 17.6898 23.4687 17.3813 23.3785C17.0672 23.2866 16.797 23.0707 16.6149 22.7423C16.5405 22.6081 16.4117 22.5204 16.224 22.4845C16.03 22.4473 15.7899 22.4711 15.5556 22.5558C15.3211 22.6405 15.1222 22.7753 14.9982 22.9268C14.8786 23.073 14.837 23.2207 14.8666 23.37C14.8636 23.3544 14.8824 23.4209 15.0273 23.5313C15.1548 23.6285 15.3319 23.722 15.526 23.7828C15.8047 23.8701 16.1173 24.0438 16.3966 24.2411C16.678 24.4397 16.9537 24.6819 17.1508 24.9251C17.4377 25.2789 17.5622 25.3902 17.7387 25.4535C17.9495 25.529 18.2648 25.5475 18.9843 25.5475C20.1123 25.5475 20.9969 25.6523 21.7841 25.942C22.576 26.2334 23.2412 26.7016 23.9474 27.3834C24.263 27.6881 24.5968 27.9633 24.8764 28.1598C25.0166 28.2583 25.137 28.3327 25.2304 28.3807C25.3141 28.4237 25.3473 28.4302 25.3434 28.4308L25.3276 28.4305C25.5779 28.431 25.8492 28.5074 26.0981 28.6095C26.3524 28.7138 26.6106 28.8563 26.8422 29.014C27.0726 29.1709 27.2886 29.3513 27.4516 29.5357C27.5983 29.7019 27.766 29.9418 27.766 30.2115C27.766 30.3084 27.7471 30.4495 27.7228 30.5975C27.6971 30.7546 27.6604 30.9478 27.6159 31.1632C27.5267 31.5945 27.4041 32.1242 27.2695 32.6495C27.0709 33.4243 26.9026 33.9656 26.6852 34.3919C26.4602 34.8331 26.1904 35.137 25.8171 35.4544C25.399 35.8102 24.811 36.6094 24.5397 37.2049C24.2571 37.8251 23.7612 38.6425 23.3857 39.1031L23.3124 39.1903C23.0901 39.4454 22.9673 39.6425 22.9006 39.8307C22.8351 40.0151 22.8136 40.219 22.8385 40.503C22.8756 40.9262 22.9166 40.9957 22.9479 41.0269C22.9637 41.0427 23.003 41.0726 23.1139 41.1107C23.227 41.1495 23.3829 41.1867 23.6117 41.2345C24.6142 41.4436 26.1064 41.3754 27.6967 41.0777C29.2798 40.7814 30.9158 40.266 32.1962 39.6143C32.937 39.2373 34.1046 38.452 35.1186 37.6886C35.6232 37.3086 36.0817 36.94 36.4228 36.6375C36.5938 36.4859 36.7305 36.3552 36.8273 36.2508C36.8731 36.2014 36.9061 36.1613 36.9289 36.1309C36.9274 36.1217 36.926 36.1109 36.9237 36.099C36.9084 36.0188 36.8797 35.9063 36.8376 35.7672C36.7537 35.4905 36.6247 35.1345 36.4711 34.7691C36.0449 33.7551 35.8786 32.8852 35.9096 31.8141C35.9204 31.437 35.902 31.0636 35.8647 30.7696C35.8459 30.6221 35.8231 30.5017 35.7997 30.4142C35.7789 30.3363 35.7647 30.3124 35.7682 30.3165C35.7043 30.2382 35.6478 30.1366 35.6015 30.0426C35.5486 29.9352 35.4938 29.8071 35.4401 29.6688C35.3325 29.3918 35.2231 29.0568 35.1364 28.7279L34.9028 27.8407L33.1469 27.7296C32.3 27.6759 31.7309 27.6188 31.2995 27.5033C30.8428 27.381 30.5444 27.195 30.2299 26.9149C28.7423 25.5898 28.3868 23.6474 29.2607 21.7904C29.6069 21.0545 30.148 20.4301 30.7877 19.9474C31.1284 19.6903 31.1132 19.0727 30.855 18.7329C30.7149 18.5486 30.6125 18.3367 30.5654 18.0995L30.5502 18.005C30.5048 17.6321 30.6689 17.2613 30.8893 16.9461C31.1165 16.6213 31.442 16.2999 31.8171 16.0079C32.5653 15.4253 33.5675 14.9167 34.5314 14.7249C35.2579 14.5805 35.9166 14.3805 36.3857 14.181C36.6078 14.0865 36.774 13.9974 36.8825 13.9222C36.8158 13.8463 36.7268 13.7511 36.6178 13.6407C36.3439 13.363 35.9621 13.0048 35.5397 12.6349C34.6784 11.8802 33.3854 11.0684 32.039 10.3976C30.7748 9.76766 29.4946 9.27746 28.5129 9.07187L28.3205 9.03452ZM8.97721 22.2752C8.9574 22.3388 8.9366 22.4322 8.91911 22.5648C8.89497 22.7478 8.87922 22.9837 8.87199 23.2804C8.85753 23.8741 8.87722 24.6817 8.91813 25.7415C9.02102 28.406 9.14072 29.1034 9.68156 30.4644C10.9152 33.5689 12.6746 35.9914 14.9894 37.7967C15.588 38.2635 16.5281 38.8742 17.3735 39.3697C17.7951 39.6169 18.1872 39.8318 18.4955 39.9837C18.5545 40.0128 18.61 40.0387 18.6611 40.0623C18.6663 39.957 18.672 39.8354 18.6772 39.6995C18.6971 39.1738 18.7146 38.4463 18.725 37.6446L18.7607 34.889L17.5597 33.7826C16.6992 32.9896 16.1225 32.261 15.8368 31.4683C15.5475 30.6652 15.573 29.8424 15.8244 28.8956C15.9247 28.5175 15.9819 28.2864 15.9892 28.1095C15.9951 27.9647 15.9667 27.884 15.8888 27.795C15.7886 27.6805 15.5961 27.5431 15.2206 27.3482C14.8518 27.1568 14.3492 26.9306 13.6625 26.6231C12.8467 26.258 12.0454 25.7535 11.4433 25.2608C11.1427 25.0149 10.8819 24.7641 10.6928 24.5269C10.5319 24.3252 10.375 24.0753 10.352 23.8155C10.3483 23.8083 10.3439 23.7986 10.3373 23.7872C10.3075 23.7351 10.2595 23.6618 10.1938 23.5714C10.0632 23.3917 9.87891 23.1663 9.67424 22.9413C9.34834 22.5829 9.12536 22.3714 8.97721 22.2752Z' fill='black'/%3E%3C/svg%3E"); }

.subject-tag--lg .subject-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Subtle photo zoom on card hover ---------- */
.hero-card__photo img,
.teacher-card__photo img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-card:hover .hero-card__photo img,
.teacher-card:hover .teacher-card__photo img {
  transform: scale(1.04);
}

/* ---------- Photo swap on hover (radial reveal from center) ---------- */
img.photo-swap__hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  transition: -webkit-mask-size 1.1s cubic-bezier(0.33, 1, 0.68, 1),
              mask-size 1.1s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-card:hover .photo-swap__hover,
.teacher-card:hover .photo-swap__hover {
  -webkit-mask-size: 340% 340%;
  mask-size: 340% 340%;
}

/* ---------- Social icons (mask, dark on hover) ---------- */
.social-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.social-icon--telegram  { --icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Telegram_black_logo 1'%3E%3Cpath id='Vector' d='M17.258 3.04541C17.258 3.04541 18.8769 2.41416 18.742 3.9472C18.697 4.57846 18.2923 6.78783 17.9775 9.17758L16.8983 16.2566C16.8983 16.2566 16.8084 17.2937 15.9989 17.474C15.1895 17.6544 13.9753 16.8428 13.7505 16.6624C13.5706 16.5272 10.3778 14.4981 9.25358 13.5062C8.93879 13.2356 8.57904 12.6945 9.29854 12.0633L14.0203 7.55438C14.5599 7.01329 15.0995 5.75079 12.8511 7.28383L6.55546 11.5673C6.55546 11.5673 5.83596 12.0182 4.48692 11.6124L1.56393 10.7106C1.56393 10.7106 0.484671 10.0343 2.3284 9.35792C6.82529 7.23871 12.3565 5.07442 17.258 3.04541Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E"); }
.social-icon--instagram { --icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Instagram_logo_2022 1'%3E%3Cpath id='Vector' d='M10.0011 1.66667C7.73789 1.66667 7.45386 1.67656 6.56496 1.71702C5.6778 1.75764 5.07224 1.8981 4.54237 2.10418C3.99427 2.31702 3.52933 2.60174 3.06614 3.06511C2.6026 3.52831 2.31787 3.99323 2.10432 4.54115C1.89772 5.07119 1.75709 5.67691 1.71717 6.56372C1.67741 7.45261 1.66699 7.73681 1.66699 10C1.66699 12.2632 1.67706 12.5464 1.71734 13.4352C1.75814 14.3224 1.89859 14.928 2.10449 15.4578C2.31752 16.0059 2.60224 16.4708 3.06561 16.934C3.52865 17.3976 3.99358 17.683 4.54132 17.8958C5.07153 18.1019 5.67728 18.2424 6.56426 18.283C7.45317 18.3234 7.73702 18.3333 10.0001 18.3333C12.2635 18.3333 12.5466 18.3234 13.4355 18.283C14.3227 18.2424 14.9289 18.1019 15.4591 17.8958C16.0071 17.683 16.4713 17.3976 16.9343 16.934C17.3979 16.4708 17.6826 16.0059 17.8962 15.458C18.101 14.928 18.2416 14.3222 18.2833 13.4354C18.3232 12.5465 18.3337 12.2632 18.3337 10C18.3337 7.7368 18.3232 7.45279 18.2833 6.56389C18.2416 5.67674 18.101 5.07119 17.8962 4.54133C17.6826 3.99323 17.3979 3.5283 16.9343 3.06511C16.4708 2.60156 16.0072 2.31684 15.4586 2.10417C14.9274 1.8981 14.3215 1.75764 13.4343 1.71702C12.5454 1.67656 12.2624 1.66667 9.9985 1.66667H10.0011ZM9.25353 3.16841C9.47541 3.16806 9.72298 3.16841 10.0011 3.16841C12.2261 3.16841 12.4898 3.1764 13.3685 3.21633C14.181 3.25348 14.622 3.38924 14.9157 3.5033C15.3046 3.65434 15.5819 3.8349 15.8734 4.12657C16.1651 4.41824 16.3456 4.69602 16.497 5.0849C16.6111 5.3783 16.747 5.81927 16.784 6.63178C16.8239 7.51025 16.8326 7.77414 16.8326 9.9981C16.8326 12.222 16.8239 12.486 16.784 13.3644C16.7468 14.1769 16.6111 14.6179 16.497 14.9113C16.346 15.3002 16.1651 15.5771 15.8734 15.8686C15.5817 16.1603 15.3048 16.3408 14.9157 16.4918C14.6223 16.6064 14.181 16.7418 13.3685 16.779C12.49 16.8189 12.2261 16.8276 10.0011 16.8276C7.77591 16.8276 7.51219 16.8189 6.63371 16.779C5.82121 16.7415 5.38023 16.6057 5.0863 16.4917C4.69741 16.3406 4.41962 16.1601 4.12796 15.8684C3.83629 15.5767 3.65573 15.2997 3.50434 14.9106C3.39027 14.6172 3.25433 14.1762 3.21736 13.3637C3.17743 12.4852 3.16944 12.2214 3.16944 9.99601C3.16944 7.77067 3.17743 7.50816 3.21736 6.62969C3.25451 5.81719 3.39027 5.37622 3.50434 5.08247C3.65538 4.69358 3.83629 4.4158 4.12796 4.12414C4.41962 3.83247 4.69741 3.65192 5.0863 3.50053C5.38005 3.38594 5.82121 3.25053 6.63371 3.2132C7.40247 3.17847 7.70039 3.16806 9.25353 3.16632L9.25353 3.16841ZM14.4494 4.55209C13.8973 4.55209 13.4494 4.99949 13.4494 5.55174C13.4494 6.10383 13.8973 6.55174 14.4494 6.55174C15.0015 6.55174 15.4494 6.10383 15.4494 5.55174C15.4494 4.99966 15.0015 4.55175 14.4494 4.55175L14.4494 4.55209ZM10.0011 5.72049C7.63771 5.72049 5.72155 7.63664 5.72155 10C5.72155 12.3634 7.63771 14.2786 10.0011 14.2786C12.3645 14.2786 14.28 12.3634 14.28 10C14.28 7.63664 12.3643 5.72049 10.0009 5.72049H10.0011ZM10.0011 7.22223C11.5351 7.22223 12.7789 8.46581 12.7789 10C12.7789 11.534 11.5351 12.7778 10.0011 12.7778C8.46689 12.7778 7.2233 11.534 7.2233 10C7.2233 8.46581 8.46689 7.22223 10.0011 7.22223Z' fill='%235E6A7D'/%3E%3Cpath id='Vector (Stroke)' d='M18.1665 10C18.1665 8.30317 18.161 7.72089 18.1413 7.16227L18.1169 6.57145C18.0759 5.70008 17.9377 5.11235 17.7401 4.60124V4.60042C17.5343 4.07277 17.262 3.62803 16.8164 3.18278C16.3703 2.73668 15.9264 2.46478 15.3979 2.25993C14.8855 2.06117 14.2975 1.92304 13.4261 1.88314C12.5413 1.84287 12.261 1.8335 9.99919 1.8335C7.73836 1.8335 7.45714 1.84287 6.57227 1.88314C5.70082 1.92304 5.11297 2.0604 4.60205 2.25911V2.25993C4.07412 2.46499 3.62912 2.7371 3.18359 3.18278C2.73761 3.62843 2.46493 4.07397 2.25911 4.60205C2.06 5.11299 1.92234 5.70068 1.88314 6.57145C1.84356 7.45646 1.8335 7.73801 1.8335 10C1.8335 12.2623 1.84304 12.5426 1.88314 13.4277C1.92322 14.2989 2.06066 14.8863 2.25911 15.3971C2.46438 15.9253 2.73698 16.3708 3.18278 16.8164H3.18359C3.62905 17.2623 4.07367 17.5359 4.60124 17.7409C5.1125 17.9396 5.70025 18.0769 6.57145 18.1169C7.45659 18.1571 7.73782 18.1665 10 18.1665C12.2623 18.1665 12.5426 18.1571 13.4277 18.1169C14.2991 18.0769 14.8875 17.9396 15.3988 17.7409V17.7401C15.9264 17.5351 16.3709 17.2624 16.8164 16.8164C17.2622 16.3709 17.5343 15.9258 17.7401 15.3979L17.8117 15.2018C17.9709 14.7349 18.081 14.1898 18.1169 13.4277L18.1413 12.8369C18.161 12.2786 18.1665 11.6966 18.1665 10ZM3.00212 9.99593C3.00212 7.77002 3.01084 7.50425 3.05094 6.62191C3.08895 5.79113 3.22832 5.33224 3.3488 5.02197C3.5081 4.61187 3.70154 4.31443 4.0096 4.00635C4.31775 3.69819 4.61533 3.50515 5.02523 3.34554C5.33578 3.2244 5.79522 3.08505 6.62598 3.04688L7.14355 3.0249C7.62652 3.00718 8.08708 3.00099 9.25293 2.99967H9.42057V3.00212C9.59808 3.00206 9.79097 3.00212 10.0008 3.00212C11.6699 3.00212 12.2373 3.00656 12.7889 3.02572L13.3757 3.05013L13.6702 3.06885C14.3189 3.12266 14.7041 3.24256 14.9756 3.34798C15.3858 3.50732 15.6832 3.70058 15.9912 4.00879C16.2993 4.31697 16.4924 4.61443 16.652 5.02441L16.744 5.28809C16.8359 5.58686 16.9215 6.00094 16.9499 6.62435C16.99 7.50654 16.9987 7.77377 16.9987 9.99837C16.9987 12.2225 16.99 12.4896 16.9499 13.3716V13.3724C16.9119 14.2029 16.7725 14.6616 16.652 14.9715C16.4927 15.3818 16.2992 15.6785 15.9912 15.9863C15.6831 16.2944 15.386 16.487 14.9756 16.6463C14.6653 16.7675 14.2063 16.9078 13.3757 16.9458C12.4934 16.9859 12.2265 16.9946 10.0008 16.9946C7.77502 16.9946 7.50815 16.9859 6.62598 16.9458C5.79542 16.9075 5.33647 16.7676 5.02604 16.6471H5.02523C4.61522 16.4879 4.31776 16.2945 4.0096 15.9863C3.70146 15.6782 3.50848 15.3811 3.3488 14.9707C3.22832 14.6608 3.08877 14.2021 3.05094 13.3716C3.01083 12.4892 3.00212 12.2219 3.00212 9.99593ZM14.113 10C14.113 7.72872 12.272 5.88715 10.0008 5.88704C7.72947 5.88704 5.88786 7.72868 5.88786 10C5.88786 12.2713 7.72942 14.1121 10.0008 14.1121C12.2722 14.1121 14.113 12.2713 14.113 10ZM12.6123 10C12.6123 8.55787 11.4428 7.38853 10.0008 7.38851C8.55865 7.38851 7.38932 8.55785 7.38932 10C7.38932 11.442 8.55866 12.6115 10.0008 12.6115C11.4428 12.6115 12.6123 11.442 12.6123 10ZM15.2824 5.55176C15.2824 5.12056 14.9545 4.76529 14.5345 4.72249L14.4491 4.71842C13.9889 4.71845 13.6157 5.09167 13.6157 5.55176C13.6157 6.01177 13.989 6.38507 14.4491 6.38509C14.9091 6.38509 15.2824 6.01179 15.2824 5.55176ZM12.9452 10C12.9452 11.6261 11.6269 12.9443 10.0008 12.9443C8.37455 12.9443 7.05648 11.6261 7.05648 10C7.05648 8.37375 8.37456 7.05566 10.0008 7.05566C11.6269 7.05568 12.9451 8.37376 12.9452 10ZM14.4466 10C14.4466 12.4554 12.4562 14.445 10.0008 14.445C7.54542 14.445 5.5542 12.4555 5.5542 10C5.5542 7.62127 7.42294 5.67892 9.77214 5.5599L10.0008 5.5542L10.2295 5.5599C12.5786 5.67904 14.4466 7.62137 14.4466 10ZM18.5002 10C18.5002 11.698 18.494 12.2835 18.4741 12.8467L18.4497 13.4432C18.4126 14.2329 18.2976 14.8091 18.1274 15.3084L18.0509 15.5184C17.8297 16.0861 17.5327 16.5709 17.0516 17.0516C16.5712 17.5325 16.0872 17.8303 15.5192 18.0509C14.9701 18.2644 14.3459 18.4083 13.4432 18.4497H13.4424C12.5501 18.4903 12.2637 18.5002 10 18.5002C7.73609 18.5002 7.44866 18.4903 6.55599 18.4497C5.6535 18.4083 5.02985 18.2643 4.48079 18.0509C3.91299 17.8303 3.42811 17.5326 2.94759 17.0516C2.46679 16.571 2.1698 16.0863 1.94906 15.5184C1.73583 14.9697 1.59184 14.3459 1.55029 13.4432V13.4424C1.50987 12.5501 1.49984 12.2638 1.49984 10C1.49984 7.73585 1.51037 7.44852 1.55029 6.55599C1.59094 5.65351 1.73507 5.02979 1.94906 4.48079C2.17027 3.9132 2.46672 3.42821 2.94759 2.94759L3.12826 2.77507C3.55087 2.39306 3.98461 2.14207 4.48161 1.94906C5.03039 1.73562 5.65403 1.59165 6.5568 1.55029C7.44916 1.50968 7.7365 1.50066 9.99837 1.50065V1.49984H10.0008V1.50065C12.2632 1.50066 12.5492 1.50968 13.4416 1.55029L13.7679 1.57064C14.4995 1.62874 15.0371 1.76239 15.5184 1.94906C16.0872 2.16955 16.5706 2.46662 17.0516 2.94759C17.5326 3.42829 17.8297 3.91292 18.0509 4.48079V4.48161C18.263 5.03011 18.4073 5.65334 18.4497 6.55599V6.5568C18.4898 7.44904 18.5002 7.73619 18.5002 10ZM3.33577 9.99593C3.33577 12.2206 3.34403 12.4815 3.38379 13.3561C3.41993 14.1502 3.55204 14.5734 3.65967 14.8503C3.80275 15.2179 3.97052 15.4752 4.24561 15.7503C4.52069 16.0254 4.77887 16.1935 5.14648 16.3363C5.42392 16.4439 5.84747 16.5755 6.64144 16.6121C7.51572 16.6519 7.77676 16.661 10.0008 16.661C12.2247 16.661 12.4859 16.6519 13.3602 16.6121C14.1544 16.5758 14.5786 16.4443 14.8551 16.3363L14.9878 16.2817C15.2872 16.1502 15.5144 15.9912 15.7552 15.7503C16.0303 15.4754 16.1985 15.2183 16.3411 14.8511C16.4488 14.5743 16.5807 14.151 16.617 13.3569C16.6568 12.4823 16.6659 12.2213 16.6659 9.99837C16.6659 7.77516 16.6568 7.51364 16.617 6.639C16.5809 5.84541 16.4487 5.42247 16.3411 5.14567C16.198 4.77806 16.0302 4.51982 15.7552 4.24479V4.24398C15.4804 3.969 15.2225 3.80156 14.8551 3.65885C14.5779 3.55121 14.1543 3.41929 13.3602 3.38298C12.4858 3.34324 12.2248 3.33496 10.0008 3.33496H9.0861V3.33333C7.67934 3.33565 7.37787 3.34561 6.64063 3.37891C6.04489 3.40631 5.65801 3.48827 5.38493 3.57259L5.14648 3.6556C4.77878 3.79874 4.52069 3.96726 4.24561 4.24235C3.97063 4.51735 3.80235 4.77518 3.65967 5.14242C3.55203 5.41962 3.4201 5.84325 3.38379 6.63737C3.34404 7.51186 3.33578 7.77138 3.33577 9.99593ZM15.616 5.55176C15.616 6.19588 15.0932 6.71875 14.4491 6.71875C13.8049 6.71873 13.2821 6.19587 13.2821 5.55176C13.2821 4.9655 13.7151 4.48132 14.2782 4.3986V4.38477H14.4491C15.0932 4.38477 15.616 4.90762 15.616 5.55176Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E"); }
.social-icon--tiktok    { --icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Instagram_logo_2022 1'%3E%3Cpath id='Subtract' d='M10.3241 12.7354C10.3241 12.8838 10.3243 13.0304 10.3181 13.1754C10.3181 13.1933 10.3161 13.2102 10.3151 13.2296C10.3151 13.2376 10.3148 13.2464 10.313 13.2547V13.2607C10.2829 13.6578 10.1556 14.0414 9.94238 14.3778C9.72918 14.714 9.43672 14.9927 9.09055 15.1894C8.72965 15.3947 8.32145 15.5023 7.90623 15.5018C6.57261 15.5018 5.49143 14.4149 5.49139 13.0719C5.49139 11.7289 6.57259 10.641 7.90623 10.641C8.15868 10.6407 8.40956 10.6813 8.64957 10.7595L8.65259 7.84442C7.92407 7.75038 7.18383 7.80795 6.47882 8.01418C5.77377 8.22044 5.11918 8.57092 4.55619 9.0428C4.06287 9.47142 3.6482 9.98337 3.33069 10.5546C3.20985 10.7629 2.75309 11.5999 2.69784 12.9584C2.66313 13.7295 2.8948 14.5287 3.00522 14.8589V14.8659C3.07468 15.0604 3.34418 15.7239 3.78272 16.2833C4.13621 16.7318 4.55395 17.1257 5.02228 17.4526V17.4455L5.02931 17.4526C6.40536 18.3876 7.93021 18.3333 7.95144 18.3325C8.21738 18.3218 9.10847 18.3328 10.1202 17.8534C11.2424 17.3218 11.8811 16.5294 11.8811 16.5294C12.2892 16.0563 12.6144 15.5174 12.8414 14.9353C13.1004 14.2544 13.1869 13.4375 13.1869 13.1111V7.2387C13.2228 7.26026 13.6842 7.56617 13.6842 7.56617C13.7046 7.57919 14.3666 7.99755 15.3898 8.27133C16.1356 8.46917 17.1407 8.51041 17.1407 8.51041V5.66864C16.7886 5.70683 16.0735 5.59559 15.3416 5.23068C15.2291 5.17254 15.1193 5.10891 15.0132 5.03982C14.7047 4.83588 14.4215 4.59607 14.1704 4.32461C13.5419 3.60554 13.3076 2.87554 13.2211 2.36481H13.2241C13.1519 1.94089 13.1824 1.66667 13.1869 1.66667H10.3241V12.7354Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E"); }
.social-icon--youtube   { --icon: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='18' height='12.6132' viewBox='0 0 18 12.6132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group 1707478763'%3E%3Cpath id='yt_icon_almostblack_digital 1 (Traced)' fill-rule='evenodd' clip-rule='evenodd' d='M7.38083 0.0110272C5.79597 0.0353239 3.9819 0.11744 3.09509 0.20503C2.00199 0.312992 1.59294 0.437442 1.13789 0.800497C0.773242 1.09143 0.499348 1.49978 0.370405 1.94476C0.0292469 3.12197 -0.102379 6.25542 0.0866952 8.69851C0.150316 9.52059 0.251429 10.2396 0.359347 10.6373C0.488421 11.1131 0.829709 11.5976 1.23968 11.887C1.56993 12.1202 1.88531 12.2403 2.37534 12.3196C4.4287 12.6517 11.2121 12.7173 14.5892 12.4377C15.8231 12.3356 16.2727 12.2267 16.7239 11.9207C17.0548 11.6963 17.3821 11.2914 17.5344 10.9177C18.1002 9.52988 18.1672 4.01138 17.6423 2.02923C17.488 1.44648 17.1744 0.994653 16.7102 0.686036C16.3147 0.423156 15.9596 0.320887 15.1126 0.225925C13.6312 0.0598387 10.2778 -0.0333569 7.38083 0.0110272ZM9.54064 4.95411C10.8756 5.72486 11.8192 6.28251 11.8192 6.30066C11.8192 6.33095 7.28935 8.97864 7.23361 8.98093C7.21195 8.98183 7.20634 8.43376 7.20634 6.31028C7.20634 4.1569 7.21175 3.63851 7.23419 3.63851C7.24953 3.63851 8.28742 4.23053 9.54064 4.95411Z' fill='%235E6A7D'/%3E%3C/g%3E%3C/svg%3E"); }
.social-icon--phone     { --icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2899 12.7136C15.0688 16.4916 16.1923 11.8542 18.5985 14.2584C20.9187 16.5776 22.2519 17.0424 19.3136 19.9807C18.9447 20.2764 16.6057 23.8368 8.38524 15.6183C0.164742 7.39977 3.72116 5.05784 4.01686 4.68994C6.96307 1.74374 7.41998 3.08481 9.74016 5.403C12.1454 7.80922 7.51097 8.93568 11.2899 12.7136Z' fill='black'/%3E%3C/svg%3E"); }

/* ---------- Subject tag (on photos) ---------- */
.subject-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.25rem);
  box-shadow: var(--shadow-tag), inset 0 0.125rem 0.25rem 0 #fff;
  font-size: 0.8125rem;
  letter-spacing: -0.0081rem;
  color: var(--color-dark);
  white-space: nowrap;
}

.subject-tag--lg {
  height: 2rem;
  padding: 0 0.875rem;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
}

/* ---------- Section basics ---------- */
.section {
  padding: var(--section-padding) 0;
}

/* an anchor jump must clear the pinned header (4.5rem) plus a little air,
   otherwise the section title lands underneath it */
:target,
.section[id] {
  scroll-margin-top: 5.5rem;
}

.section--white {
  background: var(--color-white);
}

.section--blue {
  background: var(--color-primary);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}

.section-head__title {
  font-size: 3.5rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1;
  letter-spacing: -0.07rem;
  color: var(--color-dark);
}

.section-head__subtitle {
  font-size: 1.0625rem;
  color: var(--color-text);
}

.section-head__subtitle a {
  text-decoration: underline;
}


.section-head__title + .section-head__subtitle {
  margin-top: 0.5rem;
}

.section-head__title--left,
.section-head__subtitle--left {
  text-align: left;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  height: 6rem;
  background: #fff;
}

.header .container {
  max-width: calc(var(--container-width) + 6rem);
  padding: 0 3rem;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 6rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 2.5rem;
  padding: 0 1rem;
  /* the dropdown trigger is a <button>, so the UA styles have to be undone */
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav__link:hover {
  background: rgba(11, 16, 32, 0.05);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Burger + mobile menu ---------- */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 0.0625rem solid var(--color-border);
  flex-shrink: 0;
}

.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--color-dark);
}

.burger span {
  position: relative;
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger span::before { top: -0.375rem; }
.burger span::after  { top: 0.375rem; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding: 0 1.25rem 2rem;
  background: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.menu-open {
  overflow: hidden;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.5rem;
  flex-shrink: 0;
}

.mobile-menu__close {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  flex-shrink: 0;
}

.mobile-menu__close span::before,
.mobile-menu__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--color-dark);
}

.mobile-menu__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-menu__close span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.mobile-menu__link {
  padding: 1rem 0;
  border-bottom: 0.0625rem solid var(--color-border-soft);
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0125rem;
  color: var(--color-dark);
}

/* subjects accordion inside the mobile menu */
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
}

.mobile-menu__toggle img {
  transform: rotate(90deg); /* chevron points down */
  transition: transform 0.25s ease;
}

.mobile-menu__group.is-open .mobile-menu__toggle img {
  transform: rotate(270deg);
}

/* the divider sits under the subjects list, not between it and the toggle */
.mobile-menu__group {
  border-bottom: 0.0625rem solid var(--color-border-soft);
}

.mobile-menu__group .mobile-menu__toggle {
  border-bottom: none;
}

.mobile-menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.mobile-menu__group.is-open .mobile-menu__sub {
  grid-template-rows: 1fr;
}

.mobile-menu__sub-inner {
  overflow: hidden;
  min-height: 0;
}

/* padding lives on the innermost wrapper, so nothing leaks when collapsed */
.mobile-menu__sub-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
}

/* colored subject cards — the web dropdown hover state, permanent on mobile */
.mobile-subject {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--dd-hover);
  font-size: 1.0625rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0106rem;
  color: var(--color-dark);
}

.mobile-subject .nav-dropdown__icon {
  width: 2.5rem;
  height: 2.5rem;
}

.mobile-subject .nav-dropdown__icon-fill {
  background: var(--dd-solid);
}

.mobile-subject .nav-dropdown__icon .subject-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-white);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.mobile-menu__actions .btn {
  width: 100%;
}

@media (max-width: 1100px) {
  .burger {
    display: flex;
  }
}

/* ---------- Subjects dropdown ---------- */
.header {
  position: relative;
  z-index: 100; /* the nav stays above the page-dim overlay */
}

/* fixed header after 31.25rem of scroll (class toggled by JS) */
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4.5rem;
  box-shadow: 0 0.125rem 0.75rem rgba(11, 16, 32, 0.06);
  animation: header-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.header--fixed .header__inner {
  height: 4.5rem;
}

.header--fixed .nav-dropdown {
  top: 4.5rem;
}

@keyframes header-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* smooth exit when scrolling back to the top */
.header--hiding {
  animation: header-slide-out 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes header-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

/* keep the page from jumping when the header leaves the flow */
.header--fixed + .main {
  margin-top: 6rem;
}

.nav__link--dropdown img {
  transform: rotate(90deg); /* chevron points down */
  transition: transform 0.25s ease;
}

.nav__item--dropdown:hover .nav__link--dropdown img,
.nav__item--dropdown:focus-within .nav__link--dropdown img {
  transform: rotate(270deg); /* rotates to point up while open */
}

/* page dim under the dropdown */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 16, 32, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
  z-index: 98;
}

.nav__item--dropdown:hover .nav-overlay,
.nav__item--dropdown:focus-within .nav-overlay {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown {
  position: fixed;
  top: 6rem;
  left: 50%;
  width: 49rem;
  max-width: calc(100vw - 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--color-white);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.75rem);
  box-shadow: 0 0.125rem 1.5rem 0 rgba(11, 16, 32, 0.04), 0 0.125rem 0.25rem 0 rgba(11, 16, 32, 0.04);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 100;
}

/* invisible bridge so the hover survives the gap between the link and the panel */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2rem;
  height: 2rem;
}

.nav__item--dropdown:hover .nav-dropdown,
.nav__item--dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__link {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 15rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.25rem;
  transition: background 0.35s ease;
}

.nav-dropdown__link--math      { --dd-solid: #0583f2; --dd-tint: rgba(5, 131, 242, 0.32);  --dd-hover: rgba(5, 131, 242, 0.16);  --dd-ink: #0960ad; }
.nav-dropdown__link--ukrainian { --dd-solid: #ab35de; --dd-tint: rgba(171, 53, 222, 0.32); --dd-hover: rgba(171, 53, 222, 0.16); --dd-ink: #761a9e; }
.nav-dropdown__link--biology   { --dd-solid: #fd8d00; --dd-tint: rgba(253, 141, 0, 0.32);  --dd-hover: rgba(253, 141, 0, 0.16);  --dd-ink: #a56412; }
.nav-dropdown__link--history   { --dd-solid: #f25a45; --dd-tint: rgba(242, 90, 69, 0.32);  --dd-hover: rgba(242, 90, 69, 0.16);  --dd-ink: #bc2915; }
.nav-dropdown__link--english   { --dd-solid: #fdda0f; --dd-tint: rgba(253, 218, 15, 0.32); --dd-hover: rgba(253, 218, 15, 0.16); --dd-ink: #917f12; }
.nav-dropdown__link--geography { --dd-solid: #14c249; --dd-tint: rgba(20, 194, 73, 0.32);  --dd-hover: rgba(20, 194, 73, 0.16);  --dd-ink: #109338; }

.nav-dropdown__link:hover {
  background: var(--dd-hover);
}

.nav-dropdown__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white); /* opaque base under the translucent fill */
  overflow: hidden;
}

/* the tint lives on its own layer, so rgba -> solid interpolates smoothly */
.nav-dropdown__icon-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dd-tint);
  transition: background 0.35s ease;
}

/* gradient border ring instead of the flat white one */
.nav-dropdown__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above the color fill layer */
  border-radius: 50%;
  padding: 0.0625rem;
  background: linear-gradient(141deg, #fff 0.05%, rgba(255, 255, 255, 0) 50%, #fff 99.95%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.nav-dropdown__link:hover .nav-dropdown__icon-fill {
  background: var(--dd-solid);
}

.nav-dropdown__icon .subject-icon {
  position: relative; /* above the fill layer */
  width: 2rem;
  height: 2rem;
  color: var(--dd-ink);
  transition: color 0.35s ease;
}

.nav-dropdown__link:hover .nav-dropdown__icon .subject-icon {
  color: var(--color-white);
}

.nav-dropdown__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.nav-dropdown__title {
  font-size: 1.0625rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.0106rem;
  color: var(--color-dark);
}

.nav-dropdown__desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 5.5rem 0 0;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hero-bg__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* shimmer sweep on the badge tiles */
.hero-bg__shine {
  transform-box: fill-box;
  transform: translate(-100%, -100%);
  animation: badge-shine 8s ease-in-out infinite;
}

@keyframes badge-shine {
  0% { transform: translate(-100%, -100%); }
  45%, 100% { transform: translate(100%, 100%); }
}

.hero-bg__badge--1 .hero-bg__shine { animation-delay: 0s; }
.hero-bg__badge--3 .hero-bg__shine { animation-delay: 0.6s; }
.hero-bg__badge--5 .hero-bg__shine { animation-delay: 1.2s; }
.hero-bg__badge--2 .hero-bg__shine { animation-delay: 1.8s; }
.hero-bg__badge--4 .hero-bg__shine { animation-delay: 2.4s; }
.hero-bg__badge--6 .hero-bg__shine { animation-delay: 3s; }

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__badge {
  position: relative;
  overflow: hidden;
  background: var(--color-primary-soft);
  box-shadow: none;
  color: var(--color-primary);
}

/* white highlight band sweeping left→right across the tinted fill */
.hero__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(86deg, rgba(255, 255, 255, 0) 30.49%, #fff 50.49%, rgba(255, 255, 255, 0) 70.49%);
  background-size: 300% 100%;
  animation: badge-fill-shimmer 3.5s linear infinite;
  pointer-events: none;
}

.hero__badge > * {
  position: relative;
  z-index: 1;
}

@keyframes badge-fill-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.hero__badge-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Graduated'%3E%3Cpath id='Vector' d='M8.58167 12.5191C9.023 12.7287 9.5005 12.8478 9.99083 12.8465C10.4725 12.8465 10.9533 12.7373 11.4008 12.519C12.0068 12.2235 12.6137 11.9296 13.2206 11.6357C14.3555 11.086 15.4905 10.5363 16.6199 9.97592C16.7312 9.92067 16.8617 10.0021 16.8609 10.1263L16.8475 12.3282C16.845 12.6732 17.1233 12.9549 17.4683 12.9574H17.4725C17.8158 12.9574 18.095 12.6799 18.0975 12.3366L18.125 7.82827C18.1253 7.78448 18.1211 7.74172 18.1128 7.70042C18.0659 6.88729 17.5922 6.16916 16.8517 5.80403L11.4 3.13903C10.505 2.69903 9.47917 2.69987 8.58583 3.1382L3.14167 5.8032C2.35917 6.18237 1.87417 6.95903 1.875 7.82903C1.875 8.699 2.36083 9.474 3.14 9.8515L5.04667 10.7857C5.06917 10.8007 5.09333 10.8148 5.11917 10.8265L8.58167 12.5191Z' fill='%230B1020'/%3E%3Cpath id='Vector_2' d='M11.8575 13.455C11.265 13.745 10.6292 13.8892 9.99171 13.8892C9.34212 13.8892 8.70437 13.744 8.125 13.4542L5.21735 12.034C5.10663 11.9799 4.97754 12.0605 4.97754 12.1837V14.4075C4.97754 15.305 5.50337 16.1033 6.31836 16.4433C7.53171 16.9408 8.74671 17.1908 9.95337 17.1908C11.1609 17.1908 12.3625 16.9408 13.5467 16.4416C14.3542 16.1025 14.8759 15.3108 14.8759 14.4241V12.2501C14.8759 12.127 14.7469 12.0464 14.6361 12.1003L11.8575 13.455Z' fill='%230B1020'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' style='display: block;' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Graduated'%3E%3Cpath id='Vector' d='M8.58167 12.5191C9.023 12.7287 9.5005 12.8478 9.99083 12.8465C10.4725 12.8465 10.9533 12.7373 11.4008 12.519C12.0068 12.2235 12.6137 11.9296 13.2206 11.6357C14.3555 11.086 15.4905 10.5363 16.6199 9.97592C16.7312 9.92067 16.8617 10.0021 16.8609 10.1263L16.8475 12.3282C16.845 12.6732 17.1233 12.9549 17.4683 12.9574H17.4725C17.8158 12.9574 18.095 12.6799 18.0975 12.3366L18.125 7.82827C18.1253 7.78448 18.1211 7.74172 18.1128 7.70042C18.0659 6.88729 17.5922 6.16916 16.8517 5.80403L11.4 3.13903C10.505 2.69903 9.47917 2.69987 8.58583 3.1382L3.14167 5.8032C2.35917 6.18237 1.87417 6.95903 1.875 7.82903C1.875 8.699 2.36083 9.474 3.14 9.8515L5.04667 10.7857C5.06917 10.8007 5.09333 10.8148 5.11917 10.8265L8.58167 12.5191Z' fill='%230B1020'/%3E%3Cpath id='Vector_2' d='M11.8575 13.455C11.265 13.745 10.6292 13.8892 9.99171 13.8892C9.34212 13.8892 8.70437 13.744 8.125 13.4542L5.21735 12.034C5.10663 11.9799 4.97754 12.0605 4.97754 12.1837V14.4075C4.97754 15.305 5.50337 16.1033 6.31836 16.4433C7.53171 16.9408 8.74671 17.1908 9.95337 17.1908C11.1609 17.1908 12.3625 16.9408 13.5467 16.4416C14.3542 16.1025 14.8759 15.3108 14.8759 14.4241V12.2501C14.8759 12.127 14.7469 12.0464 14.6361 12.1003L11.8575 13.455Z' fill='%230B1020'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.hero__title {
  margin-top: 1.5rem;
  font-size: 4.5rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1;
  letter-spacing: -0.09rem;
  color: var(--color-dark);
}

.hero__title-accent {
  color: var(--color-primary);
}

/* paired line breaks: one layout's break is the other's no-op */
.br-mobile {
  display: none;
}

.br-desktop {
  display: inline;
}

.hero__subtitle {
  margin-top: 1.5rem;
  color: var(--color-text);
}

.hero__btn {
  margin-top: 2.5rem;
}

/* teacher cards strip */
.hero__cards {
  margin-top: -5.625rem;
  height: 41.9375rem; /* lowest (center) card bottom + 5.5rem gap to the next section */
  position: relative;
  overflow: clip;
}

/* vertical guide line running down from under each card */
.hero-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0.0625rem;
  height: 56.25rem;
  background: var(--color-border);
  z-index: -1;
  pointer-events: none;
}

.hero-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 18.75rem;
  width: 18.75rem;
  height: fit-content;
  padding: 1rem 1rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* carousel track (cards are moved into it by JS) */
.hero__cards {
  user-select: none;
  touch-action: pan-y;
}

.hero__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
}

.hero-card {
  will-change: transform;
}

.hero-card img {
  -webkit-user-drag: none;
}

.hero-card__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 40 / 50;
  padding: 0.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.hero-card__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card__photo .subject-tag {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.25rem;
}

.hero-card__name {
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1;
  letter-spacing: -0.0125rem;
}

.hero-card__meta {
  font-size: 0.8125rem;
  letter-spacing: -0.0081rem;
  color: var(--color-muted);
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  padding: 5rem 0;
  background: var(--color-primary);
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.stats__value {
  font-size: 4.5rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1;
  letter-spacing: -0.09rem;
  color: var(--color-white);
}

.stats__label {
  font-size: 1.0625rem;
  letter-spacing: -0.0106rem;
  color: rgba(255, 255, 255, 0.88);
}

/* ============================================================
   WHY US
   ============================================================ */
.why .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.why__grid {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  width: 100%;
}

.why__chart-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.why__chart-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 2rem 0;
}

.why__chart-title {
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.0125rem;
}

.why__chart-text {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.why__chart-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
}

.why__chart-score {
  position: absolute;
  top: 2rem;
  left: 2rem;
  font-size: 5rem;
  font-weight: 600; /* kit: Bold */
  line-height: 0.8;
  letter-spacing: -0.1rem;
}

.why__chart-bars {
  position: absolute;
  inset: 2.5rem 2rem 2rem;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* The chart animates entirely in CSS. JS sets each bar's final height once, so
   the flex row lays out a single time; everything after that is transform and
   opacity, which the compositor handles without touching layout or paint.
   Two layers: the span carries the idle wave, its ::before carries the build. */
.why__chart-bars span {
  position: relative;
  flex: 1;
  border-radius: 0.5rem;
  /* the state the bars start in */
  background: linear-gradient(258.5deg, #0c01ff 0%, #cac9f8 47.9%, #f8f9fa 119.76%);
  box-shadow: inset 0 0.3125rem 0.25rem -0.25rem #0c01ff;
  transform-origin: bottom;
}

/* the second gradient state, cross-faded in over the build instead of being
   re-serialised per frame */
.why__chart-bars span::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(253.8deg, #0c01ff 0%, #cac9f8 37.96%, #f8f9fa 94.9%);
  opacity: 1;
}

/* before it plays, the row is laid out but invisible */
.why__chart-card--playing .why__chart-bars span {
  opacity: 0;
  transform: scaleY(0.06);
  animation: chart-grow var(--chart-build) cubic-bezier(0.22, 1.2, 0.36, 1)
             var(--build-delay, 0ms) forwards,
             chart-wave var(--chart-wave-period) ease-in-out
             calc(var(--chart-build) + 200ms + var(--wave-delay, 0ms)) infinite;
}

.why__chart-card--playing .why__chart-bars span::before {
  opacity: 0;
  animation: chart-tint calc(var(--chart-build) * 0.62) linear
             var(--build-delay, 0ms) forwards;
}

@keyframes chart-grow {
  from { opacity: 0; transform: scaleY(0.06); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scaleY(1); }
}

@keyframes chart-tint {
  to { opacity: 1; }
}

/* a crest ~4.5% tall passes across the row once per period; each bar gets its
   slice of the pass through --wave-delay */
@keyframes chart-wave {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(1.045); }
}

.why__chart-score-plus {
  display: inline-block;
}

.why__chart-card--playing .why__chart-score {
  animation: chart-score var(--chart-build) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.why__chart-card--playing .why__chart-score-plus {
  opacity: 0;
  animation: chart-plus 450ms ease-out var(--chart-build) forwards;
}

@keyframes chart-score {
  from { opacity: 0.4; transform: translateY(4rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes chart-plus {
  from { opacity: 0; transform: translateY(0.375rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .why__chart-card--playing .why__chart-bars span,
  .why__chart-card--playing .why__chart-bars span::before,
  .why__chart-card--playing .why__chart-score,
  .why__chart-card--playing .why__chart-score-plus {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.why__benefits-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 27.6875rem;
  flex-shrink: 0;
  padding: 2rem;
  border-radius: var(--radius-card);
  background: var(--color-primary);
  box-shadow: var(--shadow-card);
  color: var(--color-white);
}

.why__benefits-title {
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0125rem;
}

.why__benefits-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.why__benefit {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.why__benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.why__benefit-info h4 {
  font-size: 1.0625rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.0106rem;
}

.why__benefit-info p {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: rgba(255, 255, 255, 0.88);
}

.why__btn {
  margin-top: 3rem;
}

/* ============================================================
   TEACHERS
   ============================================================ */
.teachers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.teacher-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.teacher-card__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 40 / 50;
  padding: 0.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.teacher-card__photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card__photo .subject-tag {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.teacher-card__name {
  font-size: 1.75rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1;
  letter-spacing: -0.0175rem;
}

.teacher-card__socials {
  display: flex;
  gap: 0.25rem;
}

.teacher-card__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.teacher-card__socials a:hover {
  color: var(--color-dark);
}

.teacher-card__facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.teacher-card__facts li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.teacher-card__facts img {
  flex-shrink: 0;
}

.teacher-card__facts span {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teacher-card__btn {
  width: 100%;
  margin-top: auto;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, filter 0.2s ease;
}

.teacher-card__btn img {
  transition: filter 0.3s ease;
}

/* per-subject accent for the card button hover */
.teacher-card--math      { --subject-color: #0583f2; }
.teacher-card--ukrainian { --subject-color: #ab35de; }
.teacher-card--biology   { --subject-color: #fd8d00; }
.teacher-card--history   { --subject-color: #f25a45; }
.teacher-card--english   { --subject-color: #e3c00d; }
.teacher-card--geography { --subject-color: #14c249; }

.teacher-card:hover .teacher-card__btn.btn--outline {
  background: var(--subject-color, var(--color-sky));
  border-color: var(--subject-color, var(--color-sky));
  color: var(--color-white);
}

/* same interaction model as every button: hover darkens (+0.125rem lift from .btn),
   active presses down and darkens a step further */
.teacher-card:hover .teacher-card__btn.btn--outline:hover {
  filter: brightness(0.92);
}

.teacher-card:hover .teacher-card__btn.btn--outline:active {
  filter: brightness(0.84);
}

.teacher-card:hover .teacher-card__btn.btn--outline img {
  filter: brightness(0) invert(1);
}

/* ============================================================
   FEATURES
   ============================================================ */
.features__scroller {
  /* верхня половина бейджа виходить за межі картки, а overflow-x: auto робить
     і overflow-y: auto — тож без цього запасу її обрізало б */
  padding-top: 1rem;
  margin-top: -1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}

.features__scroller.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.features__scroller::-webkit-scrollbar {
  display: none;
}

.features__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  margin: 0 auto;
  padding: 0 max(1.25rem, calc((100vw - var(--container-width)) / 2));
  will-change: transform;
}

/* page-scroll driven horizontal scroll (enabled by JS on desktop) */
/* cards are centered inside the 100vh sticky viewport, which visually adds
   (50vh - 20rem) above and below the 40rem track; these margins cancel that
   out so the gap after the section head is 4rem (3rem head margin + 1rem)
   and the gap before the next section is 4rem too */
.features--jack .features__scroller {
  overflow: visible;
  /* у цьому режимі нічого не обрізається, тож запас під бейдж не потрібен —
     інакше він зсунув би вивірену вертикальну геометрію нижче */
  padding-top: 0;
  cursor: auto;
  margin-top: calc(21rem - 50vh);
  margin-bottom: calc(20rem - 50vh);
}

.features--jack .features__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 25rem;
  height: 42rem;
  flex-shrink: 0;
  padding: 2rem 2rem 0rem 2rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  /* visible, бо бейдж «Преміум» виступає за верхній край; перевірено, що
     всередині картки нічого не спиралось на обрізання */
  position: relative;
  overflow: visible;
  background-color: var(--color-bg);
}

.feature-card--purple { background-image: linear-gradient(180deg, rgba(171, 53, 222, 0) 36%, rgba(171, 53, 222, 0.16) 100%); }
.feature-card--orange { background-image: linear-gradient(180deg, rgba(253, 141, 0, 0) 36%, rgba(253, 141, 0, 0.16) 100%); }
.feature-card--green  { background-image: linear-gradient(180deg, rgba(20, 194, 73, 0) 36%, rgba(20, 194, 73, 0.16) 100%); }
.feature-card--red    { background-image: linear-gradient(180deg, rgba(242, 90, 69, 0) 36%, rgba(242, 90, 69, 0.16) 100%); }
.feature-card--blue   { background-image: linear-gradient(180deg, rgba(5, 131, 242, 0) 36%, rgba(5, 131, 242, 0.16) 100%); }

/* «Преміум»: плашка з короною, що наполовину виступає за верхній край картки */
.feature-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  /* -50% по X центрує, -50% по Y виводить рівно половину за край */
  transform: translate(-50%, -50%);

  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0.125rem 0.25rem rgba(11, 16, 32, 0.04);

  color: var(--color-white);
  font-size: 0.8125rem;
  letter-spacing: 0.0406rem;
  text-transform: uppercase;
  white-space: nowrap;

  overflow: hidden; /* обрізає блік по формі пігулки */
}

/* блік: світла смуга під кутом, що раз на 8 с проїжджає плашку наскрізь.
   Рухаємо transform, а не background-position — перший іде через композитор */
.feature-card__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: flag-glint 8s ease-in-out infinite;
  pointer-events: none;
}

/* проліт займає перші 28% циклу (~2.2 с), решта — пауза */
@keyframes flag-glint {
  0%   { transform: translateX(-100%); }
  28%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card__badge::before {
    animation: none;
  }
}

/* маска + currentColor: іконка успадковує колір тексту бейджа */
.feature-card__badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-plan-premium) center / contain no-repeat;
  mask: var(--icon-plan-premium) center / contain no-repeat;
}

.feature-card__head {
  min-height: 6.25rem;
  text-align: center;
}

.feature-card__head h3 {
  font-size: 1.5rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.015rem;
}

.feature-card__head p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text);
}

/* phone mockup image — height follows the file (screenshots differ in height);
   margin-top: auto keeps them pinned to the bottom of the card */
.feature-card__mockup {
  width: 20.875rem;
  height: auto;
  margin: 0 auto;
  margin-top: auto;
  flex-shrink: 0;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing {
  position: relative;
  background:
    url("../assets/img/pricing-bg.svg") top center / 120rem 36.6875rem no-repeat,
    var(--color-bg);
}

.pricing .container {
  position: relative;
}

.pricing__grid {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* price card */
.price-card {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* an inset ring instead of a border: a real border would sit inside the flex
   base size and make this card wider than the one beside it */
.price-card--featured {
  box-shadow: inset 0 0 0 0.0938rem var(--color-primary), var(--shadow-card);
}

.price-card__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  box-shadow: var(--shadow-card);
  color: var(--color-white);
  font-size: 0.8125rem;
  letter-spacing: 0.0406rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* a soft glint sweeps across once every 8s */
.price-card__flag::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: flag-glint 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes flag-glint {
  0% { transform: translateX(-100%); }
  28% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.price-card__name {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.75rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1;
  letter-spacing: -0.0175rem;
}

/* masked, so the glyph takes the heading's colour instead of the white it was
   drawn in */
.price-card__icon {
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.price-card__icon--premium  { --icon: var(--icon-plan-premium); }

.price-card__desc {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.price-card__old {
  font-size: 1.0625rem;
  color: var(--color-muted);
}

.price-card__current {
  margin-top: 0.5rem;
  font-size: 2.5rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1;
  letter-spacing: -0.0525rem;
}

.price-card__current span {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}

.price-card__divider {
  border: none;
  border-top: 0.0625rem dashed var(--color-border);
}

.price-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.price-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.price-card__list img {
  flex-shrink: 0;
}

.price-card__list span {
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
}

.price-card__btn {
  width: 100%;
}

/* discounts card */
.discount-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 2rem;
  border-radius: var(--radius-card);
  background: var(--color-bg-gray);
}

/* gradient border ring */
.discount-card::before {
  content: "";
  position: absolute;
  inset: -0.0938rem;
  border-radius: var(--radius-card);
  padding: 0.0938rem;
  background: linear-gradient(141deg, #e6e9ef 0.05%, rgba(230, 233, 239, 0) 50%, #e6e9ef 99.95%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.discount-card__title {
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0125rem;
}

.discount-card__desc {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.discount-card__table {
  width: 100%;
  border-collapse: collapse;
}

.discount-card__table th,
.discount-card__table td {
  height: 3rem;
  padding: 0.75rem;
  text-align: center;
  border-bottom: 0.0625rem solid #e4e9f1;
  white-space: nowrap;
}

.discount-card__table tr:last-child td {
  border-bottom: none;
}

.discount-card__table th {
  height: auto;
  padding: 0 0.75rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
}

.discount-card__table td:first-child {
  text-align: left;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.discount-card__val {
  font-size: 1.0625rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0106rem;
}

.discount-card__val--accent {
  color: var(--color-primary);
}

.discount-card__gift {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border-radius: 1rem;
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-card);
}

/* animated dashed border (dash 8 / gap 8, marching cyclically) */
.discount-card__gift-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.discount-card__gift-border rect {
  x: 0.0469rem;
  y: 0.0469rem;
  width: calc(100% - 0.0938rem);
  height: calc(100% - 0.0938rem);
  rx: 0.9375rem;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-dasharray: 8 8;
  animation: gift-dash 1.2s linear infinite;
}

@keyframes gift-dash {
  to {
    stroke-dashoffset: -16;
  }
}

.discount-card__gift p {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-primary);
}

.discount-card__gift img {
  flex-shrink: 0;
}

/* comparison table */
.compare {
  /* the gap above lives here, not on .pricing__grid, so hiding the table
     doesn't leave an orphaned 5.5rem of air */
  margin-top: 5.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.compare::before,
.compare::after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  width: 0;
  border-left: 0.0625rem dashed var(--color-border);
  pointer-events: none;
}

.compare::before { right: 12rem; }
.compare::after  { right: 22rem; }

.compare__header {
  display: flex;
  align-items: center;
  min-height: 3rem;
  border-bottom: 0.0625rem solid var(--color-border-soft);
}

.compare__caption {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.compare__plan {
  width: 10rem;
  flex-shrink: 0;
  font-size: 0.9375rem;
  font-weight: 600; /* kit: Bold */
  text-align: center;
}

.compare__group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.compare__group-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  margin: 0 -1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--color-white); /* opaque underlay beneath the tint */
  box-shadow: 0 0 0 0.25rem var(--color-white);
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0125rem;
}

.compare__group-title--blue   { background-image: linear-gradient(rgba(5, 131, 242, 0.16), rgba(5, 131, 242, 0.16));   color: #0960ad; }
.compare__group-title--purple { background-image: linear-gradient(rgba(171, 53, 222, 0.16), rgba(171, 53, 222, 0.16)); color: #761a9e; }
.compare__group-title--orange { background-image: linear-gradient(rgba(253, 141, 0, 0.16), rgba(253, 141, 0, 0.16));   color: #a56412; }
.compare__group-title--green  { background-image: linear-gradient(rgba(20, 194, 73, 0.16), rgba(20, 194, 73, 0.16));   color: #109338; }

.compare__row {
  display: flex;
  align-items: center;
  min-height: 3rem;
  border-bottom: 0.0625rem solid var(--color-border-soft);
}

.compare__group .compare__row:last-child {
  border-bottom: none;
}

.compare__row p {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.compare__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  flex-shrink: 0;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews {
  padding-top: 3rem;
}

.reviews .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The wall clips and fades; the packing lives on the inner element. A multicol
   box with a constrained height spills sideways into extra columns instead of
   being cut off, so the two jobs have to sit on different elements. */
/* capped and faded out at the bottom as a hint that there is more; both the cap
   and the fade are dropped for good on the first click of the button.
   The clip sits here and the columns on .reviews__grid inside — a multicol box
   with a constrained height spills sideways into extra columns instead. */
.reviews__wall {
  width: 100%;
  max-height: 45rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #fff 75%, rgba(255, 255, 255, 0) 100%);
  mask-image: linear-gradient(180deg, #fff 75%, rgba(255, 255, 255, 0) 100%);
}

.reviews__wall--revealed {
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* CSS columns rather than hand-filled column divs: the cards are a flat list,
   so a feed of any length drops straight in and the masonry-style packing is
   the browser's job */
.reviews__grid {
  column-count: 3;
  column-gap: 1rem;
}

/* `display: flex` below outranks the UA's `[hidden] { display: none }`, so the
   hidden state has to be restated for any component that sets its own display */
[hidden] {
  display: none !important;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  /* columns break between elements, so the gap has to be a margin */
  margin-bottom: 1rem;
  break-inside: avoid;
  padding: 2rem;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: 0 0.125rem 0.125rem rgba(11, 16, 32, 0.04);
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.review-card__name {
  font-size: 0.9375rem;
  font-weight: 600; /* kit: Bold */
}

.review-card__subject {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.review-card__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.0094rem;
  color: var(--color-text);
}

.reviews__more {
  margin-top: 3rem;
}

/* ============================================================
   APP PROMO
   ============================================================ */
.app__panel {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid var(--color-white);
  border-radius: 2.5rem;
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.app__content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
}

.app__title {
  font-size: 2.5rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.05rem;
}

.app__text {
  margin-top: -1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

.app__stores {
  display: flex;
  gap: 0.75rem;
}

.app__store {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 3.625rem;
  padding: 0.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.app__store:hover {
  transform: translateY(-0.125rem);
}

.app__media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  border-radius: var(--radius-card);
  background: var(--color-primary-soft);
  overflow: hidden;
}

/* the image is absolutely stretched, so the panel height follows the left content */
.app__media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 24.3125rem;
  flex: 1;
  position: sticky;
  top: 7.5rem;
}

.faq__head .section-head__title {
  margin-top: 0.5rem;
}

.faq__list {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: background 0.25s ease;
}

.faq-item__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.625rem 1.75rem;
  text-align: left;
}

.faq-item__question {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  color: var(--color-dark);
  transition: color 0.25s ease;
}

.faq-item__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 0.875rem;
  background: var(--color-primary);
  transition: background 0.25s ease, transform 0.25s ease;
}

.faq-item__icon::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: url("../assets/icons/plus-white.svg") center / contain no-repeat;
  transition: filter 0.25s ease;
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.33, 1, 0.68, 1),
              margin-top 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__answer p {
  padding: 0 4.25rem 0.75rem 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-white);
}

.faq-item__answer p:last-child {
  padding-bottom: 1.625rem;
}

/* open state */
.faq-item--open {
  background: var(--color-primary);
}

.faq-item--open .faq-item__question {
  color: var(--color-white);
}

.faq-item--open .faq-item__icon {
  background: var(--color-white);
  transform: rotate(45deg);
}

.faq-item--open .faq-item__icon::before {
  background-image: url("../assets/icons/plus-blue.svg");
}

.faq-item--open .faq-item__answer {
  grid-template-rows: 1fr;
  margin-top: -0.875rem; /* tightens the gap to the question, animated with the rows */
}

/* ============================================================
   BLOG
   ============================================================ */
.blog .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  width: 100%;
}

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1rem 1.25rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.blog-card__image img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover .blog-card__image img {
  transform: scale(1.04);
}

.blog-card__image {
  aspect-ratio: 160 / 90;
  border-radius: 1.25rem;
  overflow: hidden;
}

.blog-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0 0.25rem;
}

.blog-card__date {
  font-size: 0.8125rem;
  letter-spacing: -0.0081rem;
  color: var(--color-muted);
}

.blog-card__title {
  margin-top: -0.5rem;
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.0125rem;
}

.blog-card__title a {
  color: inherit;
}

/* one real link, stretched over the card: the whole tile is clickable without
   nesting a second anchor inside it */
.blog-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}


/* sits above the stretched link so it keeps its own hover and stays clickable */
.blog-card__link {
  position: relative;
  z-index: 1;
}

/* the ring is for keyboard navigation only — :focus-within also fires on a
   mouse click, :has(:focus-visible) does not */
.blog-card:has(.blog-card__title a:focus-visible) {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

/* drop the link's own ring only where the card can draw one instead */
@supports selector(:has(*)) {
  .blog-card__title a:focus-visible {
    outline: none;
  }
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600; /* kit: Bold */
  letter-spacing: -0.0094rem;
  color: var(--color-primary);
}

.blog-card__link:hover {
  text-decoration: underline;
}

.blog__btn {
  margin-top: 3rem;
}

/* ============================================================
   CTA
   ============================================================ */
.cta__panel {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid var(--color-white);
  border-radius: 2.5rem;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cta__content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 2rem;
}

.cta__title {
  font-size: 2.5rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.2;
  letter-spacing: -0.05rem;
}

.cta__text {
  margin-top: -1rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
}

.cta__media {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  border: 0.0625rem solid var(--color-bg);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  overflow: hidden;
}

/* event photo slider: autoplay + swipe */
/* the slider is absolutely stretched over the media panel, so the panel's
   height is dictated by the left content, not by the photos */
.cta__slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.cta__slider:active {
  cursor: grabbing;
}

.cta__slider-track {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.cta__slider-track img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 4rem 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer__col--about {
  gap: 1.5rem;
}

.footer__tagline {
  margin-top: -0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.0094rem;
  color: var(--color-text);
}

.footer__socials {
  display: flex;
  gap: 0.25rem;
}

.footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.footer__socials a:hover {
  color: var(--color-dark);
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: var(--color-text);
  transition: color 0.2s ease;
}

/* arrow slides in from the left on hover */
.footer__link::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-left: -1.5rem;
  margin-right: -0.25rem; /* icon sits 0.25rem closer to the text than the 0.75rem gap */
  opacity: 0;
  background: url("../assets/icons/arrow-link.svg") center / contain no-repeat;
  transition: margin-left 0.25s ease, opacity 0.25s ease;
}

.footer__link:hover {
  color: var(--color-dark);
}

.footer__link:hover::before {
  margin-left: 0;
  opacity: 1;
}

.footer__bottom {
  padding: 2rem 0;
  border-top: 0.0625rem dashed var(--color-border);
}

.footer__legal {
  font-size: 0.8125rem;
  letter-spacing: -0.0081rem;
  text-align: center;
  color: var(--color-muted);
}

/* ============================================================
   BLOG PAGE
   ============================================================ */
/* the article grid sits directly under the page head, so the section only
   needs the standard rhythm — the .main radius does the rest */
/* no page head here, so the section doesn't need the full section rhythm above
   the breadcrumbs */
.blog-page {
  padding-top: 4rem;
}

.blog-page__grid {
  margin-top: 1rem;
}

.breadcrumbs {
  margin-bottom: 2rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: var(--color-muted);
}

/* the separator belongs to the layout, not the content, so it is drawn rather
   than written into the markup */
.breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.1875rem;
  height: 0.1875rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--color-muted);
  vertical-align: middle;
}

.breadcrumbs a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-dark);
}

/* the most recent article leads the page: image and copy side by side, and it
   reuses the card's own tag and date styles so nothing drifts */
.blog-featured {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.blog-featured__image {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  align-self: stretch;
  border-radius: 1.25rem;
  overflow: hidden;
}

.blog-featured__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-featured:hover .blog-featured__image img {
  transform: scale(1.04);
}

.blog-featured__body {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.5rem 0.5rem;
}

.blog-featured__title {
  margin-top: -0.5rem;
  font-size: 2rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.15;
  letter-spacing: -0.02rem;
}


.blog-featured__title a {
  color: inherit;
}

.blog-featured__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}


.blog-featured .btn {
  position: relative;
  z-index: 1;
}

.blog-featured:has(.blog-featured__title a:focus-visible) {
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

@supports selector(:has(*)) {
  .blog-featured__title a:focus-visible {
    outline: none;
  }
}

.blog-featured__excerpt {
  /* three lines max, whatever the feed sends — the rest is clipped with … */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--color-text);
}

.blog-page__more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

@media (max-width: 1100px) {
  .blog-page {
    padding-top: 2.5rem;
  }

  .blog-featured__title {
    font-size: 1.75rem;
  }

  .blog-featured__body {
    padding: 1rem 1rem 1rem 0.25rem;
  }
}

@media (max-width: 720px) {
  .blog-page__grid {
    margin-top: 0.5rem;
  }

  .breadcrumbs {
    margin-bottom: 1.25rem;
  }

  /* stacked, the featured card is just a bigger version of a normal one */
  .blog-featured {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem 1.25rem;
  }

  .blog-featured__image {
    flex: none;
    aspect-ratio: 160 / 90;
  }

  .blog-featured__body {
    padding: 0 0.25rem;
  }

  .blog-featured__title {
    font-size: 1.5rem;
  }

}

/* The Standard card is the tallest, so the other two have room to travel: they
   stick under the pinned header while it scrolls past. Only where all three
   share one row — once the discount card wraps onto its own line there is
   nothing left to scroll against. */
@media (min-width: 1101px) {
  .price-card--featured,
  .discount-card {
    position: sticky;
    top: 5.5rem;
  }
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
/* a measure narrow enough to read comfortably; the related-articles section
   below keeps the normal container */
.container--narrow {
  max-width: calc(48rem + 4rem);
}

.article {
  padding-top: 4rem;
}

.article__head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.article__title {
  font-size: 2.75rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1.1;
  letter-spacing: -0.055rem;
  color: var(--color-dark);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  letter-spacing: -0.0094rem;
  color: var(--color-muted);
}

.article__meta span::before {
  content: "";
  display: inline-block;
  width: 0.1875rem;
  height: 0.1875rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--color-muted);
  vertical-align: middle;
}

.article__cover {
  aspect-ratio: 160 / 90;
  margin-bottom: 2.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-bg-gray);
}

.article__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the body is CMS HTML, so every element it can emit needs a style */
.article__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
}

.article__body > * + * {
  margin-top: 1.25rem;
}

.article__body h2 {
  margin-top: 2.5rem;
  font-size: 1.75rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1.2;
  letter-spacing: -0.0175rem;
  color: var(--color-dark);
}

.article__body h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  font-weight: 600; /* kit: Bold */
  line-height: 1.3;
  color: var(--color-dark);
}

.article__body h2 + *,
.article__body h3 + * {
  margin-top: 0.75rem;
}

.article__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.article__body strong {
  font-weight: 600; /* kit: Bold */
  color: var(--color-dark);
}

.article__body ul,
.article__body ol {
  padding-left: 1.25rem;
}

.article__body li + li {
  margin-top: 0.5rem;
}

.article__body ul li {
  list-style: disc;
}

.article__body ol li {
  list-style: decimal;
}

.article__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.article__body blockquote {
  padding: 1.5rem;
  border-radius: var(--radius-card);
  background: var(--color-primary-soft);
  color: var(--color-dark);
}

.article__body blockquote > * + * {
  margin-top: 0.75rem;
}

.article__body hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 0.0625rem solid var(--color-border);
}

.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.article__body th,
.article__body td {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid var(--color-border);
  text-align: left;
}

.article-related__head {
  margin-bottom: 2rem;
}

.article-related__title {
  font-size: 2rem;
  font-weight: 700; /* kit: Extra Bold */
  line-height: 1.1;
  letter-spacing: -0.02rem;
  color: var(--color-dark);
}

@media (max-width: 1100px) {
  .article {
    padding-top: 2.5rem;
  }

  .article__title {
    font-size: 2.25rem;
    letter-spacing: -0.045rem;
  }
}

@media (max-width: 720px) {
  .article__title {
    font-size: 1.75rem;
    letter-spacing: -0.0312rem;
  }

  .article__cover {
    margin-bottom: 2rem;
  }

  .article__body h2 {
    font-size: 1.5rem;
  }

  .article-related__title {
    font-size: 1.625rem;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .header .container {
    max-width: 100%;
    padding: 0 1.25rem;
  }

  .compare::before,
  .compare::after {
    display: none;
  }
}

@media (max-width: 1100px) {
  .section-head__title {
    font-size: 2.75rem;
  }

  .hero__title {
    font-size: 3.375rem;
    letter-spacing: -0.0625rem;
  }

  .stats__value {
    font-size: 3.5rem;
  }

  .nav {
    display: none;
  }

  .why__grid {
    flex-direction: column;
  }

  .why__benefits-card {
    width: 100%;
  }

  .why__chart-bars span:nth-child(n + 20) {
    display: none;
  }


  .teachers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing__grid {
    flex-wrap: wrap;
  }

  .price-card {
    min-width: 18.75rem;
  }

  /* own row below the two price cards — flex-basis must win over `flex: 1`,
     a plain `width` is ignored while flex-basis is 0 */
  .discount-card {
    flex: 0 0 100%;
    width: 100%;
  }

  /* with the discount card out of the row, both plans fill the row height so
     their CTAs line up */
  .price-card {
    align-self: stretch;
  }

  .price-card__btn {
    margin-top: auto;
  }

  .reviews__grid {
    column-count: 2;
  }

  .app__panel,
  .cta__panel {
    flex-direction: column;
  }

  .faq__grid {
    flex-direction: column;
  }

  .faq__head {
    position: static;
    max-width: none;
  }

  .faq__list {
    width: 100%;
  }

  .blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 720px) {
  :root {
    --section-padding: 4rem;
  }

  .section-head__title {
    font-size: 2rem;
    letter-spacing: -0.0375rem;
  }

  .hero-card::after {
    display: none;
  }

  .stats__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }

  .stats__value {
    font-size: 2.75rem;
  }

  /* minmax(0, …), not a bare 1fr: the latter is minmax(auto, 1fr) and lets a
     card's min-content width push the column past the container */
  .teachers__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews__grid {
    column-count: 1;
  }

  .compare__plan,
  .compare__cell {
    width: 4.5rem;
  }

  .app__title,
  .cta__title {
    font-size: 1.75rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* one column reads better centred */
  .footer__col {
    align-items: center;
    text-align: center;
  }

  /* same for the stacked FAQ intro — the --left modifiers are a desktop thing */
  .faq__head {
    align-items: center;
  }

  .faq__head .section-head__title--left,
  .faq__head .section-head__subtitle--left {
    text-align: center;
  }
}

/* ============================================================
   RESPONSIVE REFINEMENTS
   ============================================================ */
@media (max-width: 1100px) {
  /* stacked panels: absolute media needs its own height */
  .app__media,
  .cta__media {
    min-height: 22.5rem;
  }

  .why__chart-card {
    min-height: 26.25rem;
  }

}

@media (max-width: 1024px) {
  /* the decorative grid + badges lose their composition once the hero narrows */
  .hero__bg {
    display: none;
  }
}

@media (max-width: 720px) {
  .header__inner {
    height: 4.5rem;
  }

  .header {
    height: 4.5rem;
  }

  /* the vacated slot shrinks with the header, otherwise the page jumps 1.5rem
     the moment the header pins */
  .header--fixed + .main {
    margin-top: 4.5rem;
  }

  .hero {
    padding-top: 3rem;
  }

  .hero__title {
    font-size: 2.125rem;
    letter-spacing: -0.0437rem;
  }

  /* the card is narrow here, so the tall bars used to run up behind the
     three-line description; start the plot on the number's top line instead.
     10rem == head height + the 2rem the number is inset by. */
  .why__chart-bars {
    top: 10rem;
  }

  /* declared after the 1100px two-column rule on purpose: both queries match
     here, so this has to win on source order */
  .blog__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__subtitle br,
  .section-head__subtitle br,
  .why__chart-text br,
  .faq__head .section-head__title br,
  .feature-card__head p br {
    display: none;
  }

  .badge-pill {
    white-space: normal;
    text-align: left;
  }

  /* on a phone the media sits above the copy in a fixed 5:4 frame instead of
     an arbitrary min-height */
  .app__media,
  .cta__media {
    min-height: 0;
    aspect-ratio: 5 / 4;
  }

  .app__panel,
  .cta__panel {
    border-radius: 1.5rem;
    padding: 0.75rem;
  }

  .app__content,
  .cta__content {
    padding: 1.25rem;
    gap: 1.25rem;
    /* stacked on a phone, the copy reads better centred — as it is everywhere
       else on the mobile layout */
    align-items: center;
    text-align: center;
  }

  .app__text,
  .cta__text {
    margin-top: -0.25rem;
  }

  .feature-card {
    width: 20rem;
    min-width: 20rem;
    height: 35rem;
    /* the mockup is scaled to fit here, so it needs to sit flush with the
       bottom edge like it does at full size */
    padding: 1.5rem 1.5rem 0;
  }

  .feature-card__mockup {
    width: 100%;
    height: auto;
  }

  .compare {
    padding: 1.25rem;
  }

  .compare__group-title {
    margin: 0;
    font-size: 1.0625rem;
  }

  .price-card,
  .discount-card {
    padding: 1.5rem;
  }

  .discount-card {
    min-width: 100%;
  }

  .stats {
    padding: 3rem 0;
  }

  .footer__grid {
    padding: 2.5rem 0;
  }
}

@media (max-width: 480px) {
  /* 16px side gutter on the 390px canvas (root is 14px here) */
  .container,
  .header .container {
    padding: 0 1.1429rem;
  }

  /* same 16px all the way around the blue panels */
  .app,
  .cta {
    padding: 1.1429rem 0;
  }

  .discount-card {
    gap: 0.5rem;
  }

  /* covers both the landing section and the articles page — that grid carries
     .blog__grid too */
  .blog__grid {
    gap: 0.5rem;
  }

  /* a flat 1rem would scale down to 14px here — keep the plans 16px apart */
  .pricing__grid {
    gap: 1.1429rem;
  }

  .main {
    border-radius: 2.5rem;
  }

  /* half the distance between a section title and its subtitle
     (1rem flex gap + 0.5rem margin = 1.5rem → 0.75rem) */
  .section-head__title + .section-head__subtitle {
    margin-top: -0.25rem;
  }

  /* the track gap stays a true 16px here too — a flat 1rem would scale to 14 */
  .hero__track {
    gap: 1.1429rem;
  }

  /* hero blocks on the 390px canvas: 16 / 16 / 20 px */
  .hero__title,
  .hero__subtitle {
    margin-top: 1.1429rem;
  }

  .hero__btn {
    margin-top: 1.4286rem;
  }

  /* 32px inset so the subtitle wraps narrower than the section title */
  .section-head__subtitle {
    padding: 0 2.2857rem;
  }

  .hero__title {
    font-size: 2.5rem;
    letter-spacing: -0.05rem;
  }

  .br-mobile {
    display: inline;
  }

  .br-desktop {
    display: none;
  }

  .section-head__title {
    font-size: 1.625rem;
    letter-spacing: -0.025rem;
  }

  .stats__value {
    font-size: 2.25rem;
    letter-spacing: -0.0437rem;
  }

  .btn--lg {
    height: 3.25rem;
    padding: 0 1.375rem;
    font-size: 0.9375rem;
  }

  .compare__plan,
  .compare__cell {
    width: 3.5rem;
  }

  .compare__row p,
  .compare__caption {
    font-size: 0.8125rem;
  }

  .app__stores {
    justify-content: center;
    gap: 0.5rem;
  }

  .why__chart-score {
    font-size: 3.5rem !important;
  }
}

/* ============================================================
   CONTACT WIDGET (floating action button)
   ============================================================ */
.fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 150; /* over the page, under the mobile menu (200) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.fab__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  /* the white ring separates the blue circles from the blue sections they
     float over; over light backgrounds it simply doesn't read */
  box-shadow: 0 0 0 0.125rem var(--color-white), 0 0.25rem 1rem rgba(12, 1, 255, 0.12);
  color: var(--color-white);
  /* collapsed: tucked behind the toggle */
  opacity: 0;
  transform: translateY(1.25rem) scale(0.6);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.2s ease;
}

.fab__item .social-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fab--open .fab__item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* the stack unfurls from the button upwards, and folds back in reverse */
.fab__list li:nth-child(4) .fab__item { transition-delay: 0s; }
.fab__list li:nth-child(3) .fab__item { transition-delay: 0.04s; }
.fab__list li:nth-child(2) .fab__item { transition-delay: 0.08s; }
.fab__list li:nth-child(1) .fab__item { transition-delay: 0.12s; }

.fab--open .fab__list li:nth-child(1) .fab__item { transition-delay: 0s; }
.fab--open .fab__list li:nth-child(2) .fab__item { transition-delay: 0.04s; }
.fab--open .fab__list li:nth-child(3) .fab__item { transition-delay: 0.08s; }
.fab--open .fab__list li:nth-child(4) .fab__item { transition-delay: 0.12s; }

/* same interaction model as every button on the page */
.fab__item:hover { filter: brightness(0.92); }
.fab__item:active { filter: brightness(0.84); }

.fab__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  /* the ring is drawn as an inset shadow, so switching it on in the open state
     can't nudge the layout the way a border would */
  box-shadow: inset 0 0 0 0.0938rem transparent,
              0 0 0 0.125rem var(--color-white),
              0 0.25rem 1rem rgba(12, 1, 255, 0.12);
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.fab__toggle:hover { transform: translateY(-0.125rem); }
.fab__toggle:active { transform: translateY(0); }

/* closed: the telegram plane. open: it rotates out and a cross takes over */
.fab__toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-white);
  -webkit-mask: var(--icon-current, var(--icon-phone)) center / contain no-repeat;
  mask: var(--icon-current, var(--icon-phone)) center / contain no-repeat;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}

/* mid-swap the icon shrinks out and the next one grows in */
.fab__toggle-icon--swapping {
  opacity: 0;
  transform: scale(0.6);
}

.fab--open .fab__toggle {
  background: var(--color-white);
  box-shadow: inset 0 0 0 0.0938rem var(--color-primary),
              0 0 0 0.125rem var(--color-white),
              0 0.25rem 1rem rgba(12, 1, 255, 0.12);
}

.fab--open .fab__toggle-icon {
  background-color: var(--color-dark);
  -webkit-mask-image: var(--icon-close);
  mask-image: var(--icon-close);
  transform: rotate(90deg);
}

@media (max-width: 480px) {
  .fab {
    right: 1.1429rem;
    bottom: 1.1429rem;
    gap: 0.625rem;
  }

  .fab__list { gap: 0.625rem; }

  .fab__item,
  .fab__toggle {
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab__item,
  .fab__toggle,
  .fab__toggle-icon {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}

/* Once the two plans stack (below ~670px the flex row wraps), the "обирають
   найчастіше" flag hangs 1rem above the featured card and lands on top of the
   card above it. Give that card its own headroom so the flag clears by 16px. */
@media (max-width: 670px) {
  .price-card--featured {
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .price-card--featured {
    margin-top: 0.5714rem; /* 8px on the 390px canvas */
  }
}

/* ============================================================
   TOUCH DEVICES
   ============================================================ */
/* phones can't hover: JS marks the card at the centre of the screen `is-active`
   and it wears the hover state instead */
@media (hover: none) and (max-width: 720px) {
  .hero-card.is-active .photo-swap__hover,
  .teacher-card.is-active .photo-swap__hover {
    -webkit-mask-size: 340% 340%;
    mask-size: 340% 340%;
  }

  .teacher-card.is-active .teacher-card__btn.btn--outline {
    background: var(--subject-color, var(--color-sky));
    border-color: var(--subject-color, var(--color-sky));
    color: var(--color-white);
  }

  .teacher-card.is-active .teacher-card__btn.btn--outline img {
    filter: brightness(0) invert(1);
  }
}

/* ============================================================
   TEMPORARILY HIDDEN
   ============================================================ */
/* comparison table — delete this rule to bring it back */
.compare {
  display: none;
}