:root{
    --bg:#f4f7fb;
    --ink:#101828;
    --muted:#667085;
    --line:#e4e7ec;
    --card:#ffffff;
    --primary:#155eef;
    --primary-dark:#0b4ad3;
    --soft:#eef4ff;
    --shadow:0 24px 70px rgba(16,24,40,.12);
    --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
.site-shell{position:relative;overflow:hidden;background:radial-gradient(circle at top left,#dbeafe 0,#f8fbff 38%,#f4f7fb 100%)}
.site-shell:before{content:"";position:absolute;right:-160px;top:-180px;width:520px;height:520px;background:linear-gradient(135deg,rgba(21,94,239,.25),rgba(20,184,166,.12));filter:blur(10px);border-radius:50%}
.topbar,.hero-section,.jobs-section,.workflow-section,.category-section,.footer,.detail-topbar,.detail-layout{width:min(1180px,calc(100% - 40px));margin:auto}
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:18px;letter-spacing:-.03em}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#101828;color:#fff;box-shadow:0 14px 30px rgba(16,24,40,.2)}.nav-links{display:flex;align-items:center;gap:28px;color:#475467;font-weight:700}.nav-links a:hover{color:var(--primary)}.topbar-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;border-radius:999px;font-weight:800;transition:.25s ease}.topbar-cta{background:#fff;padding:12px 18px;box-shadow:0 10px 30px rgba(16,24,40,.08)}.topbar-cta:hover,.btn:hover{transform:translateY(-2px)}
.hero-section{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;padding:84px 0 110px}.hero-kicker,.section-header span,.category-section>span{display:inline-flex;color:var(--primary);background:#eef4ff;border:1px solid #d1e0ff;border-radius:999px;padding:9px 14px;font-weight:900;font-size:13px;letter-spacing:.02em}.hero-copy h1{font-size:clamp(44px,6vw,76px);line-height:.96;margin:22px 0 22px;letter-spacing:-.075em}.hero-copy p{font-size:18px;line-height:1.75;color:#475467;max-width:660px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.btn{padding:14px 22px;font-size:15px}.btn-primary{background:linear-gradient(135deg,var(--primary),#0b4ad3);color:#fff;box-shadow:0 18px 34px rgba(21,94,239,.25)}.btn-light{background:#fff;color:#101828;border:1px solid var(--line)}.hero-visual{min-height:430px;position:relative}.glass-card{background:rgba(255,255,255,.78);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow)}.main-glass{position:absolute;inset:60px 40px 70px 30px;border-radius:34px;padding:40px}.main-glass h3{font-size:34px;margin:26px 0 12px;letter-spacing:-.04em}.main-glass p{color:#667085;line-height:1.7}.live-chip{display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;background:#ecfdf3;color:#067647;font-weight:900}.live-chip i{width:9px;height:9px;background:#12b76a;border-radius:50%;box-shadow:0 0 0 6px rgba(18,183,106,.13)}.orbit-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;font-weight:900;box-shadow:0 18px 42px rgba(16,24,40,.11);animation:float 4.5s ease-in-out infinite}.orbit-one{top:26px;right:24px}.orbit-two{bottom:40px;left:0;animation-delay:.5s}.orbit-three{right:0;bottom:115px;animation-delay:1s}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
main{padding:72px 0}.jobs-section{scroll-margin-top:20px}.section-header{text-align:center;margin-bottom:28px}.section-header h2{font-size:42px;letter-spacing:-.05em;margin:16px 0 10px}.section-header p{color:var(--muted);margin:0;font-size:16px}.search-card{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 18px 50px rgba(16,24,40,.08)}.input-group{display:flex;flex-direction:column;gap:8px}.input-wide{grid-column:span 2}.input-group label{font-size:13px;font-weight:900;color:#344054}.input-group input{width:100%;height:50px;border:1px solid #d0d5dd;border-radius:15px;padding:0 15px;font:inherit;font-weight:600;outline:none;transition:.2s}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(21,94,239,.12)}.search-submit{height:50px;align-self:end}.result-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0}.result-summary{font-weight:900;color:#344054}.btn-reset{background:#fff;color:#344054;border:1px solid var(--line);padding:12px 18px}.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;transition:.2s}.jobs-grid.is-loading{opacity:.52}.job-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 16px 44px rgba(16,24,40,.07);transition:.25s ease;display:flex;flex-direction:column;min-height:360px}.job-card:hover{transform:translateY(-7px);box-shadow:0 28px 64px rgba(16,24,40,.13);border-color:#b2ccff}.job-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.sector-pill{display:inline-flex;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#f2f4f7;border:1px solid #eaecf0;color:#344054;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900}.job-card time,.detail-heading time{font-size:12px;color:#98a2b3;font-weight:800}.job-card h3{font-size:22px;line-height:1.25;margin:0 0 10px;letter-spacing:-.04em}.company-name{font-weight:900;color:#475467;margin:0 0 8px}.job-location{margin:0 0 16px;color:#667085;font-weight:700}.job-excerpt{color:#667085;line-height:1.65;margin:0 0 18px}.job-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.job-meta span{background:#eef4ff;color:#1849a9;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}.details-link{margin-top:22px;display:inline-flex;justify-content:center;border-radius:14px;background:#101828;color:#fff;padding:12px 16px;font-weight:900}.details-link:hover{background:var(--primary)}.pagination{display:flex;justify-content:center;gap:9px;margin-top:34px;flex-wrap:wrap}.pagination button{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}.pagination button.active,.pagination button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.empty-state{grid-column:1/-1;background:#fff;border:1px dashed #b2ccff;border-radius:24px;padding:46px;text-align:center}.empty-state h3{margin:0 0 8px}.empty-state p{margin:0;color:var(--muted)}
.workflow-section{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:90px}.workflow-section article{background:#101828;color:#fff;border-radius:26px;padding:28px;box-shadow:var(--shadow)}.workflow-section b{color:#84caff}.workflow-section h3{font-size:24px;margin:22px 0 10px}.workflow-section p{color:#d0d5dd;line-height:1.7}.category-section{margin-top:44px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px}.category-section div{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.category-section strong{border:1px solid var(--line);border-radius:999px;padding:11px 14px;color:#344054}.footer{padding:34px 0;display:flex;justify-content:space-between;color:#667085}.footer strong{color:#101828}.detail-page{background:#f8fafc}.detail-topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start;padding:34px 0 70px}.detail-main,.apply-panel{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 50px rgba(16,24,40,.08)}.detail-main{padding:34px}.detail-heading h1{font-size:44px;line-height:1.05;letter-spacing:-.06em;margin:18px 0 12px}.detail-heading p{font-weight:900;color:#475467}.detail-heading strong{display:block;color:#667085}.detail-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}.detail-meta-grid div{background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:16px}.detail-meta-grid span{display:block;color:#667085;font-size:12px;font-weight:900;margin-bottom:8px}.detail-meta-grid strong{font-size:14px}.description-box{border-top:1px solid var(--line);padding-top:24px}.description-box h2{font-size:28px;letter-spacing:-.04em}.description-content{color:#344054;line-height:1.8}.apply-panel{position:sticky;top:24px;padding:24px}.apply-panel h2{font-size:26px;letter-spacing:-.04em;margin:0 0 10px}.apply-panel p,.mini-note{color:#667085;line-height:1.7}.full{width:100%;margin:18px 0}.mini-note{font-size:13px;background:#f8fafc;border-radius:16px;padding:14px}
@media(max-width:960px){.nav-links,.topbar-cta{display:none}.hero-section,.detail-layout{grid-template-columns:1fr}.hero-section{padding:50px 0}.hero-visual{display:none}.search-card{grid-template-columns:1fr 1fr}.jobs-grid,.workflow-section{grid-template-columns:1fr 1fr}.detail-meta-grid{grid-template-columns:1fr 1fr}.footer{flex-direction:column;gap:8px}}
@media(max-width:640px){.topbar,.hero-section,.jobs-section,.workflow-section,.category-section,.footer,.detail-topbar,.detail-layout{width:min(100% - 28px,1180px)}.hero-copy h1{font-size:40px}.search-card,.jobs-grid,.workflow-section,.detail-meta-grid{grid-template-columns:1fr}.input-wide{grid-column:auto}.result-bar{align-items:flex-start;flex-direction:column}.detail-heading h1{font-size:32px}}

/* Database driven dropdown filters */
.input-group select {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    padding: 0 42px 0 14px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    outline: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.input-group select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}