:root {
    --gm-green: #2f8737;
    --gm-green-2: #4f9847;
    --gm-green-dark: #0d5b31;
    --gm-soft: #ecf8e7;
    --gm-text: #152019;
    --gm-muted: #59675f;
    --gm-border: rgba(59, 102, 61, .14)
}

.gm-page {
    width: 100%;
    padding: 18px 22px 70px;
    overflow: hidden;
    background: #fff;
    color: var(--gm-text);
    font-family: "DM Sans", sans-serif;
    font-size: 16px
}

.gm-hero {
    position: relative;
    width: min(1420px, 100%);
    min-height: 700px;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(circle at 14% 28%, rgba(194, 231, 182, .35), transparent 36%), linear-gradient(120deg, #f9fcf7 0%, #fff 48%, #edf8e9 100%)
}

.gm-hero__copy {
    position: relative;
    z-index: 4;
    padding: 92px 45px 55px 58px
}

.gm-eyebrow {
    color: #2f7f37;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1.2px;
    text-transform: uppercase
}

.gm-hero h1 {
    max-width: 590px;
    margin: 24px 0 0;
    font-size: 62px;
    font-weight: 700;
    line-height: .98;
    letter-spacing: -2.3px
}

.gm-hero h1 span {
    display: block;
    color: var(--gm-green)
}

.gm-rule {
    width: 48px;
    height: 2px;
    margin-top: 24px;
    background: var(--gm-green-2)
}

.gm-hero__copy>p {
    max-width: 535px;
    margin: 23px 0 0;
    color: var(--gm-muted);
    font-size: 16px;
    line-height: 1.75
}

.gm-hero__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 29px
}

.gm-hero__features article {
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 10px;
    border-right: 1px solid rgba(65, 108, 66, .14);
    text-align: center
}

.gm-hero__features article:last-child {
    border-right: 0
}

.gm-hero__features i {
    color: var(--gm-green-dark);
    font-size: 27px
}

.gm-hero__features strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35
}

.gm-hero__visual {
    position: relative;
    min-height: 700px;
    overflow: hidden
}

.gm-hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at 60% 35%, rgba(111, 174, 82, .16), transparent 38%), linear-gradient(90deg, #f8fbf6 0%, rgba(248, 251, 246, .10) 18%, transparent 42%)
}

.gm-hero__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .42
}

.gm-hero__products {
    position: absolute;
    z-index: 4;
    left: 2%;
    right: 2%;
    bottom: 20px
}

.gm-hero__products img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.gm-hero__badge {
    position: absolute;
    z-index: 5;
    right: 22px;
    bottom: 72px;
    width: 290px;
    min-height: 132px;
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 20px;
    background: linear-gradient(145deg, #0c5b2f, #2f8b3b);
    color: #fff
}

.gm-hero__badge>i {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: 25px
}

.gm-hero__badge strong {
    display: block;
    font-size: 16px;
    line-height: 1.4
}

.gm-section {
    width: min(1320px, calc(100% - 44px));
    margin: 30px auto 0
}

.gm-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px
}

.gm-section-title>span {
    width: 75px;
    height: 1px;
    background: #b7d5b1
}

.gm-section-title h2 {
    margin: 0;
    color: #25432d;
    font-size: 28px;
    font-weight: 700;
    text-align: center
}

.gm-section-kicker {
    color: #245e2d;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase
}

.gm-small-rule {
    width: 38px;
    height: 2px;
    margin-top: 12px;
    background: #4f9847
}

.gm-therapy {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 25px;
    padding: 28px 24px;
    border: 1px solid var(--gm-border);
    border-radius: 22px;
    background: #fff
}

.gm-therapy__intro p {
    margin: 18px 0 0;
    color: #5b6962;
    font-size: 15px;
    line-height: 1.7
}

.gm-therapy__grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 12px 8px
}

.gm-therapy-item {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 6px;
    text-align: center
}

.gm-therapy-item i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid #d6e7d3;
    border-radius: 50%;
    background: #f4faf2;
    color: var(--gm-green-dark);
    font-size: 22px
}

.gm-therapy-item span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25
}

.gm-why__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px
}

.gm-why-card {
    overflow: hidden;
    padding: 20px 18px 0;
    border: 1px solid var(--gm-border);
    border-radius: 19px;
    background: #fff;
    text-align: center
}

.gm-why-card__icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(145deg, #176a33, #0a4f29);
    color: #fff;
    font-size: 24px
}

.gm-why-card h3 {
    margin: 15px 0 0;
    color: #2b5a34;
    font-size: 17px;
    line-height: 1.25
}

.gm-why-card p {
    min-height: 106px;
    margin: 11px 0 0;
    color: #5b6962;
    font-size: 14px;
    line-height: 1.6
}

.gm-why-card img {
    width: calc(100% + 36px);
    height: 175px;
    margin: 17px -18px 0;
    object-fit: cover
}

.gm-dosage {
    padding: 24px 22px 20px;
    border: 1px solid var(--gm-border);
    border-radius: 22px
}

.gm-dosage__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr)
}

.gm-dosage__grid article {
    min-height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 6px;
    border-right: 1px solid #e4ece2;
    text-align: center
}

.gm-dosage__grid article:last-child {
    border-right: 0
}

.gm-dosage__grid i {
    color: var(--gm-green-dark);
    font-size: 21px
}

.gm-dosage__grid span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25
}

.gm-quality {
    min-height: 220px;
    display: grid;
    grid-template-columns: 340px 1fr 220px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--gm-border);
    border-radius: 22px;
    background: radial-gradient(circle at 92% 50%, rgba(186, 229, 169, .18), transparent 28%), #fff
}

.gm-quality__image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gm-quality__content {
    padding: 28px 30px 24px
}

