@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base ───────────────────────────────────────────────────────── */
html, body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-action-default) var(--mud-palette-background);
}

h1:focus { outline: none; }

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
    --asc-radius: 6px;
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: var(--mud-palette-background); }
::-webkit-scrollbar-thumb   { background: var(--mud-palette-action-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-primary); }

/* ── Stat cards ─────────────────────────────────────────────────── */
.asc-stat {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--asc-accent, var(--mud-palette-primary));
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0%, transparent 65%);
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 68px;
}
.asc-stat--success { --asc-accent: var(--mud-palette-success);  background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-success) 6%, transparent) 0%, transparent 65%); }
.asc-stat--error   { --asc-accent: var(--mud-palette-error);    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-error) 6%, transparent) 0%, transparent 65%); }
.asc-stat--warning { --asc-accent: var(--mud-palette-warning);  background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-warning) 6%, transparent) 0%, transparent 65%); }
.asc-stat--purple  { --asc-accent: var(--mud-palette-secondary); background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-secondary) 6%, transparent) 0%, transparent 65%); }
.asc-stat__num {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}
.asc-stat__lbl {
    font-size: 0.675rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 3px;
}

/* ── Page header bar ────────────────────────────────────────────── */
.asc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.page-title { font-weight: 700; }
.clickable { cursor: pointer; }

@media (max-width: 600px) {
    .asc-page-header {
        align-items: stretch;
        flex-wrap: wrap;
        gap: .65rem;
    }

    .asc-page-header > :last-child {
        width: 100%;
    }

    .asc-page-header > :last-child .mud-button-root {
        width: 100%;
    }
}

/* ── Utilities ──────────────────────────────────────────────────── */
.font-mono  { font-family: 'JetBrains Mono', 'Cascadia Code', monospace; font-size: 0.8em; }
.text-muted { color: var(--mud-palette-text-secondary) !important; }
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-input-control:focus-within,
button:focus-visible,
a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

/* ── Blazor error UI ────────────────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light dark;
    background: #7f1d1d;
    border-top: 1px solid #ef4444;
    color: #fca5a5;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.5);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.5rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: .875rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .4rem;
}
.blazor-error-boundary {
    background: #7f1d1d;
    padding: .75rem .75rem .75rem 1rem;
    color: #fca5a5;
    border-radius: var(--asc-radius);
    border-left: 3px solid #ef4444;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Loading progress ───────────────────────────────────────────── */
.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--mud-palette-divider);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--mud-palette-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    inset: calc(20vh + 2.5rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

code { font-family: 'JetBrains Mono', 'Cascadia Code', monospace; font-size: 0.85em; color: var(--mud-palette-primary); }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN LAYOUT
═══════════════════════════════════════════════════════════════ */
.login-shell {
    display: flex;
    min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif;
}

/* Left dark brand panel */
.login-brand-panel {
    display: none;
    background: linear-gradient(145deg, #0F172A 0%, #1E293B 60%, #0F172A 100%);
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%);
    border-radius: 50%;
}

.login-brand-panel::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
    border-radius: 50%;
}

@media (min-width: 900px) {
    .login-brand-panel {
        display: flex;
        flex: 0 0 45%;
        align-items: center;
        justify-content: center;
    }
}

.login-brand-content {
    padding: 3rem;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

.brand-headline {
    font-size: 2.5rem;
    font-weight: 800;
    color: #F1F5F9;
    line-height: 1.15;
    margin: 1rem 0;
    letter-spacing: -0.02em;
}

.brand-sub {
    color: #94A3B8;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.brand-feature {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #CBD5E1;
    font-size: 0.875rem;
    font-weight: 500;
}

.brand-feature-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Right form panel */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    padding: 2rem 1.5rem;
}

.login-form-inner {
    width: 100%;
    max-width: 400px;
}

