/* Design tokens — values from Figma variables (see PLAN.md → «Дизайн-токены») */
:root {
  /* ---------- Colors ---------- */
  --color-green-7: #101410;
  --color-green-7-72: #101410b8;
  --color-green-7-66: #101410a8;
  --color-green-7-28: #10141047;
  --color-green-7-0: #10141000;
  --color-grey-10: #1c1b19;
  --color-grey-24: #3a423a;
  --color-grey-92: #ebeee9;
  --color-chartreuse-85: #d7dcd4;
  --color-chartreuse-52: #79b354;
  --color-chartreuse-33: #4b7830;
  --color-chartreuse-30: #456e2c;
  --color-yellow-63: #cdf54a;
  --color-white: #ffffff;
  --color-white-88: #ffffffe0;
  --color-white-78: #ffffffc7;
  --color-white-24: #ffffff3d;
  --color-white-14: #ffffff24;
  --color-white-12: #ffffff1f;
  --color-white-5: #ffffff0d;
  --color-black: #000000;
  --color-black-70: #000000b2;
  --color-black-0: #00000000;

  /* Semantic aliases */
  --color-bg: var(--color-white);
  --color-bg-dark: var(--color-green-7);
  --color-bg-muted: var(--color-grey-92);
  --color-text: var(--color-green-7);
  --color-text-muted: var(--color-grey-24);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: var(--color-white-78);
  --color-border: var(--color-chartreuse-85);
  --color-border-inverse: var(--color-white-12);
  --color-primary: var(--color-chartreuse-52);
  --color-accent: var(--color-chartreuse-33);
  --color-accent-bright: var(--color-yellow-63);

  /* ---------- Typography ---------- */
  --font-primary: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-secondary: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-h1: 60px;
  --lh-h1: 63.6px;
  --ls-h1: -1.2px;

  --fs-h2: 40px;
  --lh-h2: 44.8px;
  --ls-h2: -0.6px;

  --fs-h3: 22px;
  --lh-h3: 26.4px;
  --ls-h3: -0.22px;

  --fs-h3-alt: 19px;
  --lh-h3-alt: 30.4px;
  --ls-h3-alt: -0.19px;

  --fs-lead: 17px;
  --lh-lead: 27.2px;

  --fs-body: 16px;
  --lh-body: 25.6px;

  --fs-link: 14.5px;
  --lh-link: 23.2px;

  --fs-button: 16px;
  --lh-button: 16px;

  --fs-small: 13.5px;
  --lh-small: 21.6px;

  --fs-label: 12.5px;
  --lh-label: 20px;

  --fs-overline: 12px;
  --lh-overline: 19.2px;
  --ls-overline: 0.72px;

  --lh-27-84: 27.84px;
  --lh-23-49: 23.49px;

  /* Derived from layer measurements (SVG export), not Figma variables */
  --fs-h3-lg: 24px;
  --lh-h3-lg: 30px;
  --ls-h3-lg: -0.4px;

  --fs-card-title: 26px;
  --lh-card-title: 33px;

  --fs-index: 22px; /* «01 Proqram təminatı» — Outfit 500 */
  --lh-index: 26.4px;

  /* ---------- Spacing ---------- */
  --space-xs: 8px;
  --space-10: 10px;
  --space-11-6: 11.6px;
  --space-13-4: 13.4px;
  --space-13-5: 13.5px;
  --space-17-3: 17.3px;
  --space-22: 22px;
  --space-s-plus: 24px;
  --space-m: 32px;
  --space-48: 47.99px;

  /* Derived spacing (measured in the SVG export) */
  --space-4: 4px;
  --space-6: 6px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-28: 28px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-64: 64px;
  --space-68: 68px;
  --space-80: 80px;
  --space-90: 90px;
  --space-100: 100px;
  --space-140: 140px;

  /* ---------- Layout ---------- */
  /* Sections stretch edge to edge on screens wider than the 1440px design */
  --container-width: none;
  --page-gutter: 48px;
  --width-780: 780px;
  --width-483: 483.73px;
  --width-320: 320px;
  --width-470: 470px;
  --width-600: 600px;
  --width-820: 820px;
  --width-840: 840px;
  --steps-aside-width: 551px;
  --feature-col-height: 340px;
  --related-card-height: 285px;
  --contact-form-width: 768px;
  --vacancies-aside-width: 640px;
  --vacancy-row-height: 125px;
  --contact-map-height: 511.3px;
  --related-card-width: 486.67px; /* single card keeps its 1/3 width (Figma) */
  --services-head-height: 220px;
  --services-more-height: 126px;
  --service-card-height: 524px;
  --service-card-media: 320px;
  --service-card-label: 46.4px; /* label row: 10 + 26.4 + 10 */
  --service-card-media-open: calc(var(--service-card-height) - var(--service-card-label)); /* hover: photo fills the card */
  --service-card-img-w: 753.25px; /* Figma image frame inside the 360×320 card */
  --service-card-img-h: 502.23px;
  --service-card-ai-w: 644px; /* AI photo is cropped off-centre in Figma */
  --service-card-ai-h: 843px;
  --service-card-ai-x: -87.7px;
  --service-card-ai-y: -190.5px;
  --partner-strip-height: 100px;
  --partner-cell-pad: 18.9px; /* cell = logo + 2 × 18.9 (measured on the partners strip) */
  --partner-loop-duration: 40s; /* one full pass of 13 logos ≈ 66px/s */
  --project-media-height: 200px;
  --project-logo-height: 60px;
  --slider-bar-width: 39.33px;
  --slider-bar-height: 6px;
  --stats-height: 200px;
  --stats-separator: 92.6px;
  --form-media-height: 681.3px;
  --about-text-width: 740px;
  --about-media-height: 548px;
  --about-quote-height: 260px;
  --tech-card-image-w: 200px;
  --tech-card-text-width: 390px;
  --tech-card-image-h: 300px;
  --tech-bi-zoom: 1.2285; /* Figma crop of the BI screenshot: zoomed, bottom-aligned */
  --tech-world-image-h: 100px;
  --tech-world-ai-position: 50% 15.6%;
  --tech-world-sat-zoom: 2; /* satellite photo is shown 2× closer than «cover» */
  --tech-world-intro-width: 500px;
  --tech-world-col-width: 261.33px;
  --tech-projects-media-h: 163.6px;
  --tech-projects-photo-h: 133.6px;
  --tech-projects-monitor-w: 171.7px;
  --tech-projects-phone-h: 128px;
  --header-height: 106px;
  --hero-height: 620px;
  --hero-service-height: 720px;
  --hero-home-height: 100svh; /* hero headline fills the first screen, stats follow below */
  --logo-width: 151px;
  --logo-height: 50px;
  --logo-footer-width: 200px;
  --logo-footer-height: 66px;
  --btn-height: 52px;
  --btn-pad-y: 18px;
  --btn-pad-x: 29px;
  --btn-icon: 60px;
  --lang-height: 40px;
  --chip-height: 32px;
  --social-size: 40px;
  --icon-16: 16px;
  --icon-18: 18px;
  --icon-20: 20px;
  --nav-underline: 4px;
  --dropdown-width: 260px;
  --glow-size: 1293px; /* 753px disc + 3σ of the 90px Figma blur on each side */
  /* Pre-computed Gaussian falloff of the blurred disc: same look as filter: blur(), no repaint cost */
  --glow-primary: radial-gradient(closest-side, rgb(121 179 84 / 1.000) 0.0%, rgb(121 179 84 / 0.977) 30.4%, rgb(121 179 84 / 0.933) 37.4%, rgb(121 179 84 / 0.841) 44.3%, rgb(121 179 84 / 0.691) 51.3%, rgb(121 179 84 / 0.500) 58.2%, rgb(121 179 84 / 0.309) 65.2%, rgb(121 179 84 / 0.159) 72.2%, rgb(121 179 84 / 0.067) 79.1%, rgb(121 179 84 / 0.023) 86.1%, rgb(121 179 84 / 0.001) 100.0%);
  --glow-accent: radial-gradient(closest-side, rgb(75 120 48 / 1.000) 0.0%, rgb(75 120 48 / 0.977) 30.4%, rgb(75 120 48 / 0.933) 37.4%, rgb(75 120 48 / 0.841) 44.3%, rgb(75 120 48 / 0.691) 51.3%, rgb(75 120 48 / 0.500) 58.2%, rgb(75 120 48 / 0.309) 65.2%, rgb(75 120 48 / 0.159) 72.2%, rgb(75 120 48 / 0.067) 79.1%, rgb(75 120 48 / 0.023) 86.1%, rgb(75 120 48 / 0.001) 100.0%);
  --backdrop-blur: 5px;
  --stats-blur-max: 16px; /* bottom edge of the progressive blur under the home stats */
  --backdrop-blur-strong: 16px; /* measured on the PNG: frosted panel under the about quote */

  /* Glow centres (Figma «Ellipse 1» cx/cy relative to their section) */
  --glow-why-1-x: calc(100% - 57.7px);
  --glow-why-1-y: -332.2px;
  --glow-why-2-x: 4.9px;
  --glow-why-2-y: 937.6px;
  --glow-tech-2-y: 717.6px;

  /* ---------- Radii ---------- */
  --radius-pill: 999px;
  --radius-20: 20px;
  --radius-10: 10px; /* measured: tech icon tile */
  --radius-5: 5px; /* measured: tech images */

  /* ---------- Strokes ---------- */
  --stroke-075: 0.75px;
  --stroke-1: 1px;
  --stroke-15: 1.5px;

  /* ---------- Opacity ---------- */
  --opacity-70: 0.7;
  --opacity-100: 1;

  /* ---------- Gradients ---------- */
  --gradient-header: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0) 100%);
  --gradient-hero: linear-gradient(0deg, var(--color-green-7-72) 0%, var(--color-green-7-28) 46%, var(--color-green-7-0) 100%);
  --gradient-hero-page-side: linear-gradient(90deg, var(--color-green-7-66) 0%, var(--color-green-7-0) 62%);
  --gradient-hero-service: linear-gradient(0deg, rgb(16 20 16 / 0.88) 0%, rgb(16 20 16 / 0.55) 46%, rgb(16 20 16 / 0.35) 100%);
  --overlay-cta: rgb(0 0 0 / 0.6);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-hover: 250ms ease;
  --hover-nudge: 3px; /* arrow shift on hover */
  --transition-expand: 500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Scroll reveal (by request, not in Figma) */
  --reveal-duration: 750ms;
  --reveal-wipe-duration: 1000ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 32px;
  --reveal-shift: 40px;
  --reveal-scale: 0.94;
}

