/* ==========================================================================
   Actiefhost content blocks: shared building blocks for marketing pages
   (sections, icon cards, steps, comparison table, stats, CTA band).
   Palette follows webhosting-showcase.css: navy #131b5f, amber #d97706,
   green #059669, teal #0f766e.
   ========================================================================== */

.ah-sec {
    position: relative;
    padding: 76px 0;
    background: #ffffff;
}

.ah-sec--tint {
    background: #f7f9fc;
    border-top: 1px solid #e7ecf3;
    border-bottom: 1px solid #e7ecf3;
}

.ah-sec--warm {
    background:
        radial-gradient(circle at 12% 18%, rgba(217, 119, 6, .07), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(19, 27, 95, .07), transparent 46%),
        #fbfaf7;
}

.ah-sec--navy {
    background:
        radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .08), transparent 40%),
        linear-gradient(135deg, #131b5f 0%, #0b1240 100%);
    color: #dfe5f5;
}

.ah-sec--navy .ah-head h2,
.ah-sec--navy h3 {
    color: #ffffff;
}

.ah-sec--navy .ah-head p {
    color: #c7d0ea;
}

/* Section heading ------------------------------------------------------- */
.ah-head {
    max-width: 780px;
    margin: 0 auto 44px;
    text-align: center;
}

.ah-head--left {
    margin-left: 0;
    text-align: left;
}

.ah-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef2fb;
    color: #131b5f;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ah-sec--navy .ah-eyebrow {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

