/* ============================================================
   components.css — globale styling voor de U-component-library.

   Alle U-prefixed components (UButton, UEyebrow, UDisplayHeading,
   USectionHead, UAppCardMock, …) en de section-frames (hero, topbar)
   hebben hun CSS hier. Geen scoped .razor.css — zo is hot-reload via
   Ctrl+F5 mogelijk zonder server-restart.

   Volgorde van laden (in App.razor):
     1. bootstrap
     2. tokens.css     (base CSS-vars, fonts)
     3. public.css     (semantic tokens, layout-primitives, sections)
     4. components.css (deze file)
     5. admin.css      (admin-shell)
     6. Umbiko.Web.styles.css  (alleen wat eventueel nog scoped overblijft)

   Tokens uit public.css zijn hier beschikbaar: --ink, --ink-soft, --ink-muted,
   --panel, --panel-border, --page-bg, --brand-ink, --umbiko-green, --umbiko-red.
   ============================================================ */


/* ============================================================
   UEyebrow — kleine pill-label boven titels.
   ============================================================ */

.u-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--brand-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}

.u-eyebrow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--umbiko-green);
    box-shadow: 0 0 0 3px rgba(13, 193, 157, .2);
    flex-shrink: 0;
}

/* "hero"-variant is identiek aan basis — handoff onderscheidt niet. Behouden
   voor toekomstige uitbreiding zonder breaking change in HeroSection.razor. */
.u-eyebrow--hero {
    /* no-op: zelfde als .u-eyebrow */
}


/* ============================================================
   UButton — primary | ghost | login × sm | md | lg.
   Stijl-specs uit design_handoff_umbiko_website/website.css.
   ============================================================ */

.u-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-sans, inherit);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    white-space: nowrap;
    user-select: none;
}

.u-btn:disabled,
.u-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Sizes */
.u-btn--sm { padding: 8px 16px;  font-size: 13px; }
.u-btn--md { padding: 12px 22px; font-size: 14px; }
.u-btn--lg { padding: 14px 26px; font-size: 15px; }

/* Variant: primary (gevuld brand-paars met soft shadow) */
.u-btn--primary {
    background: var(--brand);
    color: var(--brand-on);
    box-shadow: 0 2px 6px rgba(40, 48, 157, .22);
}
.u-btn--primary:not(:disabled):hover {
    background: var(--brand-ink-strong);
    box-shadow: 0 4px 14px rgba(40, 48, 157, .32);
}

/* Variant: ghost (outline op panel-bg, brand-paarse tekst) */
.u-btn--ghost {
    background: var(--panel);
    color: var(--brand-ink);
    border: 1px solid var(--panel-border);
}
.u-btn--ghost:not(:disabled):hover {
    border-color: var(--panel-border-strong);
    background: color-mix(in oklab, var(--panel) 88%, var(--brand) 12%);
}

/* Variant: login — ghost-style (specifiek voor topbar-inlog-knop) */
.u-btn--login {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--panel-border);
}
.u-btn--login:not(:disabled):hover {
    border-color: var(--panel-border-strong);
    background: color-mix(in oklab, var(--panel) 88%, var(--brand) 12%);
}

.u-btn__icon {
    display: inline-flex;
    font-size: 1.05em;
    line-height: 1;
}
.u-btn__icon--left  { margin-right: -2px; }
.u-btn__icon--right { margin-left:  -2px; }


/* ============================================================
   UDisplayHeading — hero-grote titel met optioneel paars accent.
   ============================================================ */

.u-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 20px;
    text-wrap: balance;
}

.u-heading__accent {
    color: var(--brand-ink);
    font-style: normal;
}


/* ============================================================
   USectionHead — eyebrow+h2 links, lead rechts.
   ============================================================ */

.u-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.u-section-head__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 24px 0 0;
    text-wrap: balance;
    max-width: 28ch;
}

.u-section-head__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 17px;
    max-width: 56ch;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .u-section-head { gap: 16px; }
    .u-section-head__title { font-size: 28px; }
    .u-section-head__lead  { font-size: 15px; }
}


/* ============================================================
   UAppCardMock — decoratieve product-screenshot.
   ============================================================ */

.u-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    box-shadow:
        0 30px 80px -40px rgba(20, 22, 60, .35),
        0 8px 22px -10px rgba(20, 22, 60, .12);
    overflow: hidden;
}

/* Chrome-bar */
.u-card__chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--divider);
    background: color-mix(in oklab, var(--panel) 92%, var(--brand) 8%);
}

.u-card__dots { display: inline-flex; gap: 6px; }
.u-card__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    background: var(--divider);
}

.u-card__url {
    flex: 1;
    background: var(--page-bg);
    border: 1px solid var(--divider);
    border-radius: 999px;
    padding: 5px 12px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    color: var(--ink-muted);
    text-align: center;
}

