@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Nunito:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
    --bg: #f0f4ff;
    --bg-deep: #e8ecf5;
    --surface: #ffffff;
    --surface-soft: #f7f9ff;
    --surface-glass: rgba(255,255,255,0.82);
    --surface-overlay: rgba(255,255,255,0.93);
    --ink: #0a1128;
    --ink-light: #1e2d4a;
    --muted: #5a6a85;
    --muted-light: #8898ae;
    --line: rgba(10,17,40,0.09);
    --line-soft: rgba(10,17,40,0.055);
    --brand: #1a56db;
    --brand-light: #3b82f6;
    --brand-pale: rgba(26,86,219,0.09);
    --brand-deep: #1e40af;
    --brand-gradient: linear-gradient(135deg,#1a56db 0%,#3b82f6 60%,#1e40af 100%);
    --brand-gradient-btn: linear-gradient(135deg,#2563eb 0%,#1a56db 100%);
    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --accent-soft: rgba(245,158,11,0.10);
    --success: #22c55e;
    --success-soft: rgba(34,197,94,0.10);
    --danger: #ef4444;
    --danger-soft: rgba(239,68,68,0.09);
    --warning: #f59e0b;
    --info: #0ea5e9;
    --sidebar-bg-from: #060d1f;
    --sidebar-bg-to: #0f1b36;
    --sidebar-surface: rgba(255,255,255,0.05);
    --sidebar-surface-hover: rgba(255,255,255,0.12);
    --sidebar-ink: rgba(226,232,248,0.92);
    --sidebar-muted: rgba(148,163,200,0.75);
    --sidebar-line: rgba(255,255,255,0.07);
    --shadow-xs: 0 1px 2px rgba(10,17,40,0.06);
    --shadow-sm: 0 2px 8px rgba(10,17,40,0.09),0 1px 2px rgba(10,17,40,0.05);
    --shadow: 0 4px 14px rgba(10,17,40,0.11),0 2px 4px rgba(10,17,40,0.06);
    --shadow-md: 0 8px 24px rgba(10,17,40,0.13),0 2px 6px rgba(10,17,40,0.06);
    --shadow-lg: 0 16px 40px rgba(10,17,40,0.15),0 4px 10px rgba(10,17,40,0.08);
    --shadow-xl: 0 24px 64px rgba(10,17,40,0.19),0 8px 20px rgba(10,17,40,0.10);
    --shadow-brand: 0 8px 28px rgba(26,86,219,0.28);
    --shadow-sidebar: 6px 0 40px rgba(6,13,31,0.35);
    --r-xs: 6px;
    --r-sm: 10px;
    --r: 14px;
    --r-md: 18px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-full: 9999px;
    --sp-xs: 6px;
    --sp-sm: 10px;
    --sp: 16px;
    --sp-md: 20px;
    --sp-lg: 28px;
    --sp-xl: 40px;
    --sp-2xl: 56px;
    --t-fast: 0.14s cubic-bezier(0.4,0,0.2,1);
    --t: 0.22s cubic-bezier(0.4,0,0.2,1);
    --t-slow: 0.38s cubic-bezier(0.4,0,0.2,1);
    --t-spring: 0.40s cubic-bezier(0.34,1.56,0.64,1);
    --sidebar-w: 272px;
}

body.portal-mode {
    --brand: #1a56db;
    --brand-light: #3b82f6;
    --brand-deep: #1e40af;
    --brand-pale: rgba(26,86,219,0.09);
    --brand-gradient: linear-gradient(135deg,#1a56db 0%,#3b82f6 60%,#1e40af 100%);
    --brand-gradient-btn: linear-gradient(135deg,#2563eb 0%,#1a56db 100%);
    --shadow-brand: 0 8px 28px rgba(26,86,219,0.28);
    --bg: #f0f4ff;
    --sidebar-bg-from: #050c22;
    --sidebar-bg-to: #0d1b3e;
}

body.reseller-mode {
    --bg: #f4f6fb;
    --sidebar-bg-from: #060a12;
    --sidebar-bg-to: #0d1420;
}

body {
    font-family: 'Nunito','Helvetica Neue',Arial,sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before,body::after {
    content: '';
    position: fixed;
    inset: auto;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.30;
    pointer-events: none;
    animation: ambient-float 24s ease-in-out infinite;
}
body::before {
    width: 36rem; height: 36rem;
    top: -12rem; right: -8rem;
    background: radial-gradient(circle, rgba(26,86,219,0.22), transparent 68%);
    animation-delay: 0s;
}
body::after {
    width: 28rem; height: 28rem;
    bottom: -10rem; left: -6rem;
    background: radial-gradient(circle, rgba(245,158,11,0.16), transparent 68%);
    animation-delay: -12s;
}
@keyframes ambient-float {
    0%,100% { transform: translate(0,0) scale(1); }
    30% { transform: translate(24px,-22px) scale(1.06); }
    60% { transform: translate(-16px,18px) scale(0.94); }
    80% { transform: translate(12px,8px) scale(1.03); }
}

a { color: inherit; text-decoration: none; transition: color var(--t); }
button,input,select,textarea { font: inherit; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--brand-light);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ── Page Layout ── */
.page-grid {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0,1fr);
    min-height: 100vh;
    max-width: 1720px;
    margin: 0 auto;
}

/* ── Sidebar ── */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(185deg,var(--sidebar-bg-from) 0%,var(--sidebar-bg-to) 100%);
    color: var(--sidebar-ink);
    box-shadow: var(--shadow-sidebar);
    z-index: 30;
    transition: transform var(--t-slow);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: var(--r-full); }

.sidebar-shell {
    display: flex;
    flex-direction: column;
    padding: var(--sp-lg) var(--sp-md);
    min-height: 100vh;
    gap: 4px;
}

.sidebar .brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: var(--r-full);
    padding: 5px 12px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.80);
    margin-bottom: 12px;
}