/* ---------- Responsive tokens (no tablet/mobile frames in Figma — see PLAN.md) ---------- */
@media (max-width: 1024px) {
  :root {
    --page-gutter: 32px;
    --fs-h1: 44px;
    --lh-h1: 48px;
    --ls-h1: -0.88px;
    --fs-h2: 32px;
    --lh-h2: 38px;
    --ls-h2: -0.48px;
    --space-100: 72px;
    --space-80: 64px;
    --space-60: 48px;
    --hero-height: 520px;
    --hero-service-height: 600px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 24px;
    --fs-h1: 36px;
    --lh-h1: 40px;
    --ls-h1: -0.72px;
    --fs-h2: 28px;
    --lh-h2: 34px;
    --fs-lead: 16px;
    --lh-lead: 25.6px;
    --fs-card-title: 22px;
    --lh-card-title: 28px;
    --space-100: 56px;
    --space-80: 48px;
    --space-60: 40px;
    --header-height: 80px;
    --hero-height: 480px;
    --hero-service-height: 560px;
    --hero-home-height: 0px;
  }
}

@media (max-width: 480px) {
  :root {
    --page-gutter: 16px;
    --fs-h1: 32px;
    --lh-h1: 36px;
    --fs-h2: 26px;
    --lh-h2: 32px;
  }
}