:root {      --petrol: #304448;      --petrol-soft: rgba(48, 68, 72, 0.7);      --petrol-faint: rgba(48, 68, 72, 0.18);      --petrol-line: rgba(48, 68, 72, 0.12);      --sand: #F0EBE4;      --sand-warm: #E8E1D6;      --terracotta: #be6c49;      --terracotta-soft: rgba(158, 82, 72, 0.15);    }      * {      box-sizing: border-box;      margin: 0;      padding: 0;    }      body {      font-family: 'Montserrat', sans-serif;      background: var(--sand);      color: var(--petrol);      line-height: 1.6;      font-weight: 300;    }      .section {      max-width: 1070px;      margin: 0 auto;      padding: 80px 15px;    }      .header-row {      display: grid;      grid-template-columns: 1fr auto;      gap: 80px;      align-items: center;      margin-bottom: 50px;    }      .header-text {      max-width: 640px;    }      h2 {      font-family: 'Belleza', serif;      font-size: 56px;      font-weight: 400;      line-height: 1.1;      margin-bottom: 32px;      color: var(--petrol);      opacity: 0;      animation: fadeUp 1s ease-out 0.1s forwards;    }      h2 .accent {      color: var(--terracotta);      font-style: italic;    }      .lead {      font-size: 1.05rem;      color: var(--petrol-soft);      line-height: 1.7;      opacity: 0;      animation: fadeUp 1s ease-out 0.4s forwards;    }      /* SIEGEL */      .siegel-wrap {      display: flex;      flex-direction: column;      align-items: center;      gap: 18px;      opacity: 0;      animation: fadeUp 1.2s ease-out 0.5s forwards;    }      .siegel {      position: relative;      width: 200px;      height: 200px;    }      .siegel-ring-outer,    .siegel-ring-inner {      position: absolute;      inset: 0;      border-radius: 50%;      border: 1.5px solid var(--petrol);    }      .siegel-ring-inner {      inset: 14px;      border-width: 1px;      opacity: 0.5;    }      .siegel-core {      position: absolute;      inset: 32px;      display: flex;      align-items: center;      justify-content: center;    }      .siegel-core svg {      width: 100%;      height: 100%;    }      .siegel-label {      font-family: 'Belleza', serif;      font-size: 0.95rem;      letter-spacing: 0.18em;      text-transform: uppercase;      color: var(--petrol-soft);      text-align: center;    }      /* BENEFITS */      .benefits {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));      gap: 1px;      background: var(--petrol-line);      border-top: 1px solid var(--petrol-line);      border-left: 1px solid var(--petrol-line);    }      .benefit {      background: var(--sand);      padding: 44px 36px;      transition: background 0.6s ease;      opacity: 0;      animation: fadeUp 0.9s ease-out forwards;      border-right: 1px solid var(--petrol-line);      border-bottom: 1px solid var(--petrol-line);      margin-right: -1px;      margin-bottom: -1px;      position: relative;    }      .benefit:nth-child(1) {      animation-delay: 0.7s;    }      .benefit:nth-child(2) {      animation-delay: 0.85s;    }      .benefit:nth-child(3) {      animation-delay: 1s;    }      .benefit:hover {      background: var(--sand-warm);    }      .benefit-number {      font-family: 'Belleza', serif;      font-size: 1.6rem;      color: var(--terracotta);      margin-bottom: 20px;      display: block;      letter-spacing: 0.05em;    }      .benefit h3 {      font-family: 'Belleza', serif;      font-size: 1.4rem;      font-weight: 400;      color: var(--petrol);      margin-bottom: 14px;      line-height: 1.25;    }      .benefit p {      font-size: 0.92rem;      color: var(--petrol-soft);      line-height: 1.65;    }      @keyframes fadeUp {      from {        opacity: 0;        transform: translateY(20px);      }        to {        opacity: 1;        transform: translateY(0);      }    }    @media (max-width:1024px){      .section {        padding: 60px 15px;      }    }      @media (max-width: 900px) {          .header-row {        grid-template-columns: 1fr;        gap: 40px;        margin-bottom: 40px;        text-align: left;      }        .siegel-wrap {        align-items: center;      }        h2 {        font-size: 40px;        margin-bottom: 24px;      }        .lead {        font-size: 1rem;      }    }      @media (max-width: 600px) {        .header-row {        gap: 32px;        margin-bottom: 32px;      }        h2 {        font-size: 28px;        line-height: 1.2;        margin-bottom: 20px;      }        .lead {        font-size: 0.95rem;        line-height: 1.6;      }        .benefit {        padding: 32px 24px;      }        .benefit h3 {        font-size: 1.2rem;        margin-bottom: 12px;      }        .benefit p {        font-size: 0.88rem;      }        .benefit-number {        font-size: 1.4rem;        margin-bottom: 14px;      }        .siegel {        width: 150px;        height: 150px;      }        .siegel-core {        inset: 24px;      }        .siegel-label {        font-size: 0.85rem;        letter-spacing: 0.15em;      }    }      @media (max-width: 380px) {        h2 {        font-size: 24px;      }        .benefit {        padding: 28px 20px;      }        .siegel {        width: 130px;        height: 130px;      }        .siegel-core {        inset: 20px;      }    }