:root { 

--blue:#0a4fff; 

--dark:#0e0e10; 

--light:#f2f2f6; 

--card-bg:#ffffff; 

--radius:18px; 

} 



* { box-sizing:border-box; } 



body { 

margin:0; 

font-family:"Inter", Arial, sans-serif; 

background:var(--light); 

color:var(--dark); 

scroll-behavior:smooth; 

} 



img { 

max-width:100%; 

display:block; 

} 



a { 

color:inherit; 

text-decoration:none; 

} 



/* NAVBAR */ 

.navbar { 

position:fixed; 

top:0; 

left:0; 

right:0; 

height:70px; 

background:#ffffffee; 

backdrop-filter:blur(10px); 

display:flex; 

align-items:center; 

justify-content:space-between; 

padding:0 44px; 

z-index:1000; 

box-shadow:0 4px 16px rgba(0,0,0,0.09); 

} 



.navbar-logo { 

display: flex; 

align-items: center; 

gap: 10px; 

} 



.navbar-logo img { 

height: 60px; 

width: auto; 

} 



.navbar-logo span { 

font-weight: 800; 

font-size: 20px; 

letter-spacing: .04em; 

} 



.navbar-nav { 

display: flex; 

gap: 26px; 

font-size: 15px; 

text-transform: uppercase; 

font-weight: 600; 

} 



.navbar-nav a { 

position:relative; 

padding-bottom:3px; 

} 



.navbar-nav a::after { 

content:""; 

position:absolute; 

left:0; 

bottom:0; 

width:0; 

height:2px; 

background:var(--blue); transition:.2s; 

} 



.navbar-nav a:hover::after { 

width:100%; 

}



/* HERO */ 

header { 

position:relative; 

min-height:90vh; 

display:flex; 

align-items:center; 

justify-content:center; 

padding:120px 20px 80px; 

text-align:center; 

background:#000; 

overflow:hidden; 

color:#fff; 

} 



header::before { 

content:""; 

position:absolute; 

inset:0; 

background:url("../images/header.png") center/cover no-repeat; 

opacity:0.35; 

} 



header .hero-inner { 

position:relative; 

z-index:1; 

max-width:850px; 

} 



header h1 { 

font-size:46px; 

margin:0 0 15px; 

font-weight:800; 

letter-spacing:-0.04em; 

} 



header p { 

font-size:20px; 

margin:0 0 28px; 

line-height:1.55; 

} 



.hero-badges { 

display:flex; 

flex-wrap:wrap; 

justify-content:center; 

gap:10px; 

margin-bottom:30px; 

font-size:13px; 

} 



.hero-badge { 

border-radius:999px; 

padding:6px 14px; 

border:1px solid #ffffff55; 

background:#00000055; 

} 



.btn-primary { 

display:inline-block; 

padding:14px 32px; 

border-radius:999px; 

background:var(--blue); 

color:#fff; 

font-weight:600; 

font-size:18px; 

margin:0 8px; 

} 



.btn-secondary { 

display:inline-block; 

padding:14px 24px; 

border-radius:999px; 

border:1px solid #ffffff88; 

color:#fff; 

font-weight:500; 

font-size:16px; 

margin:0 8px; 

} 



section { 

scroll-margin-top: 90px; 

padding:80px 20px; 

max-width:1200px; 

margin:0 auto; 

} 



h2 { 

font-size:34px; 

text-align:center; 

color:var(--blue); 

margin-bottom:14px; 

}

 

.section-intro { 

text-align:center; 

max-width:700px; 

margin:0 auto 40px; 

font-size:17px; 

line-height:1.6; 

} 



.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 28px;

}





.card { 

justify-content:space-between; 

gap:18px; 

align-items:center; 

background:#fff; 

padding:18px 22px; 

border-radius:var(--radius); 

font-size:17px; 

box-shadow:0 6px 18px rgba(0,0,0,0.06);

} 



.card h3 { 

margin-top:0; 

font-size:21px; 

margin-bottom:10px; 

} 



.card-form-ok { 

color:#fff;

background:#27872A; 

padding:26px; 

border-radius:var(--radius); 

box-shadow:0 8px 26px rgba(0,0,0,0.08); 

width:300px;

margin:auto;

text-align:center;

} 



.card-form-nok { 

color:#fff;

background:#CF3925; 

padding:26px; 

border-radius:var(--radius); 

box-shadow:0 8px 26px rgba(0,0,0,0.08); 

width:300px;

margin:auto;

text-align:center;

} 



.photo-block { 

height:158px; 

border-radius:var(--radius); 

background:#d5d5dd; 

margin-bottom:16px; 

} 



/* price */ 

.price-item {  

justify-content:space-between; 

gap:18px; 

align-items:center; 

background:#fff; 

padding:18px 22px; 

border-radius:var(--radius); 

font-size:17px; 

box-shadow:0 6px 18px rgba(0,0,0,0.06); 

} 



.price-item span:last-child { 

font-weight:700; 

font-size:18px; 

} 



/* FAQ */ 

.faq-item { 

background:#fff; 

padding:18px 20px; 

border-radius:var(--radius); 

box-shadow:0 4px 14px rgba(0,0,0,0.06); 

} 



.faq-item h4 { 

margin:0 0 6px; 

font-size:18px; 

color:var(--blue); 

} 



.faq-item p { 

margin:0; 

font-size:16px; 

} 



/* FORM */ 

form { 

background:#fff; 

padding:32px; 

border-radius:var(--radius); 

box-shadow:0 6px 22px rgba(0,0,0,0.08); 

max-width:700px; 

margin:0 auto; 

} 



label { 

display:block; 

font-size:15px; 

font-weight:600; 

margin-bottom:4px; 

} 



input, textarea, select { 

width:100%; 

padding:14px; 

border-radius:12px; 

border:1px solid #ccc; 

font-size:16px; 

margin-bottom:18px; 

font-family:inherit; 

} 



button[type="submit"] { 

border:none; 

border-radius:999px; 

background:#0a4fff; 

color:#fff; 

padding:14px 30px; 

font-size:18px; 

font-weight:600; 

cursor:pointer; 

display: block; 

margin:auto;

} 



footer { 

background:#000; 

color:#fff; 

text-align:center; 

padding:40px 20px; 

margin-top:60px; 

font-size:14px; 

} 



/* REVEAL ANIMACE */ 

.reveal { 

opacity:0; 

transform:translateY(30px); 

transition:opacity .6s ease-out, transform .6s ease-out; 

} 



.reveal.visible { 

opacity:1; 

transform:translateY(0); 

} 



@media (max-width: 768px) { 

header { 

padding-top:110px; 

min-height:80vh; 

} 



header h1 { 

font-size:32px;

} 



header p { 

font-size:17px; 

} 



section { 

padding:70px 18px; 

} 



.price-item { 

flex-direction:column; 

align-items:flex-start; 

} 

} 



</style>