.brand-title {
    font-family: 'Sora','Helvetica Neue',sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 6px;
}
.brand-copy {
    font-size: 0.80rem;
    color: var(--sidebar-muted);
    line-height: 1.55;
    margin-bottom: var(--sp-md);
}

.sidebar-user-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--sidebar-line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin: 4px 0 var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    overflow: hidden;
}
.sidebar-user-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--brand-gradient);
}

.user-avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    background: var(--brand-gradient);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Sora',sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
    margin-bottom: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(26,86,219,0.35);
}

.sidebar-user-eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    margin-bottom: 2px;
}
.sidebar-user-card strong {
    display: block;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-card span { font-size: 0.78rem; color: var(--sidebar-muted); }

.nav-section-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
    padding: 4px 4px 6px;
    margin-top: var(--sp-sm);
}

.nav-stack { display: flex; flex-direction: column; gap: 3px; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    color: var(--sidebar-muted);
    font-size: 0.87rem;
    font-weight: 600;
    transition: all var(--t);
    position: relative;
    cursor: pointer;
    text-decoration: none;
}
.nav-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.06);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all var(--t);
}
.nav-label { flex: 1; }
.nav-link::after {
    content: '›';
    font-size: 1.1rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: all var(--t);
}
.nav-link:hover {
    background: var(--sidebar-surface-hover);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
    transform: translateX(3px);
}
.nav-link:hover::after { opacity: 0.6; transform: translateX(0); }
.nav-link:hover .nav-icon { background: rgba(255,255,255,0.12); }
.nav-link.is-active {
    background: linear-gradient(135deg,rgba(255,255,255,0.14),rgba(255,255,255,0.06));
    border-color: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.nav-link.is-active::after { opacity: 1; transform: translateX(0); }
.nav-link.is-active .nav-icon {
    background: var(--brand-gradient);
    box-shadow: 0 4px 10px rgba(26,86,219,0.4);
    color: #fff;
}

.sidebar-foot { margin-top: auto; padding-top: var(--sp-lg); }
.sidebar-foot-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--sidebar-line);
    border-radius: var(--r-md);
    padding: 14px;
}
.footer-note { font-size: 0.78rem; color: var(--sidebar-muted); line-height: 1.55; margin: 0; }

