:root {
    --navy: #0c2d5e;
    --navy-2: #123d78;
    --blue: #087cff;
    --blue-2: #0b66db;
    --cyan: #15b7d4;
    --green: #13a57a;
    --ink: #172536;
    --muted: #687889;
    --line: #dfe6ed;
    --panel: #ffffff;
    --soft: #f5f8fb;
    --soft-blue: #eef6ff;
    --danger: #a83528;
    --radius: 18px;
    --shadow: 0 18px 50px rgba(18, 48, 82, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #fff;
    line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.narrow-shell { width: min(760px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(220,228,236,.9);
}
.nav-shell {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand img { display: block; width: 176px; }
.main-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 650; }
.main-nav a { text-decoration: none; color: #435466; }
.main-nav a:hover { color: var(--blue); }
.nav-login { border-left: 1px solid var(--line); padding-left: 22px; }
.nav-toggle { display: none; border: 0; background: transparent; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 11px 18px;
    text-decoration: none;
    font-weight: 750;
    cursor: pointer;
    font: inherit;
}
.button-small { padding: 9px 14px; font-size: 13px; }
.button-large { padding: 14px 22px; font-size: 16px; }
.button-primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow: 0 9px 22px rgba(8,124,255,.20);
}
.button-primary:hover { transform: translateY(-1px); }
.button-ghost { background: #fff; border-color: #cfd9e3; color: #30465c; }
.button-white { background: #fff; color: var(--navy); }
.button-full { width: 100%; }
.hero {
    overflow: hidden;
    padding: 88px 0 74px;
    background:
        radial-gradient(circle at 10% 15%, rgba(8,124,255,.12), transparent 28%),
        radial-gradient(circle at 82% 28%, rgba(21,183,212,.10), transparent 30%),
        linear-gradient(180deg, #fbfdff 0%, #fff 82%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 58px; align-items: center; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .13em; margin-bottom: 12px; }
.eyebrow-light { color: #7fd8ff; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; }
h1 { font-size: clamp(42px, 5.1vw, 68px); margin: 0 0 22px; }
h2 { font-size: clamp(34px, 4vw, 49px); margin: 0 0 18px; }
h3 { font-size: 20px; margin: 0 0 10px; }
.hero-lead { max-width: 680px; color: #556879; font-size: 19px; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.center-actions { justify-content: center; }
.demo-strip {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 13px;
    align-items: center;
    font-size: 12px;
    color: #617386;
}
.demo-strip code {
    padding: 2px 6px;
    border: 1px solid #d8e3ec;
    border-radius: 5px;
    background: #fff;
    font-weight: 800;
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(19,165,122,.12); }

.mock-window {
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe5ee;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(18,48,82,.16);
    transform: rotate(1deg);
}
.mock-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 15px;
    background: #f5f8fb;
    border-bottom: 1px solid #e3e9ef;
}
.mock-top > span { width: 9px; height: 9px; border-radius: 50%; background: #c8d2db; }
.mock-top strong { margin-left: 8px; color: #5f7182; font-size: 12px; }
.mock-body { padding: 25px; }
.mock-note-head { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:22px; }
.mock-note-head small, .mock-grid small, .mail-card small { display:block; color:#83909b; font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.mock-note-head strong { font-size: 26px; }
.status-chip { padding: 6px 10px; border-radius: 999px; background: #e7f8ef; color:#13764e; font-weight:800; font-size:11px; }
.mock-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mock-grid > div { padding:12px; border:1px solid #e5ebf0; border-radius:10px; background:#fbfdff; }
.mock-grid strong { display:block; margin-top:3px; font-size:13px; }
.proof-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.proof-card { padding:13px 8px; text-align:center; border-radius:10px; background:#f1f7ff; color:#174d86; }
.proof-card span { display:block; font-size:23px; }
.proof-card strong, .proof-card small { display:block; }
.proof-card strong { font-size:11px; margin:3px 0; }
.proof-card small { color:#7290ad; font-size:9px; }
.mail-card { margin-top:14px; display:flex; gap:12px; align-items:center; padding:13px; border-radius:10px; background:#eefaf7; color:#175e4c; }
.mail-card > span { font-size:22px; }
.mail-card strong { display:block; font-size:12px; }

.trust-strip { border-top:1px solid #edf1f5; border-bottom:1px solid #edf1f5; background:#fff; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid > div { padding:22px 24px; border-right:1px solid #edf1f5; }
.trust-grid > div:last-child { border-right:0; }
.trust-grid strong, .trust-grid span { display:block; }
.trust-grid strong { font-size:14px; margin-bottom:3px; }
.trust-grid span { color:#738293; font-size:12px; }

.section { padding: 86px 0; }
.section-muted { background: var(--soft); }
.section-heading { max-width: 760px; margin-bottom: 38px; }
.section-heading p, .split-heading > p { color: var(--muted); font-size: 17px; }
.split-heading { max-width:none; display:grid; grid-template-columns:1fr .75fr; gap:50px; align-items:end; }

.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.step-card { padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.step-number { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:9px; background:#eef6ff; color:var(--blue); font-size:11px; font-weight:850; margin-bottom:25px; }
.step-card p, .feature-card p { color:var(--muted); font-size:13px; margin:0; }

.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.feature-card { background:#fff; border:1px solid #e1e8ef; border-radius:15px; padding:21px; min-height:210px; }
.feature-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#edf6ff; color:#0b69d8; font-weight:850; margin-bottom:28px; }
.feature-card h3 { font-size:18px; }

.bins-section { background: linear-gradient(135deg, #071e3f, #0d3c72 62%, #075c7a); color:#fff; }
.bins-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.bins-section h2 { max-width:650px; }
.bins-lead { color:#c4d7e8; font-size:18px; }
.bin-points { display:grid; gap:14px; margin-top:30px; }
.bin-points > div { display:grid; grid-template-columns:28px 1fr; gap:10px; }
.bin-points > div > span { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(33,208,156,.16); color:#6aefc4; font-weight:900; }
.bin-points p { margin:0; color:#c7d7e6; font-size:13px; }
.bin-points strong { color:#fff; }

.bin-dashboard { padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.08); box-shadow:0 25px 60px rgba(0,0,0,.22); }
.dash-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.dash-top small, .dash-top strong { display:block; }
.dash-top small { color:#90c6ec; font-size:10px; font-weight:800; }
.dash-top strong { font-size:22px; }
.dash-top > span { font-size:11px; color:#c4d7e8; }
.dash-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.dash-metrics > div { padding:13px; border-radius:10px; background:rgba(255,255,255,.08); }
.dash-metrics small, .dash-metrics strong { display:block; }
.dash-metrics small { font-size:9px; color:#9fc2df; }
.dash-metrics strong { font-size:18px; margin-top:3px; }
.dash-table { margin-top:13px; overflow:hidden; border-radius:11px; background:#fff; color:var(--ink); }
.dash-row { display:grid; grid-template-columns:.8fr 1.5fr .7fr; gap:8px; align-items:center; padding:11px 12px; border-bottom:1px solid #edf1f4; font-size:11px; }
.dash-row:last-child { border-bottom:0; }
.dash-head { background:#f5f8fb; color:#718191; font-size:9px; font-weight:800; }
.age { justify-self:start; border-radius:999px; padding:4px 7px; font-style:normal; font-weight:800; font-size:9px; }
.age-critical { background:#5c1e18; color:#fff; }
.age-stale { background:#fde8e5; color:#9e2d21; }
.age-warning { background:#fff0d5; color:#9c5d00; }
.age-fresh { background:#e8f7ef; color:#19754e; }
.dash-question { margin-top:13px; padding:14px; border-radius:11px; background:rgba(0,0,0,.16); color:#d8e8f6; font-size:13px; font-weight:700; }

.paper-grid { display:grid; gap:24px; }
.paper-copy { max-width:760px; }
.paper-copy p { color:var(--muted); font-size:17px; }
.paper-flow, .digital-flow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.paper-flow > div, .digital-flow > div { padding:11px 13px; border-radius:9px; font-size:12px; font-weight:700; }
.paper-flow > div { background:#f4f4f4; color:#5f6870; border:1px solid #e5e5e5; }
.digital-flow > div { background:#edf7ff; color:#125da8; border:1px solid #d5eaff; }
.paper-flow span, .digital-flow span { color:#9ca8b2; }
.paper-bad { background:#fff0ed !important; color:#9b3427 !important; border-color:#f3cbc5 !important; }
.digital-good { background:#e9f8f0 !important; color:#19734d !important; border-color:#ccebdc !important; }

.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; margin:0 auto; }
.price-card { position:relative; padding:28px; border:1px solid #dce5ed; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(20,45,72,.06); }
.price-featured { border:2px solid var(--blue); }
.popular { position:absolute; right:20px; top:-12px; padding:6px 10px; border-radius:999px; background:var(--blue); color:#fff; font-size:9px; font-weight:850; letter-spacing:.07em; }
.price-name { font-size:18px; font-weight:800; margin-bottom:15px; }
.price { display:flex; gap:8px; align-items:end; margin-bottom:22px; }
.price strong { font-size:40px; line-height:1; }
.price span { color:var(--muted); font-size:12px; padding-bottom:5px; }
.price-card ul { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:9px; }
.price-card li { position:relative; padding-left:22px; color:#526577; font-size:13px; }
.price-card li:before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }
.pricing-notes { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pricing-notes > div { padding:17px; border-radius:12px; background:#fff; border:1px solid #e1e7ed; }
.pricing-notes strong, .pricing-notes span { display:block; }
.pricing-notes strong { font-size:13px; margin-bottom:5px; }
.pricing-notes span { color:var(--muted); font-size:11px; }

.demo-section { background:var(--navy); color:#fff; }
.demo-box { display:flex; justify-content:space-between; gap:40px; align-items:center; }
.demo-box p { max-width:720px; color:#c3d6e9; }
.demo-credentials { display:flex; gap:10px; flex-wrap:wrap; }
.demo-credentials span { padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.08); font-size:12px; }

.faq-shell { max-width:900px; }
.faq-list { display:grid; gap:9px; }
.faq-list details { border:1px solid var(--line); border-radius:11px; background:#fff; padding:0 17px; }
.faq-list summary { cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:750; position:relative; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary:after { content:"+"; position:absolute; right:0; top:15px; font-size:19px; color:var(--blue); }
.faq-list details[open] summary:after { content:"–"; }
.faq-list details p { color:var(--muted); margin:0; padding:0 0 18px; font-size:13px; }

.final-cta { border-top:1px solid var(--line); }
.final-cta-grid { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.final-cta h2 { margin-bottom:7px; }
.final-cta p { color:var(--muted); margin:0; }
.final-actions { display:flex; gap:9px; flex-wrap:wrap; }

.form-page { min-height:65vh; background:var(--soft); }
.lead-form { background:#fff; border:1px solid var(--line); border-radius:18px; padding:27px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.lead-form label { display:grid; gap:6px; margin-bottom:15px; font-size:12px; font-weight:750; color:#405365; }
.lead-form input, .lead-form select, .lead-form textarea {
    width:100%;
    border:1px solid #cad5df;
    border-radius:9px;
    padding:12px 13px;
    background:#fff;
    font:inherit;
    font-size:14px;
    color:var(--ink);
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,124,255,.09); }
.check-row { display:flex !important; grid-template-columns:auto 1fr !important; align-items:start; gap:9px !important; }
.check-row input { width:auto; margin-top:3px; }
.form-note { color:var(--muted); font-size:12px; }
.hp-field { position:absolute !important; left:-9999px !important; }

.notice { padding:35px; text-align:center; border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.notice-icon { width:60px; height:60px; margin:0 auto 18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#e8f8ef; color:var(--green); font-size:28px; font-weight:900; }
.notice h1 { font-size:42px; }
.notice p { color:var(--muted); }

.legal-page h1 { font-size:46px; }
.legal-page h2 { margin-top:35px; font-size:24px; }
.legal-page p { color:var(--muted); }
.legal-note { margin-top:40px; padding:16px; border-radius:10px; background:#fff4d9; border:1px solid #f3dfaa; color:#725500 !important; font-size:12px; }

.site-footer { padding:52px 0 20px; background:#071a35; color:#cad8e6; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; }
.footer-logo { width:180px; filter:brightness(1.4); }
.footer-grid p { max-width:360px; color:#95abc0; font-size:13px; }
.footer-grid strong { display:block; color:#fff; margin-bottom:12px; }
.footer-grid a { display:block; text-decoration:none; color:#a9bed1; margin:7px 0; font-size:12px; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { margin-top:35px; padding-top:17px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:20px; color:#7690a8; font-size:10px; }

@media (max-width: 1000px) {
    .main-nav { gap:14px; }
    .main-nav > a:not(.nav-login):not(.button) { display:none; }
    .hero-grid, .bins-grid { grid-template-columns:1fr; }
    .hero-visual { max-width:650px; }
    .steps { grid-template-columns:repeat(2,1fr); }
    .feature-grid { grid-template-columns:repeat(2,1fr); }
    .trust-grid { grid-template-columns:repeat(2,1fr); }
    .pricing-notes { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
    .shell, .narrow-shell { width:min(100% - 28px, 1180px); }
    .site-header { position:relative; }
    .nav-toggle { display:block; }
    .main-nav {
        display:none;
        position:absolute;
        top:73px; left:0; right:0;
        padding:16px 20px 22px;
        background:#fff;
        border-bottom:1px solid var(--line);
        box-shadow:0 12px 25px rgba(20,45,72,.08);
        align-items:stretch;
        flex-direction:column;
    }
    .main-nav.open { display:flex; }
    .main-nav > a:not(.nav-login):not(.button) { display:block; }
    .nav-login { padding-left:0; border-left:0; }
    .brand img { width:150px; }
    .hero { padding-top:55px; }
    h1 { font-size:41px; }
    h2 { font-size:34px; }
    .hero-lead { font-size:16px; }
    .mock-body { padding:16px; }
    .mock-grid, .proof-row { grid-template-columns:1fr; }
    .steps, .feature-grid, .pricing-grid, .pricing-notes, .form-grid { grid-template-columns:1fr; }
    .trust-grid { grid-template-columns:1fr; }
    .trust-grid > div { border-right:0; border-bottom:1px solid #edf1f5; }
    .split-heading { grid-template-columns:1fr; gap:0; }
    .demo-box, .final-cta-grid { align-items:flex-start; flex-direction:column; }
    .dash-metrics { grid-template-columns:1fr; }
    .dash-row { grid-template-columns:.8fr 1.2fr .7fr; }
    .footer-grid { grid-template-columns:1fr; gap:25px; }
    .footer-bottom { flex-direction:column; }
}


.human-check {
    margin: 4px 0 15px;
    padding: 14px 15px;
    border: 1px solid #d9e5ef;
    border-radius: 10px;
    background: #f7fbff;
}
.human-check label {
    margin-bottom: 5px !important;
}
.human-check input {
    max-width: 140px;
}
.human-check small {
    display: block;
    color: #728394;
    font-size: 11px;
}