@layer base, components, responsive;
@layer base {
  :root { color-scheme: dark; --bg: #161a18; --panel: #202522; --text: #f3f4ef; --muted: #a6b0a8; --accent: #c6f567; --line: #3b423d; --paper: #f1f2ec; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
  body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button, a { -webkit-tap-highlight-color: transparent; }
  a:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
  ::selection { background: var(--accent); color: var(--bg); }
  h1,h2,h3,p { margin: 0; }
  h1,h2,h3 { font-weight: 500; }
  .wrap { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
  .skip-link { position: absolute; top: -100px; left: 16px; padding: 16px; z-index: 5; background: var(--accent); color: var(--bg); }
  .skip-link:focus { top: 12px; }
}
@layer components {
  .header { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
  .logo { font-size: 34px; font-weight: 800; letter-spacing: -2px; display: inline-flex; align-items: start; }
  .logo span { font-weight: 400; }
  .logo i { color: var(--accent); font-size: 13px; letter-spacing: 0; font-style: normal; margin: 5px 0 0 5px; }
  .header-actions { display: flex; align-items: center; gap: 25px; }
  .language-switch { display: flex; border: 1px solid var(--line); border-radius: 4px; padding: 3px; gap: 3px; }
  .language-switch a { display: flex; align-items: center; justify-content: center; min-height: 38px; min-width: 44px; padding: 7px 10px; font-size: 14px; border-radius: 2px; }
  .language-switch a[aria-current="page"] { background: var(--accent); color: var(--bg); }
  .language-switch a:hover { background: var(--line); color: var(--text); }
  .header nav { display: flex; gap: 36px; font-size: 14px; }
  .header nav a { color: #c9d0ca; }
  .header nav a:hover,.hero-bottom a:hover { color: var(--accent); }
  .header-contact { display: flex; align-items: center; gap: 26px; font-size: 14px; border-bottom: 1px solid #788276; padding-block: 12px; }
  .header-contact span { color: var(--accent); font-size: 23px; }
  .hero { padding-top: 49px; }
  .eyebrow { display: flex; gap: 10px; align-items: center; font-size: 13px; letter-spacing: .055em; text-transform: uppercase; }
  .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 6%; align-items: center; padding: 39px 0 61px; }
  h1 { font-size: clamp(3.5rem, 5.3vw, 5.1rem); line-height: 1.045; letter-spacing: -.065em; }
  h1 em { color: var(--accent); font-style: normal; }
  .period { color: var(--accent); }
  .hero-description { margin-top: 27px; line-height: 1.6; color: #bdc6bd; font-size: 17px; }
  .button { min-height: 57px; display: inline-flex; align-items: center; justify-content: space-between; gap: 45px; padding: 17px 24px; border-radius: 3px; font-size: 15px; font-weight: 600; transition: background .2s, transform .2s; }
  .button span { font-size: 23px; line-height: 1; }
  .button:hover { transform: translateY(-3px); }
  .button-green { margin-top: 32px; background: var(--accent); color: #17200d; }
  .button-green:hover { background: #d9ff93; }
  .product-map { border: 1px solid #485045; background: var(--panel); border-radius: 4px; padding: 23px 26px; transform: rotate(-3deg); margin: 20px 8px 0 0; box-shadow: 14px 17px 0 #111512; }
  .map-top { display: flex; align-items: center; justify-content: space-between; color: #bac4ba; font-size: 12px; letter-spacing: .1em; padding-bottom: 29px; }
  .map-plus { font-size: 22px; font-weight: 300; }
  .map-stage { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 10px; min-height: 68px; border-top: 1px solid #424b41; font-size: 22px; padding: 12px 0; }
  .stage-number { font-size: 12px; color: #a6b19f; }
  .stage-note { grid-column: 2; font-size: 12px; color: #aab5a6; }
  .map-stage.active { grid-template-columns: 26px 1fr auto; background: var(--accent); color: #192511; margin: 8px -40px; padding: 20px 26px; border: 0; box-shadow: 0 8px 24px #0002; }
  .active .stage-number { color: #435932; }
  .launch-arrow { font-size: 35px; }
  .map-bottom { margin-top: 20px; padding-top: 18px; border-top: 1px solid #424b41; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #bec8b9; }
  .hero-bottom { padding: 23px 0 29px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: #a9b3a9; font-size: 13px; }
  .hero-bottom a { color: var(--text); }
  .hero-bottom a span { margin-left: 25px; }
  .light-section { color-scheme: light; background: var(--paper); color: #20271e; }
  .services { padding-block: 57px 77px; }
  .section-label { display: flex; justify-content: space-between; gap: 24px; font-size: 12px; letter-spacing: .04em; }
  .section-label span:last-child { color: #aab5a6; letter-spacing: 0; }
  .light-section .section-label span:last-child { color: #60695d; }
  .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 45px; margin: 37px 0 46px; }
  h2 { font-size: clamp(2.3rem, 3.6vw, 3.4rem); line-height: 1.1; letter-spacing: -.052em; }
  .section-heading h2 span { color: #6a7464; }
  .section-heading > p { max-width: 375px; font-size: 16px; color: #596153; line-height: 1.6; padding-bottom: 3px; }
  .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .service { border-top: 1px solid #adb5a5; padding-top: 22px; display: flex; flex-direction: column; }
  .service-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #5f6a58; }
  .service-symbol { font-size: 31px; color: #313e2a; }
  .service h3 { margin-top: 22px; font-size: 25px; letter-spacing: -.04em; }
  .service p { font-size: 16px; line-height: 1.65; color: #596153; margin-top: 18px; margin-bottom: 31px; max-width: 340px; }
  .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
  .tags span { border: 1px solid #b9c2b0; padding: 7px 10px; border-radius: 30px; font-size: 12px; }
  .approach { padding-block: 59px 85px; }
  .approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; margin-top: 49px; }
  .approach h2 span { color: #a4b09b; }
  .approach-intro { max-width: 380px; margin-top: 25px; font-size: 16px; line-height: 1.65; color: #aeb9a7; }
  .principle { display: flex; gap: 19px; align-items: center; margin-top: 58px; color: #c5cdbe; }
  .principle > span { font-size: 51px; color: var(--accent); }
  .principle p { font-size: 14px; line-height: 1.6; }
  .steps { margin: 0; padding: 0; list-style: none; }
  .steps li { display: flex; gap: 25px; border-top: 1px solid var(--line); padding-block: 23px 26px; }
  .step-number { color: var(--accent); font-size: 12px; padding-top: 5px; }
  .steps h3 { font-size: 22px; letter-spacing: -.03em; }
  .steps p { color: #acb6a5; font-size: 15px; line-height: 1.6; margin-top: 12px; }
  .contact { color-scheme: light; background: var(--accent); color: #192410; padding-block: 38px 66px; }
  .contact .section-label span:last-child { color: #4c6238; }
  .contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; margin-top: 43px; }
  .contact h2 { font-size: clamp(3rem, 5vw, 4.7rem); line-height: 1; }
  .contact-italic { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
  .contact p { font-size: 16px; line-height: 1.6; margin-top: 25px; }
  .contact-action { padding-bottom: 6px; }
  .contact-action .button { background: #1c2715; color: var(--paper); width: 100%; }
  .contact-address { display: block; margin-top: 17px; font-size: 16px; overflow-wrap: anywhere; }
  .contact-address:hover { text-decoration: underline; }
  .contact-pending { max-width: 320px; border-top: 1px solid #708c4b; padding-top: 20px; }
  .footer { display: flex; gap: 25px; justify-content: space-between; align-items: center; min-height: 108px; }
  .footer .logo { font-size: 27px; }
  .footer > span,.footer > a:last-child { font-size: 12px; color: #aab5a3; }
}
@layer responsive {
  @media (min-width: 1400px) { .map-stage { grid-template-columns: 26px 1fr auto; min-height: 76px; }.stage-note { grid-column: auto; } }
  @media (max-width: 1000px) { .wrap { width: calc(100% - 64px); } .hero-grid { grid-template-columns: 1.5fr 1fr; gap: 7%; } h1 { font-size: clamp(2.8rem, 5.6vw, 4rem); } .product-map { padding-inline: 18px; } .map-stage { font-size: 19px; } .map-stage.active { margin-inline: -28px; padding-inline: 18px; } .service-grid { gap: 20px; } .service h3 { font-size: 22px; } .section-heading > p { max-width: 310px; }.approach-grid { gap: 6%; } }
  @media (max-width: 760px) {
    .wrap { width: calc(100% - 40px); } .header { min-height: 83px; gap: 15px; }.header nav { display: none; }.header-actions { gap: 12px; }.language-switch a { min-height: 40px; }.header-contact { font-size: 13px; gap: 13px; }.logo { font-size: 30px; }
    .hero { padding-top: 30px; }.eyebrow { font-size: 12px; }.hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 32px 0 42px; } h1 { font-size: clamp(2.75rem, 9vw, 4.6rem); letter-spacing: -.06em; }.hero-description { font-size: 16px; margin-top: 24px; }.desktop-break { display: none; }
    .button { min-height: 58px; }.product-map { width: calc(100% - 32px); max-width: 440px; margin: 4px auto 13px; }.map-stage { grid-template-columns: 26px 1fr auto; min-height: 62px; font-size: 21px; }.stage-note { grid-column: auto; }.map-top { padding-bottom: 20px; }.map-stage.active { margin-inline: -26px; padding-block: 13px; }.map-bottom { margin-top: 12px; }
    .hero-bottom { flex-direction: column; gap: 16px; font-size: 12px; }.hero-bottom a { display: flex; justify-content: space-between; }
    .services { padding-block: 36px 43px; }.section-label { font-size: 12px; }.section-label span:last-child { display: none; }.section-heading { flex-direction: column; align-items: start; gap: 22px; margin-block: 29px 34px; }.section-heading > p { max-width: 500px; }
    h2 { font-size: 36px; }.service-grid { grid-template-columns: 1fr; gap: 30px; }.service { padding-top: 15px; }.service h3 { margin-top: 8px; font-size: 25px; }.service p { max-width: 500px; margin-top: 12px; margin-bottom: 20px; }.tags span { font-size: 13px; }
    .approach { padding-block: 38px 37px; }.approach-grid { grid-template-columns: 1fr; gap: 35px; margin-top: 30px; }.approach-intro { max-width: 500px; }.principle { margin-top: 27px; }.steps li { gap: 18px; padding-block: 21px; }.steps h3 { font-size: 21px; }
    .contact { padding-block: 30px 37px; }.contact-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }.contact h2 { font-size: clamp(3rem, 10vw, 4.5rem); }.contact p { margin-top: 23px; }.contact-action { max-width: 460px; width: 100%; }.contact-action .contact-pending { margin: 0; }
    .footer { display: grid; grid-template-columns: 1fr auto; padding-block: 26px; gap: 20px; }.footer > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }.footer > span:nth-child(3) { grid-row: 3; }.footer > a:last-child { grid-column: 2; grid-row: 3; }
  }
  @media (max-width: 480px) { .header { flex-wrap: wrap; padding-block: 15px; }.header-actions { display: contents; }.language-switch { margin-left: auto; }.header-contact { flex-basis: 100%; justify-content: space-between; }.hero-grid > *, .approach-grid > *, .contact-grid > * { min-width: 0; } :lang(kk) h1 { font-size: clamp(2.3rem, 8.2vw, 3.8rem); } :lang(kk) .contact h2 { font-size: clamp(2.3rem, 8.5vw, 3.8rem); } .map-stage { grid-template-columns: 26px 1fr; }.stage-note { grid-column: 2; }.button { gap: 18px; padding-inline: 20px; font-size: 14px; } }
  @media (max-width: 360px) { .header-contact { font-size: 12px; gap: 8px; }.stage-note { display: none; } h1 { font-size: 2.45rem; }.button { width: 100%; gap: 15px; } }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button { transition: none; }.button:hover { transform: none; } }
}