@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-dark: #070a14; --bg-surface: #0d1322; --bg-card: rgba(21, 30, 50, 0.7);
  --accent-cyan: #00e5ff; --accent-cyan-glow: rgba(0, 229, 255, 0.25);
  --accent-amber: #ff6b00; --accent-amber-glow: rgba(255, 107, 0, 0.25);
  --text-main: #f8fafc; --text-muted: #94a3b8; --text-dim: #64748b;
  --border-subtle: rgba(255, 255, 255, 0.08); --border-bright: rgba(0, 229, 255, 0.3);
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-sans); background-color: var(--bg-dark);
  background-image: radial-gradient(circle at 15% 15%, rgba(0, 229, 255, 0.07) 0%, transparent 40%), radial-gradient(circle at 85% 65%, rgba(255, 107, 0, 0.05) 0%, transparent 40%);
  background-attachment: fixed; color: var(--text-main); line-height: 1.65; -webkit-font-smoothing: antialiased;
  padding-bottom: 60px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-cyan); text-decoration: none; transition: all 0.2s ease; }

/* Header / Nav */
header {
  background: rgba(7, 10, 20, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--border-subtle);
  padding: 0.85rem 6%; display: flex; justify-content: space-between; align-items: center;
}
.brand-container {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.45rem 1.2rem; border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  transition: all 0.3s ease;
}
.brand-container:hover { background: #ffffff; box-shadow: 0 0 25px rgba(0, 229, 255, 0.35); }
.brand-logos { display: flex; align-items: center; gap: 0.9rem; }
.brand-logos img { height: 40px; width: auto; object-fit: contain; filter: none; transition: transform 0.25s ease; }
.brand-logos a:hover img { transform: scale(1.05); }
.brand-divider { height: 26px; width: 2px; background: linear-gradient(180deg, rgba(0, 229, 255, 0.2), rgba(0, 229, 255, 0.8), rgba(0, 229, 255, 0.2)); border-radius: 2px; }

.mobile-toggle { display: none; background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: #fff; font-size: 1.5rem; cursor: pointer; padding: 0.4rem 0.8rem; min-height: 44px; min-width: 44px; }
nav ul { display: flex; list-style: none; gap: 1.6rem; align-items: center; }
nav a { color: var(--text-muted); font-weight: 600; font-size: 0.95rem; }
nav a:hover { color: #fff; }
nav a.active { color: #fff; }

.cta-btn {
  background: linear-gradient(135deg, #00e5ff 0%, #0080ff 100%) !important;
  color: #040914 !important;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 800 !important;
  font-size: 0.9rem;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: 1px solid #ffffff;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(0, 229, 255, 0.75); }

/* Hero */
.hero { padding: clamp(3.5rem, 7vw, 5rem) 6% 3rem; max-width: 1280px; margin: 0 auto; text-align: center; }
.hero-badge { background: rgba(0, 229, 255, 0.08); color: var(--accent-cyan); border: 1px solid rgba(0, 229, 255, 0.3); padding: 0.4rem 1.2rem; border-radius: 30px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.8px; margin-bottom: 1.5rem; text-transform: uppercase; display: inline-block; }
.hero-badge.amber { background: rgba(255, 107, 0, 0.12); color: var(--accent-amber); border-color: rgba(255, 107, 0, 0.4); }
.hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 800; color: #fff; margin-bottom: 1.2rem; letter-spacing: -1px; line-height: 1.15; }
.hero h1 span.cyan { color: var(--accent-cyan); }
.hero h1 span.amber { color: var(--accent-amber); }
.hero p { color: var(--text-muted); font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 850px; margin: 0 auto 2.5rem; }
.hero-ctas { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.secondary-btn { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid var(--border-subtle); padding: 0.75rem 1.6rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.9rem; transition: all 0.2s ease; }
.secondary-btn:hover { border-color: var(--accent-cyan); background: rgba(0, 229, 255, 0.1); }

/* Generic content / card layout used across service pages */
.content-section { max-width: 1280px; margin: 0 auto 5rem; padding: 0 6%; }
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: stretch; }
.card-box { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 2.5rem; }
.card-box h3 { color: #fff; font-size: 1.5rem; margin-bottom: 1rem; }
.card-box p { color: var(--text-muted); margin-bottom: 1rem; font-size: 1rem; line-height: 1.7; }
.feature-list { list-style: none; margin-top: 1.5rem; }
.feature-list li { color: var(--text-main); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.feature-list li::before { content: "✓"; color: var(--accent-cyan); font-weight: bold; }

.section-title { color: #fff; font-size: 2rem; font-weight: 800; text-align: center; margin-bottom: 0.5rem; }
.section-desc { color: var(--text-muted); text-align: center; max-width: 750px; margin: 0 auto 3rem; }

/* Footer */
footer { background: var(--bg-dark); padding: 4rem 6% 2rem; border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
.footer-content { max-width: 1280px; margin: 0 auto 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-bottom { border-top: 1px solid var(--border-subtle); padding-top: 1.8rem; text-align: center; font-size: 0.85rem; color: var(--text-dim); }

/* Mobile sticky action bar */
.mobile-sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-surface); border-top: 1px solid var(--border-bright); padding: 0.75rem 1rem; z-index: 9999; justify-content: space-between; align-items: center; }
.mobile-sticky-bar a { font-size: 0.85rem; font-weight: 700; text-align: center; padding: 0.6rem 1rem; border-radius: var(--radius-sm); }
.mobile-call-btn { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--border-subtle); }
.mobile-audit-btn { background: var(--accent-cyan); color: #040914; }

@media (max-width: 900px) {
  .mobile-toggle { display: block; }
  nav ul { position: fixed; top: 75px; left: 0; right: 0; background: rgba(7, 10, 20, 0.98); backdrop-filter: blur(20px); flex-direction: column; padding: 2.5rem 6%; gap: 1.5rem; border-bottom: 1px solid var(--border-subtle); transform: translateY(-150%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
  nav ul.nav-active { transform: translateY(0); }
  .grid-2col { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: 1fr; gap: 2rem; }
  .mobile-sticky-bar { display: flex; }
}