@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-Regular.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/Inter/Inter-Regular.woff2") format("woff2"),
    url("../fonts/Inter/Inter-Regular.woff") format("woff"),
    url("../fonts/Inter/Inter-Regular.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/Inter/Inter-Regular.svg") format("svg");
  font-weight: 400;
}

@font-face {
  font-family: "Inter Bold";
  src: url("../fonts/Inter/Inter-Bold.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/Inter/Inter-Bold.woff2") format("woff2"),
    url("../fonts/Inter/Inter-Bold.woff") format("woff"),
    url("../fonts/Inter/Inter-Bold.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/Inter/Inter-Bold.svg") format("svg");
  font-weight: 700;
}

@font-face {
  font-family: "Inter Italic";
  src: url("../fonts/Inter/Inter-Italic.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/Inter/Inter-Italic.woff2") format("woff2"),
    url("../fonts/Inter/Inter-Italic.woff") format("woff"),
    url("../fonts/Inter/Inter-Italic.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/Inter/Inter-Italic.svg") format("svg");
  font-weight: 400;
}

@font-face {
  font-family: "Ruslan Display";
  src: url("../fonts/RuslanDisplay/RuslanDisplay.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/RuslanDisplay/RuslanDisplay.woff2") format("woff2"),
    url("../fonts/RuslanDisplay/RuslanDisplay.woff") format("woff"),
    url("../fonts/RuslanDisplay/RuslanDisplay.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/RuslanDisplay/RuslanDisplay.svg") format("svg");
  font-weight: 600;
}

