:root{
  --bg:#0d2136;
  --ink:#0b1220;
  --accent:#c8a36d;
  --sand:#f3e7d8;
  --text:#1d2a3a;
  --white:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff;scroll-behavior:smooth}
a{color:var(--bg);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 20px;border-radius:10px;font-weight:700}
.btn-primary{background:var(--bg);color:#fff}
.btn-outline{border:2px solid var(--bg);color:var(--bg);background:transparent}
header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:#ffffffea;border-bottom:1px solid #eee;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.nav img{height:48px}
.nav .links a{margin-left:18px;font-weight:600}
.hero{padding:64px 0 24px;background:linear-gradient(180deg,#ffffff 0%,#fff7ee 100%)}
.hero h1{font-size:44px;line-height:1.05;margin:0 0 12px}
.hero p{font-size:18px;color:#4b5a6a;margin:0 0 22px;max-width:720px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0}
.badge{display:inline-block;background:#0d21360d;border:1px solid #0d213622;padding:6px 10px;border-radius:999px;color:#0d2136;font-weight:600;font-size:13px;margin-bottom:12px}
.section{padding:56px 0;border-top:1px solid #f0f0f0}
h2{font-size:32px;margin:0 0 10px}
.lead{color:#4b5a6a;max-width:760px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{border:1px solid #eee;border-radius:14px;padding:18px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.03)}
ul.clean{padding:0;margin:0;list-style:none}
ul.clean li{padding-left:28px;position:relative;margin:10px 0}
ul.clean li:before{content:"✔";position:absolute;left:0;top:0;color:var(--bg);font-weight:800}
.pricing{display:flex;flex-wrap:wrap;gap:16px}
.price{flex:1 1 240px;border:2px solid var(--bg);border-radius:14px;padding:16px}
.price h3{margin:0 0 10px}
.price .num{font-size:32px;font-weight:800}
.kv{background:#0d21360a;border-radius:10px;padding:10px 12px;display:inline-block}
.specs{columns:2;column-gap:28px}
.specs p{break-inside:avoid;margin:6px 0}
.cta-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:20;background:#ffffff;box-shadow:0 6px 24px rgba(0,0,0,0.12);border-radius:999px;padding:10px 14px;border:1px solid #eee;display:flex;gap:10px;align-items:center}
footer{padding:40px 0 80px;color:#5b6b7a}
footer .mini{font-size:13px;color:#708090}
.form{display:grid;gap:12px;max-width:560px}
.input,textarea{border:1px solid #d9dee6;border-radius:10px;padding:12px;font-size:16px;width:100%}
textarea{min-height:120px}
.gallery-link{display:inline-flex;align-items:center;gap:8px}
hr.soft{border:0;border-top:1px dashed #e9e9e9;margin:18px 0}
.small{font-size:13px;color:#6a7a89}
@media (max-width: 720px){
  .hero h1{font-size:34px}
  .specs{columns:1}
}
/* ----- header / nav ----- */
.header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
}

.header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header .brand img.logo {
  width: 72px;        /* bigger logo */
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.header .nav {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto); /* two lanes */
  gap: 8px 18px;
  justify-content: end;
  align-items: center;
}
.header .nav a {
  font-weight: 600;
  text-decoration: none;
  color: #0f1b2d;
}
.header .nav a.call {
  color: #0f1b2d;
}
.header .nav a.call:hover { text-decoration: underline; }

/* mobile: stack neatly */
@media (max-width: 760px) {
  .header {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .header .nav {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
  }
}

/* ----- hero with background image ----- */
.hero {
  position: relative;
  color: #0f1b2d;
  padding: 56px 16px 64px;
  background: url('assets/background.png') center/cover no-repeat;
}
.hero .overlay {               /* soft top/bottom fade for legibility */
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.75));
  border-radius: 18px;
  padding: 24px 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ----- section gradients (fading brown/yellow) ----- */
.fade-bg {
  background: linear-gradient(180deg, rgba(222,193,138,.18), rgba(249,232,190,.12));
}
.section { padding: 56px 16px; }
.container { max-width: 1100px; margin: 0 auto; }

/* ----- pricing cards with images ----- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 760px) { .pricing-grid { grid-template-columns: 1fr; } }

.card {
  border: 2px solid #0f1b2d;
  border-radius: 18px;
  padding: 18px;
  background: #fff;
}
.card .thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ----- buttons ----- */
.btn { display:inline-block; padding:12px 18px; border-radius:12px; font-weight:700; }
.btn-primary { background:#0f1b2d; color:#fff; }
.btn-outline { border:2px solid #0f1b2d; color:#0f1b2d; background:transparent; }

/* contact block (no form fields shown now) */
.form { text-align:center; }
.small { font-size: 0.9rem; color:#576071; }