:root {

--bg-primary: #07111f;
--bg-secondary: #0d1828;
--bg-card: #111f33;

--text-primary: #ffffff;
--text-secondary: #b7c2d0;
--text-muted: #8a96a8;

--accent: #4f8cff;
--accent-hover: #3d79ea;

--border: #1e314f;

--container: 1200px;

--shadow:
0 10px 30px rgba(0,0,0,0.25);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg-primary);
color:var(--text-primary);
line-height:1.7;
-webkit-font-smoothing:antialiased;
}

a{
text-decoration:none;
color:inherit;
}

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

/* =========================
   CONTAINERS
========================= */

.container{
width:90%;
max-width:var(--container);
margin:0 auto;
}

.narrow{
max-width:800px;
margin:0 auto;
}

/* =========================
   TYPOGRAPHY FIX
========================= */

h1,h2,h3{
line-height:1.2;
font-weight:700;
}

h1{
font-size:4rem;
margin-bottom:24px;
max-width:900px;
}

h2{
font-size:2.5rem;
margin-bottom:20px;
text-align:center;
}

h3{
font-size:1.25rem;
margin-bottom:15px;
}

p{
color:var(--text-secondary);
}

.section-intro{
max-width:850px;
margin:0 auto 50px auto;
text-align:center;
font-size:1.1rem;
}

/* =========================
   SECTIONS
========================= */

.section{
padding:100px 0;
}

.dark{
background:var(--bg-secondary);
}

/* =========================
   HEADER
========================= */

.header{
position:sticky;
top:0;
z-index:999;
backdrop-filter:blur(12px);
background:rgba(7,17,31,0.92);
border-bottom:1px solid var(--border);
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 0;
}

.logo{
font-size:1.3rem;
font-weight:800;
letter-spacing:2px;
}

.brand-subtitle{
font-size:.8rem;
color:var(--text-muted);
margin-top:3px;
}

.navigation{
display:flex;
gap:30px;
}

.navigation a{
font-size:.95rem;
color:var(--text-secondary);
transition:.3s;
}

.navigation a:hover{
color:var(--text-primary);
}

/* =========================
   HERO
========================= */

.hero{
padding:140px 0 120px;
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
width:700px;
height:700px;
background:radial-gradient(circle,rgba(79,140,255,.18),transparent);
top:-250px;
right:-250px;
pointer-events:none;
}

.hero-content{
position:relative;
z-index:2;
}

.hero-tag{
display:inline-block;
padding:8px 16px;
border:1px solid rgba(79,140,255,.3);
background:rgba(79,140,255,.08);
border-radius:50px;
font-size:.9rem;
margin-bottom:25px;
color:#9fc0ff;
}

.hero-description{
max-width:780px;
font-size:1.2rem;
margin-bottom:35px;
}

/* =========================
   BUTTON FIX (IMPORTANT)
========================= */

.hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:50px;
}

.btn-primary,
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
white-space:nowrap;
}

.btn-primary{
background:var(--accent);
padding:15px 28px;
border-radius:8px;
font-weight:600;
transition:.3s;
}

.btn-primary:hover{
background:var(--accent-hover);
transform:translateY(-2px);
}

.btn-secondary{
padding:15px 28px;
border:1px solid var(--border);
border-radius:8px;
transition:.3s;
}

.btn-secondary:hover{
background:rgba(255,255,255,.04);
}

/* =========================
   TRUST BAR
========================= */

.trust-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:30px;
}

.trust-item{
background:rgba(255,255,255,.03);
border:1px solid var(--border);
padding:20px;
border-radius:12px;
}

.trust-item strong{
display:block;
font-size:1.4rem;
margin-bottom:5px;
}

.trust-item span{
color:var(--text-muted);
font-size:.9rem;
}

/* =========================
   GRIDS (FIX CONSISTENCY)
========================= */

.card-grid,
.service-grid,
.metrics-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:50px;
}

.industry-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:50px;
}

/* =========================
   CARDS
========================= */

.card,
.service-card,
.metric-card{
background:var(--bg-card);
padding:30px;
border:1px solid var(--border);
border-radius:16px;
transition:.3s;
}

.card:hover,
.service-card:hover,
.metric-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow);
}

/* =========================
   SERVICE DETAILS
========================= */

.service-subtitle{
font-weight:600;
color:#9fc0ff;
margin-bottom:15px;
}

.service-card ul{
margin-top:20px;
padding-left:18px;
}

.service-card li{
margin-bottom:10px;
color:var(--text-secondary);
}

/* =========================
   PROCESS
========================= */

.process-step{
background:var(--bg-card);
padding:30px;
border-radius:16px;
border:1px solid var(--border);
}

.step-number{
font-size:2rem;
font-weight:800;
color:var(--accent);
margin-bottom:15px;
}

/* =========================
   METRICS
========================= */

.metric-card h3{
font-size:2rem;
color:var(--accent);
margin-bottom:10px;
}

/* =========================
   FAQ
========================= */

.faq-item{
padding:25px 0;
border-bottom:1px solid var(--border);
}

.faq-item h3{
margin-bottom:10px;
}

/* =========================
   CONTACT
========================= */

.contact-section{
background:linear-gradient(
180deg,
var(--bg-primary),
#091626
);
}

form{
display:flex;
flex-direction:column;
gap:16px;
margin-top:35px;
}

input,
textarea{
padding:16px;
background:#0d1a2b;
border:1px solid var(--border);
border-radius:10px;
color:white;
font-family:inherit;
font-size:1rem;
width:100%;
}

input:focus,
textarea:focus{
outline:none;
border-color:var(--accent);
}

/* =========================
   BUTTON GLOBAL FIX
========================= */

button{
background:var(--accent);
color:white;
border:none;
padding:16px;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
background:var(--accent-hover);
}

/* =========================
   FOOTER
========================= */

footer{
padding:60px 0;
border-top:1px solid var(--border);
text-align:center;
}

footer p{
margin-bottom:10px;
color:var(--text-muted);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1100px){

.card-grid,
.service-grid,
.metrics-grid,
.process-grid,
.industry-grid{
grid-template-columns:repeat(2,1fr);
}

.trust-bar{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

.navigation{
display:none;
}

.section{
padding:70px 0;
}

h1{
font-size:2.5rem;
}

h2{
font-size:2rem;
}

.card-grid,
.service-grid,
.industry-grid,
.metrics-grid,
.process-grid,
.trust-bar{
grid-template-columns:1fr;
}

.hero{
padding:90px 0;
}

.hero-buttons{
flex-direction:column;
}

.btn-primary,
.btn-secondary{
width:100%;
}

}