:root{
  --grad-1: #06366c;
  --grad-2: #276ebb;
  --accent: #06b6d4;
  --muted: #6b7280;
  --bg: #f7fbff;
  --card: #ffffff;
  --radius: 14px;
  --glass: rgba(255,255,255,0.6);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --nav-height: 76px; /* header height used for scroll offset — adjust if you change nav size */
  /* slightly larger base */
  --base-scale: 1.02;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:#0f172a;line-height:1.5;-webkit-font-smoothing:antialiased}

/* NAV */
.nav{position:fixed;left:0;right:0;top:0;z-index:80;backdrop-filter: blur(6px);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35));border-bottom:1px solid rgba(15,23,42,0.04)}
.nav-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px; /* increased horizontal padding for more breathing room */
  gap:16px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px} /* slightly larger logo */
.brand h1{font-size:20px;margin:0;font-weight:700}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0} /* increased gap between links */
nav a{color:inherit;text-decoration:none;font-weight:600;padding:8px 6px;border-radius:8px}
nav a:hover{background:rgba(6,54,108,0.03)}
.btn-primary{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));color:white;padding:12px 18px;border-radius:12px;border:0;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(38,110,187,0.18)}
.menu-toggle{display:none;background:none;border:0;padding:8px;margin-left:8px}

/* Responsive mobile nav */
@media(max-width:900px){nav ul{display:none}.menu-toggle{display:block}}

/* HERO */
.hero{padding:120px 24px 56px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero-left h2{font-size:46px;margin:0 0 16px;line-height:1.02}
.highlight{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);margin:0 0 20px}
.cta-row{display:flex;gap:12px;align-items:center}
.subcards{display:flex;gap:12px;margin-top:18px}
.subcard{background:var(--card);padding:10px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(15,23,42,0.06);font-weight:600}
.hero-right{background:linear-gradient(180deg,rgba(255,255,255,0.7),rgba(255,255,255,0.6));padding:20px;border-radius:16px;box-shadow:0 12px 40px rgba(6,54,108,0.06)}

/* scrolling / anchor offset fixes */
/* ensure browser scrolls with an offset equal to the fixed nav */
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-height) + 8px); /* gives a small gap under the nav */
}

/* also set per-target margin as a fallback for older browsers */
section[id], header[id]{
  scroll-margin-top: calc(var(--nav-height) + 8px);
}

/* FEATURES */
.features{max-width:1200px;margin:28px auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(6,54,108,0.04)}
.feature h4{margin:0 0 8px}
.feature p{margin:0;color:var(--muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr;}.features{grid-template-columns:1fr}}

/* ABOUT / WHY */
.section{max-width:1200px;margin:36px auto;padding:0 24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.stats{display:flex;gap:18px}
.stat{background:linear-gradient(90deg,var(--grad-1),var(--grad-2));color:white;padding:18px;border-radius:12px;min-width:120px;text-align:center}

/* SERVICES */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.7));padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(6,54,108,0.04)}
.service-card h5{margin:0 0 8px}

/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price{background:var(--card);padding:20px;border-radius:14px;box-shadow:0 12px 36px rgba(6,54,108,0.06);text-align:center}
.price .cost{font-size:28px;font-weight:800;margin:12px 0}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.member{background:var(--card);padding:12px;border-radius:12px;text-align:center}
.avatar{width:72px;height:72px;border-radius:12px;background:linear-gradient(90deg,var(--grad-1),var(--grad-2));display:inline-block;margin-bottom:10px}
.member h6{margin:6px 0 4px}
.member p{margin:0;color:var(--muted);font-size:13px}
@media(max-width:1100px){.team{grid-template-columns:repeat(2,1fr)}.pricing{grid-template-columns:1fr}}
@media(max-width:600px){.team{grid-template-columns:1fr}}

/* CONTACT */
.contact-form{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 12px 36px rgba(6,54,108,0.04)}
label{display:block;margin:8px 0 6px;font-weight:600}
input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);font-size:14px}
textarea{min-height:120px}

footer{max-width:1200px;margin:36px auto;padding:24px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}

/* small helpers */
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(39,110,187,0.08);font-weight:700;color:var(--grad-1)}
.lead{font-size:16px;color:var(--muted)}
.shadow-soft{box-shadow:0 10px 30px rgba(6,54,108,0.06)}

/* small animations */
.reveal{opacity:0;transform:translateY(8px);transition:all 600ms cubic-bezier(.2,.9,.25,1)}
.reveal.show{opacity:1;transform:none}

/* quick facts: force tiles to next full line and stack nicely */
.hero-right .fact-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}
.hero-right .fact-tile{
  min-width:100%;
  background:#eef8ff;
  padding:12px;
  border-radius:10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hero-right .fact-tile.primary{
  background:linear-gradient(90deg,var(--grad-1),var(--grad-2));
  color:white;
}

/* card images for features & services */
.card-img{
  width:100%;
  height:120px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin-bottom:10px;
  background:#f3f7fb;
}

/* increase padding / touch targets */
.btn-primary{padding:12px 18px;border-radius:12px}

/* ensure services/features tiles have space for images */
.feature, .service-card{padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(6,54,108,0.04)}
.feature h4{margin:0 0 8px}
.service-card h5{margin:0 0 8px}

/* responsive tweaks keep stack on small screens */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .features{grid-template-columns:1fr}
  .hero-right .fact-grid{flex-direction:row;flex-wrap:wrap}
  .hero-right .fact-tile{flex:1 1 calc(50% - 8px)}
}
@media(max-width:600px){
  .hero-right .fact-tile{flex-basis:100%}
}