@font-face {
  font-family: "remixicon";

  src: url("../fonts/remixicon/remixicon.eot") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../fonts/remixicon/remixicon.woff2") format("woff2"),
    url("../fonts/remixicon/remixicon.woff") format("woff"),
    url("../fonts/remixicon/remixicon.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("../fonts/remixicon/remixicon.svg") format("svg");
  /* iOS 4.1- */
  font-display: swap;
}

[class^="ri-"],
[class*="ri-"] {
  font-family: "remixicon" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ri-lg {
  font-size: 1.3333em;
  line-height: 0.75em;
  vertical-align: -0.0667em;
}

.ri-xl {
  font-size: 1.5em;
  line-height: 0.6666em;
  vertical-align: -0.075em;
}

.ri-xxs {
  font-size: 0.5em;
}

.ri-xs {
  font-size: 0.75em;
}

.ri-sm {
  font-size: 0.875em;
}

.ri-1x {
  font-size: 1em;
}

.ri-2x {
  font-size: 2em;
}

.ri-3x {
  font-size: 3em;
}

.ri-4x {
  font-size: 4em;
}

.ri-5x {
  font-size: 5em;
}

.ri-6x {
  font-size: 6em;
}

.ri-7x {
  font-size: 7em;
}

.ri-8x {
  font-size: 8em;
}

.ri-9x {
  font-size: 9em;
}

.ri-10x {
  font-size: 10em;
}

.ri-fw {
  text-align: center;
  width: 1.25em;
}

.ri-tent-line:before {
  content: "\f3df";
}

.ri-whatsapp-line:before {
  content: "\f2bc";
}

.ri-whatsapp-fill:before {
  content: "\f2bb";
}

.ri-telegram-fill:before {
  content: "\f1ef";
}

.ri-telegram-line:before {
  content: "\f1f0";
}

.ri-phone-line:before {
  content: "\efec";
}

.ri-phone-fill:before {
  content: "\efe9";
}

.ri-ship-line:before {
  content: "\f110";
}

.ri-ship-fill:before {
  content: "\f10f";
}

.ri-truck-line:before {
  content: "\f231";
}

.ri-truck-fill:before {
  content: "\f230";
}

.ri-store-2-line:before {
  content: "\f1a5";
}

.ri-store-2-fill:before {
  content: "\f1a4";
}

.ri-award-line:before {
  content: "\ea8a";
}

.ri-award-fill:before {
  content: "\ea89";
}

.ri-shopping-cart-line:before {
  content: "\f120";
}

.ri-shopping-basket-2-line:before {
  content: "\f11a";
}

.ri-shopping-basket-2-fill:before {
  content: "\f119";
}

.ri-time-line:before {
  content: "\f20f";
}

.ri-time-fill:before {
  content: "\f20e";
}

.ri-map-pin-line:before {
  content: "\ef14";
}

.ri-map-pin-fill:before {
  content: "\ef13";
}

.ri-mail-line:before {
  content: "\eef6";
}

.ri-mail-fill:before {
  content: "\eef3";
}

.ri-chat-3-line:before {
  content: "\eb51";
}

.ri-chat-3-fill:before {
  content: "\eb50";
}

.ri-copyright-line:before {
  content: "\ebe2";
}

.ri-menu-line:before {
  content: "\ef3e";
}

.ri-close-large-line:before {
  content: "\f4c8";
}

:where([class^="ri-"])::before {
  content: "\f3c2";
}

.ri-lg {
  font-size: 1.333rem;
}

/* // https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
svg,
picture {
  max-width: 100%;
  display: block;
}

svg {
  aspect-ratio: 1;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Custom properties */
:root {
  --clr-primary-100: rgb(59 130 246 / 1);
  --clr-primary-200: #3b82f6;
  --clr-primary-300: rgb(37 99 235 / 1);
  --clr-primary-400: ;
  --clr-primary-500: ;
  --clr-primary-600: ;

  --clr-neutral-100: #fff;
  --clr-neutral-200: #f9fafb;
  --clr-neutral-300: #9ca3af;
  --clr-neutral-400: #4b5563;
  --clr-neutral-500: #1f2937;
  --clr-neutral-600: #111827;
  --clr-neutral-700: #000;

  --clr-accent-100: #eff6ff;
  --clr-accent-200: #dbeafe;
  --clr-accent-300: ;
  --clr-accent-400: ;
  --clr-accent-500: ;
  --clr-accent-600: ;

  --clr-wa: #6ddc7f;
  --clr-tg: #83ccf1;
  --clr-ya: #ff4c00;

  --clr-warning: #a11c44;
  --clr-validate: #52a14b;

  --shadow-dark: 0 0 0.25rem hsla(0, 0%, 0%, 0.25);
  --shadow-light: 0 0 100vh hsla(0, 0%, 0%, 0.01);

  --ff-primary: "Inter", "system-ui";
  /* --ff-heading: "Ruslan Display"; */

  --fs-100: 0.875rem;
  --fs-200: 1rem;
  --fs-300: ;
  --fs-400: 1.125rem;
  --fs-500: 1.25rem;
  --fs-600: 2.25rem;
  --fs-700: 3rem;

  --fs-mobile-100: 0.875rem;
  --fs-mobile-200: 1rem;
  --fs-mobile-300: 1.125rem;
  --fs-mobile-400: 1.25rem;
  --fs-mobile-500: 1.5rem;
  --fs-mobile-600: 1.875rem;
  --fs-mobile-700: 2.25rem;

  --fw-400: 400;
  --fw-700: 700;
  --fw-900: 900;

  --padding-100: 1rem;
  --padding-200: 2rem;
  --padding-300: 3rem;
  --padding-400: 4rem;
  --padding-500: 5rem;
  --padding-800: 8rem;

  --gap-100: ;
  --gap-200: ;
  --gap-300: ;
  --gap-400: ;
  --gap-500: ;

  --header-height: 4rem;

  --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-accent-100: #eff6ff;
    --clr-accent-200: oklch(72.01% 0.11734 255.764);
    --clr-primary-300: oklch(29.522% 0.08095 256.828);

    --bg-dark: oklch(0.1 0.035 264);
    --bg: oklch(0.15 0.035 264);
    --bg-light: oklch(0.2 0.035 264);
    --text: oklch(0.96 0.07 264);
    --text-muted: oklch(0.76 0.07 264);
    --highlight: oklch(0.5 0.07 264);
    --border: oklch(0.4 0.07 264);


    --border-muted: oklch(0.3 0.07 264);
    --primary: oklch(0.76 0.1 264);
    --secondary: oklch(0.76 0.1 84);
    --danger: oklch(0.7 0.07 30);
    --warning: oklch(0.7 0.07 100);
    --success: oklch(0.7 0.07 160);
    --info: oklch(0.7 0.07 260);

    --bg-section: var(--bg-dark);
    --bg-section-2: var(--bg);
    --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

    --border-card: 1px solid var(--border);

    --bg-footer: linear-gradient(to top, #191D21, #30373D, #46515A);
    /* Shadows */
    --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
      0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

    --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
      0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);
  }

  .features .subheading div.flex span {
    color: var(--clr-accent-200);

  }

  .bg-section-2 .item {
    --bg-card: var(--bg-light);

  }

  .promo {
    background-image:
      /* linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 40%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%), */
      url("../img/promo-dark.png");
  }

  .features .subheading div.flex span.fancy {
    color: var(--text);
  }
}

.bg-section {
  background: var(--bg-dark);
}

.bg-section-2 {
  background: var(--bg);

}




@media (prefers-color-scheme: light) {
  :root {

    --bg-dark: oklch(0.92 0.035 264);
    --bg: oklch(0.96 0.035 264);
    --bg-light: oklch(1 0.035 264);
    --text: oklch(0.15 0.07 264);
    --text-muted: oklch(0.4 0.07 264);
    --highlight: oklch(1 0.07 264);
    --border: oklch(0.6 0.07 264);
    --border-muted: oklch(0.7 0.07 264);
    --primary: oklch(0.4 0.1 264);
    --secondary: oklch(0.4 0.1 84);
    --danger: oklch(0.5 0.07 30);
    --warning: oklch(0.5 0.07 100);
    --success: oklch(0.5 0.07 160);
    --info: oklch(0.5 0.07 260);

    --bg-section: var(--bg-dark);
    --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
    --border-card: 1px solid var(--bg);

    /* Shadows */
    --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
    --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
      0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

    --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
    --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
      0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);

  }

  .promo {
    background-image:
      /* linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 40%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%), */
      url("../img/promo-bg.png");
  }

  .bg-section-2 .item {
    --bg-card: var(--bg-light);

  }

  .features .subheading div.flex span {
    color: var(--text);

  }

  .features .subheading div.flex span.fancy {
    color: var(--clr-primary-200);

  }

}

