*{
box-sizing:border-box;
}

:root{

--ink:#102b28;
--ink2:#173b36;
--gold:#c9a451;
--gold2:#e2c77c;
--paper:#f5f7f5;
--white:#ffffff;
--line:#dfe7e3;
--muted:#71807b;

}

html{
scroll-behavior:smooth;
}

body{

margin:0;

font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

background:var(--paper);
color:var(--ink);

}

.demo-banner{

background:#111d1b;
color:#d9e2de;

font-size:12px;
padding:8px 5%;

display:flex;
gap:12px;
align-items:center;

}

.demo-banner span{

background:#c9a451;
color:#102b28;

padding:3px 8px;

border-radius:20px;

font-weight:800;

font-size:10px;

}

.topbar{

height:78px;

background:white;

border-bottom:1px solid var(--line);

display:flex;

align-items:center;

padding:0 5%;

gap:35px;

position:sticky;

top:0;

z-index:1000;

}

.brand{

display:flex;

align-items:center;

gap:12px;

margin-right:auto;

}

.brand-mark{

width:38px;
height:38px;

background:var(--ink);

color:var(--gold2);

display:flex;

align-items:center;
justify-content:center;

font-family:Georgia,serif;

font-size:22px;

font-weight:bold;

border-radius:10px;

}

.brand strong{

display:block;

font-size:14px;

letter-spacing:2px;

}

.brand small{

display:block;

font-size:8px;

letter-spacing:1.5px;

color:var(--muted);

margin-top:3px;

}

nav{

display:flex;

gap:25px;

}

nav a{

text-decoration:none;

color:var(--ink);

font-size:13px;

font-weight:600;

}

.nav-button{

background:var(--ink);

color:white;

padding:11px 17px;

border-radius:8px;

text-decoration:none;

font-size:12px;

font-weight:bold;

}

.hero{

background:

radial-gradient(
circle at 80% 30%,
#285d55 0,
transparent 35%
),

linear-gradient(
135deg,
#0c2623,
#173f39
);

color:white;

padding:90px 8%;

display:grid;

grid-template-columns:1.5fr .6fr;

gap:70px;

min-height:570px;

align-items:center;

}

.eyebrow{

font-size:10px;

letter-spacing:2.5px;

font-weight:800;

color:var(--gold);

margin-bottom:17px;

}

.hero h1{

font-family:
Georgia,
serif;

font-size:
clamp(42px,5vw,72px);

font-weight:500;

line-height:1.02;

max-width:850px;

margin:0 0 25px;

letter-spacing:-2px;

}

.hero p{

max-width:700px;

font-size:17px;

line-height:1.8;

color:#cbd9d5;

}

.hero p strong{

color:white;

}

.hero-actions{

margin-top:30px;

display:flex;

gap:10px;

}

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:13px 20px;

border-radius:8px;

text-decoration:none;

border:none;

font-weight:700;

cursor:pointer;

font-size:12px;

}

.button.primary{

background:var(--gold);

color:var(--ink);

}

.button.secondary{

border:1px solid #ffffff40;

color:white;

background:#ffffff0d;

}

.button.full{
width:100%;
}

.hero-panel{

border:1px solid #ffffff22;

background:#ffffff09;

backdrop-filter:blur(10px);

padding:35px;

border-radius:18px;

}

.panel-label{

font-size:10px;

letter-spacing:2px;

color:#9fb2ad;

}

.national-number{

font-family:Georgia,serif;

font-size:100px;

line-height:1;

color:var(--gold2);

margin-top:20px;

}

.national-caption{

color:#d3dfdb;

line-height:1.5;

}

.mini-status{

border-top:1px solid #ffffff20;

margin-top:30px;

padding-top:20px;

}

.mini-status div{

display:flex;

align-items:center;

gap:8px;

font-size:12px;

margin:13px 0;

color:#c8d5d1;

}

.mini-status span{

width:7px;
height:7px;

border-radius:50%;

background:var(--gold);

}

.mini-status strong{

margin-left:auto;

color:white;

}

.stats{

max-width:1200px;

margin:-45px auto 0;

position:relative;

z-index:5;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:1px;

background:var(--line);

border:1px solid var(--line);

border-radius:15px;

overflow:hidden;

}

