*{box-sizing:border-box}
:root{
  --bg:#0e0f12;
  --panel:#14161b;
  --panel-2:#1a1d24;
  --text:#e7e9ee;
  --muted:#a7adbb;
  --accent:#4ea9ff;
  --radius:14px;
  --gap:1.1rem;
}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, #1b2230 0%, rgba(27,34,48,0) 60%), var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.5;
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem clamp(1rem, 2vw + 0.5rem, 2rem);
  position:sticky;top:0;background:linear-gradient(180deg, rgba(14,15,18,.85), rgba(14,15,18,.6) 60%, rgba(14,15,18,0));
  backdrop-filter:saturate(1.2) blur(6px);
}
.brand-logo {
  height: 100px;   /* tweak size to your liking */
  width: auto;
  display: block;
}
.brand-mark{
  width:42px;height:42px;border-radius:10px;background:linear-gradient(145deg,#2c3342,#151922);
  display:grid;place-items:center;font-weight:800;color:#9ccaff;box-shadow:inset 0 0 0 1px #2c3a52;
}
.brand-text h1{margin:0;font-weight:800;letter-spacing:.4px}
.brand-text p{margin:.15rem 0 0;color:var(--muted);font-size:.95rem}
.top-actions .btn{
  display:inline-block;padding:.6rem 1rem;border-radius:10px;border:1px solid #2a2f3b;
  color:var(--text);text-decoration:none;margin-left:.5rem;background:linear-gradient(180deg,var(--panel),var(--panel-2));
}
.top-actions .btn.primary{border-color:#2f6cae;box-shadow:0 0 0 1px rgba(78,169,255,.25) inset}
.hero{
  padding:2rem clamp(1rem, 2vw + 0.5rem, 2rem);
  max-width:1100px;margin:0 auto;
}
.hero h2{font-size:clamp(1.4rem,2.6vw,2.2rem);margin:.25rem 0}
.hero p{color:var(--muted);max-width:60ch}
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:var(--gap);
  padding:1rem clamp(1rem, 2vw + 0.5rem, 2rem) 3rem;
  max-width:1200px;margin:0 auto;
}
.tile{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #222832;
  border-radius:var(--radius);
  padding:1rem;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:1rem;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:160px;
}
.tile-text .title-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5em;
}
.tile:hover{
  transform:translateY(-2px);
  border-color:#335179;
  box-shadow:0 6px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(78,169,255,.15);
}
.tile-body{display:flex;gap:1rem;align-items:center}
.logo{width:56px;height:56px}
.tile-text h3{margin:.1rem 0 .2rem;font-weight:700}
.tile-text p{margin:0;color:var(--muted)}
.tile-meta{display:flex;align-items:center;justify-content:space-between;color:#b6c7dd;border-top:1px dashed #2a3444;padding-top:.75rem;margin-top:auto}
.domain{font-size:.9rem}
.arrow{font-weight:800}
.contact{max-width:1100px;margin:0 auto 3rem;padding:0 clamp(1rem, 2vw + 0.5rem, 2rem)}
.site-footer{padding:1.5rem;color:var(--muted);text-align:center;border-top:1px solid #1e2330;background:linear-gradient(180deg,rgba(20,22,27,.6),rgba(20,22,27,0))}
@media (max-width:640px){
  .brand-text p{display:none}
}