.index_top {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--color-primary);
}

.index_top picture, .index_top img:not(.hero_logo), .index_top video {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    display: block;
    object-fit: cover;
    object-position: center;
}

.index_top_media {
    height: 500px;
    position: relative;
}

/* Photo/video heroes never got a scrim before — fine while every hero on
   the site used the gradient-band, no-image treatment, but any real photo
   dropped in via hero_image would sit directly under white heading/body
   text with no guaranteed contrast. Darken toward the text side so this
   works for any photo, not just ones that happen to be dark there already. */
.index_top_media:has(img, video)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(10,11,24,0.92) 0%, rgba(10,11,24,0.68) 38%, rgba(10,11,24,0.25) 70%, rgba(10,11,24,0.15) 100%);
    pointer-events: none;
}

/* START OF NO-IMG HANDLING */
/* Replaces the old 3-stripe diagonal band pattern (looked too close to a
   well-known sportswear logo). Now uses the exact same dark diagonal
   gradient as the footer (footer.footer in redesign_2026.css) instead of a
   light background with glow blobs, so the hero and footer bookend the
   page with one matching dark/colored band rather than two different
   treatments. */
.index_top:not(:has(img, video)) {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    background: linear-gradient(150deg, var(--mobino-dark-ink-soft) 0%, var(--mobino-dark-ink-soft) 35%, var(--mobino-accent-1) 80%, var(--mobino-accent-2) 100%);
}
/* The redesigned hero (gradient bands, no photo/video) leaves .index_top_media
   an empty div. At desktop widths it still claimed the full 500px above,
   which is what pushed the heading so far below the header. The mobile
   breakpoint below already collapses it for the same reason — mirror that
   here instead of relying on the fixed 500px meant for a real hero image. */
.index_top_media:not(:has(img, video)) {
    height: 0;
}
/* END OF NO-IMG HANDLING */

.index_top_content_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-sizing: border-box;
}

.index_top_content_wrapper:has(.index_top_hero_cta) {
    align-items: end;
}

.index_top_content {
    width: 100%;
    max-width: var(--content-max-width);
    text-align: left;
}

.index_top_content h1 {
    max-width: 60rem;
    margin-left: 0;
    margin-right: auto;
    font-size: clamp(3.4rem, 4.6vw, 4.6rem);
    line-height: 1.08;
    /* Always white: a hero photo always gets a dark scrim (see
       .index_top_media:has(img,video)::after), and the no-photo case now
       uses the same dark footer gradient as its background — so both
       cases sit on a dark-enough background for white text. */
    color: #fff;
    text-shadow: none;
}

/* Two-tone heading accent (inspired by Telavox: dark heading text, bright
   brand colour on the emphasised word) — used on hero H1s and major section
   headings to give the page some rhythm via typography instead of flat
   color blocks between sections. general.css has a global
   "p, ul li, ol li, span { font-size: 18px }" reset — since this rule sets
   an explicit font-size on every span, an explicit value here is required
   to override it; inheriting silently loses to that reset even though
   .text-accent's class selector otherwise outranks a bare "span". */
.text-accent {
    color: var(--mobino-accent-1, #2543F2);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.hero_badge {
    /* Sits over the colorful gradient bands, not the plain page background —
       needs its own light chip + dark text (like the H1 above it) rather
       than the page's normal dark-on-light text pairing, or it reads as
       low-contrast grey against the blue/purple band. */
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: 0.7rem 1.6rem 0.7rem 1.2rem;
    font-size: 1.3rem;
    color: var(--mobino-dark-ink, #0B034C);
    font-weight: 600;
    margin-bottom: 2.4rem;
}

.hero_badge_dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--main-gradient);
}

.hero_cta_row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.hero_cta_row .hero_cta_btn {
    margin-top: 0;
}

/* Promoted to a full pill button matching the old primary CTA's weight,
   now that it's the only button in the hero CTA row. */
.hero_secondary_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 32px;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(120deg, #2543F2, #7256FF);
    transition: filter 0.2s ease;
}

