/* Megaventures login — APP_LOGIN=megaventures */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.mvl-body {
    --mvl-ink: var(--theme-ink, #1e293b);
    --mvl-muted: #64748b;
    --mvl-line: #e2e8f0;
    --mvl-brand: #1557f5;
    --mvl-brand-deep: #0b3fc7;
    --mvl-navy: #0b2a8f;
    --mvl-cyan: #2ad4ff;
    margin: 0;
    min-height: 100vh;
    background: #fff;
    font-family: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mvl-ink);
}

.mvl { overflow-x: hidden; display: grid; grid-template-columns: minmax(0, 58fr) minmax(400px, 42fr); min-height: 100vh; }

/* ---------- Hero ---------- */
.mvl-hero {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 90% at 85% 40%, #1f63ff 0%, #0b3fd1 38%, #062a9c 70%, #041d73 100%);
}
.mvl-hero__glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 45% at 92% 52%, rgba(42, 212, 255, .35), transparent 70%),
        radial-gradient(40% 30% at 10% 100%, rgba(42, 212, 255, .18), transparent 70%);
}
/* Artwork anchored right at full height; its aspect ratio keeps orb % positions on the arc. */
.mvl-hero__art { position: absolute; top: 0; right: 0; height: 100%; pointer-events: none; }
.mvl-hero__drift { position: relative; height: 100%; aspect-ratio: 1173 / 1341; transform-origin: 70% 60%; }
.mvl-hero__drift img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    -webkit-mask: linear-gradient(to right, transparent 0%, #000 22%);
    mask: linear-gradient(to right, transparent 0%, #000 22%);
}
.mvl-orb {
    position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 102, .95) 0%, rgba(255, 190, 60, .35) 40%, transparent 70%);
    mix-blend-mode: screen;
}
.mvl-orb.is-cyan { background: radial-gradient(circle, rgba(170, 236, 255, .95) 0%, rgba(42, 212, 255, .35) 40%, transparent 70%); }
.mvl-orb.is-sm { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.mvl-anim [data-reveal], .mvl-anim .mvl-hero__art { visibility: hidden; }
.mvl-streaks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mvl-streak path { fill: none; stroke-linecap: round; stroke-dasharray: 9 120; stroke-dashoffset: 9; }
.mvl-streak .is-halo { stroke: rgba(42, 212, 255, .95); stroke-width: 22; }
.mvl-streak .is-core { stroke: #f2fdff; stroke-width: 5; }


.mvl-hero__inner {
    position: relative; z-index: 1; height: 100%; box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: clamp(28px, 5.5vh, 60px) clamp(32px, 3.6vw, 56px) clamp(20px, 3.5vh, 40px);
}
.mvl-eyebrow {
    display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(14px, 2.6vh, 28px);
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7cc8ff;
}
.mvl-eyebrow::before { content: ''; width: 32px; height: 2px; background: currentColor; border-radius: 2px; }
.mvl-headline {
    margin: 0; color: #fff; font-weight: 800; letter-spacing: -.035em; line-height: 1.02;
    font-size: min(4.1vw, 6.6vh); max-width: 13em;
}
.mvl-headline span { display: block; color: var(--mvl-cyan); }
.mvl-lead {
    margin: clamp(10px, 2vh, 20px) 0 clamp(16px, 3vh, 32px); max-width: 36em;
    font-size: clamp(13px, 1.1vw, 17px); line-height: 1.5; color: rgba(255, 255, 255, .86);
}

.mvl-stage { max-width: 340px; }
.mvl-features { --mvl-icon: clamp(38px, 5.6vh, 50px); position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.2vh, 12px); }
/* Connector through the icon centres; first in DOM so cards paint over it and only the icons hide it. */
.mvl-rail {
    position: absolute; z-index: 0; top: calc(var(--mvl-icon) / 2 + 12px); bottom: calc(var(--mvl-icon) / 2 + 12px);
    left: calc(15px + var(--mvl-icon) / 2 - 1px); width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); overflow: visible;
}
.mvl-rail i {
    position: absolute; left: -3px; top: 0; width: 8px; height: 56px; margin-top: -28px; border-radius: 8px; opacity: 0;
    background: linear-gradient(to bottom, transparent, #8ae9ff 45%, #fff 50%, #8ae9ff 55%, transparent);
    box-shadow: 0 0 14px 2px rgba(42, 212, 255, .55);
}
.mvl-feature {
    display: flex; align-items: center; gap: 14px;
    padding: clamp(8px, 1.3vh, 12px) 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mvl-feature strong { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.mvl-feature small { display: block; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .78); margin-top: 1px; }
.mvl-feature__icon svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mvl-feature__icon .ic-bar { fill: #fff; stroke: none; }
.mvl-feature__icon .ic-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
.mvl-feature__icon {
    flex: none; width: clamp(38px, 5.6vh, 50px); height: clamp(38px, 5.6vh, 50px); border-radius: 12px;
    display: grid; place-items: center; font-size: 22px; color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .18);
}
.is-blue { background: linear-gradient(145deg, #3b8bff, #1557f5); }
.is-green { background: linear-gradient(145deg, #34d27b, #16a34a); }
.is-violet { background: linear-gradient(145deg, #9a6bff, #6d3df0); }
.is-amber { background: linear-gradient(145deg, #ffc23d, #f59e0b); }
.is-red { background: linear-gradient(145deg, #ff7a6b, #ef4444); }

.mvl-values { list-style: none; margin: auto 0 0; padding-top: clamp(14px, 3vh, 30px); padding: 0; display: flex; flex-wrap: wrap; }
.mvl-values li { display: flex; align-items: center; gap: 10px; padding: 4px 22px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9); border-left: 1px solid rgba(255, 255, 255, .2); }
.mvl-values li:first-child { padding-left: 0; border-left: 0; }
.mvl-values i { font-size: 22px; color: #fff; }

/* ---------- Sign-in panel ---------- */
.mvl-panel {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 3.4vh, 48px) clamp(24px, 4vw, 64px);
    background:
        radial-gradient(70% 40% at 100% 100%, #e8efff 0%, transparent 70%),
        radial-gradient(50% 30% at 100% 85%, #f1f5ff 0%, transparent 70%),
        #fff;
}
.mvl-card { width: 100%; max-width: 490px; }

.mvl-brand { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 22px); margin-bottom: clamp(16px, 3.4vh, 36px); }
.mvl-company { display: flex; align-items: center; gap: 14px; max-width: 100%; }
/* Same height as the application logo below it; wide company logos may run up to 200px. */
.mvl-company__logo { height: clamp(44px, 8vh, 80px); width: auto; max-width: 200px; object-fit: contain; }
.mvl-company__text { min-width: 0; line-height: 1.1; color: var(--mvl-navy); }
.mvl-company__text strong { display: block; font-size: clamp(20px, 3.6vh, 30px); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #0f1d4a; }
.mvl-company__text span { display: block; font-size: clamp(13px, 2.1vh, 19px); font-weight: 500; text-transform: uppercase; color: #0f1d4a; }
.mvl-company__text small { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--mvl-muted); margin-left: 6px; text-transform: none; }

.mvl-product { text-align: center; }
.mvl-product h1 {
    margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: .95;
    font-size: clamp(40px, min(9.6vh, 18vw), 96px);
    background: linear-gradient(180deg, #1a52e6 0%, #0b2a8f 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mvl-product__logo { line-height: 0; background: none; }
.mvl-product__logo img { height: clamp(44px, 8vh, 80px); width: auto; max-width: 100%; object-fit: contain; }
.mvl-product p { margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #0f1d4a; }

.mvl-welcome { margin: 0; font-size: clamp(26px, 4.6vh, 40px); font-weight: 800; letter-spacing: -.025em; color: #0f172a; }
.mvl-sub { margin: 6px 0 clamp(14px, 3vh, 28px); font-size: 14px; color: var(--mvl-muted); }

.mvl-alert { margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.mvl-form { display: grid; gap: clamp(12px, 2.2vh, 20px); }
.mvl-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #0f172a; }
.mvl-input {
    display: flex; align-items: center; gap: 12px; height: clamp(46px, 7vh, 56px); padding: 0 14px 0 16px;
    border: 1px solid var(--mvl-line); border-radius: 10px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.mvl-input:focus-within { border-color: var(--mvl-brand); box-shadow: 0 0 0 3px rgba(21, 87, 245, .14); }
.mvl-input.is-invalid { border-color: #fca5a5; background: #fffafa; }
.mvl-input > i { font-size: 20px; color: #64748b; }
.mvl-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--mvl-ink); }
.mvl-input input::placeholder { color: #94a3b8; }
.mvl-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: var(--mvl-ink); }
.mvl-eye { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #475569; font-size: 20px; cursor: pointer; }
.mvl-eye:hover, .mvl-eye:focus-visible { background: var(--theme-soft, #eef1fd); color: var(--mvl-brand); outline: 0; }
.mvl-error { margin-top: 6px; font-size: 12px; color: #b91c1c; }

.mvl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mvl-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #334155; cursor: pointer; }
.mvl-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--mvl-brand); cursor: pointer; }
.mvl-link { font-size: 14px; font-weight: 600; color: var(--mvl-brand); text-decoration: none; }
.mvl-link:hover, .mvl-link:focus-visible { color: var(--mvl-brand-deep); text-decoration: underline; }

.mvl-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    height: clamp(46px, 7vh, 58px); margin-top: 4px; border: 0; border-radius: 10px;
    background: linear-gradient(180deg, #1f63ff, var(--mvl-brand)); color: #fff;
    font: inherit; font-size: 16px; font-weight: 600;
    box-shadow: 0 10px 22px rgba(21, 87, 245, .28); cursor: pointer; transition: box-shadow .15s, background .15s;
}
.mvl-submit i { font-size: 22px; transition: transform .15s; }
.mvl-submit:hover, .mvl-submit:focus-visible { background: linear-gradient(180deg, #1557f5, var(--mvl-brand-deep)); box-shadow: 0 12px 26px rgba(21, 87, 245, .36); outline: 0; }
.mvl-submit:hover i { transform: translateX(3px); }
.mvl-submit.is-busy { opacity: .75; cursor: progress; }

.mvl-foot { margin-top: clamp(16px, 3.4vh, 30px); padding-top: clamp(14px, 2.6vh, 22px); border-top: 1px solid var(--mvl-line); text-align: center; }
.mvl-foot p { margin: 0 0 clamp(8px, 1.8vh, 16px); font-size: 14px; line-height: 1.6; color: #475569; }
.mvl-foot small { font-size: 12px; color: var(--mvl-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    /* Hero too narrow to keep the laptop clear of the cards: keep the art as a dim backdrop. */
    .mvl-hero__drift { opacity: .35; }
}
@media (max-width: 991.98px) {
    .mvl { grid-template-columns: 1fr; }
    .mvl-hero { display: none; }
    .mvl-panel { min-height: 100vh; padding: 32px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .mvl-input, .mvl-submit, .mvl-submit i { transition: none; }
}