/*--------- CONST ----------*/

:root {
  --font: 'Inter', sans-serif;
  --bg: #F6F8FE;
  --bg-dark: #161B2E;
  --white: #FFFFFF;
  --text: #0F1729;
  --text-grey: #5A6478;
  --text-white: #C8D2E2;
  --accent: #4A9EF7;
  --accent-deep: #2D6FD9;
}

/*--------- NULLING STYLE ----------*/

*{
	padding: 0;
	margin: 0;
	border: 0;}
*,*:before, after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
	height: 100%;
	width: 100%;
	font-size: 16px;
  font-weight: 400;
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;}
div, p, a, span {font-family: var(--font);}
input,button,textarea{font-family: var(--font);}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-mox-focus-inner {padding:0; border:0;}
a, a:visited{text-decoration: none; cursor: pointer; display: block;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{display: block; vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-family: var(--font); font-weight: 400}

/*--------- MAIN ----------*/

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

a {
  color: var(--text);
  transition: all 0.2s;
}

img {
  width: 100%;
}

h1 {
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 700;
  font-size: 40px;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

h4 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--text-grey);
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}

.button {
  a {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 14px 28px;
    background-color: var(--bg-dark);
    color: var(--white);
    border-radius: 24px;

    img {
      width: 20px; 
      height: 20px;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(15,23,41,.2);
    }
  }
}

.green { background: rgba(52,199,89,.12); color: #22C55E; }
.blue { background: rgba(74,158,247,.12); color: var(--accent); }
.purple { background: rgba(124,92,252,.12); color: #7C5CFC; }
.orange { background: rgba(255,149,0,.12); color: #F59E0B; }

/*--------- STYLE ----------*/

.header {
  padding: 24px 0;

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_logo {
      display: flex;
      align-items: center;
      gap: 5px;

      img {
        width: 72px;
      }
      .header_name {
        font-weight: 700;
        font-size: 20px;
      }
    }

    .header_list {
      display: flex;
      gap: 32px;
      
      a {
        font-weight: 500;
        color: var(--text-grey);
        &:hover {
          color: var(--accent);
        }
      }
    }
  }
}

.hero {
  padding: 60px 0 100px;

  .content {
    display: flex;
    align-items: center;
    gap: 64px;

    .hero_info {
      flex: 1;

      .hero_title {
        margin-bottom: 24px;

        span {
          background: linear-gradient(135deg, var(--accent), #7C5CFC);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      
      .hero_points {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 36px;

        .hero_point {
          display: flex;
          align-items: center;
          gap: 12px;

          .point_icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            svg { 
              width: 20px; 
              height: 20px; 
            }
          }
          
          .point_info {
            .point_title {
              font-size: 18px;
              font-weight: 600;
              margin-bottom: 4px;
            }
            .point_text {
              font-size: 15px;
              color: var(--text-grey);
            }
          }
        }
      }
    }

    .hero_images {
      width: 400px;
      position: relative;

      img {
        max-width: 260px;
      }
      .image_light {
        position: relative;
        z-index: 2;
      }
      .image_dark {
        position: absolute;
        z-index: 1;
        top: 25px;
        left: 100px;
        transform: rotate(12deg);
      }
    }
  }
}

.features {
  padding: 80px 0 80px;

  .content {
    .features_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;

      img {
        border-radius: 20px;
      }
    }
  }
}

.care {
  padding: 80px 0 80px;

  .content {
    .care_list {
      display: flex;
      justify-content: center;
      gap: 24px;

      .care_card {
        padding: 34px 28px;
        width: 300px;
        background: var(--white);
        border-radius: 20px;
        box-shadow:
          0 1px 4px rgba(15,23,41,.04),
          0 8px 28px rgba(15,23,41,.06);

        .card_icon {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin: 0 auto 18px;

          svg { 
            width: 24px; 
            height: 24px; 
          }
        }

        .card_title {
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 14px;
          text-align: center;
        }
        .card_description {
          font-size: 15px;
          text-align: center;
          color: var(--text-grey);
        }
      }
    }
  }
}

.footer {
  background: var(--bg-dark);
  color: var(--text-white);
  padding: 40px 0 0;

  .content {
    .footer_top {
      display: flex;
      justify-content: space-between;

      .footer_left {
        margin-bottom: 32px;

        .footer_name {
          font-size: 20px;
          font-weight: 700;
          color: var(--white);
          margin-bottom: 10px;
        }
        .footer_text {
          font-size: 13px;
          line-height: 1.5;
          margin-bottom: 14px;
        }
        .footer_social {
          display: flex;
          gap: 12px;

          a {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(255,255,255,.06);
            color: var(--text-white);
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
              width: 18px;
              height: 18px;
            }
            &:hover {
              background: rgba(255,255,255,.12);
              color: var(--white);
            }
          }

        }
      }

      .footer_right {
        display: flex;
        gap: 64px;

        .footer_section {
          .section_text {
            font-size: 13px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 12px;
            letter-spacing: 0.02em;
          }
          .section_links {
            display: flex;
            flex-direction: column;
            gap: 12px;

            a {
              font-size: 14px;
              color: var(--text-white);

              &:hover {
                color: var(--white);
              }
            }
          }
        }
      }
    }

    .footer-bottom {
      padding: 16px 0 18px;
      font-size: 12px;
      text-align: center;
      border-top: 1px solid rgba(255,255,255,.08);
      color: rgba(200,210,226,.4);
    }
  }
}