:root{
  --bg:#0e0f13;
  --text:#f4f5f6;
  --muted:#cfd3d8;
  --primary:#2e86ab;
  --accent:#2F79FF;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
.container{width:min(1100px,92%); margin-inline:auto}
.bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(46,134,171,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(242,193,78,.12), transparent 60%),
    linear-gradient(180deg, #0c0d11, #0e0f13 40%, #0b0c10);
  animation:float 14s ease-in-out infinite alternate;
}
@keyframes float {
  from {transform:translateY(-8px)}
  to   {transform:translateY(8px)}
}
.header{display:flex;align-items:center;padding:22px 0;}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text)}
.brand-logo{height:50px;width:auto;filter:drop-shadow(0 6px 18px rgba(46,134,171,.25))}
.brand-name{font-weight:800;letter-spacing:.2px;font-size:1.3rem}
.hero{
  display:grid; gap:3rem; align-items:center;
  grid-template-columns:1.1fr 1fr;
  padding:clamp(20px,4vw,48px) 0 64px;
}
h1{font-size: clamp(2rem, 3.5vw, 3.2rem);margin:.5rem 0 1rem}
h1 .accent{color:var(--accent)}
.lead{color:var(--muted);max-width:55ch}
.placeholder{
  margin:1.5rem 0; padding:1rem 1.2rem;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px dashed rgba(255,255,255,.2); border-radius:12px;
  color:var(--muted); font-weight:600; text-align:center;
}
.hero-art{position:relative}
.hero-image{
  width:100%; display:block; border-radius:18px;
  background:#0a0b0f; outline:1px solid rgba(255,255,255,.06);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 16px 40px rgba(46,134,171,.18);
}
.glow{
  position:absolute; inset:auto 12% -10% 12%; height:40%;
  background:radial-gradient(60% 120% at 50% 10%, rgba(46,134,171,.28), transparent 70%);
  filter:blur(24px); z-index:-1;
}
@media(max-width:940px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .hero-art{order:-1}
}