/* Utility classes */
.bg-primary-100 {
  background-color: var(--clr-primary-100);
}

.bg-primary-200 {
  background-color: var(--clr-primary-200);
}

.bg-primary-300 {
  background-color: var(--clr-primary-300);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
}

.bg-primary-500 {
  background-color: var(--clr-primary-500);
}

.bg-primary-600 {
  background-color: var(--clr-primary-600);
}

.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}

.bg-neutral-200 {
  background-color: var(--clr-neutral-200);
}

.bg-neutral-300 {
  background-color: var(--clr-neutral-300);
}

.bg-neutral-400 {
  background-color: var(--clr-neutral-400);
}

.bg-neutral-500 {
  background-color: var(--clr-neutral-500);
}

.bg-neutral-600 {
  background-color: var(--clr-neutral-600);
}

.bg-accent-100 {
  background-color: var(--clr-accent-100);
}

.bg-accent-200 {
  background-color: var(--clr-accent-200);
}

.bg-accent-300 {
  background-color: var(--clr-accent-300);
}

.bg-accent-400 {
  background-color: var(--clr-accent-400);
}

.bg-accent-500 {
  background-color: var(--clr-accent-500);
}

.bg-accent-600 {
  background-color: var(--clr-accent-600);
}

.text-primary-100 {
  color: var(--clr-primary-100);
}

.text-primary-200 {
  color: var(--clr-primary-200);
}

.text-primary-300 {
  color: var(--clr-primary-300);
}

.text-primary-400 {
  color: var(--clr-primary-400);
}

.text-primary-500 {
  color: var(--clr-primary-500);
}

.text-primary-600 {
  color: var(--clr-primary-600);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}

.text-neutral-200 {
  color: var(--clr-neutral-200);
}

.text-neutral-300 {
  color: var(--clr-neutral-300);
}

.text-neutral-400 {
  color: var(--clr-neutral-400);
}

.text-neutral-500 {
  color: var(--clr-neutral-500);
}

.text-neutral-600 {
  color: var(--clr-neutral-600);
}

.text-accent-100 {
  color: var(--clr-accent-100);
}

.text-accent-200 {
  color: var(--clr-accent-200);
}

.text-accent-300 {
  color: var(--clr-accent-300);
}

.text-accent-400 {
  color: var(--clr-accent-400);
}

.text-accent-500 {
  color: var(--clr-accent-500);
}

.text-accent-600 {
  color: var(--clr-accent-600);
}

.fs-primary-heading {
  font-size: clamp(var(--fs-mobile-700), 2.1rem + 0.75vw, var(--fs-700));
  font-family: var(--ff-heading);
}

.fs-secondary-heading {
  font-size: clamp(var(--fs-mobile-600), 1.8rem + 0.38vw, var(--fs-600));
}

.fs-regular {
  font-size: var(--fs-200);
}

.fs-small {
  font-size: var(--fs-100);
}

.fw-regular {
  font-weight: var(--fw-400);
}

.fw-semibold {
  font-weight: var(--fw-700);
}

