:root {

  /* Colors — Figma variables */

  --color-black: #1d1d1f;

  --color-white: #ffffff;

  --color-gray: #2f2f2f;

  --color-gray-2: #6b6b6b;

  --color-gray-3: #a1a1a1;

  --color-gray-4: #f5f5f7;

  --color-green: #005510;

  --color-green-1: #01992f;

  --color-green-2: #01ff4f;

  --color-green-tint: #01ff4f73;

  --color-red: #fa243c;

  --color-tint: #0a0a0a1a;

  --color-tint-2: #0a0a0a0d;

  --color-telegram: #239fda;



  /* Scrollbar */

  --scrollbar-size: 5px;

  --scrollbar-radius: 999px;

  --scrollbar-thumb: var(--color-tint);

  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-gray-3) 55%, transparent);



  --gradient-text: linear-gradient(90deg, var(--color-green-1) 0%, var(--color-green-2) 100%);

  --gradient-telegram: linear-gradient(213.86deg, #2aabee 0%, #229ed9 100%);



  /* Typography — Mobile/* Inter */

  --font-family: "Inter", sans-serif;



  --font-h1-size: 31px;

  --font-h1-weight: 700;

  --font-h1-line-height: 1.05;

  --font-h1-letter-spacing: -1px;



  --font-h2-size: 23.5px;

  --font-h2-weight: 700;

  --font-h2-line-height: 1.05;

  --font-h2-letter-spacing: -1px;



  --font-h3-size: 21px;

  --font-h3-weight: 600;

  --font-h3-line-height: 1;

  --font-h3-letter-spacing: -0.5px;



  --font-body-size: 16px;

  --font-body-weight: 600;

  --font-body-line-height: 1.3;

  --font-body-letter-spacing: -0.3px;



  --font-body-thin-size: 16px;

  --font-body-thin-weight: 500;

  --font-body-thin-line-height: 1.3;

  --font-body-thin-letter-spacing: -0.25px;



  --font-small-size: 13px;

  --font-small-weight: 500;

  --font-small-line-height: 1.2;

  --font-small-letter-spacing: -0.2px;



  --font-button-size: 18px;

  --font-button-weight: 500;

  --font-button-line-height: 1;

  --font-button-letter-spacing: -0.5px;



  --font-badge-size: 11.5px;

  --font-badge-weight: 700;

  --font-badge-line-height: 1;

  --font-badge-letter-spacing: 1px;



  --font-badge-desktop-size: 19px;

  --font-badge-desktop-weight: 600;

  --font-badge-desktop-line-height: 1.3;

  --font-badge-desktop-letter-spacing: -0.3px;



  /* Layout — mobile frame */

  --page-width: 390px;

  --content-width: 342px;

  --page-padding-x: 24px;

  --section-padding-block: 64px;

  --breakpoint-tablet: 768px;

  --breakpoint-desktop: 1280px;



  /* Content max-widths — Desktop fill + max-width */

  --content-narrow: 900px;

  --content-text: 600px;

  --content-wide: 1174px;

  --content-promo: 450px;



  /* Components */

  --radius-pill: 999px;

  --button-height: 48px;

  --button-padding-x: 20px;

  --logotype-width: 150px;

  --logotype-sm-width: 118.659px;

  --logotype-sm-height: 24px;

  --accordion-max-width: 343px;

  --accordion-icon-size: 18px;

  --accordion-toggle-size: 18px;

  --accordion-toggle-glyph-size: 12.9375px;

  --accordion-panel-duration: 0.3s;

  --accordion-panel-easing: cubic-bezier(0.4, 0, 0.2, 1);

  --accordion-panel-gap: 16px;

  --hero-actions-gap: 16px;

  --hero-pic-height: 240px;

  --hero-pic-container-width: 566px;

  --hero-pic-container-height: 240px;

  --promo-gap: 48px;

  --promo-text-gap: 24px;

  --promo-pic-height: 362px;

  --promo-pic-container-width: 627px;

  --promo-pic-container-height: 362px;

  --platforms-slider-speed: 28;

  --socials-min-height: 800px;

  --socials-logos-size: 1539px;

  --socials-content-gap: 24px;

  --socials-content-padding-end: 64px;

  --socials-content-offset: 423px;

  --socials-logos-scale-start: 5;

  --socials-logos-rotate-start: 8deg;

  --socials-logos-scale-end: 1;

  --socials-logos-button-offset: 200px;

  --socials-logos-parallax-max: 100px;

  --socials-logos-fade-range: 300px;

  --feature-card-width: 280px;

  --feature-card-height: 420px;

  --feature-card-padding: 24px;

  --feature-card-gap: 14px;

  --banners-gap: 32px;

  --banner-padding-inline: 24px;

  --cta-banner-height: 585px;

  --telegram-logo-size: 96px;

  --payment-logo-height: 24px;

  --payment-logo-mir-width: 50.667px;

  --payment-logo-visa-width: 42.667px;

  --payment-logo-mastercard-width: 36px;

  --payment-logo-crypto-width: 17.333px;

  --product-card-padding: 32px;

  --product-card-info-gap: 14px;

  --content-profile: 1000px;

  --profile-qr-size: 131px;

  --profile-close-button-size: 26px;

  --new-user-card-gap: 40px;

  --new-user-card-info-gap: 16px;

  --new-user-card-padding: 32px;

  --color-green-tint-25: rgba(1, 255, 79, 0.25);

  --color-red-tint-25: rgba(250, 36, 60, 0.25);

  --color-white-70: rgba(255, 255, 255, 0.7);

  --color-white-80: rgba(255, 255, 255, 0.8);

  --blur-menu: 5px;

  --color-overlay: rgba(10, 10, 10, 0.7);

  --blur-payment-modal: 17.5px;

  --price-modal-gap: 24px;

  --price-modal-padding: 32px;

  --price-modal-max-width: 350px;

  --price-modal-price-gap: 14px;

  --price-modal-close-size: 18px;

  --copy-transition-duration: 0.3s;

  --payment-modal-duration: 0.3s;

  --payment-modal-easing: cubic-bezier(0.4, 0, 0.2, 1);

  --payment-modal-enter-offset: 16px;

  --sign-in-modal-gap: 24px;

  --sign-in-modal-padding: 32px;

  --sign-in-modal-max-width: 350px;

  --sign-in-modal-close-size: 26px;

  --text-area-min-height: 120px;

  --support-modal-gap: 24px;

  --support-modal-padding: 32px;

  --support-modal-max-width: 350px;

  --support-modal-close-size: 26px;

  --payment-methods-gap: 32px;

  --payment-methods-max-width: 260px;

  --payment-method-button-gap: 40px;

  --payment-method-button-padding-block-start: 24px;

  --payment-method-button-padding-block-end: 20px;

  --payment-method-button-padding-inline: 24px;

  --scroll-reveal-duration: 0.65s;

  --scroll-reveal-easing: cubic-bezier(0.4, 0, 0.2, 1);

  --scroll-reveal-offset: 32px;

  --scroll-reveal-stagger: 90ms;

  --scroll-reveal-entry-delay: 120ms;

  --hero-enter-start-delay: 350ms;

}



