:root{
  --bg:#f6f6f4;
  --panel:#ffffff;
  --text:#151515;
  --muted:#707070;
  --teal:#17b6a0;
  --coral:#ff8e72;
  --ring:#e5e7eb;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.55;
}

/* layout */
.container{width:min(1120px, 92%); margin-inline:auto}

/* header */
.site-header{position:sticky; top:0; z-index:10; background:rgba(246,246,244,.8); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eee}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text)}
.brand span{color:var(--teal)}
.nav-links a{margin-left:24px; text-decoration:none; color:var(--text)}
.nav-links a:hover{color:var(--teal)}
.hamburger{display:none; background:none; border:0; padding:6px; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:#333; margin:5px 0; border-radius:1px}

/* hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:56px 0}
.hero h1{font-size: clamp(28px, 4.2vw, 56px); line-height:1.05; margin:0 0 14px}
.hero .accent{color:var(--teal)}
.lead{color:#444; font-size: clamp(16px, 1.4vw, 18px)}
.cta-row{display:flex; align-items:center; gap:18px; margin:22px 0 10px}
.btn{display:inline-block; padding:14px 20px; border-radius:999px; text-decoration:none; font-weight:700}
.btn-primary{background:var(--coral); color:#fff; box-shadow: var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.text-link{color:var(--teal); font-weight:600; text-decoration:none}
.badges{display:flex; gap:12px; flex-wrap:wrap; list-style:none; padding:0; margin:18px 0 0}
.badges li{background:#fff; border:1px solid var(--ring); padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px}

.hero-visual{position:relative}
.arch{
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow);
}
.arch img{display:block; width:100%; height:auto; border-radius: 24px; object-fit:cover; aspect-ratio: 4/3}
.bubble{
  position:absolute; right:-8px; bottom:-10px;
  background:#101010; color:#fff; border-radius:999px;
  padding:14px 16px; font-size:14px; line-height:1.2; box-shadow: var(--shadow);
}

/* about */
.about{padding:18px 0 8px}
.about-card{background:var(--panel); border:1px solid var(--ring); border-radius:20px; padding:24px; box-shadow: var(--shadow)}
.about-card h2{margin:0 0 8px}

/* services */
.services{padding:36px 0}
.services h2{margin:0 0 16px}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(4, 1fr);
}
.card{background:var(--panel); border:1px solid var(--ring); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.card .icon{width:44px; height:44px; display:grid; place-items:center; background:#f2fffd; border-radius:12px; margin-bottom:10px}
.card h3{margin:6px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

/* process */
.process{background:#f0fbf9; padding:42px 0; border-top:1px solid #e6f4f1; border-bottom:1px solid #e6f4f1}
.process h2{margin:0 0 18px}
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:0; list-style:none; margin:0;
}
.steps li{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:16px; box-shadow: var(--shadow)}
.steps h4{margin:0 0 6px}

/* pricing */
.pricing{padding:36px 0}
.price-card{background:var(--panel); border:1px solid var(--ring); border-radius:18px; padding:20px; box-shadow: var(--shadow)}
.price-card ul{margin:0 0 8px; padding-left:18px}
.price-card .note{color:var(--muted); margin:0}

/* testimonial */
.testimonial{padding:8px 0 28px}
.testimonial figure{background:#fff; border:1px solid var(--ring); border-radius:18px; padding:18px; display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:center; box-shadow: var(--shadow)}
.testimonial img{width:64px; height:64px; border-radius:50%; object-fit:cover}
.testimonial blockquote{margin:0; font-weight:600}
.testimonial figcaption{grid-column:2; color:var(--muted); font-size:14px}

/* faqs */
.faqs{padding:18px 0 48px}
.faqs details{background:#fff; border:1px solid var(--ring); border-radius:12px; padding:14px 16px; margin-bottom:10px}
.faqs summary{cursor:pointer; font-weight:700}

/* footer */
.site-footer{background:#0f1720; color:#fff; padding:32px 0; margin-top:20px}
.footer-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; align-items:start}
.footer-brand{font-weight:800; font-size:18px}
.footer-brand span{color:var(--teal)}
.site-footer a{color:#d7fff6; text-decoration:none}
.site-footer a:hover{color:#fff}

/* responsive */
@media (max-width: 940px){
  .hero{grid-template-columns:1fr; gap:28px}
  .grid{grid-template-columns: repeat(2,1fr)}
  .steps{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 640px){
  .nav-links{display:none}
  .hamburger{display:block}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}