:root{
  --bg:#0b0c10;
  --panel:#111218;
  --ink:#e8e8ea;
  --muted:#a6a7ad;
  --brand:#9ef2c3;
  --brand-2:#e6b35a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 18px;
  --max: 1200px;
  --pad: 24px;
  --gap: clamp(16px, 3vw, 28px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; color:var(--ink); background: radial-gradient(1000px 400px at 10% -10%, #1a1c24 0, #0b0c10 70%); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; letter-spacing:.2px }
img{max-width:100%; height:auto; display:block}
.container{width:min(100% - 48px, 1200px); margin-inline:auto}
.site-header{position:sticky; top:0; z-index:10; background:rgba(11,12,16,.7); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}

/* Buttons: white bg + grey hover */
.btn{display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; background:#ffffff; color:#0b0c10; border:1px solid rgba(0,0,0,.12); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease}
.btn:hover{ background:#e9e9e9; transform:translateY(-1px) }
.btn-primary{ background:#ffffff; color:#0b0c10; border:1px solid rgba(0,0,0,.12); box-shadow:none; font-weight:700 }
.btn-ghost{ background:#ffffff; color:#0b0c10; border:1px solid rgba(0,0,0,.12) }

.hero{padding: clamp(48px, 8vw, 88px) 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(16px,3vw,28px); align-items:center}
.hero-copy h1{font-size: clamp(2rem, 5vw, 3.4rem); line-height:1.1; margin:.2em 0 .3em}
.lead{font-size: clamp(1rem, 2.3vw, 1.25rem); color:var(--muted); max-width:60ch}
.hero-ctas{display:flex; gap:14px; margin:18px 0}

/* Card headers baseline */
.card h3{ font-size: clamp(1.1rem, 2.2vw, 1.25rem); font-weight:700; letter-spacing:.2px }
/* Match hero buttons to card h3 size + weight */
.hero-ctas .btn{ font-size: clamp(1.1rem, 2.2vw, 1.25rem); font-weight:700 }

.badges{display:flex; gap:12px; padding:0; margin:14px 0 0; list-style:none; flex-wrap:wrap}
.badges li{padding:.35rem .6rem; background:#15161d; border:1px solid rgba(255,255,255,.06); border-radius:999px; font-size:.85rem; color:var(--muted)}

.hero-media{background:#0f1016; padding:12px; border-radius: 18px; box-shadow:0 10px 30px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06)}
.hero-media figcaption{font-size:.8rem; color:var(--muted); margin-top:6px}

.section{padding: clamp(48px, 7vw, 84px) 0}
.section-title{font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin:0 0 20px}
.surface{background:linear-gradient(#0f1116, #0b0c10)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px)}
.card{background:#0f1016; border:1px solid rgba(255,255,255,.06); border-radius: 18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card-body{padding:18px}
.tags{display:flex; gap:8px; list-style:none; padding:0; margin:.6rem 0 0}
.tags li{font-size:.8rem; color:var(--muted); background:#14151c; border:1px solid rgba(255,255,255,.06); padding:.25rem .5rem; border-radius:999px}

.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,28px)}
.service{background:#0f1016; border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.service h3{margin-top:0}

.logo-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,3vw,28px); align-items:center; filter:saturate(.9) brightness(.96)}
.logo-grid img{width:100%; background:#0f1016; border-radius:12px; padding:14px; border:1px solid rgba(255,255,255,.06)}

.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,28px)}
.gallery figure{background:#0f1016; border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.gallery figcaption{font-size:.85rem; color:var(--muted); margin-top:8px}

.about{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(16px,3vw,28px); align-items:start}
.about-card{background:#0f1016; border:1px solid rgba(255,255,255,.06); border-radius: 18px; padding:20px}
.about-logo{width:160px; opacity:.9; margin-bottom:10px}

/* CTA */
.cta{background: radial-gradient(800px 400px at 90% 10%, #18202a, #0b0c10); padding: clamp(48px, 6vw, 80px) 0; text-align:center}
.cta-inner{display:grid; gap:10px; justify-items:center}
.btn-lg{font-size:1.1rem; padding:1rem 1.4rem}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.08); background:#0b0c10; padding:28px 0; color:var(--muted)}
.footer-center{ display:grid; place-items:center; gap:8px; text-align:center }
.footer-logo{ opacity:.9 }

/* Modal */
.modal.hidden{display:none}
.modal{position:fixed; inset:0; z-index:50}
.modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(4px);}
.modal__content{ position:relative; margin: min(8vh, 60px) auto; width:min(100% - 48px, 820px); background:#0f1016; color:var(--ink); border-radius: 18px; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.25); padding: clamp(18px, 3vw, 28px) }
.modal__close{ position:absolute; top:8px; right:10px; background:transparent; border:0; color:var(--ink); font-size:1.8rem; line-height:1; cursor:pointer }
.modal .muted{color:var(--muted)}
#projectForm{display:grid; gap:16px; margin-top:8px}
#projectForm label{display:grid; gap:6px; font-weight:600; font-size:.95rem}
#projectForm input, #projectForm select{ padding:.7rem .8rem; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#12131a; color:var(--ink) }
#projectForm input:focus, #projectForm select:focus{ outline:2px solid var(--brand); border-color:transparent }
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.recaptcha{margin-top:6px; margin-bottom:4px}
.form-msg{margin-top:8px; color:var(--muted)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .service-grid{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:1fr 1fr 1fr}
  .gallery{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}