/* ========== Contact (sleek form) ========== */
:root{
  --bg:#0A0A0B; --txt:#F2F6FB; --muted:#CFE8FB; --glass:rgba(255,255,255,.08);
  --b1:#33b5df; --b2:#2a8bb2; --shadow:0 24px 80px rgba(51,181,223,.18);
}
*{box-sizing:border-box}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:var(--bg)}
a{color:inherit; text-decoration:none}
.container{width:min(1180px,92%); margin:auto}
.section{padding:96px 0}
.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:800; padding:.9rem 1.2rem; transition:.25s}
.btn-primary{background:linear-gradient(90deg,var(--b1),var(--b2)); color:#061423; box-shadow:0 10px 26px rgba(51,181,223,.25)}
main{padding-top:78px}

/* FX */
.fx-bg{position:fixed; inset:0; z-index:-1; pointer-events:none}
.layer{position:absolute; inset:0}
.stars,.twinkle{
  --dot:radial-gradient(2px 2px at 2px 2px, rgba(255,255,255,.6), transparent 70%);
  background:var(--dot),var(--dot),var(--dot),var(--dot),var(--dot),var(--dot);
  background-size:160px 160px,240px 240px,320px 320px,380px 380px,440px 440px,520px 520px;
  opacity:.22; animation:drift 42s linear infinite;
}
.twinkle{opacity:.1; animation:drift 68s linear infinite reverse}
.gradient{background:radial-gradient(900px 380px at 20% -12%, rgba(51,181,223,.18), transparent 60%), radial-gradient(700px 320px at 85% 10%, rgba(42,139,178,.14), transparent 60%)}
@keyframes drift{from{background-position:0 0} to{background-position:280px 220px}}

/* HERO LAYOUT */
.hero{padding-top:120px}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.kicker{text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:#9ed8ef}
.title{font-size:clamp(2rem,4.2vw,3rem); margin:.25rem 0 .5rem}
.lede{color:var(--muted)}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.ccard{border:1px solid var(--glass); border-radius:14px; padding:14px; background:#0b0d10}
.ccard h3{margin:0 0 4px}

/* Form */
.card{background:#0b0d10; border:1px solid var(--glass); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.form label{display:block; font-weight:700; margin:.4rem 0 .35rem}
.form input,.form textarea{
  width:100%; padding:.8rem .85rem; border-radius:12px; border:1px solid var(--glass);
  background:#0f1115; color:#eaf8ff; outline:none; transition:border-color .2s;
}
.form input:focus,.form textarea:focus{border-color:#7fd6ff}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.foot{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap}
.note{color:#bfe7ff; font-size:.9rem}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
  background:#06111a; color:#dff6ff; border:1px solid var(--glass); border-radius:999px;
  padding:.65rem 1rem; opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; z-index:9999;
  box-shadow:0 20px 60px rgba(51,181,223,.28);
}
.toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}

/* Map */
.map-wrap{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--glass); box-shadow:var(--shadow)}
.map-wrap img{display:block; width:100%; height:340px; object-fit:cover}
.map-wrap .overlay{position:absolute; left:14px; bottom:14px; background:rgba(8,12,16,.7); backdrop-filter:blur(10px); border:1px solid var(--glass); border-radius:999px; padding:.5rem .9rem}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s}
.reveal{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .row{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
}