:root{
  --blue:#2563eb;
  --red:#ef4444;
  --dark:#0b0f19;
  --mid:#111827;
  --muted:#6b7280;
  --card:#0f172a;
  --ring: 0 0 0 3px rgba(37,99,235,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, #101827, #0b0f19);
  color:#e5e7eb; line-height:1.6;
}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.btn, .button{
  display:inline-block; padding:.75rem 1rem; border-radius:14px;
  background:linear-gradient(90deg, var(--red), var(--blue)); color:white; font-weight:600;
  text-decoration:none; box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.btn:hover{filter:brightness(1.05)}
.btn-outline{background:transparent; border:1px solid #334155; color:#e5e7eb}
.btn-outline:hover{border-color:#64748b}
.site-header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,15,25,.7); border-bottom:1px solid #111827}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding: .75rem 1rem;}
.brand{display:flex; align-items:center; gap:.75rem; color:#e5e7eb; text-decoration:none}
.logo{width:54px; height:54px; border-radius:50%; border:2px solid #1f2937; object-fit:cover; background:#111}
.brand-text .title{display:block; font-weight:800; letter-spacing:.3px}
.brand-text .tagline{display:block; font-size:.85rem; color:#9ca3af}
.nav{display:flex; gap:1rem; align-items:center}
.nav a{color:#e5e7eb; font-weight:600; padding:.4rem .5rem; border-radius:8px}
.nav a:hover{background:#0f172a}
.hero{
  padding: 4.5rem 0 3rem;
  background: radial-gradient(1000px 600px at 85% -50%, rgba(37,99,235,.2), transparent), 
              radial-gradient(800px 600px at -10% 120%, rgba(239,68,68,.20), transparent);
  border-bottom:1px solid #111827;
}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); margin:.2rem 0 .5rem; line-height:1.1}
.hero p{color:#cbd5e1}
.hero .cta{display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid #1f2937; padding:1rem; border-radius:16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.section{padding:3rem 0}
.section h2{margin:0 0 1rem; font-size:1.8rem}
.kicker{color:var(--blue); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.9rem}
.badge{display:inline-block; padding:.25rem .6rem; border:1px solid #334155; border-radius:999px; font-size:.8rem; color:#9ca3af}
.feature{display:flex; gap:.75rem; align-items:flex-start}
.feature .icon{width:38px; height:38px; border-radius:10px; background:#111827; display:grid; place-items:center; border:1px solid #1f2937}
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid #1f2937; background:#0f172a}
.site-footer{border-top:1px solid #111827; margin-top:2rem; padding-top:1.5rem}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
.copyright{padding:1rem 0; color:#9ca3af; border-top:1px solid #111827; margin-top:1rem; font-size:.9rem}
.contact-card{display:grid; gap:.75rem}
input, textarea{
  width:100%; background:#0f172a; color:#e5e7eb; border:1px solid #1f2937;
  border-radius:12px; padding:.75rem; outline:none;
}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:#334155}
label{font-weight:600}
small.help{color:#9ca3af}
@media (max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}