/* extracted from resources/views/public/jobs/index.blade.php */
:root {
            --brand: #0d2c54; --brand-soft: #102f59; --accent: #1e6bbf;
            --ink: #1a1f2c;   --muted: #6c757d;     --bg: #f6f8fb;
            --line: #e6e9ef;
        }
        body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

        .brand-bar { background: #fff; border-bottom: 1px solid var(--line); padding: 8px 0; }
        .brand-bar .brand-mark { display: inline-flex; align-items: center; text-decoration: none; }
        .brand-bar .brand-mark img { height: 38px; width: auto; display: block; }
        .brand-bar .brand-links a { color: var(--muted); text-decoration: none; font-size: .85rem; margin-left: 18px; font-weight: 500; }
        .brand-bar .brand-links a:hover { color: var(--brand); }

        .hero {
            background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 60%, #15396b 100%);
            color: #fff; padding: 28px 0 40px; position: relative; overflow: hidden;
        }
        .hero::after {
            content: ""; position: absolute; right: -120px; top: -80px;
            width: 320px; height: 320px; border-radius: 50%;
            background: radial-gradient(circle, rgba(79,155,255,.25), transparent 70%);
            pointer-events: none;
        }
        .hero h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 700; margin-bottom: 8px; }
        .hero .lead { color: rgba(255,255,255,.85); font-size: .95rem; max-width: 720px; margin-bottom: 0; }
        .hero .pill {
            display: inline-block; background: rgba(255,255,255,.12); color: #fff;
            padding: 3px 10px; border-radius: 100px; font-size: .72rem;
            letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px;
        }

        .main-wrap { margin-top: -20px; position: relative; z-index: 2; }

        .job-card {
            background: #fff; border: 1px solid var(--line); border-radius: 12px;
            box-shadow: 0 4px 24px rgba(13, 44, 84, .06); padding: 18px 20px;
            transition: transform .12s, box-shadow .12s;
        }
        .job-card:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(13, 44, 84, .10); }
        .job-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
        .job-card h3 a { color: var(--brand); text-decoration: none; }
        .job-card h3 a:hover { color: var(--accent); }
        .job-meta { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }
        .job-meta .badge-meta {
            display: inline-flex; align-items: center; gap: 4px;
            background: #eef3fb; color: var(--accent); padding: 2px 8px;
            border-radius: 100px; font-size: .72rem; margin-right: 6px;
        }
        .job-snippet { color: #3b4250; font-size: .88rem; line-height: 1.5; margin-bottom: 12px; }
        .btn-apply {
            background: var(--brand); color: #fff; border: 0;
            padding: 6px 16px; border-radius: 7px; font-weight: 600; font-size: .85rem;
            text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-apply:hover { background: #143a6c; color: #fff; }

        .empty-state {
            background: #fff; border: 1px dashed var(--line); border-radius: 12px;
            padding: 48px 24px; text-align: center; color: var(--muted);
        }

        footer.site-footer {
            background: #fff; border-top: 1px solid var(--line);
            padding: 12px 0; margin-top: 28px; text-align: center;
            color: var(--muted); font-size: .78rem;
        }
        footer.site-footer .sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin: 0 8px; vertical-align: middle; }