:root{
    --yellow-1:#f4c531;
    --yellow-2:#ffdb62;
    --yellow-3:#fff1ba;
    --yellow-4:#fff8df;
    --amber:#e2a90b;
    --cream:#fffdf5;
    --paper:#ffffff;
    --ink:#2b2411;
    --muted:#6d6447;
    --line:#eadfb8;
    --shadow:0 22px 55px rgba(107,79,10,.12);
    --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:linear-gradient(180deg,#fffdf4 0%,#fffaf0 42%,#fffef7 100%);color:var(--ink)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Barlow Condensed",Inter,sans-serif;line-height:.95;margin:0}

.hero{
    position:relative;
    overflow:hidden;
    min-height:640px;
    background:
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.45), transparent 26%),
        radial-gradient(circle at 14% 12%, rgba(255,255,255,.24), transparent 18%),
        linear-gradient(135deg, #e9b413 0%, #f3c837 37%, #ffdf72 100%);
}
.hero:before,
.hero:after{
    content:"";
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    filter:blur(3px);
}
.hero:before{width:380px;height:380px;right:-90px;top:-120px}
.hero:after{width:520px;height:520px;left:-180px;bottom:-250px}

.topbar,
.hero__content,
.section,
.footer{width:min(1180px,92vw);margin-inline:auto}
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand__mark{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.95);color:#ca8c00;font-size:28px;font-weight:800;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.brand strong{display:block;font-weight:800;font-size:18px}
.brand small{display:block;opacity:.9;font-size:12px;margin-top:3px}

.hero__content{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center;padding:52px 0 78px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.24);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.14em}
.eyebrow.dark{background:#fff6cf;color:#9b6d00;border:1px solid #f1dfa3}
h1{font-size:clamp(52px,7.5vw,92px);margin-top:16px;text-transform:uppercase;letter-spacing:.01em;max-width:720px}
.hero__copy p{font-size:18px;line-height:1.7;max-width:700px;margin:20px 0 0;color:rgba(43,36,17,.84)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;background:var(--paper);color:#8f6200;font-weight:800;box-shadow:0 12px 28px rgba(94,69,6,.14);border:1px solid rgba(255,255,255,.55);transition:.2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(94,69,6,.16)}
.btn--light{background:rgba(255,255,255,.2);backdrop-filter:blur(5px);color:#3c2f00}
.btn--ghost{background:rgba(255,255,255,.14);color:#3c2f00;border-color:rgba(255,255,255,.35);box-shadow:none}
.hero__panel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:28px 20px;border-radius:24px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(103,76,8,.11);border:1px solid rgba(255,255,255,.45);text-align:center}
.stat span{display:block;font-family:"Barlow Condensed";font-size:68px;line-height:.85;color:#6d4c00}
.stat small{display:block;margin-top:10px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#7a6736}

.section{padding:78px 0}
.section__heading{max-width:900px;margin-bottom:26px}
.section__heading h2{font-size:clamp(42px,5vw,66px);text-transform:uppercase;margin-top:14px}
.section__heading p{margin:14px 0 0;color:var(--muted);line-height:1.75;font-size:17px}

.workspace{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(330px,.94fr);gap:24px;align-items:start}
.map-card,
.detail-card,
.summary-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(229,208,145,.5)}
.map-card{padding:18px}
.map-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.filter{border:1px solid #f0dd9f;background:#fffaf0;color:#8b6a11;padding:11px 16px;border-radius:999px;font-weight:800;cursor:pointer;transition:.2s ease}
.filter.active,.filter:hover{background:linear-gradient(180deg,var(--yellow-2),var(--yellow-1));color:#5d4300;border-color:#f0c84f}

.map-wrapper{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#fff9e7,#ffffff);border:1px solid var(--line)}
.map-base{width:100%;height:auto}
.dept-pin{
    position:absolute;
    transform:translate(-50%,-50%);
    width:18px;height:18px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.95);
    background:#4d4d4d;
    box-shadow:0 0 0 3px rgba(77,77,77,.14), 0 8px 14px rgba(0,0,0,.12);
    cursor:pointer;
    transition:.18s ease;
    padding:0;
}
.dept-pin span{
    position:absolute;
    left:50%;bottom:138%;transform:translateX(-50%);
    white-space:nowrap;
    background:rgba(43,36,17,.92);
    color:#fff;
    padding:7px 10px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    opacity:0;
    pointer-events:none;
    transition:.18s ease;
}
.dept-pin:hover span,
.dept-pin:focus-visible span,
.dept-pin.active span{opacity:1}
.dept-pin:hover,.dept-pin:focus-visible,.dept-pin.active{transform:translate(-50%,-50%) scale(1.18);outline:none;z-index:3}
.dept-pin.has-data{background:var(--amber);box-shadow:0 0 0 4px rgba(242,197,49,.28), 0 10px 16px rgba(226,169,11,.22)}
.dept-pin.dim{opacity:.24;filter:grayscale(.2)}
.map-legend{display:flex;gap:18px;flex-wrap:wrap;padding:16px 4px 2px;color:var(--muted);font-size:14px}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#5d5d5d;margin-right:8px;vertical-align:middle}
.legend-dot--gold{background:var(--amber)}

.detail-card{position:sticky;top:20px;padding:28px;min-height:620px}
.detail-empty{min-height:560px;display:grid;place-content:center;text-align:center;padding:12px}
.detail-empty h3{font-size:42px;text-transform:uppercase;margin-bottom:8px}
.detail-empty p{color:var(--muted);line-height:1.7;max-width:400px}
.pulse-dot{display:block;width:20px;height:20px;border-radius:50%;background:var(--yellow-1);margin:0 auto 18px;box-shadow:0 0 0 12px rgba(244,197,49,.2)}
.detail-header small{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--yellow-4);color:#8f6d10;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.detail-header h3{font-size:52px;text-transform:uppercase;margin-top:14px}
.detail-header p{margin:12px 0 0;color:var(--muted);line-height:1.65}
.campaign-list{display:grid;gap:18px;margin-top:20px}
.campaign{padding:18px;border-radius:22px;background:linear-gradient(180deg,#fffef9,#fff8e8);border:1px solid #f3e0a7}
.campaign img{width:100%;height:180px;object-fit:cover;border-radius:16px;margin-bottom:14px;background:#fff3c9}
.campaign h4{font-size:34px;text-transform:uppercase;margin:4px 0 10px}
.campaign .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{display:inline-flex;padding:7px 11px;border-radius:999px;background:#fff2bf;color:#7b5a00;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;border:1px solid #edd27b}
.campaign p{margin:8px 0;color:#493f22;line-height:1.65}
.campaign a{color:#a26b00;font-weight:800}

.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.summary-card{padding:24px;cursor:pointer;transition:.2s ease;background:linear-gradient(180deg,#ffffff,#fff9e8)}
.summary-card:hover{transform:translateY(-4px);box-shadow:0 24px 42px rgba(107,79,10,.15)}
.summary-card strong{display:block;font-size:30px;text-transform:uppercase}
.summary-card span{display:inline-flex;margin:10px 0;padding:6px 10px;border-radius:999px;background:var(--yellow-4);color:#8c6a0d;font-weight:900;font-size:12px;border:1px solid #f2dfa4}
.summary-card p{color:var(--muted);line-height:1.6;margin:0}
.footer{text-align:center;padding:34px 0 42px;color:#7a7053;border-top:1px solid #f0e5bf}

@media(max-width:1024px){
    .hero__content,.workspace{grid-template-columns:1fr}
    .detail-card{position:relative;top:auto;min-height:auto}
    .detail-empty{min-height:400px}
    .cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
    .topbar{flex-direction:column;align-items:flex-start;gap:12px}
    .hero__panel{grid-template-columns:1fr}
    h1{font-size:56px}
    .section{padding:56px 0}
    .detail-header h3{font-size:42px}
    .campaign h4{font-size:28px}
}
@media(max-width:560px){
    .map-card{padding:12px}
    .cards-grid{grid-template-columns:1fr}
    .filter{padding:9px 12px;font-size:12px}
    .dept-pin{width:16px;height:16px}
    .dept-pin span{font-size:11px;padding:6px 8px}
}