/* ── Main panel ── */
.main-panel {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-stack {
    flex: 1;
    padding: var(--sp-lg) var(--sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

/* ── Auth shell ── */
.auth-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--sp-xl) clamp(var(--sp),4vw,var(--sp-xl));
    width: 100%;
}

/* ── Topbar ── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px var(--sp-xl);
    background: var(--surface-overlay);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(10,17,40,0.06);
}
.auth-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 var(--sp-xl);
}
.topbar-context { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.topbar-title {
    font-family: 'Sora',sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.1;
}
.topbar-copy { font-size: 0.82rem; color: var(--muted); margin-top: 2px; line-height: 1.5; max-width: 60ch; }
.topbar-service-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.topbar-service-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: var(--r-full);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: all var(--t);
}
.topbar-service-link:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-brand);
    transform: translateY(-1px);
}
.shell-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.action-row--spread { justify-content: space-between; }

/* ── Chips & Brand mark ── */
.chip,.badge {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: var(--r-full); padding: 5px 12px;
    font-size: 0.69rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-light);
    transition: all var(--t);
}
.chip-soft {
    background: var(--brand-pale);
    border-color: rgba(26,86,219,0.20);
    color: var(--brand-deep);
}
.brand-mark {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: var(--r-full); padding: 5px 13px;
    font-size: 0.67rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase;
    background: var(--brand-pale); color: var(--brand-deep);
    border: 1px solid rgba(26,86,219,0.20);
}
.pill-row,.hero-actions,.chip-scroll { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Typography ── */
.hero-title,.section-title,.card-title,.sub-panel-title,.brand-title,.topbar-title {
    font-family: 'Sora','Helvetica Neue',sans-serif;
    letter-spacing: -0.025em;
}
.hero-title { font-size: clamp(1.75rem,3.5vw,2.8rem); font-weight: 800; line-height: 1.05; color: var(--ink); }
.section-title { font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.card-title,.sub-panel-title { font-size: 1.10rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.section-copy,.mini-copy,.topbar-copy,.brand-copy,.footer-note,.table-empty { color: var(--muted); line-height: 1.65; }
.section-copy { font-size: 0.92rem; max-width: 60ch; }
.mini-copy { font-size: 0.79rem; }
.service-eyebrow { font-size: 0.67rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }

/* ── Buttons ── */
.btn,.btn-secondary,.btn-ghost,.btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 24px; border-radius: var(--r-md);
    font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;
    border: 1.5px solid transparent; cursor: pointer;
    transition: all var(--t-spring); position: relative; overflow: hidden;
    text-decoration: none; white-space: nowrap;
}
.btn {
    background: var(--brand-gradient-btn); color: #fff;
    border-color: var(--brand); box-shadow: 0 4px 14px rgba(26,86,219,0.30);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,86,219,0.38); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-gradient-btn); color: #fff; border-color: var(--brand); box-shadow: 0 4px 14px rgba(26,86,219,0.30); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-glow { background: var(--brand-gradient-btn); color: #fff; border-color: var(--brand); box-shadow: 0 0 0 0 rgba(26,86,219,0.4); animation: glow-pulse 2s infinite; }
@keyframes glow-pulse { 0%,100% { box-shadow: 0 4px 14px rgba(26,86,219,0.30); } 50% { box-shadow: 0 4px 24px rgba(26,86,219,0.52); } }
.btn-secondary {
    background: var(--surface); color: var(--brand);
    border-color: rgba(26,86,219,0.28); box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--brand-pale); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--ink-light); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); border-color: rgba(26,86,219,0.25); color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(239,68,68,0.25); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: translateY(-1px); }
.inline-form { display: inline; }

/* ── Cards ── */
.hero-card,.panel,.stat-card,.auth-card,.service-family-card,.feature-panel,.quick-link-card,.metric-card,.sub-panel,.hero-side-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--t),transform var(--t),border-color var(--t);
}
.hero-card {
    padding: var(--sp-xl);
    background: linear-gradient(135deg,var(--surface) 0%,var(--surface-soft) 100%);
    border-color: rgba(26,86,219,0.14);
}
.hero-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--brand-gradient); border-radius: var(--r-full) var(--r-full) 0 0;
}
.panel { padding: var(--sp-lg); }
.panel:hover { box-shadow: var(--shadow-md); border-color: rgba(26,86,219,0.16); }
.panel-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding-bottom: var(--sp-md); margin-bottom: var(--sp-md); border-bottom: 1px solid var(--line-soft);
}
.panel-header--compact { padding-bottom: 10px; margin-bottom: 10px; }