.fw-bold {
  font-weight: var(--fw-900);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--_gap);
}

.grid {
  display: grid;
  gap: var(--_gap);
}

.outline {
  border: 1px solid green;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*    */
body {
  font-family: var(--ff-primary);
  background: var(--bg-dark);
  color: var(--text-muted);
  accent-color: var(--clr-primary-200);
  caret-color: var(--clr-primary-200);
}

button {
  display: grid;
  place-content: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

.content-wrapper {
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
}

.cta-btn {

  border: var(--border-card);
  border-color: var(--border-muted);
  border-top-color: var(--border);
  border-radius: 0.5rem;
  display: grid;
  place-content: center;
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shd-sm);
  background: var(--bg-light);
  color: var(--text);
}

.cta-btn:is(:hover, :active) {
  box-shadow: var(--shd-md);
  transition: 0.25s ease-in-out;
}

.cta-empty:is(:hover, :active) {
  background-color: var(--clr-accent-100);
  transition: 0.25s ease-in-out;
}

section .buttons:not(.promo .buttons) {
  --_gap: 1rem;
  width: fit-content;
  margin-inline: auto;
}

.subheading {
  text-align: center;
  margin-bottom: 2rem;
}

section {
  padding: var(--padding-400) 0.5rem;
}

/* Header */
.page-header {
  height: var(--header-height);
  color: var(--text);
  position: sticky;
  top: 0;
  display: grid;
  padding-inline: 1.5rem;
  box-shadow: var(--shd-sm);
  background-color: var(--bg);
  border: var(--border-card);
  z-index: 100;
}

.mobile-menu button {
  width: 2rem;
  aspect-ratio: 1;
  display: none;
}

.primary-nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.nav-list {
  --_gap: 1rem;
  z-index: 10;
}

@media (max-width: 49.99em) {
  body {
    scroll-snap-type: mandatory y;
  }
  section {
    scroll-snap-align: start;
  }

  .page-header {
    padding-inline: .5rem;
  }

  .page-header .primary-nav {
    position: absolute;
    z-index: 10;

    inset: 4rem 1rem auto 1rem;
    height: calc(100vh - var(--header-height));
    display: none;
    place-content: start center;
    padding: var(--padding-300) 0.5rem;
    gap: 1rem;
    background: var(--bg-card);
    border-radius: 1rem;
    font-size: var(--fs-500);
    isolation: isolate;
  }

  .page-header .primary-nav[data-visible] {
    display: grid;
  }

  .page-header .primary-nav::before {
    content: "";
    inset: 0;
    border-radius: inherit;
    position: absolute;
    box-shadow: 0 0 0 10rem hsla(0, 0%, 0%, 0.75);
    z-index: -10;
  }

  .page-header .nav-list {
    width: 100%;
    margin-inline: auto;
    place-content: center;
    --_gap: 1rem;
    display: grid;

    grid-auto-flow: row;
  }

  .page-header .nav-list li {
    border: 1px solid var(--clr-accent-300);
    border-radius: 1rem;
    text-align: center;

    padding: 0.5rem var(--padding-200);
  }

  .page-header .header-socials {
    --_gap: 2rem;
    margin-inline: auto;
  }

  .page-header .header-socials a {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-content: center;
    border-radius: 50%;
    border: 1px solid var(--clr-primary-100);
  }

  .page-header .header-socials i {
    font-size: 2rem;
  }

  .socials i {
    font-size: 1.66rem;
  }

  .mobile-menu button {
    display: grid;
    place-content: center;
  }

  .mobile-menu button i {
    font-size: 2rem;

  }

  .mobile-menu button i.ri-close-large-line {
    color: var(--clr-neutral-100);
    z-index: 1000;
  }

  .mobile-menu:has([aria-expanded="false"]) .ri-menu-line,
  .mobile-menu:has([aria-expanded="true"]) .ri-close-large-line {
    color: var(--text);
    display: grid;
  }

  .mobile-menu:has([aria-expanded="false"]) .ri-close-large-line,
  .mobile-menu:has([aria-expanded="true"]) .ri-menu-line {
    display: none;
  }
}

.page-header a:is(:hover, :active) {
  color: var(--clr-primary-200);
}

.page-header .buttons {
  --_gap: 0.25rem;
  grid-template-columns: calc(90px + var(--padding-100)) 1fr;
  place-items: center;
}


.header-socials {
  --_gap: 1rem;
  font-size: 1.5rem;
}

.promo {
  padding-block: var(--padding-200);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  min-height: 100vh;
}

.promo .content-wrapper {
  justify-items: left;
  --_gap: 1.5rem;
  margin-block: auto;
}

.promo-wrapper {
  background: var(--bg-card);
  backdrop-filter: blur(2px);
  --_gap: 2rem;
  padding-block: var(--padding-300);
  margin-inline: auto;
  border-radius: 2rem;
  padding-inline: var(--padding-100);
}

.promo .buttons {
  display: grid;
  width: 100%;
  gap: 1rem;
}

@media (min-width: 50em) {

  .promo p {
    max-width: 50%;
  }

  .promo .buttons {
    max-width: max-content;
    display: flex;
    justify-content: space-between;
  }

  .promo {
    height: 50vh;
    padding-block: var(--padding-800);
  }

  .promo-wrapper {
    background-color: var(--bg-card);
    max-width: 50%;
    place-items: start;
    align-items: center;


    padding: var(--padding-300);
    margin-block: auto;
  }
}

/* Features */
.features {
  --_gap: 1rem;
}

.features .subheading div.flex {
  margin-inline: auto;
  width: 100%;
  --_gap: 1rem;
  justify-content: center;
  align-items: baseline;
  box-shadow: var(--shd-md);
  padding: var(--padding-100);
  border-radius: 1rem;
  background: var(--bg-card);
  border: var(--border-card);
  border-top-color: var(--highlight);

}





.features .subheading div.flex:nth-of-type(2) {
  background: var(--clr-accent-200);
  background-color: var(--bg-dark);
}

.features .layout {
  --_gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 50em) {
  .features .subheading div.flex {
    width: 50%;
    padding: var(--padding-100) var(--padding-200);
  }

  .features .layout {
    --_gap: 2rem;
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    width: 100%;
    margin-inline: auto;
  }
}



.item {
  background: var(--bg-card);
  border: var(--border-card);
  border-top-color: var(--highlight);
  box-shadow: var(--shd-md);
}

.features .item {
  --_gap: 1rem;
  box-shadow: var(--shd-md);
  border-radius: 1.5rem;
  padding: 1.5rem;
  justify-items: left;
  border: var(--border-card);
}

.features .item .icon {
  background: var(--bg-light);
  width: 4rem;
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--clr-primary-100);
  border: var(--border-card);
  border-color: var(--border-muted);

}

