@import "colors.css";

:root {
   --font-heading: "Manrope", sans-serif;
   --font-body: "Roboto", sans-serif;
}

body {
   margin: 0;
   padding: 0;
   font-family: var(--font-body);
   font-size: 18px;
   background-color: var(--color-body-bg);
   background-image: radial-gradient(circle at 15% 0%, rgba(111, 120, 80, 0.06), transparent 40%);
   color: var(--color-text);
   line-height: 1.65;
}

.wrapper {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   overflow: clip;
   margin: 0;
}

[class*="__container"] {
   max-inline-size: 1310px;
   margin-inline: auto;
}

.container {
   max-width: 1300px;
   margin: 0 auto;
   padding: 60px 20px;
}

h1,
h2,
h3 {
   color: var(--color-text);
   font-family: var(--font-heading);
   font-weight: 700;
   letter-spacing: -0.01em;
   margin-top: 0;
}

h1 {
   font-size: 2.5rem;
   line-height: 1.15;
   margin-bottom: 12px;
}

h2 {
   font-size: 1.85rem;
   position: relative;
   display: inline-block;
   padding-bottom: 14px;
   margin-bottom: 44px;
}

h2::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

section {
   margin-bottom: 0;
   border-bottom: 1px solid rgba(26, 31, 34, 0.08);
}

.paragraph {
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--color-accent);
   margin-bottom: 30px;
}

.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 30px;
}

/* Cards */
.card {
   background-color: var(--color-bg);
   border: 1px solid rgba(32, 28, 23, 0.08);
   border-top: 5px solid var(--color-primary);
   padding: 30px;
   border-radius: 0 0 10px 10px;
   box-shadow: 0 6px 18px rgba(32, 28, 23, 0.06);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
}

.card:hover {
   transform: translateY(-6px);
   border-top-color: var(--color-accent);
   box-shadow: 0 14px 28px rgba(32, 28, 23, 0.12);
}

.card h3 {
   color: var(--color-h2-text);
   font-size: 1.2rem;
   margin-bottom: 15px;
}

ul.feature-list {
   list-style: none;
   padding: 0;
}

ul.feature-list li {
   position: relative;
   padding-left: 25px;
   margin-bottom: 15px;
}

ul.feature-list li::before {
   content: '■';
   color: var(--color-accent);
   position: absolute;
   left: 2px;
   top: 0px;
   font-size: 15px;
}