/* GLOBAL STYLES */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat', sans-serif; background:#111; color:#fff; line-height:1.6; }
a { text-decoration:none; color:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* HEADER */
.site-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 3rem; background:#000; position:sticky; top:0; z-index:1000; }
.site-header .brand { font-weight:700; font-size:1.5rem; color:#fff; }
.site-nav ul { display:flex; list-style:none; gap:25px; }
.site-nav ul li a { font-weight:600; }
.site-nav ul li a.active, .site-nav ul li a:hover { color:#4da3ff; }

/* HERO SECTION */
#hero { position:relative; height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; background:#000; }
#hero .hero-content { max-width:800px; }
#hero h1 { font-size:3rem; color:#4da3ff; margin-bottom:1rem; }
#hero p { font-size:1.1rem; color:#fff; margin-bottom:2rem; }
#hero .btn { background:#4da3ff; padding:12px 25px; border-radius:50px; color:#fff; font-weight:700; transition:0.3s; }
#hero .btn:hover { background:#1a73e8; }

/* SECTION HEADINGS */
h2 { font-size:2.5rem; color:#4da3ff; text-align:center; margin-bottom:30px; }
p { font-size:1.1rem; color:#d1d1d1; text-align:center; margin-bottom:30px; }

/* GRID & CARDS */
.grid { display:grid; gap:30px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card { background:#1a1a1a; padding:30px 20px; border-radius:15px; text-align:center; transition:0.3s; cursor:pointer; position:relative; }
.card:hover { background:#4da3ff; color:#fff; transform:translateY(-5px); }
.card::after { content:"Click to view"; position:absolute; bottom:10px; right:10px; font-size:0.8rem; color:#aaa; }

/* MODAL */
.modal-bg { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; z-index:10000; }
.modal-content { background:#1a1a1a; padding:30px; border-radius:15px; max-width:500px; width:90%; text-align:center; color:#fff; }

/* CONTACT FORM */
form.card { background:#1a1a1a; padding:30px; border-radius:14px; border:1px solid #242424; box-shadow:0 6px 14px rgba(0,0,0,0.4); }
form label { display:block; margin-bottom:20px; font-size:0.95rem; }
form span { display:block; margin-bottom:6px; color:#ddd; }
input, textarea { width:100%; padding:12px; border-radius:8px; border:1px solid #333; background:#0d1b2a; color:#f3f3f3; }
textarea { resize:vertical; }
.btn.primary { display:inline-block; background:#4da3ff; color:#fff; border:none; padding:12px 20px; border-radius:8px; cursor:pointer; transition:background 0.3s ease; }
.btn.primary:hover { background:#1a73e8; }

/* FOOTER */
footer { text-align:center; padding:2rem; background:#000; color:#fff; margin-top:50px; }

/* RESPONSIVE */
@media(max-width:768px){
  .site-header { flex-direction:column; align-items:flex-start; padding:1rem 1.5rem; }
  .site-nav ul { flex-direction:column; gap:15px; margin-top:10px; }
  #hero { height:70vh; padding:0 15px; }
  #hero h1 { font-size:2rem; }
  #hero p { font-size:1rem; }
  .grid.two, .grid.three { grid-template-columns:1fr !important; }
  form.card { padding:20px; }
  input, textarea { padding:10px; }
  .btn, .btn.primary { width:100%; padding:12px; }
}