/* We Are Callisto — quick dark theme */
:root{
  --bg:#0B0F14;
  --surface:#0F1621;
  --text:#E6EDF3;
  --muted:#93A4B7;
  --accent:#22D3EE;
  --accent-hover:#06B6D4;
  --border: rgba(255,255,255,.10);
}

html{box-sizing:border-box; scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
html,body{margin:0;padding:0; background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.55}

h1,h2,h3{font-family:'Josefin Sans','Inter',sans-serif}
h1{font-weight:700; font-size: clamp(2rem, 5vw, 3.2rem)}
h2{font-weight:700; font-size: clamp(1.5rem, 3vw, 2rem); margin:0 0 .5rem}
h3{font-weight:600; font-size: 1.1rem; margin:.25rem 0 .35rem}

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}

.container{max-width:1080px; margin:0 auto; padding: 0 1.25rem}

.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(6px); background: rgba(11,15,20,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:58px}
.nav .brand{color:var(--text); font-weight:700}
.nav .nav-links a{margin-left:1rem; color:var(--muted)}
.nav .nav-links a:hover{color:var(--text)}

.hero{position:relative; min-height:72vh; display:flex; align-items:center}
.hero{background:url('../img/hero.jpg') center/cover no-repeat fixed}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,15,20,.55), rgba(11,15,20,.85))}
.hero-inner{position:relative; z-index:2; text-align:center; padding: 3.5rem 0}
.hero .sub{color:var(--muted); max-width: 820px; margin: .5rem auto 1.25rem}

.section{padding: 3.5rem 0}
.surface{background: var(--surface)}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}
.lead{font-weight:600; margin-top:.5rem}

.btn{display:inline-block; padding:.85rem 1.2rem; border-radius:.8rem; font-weight:700; border:1px solid transparent}
.btn-accent{background:var(--accent); color:#001018; border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-hover); border-color:var(--accent-hover)}

.services{display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.25rem 0}
.services li{list-style:none; background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius: 12px; padding: 1rem}
.services p{margin:0}

.contact-form{max-width:760px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; margin-bottom:.75rem}
input, textarea{width:100%; background: rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text); border-radius:.6rem; padding:.85rem .9rem}
textarea{resize:vertical}

.footer{border-top:1px solid rgba(255,255,255,.08); text-align:center; padding: 2rem 0; margin-top: .5rem}
.footer .brand{font-weight:700; margin-bottom:.25rem}