:root {
    --meddic-red: #d71920;
    --meddic-blue: #061b47;
    --meddic-cyan: #00c8ff;
    --meddic-ink: #071a44
}

.main-nav a.active {
    color: var(--cyan)
}

.meddic-hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(2, 8, 20, .94) 0%, rgba(2, 8, 20, .62) 43%, rgba(2, 8, 20, .55) 100%), url('../img/card-sales.webp') center/cover no-repeat
}

.meddic-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 43%, rgba(0, 210, 255, .45) 0 .4%, rgba(0, 140, 255, .26) 2.2%, rgba(0, 65, 160, .14) 12%, rgba(2, 8, 20, 0) 34%)
}

.meddic-hero-content {
    position: relative;
    z-index: 2;
    width: min(900px, 92vw);
    padding-left: 4vw;
    padding-top: 90px
}

.meddic-hero h1 {
    font-size: clamp(50px, 7vw, 104px);
    line-height: .98;
    margin: 14px 0 28px
}

.meddic-hero h1 span {
    color: var(--cyan)
}

.meddic-logo-card {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .65);
    margin-bottom: 26px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .3)
}

.meddic-services .service-card {
    min-height: 520px
}

.meddic-services .training {
    background-image: url('../img/card-sales.webp')
}

.meddic-services .reviews {
    background-image: url('../img/insight-sales.png')
}

.meddic-services .ai {
    background-image: url('../img/insight-ai.png')
}

.sub-hero {
    min-height: 56vh;
    padding: calc(var(--header-height) + 60px) 4vw 70px;
    display: flex;
    align-items: end;
    background-size: cover;
    background-position: center
}

.sub-hero h1 {
    font-size: clamp(46px, 6vw, 88px);
    line-height: .98;
    margin: 10px 0 24px
}

.sub-hero p {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.5;
    max-width: 820px;
    color: #dbe4f5
}

.content-dark {
    background: var(--deep);
    color: white;
    padding: 72px 4vw
}

.content-light {
    background: var(--soft);
    color: var(--ink);
    padding: 72px 4vw
}

.premium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px
}

.premium-card {
    position: relative;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px;
    min-height: 230px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18)
}

.content-light .premium-card {
    background: white;
    border: 1px solid #dce5f4;
    box-shadow: 0 14px 40px rgba(6, 27, 71, .08)
}

.premium-card h3 {
    color: var(--cyan);
    font-size: 25px;
    margin-top: 0
}

.content-light .premium-card h3 {
    color: #005bd8
}

.premium-card p,
.premium-card li {
    color: #dbe4f5;
    line-height: 1.65
}

.content-light .premium-card p,
.content-light .premium-card li {
    color: #31415c
}

.premium-card ul {
    padding-left: 18px
}

.training-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(6, 27, 71, .08)
}

.training-table th {
    background: #061b47;
    color: white;
    text-align: left;
    padding: 18px
}

.training-table td {
    padding: 18px;
    border-top: 1px solid #dce5f4
}

.training-table tr:nth-child(even) {
    background: #f6f8fc
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.faq-item {
    background: white;
    color: var(--ink);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 14px 40px rgba(6, 27, 71, .08)
}

.faq-item h3 {
    color: #005bd8
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.contact-form .full {
    grid-column: 1/-1
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    border: 1px solid #ccd6e6;
    border-radius: 8px;
    padding: 15px;
    font: inherit
}

.contact-form label {
    display: grid;
    gap: 8px;
    font-weight: 800;
    color: var(--ink)
}

.status-box {
    margin-bottom: 18px;
    padding: 14px;
    border-radius: 8px;
    font-weight: 800
}

.status-box.ok {
    background: #dcfce7;
    color: #166534
}

.status-box.missing,
.status-box.mailerror,
.status-box.captcha {
    background: #fee2e2;
    color: #991b1b
}

.book-cover {
    width: 120px;
    height: 170px;
    margin: 0 0 18px;
    border: 1px solid rgba(255, 255, 255, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.1;
    background: linear-gradient(135deg, #061b47, #020814)
}

.stamp {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ff8a00;
    border: 4px solid #ffd6a3;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    transform: rotate(6deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25)
}

@media(max-width:1050px) {

    .premium-grid,
    .faq-list {
        grid-template-columns: 1fr 1fr
    }

    .meddic-services .service-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:720px) {

    .premium-grid,
    .faq-list,
    .contact-form {
        grid-template-columns: 1fr
    }

    .meddic-hero h1 {
        font-size: 44px
    }

    .sub-hero h1 {
        font-size: 42px
    }
}