:root{
  --color-primary:#003E6B;
  --color-secondary:#0077B6;
  --color-bg:#F7FAFC;
  --color-text:#1F2A37;
  --color-white:#fff;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--color-text); background:var(--color-bg); line-height:1.55;
}
a{color:var(--color-secondary); text-decoration:none}
a:hover{text-decoration:underline}
.header{ position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e5e7eb; }
.header .wrap{ max-width:1100px; margin:0 auto; padding:.8rem 1rem; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-weight:800; font-size:1.8rem; color:var(--color-primary) }
nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1rem }
nav a{ font-weight:600 }

.hero{ position:relative; height:78vh; min-height:450px }
.hero video.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.hero .overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); }
.hero .hero-content{ position:relative; z-index:2; color:#fff; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 1rem; }
.hero .hero-content h1{ font-size:2.6rem; margin:0 0 1rem; text-shadow:0 2px 4px rgba(0,0,0,.6) }
.hero .hero-content p{ font-size:1.15rem; margin:0 0 2rem; text-shadow:0 2px 4px rgba(0,0,0,.6) }
.btn-primary{ background:var(--color-secondary); color:#fff; padding:.8rem 1.1rem; border-radius:10px; font-weight:700; display:inline-block }
.btn-primary:hover{ filter:brightness(.95); text-decoration:none }

section{ padding:64px 16px }
.section-inner{ max-width:1100px; margin:0 auto }
.section-header{ text-align:center; margin-bottom:1.2rem }
.section-header h2{ font-size:1.9rem; color:var(--color-primary); margin:.2rem 0 0 }

.about .content{ display:grid; grid-template-columns:1.3fr .9fr; gap:24px }
.about-image img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:0 4px 8px rgba(0,0,0,.1) }
.about-image figure{ margin:0; text-align:center }
.about-image figcaption{ margin-top:.5rem; font-size:.92rem; color:#374151 }

/* Services */
.services .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.service-card{ background:#fff; border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.06) }
.service-card h3{ margin:.35rem 0 .4rem; color:var(--color-primary) }
.service-card p{ margin:0; font-size:.98rem; color:#334155 }
.service-card .emoji{ font-size:2rem; display:block; margin-bottom:.6rem }

/* Price banner (bigger text) */
.price-banner{
  margin: 1rem auto 2rem; background:#f5f9fd; border-left:4px solid var(--color-secondary);
  padding:.9rem 1rem; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-weight:700; max-width:780px; font-size:1.15rem;
}
.price-banner .emoji{ font-size:1.3rem }
.price-banner strong{ font-size:1.3rem }

/* Contact */
.contact .cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.contact .card{ background:#fff; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.06); padding:22px }
.contact .contact-details{ list-style:none; padding:0; margin:0 }
.contact .contact-details li{ margin:.5rem 0; display:flex; align-items:flex-start; gap:.5rem }
.contact .contact-details .emoji{ font-size:1.2rem }
.contact-media img{ width:100%; height:auto; object-fit:contain; border-radius:var(--radius); box-shadow:0 4px 6px rgba(0,0,0,.08) }

/* Partners */
.partners{ padding:40px 16px; background:#fff }
.partners .section-inner{ max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap }
.partners .partner-logo{ max-width:260px; width:100%; height:auto; display:block }
.partners .partner-logo.kredinor{ max-width:220px }

footer{ padding:24px 16px; text-align:center; color:#64748b }

@media (max-width:960px){
  .about .content{ grid-template-columns:1fr }
  .services .grid{ grid-template-columns:repeat(2,1fr) }
  .contact .cols{ grid-template-columns:1fr }
}
@media (max-width:600px){
  .services .grid{ grid-template-columns:1fr }
  .hero .hero-content h1{ font-size:2.1rem }
}