.stat-card { padding: var(--sp-lg); cursor: default; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(26,86,219,0.18); }
.stat-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--brand-gradient); transform: scaleX(0);
    transition: transform var(--t); transform-origin: left;
    border-radius: 0 0 var(--r-full) var(--r-full);
}
.stat-card:hover::after { transform: scaleX(1); }

.stat-label,.metric-label {
    font-size: 0.70rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.stat-value,.metric-value {
    font-family: 'JetBrains Mono','Courier New',monospace;
    font-size: 2.0rem; font-weight: 700; color: var(--ink); letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px;
}
.stat-card-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); background: var(--surface-soft); color: var(--muted); }
.stat-card-trend.up { background: var(--success-soft); color: #166534; }
.stat-card-trend.down { background: var(--danger-soft); color: #991b1b; }

.hero-side-panel { padding: var(--sp-lg); display: flex; flex-direction: column; gap: 0; background: linear-gradient(145deg,var(--surface-soft),var(--surface)); }
.hero-side-panel--highlight { background: linear-gradient(145deg,var(--brand-pale),rgba(255,255,255,0.95)); border-color: rgba(26,86,219,0.18); }
.hero-side-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.85rem; }
.hero-side-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-side-row span { color: var(--muted); font-size: 0.79rem; }
.hero-side-row strong { font-family: 'JetBrains Mono',monospace; font-size: 0.93rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

.auth-card { padding: var(--sp-xl); background: var(--surface); }
.auth-card--stack { display: flex; flex-direction: column; gap: var(--sp-md); }
.auth-side {
    padding: var(--sp-xl);
    background: linear-gradient(145deg,var(--sidebar-bg-from) 0%,var(--sidebar-bg-to) 100%);
    color: rgba(255,255,255,0.88);
    border-color: rgba(255,255,255,0.06);
}
.auth-side h3.card-title { color: #fff; }
.auth-side p { color: rgba(226,232,248,0.80); }
.auth-side .service-eyebrow { color: var(--brand-light); }
.auth-side .list-clean li { color: rgba(226,232,248,0.80); }
.auth-side .list-clean li::before { color: var(--brand-light); }
.auth-side--grid { display: flex; flex-direction: column; gap: var(--sp-md); justify-content: center; }
.auth-grid--spotlight .auth-card { border-color: rgba(26,86,219,0.18); box-shadow: var(--shadow-md); }

/* ── Grids ── */
.hero-grid,.dashboard-hero-grid,.service-hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,0.85fr); gap: var(--sp-lg); align-items: start; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: var(--sp-md); }
.content-grid,.two-column { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: var(--sp-md); }
.auth-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,0.9fr); gap: var(--sp-md); align-items: stretch; }
.form-grid { display: flex; flex-direction: column; gap: var(--sp-md); }
.form-grid.two-up,.service-dual-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: var(--sp-md); }
.service-triple-grid,.feature-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: var(--sp-md); }
.service-family-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: var(--sp-md); }
.service-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-md); }

/* ── Forms ── */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.79rem; font-weight: 700; letter-spacing: 0.03em; color: var(--ink-light); }
.field input,.field select,.field textarea,
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); font-size: 0.92rem; font-family: inherit;
    transition: all var(--t); outline: none; appearance: none;
}
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-pale); background: var(--surface);
}
.field input::placeholder { color: var(--muted-light); }
.field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235a6a85' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 100px; }
.muted-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ── Launch cards ── */
.dashboard-launch-grid,.landing-service-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--sp-md); }
.launch-card,.utility-stat {
    display: flex; flex-direction: column; gap: 10px; padding: var(--sp-lg);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm); transition: all var(--t-spring);
    position: relative; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit;
}
.launch-card:hover,.utility-stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(26,86,219,0.28); }
.launch-card h3,.utility-stat h3 { font-family: 'Sora',sans-serif; font-size: 0.96rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; line-height: 1.3; margin: 0; }
.launch-card p,.utility-stat p { font-size: 0.80rem; color: var(--muted); line-height: 1.55; margin: 0; flex: 1; }
.launch-card--compact { padding: var(--sp-md); }
.launch-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-gradient); color: #fff; font-family: 'Sora',sans-serif; font-weight: 800; font-size: 0.71rem; letter-spacing: 0.04em; box-shadow: 0 4px 12px rgba(26,86,219,0.28); flex-shrink: 0; }
.launch-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-full); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: var(--brand-pale); color: var(--brand-deep); border: 1px solid rgba(26,86,219,0.18); align-self: flex-start; }
.launch-arrow { font-size: 0.78rem; font-weight: 700; color: var(--brand); margin-top: auto; display: flex; align-items: center; gap: 5px; transition: gap var(--t); }
.launch-card:hover .launch-arrow,.utility-stat:hover .launch-arrow { gap: 10px; }
.launch-arrow::after { content: '→'; }
.utility-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--sp-md); }

