:root{
--bg:#f8fafc;
--surface:#ffffff;
--surface-alt:#f1f5f9;
--text:#0f172a;
--muted:#475569;
--line:#e2e8f0;
--primary:#0f172a;
--primary-strong:#020617;
--accent:#2563eb;
--success:#059669;
--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,input,select,textarea{
font:inherit;
}

button{
cursor:pointer;
border:none;
background:none;
}

.container{
width:min(var(--container),calc(100% - 32px));
margin:auto;
}

.skip-link{
position:absolute;
left:-9999px;
}

.skip-link:focus{
left:16px;
top:16px;
background:#fff;
padding:10px 14px;
border-radius:12px;
z-index:999;
box-shadow:var(--shadow-soft);
}


/* HEADER */

.site-header{
position:sticky;
top:0;
z-index:1200;
border-bottom:1px solid rgba(226,232,240,.92);
background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);
}

.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.active,
.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{
border:1px solid var(--line);
background:#fff;
}

.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{
width:18px;
height:2px;
background:var(--text);
display:block;
}

.mobile-menu{
display:none;
padding:0 16px 16px;
border-top:1px solid var(--line);
background:#fff;
}

.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 36px;
}

.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;
color:#334155;
}

.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;
font-size:1.04rem;
line-height:1.75;
color:var(--muted);
max-width:760px;
}

.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;
display:grid;
grid-template-columns:1fr;
}

.section-head h2{
margin-top:16px;
font-size:clamp(3.6rem,4vw,4.2rem);
line-height:1.12;
}

.compact-head p,
.muted-text,
.info-card p,
.usecase-card p,
.footer-text,
.form-message{
color:var(--muted);
line-height:1.75;
}


/* LAYOUT */

.contact-grid{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:22px;
}

.info-column,
.form-column,
.info-cards{
display:grid;
gap:18px;
}

.usecase-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}


/* CARDS */

.info-card,
.form-card,
.usecase-card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-card);
padding:28px;
}

.info-card h3,
.usecase-card h3{
font-size:1.45rem;
line-height:1.15;
margin-bottom:12px;
}

.info-value{
margin-top:14px;
padding:13px 15px;
background:var(--surface-alt);
border-radius:16px;
font-weight:800;
}

.contact-point{
padding:14px 16px;
border-radius:16px;
background:var(--surface-alt);
}


/* FORM */

.field-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}

.field-group{
display:grid;
gap:8px;
margin-bottom:16px;
}

.field-label{
font-weight:800;
}

.field-input,
.field-textarea{
width:100%;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
}

.field-input{
min-height:54px;
padding:0 16px;
}

.field-textarea{
min-height:170px;
padding:14px 16px;
resize:vertical;
}

.field-input:focus,
.field-textarea:focus{
outline:none;
border-color:#cbd5e1;
box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

.form-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
}

.form-message{
margin-top:16px;
padding:14px;
border-radius:16px;
background:var(--surface-alt);
}


/* 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-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){

.contact-grid,
.usecase-grid,
.field-grid,
.footer-grid{
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,
.form-actions{
flex-direction:column;
}

.hero-cta-row .primary-btn,
.hero-cta-row .ghost-btn,
.form-actions .primary-btn,
.form-actions .ghost-btn{
width:100%;
}

.info-card,
.form-card,
.usecase-card{
padding:22px;
}

.footer-bottom{
flex-direction:column;
align-items:flex-start;
}

}