/* Body */
.u-card__body { padding: 18px 20px 22px; }

.u-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.u-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--brand-ink);
}

.u-card__tabs { display: inline-flex; gap: 6px; }

.u-card__tab {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    color: var(--ink-muted);
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.u-card__tab b { color: inherit; font-weight: 700; }
.u-card__tab.is-active {
    background: var(--brand);
    color: var(--brand-on);
    border-color: var(--brand);
}

/* Stats-grid — 4 mini-cards in een soft tint */
.u-card__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.u-card__stat {
    background: var(--page-bg-soft);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 10px 12px;
}

.u-card__stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.u-card__stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--brand-ink);
    margin-top: 2px;
    line-height: 1;
}
.u-card__stat-value.is-risk { color: var(--umbiko-red, #d2483a); }

/* Project-rows — losse mini-cards met onderlinge spacing */
.u-card__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--divider);
    margin-bottom: 8px;
}
.u-card__row.is-last { margin-bottom: 0; }

.u-card__row-icon {
    color: var(--ink-muted);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

.u-card__row-text { flex: 1; min-width: 0; }

.u-card__row-title {
    font-weight: 600;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.3;
}

.u-card__row-meta {
    color: var(--ink-muted);
    font-size: 11px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    margin-top: 2px;
}

.u-card__row-status {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.u-card__row-status--active {
    background: rgba(13, 193, 157, 0.16);
    color: #0a8f74;
}

.u-card__row-status--review {
    background: rgba(247, 147, 26, 0.20);
    color: #a05a00;
}

[data-theme="dark"] .u-card__row-status--active { background: rgba(13, 193, 157, 0.24); color: #5fe8c7; }
[data-theme="dark"] .u-card__row-status--review { background: rgba(247, 147, 26, 0.25); color: #ffb970; }

@media (max-width: 540px) {
    .u-card__stats { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   Globale roterende orbs-achtergrond — overgenomen uit Umbiko.AI.Proc
   (wwwroot/app.css). Eén keer in MainLayout.razor; dekt de hele site.
   Brand-kleuren in de vier hoeken, gespiegeld geblurd, langzame rotatie.
   ============================================================ */

.umbiko-orbs-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: var(--page-bg, #fff);
}

.umbiko-orbs-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160vmax;
    height: 160vmax;
    transform: translate(-50%, -50%);
    animation: umbiko-orbs-spin 80s linear infinite;
}

@keyframes umbiko-orbs-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.umbiko-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

/* ============================================================
   Legal pages (/privacy + /terms). Lange-prose-layout met max-width
   voor leesbare regellengte en heldere section-koppen.
   ============================================================ */

.uw-legal__article {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.65;
}

.uw-legal__header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--divider);
}

.uw-legal__updated {
    margin: 12px 0 0;
    color: var(--ink-muted);
    font-size: 13px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.04em;
}

.uw-legal__intro {
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 36px;
}

.uw-legal__section {
    margin-bottom: 28px;
}

.uw-legal__heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.uw-legal__section p {
    margin: 0 0 12px;
    color: var(--ink);
}

.uw-legal__section p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   Conversie-sectie — twee paden-kaarten

   Twee gelijkwaardige presenter-cards naast elkaar: trial (links,
   self-serve) + demo (rechts, sales-led + form embedded). De cards
   matchen elkaar qua hoogte via align-items: stretch in de grid.
   Onder de cards: horizontale contact-strip met kantoor/email/LinkedIn.
   ============================================================ */

.uw-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 48px;
}

.uw-path {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--panel-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

/* Trial-kaart krijgt een subtiele brand-tinted glow zodat 'ie de
   "primary action" voelt zonder hele kaart paars te kleuren. */
.uw-path--trial::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(40% 40% at 30% 0%, rgba(40, 48, 157, 0.12), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="dark"] .uw-path--trial::before {
    background: radial-gradient(40% 40% at 30% 0%, rgba(143, 168, 255, 0.18), transparent 70%);
}

.uw-path > * {
    position: relative;
    z-index: 1;
}

.uw-path__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.uw-path__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(40, 48, 157, 0.10);
    color: var(--brand);
    font-size: 20px;
}

.uw-path--demo .uw-path__icon {
    background: rgba(13, 193, 157, 0.12);
    color: #07946e;
}

[data-theme="dark"] .uw-path--trial .uw-path__icon {
    background: rgba(143, 168, 255, 0.18);
    color: #b0c4ff;
}

[data-theme="dark"] .uw-path--demo .uw-path__icon {
    background: rgba(13, 193, 157, 0.18);
    color: #5fe8c7;
}

.uw-path__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
    font-weight: 700;
}

.uw-path__body {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
}

.uw-path__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uw-path__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
}

