
:root{
  --bg:#0e1116; --text:#151515; --muted:#666; --gold:#d79b3d;
  --cream:#f7f0e7; --white:#fff; --dark:#111; --green:#25d366;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--cream)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.top-note{font-size:12px;text-align:center;padding:7px;background:#0b0c0f;color:#ddd}
.top-note a{color:#fff;text-decoration:underline}
.hero{min-height:100vh;background:linear-gradient(120deg,#0e1116 0%,#1f242b 48%,#e4c095 100%);color:#fff;overflow:hidden}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 6%;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px}
.brand img{height:44px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.nav-links{display:flex;gap:24px;color:#e7e7e7;font-size:15px}
.btn{border:0;border-radius:999px;background:var(--green);color:#fff;padding:15px 24px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(37,211,102,.28);cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-small{padding:11px 18px;font-size:14px}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.45);box-shadow:none}
.hero-content{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:50px;padding:55px 6% 80px}
.badge{display:inline-flex;background:rgba(215,155,61,.16);border:1px solid rgba(215,155,61,.45);color:#ffd28b;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.badge.dark{color:#9b6416;background:#fff2df}
h1{font-size:clamp(42px,6vw,78px);line-height:.95;margin:22px 0 18px;max-width:720px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.05;margin:10px 0 18px}
p{font-size:18px;line-height:1.6;color:#555}
.hero p{color:#e8e8e8;max-width:620px}
.price-card{margin:30px 0;padding:22px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);width:max-content;min-width:280px;backdrop-filter:blur(12px)}
.price-card span,.price-card small{display:block;color:#ddd}
.price-card strong{font-size:42px;color:#fff}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative}
.hero-media>img{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45);aspect-ratio:4/3;object-fit:cover}
.floating{position:absolute;left:-25px;bottom:28px;background:#fff;color:#111;border-radius:20px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.25);font-weight:800}
.floating img{height:54px;width:54px;object-fit:contain}
.section{padding:90px 6%}
.section-title{text-align:center;max-width:720px;margin:0 auto 46px}
.section-title span{color:#9b6416;text-transform:uppercase;font-weight:900;letter-spacing:1px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border-radius:26px;padding:32px;box-shadow:0 15px 50px rgba(0,0,0,.08)}
.icon{font-size:38px}
.card h3{font-size:24px;margin:18px 0 8px}
.project{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;background:#fff}
.project-image img{border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.project-text ul{padding:0;margin:25px 0 0;list-style:none;display:grid;gap:12px}
.project-text li{font-weight:800;padding-left:30px;position:relative}
.project-text li:before{content:'✓';position:absolute;left:0;color:var(--green)}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gallery-grid img{height:360px;width:100%;object-fit:cover;border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.1)}
.cta{margin:60px 6%;padding:50px;border-radius:34px;background:linear-gradient(135deg,#111,#333);color:#fff;display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:center}
.cta p{color:#ddd}
form{display:grid;gap:14px;background:#fff;padding:24px;border-radius:24px}
input,select{width:100%;padding:16px;border-radius:14px;border:1px solid #ddd;font-size:16px}
form small{color:#777;line-height:1.45}
footer{padding:30px 6%;display:flex;justify-content:space-between;gap:20px;background:#0b0c0f;color:#ddd}
footer a{text-decoration:underline}
@media(max-width:900px){
  .nav-links{display:none}
  .hero-content,.project,.cta{grid-template-columns:1fr}
  .cards,.gallery-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .floating{position:static;margin-top:16px}
  .gallery-grid img{height:260px}
  footer{flex-direction:column}
}