.stat-card{

background:white;

padding:25px;

}

.stat-card span{

font-size:9px;

letter-spacing:1.5px;

font-weight:800;

color:var(--muted);

}

.stat-card strong{

display:block;

font-family:Georgia,serif;

font-size:36px;

margin:7px 0;

}

.stat-card small{

color:var(--muted);

font-size:11px;

}

.stat-card.danger strong{

color:#b25445;

}

.section{

max-width:1200px;

margin:0 auto;

padding:105px 20px;

}

.section-heading{

display:flex;

justify-content:space-between;

align-items:end;

gap:30px;

margin-bottom:35px;

}

.section h2{

font-family:Georgia,serif;

font-size:44px;

font-weight:500;

letter-spacing:-1px;

margin:0 0 12px;

}

.section-heading p{

color:var(--muted);

margin:0;

}

.map-legend{

display:flex;

gap:15px;

font-size:10px;

color:var(--muted);

}

.map-legend div{

display:flex;

gap:5px;

align-items:center;

}

.dot{

width:8px;
height:8px;

border-radius:50%;

display:inline-block;

}

.dot.critical{
background:#8e3030;
}

.dot.high{
background:#c4772d;
}

.dot.moderate{
background:#b6a033;
}

.dot.low{
background:#4e806f;
}

.observatory{

display:grid;

grid-template-columns:1fr 360px;

background:white;

border:1px solid var(--line);

border-radius:18px;

overflow:hidden;

min-height:650px;

box-shadow:
0 20px 50px #102b2810;

}

.map-wrapper{

position:relative;

min-width:0;

}

#rdc-map{

width:100%;
height:650px;

background:#eaf0ed;

}

.map-toolbar{

position:absolute;

top:18px;
left:18px;

z-index:500;

display:flex;

background:white;

padding:5px;

border-radius:9px;

box-shadow:0 5px 20px #0002;

}

.filter{

border:0;

background:white;

padding:9px 12px;

border-radius:6px;

font-size:10px;

font-weight:700;

cursor:pointer;

color:var(--muted);

}

.filter.active{

background:var(--ink);

color:white;

}

.province-panel{

border-left:1px solid var(--line);

background:white;

padding:28px;

overflow-y:auto;

}

.empty-panel{

height:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

color:var(--muted);

}

.empty-icon{

width:55px;
height:55px;

border:1px solid var(--line);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

margin-bottom:20px;

color:var(--gold);

}

.province-title{

font-family:Georgia,serif;

font-size:32px;

margin:5px 0;

}

.province-capital{

color:var(--muted);

font-size:12px;

}

.risk-box{

margin:25px 0;

padding:17px;

border-radius:10px;

background:#f6f8f7;

}

.risk-label{

font-size:9px;

letter-spacing:1.5px;

font-weight:bold;

color:var(--muted);

}

.risk-score{

font-size:38px;

font-family:Georgia,serif;

margin-top:5px;

}

.risk-line{

height:5px;

background:#e1e7e4;

border-radius:20px;

margin-top:10px;

overflow:hidden;

}

.risk-line span{

display:block;

height:100%;

background:var(--gold);

}

.profile-stats{

display:grid;

grid-template-columns:1fr 1fr;

gap:1px;

background:var(--line);

border:1px solid var(--line);

margin:20px 0;

}

.profile-stat{

background:white;

padding:13px;

}

.profile-stat strong{

font-family:Georgia,serif;

font-size:24px;

display:block;

}

.profile-stat small{

font-size:9px;

color:var(--muted);

}

.panel-report{

border-top:1px solid var(--line);

padding:15px 0;

}

.panel-report h4{

margin:7px 0;

font-size:13px;

}

.panel-report p{

font-size:11px;

line-height:1.6;

color:var(--muted);

margin:0;

}

.report-list{

display:flex;

flex-direction:column;

gap:10px;

}

.report-card{

background:white;

border:1px solid var(--line);

border-radius:13px;

padding:20px;

display:grid;

grid-template-columns:45px 1fr auto;

gap:18px;

align-items:center;

transition:.2s;

}

.report-card:hover{

border-color:#c9a45180;

transform:translateY(-2px);

}