.login-form-header {
    margin-bottom: 2rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.login-sub {
    color: #64748B;
    font-size: 0.9rem;
    margin: 0;
}

.login-fields {
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────────── */
.lp-hero {
    background: #0F172A;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}

.lp-hero::before {
    content: '';
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.lp-hero-content {
    max-width: 720px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.lp-logo-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 0.375rem 1rem 0.375rem 0.5rem;
    margin-bottom: 2.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #CBD5E1;
}

.lp-logo-icon {
    width: 2rem;
    height: 2rem;
    background: #3B82F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lp-logo-name {
    font-weight: 700;
}

.lp-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #F1F5F9;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin: 0 0 1.5rem;
}

.lp-title-accent {
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-subtitle {
    font-size: 1.125rem;
    color: #94A3B8;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto 2.5rem;
}

.lp-actions {
    margin-bottom: 3rem;
}

.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    background: #3B82F6;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.625rem;
    transition: background 0.2s, transform 0.1s;
    gap: 0.25rem;
}

.lp-btn-primary:hover {
    background: #2563EB;
    transform: translateY(-1px);
    color: #FFFFFF;
    text-decoration: none;
}

.lp-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.lp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.lp-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #F1F5F9;
}

.lp-stat-label {
    font-size: 0.75rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lp-stat-divider {
    width: 1px;
    height: 2rem;
    background: #1E293B;
}

/* ─── Features ──────────────────────────────────────────────── */
.lp-features {
    background: #F8FAFC;
    padding: 6rem 1.5rem;
}

.lp-container {
    max-width: 1100px;
    margin: 0 auto;
}

.lp-section-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3B82F6;
    margin: 0 0 0.75rem;
    text-align: center;
}

.lp-eyebrow-light {
    color: #60A5FA;
}

.lp-section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #0F172A;
    text-align: center;
    letter-spacing: -0.02em;
    margin: 0 0 3.5rem;
    line-height: 1.2;
}

.lp-title-light {
    color: #F1F5F9;
}

.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.lp-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 1.75rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.lp-card:hover {
    box-shadow: 0 12px 40px rgba(15,23,42,0.1);
    transform: translateY(-3px);
}

.lp-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.lp-card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.5rem;
}

.lp-card-desc {
    font-size: 0.875rem;
    color: #64748B;
    line-height: 1.65;
    margin: 0;
}

/* ─── How it Works ──────────────────────────────────────────── */
.lp-howto {
    background: #0F172A;
    padding: 6rem 1.5rem;
}

.lp-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
    margin: 0 auto;
}

.lp-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.lp-step-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1E293B;
    line-height: 1;
    min-width: 3rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lp-step-body {
    padding-bottom: 2rem;
}

.lp-step-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #F1F5F9;
    margin: 0 0 0.5rem;
}

.lp-step-desc {
    font-size: 0.9rem;
    color: #94A3B8;
    line-height: 1.65;
    margin: 0;
}

.lp-step-connector {
    width: 2px;
    height: 2rem;
    background: linear-gradient(180deg, #3B82F6, transparent);
    margin-left: 1.25rem;
}

/* ─── CTA ───────────────────────────────────────────────────── */
.lp-cta {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    padding: 5rem 1.5rem;
    border-top: 1px solid #1E293B;
}

.lp-cta-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.lp-cta-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    color: #F1F5F9;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.lp-cta-sub {
    color: #94A3B8;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 2rem;
}

/* ─── Footer ────────────────────────────────────────────────── */
.lp-footer {
    background: #0A1120;
    border-top: 1px solid #1E293B;
    padding: 1.5rem;
}

.lp-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   PUBLIC SURFACES — shared AtlasCloud theme tokens
═══════════════════════════════════════════════════════════════ */
:root {
    --public-primary: #2563EB;
    --public-primary-dark: #1D4ED8;
    --public-secondary: #7C3AED;
    --public-hero: #0A0F1E;
    --public-hero-surface: #111827;
    --public-page: #F8FAFC;
    --public-surface: #FFFFFF;
    --public-ink: #0F172A;
    --public-muted: #64748B;
    --public-subtle: #94A3B8;
    --public-border: #E2E8F0;
    --public-input-border: #CBD5E1;
    --public-success: #059669;
    --public-warning: #B45309;
    --public-shadow: 0 20px 60px rgba(15, 23, 42, .12);
}

@media (prefers-color-scheme: dark) {
    :root {
        --public-page: #0A0F1E;
        --public-surface: #111827;
        --public-ink: #F1F5F9;
        --public-muted: #94A3B8;
        --public-subtle: #64748B;
        --public-border: #1F2937;
        --public-input-border: #374151;
        --public-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    }
}