/* Desktop/* Inter — Wolna Desktop (344:8452), canonical 1280px+ */

@media (min-width: 1280px) {

  :root {

    --font-h1-size: 50px;

    --font-h1-letter-spacing: -2px;



    --font-h2-size: 32px;



    --font-h3-size: 28px;

    --font-h3-line-height: 1.05;



    --font-body-size: 19px;



    --font-body-thin-size: 19px;



    --font-small-size: 15px;



    --font-button-size: 20px;



    --page-width: 1280px;

    --section-padding-block: 96px;



    --button-height: 50px;

    --button-padding-x: 20px;

    --desktop-menu-header-height: 90px;

    --desktop-menu-header-inner-max-width: 1300px;

    --desktop-menu-header-padding-x: 32px;

    --page-body-padding-top-with-header: 190px;

    --desktop-menu-list-width: 300px;

    --desktop-menu-list-padding-block: 24px;

    --desktop-menu-list-padding-inline: 30px;

    --desktop-menu-list-radius: 28px;

    --desktop-menu-list-offset: 12px;

    --desktop-menu-button-icon-width: 15px;

    --desktop-menu-logo-width: 171.875px;

    --desktop-menu-logo-duration: 0.35s;

    --desktop-menu-list-duration: 0.32s;

    --desktop-menu-list-easing: cubic-bezier(0.16, 1, 0.3, 1);

    --mobile-menu-list-width: 255px;

    --mobile-menu-list-padding-block: 20px;

    --mobile-menu-list-padding-inline: 24px;

    --mobile-menu-list-radius: 28px;

    --mobile-menu-list-offset: 12px;

    --desktop-logo-logotype-width: 140.625px;

    --logotype-width: 225px;

    --logotype-sm-width: 158.212px;

    --logotype-sm-height: 32px;

    --accordion-max-width: none;

    --accordion-icon-size: 24px;

    --accordion-toggle-size: 18px;

    --accordion-toggle-glyph-size: 18px;

    --hero-actions-gap: 24px;

    --hero-pic-height: 499px;

    --hero-pic-container-width: 1179.167px;

    --hero-pic-container-height: 500px;

    --promo-gap: 64px;

    --promo-text-gap: 32px;

    --promo-pic-height: 550px;

    --promo-pic-container-width: 952.624px;

    --promo-pic-container-height: 550px;

    --socials-min-height: 900px;

    --socials-logos-size: 2000px;

    --socials-content-gap: 32px;

    --socials-content-padding-end: 96px;

    --socials-content-offset: 0;

    --feature-card-width: 370px;

    --feature-card-height: 540px;

    --feature-card-padding: 32px;

    --feature-card-gap: 20px;

    --banners-gap: 48px;

    --banner-padding-inline: 160px;

    --cta-banner-height: 500px;

    --telegram-logo-size: 180px;

    --payment-logo-height: 32px;

    --payment-logo-mir-width: 67.556px;

    --payment-logo-visa-width: 56.889px;

    --payment-logo-mastercard-width: 48px;

    --product-card-padding: 40px;

    --product-card-info-gap: 20px;

    --products-telegram-logo-size: 80px;

    --profile-qr-size: 130px;

    --profile-close-button-size: 40px;

    --new-user-card-gap: 48px;

    --new-user-card-info-gap: 20px;

    --new-user-card-padding: 40px;

    --price-modal-gap: 32px;

    --price-modal-padding-block: 40px;

    --price-modal-padding-inline: 40px;

    --price-modal-width: 500px;

    --price-modal-max-width: 500px;

    --price-modal-price-gap: 20px;

    --price-modal-close-size: 26px;

    --sign-in-modal-gap: 32px;

    --sign-in-modal-padding-block: 40px;

    --sign-in-modal-padding-inline: 40px;

    --sign-in-modal-width: 500px;

    --sign-in-modal-max-width: 500px;

    --text-area-min-height: 140px;

    --support-modal-gap: 32px;

    --support-modal-padding-block: 40px;

    --support-modal-padding-inline: 40px;

    --support-modal-width: 500px;

    --support-modal-max-width: 500px;

    --payment-methods-gap: 40px;

    --payment-methods-max-width: 560px;

    --payment-method-button-gap: 48px;

    --payment-logo-crypto-width: 23.111px;

  }

}