:root {
--deep-blue:#0E2A3A;
--slate:#2F3E46;
--charcoal:#1C1F23;
--soft-gray:#E6E8EA;
--copper:#B87333;
--white:#ffffff;
--max-width:1100px;
--background:var(--soft-gray);
--background-elevated:var(--white);
--background-cta:var(--deep-blue);
--text-primary:var(--charcoal);
--text-secondary:var(--slate);
--heading:var(--deep-blue);
--border:rgba(0,0,0,.08);
--card-border:rgba(14,42,58,.08);
--button-text:var(--white);
--toggle-background:rgba(14,42,58,.06);
--toggle-border:rgba(14,42,58,.14);
--toggle-text:var(--deep-blue);
}

:root[data-theme='dark'] {
--background:#08141c;
--background-elevated:#10222e;
--background-cta:#061018;
--text-primary:#EAF0F4;
--text-secondary:#B8C6CF;
--heading:#F5F8FA;
--border:rgba(255,255,255,.12);
--card-border:rgba(255,255,255,.06);
--button-text:var(--white);
--toggle-background:rgba(255,255,255,.06);
--toggle-border:rgba(255,255,255,.16);
--toggle-text:#F5F8FA;
}

html {
color-scheme: light;
}

html[data-theme='dark'] {
color-scheme: dark;
}

body{
margin:0;
font-family:Inter,sans-serif;
background:var(--background);
color:var(--text-primary);
line-height:1.6;
transition:background-color .25s ease,color .25s ease;
}

.container{
width:min(92%,var(--max-width));
margin:auto;
}

header{
background:var(--background);
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:10;
backdrop-filter:saturate(140%) blur(10px);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
}

.brand{
font-weight:600;
font-size:20px;
color:var(--heading);
}

nav{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 12px;
}

nav a{
text-decoration:none;
color:var(--text-secondary);
font-size:14px;
}

nav a:hover{
color:var(--heading);
}

.theme-toggle {
appearance:none;
border:1px solid var(--toggle-border);
background:var(--toggle-background);
color:var(--toggle-text);
padding:10px 14px;
border-radius:999px;
font:inherit;
font-size:14px;
font-weight:500;
display:inline-flex;
align-items:center;
gap:8px;
cursor:pointer;
transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}

.theme-toggle:hover{
transform:translateY(-1px);
}

.theme-toggle-icon{
font-size:16px;
line-height:1;
}

a:focus-visible,
button:focus-visible{
outline:3px solid var(--copper);
outline-offset:3px;
border-radius:8px;
}

.btn{
display:inline-block;
padding:12px 22px;
border-radius:28px;
font-weight:500;
text-decoration:none;
cursor:pointer;
}

.btn-primary{
background:var(--deep-blue);
color:var(--button-text);
}

.btn-primary:hover{
background:#16394d;
}

.hero{
padding:90px 0 70px 0;
}

h1{
font-size:52px;
line-height:1.05;
margin-bottom:20px;
color:var(--heading);
}

.hero p{
font-size:18px;
color:var(--text-secondary);
max-width:600px;
margin-bottom:30px;
}

.hero-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:60px;
align-items:center;
}

.card{
background:var(--background-elevated);
padding:26px;
border-radius:14px;
border:1px solid var(--card-border);
box-shadow:0 12px 30px rgba(8,20,28,.08);
transition:background-color .25s ease,border-color .25s ease;
}

.trust-note{
margin-top:18px;
padding-top:18px;
border-top:1px solid var(--card-border);
color:var(--text-secondary);
font-size:15px;
}

.trust-note{
margin-top:18px;
padding-top:18px;
border-top:1px solid rgba(14,42,58,.12);
color:var(--slate);
font-size:15px;
}

section{
padding:70px 0;
}

h2{
font-size:34px;
color:var(--heading);
margin-bottom:10px;
}

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

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

.step{
background:var(--background-elevated);
padding:26px;
border-radius:14px;
border:1px solid var(--card-border);
box-shadow:0 12px 30px rgba(8,20,28,.08);
transition:background-color .25s ease,border-color .25s ease;
}

.process{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.cta{
background:var(--background-cta);
color:var(--button-text);
padding:70px 0;
transition:background-color .25s ease;
}

.cta h2{
color:var(--button-text);
}

footer{
padding:40px 0;
font-size:14px;
color:var(--text-secondary);
border-top:1px solid var(--border);
margin-top:60px;
}

@media(max-width:900px){

.hero-grid,
.grid-3,
.split,
.process{
grid-template-columns:1fr;
}

.header-inner{
flex-direction:column;
align-items:flex-start;
gap:16px;
}

h1{
font-size:40px;
}

}