.features .item i {
  font-size: 2rem;
}

/* Featured-products */

.featured-products .content-wrapper {
  --_container-width: 1440px;
  --_gap: 1rem;
  position: relative;
}

.featured-products .layout {
  --_item-width: 330px;
  overflow-x: scroll;
  padding: var(--padding-100) var(--padding-100);
  scroll-snap-type: x mandatory;
  position: relative;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  --_gap: calc((var(--_container-width) - var(--_item-width) * 4) / 3);
  isolation: isolate;
}

.featured-products .item {
  overflow: hidden;
  box-shadow: var(--shd-md);
  border-radius: 1.5rem;
  justify-items: left;
  min-width: var(--_item-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.featured-products .layout::-webkit-scrollbar {
  background: var(--bg-light);
  box-shadow: var(--shd-sm);
  border: var(--border-card);
}

.featured-products .layout::-webkit-scrollbar-thumb {
  background: var(--border-muted);
  border-radius: 100vw;
  border: 1px solid var(--clr-accent-200);
}

.featured-products .item img {
  max-height: 350px;
  place-self: center;
  width: 100%;
}

.featured-products .item-text {
  --_gap: 1rem;
  padding: 1.5rem;
  padding-top: 0;
}

.buy-btn {
  background-color: var(--clr-primary-100);
  padding: 0.5rem 1rem;
  color: var(--clr-neutral-100);
  border-radius: 0.5rem;
}

.buy-btn:is(:hover, :active) {
  background-color: var(--clr-primary-300);
}

.featured-products .item-price {
  font-weight: 600;
  color: var(--clr-primary-100);
}

.show-more {
  margin-top: 2rem;
  background: var(--bg-light);
  color: var(--text);
  margin-inline: auto;
  border: var(--border-card);
  border-color: var(--border-muted);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  --_gap: 0.2rem;
}

.show-more:is(:hover, :active) {
  background-color: var(--clr-accent-100);
  transition: 0.25s ease-in-out;
}

.show-more-clr:is(:hover, :active) {
  background: var(--clr-primary-300);
  color: var(--clr-neutral-100);
}

/* Price list */
.price-list .layout {
  padding: var(--padding-200);
  background: var(--bg);
  border: var(--border-card);
  border-top-color: var(--highlight);
  border-radius: 1rem;
  --_gap: 1rem;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.price-list .heading {
  border-bottom: 1px solid var(--clr-primary-100);
}

.price-list ul {
  --_gap: 1rem;
}

.price-list ul li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--clr-accent-200);
}

.price-list .item-price {
  font-weight: 600;
}

.price-list .info {
  margin-inline: auto;
  margin-top: 2rem;
}

/* Work-Order */
.work-order {
  isolation: isolate;
}

.work-order .layout {
  --_gap: 1.5rem;
  padding: var(--padding-200);
  border-radius: 1.5rem;
  margin-inline: auto;
  box-shadow: var(--shd-md);
  z-index: 3;
  border: var(--border-card);
  border-top-color: var(--highlight);
}

.work-order ol li {
  display: flex;
  position: relative;
  align-items: center;
}

.work-order ol {
  padding-left: var(--_list-padding);
  --_list-padding: 3rem;
  border-left: 1px solid var(--clr-neutral-100);
}

.work-order ol li::before,
.work-order ol li::after {
  content: "";
  position: absolute;
  z-index: -5;
}

.work-order ol li::before {
  --_width: 1rem;
  width: var(--_width);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clr-accent-200);
  z-index: 1;
  inset-inline: calc((var(--_list-padding) + var(--_width) / 2) * -1);
}

