:root {
    --bg: #07111f;
    --surface: rgba(12, 23, 39, 0.78);
    --line: rgba(255, 255, 255, 0.1);
    --text: #f4f6fb;
    --muted: #a7b4ca;
    --accent: #8bd6c7;
    --accent-strong: #d6bb7b;
    --success: #93e6b1;
    --shadow: 0 24px 90px rgba(0, 0, 0, 0.28);
    --radius-xl: 32px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --container: 1240px;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(139, 214, 199, 0.2), transparent 26%),
        radial-gradient(circle at 85% 10%, rgba(214, 187, 123, 0.18), transparent 24%),
        linear-gradient(180deg, #08111d 0%, #07111f 55%, #0a1421 100%);
    color: var(--text);
    font-family: "Manrope", sans-serif;
}
a { color: inherit; text-decoration: none; }
textarea, input, button { font: inherit; }
.container { width: min(calc(100% - 32px), var(--container)); margin: 0 auto; }
.site-header {
    position: sticky; top: 0; z-index: 10; backdrop-filter: blur(22px);
    background: rgba(7, 17, 31, 0.66); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner, .footer-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0;
}
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand-mark {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 214, 199, 0.2), rgba(214, 187, 123, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 800; letter-spacing: 0.08em;
}
.brand strong, .brand small { display: block; }
.brand small, .nav-links a, .lead, .feature-card p, .metric-card span, .form-note, .section-kicker, .comparison-column span, .meta-list span, .site-footer p, .notice { color: var(--muted); }
.nav-links { display: flex; gap: 22px; }
.inline-form { margin: 0; }
.nav-button {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}
.hero-shell, .result-shell { position: relative; padding: 72px 0 48px; }
.auth-shell { padding: 72px 0; }
.processing-shell { padding: 72px 0; }
.hero-grid, .result-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 24px; }
.auth-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; }
.processing-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; }
.glass-panel, .feature-card, .metric-tile, .comparison-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl);
    box-shadow: var(--shadow); backdrop-filter: blur(24px);
}
.hero-copy, .upload-card, .section-card, .auth-copy, .auth-card { padding: 34px; }
.eyebrow, .dropzone-label, .card-topline, .section-kicker {
    display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-size: .78rem; color: var(--accent);
}
.hero-copy h1, .result-hero h1 {
    margin: 18px 0 16px; font-family: "Fraunces", serif; font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: .98; letter-spacing: -.04em;
}
.lead { font-size: 1.05rem; line-height: 1.8; max-width: 62ch; }
.hero-metrics, .feature-grid, .metric-strip, .dropzones, .analysis-boxes { display: grid; gap: 16px; }
.hero-metrics { margin-top: 32px; grid-template-columns: repeat(3, 1fr); }
.metric-card, .feature-card, .metric-tile { padding: 20px; }
.metric-card strong, .feature-card h3, .metric-tile strong, .comparison-header h3, .section-head h2, .upload-card h2 { display: block; margin-bottom: 8px; }
.upload-card h2 { margin-top: 18px; margin-bottom: 10px; font-size: 2rem; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 8px rgba(147, 230, 177, 0.14); }
.upload-form { margin-top: 26px; }
.dropzones { grid-template-columns: repeat(2, 1fr); }
.dropzone {
    position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 250px; padding: 22px;
    border-radius: var(--radius-lg); border: 1px dashed rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.02));
    cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dropzone:hover, .dropzone.is-dragover { transform: translateY(-2px); border-color: rgba(139, 214, 199, 0.6); background: linear-gradient(180deg, rgba(139, 214, 199, 0.08), rgba(214, 187, 123, 0.05)); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pill, .badge, .filter-chip {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08);
}
.file-pill { margin-top: auto; padding: 10px 14px; background: rgba(255, 255, 255, 0.06); color: var(--text); word-break: break-word; }
.input-group { display: block; margin-top: 18px; }
.input-group span { display: block; margin-bottom: 10px; color: var(--muted); }
.input-group textarea, .editor-box {
    width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 16px 18px;
    background: rgba(2, 8, 16, 0.44); color: var(--text); resize: vertical;
}
.text-input {
    width: 100%;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    background: rgba(2, 8, 16, 0.44);
    color: var(--text);
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 24px;
    color: var(--muted);
}
.text-link { color: var(--accent); }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #8bd6c7, #d6bb7b); color: #06111d; font-weight: 800; }
.btn-secondary, .btn-ghost { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: rgba(255, 255, 255, 0.1); }
.btn-block { width: 100%; margin-top: 18px; }
.btn-small { padding: 10px 14px; }
.feature-band { padding: 0 0 72px; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature-card span { display: inline-block; margin-bottom: 18px; color: var(--accent-strong); }
.notice { margin-bottom: 18px; padding: 16px 18px; border-radius: 18px; }
.notice-error { background: rgba(255, 139, 139, 0.12); border: 1px solid rgba(255, 139, 139, 0.25); }
.notice-success { background: rgba(147, 230, 177, 0.12); border: 1px solid rgba(147, 230, 177, 0.25); }
.result-hero { display: flex; justify-content: space-between; gap: 24px; padding: 28px 34px; margin-bottom: 24px; }
.hero-actions, .badge-row, .filters { display: flex; flex-wrap: wrap; gap: 10px; }
.processing-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.status-label {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(139, 214, 199, 0.1);
    border: 1px solid rgba(139, 214, 199, 0.22);
    color: var(--accent);
    margin-bottom: 10px;
}
.pulse-orb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(139, 214, 199, 0.45);
    animation: pulse 1.8s infinite;
}
.progress-rail {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    margin-bottom: 20px;
}
.progress-bar {
    display: block;
    width: 8%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8bd6c7, #d6bb7b);
    transition: width 300ms ease;
}
.step-list { display: grid; gap: 14px; }
.step-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
}
.step-index {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    color: var(--muted);
    font-weight: 800;
}
.step-card.is-running {
    border-color: rgba(139,214,199,.4);
    background: rgba(139,214,199,.08);
}
.step-card.is-running .step-index,
.step-card.is-completed .step-index {
    color: #06111d;
    background: linear-gradient(135deg, #8bd6c7, #d6bb7b);
}
.step-card.is-completed {
    border-color: rgba(147,230,177,.32);
    background: rgba(147,230,177,.08);
}
.processing-message {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    color: var(--muted);
}
.metric-strip { grid-template-columns: repeat(4, 1fr); margin-bottom: 24px; }
.metric-tile strong { font-size: 2rem; }
.stack { display: grid; gap: 24px; }
.section-head, .comparison-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.comparison-list { display: grid; gap: 18px; }
.comparison-card { padding: 24px; }
.comparison-summary { margin: 10px 0 0; color: var(--text); opacity: .9; line-height: 1.65; }
.badge, .filter-chip { padding: 8px 12px; text-transform: capitalize; background: rgba(255, 255, 255, 0.05); }
.comparison-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.comparison-column, .analysis-boxes > div {
    padding: 18px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
}
.analysis-boxes { margin-top: 16px; grid-template-columns: repeat(2, 1fr); }
.confidence-line {
    margin-top: 14px;
    color: var(--muted);
    font-size: .92rem;
}
.summary-table-wrap {
    overflow: auto;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,.08);
}
.summary-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}
.summary-table th,
.summary-table td {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: top;
}
.summary-table th {
    position: sticky;
    top: 0;
    background: rgba(8, 17, 29, 0.96);
    color: var(--text);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.summary-table td small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}
