:root{
--blue:#1E6FD9;
--blue-dark:#1558B0;
--teal:#2BB6A8;
--navy:#0C2340;
--sand:#F5F7FA;
--sand-md:#E9EFF7;
--text:#1F2937;
--muted:#4B5563;
--orange:#F59E0B;
--orange-dark:#D97706;
--white:#fff;
--border:#D1DCE8;
--max:1180px;
--pad:28px;
--radius:18px
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
color:var(--text);
background:#fff;
line-height:1.7;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility
}

img{
max-width:100%;
height:auto;
display:block
}

a{
color:var(--blue);
text-decoration:none
}

a:hover{text-decoration:underline}

.wrap{
width:100%;
max-width:var(--max);
margin:0 auto;
padding:0 var(--pad)
}

.wrap.narrow{
max-width:860px;
}

/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:20;
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--border)
}

.header-inner{
min-height:70px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px
}

.logo{
font-size:24px;
font-weight:900;
color:var(--blue);
letter-spacing:-.03em;
white-space:nowrap
}

.logo span{color:var(--teal)}
.logo:hover{text-decoration:none}

.nav{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center
}

.nav a{
font-size:14px;
font-weight:700;
color:var(--text);
white-space:nowrap
}

.nav a:hover{
color:var(--blue);
text-decoration:none
}

/* HERO */

.hero{
position:relative;
background:linear-gradient(135deg,var(--navy),#1B4E88);
color:#fff;
padding:110px 0 84px;
overflow:hidden
}

.hero::before{
content:"";
position:absolute;
inset:auto -120px -120px auto;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(circle,rgba(43,182,168,.22),transparent 70%)
}

.hero h1{
font-size:clamp(38px,7vw,72px);
line-height:1.03;
margin-bottom:18px;
max-width:850px
}

.hero p{
max-width:760px;
font-size:18px;
color:rgba(255,255,255,.84);
margin-bottom:28px
}

/* PAGE HERO */

.page-hero{
background:var(--sand);
padding:56px 0;
border-bottom:1px solid var(--border)
}

.page-hero p{
max-width:760px;
color:var(--muted)
}

/* IMAGE CONTROL */

.page-hero img,
section img{
width:100%;
height:auto;
max-width:100%;
border-radius:18px
}

.page-hero img{
margin:24px 0;
max-height:520px;
object-fit:cover
}

.card img{
width:100%;
height:220px;
object-fit:cover;
border-radius:14px
}

/* BUTTONS */

.btns,
.button-row{
display:flex;
flex-wrap:wrap;
gap:12px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:10px;
font-weight:700;
border:0;
min-height:48px;
text-decoration:none;
transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease
}

.btn:hover{
text-decoration:none;
transform:translateY(-1px)
}

.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);text-decoration:none}

.btn-secondary{background:var(--teal);color:#fff}
.btn-secondary:hover{background:#1E9589;text-decoration:none}

.btn-ghost,
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-orange){
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.28);
color:#fff
}

.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-dark);text-decoration:none}

/* TYPO + LAYOUT */

section{padding:76px 0}
h1,h2,h3{line-height:1.15}

h2{
font-size:clamp(28px,4vw,42px);
margin-bottom:14px
}

h3{
font-size:22px;
margin-bottom:10px
}

p{margin-bottom:16px}

.lead{
max-width:760px;
color:var(--muted);
margin-bottom:30px
}

.eyebrow{
display:inline-block;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px;
font-weight:800;
color:var(--teal);
margin-bottom:10px
}

.breadcrumbs{
font-size:13px;
color:var(--muted);
margin:18px 0
}

.hero-note{
margin-top:18px;
color:rgba(255,255,255,.82);
font-size:14px
}

/* GRID */

.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:24px;
box-shadow:0 2px 10px rgba(0,0,0,.03)
}

.card h3{
margin-bottom:10px;
font-size:20px
}

