/* Basic reset */
* { box-sizing: border-box; }
:root{
  --bg: #0b1220;
  --panel:#0f172a;
  --text: #e5e7eb;
  --muted:#94a3b8;
  --brand:#22d3ee;
  --card:#0b1220;
  --ring: rgba(34,211,238,.35);
}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(34,211,238,.08), transparent), var(--bg);
  color: var(--text);
  line-height:1.6;
}
a{color: var(--brand); text-decoration: none;}
a:hover{text-decoration: underline;}
.site-header{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1.2rem;
  background: rgba(11,18,32,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; color:#fff; letter-spacing:.2px;}
.brand img{filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.nav{display:flex; gap:1rem; align-items:center;}
.nav a{color:#cbd5e1; font-weight:600;}
.nav .cta{padding:.5rem .8rem; border:1px solid rgba(255,255,255,.12); border-radius:.7rem;}
#themeToggle{background:transparent; border:1px solid rgba(255,255,255,.12); color:#cbd5e1; padding:.35rem .55rem; border-radius:.6rem; cursor:pointer}

.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;
  padding: 5rem 1.2rem 3rem; max-width: 1080px; margin: 0 auto;
}
.hero-content h1{font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin: 0 0 .6rem; letter-spacing:.2px;}
.hero-content p{font-size:1.15rem; color:#cbd5e1; margin:0 0 1rem}
.actions{display:flex; gap:.8rem; margin:1.2rem 0 0}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.12); color:#e2e8f0; font-weight:700}
.btn.primary{background: linear-gradient(135deg, #22d3ee, #3b82f6); color:#0b1220; border: none; box-shadow: 0 8px 24px rgba(34,211,238,.25)}
.badges{display:flex; gap:.6rem; list-style:none; padding:0; margin:1rem 0 0}
.badges li{border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.35rem .6rem; color:#a5b4fc; background: rgba(99,102,241,.08)}

.hero-art img{width:100%; height:auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.35)); opacity:.95}

.section{max-width:1080px; margin:0 auto; padding: 3rem 1.2rem}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), transparent)}

h2{font-size: clamp(1.4rem, 2.5vw, 2rem); margin:0 0 1rem}
.cards{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem}
.card{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:1rem; padding:1rem; box-shadow: 0 8px 30px rgba(0,0,0,.15)}
.card h3{margin:.2rem 0 .4rem; font-size:1.1rem}
.card p{color:#cbd5e1}
.card ul{margin:.6rem 0 0 1.2rem; color:#9fb0c9}

.list{display:grid; gap:.8rem}
.list-item{padding:1rem; border:1px solid rgba(255,255,255,.06); border-radius:1rem; background: rgba(255,255,255,.02)}

.contact-form{margin-top:.6rem; display:grid; gap:.8rem}
.contact-form .grid{display:grid; grid-template-columns: 1fr 1fr; gap:.8rem}
label span{display:block; font-weight:600; margin-bottom:.3rem}
input, textarea{
  width:100%; padding:.8rem .9rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02); color:#e5e7eb; outline: none;
}
input:focus, textarea:focus{box-shadow: 0 0 0 4px var(--ring)}
.newsletter{margin-top:2rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.newsletter input{flex:1; min-width:240px}

.site-footer{
  max-width:1080px; margin:0 auto; padding:2rem 1.2rem 4rem;
  display:flex; align-items:center; justify-content:space-between; color:#9fb0c9
}
.site-footer a{color:#9fb0c9}

@media (max-width: 1000px){
  .hero{grid-template-columns: 1fr}
  .hero-art{order:-1}
  .cards{grid-template-columns: repeat(2, 1fr)}
  .contact-form .grid{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .nav a:not(.cta){display:none}
  .cards{grid-template-columns: 1fr}
}