/* =============================================================
   FP-HERO — Claim + Service Navigator (V1)
   Split paper / atmosphere · frosted service navigator
   ============================================================= */

.fp-hero__wrapper {
    position: relative;
    background-color: var(--wp--preset--color--card, #ffffff);
}

.fp-hero__sticky {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    height: min(100vh, 1000px);
    max-height: 1000px;
    border-block: 1px solid rgba(18, 18, 18, 0.05);
}

/* --- Split ground: white claim / atmosphere panel --- */
.fp-hero__ground {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    pointer-events: none;
}

.fp-hero__ground-l {
    background: var(--wp--preset--color--card, #ffffff);
}

.fp-hero__ground-r {
    background:
        radial-gradient(ellipse 85% 65% at 72% 22%, rgba(252, 73, 11, 0.14) 0%, transparent 55%),
        linear-gradient(155deg, #F0EDE6 0%, #EAE9E4 45%, #E2DED5 100%);
}

/* --- UI --- */
.fp-hero__ui {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 0 0 8px;
    box-sizing: border-box;
    color: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__sticky .sklare-marquee-section {
    position: relative;
    left: auto;
    right: auto;
    z-index: 10;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 36px 0;
    background: var(--wp--preset--color--card, #ffffff);
    border-top: 1px solid rgba(18, 18, 18, 0.06);
    box-sizing: border-box;
}

/* --- Top bar --- */
.fp-hero__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 22px;
    margin-bottom: 0;
}

.fp-hero__logo {
    pointer-events: none;
}

.fp-hero__logo-mask {
    overflow: hidden;
    padding: 10px;
    margin: -10px;
}

.fp-hero__logo-svg {
    height: 24px;
    width: auto;
    display: block;
}

.fp-hero__logo-svg g[fill="#ffffff"] {
    fill: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.fp-hero__nav-link {
    color: var(--wp--preset--color--text-muted, #3D3D3D);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.fp-hero__nav-link:hover {
    color: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__nav-link:focus-visible,
.fp-hero__nav-cta:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #fc490b);
    outline-offset: 3px;
}

.fp-hero__nav-cta {
    background: var(--wp--preset--color--text-main, #121212);
    padding: 10px 18px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-hero__nav-cta:hover {
    background: var(--wp--preset--color--accent, #fc490b);
}

/* --- Stage --- */
.fp-hero__stage {
    display: grid;
    grid-template-columns: 1.1fr minmax(0, 0.9fr);
    gap: clamp(40px, 5.5vw, 88px);
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding-block: clamp(20px, 3vw, 40px);
    box-sizing: border-box;
}

.fp-hero__copy {
    position: relative;
    max-width: 560px;
}

.fp-hero__eyebrow {
    margin: 0 0 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

.fp-hero__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: clamp(48px, 7vw, 76px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--wp--preset--color--text-main, #121212);
    margin: 0 0 20px;
}

.fp-hero__mark {
    display: inline-block;
    width: 0.14em;
    height: 0.14em;
    margin-left: 0.06em;
    vertical-align: baseline;
    border-radius: 50%;
    background-color: var(--wp--preset--color--accent, #fc490b);
}

.fp-hero__support {
    font-size: var(--wp--preset--font-size--xl);
    line-height: 1.5;
    color: var(--wp--preset--color--text-muted, #3D3D3D);
    margin: 0 0 28px;
    max-width: 30em;
}

.fp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    margin-bottom: 0;
}

.fp-hero__wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    box-sizing: border-box;
    max-width: 100%;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500;
    transition: background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-hero__wrapper .btn:active {
    transform: scale(0.985);
}

.fp-hero__wrapper .btn-punkt {
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--wp--preset--color--accent, #fc490b);
    flex-shrink: 0;
    margin-left: calc(-0.4em - 8px);
    transform: translateY(0.06em) scale(0);
    transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.4, 1), margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-hero__wrapper .btn:hover .btn-punkt,
.fp-hero__wrapper .btn:focus-visible .btn-punkt {
    margin-left: 0;
    transform: translateY(0.06em) scale(1);
}

.fp-hero__wrapper .btn-primaer {
    background: var(--wp--preset--color--text-main, #121212);
    color: var(--wp--preset--color--bg, #F5F4F0);
}

.fp-hero__wrapper .btn-primaer:hover {
    background: #000;
}

.fp-hero__wrapper .btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #fc490b);
    outline-offset: 3px;
}

.fp-hero__wrapper .mail-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--wp--preset--color--text-muted, #3D3D3D);
    transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-hero__wrapper .mail-copy i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.22);
    flex-shrink: 0;
    transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.fp-hero__wrapper .mail-copy:hover {
    color: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__wrapper .mail-copy:hover i {
    background: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__wrapper .mail-copy.ok {
    color: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__wrapper .mail-copy.ok i {
    background: var(--wp--preset--color--accent, #fc490b);
    transform: scale(1.3);
}

.fp-hero__wrapper .mail-copy:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #fc490b);
    outline-offset: 3px;
}

.fp-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--wp--preset--color--text-main, #121212);
    color: #ffffff;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1px solid var(--wp--preset--color--text-main, #121212);
    box-sizing: border-box;
    max-width: 100%;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.fp-hero__btn:hover {
    background: var(--wp--preset--color--accent, #fc490b);
    border-color: var(--wp--preset--color--accent, #fc490b);
}

.fp-hero__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #fc490b);
    outline-offset: 3px;
}

.fp-hero__btn--sm {
    padding: 10px 18px;
    flex-shrink: 0;
}

.fp-hero__arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Service navigator: frosted glass card --- */
.fp-hero__panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    box-sizing: border-box;
    justify-self: end;
    align-self: center;
    /* Keep the card off the split / inner edge of the atmosphere gradient */
    margin-inline-start: clamp(36px, 4.5vw, 72px);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(18, 18, 18, 0.1);
    overflow: hidden;
}

.fp-hero__panel-head {
    padding: 20px 20px 0;
}

.fp-hero__panel-eyebrow {
    margin: 0 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

.fp-hero__panel-title {
    display: block;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--wp--preset--color--text-main, #121212);
}

/* Legacy Signal Panel viz block — must not reserve space if stale bundle loads */
.fp-hero__panel-viz {
    display: none !important;
}

.fp-hero__panel-list {
    padding: 6px 10px;
}

.fp-hero__panel-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-hero__panel-item:hover {
    background: rgba(18, 18, 18, 0.04);
}

.fp-hero__panel-item:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent, #fc490b);
    outline-offset: 2px;
}

.fp-hero__panel-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(18, 18, 18, 0.04);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.fp-hero__panel-icon img {
    width: 36px;
    height: 36px;
    display: block;
}

.fp-hero__panel-name {
    display: block;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--text-main, #121212);
}

.fp-hero__panel-desc {
    display: block;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted, #3D3D3D);
    line-height: 1.35;
}

.fp-hero__panel-item .fp-hero__arrow {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.fp-hero__panel-item:hover .fp-hero__arrow {
    opacity: 1;
}

.fp-hero__panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
    background: rgba(255, 255, 255, 0.4);
}

.fp-hero__panel-foot p {
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-muted, #3D3D3D);
    max-width: 16em;
    line-height: 1.4;
}

/* --- Site header reveal --- */
.site-header--fp-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.site-header--fp-hidden.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Tablet & below: claim, then navigator — one column --- */
@media (max-width: 1100px) {
    .fp-hero__sticky {
        height: auto;
        max-height: none;
    }

    .fp-hero__ground {
        grid-template-columns: 1fr;
    }

    .fp-hero__ground-l {
        display: none;
    }

    .fp-hero__ground-r {
        background:
            radial-gradient(ellipse 90% 48% at 50% 0%, rgba(252, 73, 11, 0.1) 0%, transparent 52%),
            linear-gradient(180deg, #F0EDE6 0%, #EAE9E4 52%, #E4E0D8 100%);
    }

    .fp-hero__stage {
        grid-template-columns: 1fr;
        gap: clamp(var(--wp--preset--spacing--32), 5vw, var(--wp--preset--spacing--48));
        align-items: start;
        flex: none;
        padding-block: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 56px);
    }

    .fp-hero__copy {
        max-width: 36rem;
    }

    .fp-hero__title {
        font-size: clamp(44px, 7vw, 64px);
        margin-bottom: var(--wp--preset--spacing--16);
    }

    .fp-hero__support {
        max-width: 32em;
        margin-bottom: var(--wp--preset--spacing--24);
    }

    .fp-hero__panel {
        justify-self: stretch;
        align-self: stretch;
        width: 100%;
        max-width: none;
        min-width: 0;
        min-height: 0;
        margin-inline-start: 0;
    }

    .fp-hero__sticky .sklare-marquee-section {
        padding: var(--wp--preset--spacing--24) 0;
    }
}

/* Tablet: use the width — three equal service tiles, not a stretched list */
@media (max-width: 1100px) and (min-width: 721px) {
    .fp-hero__panel-head {
        padding: 22px 24px 8px;
    }

    .fp-hero__panel-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 4px 16px 16px;
    }

    .fp-hero__panel-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        padding: 16px 14px;
        box-sizing: border-box;
    }

    .fp-hero__panel-icon {
        width: 48px;
        height: 48px;
    }

    .fp-hero__panel-icon img {
        width: 30px;
        height: 30px;
    }

    .fp-hero__panel-text {
        min-width: 0;
        width: 100%;
    }

    .fp-hero__panel-item .fp-hero__arrow {
        margin-top: auto;
        align-self: flex-end;
    }

    .fp-hero__panel-foot {
        padding: 14px 24px 16px;
    }

    .fp-hero__panel-foot p {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .fp-hero__ui {
        padding-bottom: 16px;
    }

    .fp-hero__top {
        padding-block: 18px;
    }

    .fp-hero__nav-link {
        display: none;
    }

    .fp-hero__stage {
        gap: var(--wp--preset--spacing--32);
        padding-block: 16px 36px;
    }

    .fp-hero__copy {
        max-width: none;
    }

    .fp-hero__title {
        font-size: clamp(42px, 11vw, 64px);
    }

    .fp-hero__panel-foot {
        flex-wrap: wrap;
    }

    .fp-hero__sticky .sklare-marquee-section {
        padding: 24px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-hero__btn,
    .fp-hero__wrapper .btn,
    .fp-hero__wrapper .btn-punkt,
    .fp-hero__wrapper .mail-copy,
    .fp-hero__wrapper .mail-copy i,
    .fp-hero__nav-cta,
    .fp-hero__panel-item {
        transition: none;
    }
}