:root {
  /* Typography — Figma frame 1865:517 */
  --font-base: 'Montserrat', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-nav: 18px;
  --font-size-logo: 22px;
  --font-size-body: 16px;
  --font-size-section-title: 32px;
  --font-size-faq-question: 26px;
  --font-size-hero: 92px;

  /* Colors */
  --color-bg: #f6f6f5;
  --color-surface: #ffffff;
  --color-text: #2c2c2c;
  --color-text-muted: rgba(44, 44, 44, 0.5);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-accent: #2a9d8f;
  --color-dark: #545656;
  --color-muted: #d9d9d9;
  --color-showcase-bg: #bccecc;
  --color-footer-bg: #878787;
  --color-navbar-bg: rgba(255, 255, 255, 0.55);

  /* Layout — desktop frame 1728×4141 */
  --page-max-width: 1728px;
  --container-width: 1416px; /* контентная область внутри page padding */
  --container-padding: 80px; /* 156px только при min-width: 1728px — см. desktop.css */
  --page-padding-y: 42px;

  /* Section min-heights (content area from Figma) */
  --section-navbar-height: 78px;
  --section-hero-min-height: 429px;
  --section-showcase-min-height: 702px;
  --section-problems-min-height: 178px;
  --section-integrations-min-height: 744px;
  --section-faq-min-height: 549px;
  --section-footer-min-height: 304px;

  /* Vertical gaps between sections (y-offsets in Figma) */
  --gap-navbar-hero: 70px;
  --gap-hero-showcase: 224px;
  --gap-showcase-problems: 72px;
  --gap-problems-integrations: 215px;
  --gap-integrations-faq: 300px;
  --gap-faq-footer: 192px;

  /* Border radius */
  --radius-sm: 25px;
  --radius-md: 30px;
  --radius-lg: 45px;
  --radius-xl: 60px;
  --radius-pill: 80px;
  --radius-tab: 39px;
  --radius-hero-image: 48px;

  /* Hero */
  --hero-title-size: clamp(56px, 4vw + 24px, 92px);
  --hero-image-width: 382px;
  --hero-image-height: 461px;
  --hero-inner-gap: 66px;
  --hero-title-offset-top: 12px;
  --hero-tabs-offset-top: 82px;
  --hero-tab-height: 59px;
  --hero-tab-gap: 18px;
  --shadow-tab: 0 0 1.553px rgba(0, 0, 0, 0.1);

  /* Showcase — Figma 1894:53 */
  --showcase-slide-width: 1416px;
  --showcase-slide-height: 702px;
  --showcase-slide-aspect: calc(1416 / 702);
  --showcase-radius: var(--radius-lg);
  --showcase-nav-size: 72px;
  --showcase-nav-icon-size: 22px;
  --showcase-nav-overlap: 36px;
  --showcase-track-gap: 0px;

  /* Problems — Figma 1894:52 */
  --problems-column-gap: 24px;
  --problems-title-offset-inline: 42px; /* Figma: title x − card x */
  --problems-title-max-width: 351px;
  --problems-title-card-gap: 22px; /* визуальный зазор под 2 строки заголовка; Figma offset title→card = 100px */
  --problems-card-height: 78px;
  --problems-card-radius: var(--radius-sm);
  --problems-card-padding-inline-start: 52px;
  --problems-card-padding-inline-end: 32px;
  --problems-card-padding-block: 22px;
  --problems-avatar-size: 34px;
  --problems-meta-gap: 12px;
  --problems-action-size: 42px;
  --problems-action-icon-size: 15px;
  --problems-action-bg: #f6f7f9;
  --problems-body-padding-bottom: 29px;
  --problems-body-gap: 16px;

  /* Integrations — Figma 1894:51 */
  --integrations-stage-width: 2058;
  --integrations-stage-height: 744;
  --integrations-icon-ratio: calc(126 / var(--integrations-stage-width));
  --integrations-icon-radius: 29px;
  --integrations-count-ratio: calc(144 / var(--integrations-stage-width));
  --integrations-label-ratio: calc(58 / var(--integrations-stage-width));
  --integrations-headline-gap: 32px;
  --integrations-content-shift-x: 120px;
  --integrations-blob-size-ratio: calc(545.889 / var(--integrations-stage-width) * 0.72);
  --integrations-blob-blur: 64px;
  --integrations-blob-spread: 12%;
  --integrations-blob-1: rgba(160, 210, 200, 0.18);
  --integrations-blob-2: rgba(210, 220, 130, 0.16);
  --integrations-blob-3: rgba(170, 160, 230, 0.15);
  --integrations-blob-4: rgba(202, 65, 109, 0.17);

  /* FAQ — Figma 1894:55 */
  --faq-title-offset-inline: 52px;
  --faq-title-list-gap: 59px;
  --faq-item-gap: 12px;
  --faq-card-height: 82px;
  --faq-card-radius: var(--radius-md);
  --faq-padding-inline-start: 52px;
  --faq-padding-inline-end: 32px;
  --faq-action-size: 62px;
  --faq-action-icon-size: 22px;
  --faq-action-bg: #f6f7f9;
  --faq-body-gap: 16px;
  --faq-body-size: 22px;
  --faq-body-color: rgba(44, 44, 44, 0.8);
  --faq-body-padding-bottom: 29px;

  /* Footer — Figma 1894:56 */
  --footer-panel-min-height: 304px;
  --footer-panel-radius: var(--radius-md);
  --footer-padding-block-start: 32px;
  --footer-padding-block-end: 28px;
  --footer-padding-inline: 42px;
  --footer-col-title-gap: 24px;
  --footer-list-gap: 16px;
  --footer-legal-gap: 12px;
  --footer-demo-icon-size: 16px;
  --footer-brand-col-width: 336px; /* Figma: nav cols start at x=378, panel padding x=42 */
  --footer-cols-offset-top: 42px; /* Figma: col titles at y=74, panel padding-top y=32 */
  --footer-col-width-pages: 314px;
  --footer-col-width-demo: 381px;
  --footer-col-width-contacts: 301px;

  /* Privacy modal — Figma 1905:8786 */
  --privacy-modal-max-width: 1604px;
  --privacy-modal-radius: var(--radius-xl);
  --privacy-modal-padding: 132px;
  --privacy-modal-title-gap: 32px;
  --privacy-modal-title-size: var(--font-size-section-title);
  --privacy-modal-body-size: 22px;
  --privacy-modal-close-size: 59px;
  --privacy-modal-close-icon-size: 42px;
  --privacy-modal-close-top: 83px;
  --privacy-modal-close-inline: 54px;
  --privacy-modal-overlay-bg: rgba(44, 44, 44, 0.45);
  --privacy-modal-list-indent: 33px;

  /* Request modal — Figma 1900:8562 / 1900:8638 */
  --request-modal-width: 600px;
  --request-modal-radius-form: 35px;
  --request-modal-radius-success: 40px;
  --request-modal-padding: 42px;
  --request-modal-close-size: 45px;
  --request-modal-close-icon-size: 32px;
  --request-modal-close-top: 42px;
  --request-modal-close-inline: 36px;
  --request-modal-title-size: var(--font-size-section-title);
  --request-modal-subtitle-size: 22px;
  --request-modal-subtitle-color: rgba(44, 44, 44, 0.8);
  --request-modal-field-height: 72px;
  --request-modal-field-radius: var(--radius-sm);
  --request-modal-field-shadow: var(--shadow-lg);
  --request-modal-field-placeholder: rgba(44, 44, 44, 0.3);
  --request-modal-toggle-bg: #f9f9f9;
  --request-modal-toggle-border: #f4f4f4;
  --request-modal-toggle-pill-height: 64px;
  --request-modal-toggle-inset: 4px;
  --request-modal-form-gap: 22px;
  --request-modal-title-gap: 22px;
  --request-modal-toggle-gap: 32px;
  --request-modal-submit-gap: 42px;
  --request-modal-consent-size: 16px;
  --request-modal-success-icon-size: 134px;
  --request-modal-overlay-bg: rgba(44, 44, 44, 0.45);

  /* Effects */
  --transition-base: 0.3s ease;
  --transition-showcase: 0.45s ease;
  --shadow-sm: 0 0 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0 4px rgba(0, 0, 0, 0.15);
  --blur-navbar: 12.5px;
}