/* Simple reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg-1: #071428;
  --bg-2: #071f36;
  --accent: #1ea7ff;
  --muted: #9fb7ce;
  --card: #082537;
}

body{
  font-family: Inter, Arial, sans-serif;
  background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
  color: #dbeaf7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }

/* navbar */
.nav-wrap{ position:sticky; top:0; z-index:40; background:rgba(4,12,22,0.5); backdrop-filter: blur(6px); border-bottom:1px solid rgba(255,255,255,0.03); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand{ font-weight:800; letter-spacing:1px; color:var(--accent); }
.nav-links{ display:flex; gap:18px; align-items:center; }
.nav-links a{ color:var(--muted); text-decoration:none; font-size:14px; }
.nav-links a.cta{ background:var(--accent); color:#042233; padding:8px 14px; border-radius:24px; font-weight:700; }
.nav-toggle{ display:none; background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; }

/* hero */
.hero{ padding:60px 0 30px 0; }
.hero-inner{ display:flex; gap:30px; align-items:center; }
.hero-left{ flex:1; }
.eyebrow{ color:var(--muted); font-size:13px; margin-bottom:10px; }
h1{ font-size:36px; line-height:1.05; margin-bottom:12px; color:#fff; }
.large-accent{ color:var(--accent); font-weight:800; display:block; margin-top:6px; font-size:28px; }
.lead{ color: #bcd6ea; max-width:540px; margin-bottom:18px; }
.hero-ctas{ display:flex; align-items:center; gap:14px; }
.btn{ display:inline-block; text-decoration:none; border-radius:8px; padding:10px 16px; }
.btn-primary{ background:var(--accent); color:#042233; font-weight:700; }
.btn-outline{ border:1px solid rgba(255,255,255,0.08); color:var(--muted); background:transparent; padding:10px 14px; border-radius:8px; }

.hero-right{ width:420px; display:flex; justify-content:flex-end; }
.profile-hero-wrap{ position:relative; width:320px; height:380px; }
.profile-hero{ width:100%; height:100%; object-fit:cover; border-radius:12px; border:6px solid rgba(255,255,255,0.03); box-shadow: 0 12px 30px rgba(2,8,20,0.7); }
.hero-decor{ position:absolute; left:-40px; top:40px; width:160px; height:160px; border-radius:50%; border:2px solid rgba(30,167,255,0.12); }

.logo-strip{ margin-top:24px; background:linear-gradient(90deg, rgba(6,18,29,0.6), rgba(4,12,22,0.6)); padding:14px 0; border-radius:8px; display:flex; justify-content:center; gap:30px; color:var(--muted); font-weight:700; }

/* about */
.about-section{ padding:48px 0; }
.about-grid{ display:grid; grid-template-columns: 320px 1fr; gap:28px; align-items:center; }
.about-photo img{ width:100%; border-radius:14px; box-shadow:0 10px 30px rgba(2,8,20,0.6); }
.about-content h2{ color:#fff; margin:6px 0 12px; }
.stats{ display:flex; gap:16px; margin:16px 0 12px; }
.stats div{ background:rgba(255,255,255,0.03); padding:12px 14px; border-radius:8px; text-align:center; }
.stats div strong{ display:block; color:var(--accent); font-size:18px; }

/* projects */
.projects-section{ padding:48px 0; }
.section-label{ color:var(--muted); font-size:13px; margin-bottom:6px; }
.section-title{ color:#fff; margin-bottom:18px; }
.projects-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.project-card{ background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(2,8,20,0.6); }
.project-card img{ width:100%; height:300px; object-fit:cover; display:block; }
.project-body{ padding:12px; text-align:left; color:#d6eaf6; }
.project-body h4{ margin-bottom:6px; }

/* services */
.services-section{ padding:48px 0; }
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.service-card{ background:rgba(255,255,255,0.03); padding:18px; border-radius:10px; box-shadow:0 6px 16px rgba(2,8,20,0.6); }

/* contact */
.contact-section{ padding:48px 0; }
.contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start; }
.contact-form input, .contact-form textarea{ width:100%; padding:12px; margin-bottom:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); color:#eaf7ff; }
.contact-form button{ width:100%; padding:12px; border-radius:8px; border:0; background:var(--accent); color:#042233; font-weight:700; }

.contact-info{ background:rgba(255,255,255,0.02); padding:18px; border-radius:10px; }

.site-footer{ padding:20px 0; margin-top:30px; background:transparent; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,0.03); }

/* responsive */
@media (max-width: 900px){
  .hero-inner{ flex-direction:column-reverse; align-items:center; }
  .hero-right{ width:100%; display:flex; justify-content:center; }
  .about-grid{ grid-template-columns: 1fr; }
  .projects-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}