/* /styles.css
Blue theme + responsive navigation + service cards.
*/
:root{
  --navy: var(--blue-900);

  --bg: #ffffff;
  --surface: #f6f8ff;
  --text: #0b1220;
  --muted: #4b5563;

  --blue-900: #0a2e6d;
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;

  --border: rgba(10, 46, 109, 0.16);
  --shadow: 0 12px 30px rgba(2, 12, 27, 0.14);

  --radius: 16px;
  --maxw: 1200px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.contact-link{ color:var(--blue-700); font-weight:800; text-decoration:none; }
.contact-link:hover{ text-decoration:underline; }


.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 2rem;
}

.section{
  padding:4rem 0;
}

h1,h2,h3{ line-height:1.15; margin:0 0 0.75rem; }
p{ margin:0 0 1rem; color:var(--muted); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.1rem;
  border-radius:999px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; }
.btn-primary{
  background:linear-gradient(90deg, var(--blue-700), var(--blue-500));
  color:#fff;
}
.btn-secondary{
  background:transparent;
  border-color:var(--blue-600);
  color:var(--blue-700);
}

.gold-text{ color:var(--blue-700); } /* compatibility: existing class name */

.nav{
  position:sticky;
  top:0;
  z-index:2000;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav.scrolled{
  box-shadow:var(--shadow);
}

.nav-container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0.75rem 2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
}

.logo-image{ height:52px; width:auto; }

.mobile-menu-btn{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0.6rem 0.75rem;
  font-size:1.1rem;
  font-weight:800;
  color:var(--blue-900);
}

.nav-links,
.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin:0;
  padding:0;
}

.nav a{
  font-weight:700;
  color:var(--blue-900);
}
.nav a.active,
.nav a[aria-current="page"]{
  color:var(--blue-600);
  text-decoration:underline;
  text-underline-offset:6px;
}

/* Dropdowns for nav-list pages */
.dropdown{ position:relative; }
.dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:0.5rem;
  margin:0.5rem 0 0;
  list-style:none;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  display:block;
}
.dropdown-menu a{
  display:block;
  padding:0.65rem 0.75rem;
  border-radius:12px;
}
.dropdown-menu a:hover{
  background:var(--surface);
  text-decoration:none;
}

/* HERO */
.hero{
  padding:4.25rem 0 3.5rem;
  background:radial-gradient(1000px 500px at 20% 0%, rgba(59,130,246,0.20), transparent 60%),
             radial-gradient(900px 500px at 85% 10%, rgba(29,78,216,0.18), transparent 60%),
             #ffffff;
}
.hero-content{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:2.5rem;
  align-items:center;
}
.hero h1{ font-size:3rem; color:var(--blue-900); }
.hero .subtitle{ font-size:1.1rem; max-width:56ch; }
.hero-cta{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:1.25rem; }

.hero-image img{
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* CARDS */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 6px 16px rgba(2, 12, 27, 0.08);
}
.card-pad{ padding:1.25rem; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
}

/* SERVICES */
.services-menu{
  padding:4rem 0;
  background:var(--surface);
  text-align:center;
}
.services-title{
  font-size:2.35rem;
  color:var(--blue-900);
}
.services-subtitle{
  max-width:800px;
  margin:0 auto 2.5rem;
}
.service-card{
  text-align:left;
  padding:1.25rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 8px 18px rgba(2, 12, 27, 0.08);
  transition:transform 120ms ease, box-shadow 120ms ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(2, 12, 27, 0.14);
}
.service-top{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.75rem;
}
.service-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background:rgba(37,99,235,0.12);
  color:var(--blue-700);
  border:1px solid rgba(37,99,235,0.22);
}
.service-card h3{
  margin:0;
  font-size:1.05rem;
  color:var(--blue-900);
}
.service-card p{ margin:0.75rem 0 0; }
.card-link{
  display:inline-flex;
  margin-top:1rem;
  font-weight:800;
  color:var(--blue-700);
  text-decoration:none;
}
.card-link:hover{ text-decoration:underline; }

/* RESPONSIVE */
@media (max-width: 768px){
  .mobile-menu-btn{ display:block; }

  /* Hamburger nav pages */
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:0 0 16px 16px;
    flex-direction:column;
    gap:0;
    padding:0.5rem 0.75rem 0.75rem;
    display:none;
    z-index:1000;
    box-shadow:var(--shadow);
  }
  .nav-links.active{ display:flex; }
  .nav-links li{ width:100%; }
  .nav-links a{
    display:block;
    padding:0.9rem 0.75rem;
    border-radius:12px;
  }
  .nav-links a:hover{
    background:var(--surface);
    text-decoration:none;
  }

  /* nav-list pages: stack and keep dropdowns usable */
  .nav-list{
    flex-direction:column;
    align-items:flex-start;
    gap:0.25rem;
    padding:0.5rem 0;
  }
  .dropdown-menu{
    position:static;
    display:block;
    box-shadow:none;
    border:0;
    padding:0;
    margin:0.25rem 0 0.5rem 0.75rem;
    background:transparent;
  }
  .dropdown-menu a{ padding:0.5rem 0.25rem; }

  .hero-content{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.1rem; }
  .logo-image{ height:40px; }
}


/* Export analytics button */
.export-analytics{cursor:pointer;border:none;}
.export-analytics:focus{outline:2px solid rgba(255,255,255,0.6);outline-offset:2px;}