/* ── Quick link cards ── */
.quick-link-card { padding: var(--sp-lg); cursor: pointer; }
.quick-link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(26,86,219,0.22); }
.quick-link-kicker { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }

/* ── Flash / Notes ── */
.note-box,.flash { padding: 14px 18px; border-radius: var(--r-md); font-size: 0.87rem; font-weight: 600; border-left: 4px solid; line-height: 1.55; }
.note-box { background: var(--brand-pale); border-color: var(--brand); color: var(--brand-deep); }
.flash-success { background: var(--success-soft); border-color: var(--success); color: #166534; }
.flash-error { background: var(--danger-soft); border-color: var(--danger); color: #991b1b; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.table-wrap::-webkit-scrollbar { height: 5px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-full); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.table-wrap table th { padding: 11px 16px; text-align: left; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-soft); }
.table-wrap table td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-light); }
.table-wrap table td strong { font-weight: 700; color: var(--ink); }
.table-wrap table tr:last-child td { border-bottom: 0; }
.table-wrap table tr:hover td { background: var(--surface-soft); }
.table-wrap form.form-grid { gap: 6px; }
.table-empty { text-align: center; padding: var(--sp-2xl) var(--sp-xl); color: var(--muted); font-size: 0.87rem; }

/* ── Service / task / notification cards ── */
.service-card,.task-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-md); transition: all var(--t); }
.service-card:hover,.task-card:hover { box-shadow: var(--shadow-md); border-color: rgba(26,86,219,0.16); }
.service-card strong,.task-card strong { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.service-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.service-card-status,.status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.status-success,.status-completed,.status-approved { background: var(--success-soft); color: #166534; }
.status-pending,.status-processing { background: var(--accent-soft); color: #92400e; }
.status-failed,.status-error,.status-rejected { background: var(--danger-soft); color: #991b1b; }
.service-copy { font-size: 0.84rem; color: var(--muted); }
.service-card-footer,.task-card-footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ── Stack & List ── */
.stack { display: flex; flex-direction: column; gap: 10px; }
.list-clean { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.list-clean li { position: relative; padding-left: 18px; font-size: 0.87rem; color: var(--muted); line-height: 1.55; }
.list-clean li::before { content: '✦'; position: absolute; left: 0; color: var(--brand); font-size: 0.58rem; top: 4px; }

/* ── Feature panel ── */
.feature-panel { padding: var(--sp-lg); background: linear-gradient(135deg,var(--surface) 0%,var(--surface-soft) 100%); border-color: rgba(26,86,219,0.10); }
.feature-panel strong { font-weight: 700; color: var(--ink); }

/* ── Service family cards ── */
.service-family-card { padding: var(--sp-lg); cursor: pointer; }
.service-family-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(26,86,219,0.22); }

/* ── Metric cards ── */
.metric-card { padding: var(--sp-lg); }
.sub-panel { padding: var(--sp-md); }
.sub-panel-title { font-size: 1.0rem; font-weight: 700; color: var(--ink); margin-bottom: 10px; }

/* ── Profile avatar ── */
.profile-avatar { width: 80px; height: 80px; border-radius: var(--r-full); background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; font-family: 'Sora',sans-serif; font-weight: 800; font-size: 1.8rem; color: #fff; box-shadow: 0 8px 24px rgba(26,86,219,0.30); margin-bottom: var(--sp-md); }

/* ── Reveal animations ── */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow),transform var(--t-slow); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ── Mobile bottom bar ── */
.mobile-bottom-bar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--surface-overlay); backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid var(--line); padding: 8px var(--sp-md) calc(8px + env(safe-area-inset-bottom));
}
.mobile-bottom-bar { display: none; justify-content: space-around; align-items: center; }
.mob-nav-link { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; padding: 8px 4px; border-radius: var(--r); color: var(--muted); font-size: 0.60rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; transition: all var(--t); text-decoration: none; }
.mob-icon { font-size: 1.2rem; display: block; line-height: 1; }
.mob-nav-link.is-active,.mob-nav-link:hover { color: var(--brand); background: var(--brand-pale); }

/* Sidebar overlay */
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 29; background: rgba(6,13,31,0.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-slow); }
.sidebar-overlay.is-visible { opacity: 1; }

/* ── Responsive ── */
@media (max-width:1160px) {
    :root { --sidebar-w: 250px; }
    .page-stack { padding: var(--sp-lg); }
    .topbar { padding: 14px var(--sp-lg); }
    .hero-grid,.dashboard-hero-grid,.service-hero-grid { grid-template-columns: 1fr; }
    .hero-side-panel { max-width: 500px; }
    .service-metric-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:860px) {
    .page-grid { grid-template-columns: 1fr; }
    .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: var(--sidebar-w); transform: translateX(-100%); transition: transform var(--t-slow); z-index: 40; box-shadow: none; }
    .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
    .sidebar-overlay { display: block; }
    .topbar { padding: 12px var(--sp-md); border-radius: 0; }
    .page-stack { padding: var(--sp-md); padding-bottom: 88px; }
    .auth-grid { grid-template-columns: 1fr; }
    .auth-side { order: -1; padding: var(--sp-lg); }
    .mobile-bottom-bar { display: flex; }
    .stats-grid { grid-template-columns: repeat(2,1fr); }
    .dashboard-launch-grid,.landing-service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:540px) {
    :root { --r-lg: 18px; --r-xl: 22px; }
    .hero-card,.panel,.auth-card { padding: var(--sp-md); }
    .hero-title { font-size: 1.65rem; }
    .stat-value,.metric-value { font-size: 1.7rem; }
    .stats-grid,.dashboard-launch-grid,.landing-service-grid,.service-metric-grid,.service-triple-grid,.feature-grid { grid-template-columns: 1fr; }
    .form-grid.two-up { grid-template-columns: 1fr; }
    .topbar-service-strip { display: none; }
    .pill-row { gap: 6px; }
    .chip,.badge { padding: 4px 10px; font-size: 0.65rem; }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media print { .sidebar,.mobile-bottom-bar,.sidebar-overlay { display:none!important; } .page-grid { grid-template-columns: 1fr; } .page-stack { padding: 0; } body { background: #fff; } }

/* ── Premium landing refresh ───────────────────────────────────────────── */
.premium-landing {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(26, 86, 219, 0.14);
    background:
        linear-gradient(130deg, rgba(26, 86, 219, 0.12) 0%, rgba(255, 255, 255, 0) 36%),
        linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
}

.premium-landing::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.46) 52%, rgba(255, 255, 255, 0.02) 100%);
    transform: translateX(-110%);
    animation: premiumSweep 7s linear infinite;
}