/* Login */
.login-shell { min-height: 100vh; background: var(--public-page); color: var(--public-ink); }
.login-brand-panel { display: none; background: radial-gradient(circle at 80% 18%, rgba(37,99,235,.25), transparent 34%), radial-gradient(circle at 10% 88%, rgba(124,58,237,.2), transparent 30%), var(--public-hero); position: relative; overflow: hidden; }
.login-brand-panel::before { content: ''; position: absolute; inset: 9% -24% auto auto; width: 460px; height: 460px; border: 1px solid rgba(147,197,253,.17); border-radius: 50%; box-shadow: 0 0 0 46px rgba(59,130,246,.035), 0 0 0 92px rgba(59,130,246,.025); }
.login-brand-panel::after { content: ''; position: absolute; inset: auto auto -170px -170px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(16,185,129,.14), transparent 65%); border-radius: 50%; }
@media (min-width: 900px) { .login-brand-panel { display: flex; flex: 0 0 45%; flex-direction: column; justify-content: space-between; padding: 3rem clamp(2.5rem, 5vw, 6rem); } }
.login-brand, .login-mobile-brand { display: inline-flex; align-items: center; gap: .7rem; width: max-content; color: #F1F5F9; font-size: 1.05rem; font-weight: 750; letter-spacing: .01em; text-decoration: none; position: relative; z-index: 1; }
.login-brand:hover, .login-mobile-brand:hover { color: #FFFFFF; text-decoration: none; }
.login-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem; color: #FFFFFF; background: linear-gradient(135deg, var(--public-primary), var(--public-secondary)); box-shadow: 0 8px 20px rgba(37,99,235,.28); }
.login-brand-mark svg { width: 1.2rem; height: 1.2rem; }
.login-brand-content { max-width: 470px; position: relative; z-index: 1; }
.login-brand-kicker, .login-form-kicker { display: flex; align-items: center; gap: .55rem; color: #93C5FD; font-size: .7rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.login-brand-kicker { margin-bottom: 1.35rem; }
.login-brand-kicker span, .login-kicker-line { width: 1.5rem; height: 2px; background: var(--public-primary); border-radius: 2px; }
.brand-headline { max-width: 500px; margin: 0 0 1.25rem; color: #F8FAFC; font-size: clamp(2.5rem, 4.8vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }
.brand-sub { max-width: 400px; margin: 0 0 2.5rem; color: #94A3B8; font-size: 1rem; line-height: 1.7; }
.brand-features { display: grid; gap: 1rem; }
.brand-feature { display: flex; align-items: center; gap: .8rem; color: #CBD5E1; font-size: .86rem; }
.brand-feature > span:last-child { display: grid; gap: .15rem; }
.brand-feature strong { color: #F1F5F9; font-size: .88rem; }
.brand-feature small { color: #64748B; font-size: .76rem; }
.brand-feature-dot { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .65rem; font-size: .8rem; font-weight: 800; }
.brand-dot-green { color: #6EE7B7; background: rgba(16,185,129,.14); }.brand-dot-blue { color: #93C5FD; background: rgba(59,130,246,.14); }.brand-dot-purple { color: #C4B5FD; background: rgba(139,92,246,.14); }
.login-brand-footer { display: flex; justify-content: space-between; gap: 1rem; color: #475569; font-size: .7rem; position: relative; z-index: 1; }
.login-brand-status { color: #64748B; }.login-brand-status i { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.login-form-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: var(--public-page); }
.login-mobile-brand { display: inline-flex; align-self: flex-start; margin: 0 auto 4rem; color: var(--public-ink); }.login-mobile-brand .login-brand-mark { width: 2rem; height: 2rem; }.login-mobile-brand .login-brand-mark svg { width: 1rem; height: 1rem; }
@media (min-width: 900px) { .login-mobile-brand { display: none; } }
.login-form-inner { width: 100%; max-width: 410px; }.login-form-kicker { margin-bottom: 1.25rem; color: var(--public-primary); }.login-form-header { margin-bottom: 2.25rem; }.login-title { margin: 0 0 .55rem; color: var(--public-ink); font-size: clamp(1.85rem, 3vw, 2.35rem); font-weight: 800; letter-spacing: -.04em; }.login-sub { margin: 0; color: var(--public-muted); font-size: .92rem; line-height: 1.6; }.login-fields { margin-bottom: .7rem; }
.login-form-panel .mud-input-control { color: var(--public-ink); }.login-form-panel .mud-input-label, .login-form-panel .mud-input-slot, .login-form-panel .mud-input-adornment { color: var(--public-muted) !important; }.login-form-panel .mud-input-slot { color: var(--public-ink) !important; }.login-form-panel .mud-input-outlined-border { border-color: var(--public-border); }.login-form-panel .mud-input-control:hover .mud-input-outlined-border { border-color: var(--public-primary); }.login-form-panel .mud-button-root { box-shadow: 0 10px 22px rgba(37,99,235,.2); text-transform: none; }.login-form-panel .mud-button-filled-primary { background-color: var(--public-primary) !important; }.login-form-panel .mud-button-filled-primary:hover { background-color: var(--public-primary-dark) !important; }.login-back-link { margin-top: 1.5rem; text-align: center; }.login-back-link a { color: var(--public-muted); font-size: .84rem; text-decoration: none; }.login-back-link a:hover { color: var(--public-primary); }.login-form-footer { max-width: 410px; margin: 4rem auto 0; color: var(--public-subtle); font-size: .72rem; text-align: center; }
.login-form-panel .mud-input-control { color: var(--public-ink); }.login-form-panel .mud-input-root, .login-form-panel .mud-input-slot { color: var(--public-ink) !important; }.login-form-panel .mud-input-slot::placeholder { color: var(--public-muted) !important; opacity: 1; }.login-form-panel .mud-input-label { color: var(--public-muted) !important; }.login-form-panel .mud-input-adornment, .login-form-panel .mud-input-adornment .mud-icon-root { color: var(--public-primary) !important; }.login-form-panel .mud-input-outlined-border { border-color: var(--public-input-border) !important; }.login-form-panel .mud-input-control:hover .mud-input-outlined-border, .login-form-panel .mud-input-control.mud-input-focused .mud-input-outlined-border { border-color: var(--public-primary) !important; }.login-form-panel .mud-button-root { box-shadow: 0 10px 22px rgba(37,99,235,.2); text-transform: none; }.login-form-panel .mud-button-filled-primary { background-color: var(--public-primary) !important; }.login-form-panel .mud-button-filled-primary:hover { background-color: var(--public-primary-dark) !important; }.login-back-link { margin-top: 1.5rem; text-align: center; }.login-back-link a { color: var(--public-muted); font-size: .84rem; text-decoration: none; }.login-back-link a:hover { color: var(--public-primary); }.login-form-footer { max-width: 410px; margin: 4rem auto 0; color: var(--public-subtle); font-size: .72rem; text-align: center; }

/* Landing */
.lp-page { overflow: hidden; background: var(--public-page); color: var(--public-ink); font-family: 'Inter', system-ui, sans-serif; }
.lp-container { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.lp-hero { min-height: 820px; padding: 1.5rem 0 5rem; background: radial-gradient(circle at 76% 38%, rgba(37,99,235,.18), transparent 30%), radial-gradient(circle at 94% 0%, rgba(124,58,237,.17), transparent 27%), var(--public-hero); display: block; position: relative; overflow: hidden; }
.lp-hero::before { content: ''; position: absolute; width: 680px; height: 680px; top: 130px; right: -280px; border: 1px solid rgba(147,197,253,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(59,130,246,.025), 0 0 0 110px rgba(59,130,246,.02); }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(460px, 1.06fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); min-height: 720px; position: relative; z-index: 1; }
.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: absolute; inset: -6rem 0 auto; }.lp-brand { display: inline-flex; align-items: center; gap: .7rem; color: #F8FAFC; font-size: 1.05rem; font-weight: 750; text-decoration: none; }.lp-brand:hover { color: #FFFFFF; text-decoration: none; }.lp-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; color: #FFFFFF; background: linear-gradient(135deg, var(--public-primary), var(--public-secondary)); box-shadow: 0 8px 20px rgba(37,99,235,.28); }.lp-brand-mark svg { width: 1.1rem; height: 1.1rem; }.lp-nav-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }.lp-nav-links a { color: #94A3B8; font-size: .78rem; font-weight: 600; text-decoration: none; }.lp-nav-links a:hover { color: #F8FAFC; }.lp-nav-links .lp-nav-login { padding: .65rem .9rem; border: 1px solid rgba(147,197,253,.2); border-radius: .55rem; color: #E2E8F0; }.lp-nav-login span { color: #93C5FD; margin-left: .25rem; }
.lp-hero-copy { position: relative; }.lp-hero-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; color: #93C5FD; font-size: .7rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }.lp-kicker-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 5px rgba(16,185,129,.12); }.lp-title { margin: 0 0 1.4rem; color: #F8FAFC; font-size: clamp(2.8rem, 5.4vw, 5.35rem); font-weight: 800; line-height: 1.02; letter-spacing: -.065em; }.lp-title-accent { background: linear-gradient(110deg, #60A5FA 4%, #C4B5FD 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }.lp-subtitle { max-width: 500px; margin: 0 0 2rem; color: #94A3B8; font-size: 1rem; line-height: 1.75; }.lp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.6rem; }.lp-btn-primary { display: inline-flex; align-items: center; gap: .7rem; padding: .82rem 1.25rem; border: 0; border-radius: .65rem; color: #FFFFFF; background: var(--public-primary); box-shadow: 0 12px 24px rgba(37,99,235,.24); font-size: .86rem; font-weight: 700; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }.lp-btn-primary:hover { color: #FFFFFF; background: var(--public-primary-dark); box-shadow: 0 15px 28px rgba(37,99,235,.34); text-decoration: none; transform: translateY(-2px); }.lp-btn-quiet { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem .85rem; color: #CBD5E1; font-size: .8rem; font-weight: 650; text-decoration: none; }.lp-btn-quiet:hover { color: #FFFFFF; text-decoration: none; }.lp-proof-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.35rem; }.lp-proof { display: flex; align-items: center; gap: .55rem; color: #F1F5F9; font-size: .75rem; }.lp-proof > span:last-child { display: grid; gap: .12rem; }.lp-proof strong { font-size: .78rem; }.lp-proof small { color: #64748B; font-size: .63rem; }.lp-proof-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border: 1px solid rgba(147,197,253,.2); border-radius: .5rem; color: #93C5FD; background: rgba(59,130,246,.1); font-size: .8rem; font-weight: 800; }
.lp-hero-visual { min-width: 0; position: relative; padding: 3rem 0; }.lp-orbit { position: absolute; border: 1px solid rgba(96,165,250,.2); border-radius: 50%; pointer-events: none; }.lp-orbit-one { width: 530px; height: 530px; top: 0; left: 8%; }.lp-orbit-two { width: 410px; height: 410px; top: 60px; left: 20%; border-color: rgba(196,181,253,.12); }.lp-dashboard-card { position: relative; z-index: 1; width: min(100%, 560px); margin: auto; padding: 1rem; border: 1px solid rgba(148,163,184,.2); border-radius: 1.1rem; background: rgba(17,24,39,.9); box-shadow: 0 35px 80px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(18px); transform: rotate(1.5deg); }.lp-dashboard-topbar, .lp-dashboard-heading, .lp-chart-header, .lp-list-heading, .lp-list-row { display: flex; align-items: center; }.lp-dashboard-topbar { justify-content: space-between; padding: .25rem .35rem 1rem; border-bottom: 1px solid rgba(148,163,184,.12); }.lp-window-dots { display: flex; gap: .3rem; }.lp-window-dots span { width: 6px; height: 6px; border-radius: 50%; background: #334155; }.lp-window-dots span:first-child { background: #F59E0B; }.lp-window-dots span:nth-child(2) { background: #10B981; }.lp-dashboard-label, .lp-mini-label, .lp-chart-header span { color: #64748B; font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.lp-live-badge { padding: .3rem .45rem; border-radius: .35rem; color: #6EE7B7; background: rgba(16,185,129,.1); font-size: .58rem; font-weight: 700; }.lp-live-badge i { display: inline-block; width: 5px; height: 5px; margin-right: .22rem; border-radius: 50%; background: #10B981; }.lp-dashboard-heading { justify-content: space-between; padding: 1.3rem .45rem 1rem; }.lp-dashboard-heading h2 { margin: .35rem 0 0; color: #F8FAFC; font-size: 1.15rem; letter-spacing: -.03em; }.lp-dashboard-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .6rem; color: #BFDBFE; background: rgba(59,130,246,.16); font-size: .6rem; font-weight: 800; }.lp-dashboard-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }.lp-dashboard-metrics > div { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; padding: .7rem; border: 1px solid rgba(148,163,184,.12); border-radius: .65rem; background: rgba(15,23,42,.45); }.lp-metric-icon { display: inline-flex; grid-row: span 2; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: .45rem; font-size: .75rem; font-weight: 800; }.lp-metric-blue, .lp-icon-blue { color: #93C5FD; background: rgba(59,130,246,.15); }.lp-metric-green, .lp-icon-green { color: #6EE7B7; background: rgba(16,185,129,.15); }.lp-metric-purple, .lp-icon-purple { color: #C4B5FD; background: rgba(139,92,246,.15); }.lp-dashboard-metrics strong { color: #F8FAFC; font-size: .9rem; }.lp-dashboard-metrics small { grid-column: 2; color: #64748B; font-size: .58rem; }.lp-chart-panel { margin-top: .65rem; padding: .8rem; border: 1px solid rgba(148,163,184,.12); border-radius: .65rem; background: rgba(15,23,42,.45); }.lp-chart-header, .lp-list-heading { justify-content: space-between; }.lp-chart-header strong, .lp-list-heading strong { color: #CBD5E1; font-size: .68rem; }.lp-chart { display: flex; align-items: end; gap: .55rem; height: 82px; margin-top: .75rem; padding: 0 .2rem; border-bottom: 1px solid rgba(148,163,184,.12); background: repeating-linear-gradient(to top, transparent 0 26px, rgba(148,163,184,.07) 27px); }.lp-chart span { flex: 1; border-radius: .25rem .25rem 0 0; background: linear-gradient(to top, rgba(37,99,235,.6), rgba(96,165,250,.95)); }.lp-chart span.is-today { background: linear-gradient(to top, #7C3AED, #C4B5FD); }.lp-chart-days { display: flex; justify-content: space-around; padding-top: .35rem; color: #475569; font-size: .55rem; }.lp-dashboard-list { padding: .95rem .45rem .2rem; }.lp-list-heading a { color: #60A5FA; font-size: .6rem; text-decoration: none; }.lp-list-row { gap: .55rem; padding: .7rem 0; border-top: 1px solid rgba(148,163,184,.1); }.lp-status { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: .65rem; font-weight: 800; }.lp-status-success { color: #6EE7B7; background: rgba(16,185,129,.14); }.lp-list-row > span:nth-child(2) { display: grid; flex: 1; gap: .12rem; }.lp-list-row strong { color: #CBD5E1; font-size: .68rem; }.lp-list-row small { color: #64748B; font-size: .58rem; }.lp-list-row b { color: #6EE7B7; font-size: .58rem; font-weight: 700; }.lp-floating-note { position: absolute; z-index: 2; right: -1rem; bottom: 1rem; display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem; border: 1px solid rgba(110,231,183,.2); border-radius: .7rem; background: rgba(17,24,39,.94); box-shadow: 0 16px 30px rgba(0,0,0,.24); }.lp-floating-note > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #6EE7B7; background: rgba(16,185,129,.14); font-size: .7rem; font-weight: 800; }.lp-floating-note span:last-child { display: grid; gap: .15rem; }.lp-floating-note strong { color: #F1F5F9; font-size: .65rem; }.lp-floating-note small { color: #64748B; font-size: .57rem; }.lp-scroll-hint { position: absolute; bottom: 1.5rem; left: 50%; display: flex; align-items: center; gap: .45rem; color: #475569; font-size: .62rem; transform: translateX(-50%); }.lp-scroll-hint span { width: .35rem; height: .35rem; border-right: 1px solid #60A5FA; border-bottom: 1px solid #60A5FA; transform: rotate(45deg); }
.lp-trust-strip { border-bottom: 1px solid var(--public-border); background: var(--public-surface); }.lp-trust-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; min-height: 76px; color: var(--public-muted); font-size: .7rem; }.lp-trust-inner > span { color: var(--public-subtle); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }.lp-trust-inner strong { display: inline-flex; align-items: center; gap: .45rem; color: var(--public-muted); font-size: .75rem; }.lp-tech-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; }.lp-tech-postgres { background: #336791; }.lp-tech-sql { background: #CC2927; }.lp-tech-azure { background: #0078D4; }.lp-tech-cron { background: #7C3AED; }
.lp-section { padding: 7rem 0; }.lp-features { background: var(--public-page); }.lp-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }.lp-section-eyebrow { margin: 0 0 .8rem; color: var(--public-primary); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.lp-eyebrow-light { color: #93C5FD; }.lp-section-title { margin: 0; color: var(--public-ink); font-size: clamp(2rem, 4vw, 3.55rem); font-weight: 800; line-height: 1.04; letter-spacing: -.055em; }.lp-section-title em { color: var(--public-primary); font-style: normal; }.lp-title-light { color: #F8FAFC; }.lp-section-lead { max-width: 380px; margin: 0 0 .3rem; color: var(--public-muted); font-size: .93rem; line-height: 1.75; }.lp-lead-light { color: #94A3B8; }.lp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }.lp-card { min-height: 270px; padding: 1.5rem; border: 1px solid var(--public-border); border-radius: .9rem; background: var(--public-surface); position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; }.lp-card:hover { border-color: color-mix(in srgb, var(--public-primary) 40%, var(--public-border)); box-shadow: var(--public-shadow); transform: translateY(-4px); }.lp-card-featured { background: linear-gradient(145deg, color-mix(in srgb, var(--public-primary) 10%, var(--public-surface)), var(--public-surface)); }.lp-card-number { position: absolute; top: 1.5rem; right: 1.5rem; color: var(--public-subtle); font-size: .62rem; font-weight: 800; }.lp-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.45rem; height: 2.45rem; margin-bottom: 2.5rem; border-radius: .65rem; font-size: 1.05rem; font-weight: 800; }.lp-icon-cyan { color: #0EA5E9; background: rgba(14,165,233,.13); }.lp-icon-amber { color: #F59E0B; background: rgba(245,158,11,.13); }.lp-icon-teal { color: #14B8A6; background: rgba(20,184,166,.13); }.lp-card h3 { margin: 0 0 .55rem; color: var(--public-ink); font-size: 1.03rem; letter-spacing: -.02em; }.lp-card p { max-width: 290px; margin: 0; color: var(--public-muted); font-size: .8rem; line-height: 1.65; }.lp-card a { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.15rem; color: var(--public-primary); font-size: .7rem; font-weight: 750; text-decoration: none; }.lp-card a:hover { color: var(--public-primary-dark); }.lp-process { background: var(--public-hero); }.lp-process-intro { margin-bottom: 3rem; }.lp-steps { display: grid; gap: .7rem; }.lp-step { display: grid; grid-template-columns: 4.2rem 1fr auto; align-items: center; gap: 1.5rem; padding: 1.3rem 1.4rem; border: 1px solid rgba(148,163,184,.14); border-radius: .8rem; background: rgba(17,24,39,.72); transition: border-color .2s, background .2s; }.lp-step:hover { border-color: rgba(96,165,250,.4); background: rgba(30,41,59,.75); }.lp-step-number { color: #60A5FA; font-size: .88rem; font-weight: 800; }.lp-step-content { padding-left: 1.5rem; border-left: 1px solid rgba(148,163,184,.17); }.lp-step-tag { color: #64748B; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.lp-step h3 { margin: .35rem 0 .35rem; color: #F8FAFC; font-size: 1.05rem; }.lp-step p { max-width: 570px; margin: 0; color: #94A3B8; font-size: .8rem; line-height: 1.65; }.lp-step-arrow { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid rgba(147,197,253,.18); border-radius: 50%; color: #93C5FD; font-size: .8rem; }.lp-cta-section { padding: 6rem 0; background: var(--public-page); }.lp-cta-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); border-radius: 1.1rem; background: linear-gradient(125deg, #111827, #172554 58%, #312E81); overflow: hidden; position: relative; }.lp-cta-orb { position: absolute; width: 320px; height: 320px; right: 18%; top: -200px; border: 1px solid rgba(147,197,253,.25); border-radius: 50%; box-shadow: 0 0 0 35px rgba(96,165,250,.06), 0 0 0 70px rgba(96,165,250,.04); }.lp-cta-copy { position: relative; z-index: 1; }.lp-cta-copy .lp-section-eyebrow { color: #93C5FD; }.lp-cta-copy h2 { margin: 0 0 .8rem; color: #F8FAFC; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.05; letter-spacing: -.05em; }.lp-cta-copy > p:last-child { max-width: 450px; margin: 0; color: #94A3B8; font-size: .86rem; line-height: 1.7; }.lp-cta-card .lp-btn-primary { position: relative; z-index: 1; flex: 0 0 auto; }.lp-footer { padding: 1.6rem 0; border-top: 1px solid var(--public-border); background: var(--public-surface); }.lp-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--public-subtle); font-size: .68rem; }.lp-brand-footer { color: var(--public-ink); font-size: .86rem; }.lp-footer-inner > a:last-child { color: var(--public-muted); text-decoration: none; }.lp-footer-inner > a:last-child:hover { color: var(--public-primary); }

@media (max-width: 1020px) { .lp-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); gap: 2rem; }.lp-title { font-size: clamp(2.7rem, 5.2vw, 4rem); }.lp-dashboard-card { transform: none; }.lp-floating-note { right: -.5rem; } }
@media (max-width: 760px) { .lp-container { width: min(100% - 2rem, 600px); }.lp-hero { min-height: auto; padding-bottom: 4.5rem; }.lp-hero-grid { display: block; min-height: auto; padding-top: 5.5rem; }.lp-nav { inset: -4.5rem 0 auto; }.lp-nav-links a:not(.lp-nav-login) { display: none; }.lp-nav-links { gap: .45rem; }.lp-nav-links .lp-nav-login { padding: .55rem .7rem; font-size: .68rem; }.lp-title { font-size: clamp(2.65rem, 12vw, 4.1rem); }.lp-subtitle { font-size: .93rem; }.lp-proof-row { gap: .9rem; }.lp-proof { flex: 1 1 28%; }.lp-hero-visual { margin-top: 2rem; padding: 1.5rem 0 2.2rem; }.lp-orbit-one { width: 430px; height: 430px; top: 0; left: 0; }.lp-orbit-two { width: 340px; height: 340px; top: 45px; left: 12%; }.lp-floating-note { right: -.25rem; bottom: 0; }.lp-trust-inner { justify-content: flex-start; padding: 1.4rem 0; }.lp-trust-inner > span { flex-basis: 100%; }.lp-trust-inner strong { font-size: .68rem; }.lp-section { padding: 5rem 0; }.lp-section-intro { display: block; margin-bottom: 2.3rem; }.lp-section-lead { margin-top: 1.35rem; font-size: .85rem; }.lp-section-title { font-size: clamp(2rem, 10vw, 3rem); }.lp-features-grid { grid-template-columns: repeat(2, 1fr); }.lp-card { min-height: 250px; padding: 1.15rem; }.lp-card-number { top: 1.15rem; right: 1.15rem; }.lp-card-icon { margin-bottom: 1.5rem; }.lp-card h3 { font-size: .9rem; }.lp-card p { font-size: .75rem; }.lp-step { grid-template-columns: 2.5rem 1fr auto; gap: .8rem; padding: 1rem; }.lp-step-content { padding-left: .8rem; }.lp-step h3 { font-size: .9rem; }.lp-step p { font-size: .74rem; }.lp-cta-card { display: block; padding: 2rem 1.4rem; }.lp-cta-card .lp-btn-primary { margin-top: 1.5rem; }.lp-footer-inner { align-items: flex-start; flex-direction: column; }.login-mobile-brand { margin-bottom: 3rem; } }
@media (max-width: 460px) { .lp-dashboard-card { padding: .65rem; }.lp-dashboard-metrics { gap: .35rem; }.lp-dashboard-metrics > div { padding: .45rem; }.lp-dashboard-metrics small { font-size: .5rem; }.lp-chart { gap: .35rem; }.lp-floating-note { transform: scale(.9); transform-origin: right bottom; }.lp-proof small { font-size: .57rem; }.lp-proof strong { font-size: .7rem; }.lp-features-grid { grid-template-columns: 1fr; }.lp-card { min-height: auto; }.lp-card-icon { margin-bottom: 1.25rem; }.lp-step-arrow { width: 1.6rem; height: 1.6rem; }.login-form-panel { padding: 1.5rem 1.25rem; }.login-mobile-brand { margin-bottom: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .lp-card, .lp-step, .lp-btn-primary { transition: none; }.lp-dashboard-card { transform: none; } }

/* Login viewport correction: keep the two-column shell inside the browser frame. */
html:has(.login-shell), body:has(.login-shell) { height: 100%; margin: 0; overflow: hidden; }
.login-shell { height: 100dvh; min-height: 100dvh; overflow: hidden; }
.login-brand-panel { min-height: 0; height: 100%; box-sizing: border-box; padding: 2rem clamp(2rem, 3.5vw, 4rem); }
.login-brand-content { width: 100%; max-width: 540px; margin-block: auto; }
.brand-headline { max-width: 540px; margin-bottom: 1rem; font-size: clamp(2.25rem, 3.55vw, 3.8rem); line-height: 1.02; }
.brand-sub { margin-bottom: 1.75rem; }
.brand-features { gap: .7rem; }
.brand-feature-dot { width: 1.8rem; height: 1.8rem; }
.login-form-panel { min-height: 0; height: 100%; box-sizing: border-box; position: relative; overflow-y: auto; overflow-x: hidden; }
.login-form-footer { position: absolute; inset: auto 1.5rem 2rem; margin: 0; }
@media (max-height: 760px) and (min-width: 900px) { .login-brand-panel { padding-block: 1.35rem; }.login-brand-kicker { margin-bottom: .8rem; }.brand-headline { font-size: clamp(2rem, 3.2vw, 3.1rem); margin-bottom: .7rem; }.brand-sub { margin-bottom: 1.2rem; }.brand-features { gap: .5rem; }.brand-feature small { font-size: .7rem; }.login-form-footer { bottom: 1rem; } }
@media (max-width: 899px) { .login-form-footer { inset: auto 1.25rem 1.5rem; }.login-form-panel { padding-bottom: 4rem; } }