:root{
  --bg:#203742; /* premium dark blue */
  --card:#ffffff14;
  --stroke:#ffffff22;
  --text:#cfeaf4;
  --accent:#7ed3ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:#8fd9ff;text-decoration:none}
a:hover{text-decoration:underline}
.wrapper{max-width:1150px;margin:0 auto;padding:56px 20px}
nav{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--stroke);backdrop-filter:saturate(150%) blur(10px);position:sticky;top:0;background:#1b2f39cc;color:var(--text);z-index:9}
.logo{display:flex;gap:10px;align-items:center}
.logo img{height:28px;filter:drop-shadow(0 2px 4px #0006)}
.hero h1{font-size:48px;margin:.2em 0 .1em}
.hero p{max-width:760px;opacity:.9}
.grid{display:grid;gap:20px}
.grid.services{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:22px}
.card{border:1px solid var(--stroke);background:linear-gradient(180deg,#ffffff10,#ffffff05);border-radius:18px;padding:22px 20px;box-shadow:0 8px 30px #0009;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px #000c;border-color:#7ed3ff55}
.card h3{margin-top:0;margin-bottom:.4em;color:#eaf7ff}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#14313f;border:1px solid var(--stroke);color:#a9dcee;margin:10px 4px 0 0;font-size:.84rem}
.section{margin:54px 0}
h2{font-size:28px;margin:0 0 18px}
/* Team */
.team{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.member{display:flex;flex-direction:column;align-items:center;text-align:center}
.member img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--stroke);box-shadow:0 8px 30px #000a}
.member h4{margin:12px 0 6px}
.small{opacity:.85;font-size:.92rem}
/* Project cards */
.projects{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.project .thumb{height:140px;border-radius:12px;background:linear-gradient(135deg,#2d4e5e,#334b6b);display:flex;align-items:center;justify-content:center;border:1px solid var(--stroke);margin-bottom:12px;overflow:hidden}
.project .thumb img{height:64px;opacity:.95}
footer{border-top:1px solid var(--stroke);margin-top:56px;padding:24px 0;color:#9bc8d6}
/* Form */
form{display:grid;gap:12px}
input,textarea{background:#102731;border:1px solid var(--stroke);color:var(--text);padding:12px 14px;border-radius:12px;width:100%}
button{background:#0ea5e9;color:white;border:0;padding:12px 16px;border-radius:12px;cursor:pointer}
button:hover{filter:brightness(1.1)}
.success{color:#aef3c5}


/* === Contact section styles === */
.contact { padding: 4rem 1.5rem; max-width: 900px; margin: 0 auto; }
.contact h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 2.5vw, 2rem); }
form[name="contact"] { display: grid; gap: 12px; margin-top: 1rem; }
form[name="contact"] label { display: grid; gap: 6px; font-weight: 600; }
form[name="contact"] input, form[name="contact"] textarea {
  padding: 10px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  background: rgba(255,255,255,.05); color:#E8F1F5; outline: none;
}
form[name="contact"] input:focus, form[name="contact"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(232,241,245,.18);
}
form[name="contact"] button {
  padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: #E8F1F5; color: #2B414D; font-weight: 700; justify-self: start;
}
.contact-info { margin-top: 1rem; opacity: .95; }
.contact-info a { color: #E8F1F5; text-decoration: underline; }