.premium-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: clamp(18px, 3.5vw, 34px);
    align-items: stretch;
}

.premium-copy {
    display: grid;
    gap: 16px;
}

.premium-kicker {
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(26, 86, 219, 0.24);
    background: rgba(26, 86, 219, 0.08);
    color: var(--brand-deep);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 12px;
}

.premium-headline {
    margin: 0;
    font-family: "Sora", "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: clamp(1.95rem, 4.8vw, 3.45rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    max-width: 14ch;
}

.premium-subcopy {
    margin: 0;
    max-width: 60ch;
    color: var(--muted);
    font-size: 0.97rem;
    line-height: 1.72;
}

.premium-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.premium-actions--center {
    justify-content: center;
}

.premium-store-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.store-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    border: 1px solid rgba(10, 17, 40, 0.16);
    background: rgba(255, 255, 255, 0.9);
    padding: 9px 12px;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition:
        transform var(--t, var(--transition, 0.24s ease)),
        box-shadow var(--t, var(--transition, 0.24s ease)),
        border-color var(--t, var(--transition, 0.24s ease));
}

.store-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(26, 86, 219, 0.34);
}

.store-download-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
    background: var(--brand-gradient-btn);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.store-download-copy {
    display: grid;
    gap: 1px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
}

.store-download-copy small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.premium-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.premium-trust-item {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(10, 17, 40, 0.12);
    background: rgba(255, 255, 255, 0.86);
    color: var(--ink-light);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 11px;
}

