@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-italic.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-regular.ttf) format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono.ttf) format('truetype');
}

    /* ============================================================
       Fortus Portal — login surface
       ============================================================ */

    :root {
        --eet-ink:    #14283f;
        --eet-paper:  #f7f9fc;
        --eet-rule:   #344d6a;
        --eet-mist:   #7890ad;
        --eet-text:   #edf3fb;
        --eet-text-2: #b1c4dc;
        --eet-blue: #4f79b6;
        --eet-light-blue:  #9cbbe8;
        --eet-green:  #34d399;

        --eet-serif:  'Fraunces', 'Iowan Old Style', Georgia, serif;
        --eet-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    }

    /* ===== Hero panel ===== */
    .eet-hero-panel { display: none; }
    @media (min-width: 1024px) {
        .eet-hero-panel {
            display: block;
            position: fixed;
            inset: 0 auto 0 0;
            width: 50vw;
            height: 100vh;
            background:
                radial-gradient(ellipse 80% 60% at 14% 112%, rgba(79, 121, 182, 0.32), transparent 55%),
                radial-gradient(ellipse 60% 50% at 96% 8%, rgba(156, 187, 232, 0.14), transparent 60%),
                linear-gradient(180deg, #142b49 0%, #14283f 100%);
            color: var(--eet-text);
            overflow: hidden;
            z-index: 1;
            font-family: ui-sans-serif, system-ui, sans-serif;
        }
    }

    .eet-hero-grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(186, 210, 243, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(186, 210, 243, 0.05) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: radial-gradient(ellipse 90% 90% at 30% 50%, #000 30%, transparent 80%);
        pointer-events: none;
    }

    .eet-hero-glow {
        position: absolute;
        bottom: -180px;
        left: -120px;
        width: 540px;
        height: 540px;
        border-radius: 50%;
        background: radial-gradient(circle at center, rgba(156, 187, 232, 0.42), rgba(79, 121, 182, 0.12) 45%, transparent 70%);
        filter: blur(42px);
        animation: eet-breathe 8s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes eet-breathe {
        0%, 100% { transform: scale(1);    opacity: 1;    }
        50%      { transform: scale(1.08); opacity: 0.85; }
    }

    .eet-hero-watermark {
        position: absolute;
        top: -5rem;
        right: -2rem;
        font-family: var(--eet-serif);
        font-size: 40rem;
        line-height: 0.82;
        font-style: italic;
        color: rgba(255, 255, 255, 0.022);
        pointer-events: none;
        user-select: none;
        letter-spacing: -0.04em;
    }

    .eet-hero-inner {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 4rem 4.5rem;
        display: flex;
        flex-direction: column;
        max-width: 640px;
    }

    .eet-hero-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
    .eet-mark {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(156, 187, 232, 0.26);
        border-radius: 12px;
        background: rgba(156, 187, 232, 0.05);
        backdrop-filter: blur(4px);
    }
    .eet-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--eet-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--eet-text-2);
    }
    .eet-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--eet-blue);
        box-shadow: 0 0 0 4px rgba(79, 121, 182, 0.18);
        animation: eet-blink 2.4s ease-in-out infinite;
    }
    @keyframes eet-blink {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.35; }
    }

    /* Headline */
    .eet-hero-headline {
        margin-top: auto;
        padding-top: 4rem;
    }
    .eet-hero-headline h1 {
        margin: 0;
        font-family: var(--eet-serif);
        font-weight: 400;
        font-size: clamp(2.75rem, 5vw, 4.85rem);
        line-height: 0.98;
        letter-spacing: -0.02em;
        color: #f5f8ff;
    }
    .eet-h-line {
        display: block;
        opacity: 0;
        transform: translateY(14px);
        animation: eet-rise 0.9s cubic-bezier(.2,.8,.2,1) forwards;
    }
    .eet-h-line:nth-child(1) { animation-delay: 0.05s; }
    .eet-h-line:nth-child(2) { animation-delay: 0.18s; }
    .eet-h-italic {
        font-style: italic;
        background: linear-gradient(92deg, #d7e7ff 0%, #9cbbe8 36%, #4f79b6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    @keyframes eet-rise {
        to { opacity: 1; transform: translateY(0); }
    }

    .eet-hero-tagline {
        margin: 1.5rem 0 0 0;
        max-width: 30rem;
        color: var(--eet-text-2);
        font-size: 0.9375rem;
        line-height: 1.6;
        opacity: 0;
        animation: eet-rise 0.9s cubic-bezier(.2,.8,.2,1) 0.34s forwards;
    }

    /* Status block */
    .eet-hero-status {
        margin-top: 3.5rem;
        opacity: 0;
        animation: eet-rise 0.9s cubic-bezier(.2,.8,.2,1) 0.5s forwards;
    }
    .eet-status-label {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        font-family: var(--eet-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--eet-text-2);
        margin-bottom: 1rem;
    }
    .eet-rule {
        display: inline-block;
        width: 28px;
        height: 1px;
        background: var(--eet-rule);
    }
    .eet-rule--short { width: 18px; }

    .eet-status-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.7rem;
    }
    .eet-status-list li {
        display: grid;
        grid-template-columns: 12px 1fr auto;
        align-items: center;
        gap: 0.875rem;
        padding: 0.55rem 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
        font-size: 0.875rem;
    }
    .eet-status-name { color: #d4e0ef; }
    .eet-status-state {
        font-family: var(--eet-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--eet-mist);
    }
    .eet-pulse {
        position: relative;
        width: 8px; height: 8px;
        border-radius: 50%;
    }
    .eet-pulse::after {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid currentColor;
        opacity: 0.5;
        animation: eet-ping 2.4s ease-out infinite;
    }
    .eet-pulse--green { background: var(--eet-green);  color: var(--eet-green);  }
    .eet-pulse--amber { background: var(--eet-light-blue);  color: var(--eet-light-blue);  }
    @keyframes eet-ping {
        0%   { transform: scale(0.6); opacity: 0.7; }
        80%  { transform: scale(1.6); opacity: 0;   }
        100% { transform: scale(1.6); opacity: 0;   }
    }

    /* Footer */
    .eet-hero-foot {
        margin-top: auto;
        padding-top: 3rem;
        font-family: var(--eet-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--eet-mist);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        opacity: 0;
        animation: eet-rise 0.9s cubic-bezier(.2,.8,.2,1) 0.65s forwards;
    }
    .eet-foot-sep { color: var(--eet-rule); }

    /* ===== Card head (rechterkolom / boven formulier) ===== */
    .eet-card-head { margin-bottom: 1.75rem; }
    .eet-card-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        font-family: var(--eet-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #536c8c;
        margin-bottom: 0.875rem;
    }
    .eet-card-eyebrow .eet-rule { background: #d0dced; }
    .eet-card-title {
        margin: 0;
        font-family: var(--eet-serif);
        font-weight: 400;
        font-size: clamp(2rem, 3.4vw, 2.5rem);
        line-height: 1;
        letter-spacing: -0.015em;
        color: var(--eet-ink);
    }
    .eet-card-title em {
        font-style: italic;
        background: linear-gradient(92deg, #4f79b6 0%, #355e97 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .eet-card-sub {
        margin: 0.875rem 0 0 0;
        font-size: 0.875rem;
        line-height: 1.55;
        color: #52647c;
    }

    /* ===== Microsoft-knop ===== */
    .eet-msft-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        width: 100%;
        padding: 0.85rem 1.1rem;
        border: 1px solid #d5dfec;
        border-radius: 0.625rem;
        background: #ffffff;
        color: var(--eet-ink);
        font-size: 0.9375rem;
        font-weight: 500;
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 0 rgba(20, 40, 63, 0.04);
    }
    .eet-msft-btn:hover {
        background: var(--eet-ink);
        color: #fff;
        border-color: var(--eet-ink);
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: 0 14px 30px -10px rgba(20, 40, 63, 0.35);
    }
    .eet-msft-btn span:nth-of-type(1) { flex: 1; }
    .eet-msft-arrow {
        font-family: var(--eet-mono);
        font-size: 1rem;
        transition: transform 0.18s ease;
        opacity: 0.6;
    }
    .eet-msft-btn:hover .eet-msft-arrow { transform: translateX(4px); opacity: 1; }

    /* ===== Mobile (< lg): hero verdwijnt, card krijgt een banner ===== */
    @media (max-width: 1023.98px) {
        body:has(.fi-auth) .fi-simple-layout { padding: 2rem 1.25rem; }
        .eet-card-head { margin-bottom: 1.5rem; }
        .eet-card-head::before {
            content: 'EET · Conocido';
            display: block;
            font-family: var(--eet-mono);
            font-size: 0.6875rem;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--eet-blue);
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #dbe3ee;
        }
    }

    /* Reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .eet-h-line, .eet-hero-tagline, .eet-hero-status, .eet-hero-foot {
            opacity: 1 !important; transform: none !important; animation: none !important;
        }
        .eet-pulse::after, .eet-dot, .eet-hero-glow { animation: none !important; }
    }

* { box-sizing: border-box; }
body { margin:0; background:var(--eet-paper); color:var(--eet-ink); font-family:ui-sans-serif,system-ui,sans-serif; }
.login-main { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem; }
.login-content { width:100%; max-width:25rem; }
.eet-msft-btn:focus-visible { outline:3px solid var(--eet-blue); outline-offset:4px; }
.login-note { color:#52647c; font-size:.75rem; line-height:1.7; margin-top:1.5rem; }
.login-footer { display:flex; justify-content:space-between; gap:1rem; border-top:1px solid #d5dfec; padding-top:1rem; margin-top:3rem; font: .625rem var(--eet-mono); letter-spacing:.12em; text-transform:uppercase; color:#536c8c; }
.login-error { border:1px solid #e6b4a9; background:#fff1ed; color:#923c2b; padding:1rem; margin-bottom:1.25rem; border-radius:.625rem; font-size:.875rem; line-height:1.6; }
@media(min-width:1024px) { .login-main { margin-left:50%; width:50%; padding:3rem; } }
@media(min-width:1024px) and (max-height:760px) { .eet-hero-inner { padding:2rem 3rem; } .eet-hero-headline { padding-top:2rem; } .eet-hero-status { margin-top:2rem; } .eet-hero-foot { padding-top:2rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }

/* EET brand palette: blue #4f79b6, white and neutral charcoal. */
.eet-msft-btn { border-color:#4f79b6; background:#4b75b1; color:#fff; }
.eet-msft-btn:hover { background:#355e97; border-color:#355e97; }
.eet-msft-btn svg { background:#fff; border-radius:3px; width:26px; height:26px; padding:4px; flex-shrink:0; }