.preflight-box {
    margin-top: 20px;
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(214, 187, 123, 0.08);
    border: 1px solid rgba(214, 187, 123, 0.18);
}
.preflight-box ul {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--muted);
}
.meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.meta-list li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.filter-chip.is-active, .badge-severity { border-color: rgba(139, 214, 199, 0.55); color: var(--accent); }
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.hero-bg {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.65; pointer-events: none;
}
.hero-bg-left { width: 420px; height: 420px; top: 60px; left: -160px; background: rgba(139, 214, 199, 0.18); }
.hero-bg-right { width: 360px; height: 360px; right: -100px; top: 120px; background: rgba(214, 187, 123, 0.16); }
[hidden] { display: none !important; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(139,214,199,.45); }
    70% { box-shadow: 0 0 0 14px rgba(139,214,199,0); }
    100% { box-shadow: 0 0 0 0 rgba(139,214,199,0); }
}

@media (max-width: 1080px) {
    .hero-grid, .result-grid, .metric-strip, .feature-grid, .hero-metrics, .dropzones, .comparison-columns, .analysis-boxes, .auth-grid, .processing-grid { grid-template-columns: 1fr; }
    .result-hero, .header-inner, .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
    .nav-links { display: none; }
    .hero-copy, .upload-card, .section-card, .comparison-card, .auth-copy, .auth-card { padding: 22px; }
    .hero-copy h1, .result-hero h1 { font-size: 2.6rem; }
}