:root{
  --bg:#0f1115; 
  --ink:#ffffff; 
  --muted:#b6b9c3; 
  --accent:#e7c27d; 
  --card:#171923; 
  --line:#2a2e3b;
}

/* Base */
*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:16px;          /* readability */
  line-height:1.6;
}

a{ color:inherit; text-decoration:none; }

/* Wider container with safe gutters */
.container{
  /* up to 1480px wide; keeps 32px padding on both sides on any screen */
  width: min(1480px, 100% - 64px);
  margin: 0 auto;
}

/* Top nav */
.nav{
  position:sticky; top:0;
  background:rgba(15,17,21,.7);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  z-index:50;
}
.nav-inner{ height:64px; display:flex; align-items:center; justify-content:space-between; }

.brand{ display:flex; gap:12px; align-items:center; }
.mark{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#1f2230,#2b3042);
  border:1px solid var(--line);
}

/* Brand text hierarchy */
.brand-text{ display:flex; flex-direction:column; line-height:1.2; font-size:18px; font-weight:700; }
.brand-text small{ color:var(--muted); font-size:14px; line-height:1.3; }

nav a{ padding:10px 14px; border:1px solid var(--line); border-radius:12px; margin-left:8px; }
nav a:hover{ border-color:var(--accent); color:var(--accent); }

/* Hero */
.hero{ padding:72px 0 40px; border-bottom:1px solid var(--line); }
.tagline{
  display:inline-block; padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font-size:12px;
}
h1{ font-size:44px; margin:14px 0 8px; }
.lead{ color:var(--muted); max-width:800px; font-size:15.5px; }
.cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-block; padding:12px 16px;     /* larger tap target */
  border:1px solid var(--line); border-radius:12px;
  background:transparent; color:var(--ink); font-size:.95rem;
}
.btn.outline{ border-color:var(--accent); color:var(--accent); }

/* Sections */
.section{ padding:56px 0; border-bottom:1px solid var(--line); }
.section.alt{ background:#0c0e13; }

h2{ margin:0 0 10px; font-size:24px; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* Listings grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  margin-top:16px;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;   /* a touch comfier */
}
.card h3{ font-size:20px; font-weight:600; }
.card p{ font-size:15px; }
.card .muted{ font-size:14.5px; }

/* Services cards (if used) */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin-top:12px;
}

.list{ display:grid; gap:8px; padding:0; list-style:none; }

/* Contact section */
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; }

input, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:#11131a; color:var(--ink);
  font-family:inherit; margin-bottom:10px;
}
textarea{ min-height:120px; }

/* Footer */
.footer{ padding:24px 0; color:var(--muted); font-size:15px; }

/* Large-screen hero boost */
@media (min-width:1200px){
  h1{ font-size:48px; }
}

/* Mobile */
@media (max-width:900px){
  .grid, .cards{ grid-template-columns:1fr; }  /* single column on small screens */
  .contact{ grid-template-columns:1fr; }
  h1{ font-size:36px; }
  .btn{ padding:12px 14px; }
}