.uw-path__bullets li i {
    color: var(--umbiko-green, #0dc19d);
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* CTA-blok onderaan de trial-kaart — knop + footnote stack */
.uw-path__cta {
    margin-top: auto;       /* duwt naar onderkant van flex-card */
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uw-path__footnote {
    text-align: center;
    color: var(--ink-muted);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.uw-path__footnote .bi {
    color: var(--umbiko-yellow, #fcc419);
    font-size: 13px;
}

/* Form-styling binnen de demo-kaart — compacter dan de standalone
   .uw-form omdat de kaart zelf al border + padding levert. */
.uw-path__form {
    margin-top: auto;       /* idem: duwt form naar onderkant */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uw-path__form .uw-form__row,
.uw-path__form .uw-form__row--split {
    margin-bottom: 0;
}

.uw-path__form label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
}

.uw-path__form input,
.uw-path__form textarea {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--page-bg-soft);
    border: 1px solid var(--divider);
    border-radius: 12px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
}

.uw-path__form input:focus,
.uw-path__form textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(40, 48, 157, .12);
}

[data-theme="dark"] .uw-path__form input:focus,
[data-theme="dark"] .uw-path__form textarea:focus {
    box-shadow: 0 0 0 4px rgba(143, 168, 255, .16);
}

.uw-path__form textarea {
    min-height: 80px;
    resize: vertical;
}

.uw-path__form .uw-form__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.uw-path__form .uw-form__row,
.uw-path__form .uw-form__row--split > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uw-path__form .uw-form__submit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 4px;
}

.uw-path__form .uw-form__hint {
    text-align: center;
    color: var(--ink-muted);
    font-size: 12px;
}

/* Stack op tablet/mobiel zodat de twee paden onder elkaar komen. */
@media (max-width: 860px) {
    .uw-paths {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .uw-path {
        padding: 24px;
    }
    .uw-path__title {
        font-size: 22px;
    }
}

/* Demo-form als volle-breedte-sectie tussen de paden-cards en de contact-
   strip. De demo-CTA in de rechter card heeft href="#demo-form" zodat de
   browser native smooth-scrolt naar dit blok. Centreert binnen .uw-container
   met een max-width zodat 't form-blok niet te breed wordt op grote schermen. */
.uw-demo-form {
    margin: 32px auto 0;
    max-width: 720px;
    /* Extra padding-top zodat scroll-padding-top:72px van html-element
       (voor de fixed topbar) ruim genoeg blijft. */
    scroll-margin-top: 90px;
}

/* Horizontale contact-strip onder de twee kaarten — kantoor/email/LinkedIn.
   Visueel rustig: kleine icons + label + waarde, gescheiden door wrap. */
.uw-contact-strip {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--divider);
    display: flex;
    flex-wrap: wrap;
    gap: 24px 48px;
    justify-content: center;
}

.uw-contact-strip__fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.uw-contact-strip__fact > i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--brand);
    font-size: 14px;
    flex-shrink: 0;
}

.uw-contact-strip__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
}

.uw-contact-strip__value {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
}