.work-order ol li::after {
  content: "1";
  inset-inline: calc((var(--_list-padding) / 1.66) * -1);
  font-size: var(--fs-500);
  font-weight: bold;
}

/* @media (min-width: 50em) {
  .work-order .layout {
    min-width: 1200px;
    font-size: var(--fs-500);
  }
  .work-order ol  {
    --_list-padding: 4rem; 
  }
  .work-order ol li::after {
    font-size: var(--fs-600);
  }
} */

.work-order ol li:nth-of-type(2):after {
  content: "2";
}

.work-order ol li:nth-of-type(3):after {
  content: "3";
}

.work-order ol li:nth-of-type(4):after {
  content: "4";
}

.work-order ol li:nth-of-type(5):after {
  content: "5";
}

.work-order ol li:nth-of-type(6):after {
  content: "6";
}

.work-order ol li:nth-of-type(7):after {
  content: "7";
}

.work-order ol li:nth-of-type(8):after {
  content: "8";
}

/* Contacts */
@media (min-width: 50em) {
  .contacts .layout {
    grid-template-columns: 1fr 45%;
  }
}

.contact-info,
form {
  background: var(--bg);
  padding: var(--padding-200);
  border-radius: 1.5rem;
  box-shadow: var(--shd-md);
  border: var(--border-card);
  border-top-color: var(--highlight);
}

.contacts .contact-info h3 {
  text-align: start;
}

.contacts .contact-info,
.contacts .layout {
  --_gap: 1rem;
}

.contacts .info-list li,
.contacts .info-list a {
  justify-content: start;
  --_gap: 1.5rem;
}

.contacts .info-list i {
  padding-left: 0.5rem;
}

.contacts .socials {
  width: fit-content;
  --_gap: 1rem;
}