.premium-visual {
    display: grid;
    gap: 14px;
}

.premium-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.premium-stat-card {
    border-radius: 16px;
    border: 1px solid rgba(26, 86, 219, 0.14);
    background: rgba(255, 255, 255, 0.92);
    padding: 12px 13px;
    box-shadow: var(--shadow-sm);
}

.premium-stat-label {
    display: block;
    color: var(--muted);
    font-size: 0.69rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.premium-stat-value {
    margin-top: 7px;
    display: block;
    color: var(--ink);
    font-family: "Sora", "Space Grotesk", sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 700;
}

.premium-live-card {
    border-radius: 16px;
    border: 1px solid rgba(10, 17, 40, 0.12);
    background: rgba(255, 255, 255, 0.92);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.premium-live-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.premium-live-list {
    margin: 0;
    padding: 0 0 0 18px;
    display: grid;
    gap: 8px;
    color: var(--ink-light);
    font-size: 0.84rem;
}

.premium-progress {
    width: 100%;
    height: 7px;
    border-radius: 999px;
    background: rgba(26, 86, 219, 0.12);
    overflow: hidden;
}

.premium-progress-bar {
    height: 100%;
    width: 55%;
    border-radius: 999px;
    background: var(--brand-gradient);
    animation: premiumProgress 2.8s ease-in-out infinite alternate;
}

.premium-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.premium-service-card {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(10, 17, 40, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 255, 0.98) 100%);
    padding: 18px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    transition:
        transform var(--t, var(--transition, 0.24s ease)),
        box-shadow var(--t, var(--transition, 0.24s ease)),
        border-color var(--t, var(--transition, 0.24s ease));
}

.premium-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, var(--shadow));
    border-color: rgba(26, 86, 219, 0.24);
}

.premium-service-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-grid;
    place-items: center;
    background: var(--brand-gradient-btn);
    color: #fff;
    font-size: 0.8rem;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.premium-service-tag {
    width: fit-content;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-deep);
}

.premium-service-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.premium-service-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.58;
}

.premium-service-link {
    margin-top: auto;
    width: fit-content;
    color: var(--brand-deep);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.premium-flow-grid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.premium-flow-card {
    border-radius: 16px;
    border: 1px solid rgba(10, 17, 40, 0.1);
    background: rgba(255, 255, 255, 0.9);
    padding: 16px;
    display: grid;
    gap: 8px;
}

.premium-flow-index {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(26, 86, 219, 0.1);
    color: var(--brand-deep);
    font-weight: 800;
    font-size: 0.78rem;
}

.premium-flow-title {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
}

.premium-flow-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.58;
}

.premium-split {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.premium-story,
.premium-story-card {
    display: grid;
    gap: 12px;
}

.premium-story-title {
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    line-height: 1.2;
}

.premium-story-copy {
    margin: 0;
    color: var(--muted);
    line-height: 1.66;
}

.premium-cta-band {
    margin-top: 18px;
    display: grid;
    gap: 12px;
    text-align: center;
    border-radius: 24px;
    border: 1px solid rgba(26, 86, 219, 0.2);
    background:
        linear-gradient(130deg, rgba(26, 86, 219, 0.1) 0%, rgba(255, 255, 255, 0) 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
}

@keyframes premiumSweep {
    0% { transform: translateX(-110%); }
    58%, 100% { transform: translateX(110%); }
}

@keyframes premiumProgress {
    from { width: 38%; }
    to { width: 92%; }
}

@media (max-width: 920px) {
    .premium-hero {
        grid-template-columns: 1fr;
    }

    .premium-headline {
        max-width: 19ch;
    }
}

@media (max-width: 640px) {
    .premium-landing,
    .premium-cta-band {
        border-radius: 18px;
    }

    .premium-service-grid,
    .premium-flow-grid {
        grid-template-columns: 1fr;
    }

    .premium-actions {
        gap: 8px;
    }

    .premium-trust-item {
        font-size: 0.7rem;
    }

    .premium-stat-grid {
        grid-template-columns: 1fr;
    }
}