.ah-head h2 {
    margin: 0 0 14px;
    color: #111827;
    font-size: clamp(1.8rem, 3.2vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.ah-head p {
    margin: 0;
    color: #526173;
    font-size: 1.06rem;
    line-height: 1.7;
}

/* Icon tile --------------------------------------------------------------- */
.ah-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #eef2fb;
    color: #131b5f;
    font-size: 1.35rem;
}

.ah-icon--amber { background: #fef3e2; color: #b45309; }
.ah-icon--green { background: #e6f6ef; color: #047857; }
.ah-icon--teal { background: #e3f4f2; color: #0f766e; }
.ah-icon--rose { background: #fdecef; color: #be123c; }
.ah-icon--violet { background: #f1ecfd; color: #5b21b6; }

.ah-sec--navy .ah-icon {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
}

/* Cards grid -------------------------------------------------------------- */
.ah-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
}

.ah-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ah-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ah-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 28px;
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.ah-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 18px 32px rgba(19, 27, 95, .1);
}

.ah-card h3 {
    margin: 0;
    color: #111827;
    font-size: 1.16rem;
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1.35;
}

.ah-card p {
    margin: 0;
    color: #526173;
    font-size: .97rem;
    line-height: 1.7;
}

.ah-card a:not(.ah-card__link) {
    color: #131b5f;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ah-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: #131b5f;
    font-weight: 700;
    text-decoration: none;
}

.ah-card__link i { transition: transform .2s ease; }
.ah-card:hover .ah-card__link i { transform: translateX(4px); }

.ah-card--feature { border-top: 3px solid #131b5f; }
.ah-card--feature.is-amber { border-top-color: #d97706; }
.ah-card--feature.is-green { border-top-color: #059669; }
.ah-card--feature.is-teal { border-top-color: #0f766e; }

.ah-sec--navy .ah-card {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.ah-sec--navy .ah-card p { color: #c7d0ea; }

/* Split: text + panel ----------------------------------------------------- */
.ah-split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
}

.ah-split__text h2 {
    margin: 0 0 16px;
    color: #111827;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.22;
}

.ah-split__text p {
    margin: 0 0 14px;
    color: #3d4b5f;
    font-size: 1.03rem;
    line-height: 1.75;
}

.ah-panel {
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(160deg, #131b5f 0%, #1f2a7a 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(19, 27, 95, .22);
}

.ah-panel h3 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 750;
}

/* Check list ---------------------------------------------------------------- */
.ah-checks {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ah-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.55;
}

.ah-checks li::before {
    content: "\f00c";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    background: #e6f6ef;
    color: #047857;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: .72rem;
    font-weight: 900;
}

.ah-panel .ah-checks li { color: #e3e8f7; }
.ah-panel .ah-checks li::before { background: rgba(52, 211, 153, .18); color: #6ee7b7; }

/* Numbered steps -------------------------------------------------------------- */
.ah-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    counter-reset: ah-step;
}

.ah-step {
    position: relative;
    padding: 30px 26px 26px;
    border: 1px solid #e5e9f2;
    border-radius: 16px;
    background: #ffffff;
    counter-increment: ah-step;
}

.ah-step::before {
    content: counter(ah-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #131b5f;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow: 0 0 0 6px #eef2fb;
}

.ah-step h3 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.12rem;
    font-weight: 750;
}

.ah-step p {
    margin: 0;
    color: #526173;
    font-size: .96rem;
    line-height: 1.68;
}

.ah-step a { color: #131b5f; font-weight: 600; text-decoration: underline; }

/* Stats strip ------------------------------------------------------------------ */
.ah-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
}

.ah-stat {
    padding: 22px 20px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e9f2;
    text-align: center;
}

.ah-stat strong {
    display: block;
    color: #131b5f;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.ah-stat span {
    display: block;
    margin-top: 6px;
    color: #526173;
    font-size: .92rem;
}

.ah-sec--navy .ah-stat {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.ah-sec--navy .ah-stat strong { color: #ffffff; }
.ah-sec--navy .ah-stat span { color: #c7d0ea; }

/* Comparison table ---------------------------------------------------------- */
.ah-compare-wrap {
    overflow-x: auto;
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .05);
}

.ah-compare {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
}

.ah-compare th,
.ah-compare td {
    padding: 16px 22px;
    border-bottom: 1px solid #eef1f6;
    color: #273449;
    font-size: .97rem;
    text-align: left;
    vertical-align: top;
}

.ah-compare thead th {
    background: #f7f9fc;
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
}

.ah-compare thead th.is-highlight {
    background: #131b5f;
    color: #ffffff;
}

.ah-compare td.is-highlight { background: #f5f7ff; }

.ah-compare tbody th {
    color: #111827;
    font-weight: 700;
    white-space: nowrap;
}

.ah-compare tr:last-child th,
.ah-compare tr:last-child td { border-bottom: 0; }

.ah-compare .fa-circle-check { color: #059669; margin-right: 6px; }
.ah-compare .fa-circle-minus { color: #94a3b8; margin-right: 6px; }

/* CTA band --------------------------------------------------------------------- */
.ah-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 40px 44px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .1), transparent 40%),
        linear-gradient(135deg, #131b5f 0%, #0b1240 100%);
    color: #ffffff;
}

.ah-cta h2 {
    margin: 0 0 6px;
    color: #ffffff;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
}

.ah-cta p { margin: 0; color: #c7d0ea; }

.ah-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ah-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.ah-btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #ffffff; }

@media (max-width: 1199px) {
    .ah-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .ah-sec { padding: 56px 0; }
    .ah-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ah-split { grid-template-columns: 1fr; gap: 32px; }
    .ah-cta { padding: 30px 26px; }
}

@media (max-width: 575px) {
    .ah-cards--2,
    .ah-cards--3,
    .ah-cards--4 { grid-template-columns: 1fr; }
    .ah-card { padding: 22px; }
}

/* Trust strip (overlaps the bottom of a hero) ------------------------------------ */
.ah-trust-wrap {
    position: relative;
    z-index: 3;
    margin-top: -46px;
}

.ah-trust {
    display: grid;
    grid-template-columns: repeat(var(--ah-trust-cols, 4), minmax(0, 1fr));
    gap: 0;
    border: 1px solid #e5e9f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(19, 27, 95, .12);
}

.ah-trust__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
}

.ah-trust__item + .ah-trust__item { border-left: 1px solid #eef1f6; }

.ah-trust__item strong {
    display: block;
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
}

.ah-trust__item span:not(.ah-icon) {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .86rem;
    line-height: 1.4;
}

/* Product cards ------------------------------------------------------------------- */
.ah-product__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ah-product__price { text-align: right; line-height: 1.1; }
.ah-product__price span { display: block; color: #64748b; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ah-product__price strong { color: #111827; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.ah-product__price small { color: #64748b; font-size: .85rem; }

.ah-product h3 { font-size: 1.3rem; }

.ah-checks--compact { gap: 10px; margin: 2px 0 6px; }
.ah-checks--compact li { color: #273449; font-size: .95rem; }

.ah-product__btn {
    justify-content: center;
    width: 100%;
    margin-top: auto;
}

/* Secondary product links ------------------------------------------------------------- */
.ah-more-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.ah-more-links > span { color: #526173; font-weight: 600; margin-right: 4px; }

.ah-more-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #dfe5ee;
    border-radius: 999px;
    background: #ffffff;
    color: #131b5f;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.ah-more-links a:hover {
    border-color: #131b5f;
    box-shadow: 0 6px 16px rgba(19, 27, 95, .1);
    transform: translateY(-1px);
}

.ah-card__link--light { color: #ffffff; }
.ah-card__link--light:hover { color: #fcd34d; }

@media (max-width: 991px) {
    .ah-trust-wrap { margin-top: 24px; }
    .ah-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ah-trust__item:nth-child(3) { border-left: 0; }
    .ah-trust__item:nth-child(n+3) { border-top: 1px solid #eef1f6; }
}

@media (max-width: 575px) {
    .ah-trust { grid-template-columns: 1fr; }
    .ah-trust__item + .ah-trust__item { border-left: 0; border-top: 1px solid #eef1f6; }
}

/* Contrast fixes: theme button spans and card titles on navy sections */
.ah-product__btn,
.ah-product__btn span,
.ah-product__btn:hover span { color: #ffffff !important; }

.ah-sec--navy .ah-card h3 { color: #ffffff; }
.ah-product__btn, .ah-product__btn span { text-decoration: none !important; }

/* Free domain panel --------------------------------------------------------------- */
.ah-free-domain__chips { display: flex; gap: 10px; margin-bottom: 22px; }

.ah-free-domain__chips span {
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.ah-free-domain__chips span:first-child { background: #fcd34d; color: #131b5f; }

.ah-free-domain__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.ah-btn-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    background: #ffffff;
    color: #131b5f;
    font-weight: 700;
    text-decoration: none;
}

.ah-btn-light:hover { background: #fcd34d; color: #131b5f; }
.ah-ext-head { padding-top: 64px; } .ah-ext-head .ah-head { margin-bottom: 28px; }
.wb-video { max-width: 860px; margin: 40px auto 0; } .wb-price { text-align: left; margin-bottom: 18px; } .wb-price span, .wb-price small { color: #c7d0ea; } .wb-price strong { color: #fff; font-size: 2.2rem; }

/* Domain extensions table: "Populair" badge */
.popular-domain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2fb;
    color: #131b5f;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Policy pages ----------------------------------------------------------------- */
.ah-checks--no li::before { content: "\f00d"; background: #fdecef; color: #be123c; }

.ah-stat-panel { text-align: center; }
.ah-stat-panel strong { display: block; color: #ffffff; font-size: 4rem; font-weight: 800; line-height: 1; }
.ah-stat-panel span { display: block; margin-top: 10px; color: #c7d0ea; font-size: 1.05rem; }

.ah-note {
    max-width: 780px;
    margin: 28px auto 0;
    color: #526173;
    font-size: .97rem;
    line-height: 1.7;
    text-align: center;
}

.ah-legal-note {
    margin: 0 0 28px;
    padding: 18px 22px;
    border-left: 4px solid #131b5f;
    border-radius: 0 12px 12px 0;
    background: #f7f9fc;
    color: #3d4b5f;
    font-size: .95rem;
    line-height: 1.65;
}

.ah-legal-note a, .ah-note a { color: #131b5f; font-weight: 600; text-decoration: underline; }

/* Policy links under pricing cards */
.ah-policy-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin: 26px 0 0;
    font-size: .93rem;
}

.ah-policy-note a { display: inline-flex; align-items: center; gap: 8px; color: #131b5f; font-weight: 600; text-decoration: none; }
.ah-policy-note a:hover { text-decoration: underline; }