.report-icon{

width:40px;
height:40px;

background:#f7eee0;

color:#a76f21;

border-radius:50%;

display:flex;

align-items:center;
justify-content:center;

font-weight:bold;

}

.report-top{

display:flex;

gap:10px;

align-items:center;

}

.reference{

font-size:9px;

letter-spacing:1px;

font-weight:bold;

color:var(--muted);

}

.status{

font-size:9px;

padding:4px 7px;

background:#eef5f1;

color:#39705d;

border-radius:20px;

}

.report-card h3{

font-family:Georgia,serif;

font-size:19px;

font-weight:500;

margin:8px 0;

}

.report-card p{

color:var(--muted);

font-size:12px;

margin:0 0 10px;

}

.report-meta{

display:flex;

gap:15px;

flex-wrap:wrap;

font-size:10px;

color:var(--muted);

}

.open-report{

border:1px solid var(--line);

background:white;

padding:9px 12px;

border-radius:7px;

cursor:pointer;

font-size:10px;

font-weight:bold;

}

.split-section{

display:grid;

grid-template-columns:1fr 400px;

gap:100px;

align-items:center;

}

.split-section h2{

max-width:650px;

}

.split-section > div > p{

color:var(--muted);

line-height:1.8;

max-width:650px;

}

.process{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:8px;

margin-top:30px;

}

.process div{

border-top:2px solid var(--gold);

padding-top:10px;

}

.process strong{

font-family:Georgia,serif;

display:block;

font-size:18px;

}

.process span{

font-size:10px;

color:var(--muted);

}

.signal-card{

background:white;

padding:30px;

border:1px solid var(--line);

border-radius:15px;

box-shadow:0 20px 50px #102b2810;

}

.signal-header{

font-size:10px;

font-weight:bold;

letter-spacing:1.5px;

margin-bottom:25px;

display:flex;

gap:8px;

align-items:center;

}

.signal-pulse{

width:8px;
height:8px;

border-radius:50%;

background:#c35d4e;

box-shadow:0 0 0 5px #c35d4e18;

}

.signal-card label{

display:block;

font-size:10px;

font-weight:bold;

margin:16px 0 7px;

}

.signal-card select,
.signal-card textarea{

width:100%;

border:1px solid var(--line);

padding:11px;

border-radius:7px;

font:inherit;

font-size:11px;

background:white;

}

.signal-card textarea{

height:100px;

resize:none;

}

.signal-card small{

display:block;

text-align:center;

font-size:9px;

color:var(--muted);

margin-top:12px;

}

.academy-section{

border-top:1px solid var(--line);

}

.academy-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:13px;

}

.course-card{

background:white;

border:1px solid var(--line);

border-radius:14px;

padding:25px;

min-height:330px;

display:flex;

flex-direction:column;

}

.course-number{

font-family:Georgia,serif;

color:#ccd4d1;

font-size:26px;

}

.course-category{

font-size:9px;

color:var(--gold);

font-weight:bold;

letter-spacing:1.5px;

margin-top:20px;

}

.course-card h3{

font-family:Georgia,serif;

font-size:23px;

font-weight:500;

line-height:1.2;

}

.course-card p{

font-size:11px;

color:var(--muted);

line-height:1.7;

}

.course-bottom{

display:flex;

justify-content:space-between;

font-size:9px;

color:var(--muted);

margin-top:auto;

border-top:1px solid var(--line);

padding-top:13px;

}

.course-link{

color:var(--ink);

text-decoration:none;

font-weight:bold;

font-size:10px;

margin-top:20px;

}

.learning-flow{

margin-top:20px;

background:var(--ink);

color:white;

border-radius:15px;

padding:28px;

display:grid;

grid-template-columns:1.5fr repeat(4,1fr);

gap:20px;

align-items:center;

}

.learning-intro p{

color:#aebfba;

font-size:11px;

line-height:1.6;

}

.learning-step{

border-left:1px solid #ffffff22;

padding-left:20px;

}

.learning-step span{

color:var(--gold);

font-family:Georgia,serif;

font-size:20px;

}

.learning-step strong{

display:block;

font-size:12px;

margin:5px 0;

}

.learning-step small{

font-size:9px;

color:#91a59f;

}

.impact-section{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:80px;

}

.impact-content h2{

font-size:50px;

max-width:700px;

}