@media (max-width: 640px) {
    .uw-contact-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


/* ============================================================
   Demo-aanvraag-form — extra states (success / error / spinner).
   Bouwt op de bestaande .uw-form structuur uit public.css.
   ============================================================ */

.uw-contact__success {
    background: rgba(13, 193, 157, 0.12);
    border: 1px solid rgba(13, 193, 157, 0.35);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.uw-contact__success i {
    font-size: 24px;
    color: #07946e;
    line-height: 1;
    flex-shrink: 0;
}

[data-theme="dark"] .uw-contact__success i { color: #5fe8c7; }

.uw-contact__success p {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
}

.uw-form__error {
    display: block;
    color: var(--umbiko-red, #d2483a);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

.uw-form__error-banner {
    background: rgba(255, 61, 59, 0.10);
    border: 1px solid rgba(255, 61, 59, 0.35);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--umbiko-red, #d2483a);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

[data-theme="dark"] .uw-form__error-banner {
    background: rgba(255, 61, 59, 0.16);
}


/* ============================================================
   Trial-signup-pagina (/trial)

   Smal centered card-layout. Eigen sectie-wrapper met meer top-
   padding dan de inline contact-sectie omdat dit een standalone
   pagina is met topbar maar zonder hero erboven.
   ============================================================ */

/* Doorzichtige achtergrond zodat de globale .umbiko-orbs-bg in MainLayout
   doorheen schijnt — consistent met alle andere publieke pagina's. Géén
   eigen radial-gradient meer; de orbs doen al het visuele zware werk. */
.uw-trial {
    padding: 96px 24px 120px;
    background: transparent;
    min-height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
}

.uw-trial__inner {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Heading boven de card: links uitgelijnd zoals de marketing-site
   (hero/how/features/contact). De card eronder is gecentreerd via
   .uw-trial__inner max-width — de kop hoort daarbinnen ook gewoon
   links te beginnen, niet op het midden. */
.uw-trial__head {
    text-align: left;
}

.uw-trial__head .uw-eyebrow {
    margin: 0 0 12px;
}

.uw-trial__title {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    margin: 0 0 12px;
    font-weight: 700;
}

.uw-trial__lead {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
    max-width: 48ch;
}

.uw-trial__card {
    /* Hergebruikt .uw-form-styling voor velden — alleen card-spacing tweaken.
       Geen border — de zachte schaduw definieert de kaart-rand al, een hard
       lijntje voelde te schools naast de zacht-roterende orbs erachter. */
    background: var(--panel);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--panel-shadow);
}

/* De EditForm binnenin .uw-trial__card heeft zelf class "uw-form", die
   normaal een eigen card-styling levert (panel + border + shadow + padding)
   uit public.css. Binnen onze trial-kaart is dat dubbel — de buitenste
   card doet 't al. Strip de inner-card hier weg zodat alleen de input-
   styling van .uw-form-velden overblijft. */
.uw-trial__card .uw-form {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.uw-trial__card--success,
.uw-trial__card--disabled {
    text-align: center;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.uw-trial__success-icon {
    font-size: 48px;
    color: var(--umbiko-green, #0dc19d);
    line-height: 1;
}

.uw-trial__disabled-icon {
    font-size: 48px;
    color: var(--ink-muted);
    line-height: 1;
}

.uw-trial__card--success .uw-trial__title,
.uw-trial__card--disabled .uw-trial__title {
    margin: 0;
}

.uw-trial__card--success .uw-trial__lead,
.uw-trial__card--disabled .uw-trial__lead {
    margin: 0 0 8px;
}

/* Visuele scheiding tussen verplichte en optionele velden — een dunne lijn
   met midden-label, geen heavy header. Communiceert "deze velden mag je
   overslaan" zonder de form te vertragen. */
.uw-trial__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.uw-trial__divider::before,
.uw-trial__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--divider);
}

/* Trust-strip — drie korte vertrouwen-bullets onder de form. Niet een card,
   gewoon een horizontale lijst met green check-icons. */
.uw-trial__trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 24px;
    color: var(--ink-soft);
    font-size: 13px;
}

.uw-trial__trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uw-trial__trust .bi {
    color: var(--umbiko-green, #0dc19d);
    font-size: 14px;
}

/* Honeypot-veld — onzichtbaar voor mensen maar bots die de DOM scrapen
   en alle inputs invullen lopen erin. Niet display:none of visibility:hidden
   gebruiken (sommige bots filteren daarop); off-screen positioneren is robuuster. */
.uw-form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

/* Bypass-strip — alleen zichtbaar voor emails uit TrialSettings.BypassEmailDomains.
   Toont de magic-link direct op de success-card zodat testers niet hoeven te
   wachten op de mail. Visueel een aparte sectie met yellow accent zodat 't
   duidelijk een dev-affordance is en niet de standaard prospect-flow. */
.uw-trial__bypass {
    width: 100%;
    margin: 12px 0 4px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(252, 196, 25, 0.10);
    border: 1px dashed rgba(252, 196, 25, 0.55);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-theme="dark"] .uw-trial__bypass {
    background: rgba(252, 196, 25, 0.14);
}

.uw-trial__bypass-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.uw-trial__bypass-label .bi {
    color: var(--umbiko-yellow, #fcc419);
    font-size: 14px;
}

/* Consumer-email-block: rich error-banner binnen de form-card. Visueel
   sterker dan de standaard error-banner omdat 't een legitieme blokkade
   is, géén tijdelijk faaltje. Reden: tenant-isolatie kan niet veilig met
   gmail/hotmail/etc. */
.uw-trial__block {
    margin: 12px 0;
    padding: 18px;
    border-radius: 14px;
    background: rgba(40, 48, 157, 0.06);
    border: 1px solid rgba(40, 48, 157, 0.18);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-theme="dark"] .uw-trial__block {
    background: rgba(143, 168, 255, 0.10);
    border-color: rgba(143, 168, 255, 0.30);
}

.uw-trial__block-icon {
    color: var(--brand);
    font-size: 24px;
    line-height: 1;
}

.uw-trial__block-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-ink);
    font-family: var(--font-display);
}

.uw-trial__block-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.uw-trial__block .uw-btn {
    align-self: flex-start;
    margin-top: 4px;
}

/* Welkomst-card actie-area na succesvolle activatie. Login-CTA + tenant-id-strip. */
.uw-trial__welcome-actions {
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.uw-trial__welcome-meta {
    margin: 0;
    text-align: center;
}

.uw-trial__welcome-meta code {
    background: var(--page-bg-soft);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .uw-trial { padding: 64px 16px 80px; }
    .uw-trial__title { font-size: 26px; }
    .uw-trial__card { padding: 24px 20px; }
}


/* ============================================================
   Blazor error-toast — wordt door Blazor runtime alleen zichtbaar
   gemaakt bij een unhandled exception. Eigen styling i.p.v. de
   default zwarte bar.
   ============================================================ */

.uw-error-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: none;     /* Blazor's runtime toggle dit naar 'flex' bij errors */
    align-items: center;
    gap: 12px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--panel-border-strong);
    border-radius: 999px;
    padding: 10px 14px 10px 18px;
    font-size: 14px;
    /* Thema-aware shadow — adapt automatisch aan light/dark via panel-shadow-vars. */
    box-shadow: var(--panel-shadow-hover);
    z-index: 9999;
    max-width: calc(100vw - 48px);
}

#blazor-error-ui.uw-error-toast { display: none; }

/* Blazor's _framework script zet `display: block` direct als style.
   We overrulen dat met een hogere specificity-selector + !important
   zodat we 'flex' krijgen voor de icon-tekst-button-row. */
#blazor-error-ui.uw-error-toast[style*="block"] { display: flex !important; }

.uw-error-toast > .bi-exclamation-triangle-fill {
    color: var(--umbiko-red, #d2483a);
    font-size: 18px;
    line-height: 1;
}
/* Iets feller rood in dark-mode zodat het waarschuwings-icoon blijft opvallen
   tegen de slate-blue toast-achtergrond. */
body[data-theme="dark"] .uw-error-toast > .bi-exclamation-triangle-fill {
    color: #ff8e8c;
}

.uw-error-toast__text { flex: 1; min-width: 0; }

.uw-error-toast__action {
    color: var(--brand-ink);
    text-decoration: underline;
    font-weight: 600;
}

.uw-error-toast__action:hover {
    color: var(--brand-ink-strong);
}

.uw-error-toast__dismiss {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}

.uw-error-toast__dismiss:hover {
    background: var(--page-bg-soft);
    color: var(--ink);
}


/* ============================================================
   Globale roterende orbs-achtergrond (al bestaand) — orbs zelf:
   ============================================================ */

.umbiko-orb-1 { width: 55%; height: 55%; background: #28309d; opacity: 0.12; top: 2%; left: 2%; }
.umbiko-orb-2 { width: 50%; height: 50%; background: #5fa6f0; opacity: 0.14; top: 2%; right: 2%; }
.umbiko-orb-3 { width: 52%; height: 52%; background: #0dc19d; opacity: 0.10; bottom: 2%; right: 2%; }
.umbiko-orb-4 { width: 48%; height: 48%; background: #f7931a; opacity: 0.09; bottom: 2%; left: 2%; }

/* Dark mode: tegen de melk-slate body-achtergrond mag iets meer kleur
   doorkomen dan tegen wit. Te hoog = onleesbaar, te laag = grijs gat. */
[data-theme="dark"] .umbiko-orb-1 { opacity: 0.18; }
[data-theme="dark"] .umbiko-orb-2 { opacity: 0.20; }
[data-theme="dark"] .umbiko-orb-3 { opacity: 0.16; }
[data-theme="dark"] .umbiko-orb-4 { opacity: 0.14; }


/* ============================================================
   Hero-section frame.
   ============================================================ */

.hero {
    position: relative;
    padding: 80px 0 56px;
    overflow: hidden;
}

.hero__inner { position: relative; }

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

/* Verticale ritme tussen eyebrow → heading → lead → actions binnen de hero. */
.hero__copy > * + * { margin-top: 24px; }
.hero__copy > p.hero__lead { margin-top: 16px; }
.hero__copy > .hero__actions { margin-top: 32px; }

.hero__lead {
    margin: 0;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.55;
    max-width: 56ch;
}

.hero__actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero__meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
    color: var(--ink-muted);
    font-size: 13px;
}

.hero__meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
}

@media (max-width: 960px) {
    .hero__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {
    .hero { padding: 48px 0 40px; }
}


/* ============================================================
   TopBar — gebaseerd op design_handoff_umbiko_website/website.css.
   Nav is een pill-strip met grijze achtergrond (var(--chip-bg)) waarin
   de actieve link als donkere pill staat.
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    background: color-mix(in oklab, var(--page-bg) 78%, transparent);
    border-bottom: 1px solid var(--divider);
}

/* Topbar krijgt ruimere horizontale padding dan de standaard .uw-container —
   zonder dit zit het Umbiko-logo links en de CTA rechts tussen 1024 en 1240px
   viewport-breedte krap tegen de scherm-rand. Op kleinere schermen schalen
   we mee: 32px op tablet, 20px op mobiel (matched de globale mobile-rule). */
.topbar > .uw-container { padding-left: 44px; padding-right: 44px; }
@media (max-width: 1024px) { .topbar > .uw-container { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 560px)  { .topbar > .uw-container { padding-left: 20px; padding-right: 20px; } }

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    color: var(--brand-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.topbar__brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

/* Toon de paarse logo standaard, wissel naar witte versie in dark mode. */
.topbar__brand-logo--dark { display: none; }

[data-theme="dark"] .topbar__brand-logo--light { display: none; }
[data-theme="dark"] .topbar__brand-logo--dark  { display: block; }

/* Nav als pill-strip */
.topbar__nav {
    display: inline-flex;
    gap: 0;
    background: var(--chip-bg);
    padding: 3px;
    border-radius: 999px;
    /* Nooit zichzelf opdelen over meerdere regels — anders schaalt de hele
       strip in hoogte (bv. wanneer "Hoe het werkt" wrapt) en wordt het
       actieve pill-bolletje een gigantische cirkel ipv ovaal. flex-shrink
       op 0 voorkomt dat een te brede nav inkrimpt; daarvoor zorgt de
       hamburger-breakpoint hieronder. */
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.topbar__nav-link {
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    /* Voorkomt dat lange items als "Hoe het werkt" of "Functionaliteiten"
       intern wrappen — zou de pill-hoogte opblazen en het actieve pill-
       bolletje misvormen tot een cirkel. */
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.topbar__nav-link:hover {
    background: rgba(40, 48, 157, .08);
    color: var(--brand-ink);
}

[data-theme="dark"] .topbar__nav-link:hover {
    background: rgba(143, 168, 255, .12);
    color: var(--brand-ink);
}

.topbar__nav-link.is-active {
    background: var(--brand);
    color: var(--brand-on);
    font-weight: 600;
}

/* Actions cluster */
.topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* CTA-knop in de topbar moet visueel matchen met de nav-pills (Contact
   etc.) én de user-toggle. Standaard .u-btn--sm is 13px font + lh 1 + 8px
   padding = 29px — te kort en met andere proporties dan de nav-pill (14px
   font + lh 1.5 + 8px padding = ~37px). Daardoor lijkt de knop "lager" te
   zitten ondanks align-items: center.

   Fix: dezelfde padding/font-size/line-height als .topbar__nav-link, plus
   height: auto zodat 'ie organisch matcht. User-toggle blijft 38px maar
   het 1px-verschil is niet merkbaar.

   N.B.: dit target .u-btn (zonder w), gegenereerd door UButton.razor.
   Verwarrend genoeg bestaat er ook .uw-btn (met w) in public.css — die
   wordt los in razor-files gebruikt (price-cards, trial-success-card). */
.topbar__actions .u-btn,
.topbar__actions .uw-btn {
    height: auto;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
}

/* Lang-pill (twee buttons in één pill) */
.topbar__lang {
    border: 1px solid var(--panel-border);
    background: var(--panel);
    border-radius: 999px;
    padding: 3px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.topbar__lang form { display: contents; }

.topbar__lang-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background .15s ease, color .15s ease;
}

.topbar__lang-btn.is-active {
    background: var(--brand);
    color: var(--brand-on);
}

/* Theme-toggle (rond) */
.topbar__theme form { display: contents; }

.topbar__icon-btn {
    appearance: none;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--ink);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.topbar__icon-btn:hover {
    border-color: var(--panel-border-strong);
}

/* ============================================================
   Mobiele hamburger — checkbox-hack, geen JS.
   <input type="checkbox"> staat als eerste child van <header>.
   <label for=…> in de inner row dient als visuele knop.
   Een uitklap-<nav> als laatste child van <header> komt zichtbaar
   wanneer :has(input:checked) op de header matcht.
   Active-state op nav-links blijft via nav-active.js (hashchange).
   ============================================================ */

/* De checkbox visueel verbergen maar wél functioneel laten — anders
   activeert de label de bijbehorende input niet. */
.topbar__toggle-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    overflow: hidden;
}

/* Hamburger-knop. Default verborgen, pas op mobile zichtbaar. */
.topbar__toggle {
    display: none;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    align-items: center; justify-content: center;
    font-size: 18px;
    transition: background .15s ease, border-color .15s ease;
}
.topbar__toggle:hover { border-color: var(--panel-border-strong); }
.topbar__toggle-icon--close { display: none; }

/* Mobiele uitklap-nav. Default volledig verborgen — animeert open via grid-rows. */
.topbar__mobile {
    display: none;
    flex-direction: column;
    border-top: 1px solid var(--divider);
    background: color-mix(in oklab, var(--page-bg) 92%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    padding: 8px 0 0;
}
.topbar__mobile nav { display: flex; flex-direction: column; }
.topbar__mobile-link {
    display: block;
    padding: 14px 24px;
    color: var(--ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--divider);
}
.topbar__mobile-link:hover {
    background: color-mix(in oklab, var(--brand) 6%, transparent);
    color: var(--brand-ink);
}

/* Voet van het mobiele paneel: lang-pill + theme-toggle + login.
   Deze controls woonden boven in .topbar__actions, maar daar maken ze
   't te druk naast de hamburger. Hier hebben ze de ruimte. */
.topbar__mobile-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px 16px;
    border-top: 1px solid var(--divider);
}
.topbar__mobile-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.topbar__mobile-login:hover { border-color: var(--panel-border-strong); }

/* Twee login-knoppen onder elkaar in het mobiele paneel. Margin-left: auto
   op de wrapper duwt 'm rechts; flex-column zorgt dat de twee knoppen
   netjes onder elkaar vallen i.p.v. naast elkaar (geen ruimte daarvoor
   naast lang/theme). */
.topbar__mobile-logins {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.topbar__mobile-logins .topbar__mobile-login {
    margin-left: 0;
    justify-content: center;
}

/* Open-state: checkbox checked → toon panel + flip icoon. */
.topbar:has(.topbar__toggle-input:checked) .topbar__mobile { display: flex; }
.topbar:has(.topbar__toggle-input:checked) .topbar__toggle-icon--open  { display: none; }
.topbar:has(.topbar__toggle-input:checked) .topbar__toggle-icon--close { display: inline-flex; }
.topbar:has(.topbar__toggle-input:checked) .topbar__toggle {
    background: var(--brand);
    color: var(--brand-on);
    border-color: var(--brand);
}

/* ============================================================
   Account-popover (.topbar__user) — checkbox-hack, geen JS.
   Bevat taal + thema + login. Vervangt de losse pillen die
   voorheen in .topbar__actions stonden — bespaart horizontale
   ruimte zodat de nav-pill volledig blijft passen.

   Sluiten gaat impliciet: elke action in het menu (lang-form,
   theme-form, login-link) navigeert → page-reload → checkbox
   onchecked → menu sluit. Dus geen click-outside-to-close logica
   nodig.
   ============================================================ */

.topbar__user { position: relative; display: inline-flex; }

/* Checkbox visueel verbergen, functioneel laten. */
.topbar__user-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    overflow: hidden;
}

/* Trigger: ronde icon-knop met avatar + chevron. */
.topbar__user-toggle {
    display: inline-flex;
    align-items: center; gap: 4px;
    height: 38px; padding: 0 10px 0 12px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--ink);
    cursor: pointer;
    font-size: 18px;
    transition: background .15s ease, border-color .15s ease;
}
.topbar__user-toggle:hover { border-color: var(--panel-border-strong); }
.topbar__user-chevron { font-size: 11px; transition: transform .2s ease; }

/* Open-state via :has(:checked) op de wrapper. */
.topbar__user:has(.topbar__user-input:checked) .topbar__user-toggle {
    background: var(--brand);
    color: var(--brand-on);
    border-color: var(--brand);
}
.topbar__user:has(.topbar__user-input:checked) .topbar__user-chevron {
    transform: rotate(180deg);
}

/* Het menu: float onder de trigger, rechts uitgelijnd. Default verborgen. */
.topbar__user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--panel-border-strong);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(16,24,64,.18), 0 4px 12px rgba(16,24,64,.08);
    display: none;
    z-index: 60;
    animation: uw-user-menu-in .18s cubic-bezier(.2,.9,.3,1.1) both;
}
.topbar__user:has(.topbar__user-input:checked) .topbar__user-menu { display: block; }
@keyframes uw-user-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Een rij in het menu: label links, control rechts. */
.topbar__user-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px;
    gap: 12px;
    border-radius: 10px;
}
.topbar__user-row + .topbar__user-row { margin-top: 2px; }
.topbar__user-row-label {
    font-size: 13px; font-weight: 500;
    color: var(--ink-soft);
}

/* Divider tussen settings-rijen en de login-actie. */
.topbar__user-divider {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: 8px 0;
}

/* Login-rij in de menu — full-width klikbare actie met icoon links. */
.topbar__user-action {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    transition: background .12s ease;
}
.topbar__user-action:hover {
    background: color-mix(in oklab, var(--brand) 8%, transparent);
    color: var(--brand-ink);
}
.topbar__user-action i { font-size: 16px; color: var(--ink-soft); }
.topbar__user-action:hover i { color: var(--brand-ink); }

@media (max-width: 1024px) {
    /* Desktop-nav + dropdown verbergen, hamburger tonen.
       Breakpoint op 1024px omdat de pill-strip met 7 items onder die breedte
       te dicht op de CTA komt te staan — dan liever direct het stacked menu. */
    .topbar__nav { display: none; }
    .topbar__user { display: none; }
    .topbar__toggle { display: inline-flex; }
    .topbar__actions { gap: 10px; }
}

@media (max-width: 560px) {
    /* Hero: knoppen en meta via u-btn (UButton component) */
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .u-btn { justify-content: center; }
    .hero__meta { gap: 10px; font-size: 12px; flex-wrap: wrap; }

    /* Lang-pill in mobile-paneel iets compacter op heel klein scherm */
    .topbar__mobile .topbar__lang-btn { padding: 5px 8px; }
}

@media (max-width: 400px) {
    /* iPhone SE-class: verkort de CTA in de topbar of laat 'm wrap-vrij houden.
       Bewust géén verberg-regel meer — CTA blijft zichtbaar als enige primaire
       actie naast Logo + hamburger. */
    .topbar__inner { gap: 10px; }
    .topbar__actions .u-btn--primary { padding: 8px 12px; font-size: 13px; }
}

/* USectionHead op kleine schermen: altijd in kolom */
@media (max-width: 720px) {
    .u-section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .u-section-head__lead { max-width: 100%; font-size: 15px; }
}

/* ============================================================
   Auth screens (Login, AccessDenied) — marketing-card stijl
   met orbs-achtergrond uit EmptyLayout.
   ============================================================ */

.uw-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
    position: relative;
    z-index: 2;
}

.uw-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 22px;
    padding: 32px 36px 28px;
    box-shadow: var(--panel-shadow-hover);
    backdrop-filter: blur(8px);
    text-align: left;
}

.uw-auth-card__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--brand-ink);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.uw-auth-card__logo { height: 32px; }

/* Eyebrow direct onder het logo plaatsen + adem naar de titel. */
.uw-auth-card .u-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
}
.uw-auth-card__logo {
    height: 28px;
    width: auto;
}
.uw-auth-card__logo--dark { display: none; }
body[data-theme="dark"] .uw-auth-card__logo--light { display: none; }
body[data-theme="dark"] .uw-auth-card__logo--dark  { display: inline-block; }

.uw-auth-card__chip {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 3px 8px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    margin-left: 4px;
    font-weight: 600;
}
.uw-auth-card__chip--danger {
    color: var(--umbiko-red);
    border-color: rgba(255, 61, 59, 0.35);
    background: rgba(255, 61, 59, 0.06);
}

.uw-auth-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 18px;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

.uw-auth-card__lead {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin: 0 0 22px;
    line-height: 1.55;
}

.uw-auth-card__cta {
    width: 100%;
    justify-content: center;
    margin-top: 0;
}
.uw-auth-card__cta--secondary {
    margin-top: 8px;
}

.uw-auth-card__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255, 61, 59, 0.08);
    border: 1px solid rgba(255, 61, 59, 0.25);
    color: var(--umbiko-red);
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 16px;
}
.uw-auth-card__error i { margin-top: 1px; }

.uw-auth-card__hint {
    margin: 18px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.7;
}
.uw-auth-card__hint code,
.uw-auth-card__hint a {
    font-family: var(--font-mono);
    background: var(--code-bg, var(--chip-bg));
    color: var(--brand-ink);
    padding: 1px 6px;
    border-radius: 4px;
    text-decoration: none;
}

.uw-auth-card__customer-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    background: var(--chip-bg);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.uw-auth-card__customer-note i { color: var(--brand); }

.uw-auth-card__icon-banner {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 8px;
}
.uw-auth-card__icon-banner--danger {
    background: rgba(255, 61, 59, 0.1);
    color: var(--umbiko-red);
}

@media (max-width: 520px) {
    .uw-auth-card { padding: 32px 24px 24px; border-radius: 18px; }
    .uw-auth-card__title { font-size: 24px; }
}

/* ───── Consent banner (GDPR) ────────────────────────────────────────────
   Verschijnt fixed onderaan tot bezoeker een keuze maakt. Niet-modaal
   zodat de site bruikbaar blijft tijdens lezen van de tekst. */
.uw-consent {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    background: var(--uw-surface, #fff);
    border: 1px solid var(--uw-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: 16px 20px;
}
.uw-consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.uw-consent__text {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
}
.uw-consent__text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}
.uw-consent__text p {
    margin: 0;
    color: var(--uw-text-muted, #4b5563);
}
.uw-consent__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 520px) {
    .uw-consent { left: 8px; right: 8px; bottom: 8px; padding: 14px; }
    .uw-consent__actions { width: 100%; justify-content: stretch; }
    .uw-consent__actions form { flex: 1; }
    .uw-consent__actions .uw-btn { width: 100%; }
}