.contacts .socials a {
  width: 2.5rem;
  aspect-ratio: 1;
  background-color: var(--bg-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: var(--border-card);
  border-color: var(--border-muted);
}

.contacts .socials a:is(:hover, :active) {
  box-shadow: var(--shd-md);
  transition: 0.2s ease-in-out;

}

.contacts i {
  color: var(--clr-primary-100);
}

.contacts form {
  padding: var(--padding-200);
  border-radius: 1.5rem;
  --_gap: 1rem;
  box-shadow: var(--shd-md);
  background: var(--bg);
}

.contacts form .flex {
  flex-wrap: wrap;
}

.contacts form h3 {
  text-align: start;
}

.contacts form input,
.contacts form textarea {
  padding: 0.5rem 1rem;
  border: var(--border-card);
  border-radius: 0.5rem;
  background: var(--bg-light);
  color: var(--text-muted);
}

label[for="policy-check"] {
  padding-left: 0.5rem;
}

.contacts form textarea {
  resize: none;
}

.contacts iframe {
  width: 100%;
  height: 250px;
  border: none;
}

.contacts div:has(> iframe) {
  border-radius: 1rem;
  box-shadow: var(--shd-md);
  border: 1px solid var(--clr-accent-200);
}

/* footer */
.page-footer {
  padding: var(--padding-400);
  padding-inline: 0.5rem;
}

.footer-top {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  --_gap: 2rem;
  padding-bottom: var(--padding-200);
  border-bottom: 1px solid var(--clr-neutral-500);
}

.footer-top a:hover {
  color: var(--clr-neutral-100);
}

.footer-top .branding {
  --_gap: 1rem;
}

.footer-contacts li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-top .socials {
  width: fit-content;
}

.footer-top h3 {
  color: var(--clr-neutral-100);
  text-align: start;
  margin-bottom: 1rem;
}

.footer-top ul {
  --_gap: 1rem;
}

.footer-top .socials a {
  width: 2.5rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background-color: var(--clr-neutral-500);
  color: var(--clr-neutral-100);
  border-radius: 50%;
}

.footer-top .socials a:hover {
  background-color: var(--clr-primary-100);
}

.footer-bottom {
  padding-top: var(--padding-200);
  place-items: center;
  --_gap: 1rem;
}

.form-wrapper {
  position: relative;
}

.form-group textarea {
  resize: none;
}



.form-group button[type="submit"] {
  width: 10rem;
  margin-inline: auto;
}

/* CSS для кнопки submit */
button[type="submit"] {
  margin-inline: auto;
  display: grid;
  place-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.15s ease-in-out;
}

button[type="submit"]:disabled {
  opacity: 0.65;
}

/* button[type="submit"]:not(:disabled)::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: .5rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512.333 512'%3E%3Cpath fill='%23fff' d='M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z'/%3E%3C/svg%3E") transparent no-repeat center center;
  background-size: 100% 100%;
} */

button[type="submit"]:disabled::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  -webkit-animation: 0.75s linear infinite spinner-border;
  animation: 0.75s linear infinite spinner-border;
  border: 1px solid transparent;
}

button[type="submit"]:not(:disabled):hover {
  box-shadow: var(--shd-sm);
}

button[type="submit"]:not(:disabled):focus {
  outline: 0;
  box-shadow: var(--shd-sm);
}

/* Стили для сообщения об ошибках */
.form-error {
  position: relative;
  padding: 0.5rem 1rem 0.6rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  color: #dc3545;
  background-color: #dc35450d;
  border: 1px solid #dc3545;
}

.form-error_hide {
  display: none;
}

/* сообщение об успешной отправки формы */
.form-success {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  background: rgba(0, 0, 0, 0.4);

  font-size: 1.25rem;

  border-radius: inherit;
  z-index: 3;
}

.form-success_hide {
  display: none;
}

.form-success__message {
  vertical-align: center;
  inset: 0;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  background: var(--bg-card);
  border-radius: 1.5rem;
  padding: var(--padding-200);
  color: var(--text);

  display: grid;
  place-content: center;
}

.form-success__btn {
  font-weight: 400;

  color: var(--text-muted);
  border: none;
  background-color: transparent;
  display: inline;
  padding: 0;
}

.form-success__btn:is(:hover, :active) {

  text-decoration: underline;
  color: var(--clr-primary-200);

}

.phone-input {
  padding-left: 2.25rem;
}

.form-group:has(input[type="hidden"]) {
  display: none;
}

input:focus-visible:not(input[type="checkbox"]),
textarea:focus,
button[type="submit"]:focus-visible {
  box-shadow: var(--shd-sm);
}

.form-agree a {
  color: var(--text);
}

.form-agree a:is(:hover, :active) {
  color: var(--clr-primary-200);
  text-decoration: underline;
}

/* Theme toggle */
:root:has(.theme-toggle.dark) {
  --bg-dark: oklch(0.1 0.035 264);
  --bg: oklch(0.15 0.035 264);
  --bg-light: oklch(0.2 0.035 264);
  --text: oklch(0.96 0.07 264);
  --text-muted: oklch(0.76 0.07 264);
  --highlight: oklch(0.5 0.07 264);
  --border: oklch(0.4 0.07 264);


  --border-muted: oklch(0.3 0.07 264);
  --primary: oklch(0.76 0.1 264);
  --secondary: oklch(0.76 0.1 84);
  --danger: oklch(0.7 0.07 30);
  --warning: oklch(0.7 0.07 100);
  --success: oklch(0.7 0.07 160);
  --info: oklch(0.7 0.07 260);

  --bg-section: var(--bg-dark);
  --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
  --bg-card-hover: linear-gradient(0deg, var(--bg), var(--bg-light));

  --border-card: 1px solid var(--border);

  --bg-footer: linear-gradient(to top, #191D21, #30373D, #46515A);
  /* Shadows */
  --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

  --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);


}



