:root {
        --paper: #FAFAF8;
        --paper-dim: #F1EFE9;
        --ink: #14181F;
        --ink-soft: #4C5568;
        --steel: #3D4759;
        --orange: #EE6C0C;
        --orange-dark: #B84B06;
        --green: #4A7A3D;
        --border: #D9D5C9;
        --border-strong: #B7B2A2;
    }
    * { box-sizing: border-box; }
    body {
        margin: 0;
        background: var(--paper);
        color: var(--ink);
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        line-height: 1.6;
        overflow-x: hidden;
    }
    h1, h2, h3 {
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin: 0;
    }
    .mono { font-family: 'IBM Plex Mono', monospace; }
    a { color: inherit; }
    img, svg { max-width: 100%; }
    .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
    a:focus-visible, button:focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 2px;
    }

    /* ===== Hazard stripe motif ===== */
    .hazard-band {
        height: 14px;
        background: repeating-linear-gradient(
            -45deg,
            var(--ink), var(--ink) 16px,
            var(--orange) 16px, var(--orange) 32px
        );
    }

    /* ===== Nav ===== */
    nav.site-nav { background: var(--paper); }
    .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 32px;
        max-width: 1180px;
        margin: 0 auto;
    }
    .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        font-size: 20px;
        text-decoration: none;
    }
    .brand-mark {
        width: 32px; height: 32px;
        background: var(--ink);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(-4deg);
    }
    .brand-mark span {
        color: var(--orange);
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 500;
        font-size: 13px;
    }
    .nav-links {
        display: flex;
        gap: 32px;
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        font-weight: 500;
    }
    .nav-links a { text-decoration: none; color: var(--ink-soft); }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta {
        display: inline-block;
        background: var(--orange);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 14px;
        padding: 11px 20px;
        border-radius: 4px;
    }
    .nav-cta:hover { background: var(--orange-dark); }

    /* ===== Hero ===== */
    .hero {
        padding: 76px 0 0;
        background: var(--ink);
        color: var(--paper);
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: "";
        position: absolute;
        top: -160px; right: -160px;
        width: 480px; height: 480px;
        background: var(--orange);
        border-radius: 50%;
        opacity: 0.9;
        filter: none;
    }
    .hero-inner {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 32px 90px;
        position: relative;
        z-index: 2;
    }
    .hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 56px;
        align-items: center;
    }
    .eyebrow-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 12.5px;
        color: var(--ink);
        background: var(--orange);
        border-radius: 3px;
        padding: 6px 12px;
        margin-bottom: 26px;
        font-weight: 500;
        transform: rotate(-1.5deg);
    }
    .hero h1 {
        font-size: 76px;
        line-height: 0.98;
        max-width: 10ch;
        color: #fff;
        text-shadow: 5px 5px 0 var(--orange-dark);
    }
    .hero p.lede {
        font-size: 18.5px;
        color: #C7CBD6;
        max-width: 44ch;
        margin: 28px 0 32px;
    }
    .hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
    .btn-primary {
        display: inline-block;
        background: var(--orange);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 16px;
        padding: 16px 28px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
    }
    .btn-primary:hover { background: var(--orange-dark); }
    .btn-ghost {
        display: inline-block;
        text-decoration: none;
        font-weight: 600;
        font-size: 15.5px;
        color: #fff;
        padding: 16px 8px;
        border-bottom: 2px solid var(--orange);
    }
    .hero-fineprint {
        margin-top: 20px;
        font-size: 13px;
        color: #9BA1B0;
    }

    /* --- The ticket visual --- */
    @keyframes stampIn {
        0%   { transform: rotate(6deg) scale(1.18) translateY(-24px); opacity: 0; }
        60%  { transform: rotate(-4deg) scale(1.02) translateY(2px); opacity: 1; }
        100% { transform: rotate(-2.5deg) scale(1) translateY(0); }
    }
    .ticket {
        background: #fff;
        color: var(--ink);
        border-radius: 6px;
        box-shadow: 8px 10px 0 rgba(0,0,0,0.35);
        overflow: hidden;
        transform: rotate(-2.5deg);
        animation: stampIn 0.7s cubic-bezier(.2,.8,.2,1) both;
    }
    .ticket-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 22px 16px;
        background-image: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 16px);
        background-position: bottom;
        background-size: 100% 2px;
        background-repeat: no-repeat;
    }
    .ticket-head .job-no {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 13px;
        color: var(--ink-soft);
    }
    .ticket-head .job-no strong {
        display: block;
        font-family: 'Archivo', sans-serif;
        font-weight: 800;
        font-size: 24px;
        color: var(--ink);
    }
    .stamp {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--green);
        border: 2px solid var(--green);
        border-radius: 3px;
        padding: 5px 10px;
        transform: rotate(5deg);
    }
    .ticket-body { padding: 18px 22px 22px; }
    .ticket-field {
        display: grid;
        grid-template-columns: 108px 1fr;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px solid var(--paper-dim);
        font-size: 14px;
    }
    .ticket-field:last-child { border-bottom: none; }
    .ticket-field .fname {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11.5px;
        color: var(--ink-soft);
        padding-top: 2px;
    }
    .ticket-field .fval { color: var(--ink); }
    .ticket-foot {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 22px;
        background: var(--orange);
    }
    .ticket-foot .total-label { font-size: 12px; color: #FFE3CC; }
    .ticket-foot .total-val { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: #fff; }
    .ticket-foot .paid-chip {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        background: var(--ink);
        color: #fff;
        padding: 5px 10px;
        border-radius: 3px;
    }

    /* ===== Workflow ===== */
    .workflow { padding: 90px 0; background: var(--paper); }
    .section-head { max-width: 56ch; margin-bottom: 52px; }
    .section-head h2 { font-size: 36px; line-height: 1.12; }
    .section-head p { color: var(--ink-soft); font-size: 16.5px; margin-top: 14px; }
    .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .step {
        background: var(--paper-dim);
        border-radius: 6px;
        padding: 26px 22px 30px;
        position: relative;
    }
    .step .num {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 44px;
        color: var(--orange);
        line-height: 1;
        display: block;
        margin-bottom: 12px;
    }
    .step h3 { font-size: 18px; margin-bottom: 8px; }
    .step p { font-size: 14.5px; color: var(--ink-soft); margin: 0; }

    /* ===== Feature ledger ===== */
    .ledger { padding: 90px 0; background: var(--ink); color: var(--paper); }
    .ledger .section-head h2 { color: #fff; }
    .ledger .section-head p { color: #A9AFBE; }
    .ledger-rows { border-top: 1px solid #333A47; }
    .ledger-row {
        display: grid;
        grid-template-columns: 220px 1fr 96px;
        gap: 28px;
        align-items: baseline;
        padding: 24px 0;
        border-bottom: 1px solid #333A47;
    }
    .ledger-row h3 { font-size: 17px; font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; }
    .ledger-row p { margin: 0; font-size: 14.5px; color: #A9AFBE; }
    .ledger-row .tag {
        justify-self: end;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        color: var(--orange);
        border: 1px solid var(--orange);
        border-radius: 3px;
        padding: 4px 8px;
        white-space: nowrap;
    }

    /* ===== Quote ===== */
    .quote-section { padding: 96px 0 100px; background: var(--paper); position: relative; }
    .quote-mark {
        font-family: 'Archivo', sans-serif;
        font-size: 220px;
        font-weight: 900;
        color: var(--orange);
        opacity: 0.28;
        line-height: 1;
        position: absolute;
        top: -58px;
        left: 24px;
        z-index: 0;
        user-select: none;
    }
    blockquote {
        margin: 64px 0 0;
        max-width: 62ch;
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 30px;
        line-height: 1.3;
        color: var(--ink);
        position: relative;
        z-index: 1;
    }
    .quote-attr {
        margin-top: 24px;
        font-size: 14.5px;
        color: var(--ink-soft);
        position: relative;
        z-index: 1;
    }
    .quote-attr strong { color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 600; }

    /* ===== Industry strip ===== */
    .industries { padding: 20px 0 96px; background: var(--paper); }
    .industries .section-head { margin-bottom: 30px; }
    .industry-pills { display: flex; flex-wrap: wrap; gap: 10px; }
    .industry-pills span {
        font-size: 14px;
        font-weight: 500;
        background: var(--paper-dim);
        border-radius: 20px;
        padding: 9px 18px;
        color: var(--ink);
    }

    /* ===== Final CTA ===== */
    .final-cta {
        background: var(--orange);
        color: var(--ink);
        padding: 90px 0;
        text-align: center;
    }
    .final-cta h2 { color: var(--ink); font-size: 42px; max-width: 20ch; margin: 0 auto; }
    .final-cta p { color: #5C2E00; font-size: 17px; max-width: 44ch; margin: 18px auto 32px; }
    .final-cta .btn-primary { background: var(--ink); }
    .final-cta .btn-primary:hover { background: #000; }

    /* ===== Footer ===== */
    footer { padding: 40px 0; background: var(--ink); color: #8890A0; }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }

    @media (prefers-reduced-motion: reduce) {
        * { animation: none !important; transition: none !important; }
    }

    @media (max-width: 860px) {
        .hero::before { width: 280px; height: 280px; top: -100px; right: -100px; opacity: 0.7; }
        .hero-grid { grid-template-columns: 1fr; gap: 44px; }
        .hero h1 { font-size: 52px; text-shadow: 4px 4px 0 var(--orange-dark); }
        .steps { grid-template-columns: 1fr 1fr; }
        .ledger-row { grid-template-columns: 1fr; gap: 6px; }
        .ledger-row .tag { justify-self: start; }
        .nav-links { display: none; }
        .ticket { transform: rotate(-1.5deg); }
        .quote-mark { font-size: 120px; top: -34px; }
        blockquote { font-size: 23px; margin-top: 44px; }
        .final-cta h2 { font-size: 30px; }
    }
    @media (max-width: 560px) {
        .wrap, .nav-inner, .hero-inner { padding-left: 20px; padding-right: 20px; }
        .steps { grid-template-columns: 1fr; }
        .hero h1 { font-size: 40px; }
    }