.gm-quality__content h2 {
    margin: 0;
    color: #2b5a34;
    font-size: 26px
}

.gm-quality__content>p {
    margin: 11px 0 0;
    color: #5b6962;
    font-size: 15px;
    line-height: 1.65
}

.gm-quality__points {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 20px
}

.gm-quality__points article {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-right: 1px solid #e2eae0;
    text-align: center
}

.gm-quality__points article:last-child {
    border-right: 0
}

.gm-quality__points i {
    color: var(--gm-green-dark);
    font-size: 21px
}

.gm-quality__points span {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35
}

.gm-quality__seal {
    display: grid;
    place-items: center;
    padding: 20px
}

.gm-quality__seal-inner {
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 5px solid #2f8737;
    border-radius: 50%;
    color: #0d5b31;
    box-shadow: inset 0 0 0 8px #eaf6e5
}

.gm-quality__seal-inner small {
    font-size: 19px;
    font-weight: 800
}

.gm-quality__seal-inner strong {
    font-size: 15px;
    letter-spacing: 1px
}

.gm-trust {
    position: relative;
    min-height: 155px;
    overflow: hidden;
    border-radius: 22px
}

.gm-trust>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gm-trust__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, #075b32 0%, rgba(7, 91, 50, .96) 45%, rgba(7, 91, 50, .30) 75%, rgba(7, 91, 50, .04) 100%)
}

.gm-trust__content {
    position: relative;
    z-index: 3;
    min-height: 155px;
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: center;
    gap: 18px;
    padding: 22px 32px;
    color: #fff
}

.gm-trust__icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    color: #b7dc84;
    font-size: 29px
}

.gm-trust h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.15
}

.gm-trust p {
    max-width: 650px;
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .84);
    font-size: 14px;
    line-height: 1.55
}

.gm-contact {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 17px 24px;
    border: 1px solid var(--gm-border);
    border-radius: 18px;
    background: linear-gradient(90deg, #f8fbf6, #edf8e9)
}

.gm-contact__left {
    display: flex;
    align-items: center;
    gap: 15px
}

.gm-contact__left>i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid #cfe3cb;
    border-radius: 50%;
    color: var(--gm-green-dark);
    font-size: 20px
}

.gm-contact__left strong {
    display: block;
    font-size: 15px
}

.gm-contact__left span {
    display: block;
    margin-top: 4px;
    color: #607067;
    font-size: 14px
}

.gm-contact>a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 22px;
    border-radius: 12px;
    background: #2f8737;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none
}

.gm-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease, transform .65s ease
}

.gm-reveal.gm-visible {
    opacity: 1;
    transform: none
}

@media(max-width:1180px) {
    .gm-hero h1 {
        font-size: 54px
    }

    .gm-therapy {
        grid-template-columns: 1fr
    }

    .gm-therapy__grid {
        grid-template-columns: repeat(6, 1fr)
    }

    .gm-why__grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .gm-dosage__grid {
        grid-template-columns: repeat(8, 1fr)
    }

    .gm-quality {
        grid-template-columns: 280px 1fr
    }

    .gm-quality__seal {
        grid-column: 1/-1
    }
}

@media(max-width:900px) {
    .gm-page {
        padding: 12px 12px 55px
    }

    .gm-hero {
        grid-template-columns: 1fr
    }

    .gm-hero__copy {
        padding: 85px 26px 32px;
        text-align: center
    }

    .gm-rule {
        margin-left: auto;
        margin-right: auto
    }

    .gm-hero__copy>p {
        margin-left: auto;
        margin-right: auto
    }

    .gm-hero__visual {
        min-height: 510px
    }

    .gm-section {
        width: 100%
    }

    .gm-therapy__grid {
        grid-template-columns: repeat(4, 1fr)
    }

    .gm-why__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gm-quality {
        grid-template-columns: 1fr
    }

    .gm-quality__image {
        height: 280px
    }

    .gm-quality__seal {
        grid-column: auto
    }

    .gm-contact {
        flex-direction: column;
        text-align: center
    }
}

@media(max-width:620px) {
    .gm-page {
        padding: 8px 8px 45px
    }

    .gm-hero {
        border-radius: 20px
    }

    .gm-hero h1 {
        font-size: 40px;
        letter-spacing: -1.2px
    }

    .gm-hero__copy>p {
        font-size: 15px
    }

    .gm-hero__features {
        grid-template-columns: repeat(2, 1fr)
    }

    .gm-hero__features article:nth-child(2) {
        border-right: 0
    }

    .gm-hero__features article:nth-child(-n+2) {
        border-bottom: 1px solid rgba(65, 108, 66, .14)
    }

    .gm-hero__visual {
        min-height: 390px
    }

    .gm-hero__badge {
        right: 10px;
        bottom: 18px;
        width: calc(100% - 20px)
    }

    .gm-section-title>span {
        width: 34px
    }

    .gm-section-title h2 {
        font-size: 22px
    }

    .gm-therapy {
        padding: 22px 14px
    }

    .gm-therapy__intro {
        text-align: center
    }

    .gm-small-rule {
        margin-left: auto;
        margin-right: auto
    }

    .gm-therapy__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gm-why__grid {
        grid-template-columns: 1fr
    }

    .gm-why-card p {
        min-height: auto
    }

    .gm-dosage__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .gm-quality__content {
        padding: 24px 18px
    }

    .gm-quality__points {
        grid-template-columns: repeat(2, 1fr)
    }

    .gm-trust__content {
        grid-template-columns: 1fr;
        text-align: center
    }

    .gm-trust__icon {
        margin: auto
    }

    .gm-contact__left {
        flex-direction: column
    }
}

@media(prefers-reduced-motion:reduce) {
    .gm-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }
}