/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#F6F5F0;color:#16201A;font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:#1E6B3C}
a:hover{color:#14492A}
img{display:block;max-width:100%;height:auto}

/* === Layout === */
.page{padding:64px 24px 80px}
.container{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:56px}

/* === Header === */
.site-header{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.site-header__eyebrow{margin:0;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1E6B3C}
.site-header__title{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:48px;line-height:1.1;font-weight:700;max-width:820px}
.site-header__desc{margin:0;font-size:18px;color:#4A554D;max-width:760px}

/* === Hydroball intro === */
.intro{background:#E6EFE6;border-radius:16px;padding:28px 32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.intro__text{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:8px}
.intro__eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#1E6B3C}
.intro__heading{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:24px;line-height:1.25;font-weight:700}
.intro__body{margin:0;color:#2F3B33}
.intro__img{flex:1 1 280px;min-width:0;width:100%;height:220px;object-fit:cover;border-radius:12px}

/* === Cards grid === */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}

/* === Card (shared) === */
.card{background:#fff;border:1px solid #DAD9D1;border-radius:20px;padding:32px 28px;display:grid;grid-template-rows:subgrid;grid-row:span 6;gap:24px}
.card--featured{background:#17452A;color:#F6F5F0;border:none;box-shadow:0 16px 40px rgba(23,69,42,.25)}

/* Card header */
.card__header{display:flex;flex-direction:column;gap:6px}
.card__header-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card__eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A554D}
.card--featured .card__eyebrow{color:#C9DCCD}
.card__badge{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#F2C14E;color:#16201A;padding:4px 10px;border-radius:999px;white-space:nowrap}
.card__name{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:28px;font-weight:700}
.card__desc{margin:0;color:#4A554D}
.card--featured .card__desc{color:#C9DCCD}

/* Hydroball box */
.card__hb{border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.card__hb--light{background:#F3F2EC}
.card__hb--green{background:#E6EFE6}
.card__hb--dark{background:#20553A}
.card__hb-top{display:flex;align-items:center;gap:10px}
.card__hb-icons{display:flex;gap:2px}
.card__hb-label{margin:0;font-weight:600}
.card__hb-label--muted{color:#5F6862}
.card__hb-bar-wrap{display:flex;flex-direction:column;gap:6px}
.card__hb-bar{height:10px;border-radius:999px}
.card__hb-bar--empty{background:#E4E3DC}
.card__hb-bar--partial{background:#2E6A48;overflow:hidden}
.card__hb-bar--partial-fill{width:6%;height:100%;background:#9FD3AE;border-radius:999px}
.card__hb-bar--full{background:#1E6B3C}
.card__hb-meta{display:flex;justify-content:space-between;font-size:13px;color:#5F6862}
.card--featured .card__hb-meta{color:#C9DCCD}
.card__hb--green .card__hb-meta{color:#2F3B33}

/* Discount block */
.card__discount{display:flex;flex-direction:column;gap:4px}
.card__discount-pct{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:64px;line-height:1;font-weight:700;color:#1E6B3C}
.card--featured .card__discount-pct{color:#fff}
.card__discount-label{margin:0;font-weight:500}
.card__discount-note{margin:0;color:#4A554D}
.card--featured .card__discount-note{color:#C9DCCD}
.card__discount-note strong{color:#16201A}
.card--featured .card__discount-note strong{color:#fff}

/* Benefits list */
.card__benefits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.card__benefit{display:flex;gap:10px;align-items:flex-start}
.card__benefit svg{flex:none;margin-top:2px}

/* Screenshot in card 3 */
.card__screenshot{display:flex;flex-direction:column;gap:8px}
.card__screenshot img{width:100%;height:180px;object-fit:contain;border-radius:10px;background:#fff}
.card__screenshot p{margin:0;font-size:13px;color:#4A554D}

/* Examples footer */
.card__examples{margin-top:auto;border-top:1px solid #E4E3DC;padding-top:20px;display:flex;flex-direction:column;gap:12px}
.card--featured .card__examples{border-color:#2E5E40}
.card__examples-title{margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4A554D}
.card--featured .card__examples-title{color:#C9DCCD}
.card__example{display:flex;flex-direction:column;gap:2px}
.card__example-name{margin:0;font-weight:600}
.card__example-desc{margin:0;font-size:14px;color:#4A554D}
.card--featured .card__example-desc{color:#C9DCCD}
.card__example-prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:4px}
.card__example-price{font-size:18px;font-weight:700}
.card--featured .card__example-price{color:#fff}
.card__example-old{font-size:14px;color:#5F6862}
.card--featured .card__example-old{color:#C9DCCD}
.card__example-save{font-size:13px;font-weight:700;background:#F2C14E;color:#16201A;padding:3px 10px;border-radius:999px}
.card__example-bonus{margin:0;font-size:13px;color:#1E6B3C;font-weight:600}

/* === Disclaimer text === */
.disclaimer{margin:-32px 0 0;text-align:center;font-size:14px;color:#4A554D}

/* === Comparison table === */
.compare{display:flex;flex-direction:column;gap:20px}
.compare__title{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:32px;font-weight:700;text-align:center}
.compare__wrap{overflow-x:auto;background:#fff;border:1px solid #DAD9D1;border-radius:16px}
.compare__table{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.compare__table thead th{padding:18px 20px;border-bottom:1px solid #DAD9D1;text-align:left;font-weight:600;color:#4A554D}
.compare__table thead th:not(:first-child){font-family:'Space Grotesk',Inter,sans-serif;font-size:17px;color:#16201A}
.compare__table tbody th{padding:14px 20px;border-bottom:1px solid #ECEBE5;text-align:left;font-weight:500}
.compare__table tbody td{padding:14px 20px;border-bottom:1px solid #ECEBE5}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td{border-bottom:0}
.compare__table .col-highlight{background:#E6EFE6}
.compare__table tbody .col-highlight{background:#F2F7F2}
.compare__table .cell--bold{font-weight:600}
.compare__table .cell--muted{color:#6B746D}

/* === How it works === */
.how{display:flex;flex-direction:column;gap:20px}
.how__title{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:32px;font-weight:700;text-align:center}
.how__grid{display:flex;flex-wrap:wrap;gap:16px}
.how__item{flex:1 1 340px;min-width:0;background:#fff;border:1px solid #DAD9D1;border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:6px}
.how__item h3{margin:0;font-size:17px;font-weight:700}
.how__item p{margin:0;color:#4A554D}

/* === CTA footer === */
.cta{background:#16201A;color:#F6F5F0;border-radius:20px;padding:36px 32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta__text{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cta__heading{margin:0;font-family:'Space Grotesk',Inter,sans-serif;font-size:28px;font-weight:700}
.cta__desc{margin:0;color:#C9D1CB}
.cta__contact{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.cta__name{margin:0;font-weight:600}
.cta__phone{color:#fff;font-size:22px;font-weight:700;text-decoration:none}
.cta__phone:hover{color:#fff;text-decoration:underline}
.cta__email{color:#9FD3AE}

/* === Footer note === */
.footer-note{margin:0;text-align:center;font-size:14px;color:#4A554D}

/* === Responsive === */
@media(max-width:1023px){
  .cards{grid-template-columns:1fr}
  .card{grid-row:span 1;grid-template-rows:none;display:flex;flex-direction:column;gap:24px}
  .site-header__title{font-size:36px}
}
@media(max-width:600px){
  .page{padding:40px 16px 56px}
  .container{gap:40px}
  .site-header__title{font-size:28px}
  .site-header__desc{font-size:16px}
  .card__discount-pct{font-size:48px}
  .cta{padding:28px 24px}
  .cta__heading{font-size:22px}
  .intro{padding:20px;gap:16px}
}