: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;    }      .eyebrow {      font-family: 'Belleza', serif;      font-size: 1.1rem;      font-weight: 400;      letter-spacing: 0.2em;      text-transform: uppercase;      color: var(--terracotta);      margin-bottom: 24px;      opacity: 0;      animation: fadeUp 0.9s ease-out 0.1s forwards;    }      h2 {      font-family: 'Belleza', serif;      font-size: 48px;      font-weight: 400;      line-height: 1.2;      margin-bottom: 80px;      max-width: 820px;      color: var(--petrol);      opacity: 0;      animation: fadeUp 1s ease-out 0.25s forwards;    }      .grid {      display: grid;      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));      gap: 1px;      background: var(--petrol-line);      border-top: 1px solid var(--petrol-line);      border-left: 1px solid var(--petrol-line);    }      .card {      background: var(--sand);      padding: 48px 40px;      position: relative;      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;    }      .card:nth-child(1) { animation-delay: 0.7s; }    .card:nth-child(2) { animation-delay: 0.8s; }    .card:nth-child(3) { animation-delay: 0.9s; }    .card:nth-child(4) { animation-delay: 1.0s; }    .card:nth-child(5) { animation-delay: 1.1s; }    .card:nth-child(6) { animation-delay: 1.2s; }      .card:hover { background: var(--sand-warm); }    .card:hover .icon-circle { background: var(--terracotta-soft); }    .card:hover .icon-circle .dot { transform: scale(1.3); }      .icon-wrap { margin-bottom: 28px; }      .icon-circle {      width: 52px;      height: 52px;      border: 1px solid var(--petrol-faint);      border-radius: 50%;      display: flex;      align-items: center;      justify-content: center;      position: relative;      transition: all 0.5s ease;    }      .icon-circle .dot {      width: 10px;      height: 10px;      background: var(--terracotta);      border-radius: 50%;      transition: transform 0.5s ease;      animation: breathe 4s ease-in-out infinite;    }      .card:nth-child(2) .icon-circle .dot { animation-delay: 0.5s; }    .card:nth-child(3) .icon-circle .dot { animation-delay: 1s; }    .card:nth-child(4) .icon-circle .dot { animation-delay: 1.5s; }    .card:nth-child(5) .icon-circle .dot { animation-delay: 2s; }    .card:nth-child(6) .icon-circle .dot { animation-delay: 2.5s; }      .icon-circle.ring-2::before {      content: '';      position: absolute;      inset: 8px;      border: 1px solid var(--petrol-faint);      border-radius: 50%;    }      .icon-circle.ring-3::before {      content: '';      position: absolute;      inset: 6px;      border: 1px solid var(--petrol-faint);      border-radius: 50%;    }      .icon-circle.ring-3::after {      content: '';      position: absolute;      inset: 14px;      border: 1px solid var(--petrol-faint);      border-radius: 50%;    }      .icon-circle.cross::after {      content: '';      position: absolute;      width: 30px;      height: 1px;      background: var(--petrol-faint);    }    .icon-circle.cross::before {      content: '';      position: absolute;      width: 1px;      height: 30px;      background: var(--petrol-faint);    }      .icon-circle.tick::after {      content: '';      position: absolute;      top: -4px;      left: 50%;      width: 1px;      height: 8px;      background: var(--petrol-soft);      transform: translateX(-50%);    }      .card h3 {      font-family: 'Belleza', serif;      font-size: 1.5rem;      font-weight: 400;      color: var(--petrol);      margin-bottom: 16px;      line-height: 1.3;    }      .card p {      font-size: 0.95rem;      color: var(--petrol-soft);      margin-bottom: 20px;      line-height: 1.65;    }      .card ul {      list-style: none;      padding: 0;    }      .card li {      font-size: 0.9rem;      color: var(--petrol-soft);      padding-left: 18px;      position: relative;      margin-bottom: 8px;      line-height: 1.5;    }      .card li::before {      content: '';      position: absolute;      left: 0;      top: 9px;      width: 6px;      height: 1px;      background: var(--terracotta);    }      @keyframes fadeUp {      from { opacity: 0; transform: translateY(20px); }      to { opacity: 1; transform: translateY(0); }    }      @keyframes breathe {      0%, 100% { opacity: 1; transform: scale(1); }      50% { opacity: 0.6; transform: scale(0.85); }    }      @media (max-width: 900px) {      h2 { font-size: 36px; margin-bottom: 60px; }    }    @media (max-width:1024px){        .section {      padding: 60px 15px;    }    }      @media (max-width: 600px) {      h2 { font-size: 28px; line-height: 1.25; margin-bottom: 48px; }      .eyebrow { font-size: 0.95rem; margin-bottom: 20px; }      .card { padding: 36px 28px; }      .card h3 { font-size: 1.35rem; }      .icon-circle { width: 46px; height: 46px; }      .icon-wrap { margin-bottom: 22px; }    }      @media (max-width: 380px) {      h2 { font-size: 24px; }      .card { padding: 32px 22px; }    }