.impact-content > p{

max-width:700px;

color:var(--muted);

line-height:1.8;

}

.impact-points{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:35px;

}

.impact-points div{

border-top:1px solid var(--line);

padding-top:15px;

}

.impact-points strong{

display:block;

font-family:Georgia,serif;

font-size:18px;

}

.impact-points span{

font-size:10px;

color:var(--muted);

}

.impact-quote{

background:var(--ink);

color:white;

padding:50px;

border-radius:15px;

display:flex;

flex-direction:column;

justify-content:center;

}

.quote-mark{

font-family:Georgia,serif;

font-size:70px;

color:var(--gold);

line-height:.5;

}

.impact-quote p{

font-family:Georgia,serif;

font-size:28px;

line-height:1.3;

}

.impact-quote span{

font-size:9px;

color:#a7bbb5;

}

footer{

background:var(--ink);

color:white;

padding:30px 5%;

display:flex;

justify-content:space-between;

align-items:center;

font-size:10px;

}

footer .brand{
margin:0;
}

.modal{

position:fixed;

inset:0;

z-index:3000;

display:none;

}

.modal.open{

display:flex;

align-items:center;

justify-content:center;

}

.modal-backdrop{

position:absolute;

inset:0;

background:#061613cc;

backdrop-filter:blur(5px);

}

.modal-box{

position:relative;

z-index:2;

width:min(800px,92vw);

max-height:90vh;

overflow:auto;

background:white;

border-radius:17px;

padding:35px;

}

.modal-close{

position:absolute;

right:18px;
top:18px;

border:0;

background:#f0f3f1;

width:32px;
height:32px;

border-radius:50%;

font-size:20px;

cursor:pointer;

}

.modal-reference{

font-size:9px;

letter-spacing:2px;

color:var(--gold);

font-weight:bold;

}

.modal-title{

font-family:Georgia,serif;

font-size:35px;

font-weight:500;

margin:10px 0;

}

.modal-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

margin:25px 0;

}

.modal-stat{

background:#f6f8f7;

padding:15px;

border-radius:9px;

}

.modal-stat strong{

display:block;

font-family:Georgia,serif;

font-size:24px;

}

.modal-stat small{

font-size:9px;

color:var(--muted);

}

.legal-box{

background:#102b28;

color:white;

padding:20px;

border-radius:10px;

margin-top:20px;

}

.legal-box strong{

color:var(--gold2);

display:block;

margin-bottom:8px;

}

.leaflet-popup-content{

font-family:Arial,sans-serif;

font-size:12px;

}

.leaflet-popup-content-wrapper{

border-radius:10px;

}

@media(max-width:1000px){

.hero{

grid-template-columns:1fr;

padding:65px 6%;

}

.stats{

margin:15px;

}

.observatory{

grid-template-columns:1fr;

}

.province-panel{

border-left:0;

border-top:1px solid var(--line);

min-height:300px;

}

.academy-grid{

grid-template-columns:1fr 1fr;

}

.learning-flow{

grid-template-columns:1fr 1fr;

}

.split-section,
.impact-section{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:700px){

.topbar{

height:auto;

padding:15px;

flex-wrap:wrap;

gap:15px;

}

nav{

order:3;

width:100%;

overflow:auto;

padding-bottom:5px;

}

.nav-button{

display:none;

}

.hero{

padding:50px 20px;

}

.hero h1{

font-size:43px;

}

.stats{

grid-template-columns:1fr 1fr;

margin:10px;

}

.section{

padding:70px 15px;

}

.section h2,
.impact-content h2{

font-size:35px;

}

.section-heading{

display:block;

}

.map-legend{

margin-top:20px;

flex-wrap:wrap;

}

#rdc-map{

height:520px;

}

.map-toolbar{

max-width:calc(100% - 30px);

overflow:auto;

}

.report-card{

grid-template-columns:35px 1fr;

}

.open-report{

grid-column:2;

width:max-content;

}

.academy-grid{

grid-template-columns:1fr;

}

.process{

grid-template-columns:1fr 1fr;

}

.learning-flow{

grid-template-columns:1fr;

}

.impact-points{

grid-template-columns:1fr;

}

footer{

display:block;

}

footer > div:last-child{

margin-top:20px;

}

}