.hero_secondary_link:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.index_top_content_wrapper {
    z-index: 1;
}

.index_top_content_wrapper.has_hero_card {
    display: grid;
    grid-template-columns: minmax(0, 62rem) 1fr;
    gap: 4.8rem;
    align-items: start;
    padding-top: 24px;
    position: relative;
    max-width: var(--content-max-width);
    margin: 0 auto;
    justify-content: initial;
}

.index_top_content_wrapper.has_hero_card .index_top_content {
    max-width: none;
}

.hero_card {
    position: relative;
    z-index: 1;
    background: rgba(11,3,76,0.05);
    border: 1px solid rgba(11,3,76,0.12);
    border-radius: 2.2rem;
    padding: 3rem;
    backdrop-filter: blur(6px);
}

.hero_card_row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(11,3,76,0.1);
}

.hero_card_row:last-of-type {
    border-bottom: none;
}

.hero_card_label {
    color: var(--mobino-text-muted);
    font-size: 1.4rem;
}

.hero_card_value {
    color: var(--color-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero_card_cta {
    margin-top: 2rem;
    display: block;
    text-align: center;
    background: #fff;
    color: var(--mobino-dark-ink);
    border-radius: 1.2rem;
    padding: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.4rem;
}

/* Trust-item variant of .hero_card — same glass-panel container, but shows
   a 2x2 grid of icon+label USP items instead of label/value rows. */
.hero_trust_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.2rem;
}

.hero_trust_item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    color: var(--color-secondary);
    font-size: 1.4rem;
    font-weight: 600;
}

.hero_trust_icon {
    flex: none;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.9rem;
    background: rgba(11,3,76,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
}

.hero_trust_icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 480px) {
    .hero_trust_grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1000px) {
    .index_top_content_wrapper.has_hero_card {
        grid-template-columns: 1fr;
    }
    /* Tekst/overskrift skal vises FØR hero-kortet på mobil/nettbrett, ikke
       etter (var order:-1 som satte kortet først). */
}

/* Remove margin-top on h1 when hero_body or hero_cta_btn exists */
.index_top_content:has(.hero_body, .hero_cta_btn) h1 {
    margin-top: 0;
}

/* Hero logo fallback when no hero_text */
.index_top_content:has(.hero_logo) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero_logo {
    display: block;
    width: 50%;
    max-width: 300px;
    height: auto;
    margin-bottom: 3rem;
}

.index_top_content .hero_body {
    max-width: 50rem;
    margin-left: 0;
    margin-right: auto;
    font-size: 1.8rem;
    color: rgba(255,255,255,0.88);
    text-shadow: none;
    margin-top: 1.4rem;
    line-height: 1.5;
}

.index_top_content .hero_body p {
    margin: 0;
    color: inherit;
}

.hero_cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    height: 46px;
    padding: 0 32px;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 999px;
    color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    background: linear-gradient(120deg, #2543F2, #7256FF);
    transition: filter 0.2s ease;
}

.hero_cta_btn:hover {
    color: #fff;
    filter: brightness(1.08);
}

.index_top_hero_text h1 {
    margin: 0;
}

/* For sleek */
.index_top:has(.sleek) .index_top_media {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
}



@media only screen and (max-width: 900px) {
    .index_top {
        height: auto;
        min-height: auto;
    }
    .index_top_content {
        text-align: left;
    }
    .index_top_content h1,
    .index_top_content .hero_body {
        margin-left: 0;
        margin-right: 0;
    }
    .index_top_content h1 {
        font-size: 2.5rem;
    }
    /* No media
    .index_top:not(:has(img, video)) {
        height: 150px;
    } */
    .index_top .index_top_media:not(:has(img, video)) {
        position: unset;
        height: auto;
    }
    .index_top_media:has(video, img), .index_top:has(video, img) {
        min-height: 330px;
        height: 330px;
    }
    .index_top picture, .index_top img:not(.hero_logo), .index_top video {
        height: 100%;
        object-fit: cover;
    }
}