:root:has(.theme-toggle.light) {
  --bg-dark: oklch(0.92 0.035 264);
  --bg: oklch(0.96 0.035 264);
  --bg-light: oklch(1 0.035 264);
  --text: oklch(0.15 0.07 264);
  --text-muted: oklch(0.4 0.07 264);
  --highlight: oklch(1 0.07 264);
  --border: oklch(0.6 0.07 264);
  --border-muted: oklch(0.7 0.07 264);
  --primary: oklch(0.4 0.1 264);
  --secondary: oklch(0.4 0.1 84);
  --danger: oklch(0.5 0.07 30);
  --warning: oklch(0.5 0.07 100);
  --success: oklch(0.5 0.07 160);
  --info: oklch(0.5 0.07 260);

  --bg-section: var(--bg-dark);
  --bg-card: linear-gradient(0deg, var(--bg) 95%, var(--bg-light));
  --border-card: 1px solid var(--bg);


  /* Shadows */
  --shd-sm: 0 6px 6px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-md: 0 12px 12px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-lg: 0 8px 24px -6px hsl(0, 0%, 0%, 0.16), 0 0 1px hsl(0, 0%, 0%, 0.4);
  --shd-xl: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 0%, 0.12), 0 0 1px hsl(0, 0%, 0%, 0.2);

  --shd-sm-light: 0 6px 6px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-md-light: 0 12px 12px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-lg-light: 0 8px 24px -6px hsla(0, 0%, 100%, 0.16), 0 0 1px hsla(0, 0%, 100%, 0.4);
  --shd-xl-light: 0 32px 32px -8px hsl(0, 0%, 0%, 0.08),
    0 0 32px -8px hsl(0, 0%, 100%, 0.12), 0 0 1px hsl(0, 0%, 100%, 0.2);
}

:root:has(.theme-toggle.dark) .logo .light {
  display: none;
}

:root:has(.theme-toggle.light) .logo .dark {
  display: none;
}

:root:has(.theme-toggle.light) .promo {
  background-image:
    /* linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 40%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%), */
    url("../img/promo-bg.png");
}

:root:has(.theme-toggle.dark) .promo {
  background-image:
    /* linear-gradient(to bottom,
      rgba(255, 255, 255, 0.6) 40%,
      rgba(255, 255, 255, 0.3) 70%,
      rgba(255, 255, 255, 0) 100%), */
    url("../img/promo-dark.png");
}

.theme-toggle {
  background: var(--bg);
  --_toggle-width: 60px;
  --_toggle-height: calc(var(--_toggle-width) / 2.1 + var(--_padding));
  --_padding: .2rem;
  padding-inline: var(--_padding);
  width: var(--_toggle-width);
  height: var(--_toggle-height);
  border: var(--border-card);
  border-top-color: var(--highlight);
  border-radius: 100vw;
  border: 1px solid var(--border);
  display: grid;
  place-items: center start;
  position: relative;
}

.theme-toggle::after,
.theme-toggle::before {
  content: "";

  width: calc(var(--_toggle-height) - var(--_padding) * 2);
  aspect-ratio: 1;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  inset: auto var(--_padding);
}

.theme-toggle.dark::after {
  background-image: url("../img/moon.svg");
}

.theme-toggle.light::before {
  place-self: center end;
  background-image: url("../img/sun.svg");
  inset: auto var(--_padding);
}

.theme-toggle button {
  padding: 0;
  width: calc(var(--_toggle-height) - var(--_padding) * 2);
  aspect-ratio: 1;
  border-radius: 50%;

  z-index: 1;
  background-color: var(--bg);
}

.theme-toggle.light button {
  box-shadow: 0 2px 8px #000, 0 4px 8px #00000036;
  box-shadow: inset 0 0 0 calc(var(--_toggle-width) / 28) var(--bg), inset 0 0 0 calc(var(--_toggle-width) / 14) var(--text-muted), 0 2px 8px rgba(255, 255, 255, 0.281);
  transition: .2s ease-in-out;
}

.theme-toggle.dark button {
  transform: translateX(calc(100% + var(--_padding)));
  box-shadow: inset 0 0 0 calc(var(--_toggle-width) / 28) var(--bg-light), inset 0 0 0 calc(var(--_toggle-width) / 14) var(--text-muted), 0 2px 8px #ffffff41;
  transition: .2s ease-in-out;
}