:root{
--bg:#f8fafc;
--surface:#ffffff;
--surface-alt:#f1f5f9;
--text:#0f172a;
--muted:#475569;
--line:#e2e8f0;
--primary:#0f172a;
--shadow-soft:0 16px 45px rgba(15,23,42,.08);
--shadow-card:0 22px 60px rgba(15,23,42,.08);
--radius-xl:28px;
--radius-lg:22px;
--container:1240px;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
font-family:"Inter",system-ui,sans-serif;
text-rendering:optimizeLegibility;
}

a{
text-decoration:none;
color:inherit;
}

button{
cursor:pointer;
border:none;
background:none;
font:inherit;
}

.container{
width:min(var(--container),calc(100% - 32px));
margin:auto;
}

.skip-link{
position:absolute;
left:-9999px;
}

.skip-link:focus{
left:16px;
top:16px;
padding:10px 14px;
background:#fff;
border-radius:12px;
z-index:999;
box-shadow:var(--shadow-soft);
}


/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:1200;
background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(226,232,240,.92);
}

.nav-shell{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:20px;
min-height:80px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand-mark{
width:46px;
height:46px;
border-radius:16px;
display:grid;
place-items:center;
background:var(--primary);
color:#fff;
font-family:"Manrope";
font-weight:800;
}

.brand-copy{
display:flex;
flex-direction:column;
gap:2px;
}

.brand-copy strong{
font-family:"Manrope";
font-size:1.05rem;
font-weight:800;
}

.brand-copy small{
font-size:.8rem;
color:var(--muted);
}

.desktop-nav{
display:flex;
justify-content:center;
gap:24px;
}

.desktop-nav a{
font-weight:700;
color:var(--muted);
font-size:.95rem;
}

.desktop-nav a:hover{
color:var(--text);
}

.nav-actions{
display:flex;
align-items:center;
gap:12px;
}


/* BUTTONS */

.primary-btn,
.ghost-btn,
.mobile-switch{
min-height:48px;
padding:0 18px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:800;
transition:.2s;
}

.primary-btn{
background:var(--primary);
color:#fff;
box-shadow:var(--shadow-soft);
}

.ghost-btn,
.mobile-switch{
background:#fff;
border:1px solid var(--line);
}

.primary-btn:hover,
.ghost-btn:hover{
transform:translateY(-1px);
}

.menu-btn{
display:none;
width:48px;
height:48px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
flex-direction:column;
justify-content:center;
gap:4px;
}

.menu-btn span{
display:block;
width:18px;
height:2px;
background:var(--text);
}

.mobile-menu{
display:none;
padding:0 16px 16px;
background:#fff;
border-top:1px solid var(--line);
}

.mobile-menu.is-open{
display:grid;
gap:10px;
}

.mobile-menu a{
min-height:48px;
padding:12px 14px;
border-radius:16px;
border:1px solid var(--line);
}


/* TYPO */

h1,h2,h3,.footer-brand{
font-family:"Manrope";
font-weight:800;
letter-spacing:-.045em;
color:var(--text);
}


/* HERO */

.hero-section{
padding:60px 0 40px;
}

.hero-shell{
max-width:900px;
}

.eyebrow,
.section-kicker{
display:inline-flex;
align-items:center;
padding:0 14px;
min-height:34px;
border-radius:999px;
background:#fff;
border:1px solid var(--line);
font-size:.82rem;
font-weight:800;
}

.hero-shell h1{
margin-top:18px;
font-size:clamp(3.4rem,4.8vw,4.8rem);
line-height:1.06;
}

.hero-shell h1 br,
.section-head h2 br{
display:none!important;
}

.hero-text{
margin-top:22px;
max-width:760px;
line-height:1.75;
font-size:1.04rem;
color:var(--muted);
}

.hero-cta-row{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:24px;
}


/* SECTIONS */

.section{
padding:78px 0;
}

.section-alt{
background:linear-gradient(180deg,#fff,#f8fafc);
}

.section-head{
margin-bottom:34px;
}

.section-head h2{
margin-top:16px;
font-size:clamp(3.6rem,4vw,4.2rem);
line-height:1.12;
}


/* LEGAL */

.legal-shell{
display:grid;
gap:18px;
}

.legal-card,
.cta-box{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);
padding:28px;
}

.legal-card h3{
font-size:1.45rem;
margin-bottom:14px;
line-height:1.12;
}

.legal-card p{
color:var(--muted);
line-height:1.82;
margin-bottom:14px;
}

.legal-list{
padding-left:18px;
color:var(--muted);
line-height:1.9;
}

.legal-list li{
margin-bottom:8px;
}

.cta-box{
display:grid;
grid-template-columns:1fr auto;
gap:18px;
align-items:center;
}

.cta-box h2{
margin-top:16px;
font-size:clamp(2.5rem,3vw,3.2rem);
line-height:1.08;
}

.cta-box p{
margin-top:14px;
line-height:1.75;
color:var(--muted);
}


/* FOOTER */

.site-footer{
background:#fff;
border-top:1px solid var(--line);
padding-top:40px;
}

.footer-grid{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
gap:40px;
}

.footer-brand{
font-size:1.3rem;
margin-bottom:12px;
}

.footer-text{
line-height:1.75;
color:var(--muted);
}

.footer-grid h3{
margin-bottom:14px;
font-size:.92rem;
text-transform:uppercase;
}

.footer-grid a{
display:block;
margin-bottom:10px;
color:var(--muted);
}

.footer-grid a:hover{
color:var(--text);
}

.footer-bottom{
display:flex;
justify-content:space-between;
gap:14px;
padding:18px 0 24px;
margin-top:24px;
border-top:1px solid var(--line);
font-size:.92rem;
color:var(--muted);
}


/* RESPONSIVE */

@media(max-width:1100px){

.footer-grid,
.cta-box{
grid-template-columns:1fr;
}

.section-head h2{
font-size:clamp(3rem,7vw,4rem);
}

}

@media(max-width:860px){

.desktop-nav,
.nav-actions .ghost-btn,
.nav-actions .primary-btn{
display:none;
}

.menu-btn{
display:inline-flex;
}

.brand-copy small{
display:none;
}

}

@media(max-width:640px){

.container{
width:min(var(--container),calc(100% - 24px));
}

.hero-shell h1{
font-size:clamp(2.5rem,11vw,3.3rem);
}

.section-head h2{
font-size:clamp(2.15rem,9vw,2.8rem);
}

.hero-cta-row{
flex-direction:column;
}

.hero-cta-row .primary-btn,
.hero-cta-row .ghost-btn{
width:100%;
}

.legal-card,
.cta-box{
padding:22px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
}

}