.card p{color:var(--muted)}
.card ul{margin-top:10px;padding-left:18px}
.card li{margin:6px 0}

.cluster-link{
display:inline-block;
margin-top:12px;
font-weight:700
}

.link-list{
list-style:none;
padding:0;
margin:0
}

.link-list li{
margin:8px 0
}

/* LISTS */

.list-clean{
list-style:none;
margin:18px 0;
padding:0
}

.list-clean li{
margin:10px 0;
color:var(--text)
}

/* BANDS + DARK SECTIONS */

.band{background:var(--sand)}

.dark,
.cta.hero-card{
background:var(--navy);
color:#fff
}

.dark .lead,
.dark .card p,
.cta.hero-card .lead,
.cta.hero-card p{
color:rgba(255,255,255,.75)
}

.dark .card{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.12)
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin-top:26px
}

.stat{
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:14px;
padding:18px
}

.stat strong{
display:block;
font-size:28px;
line-height:1.1;
color:#7ED8F7
}

.stat span{
font-size:13px;
color:rgba(255,255,255,.8)
}

/* FAQ / NOTE */

.faq details{
border:1px solid var(--border);
border-radius:12px;
padding:14px 16px;
background:#fff
}

.faq details+details{margin-top:12px}
.faq summary{font-weight:700;cursor:pointer}

.note{
background:var(--sand);
border:1px solid var(--border);
padding:14px 16px;
border-radius:12px
}

/* FOOTER */

.footer{
background:var(--navy);
color:rgba(255,255,255,.75);
padding:48px 0 24px
}

.footer-grid{
display:grid;
grid-template-columns:1.8fr 1fr 1fr 1fr;
gap:24px
}

.footer p,
.footer li,
.footer a{
font-size:14px;
color:rgba(255,255,255,.78)
}

.footer a:hover{
color:#fff;
text-decoration:none
}

.footer h4{
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:10px;
color:rgba(255,255,255,.48)
}

.footer ul{list-style:none}

.footer-bottom{
margin-top:26px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
font-size:12px;
color:rgba(255,255,255,.48)
}

/* RESPONSIVE */

@media (max-width:980px){
.grid-4,.grid-3,.grid-2,.stats,.footer-grid{
grid-template-columns:repeat(2,1fr)
}
}

@media (max-width:680px){

:root{
--pad:18px;
--radius:16px
}

/* HEADER */

.site-header{
position:static;
}

.header-inner{
flex-direction:column;
align-items:flex-start;
gap:12px;
padding:12px 0;
min-height:auto
}

/* NAV */

.nav{
display:flex;
gap:12px;
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:6px;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}

.nav::-webkit-scrollbar{
display:none;
}

.nav a{
flex:0 0 auto;
white-space:nowrap;
font-size:13px
}

/* GRID */

.grid-4,
.grid-3,
.grid-2,
.stats,
.footer-grid{
grid-template-columns:1fr
}

/* HERO */

.hero{
padding:48px 0 32px;
min-height:auto;
}

.hero h1{
font-size:clamp(28px, 7vw, 36px);
line-height:1.08;
letter-spacing:-0.02em;
word-break:break-word;
overflow-wrap:anywhere;
}

.hero p,
.lead,
.page-hero p{
font-size:16px
}

.hero p{
color:rgba(255,255,255,.9);
}

/* PAGE HERO */

.page-hero{
padding:36px 0;
}

.page-hero img{
max-height:280px;
object-fit:cover;
}

/* IMAGES */

.card img{
height:180px
}

/* BUTTONS */

.btns,
.button-row{
flex-direction:column;
width:100%
}

.btn{
width:100%;
margin-bottom:4px;
}

/* STATS */

.stat strong{
font-size:24px
}

/* TYPO */

body{
font-size:16px;
}

/* TOUCH UX */

a,
button{
-webkit-tap-highlight-color:transparent;
}

}