/* =================================== */
/* =================================== */
/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====October 2025 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */

/* Root Rules Start */
/* Manrope */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggSxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggixSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggmxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* CraftworkGrotesk Font */
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.woff2") format("woff2"),
       url("../fonts/CraftworkGrotesk-Regular/CraftworkGrotesk-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.woff2") format("woff2"),
       url("../fonts/CraftworkGrotesk-Medium/CraftworkGrotesk-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.woff2") format("woff2"),
       url("../fonts/CraftworkGrotesk-SemiBold/CraftworkGrotesk-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Craftwork Grotesk";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.woff2") format("woff2"),
       url("../fonts/CraftworkGrotesk-Bold/CraftworkGrotesk-Bold.woff") format("woff");
  font-display: swap;
}

:root {
  --font-main: 'Manrope', sans-serif;
  --font-accent: 'Craftwork Grotesk', sans-serif;

  /* Core palette */
  --color-black-rgb: 0 0 0;
  --color-black: rgb(var(--color-black-rgb));
  --color-white-rgb: 255 255 255;
  --color-white: rgb(var(--color-white-rgb));
  --color-orange-rgb: 239 83 39;
  --color-orange: rgb(var(--color-orange-rgb));
  --color-orange-hot: #ff764f;

  /* Dark surfaces */
  --color-ink-1000: #010205;
  --color-ink-950: #020202;
  --color-ink-900: #0d0d0d;
  --color-ink-850: #101010;
  --color-ink-800: #111111;
  --color-ink-750: #131313;
  --color-ink-700: #151617;
  --color-ink-650: #1f1f1f;

  /* Neutral text and surfaces */
  --color-navy-900: #001f3d;
  --color-text-muted: #868686;
  --color-text-muted-soft: #8a8a8a;
  --color-text-secondary: #535353;
  --color-surface-page: #ffffff;
  --color-surface-soft: #f9fafb;
  --color-surface-muted: #f7f7f7;
  --color-surface-subtle: #f6f6f6;
  --color-surface-light: #f5f5f5;
  --color-surface-pale: #f3f3f3;
  --color-surface-cool: #f5f5f7;
  --color-line-blue: #dff0ff;
  --color-line-soft: #eaecf0;
  --color-line-muted: #eaeaea;
  --color-line-ui: #ececec;
  --color-gray-300: #d7d7d7;
  --color-gray-350-rgb: 211 211 211;
  --color-gray-350: rgb(var(--color-gray-350-rgb));

  /* Supporting accents */
  --color-blue-strong: #215fcb;
  --color-blue-link: #1b54b3;
  --color-blue-deep: #014284;
  --color-blue-sky: #2ea7df;
  --color-blue-social: #268ac5;
  --color-blue-telegram: #2aabee;
  --color-blue-linkedin: #0a66c2;
  --color-teal: #003d3d;
  --color-teal-rgb: 2 46 55;
  --color-social-muted: #c3c3c3;

  /* Decorative washes */
  --color-wash-lilac-rgb: 213 221 253;
  --color-wash-green-rgb: 214 252 205;
  --color-wash-rose-rgb: 253 213 214;

  /* Animation aliases */
  --am-orange: var(--color-orange);
  --am-orange-hot: var(--color-orange-hot);
  --am-white: var(--color-white);
  --am-muted: rgb(var(--color-white-rgb) / 0.62);
  --am-dark: var(--color-black);
}

body {
  font-family: var(--font-main);
  background: var(--color-surface-page);
}

*{
  margin: 0;
  padding: 0;
}

ul {
  list-style-position: inside;
}

em{
  font-style: normal;
}

.no-page-break {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.container {
  width: calc(100% - 64px); 
  max-width: 1440px; 
  margin: 0 auto; 
  padding: 0 32px; 
}

.distance-xxs{
  /* padding: 32px; */
  padding-top: 73px;
}

.distance-xs{
  padding-top: 45px;
}

.distance-small{
  padding-top: 32px;
  padding-bottom: 32px;
}

.distance-section{
  padding-top: 100px;
  padding-bottom: 100px;
}

.distance-section-bt{
  padding-top: 0px;
  padding-bottom: 80px;
}

.bg-gray{
  background: var(--color-surface-cool);
}

.bg-blue{
  background: var(--color-blue-strong);
}

.bg-black{
  background: linear-gradient(221deg, var(--color-black) -17.43%, var(--color-ink-1000) 25.05%, var(--color-ink-1000) 64.92%, var(--color-black) 118.51%), var(--color-black);
}

.container-main{
  width: 1144px;
  position: relative;
}

@media (max-width: 1440px) {
  .container {
    /* width: 100%; */ 
    padding: 0 16px; 
  }
  .container-main{
    width: calc(100% - 64px);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}

@media (min-width:768px) and (max-width:1024px){
}

@media (max-width:767px){
  .container{
    width: calc(100% - 32px);
  }
}

.main{
  width: 100%;
}

main{
  position: relative !important;
  overflow: hidden;
}

html{
  scrollbar-color: var(--color-orange) transparent; /* Firefox */
  scrollbar-width: thin;                /* Firefox */
}
html::-webkit-scrollbar{ width: 10px; height: 10px; }
html::-webkit-scrollbar-track{ background: transparent; }
html::-webkit-scrollbar-thumb{
  background: var(--color-orange);
  border-radius: 8px;
}
html::-webkit-scrollbar-thumb:hover{ background: var(--color-blue-link); }


.bg-lilac{
  border: 1px solid rgb(var(--color-black-rgb) / 0.10);
  background: rgb(var(--color-wash-lilac-rgb) / 0.50);
  box-shadow: 0 4px 100px 0 rgb(var(--color-black-rgb) / 0.03);
}

.bg-green{
  border: 1px solid rgb(var(--color-black-rgb) / 0.10);
  background: rgb(var(--color-wash-green-rgb) / 0.50);
  box-shadow: 0 4px 100px 0 rgb(var(--color-black-rgb) / 0.03);
}

.bg-rose{
  border: 1px solid rgb(var(--color-black-rgb) / 0.10);
  background: rgb(var(--color-wash-rose-rgb) / 0.50);
  box-shadow: 0 4px 100px 0 rgb(var(--color-black-rgb) / 0.03);
}

button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
/* Root Rules End */

/* =================================== */
/* =================================== */
/* =================================== */
/* Danylo Oliinyk - https://iamdev.lol/ */
/* =====October 2025 For Statoplan =====*/
/* =================================== */
/* =================================== */
/* =================================== */