/* ============================================================
   Prashant Tiwari — Digital Marketing Specialist
   Main Stylesheet
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --navy-950: #060b18;
  --navy-900: #0a1128;
  --navy-800: #0f1b3c;
  --navy-700: #16234d;
  --navy-600: #1e2f66;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --cyan-400: #22d3ee;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --white: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --green-500: #16a34a;

  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(10, 17, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 17, 40, 0.10);
  --shadow-lg: 0 20px 48px rgba(10, 17, 40, 0.16);

  --container-w: 1180px;
  --transition: 0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x:hidden on body alone doesn't reliably clip horizontal
   overflow on every mobile browser — the root scroller can be <html>
   instead, so it needs the same rule as a backstop. This is a safety net
   only; the real fix is not producing overflow in the first place (see
   the grid minmax(0,1fr) tracks below). */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font-body);
  color: var(--slate-700);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-900);
  line-height: 1.25;
  font-weight: 600;
}
h1 { font-weight: 700; }
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 96px 0; }
.section-alt { background: var(--slate-50); }
.section-dark { background: var(--navy-900); color: var(--slate-200); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }

/* ---------- Eyebrow / Tags ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-500);
  background: rgba(37, 99, 235, 0.08);
  padding: 7px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 18px;
}
.section-dark .eyebrow { color: var(--cyan-400); background: rgba(34, 211, 238, 0.1); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--slate-500); font-size: 17px; }
.section-dark .section-head p { color: var(--slate-400); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15.5px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
  color: var(--navy-950);
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.28);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(245, 158, 11, 0.36); }
.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(148, 163, 184, 0.4);
  color: var(--navy-900);
}
.btn-outline:hover { border-color: var(--blue-500); color: var(--blue-500); transform: translateY(-3px); }
.section-dark .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.25); }
.section-dark .btn-outline:hover { border-color: var(--cyan-400); color: var(--cyan-400); }
.btn-light { background: var(--white); color: var(--navy-900); box-shadow: var(--shadow-md); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* NOTE: backdrop-filter deliberately lives on ::before, not here.
     backdrop-filter/transform/filter on this element would create a new
     CSS containing block for any position:fixed descendant (like the
     mobile nav drawer below), breaking its full-screen positioning. */
}
.site-header::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(6, 11, 24, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--transition);
}
.site-header.scrolled::before { background: rgba(6, 11, 24, 0.94); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: var(--white); letter-spacing: -0.01em; }
.brand-name span { color: var(--cyan-400); }
.brand-tag { font-size: 11px; color: var(--slate-400); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--slate-200);
  position: relative; padding: 6px 0; transition: color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--cyan-400); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px;
  background: var(--cyan-400); border-radius: 2px;
}
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  width: 280px; padding: 10px; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Hover-to-reveal is for real mouse pointers only — gated behind a
   hover+fine-pointer feature query so it can never leak onto touchscreens,
   where tapping can otherwise trigger a brief synthetic :hover state and
   misposition the mobile dropdown (which uses static positioning instead). */
@media (hover: hover) and (pointer: fine) {
  .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
}
.dropdown a { color: var(--navy-800); padding: 12px 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.dropdown a:hover { background: var(--slate-100); color: var(--blue-500); }
.dropdown a small { color: var(--slate-500); font-weight: 400; font-size: 12.5px; }
.dropdown a.active::after { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .btn { padding: 11px 22px; font-size: 14px; }
.call-chip {
  display: flex; align-items: center; gap: 8px; color: var(--white); font-size: 14px; font-weight: 600;
}
.call-chip svg { width: 17px; height: 17px; color: var(--cyan-400); }

.nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.08); }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ''; display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: var(--transition); }
.nav-toggle::before { transform: translateY(-6px); }
.nav-toggle::after { transform: translateY(6px); }
.nav-toggle span { display: none; }
.nav-toggle.open::before { transform: rotate(45deg); }
.nav-toggle.open::after { transform: rotate(-45deg) translateY(0); margin-top: -2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 168px 0 110px;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(37,99,235,0.35), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(34,211,238,0.22), transparent 50%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=1600&q=60');
  background-size: cover; background-position: center;
  opacity: 0.12; mix-blend-mode: luminosity;
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); color: var(--white); margin-bottom: 22px; letter-spacing: -0.01em; }
.hero h1 .highlight {
  background: linear-gradient(90deg, var(--cyan-400), var(--amber-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 18px; color: var(--slate-400); max-width: 540px; margin-bottom: 34px; }
.hero-stats { display: flex; gap: 34px; margin-top: 48px; flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-family: var(--font-head); font-size: 30px; color: var(--white); }
.hero-stats .stat span { font-size: 13px; color: var(--slate-400); }

.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(10px);
}
.hero-card img { border-radius: var(--radius-md); width: 100%; height: 300px; object-fit: cover; }
.hero-card .badge-float {
  margin-top: -46px; margin-left: 18px; position: relative; z-index: 2;
  background: var(--white); color: var(--navy-900); border-radius: var(--radius-md);
  padding: 16px 20px; display: inline-flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg);
  max-width: 260px;
}
.badge-float .icon-circle { width: 40px; height: 40px; border-radius: 50%; background: rgba(22,163,74,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.badge-float .icon-circle svg { width: 20px; height: 20px; color: var(--green-500); }
.badge-float b { font-size: 15px; display: block; }
.badge-float span { font-size: 12px; color: var(--slate-500); }

.trust-strip { position: relative; z-index: 1; margin-top: 64px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.08); }
.trust-strip p { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-500); margin-bottom: 18px; }
.trust-logos { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; color: var(--slate-400); font-family: var(--font-head); font-weight: 600; font-size: 15px; }

/* ---------- Icon Circles / Feature Icons ---------- */
.icon-box {
  width: 58px; height: 58px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(34,211,238,0.1));
  margin-bottom: 22px;
}
.icon-box svg { width: 28px; height: 28px; color: var(--blue-500); }

/* ---------- Cards Grid ---------- */
/* minmax(0, 1fr) instead of a bare 1fr on every grid track below — a bare
   1fr track still can't shrink below its content's min-content width, so a
   long heading/word can silently blow the grid (and the whole page) wider
   than the viewport. minmax(0, 1fr) lets tracks shrink and content wrap
   instead, which is what actually keeps mobile layouts from overflowing. */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { color: var(--slate-500); font-size: 15px; margin-bottom: 16px; }
.card-link { font-size: 14px; font-weight: 600; color: var(--blue-500); display: inline-flex; align-items: center; gap: 6px; }
.card-link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.card:hover .card-link svg { transform: translateX(4px); }
.card-num { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--slate-400); margin-bottom: 14px; }

/* ---------- About / Split Sections ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.split.reverse { grid-template-columns: 1.1fr 0.9fr; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; height: 460px; object-fit: cover; }
.split-media { position: relative; }
.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.media-stat {
  position: absolute; bottom: 20px; left: 20px; background: rgba(6,11,24,0.85); backdrop-filter: blur(8px);
  color: var(--white); padding: 16px 20px; border-radius: var(--radius-md); display: flex; gap: 16px;
}
.media-stat div b { display: block; font-family: var(--font-head); font-size: 22px; }
.media-stat div span { font-size: 11.5px; color: var(--slate-400); }

.check-list { margin: 26px 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--slate-600); }
.check-list svg { width: 20px; height: 20px; color: var(--green-500); flex-shrink: 0; margin-top: 2px; }

/* ---------- Stats Band ---------- */
.stats-band { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: var(--white); padding: 64px 0; }
.stats-band .grid-4 { text-align: center; }
.stats-band b { display: block; font-family: var(--font-head); font-size: clamp(30px,4vw,42px); background: linear-gradient(90deg, var(--cyan-400), var(--amber-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-band span { color: var(--slate-400); font-size: 14px; }

/* ---------- Process Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 32px 24px 24px; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-head); font-weight: 700; font-size: 28px; color: var(--slate-200);
  position: absolute; top: 18px; right: 22px;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--slate-500); }

/* ---------- Portfolio Cards ---------- */
.case-card { border: 1px solid var(--slate-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); transition: box-shadow var(--transition), transform var(--transition); }
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.case-head { padding: 26px 28px; display: flex; align-items: center; gap: 16px; background: var(--navy-900); color: var(--white); }
.case-head .icon-box { margin: 0; background: rgba(255,255,255,0.08); }
.case-head .icon-box svg { color: var(--cyan-400); }
.case-head b { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan-400); display: block; }
.case-head h3 { color: var(--white); font-size: 19px; margin-top: 3px; }
.case-body { padding: 26px 28px; }
.case-body > p { color: var(--slate-500); font-size: 14.5px; margin-bottom: 18px; }
.case-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.result-pill { background: var(--slate-50); border-radius: var(--radius-md); padding: 14px 16px; }
.result-pill b { display: block; font-family: var(--font-head); color: var(--blue-500); font-size: 15px; margin-bottom: 3px; }
.result-pill span { font-size: 12.5px; color: var(--slate-500); }
.case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.case-tags span { font-size: 12px; background: rgba(37,99,235,0.08); color: var(--blue-500); padding: 5px 12px; border-radius: var(--radius-full); font-weight: 600; }

/* ---------- Testimonial / Quote strip ---------- */
.quote-strip { background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); padding: 50px; display: flex; gap: 40px; align-items: center; }
.quote-strip svg { width: 46px; flex-shrink: 0; color: var(--amber-400); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--slate-200); padding: 22px 0; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--navy-900); }
.faq-q svg { width: 20px; height: 20px; color: var(--slate-400); flex-shrink: 0; transition: transform var(--transition); }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: var(--slate-500); font-size: 15px; }
.faq-a p { padding-top: 14px; }
.faq-item.open .faq-a { max-height: 260px; }

/* ---------- CTA Band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--navy-950), var(--navy-800) 60%, var(--navy-700));
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.25), transparent 70%);
  top: -120px; right: -80px;
}
.cta-band h2 { color: var(--white); font-size: clamp(26px,3.4vw,36px); margin-bottom: 14px; }
.cta-band p { color: var(--slate-400); max-width: 520px; margin: 0 auto 32px; }
.cta-band .btn-row { justify-content: center; }

/* ---------- Contact Page ---------- */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; }
.contact-info-card { background: var(--navy-900); color: var(--white); border-radius: var(--radius-lg); padding: 40px; }
.contact-info-card h3 { color: var(--white); font-size: 20px; margin-bottom: 24px; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.contact-row .icon-box { margin-bottom: 0; background: rgba(255,255,255,0.08); flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; }
.contact-row .icon-box svg { width: 22px; height: 22px; color: var(--cyan-400); }
.contact-row b { display: block; font-size: 15px; margin-bottom: 3px; }
.contact-row a, .contact-row span { font-size: 14.5px; color: var(--slate-400); }
.contact-row a:hover { color: var(--cyan-400); }
.social-row { display: flex; gap: 12px; margin-top: 30px; }
.social-row a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.social-row a:hover { background: var(--cyan-400); }
.social-row svg { width: 18px; height: 18px; color: var(--white); }

.form-card { background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--navy-800); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--slate-200); border-radius: 10px; padding: 13px 16px; font-family: inherit; font-size: 14.5px;
  color: var(--navy-900); transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 12.5px; color: var(--slate-500); margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: var(--slate-400); padding-top: 72px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-grid h4 { color: var(--white); font-size: 15px; margin-bottom: 20px; }
.footer-grid ul { display: flex; flex-direction: column; gap: 12px; }
.footer-grid a { font-size: 14px; color: var(--slate-400); transition: color var(--transition); }
.footer-grid a:hover { color: var(--cyan-400); }
.footer-about p { font-size: 14px; margin: 16px 0 22px; max-width: 300px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; font-size: 13px; flex-wrap: wrap; gap: 12px; }
.footer-bottom a { color: var(--slate-400); }
.footer-bottom a:hover { color: var(--cyan-400); }

/* ---------- Floating widgets ---------- */
.float-stack { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.fab { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform var(--transition); }
.fab:hover { transform: scale(1.08); }
.fab-whatsapp { background: #25d366; }
.fab-whatsapp svg { width: 28px; height: 28px; color: var(--white); }
.fab-top { width: 44px; height: 44px; background: var(--navy-900); opacity: 0; visibility: hidden; transform: translateY(10px); }
.fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top svg { width: 18px; height: 18px; color: var(--white); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--slate-400); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--slate-400); }
.breadcrumb a:hover { color: var(--cyan-400); }
.page-hero { padding: 158px 0 76px; background: linear-gradient(180deg, var(--navy-950), var(--navy-900)); color: var(--white); position: relative; overflow: hidden; }
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(37,99,235,0.3), transparent 55%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); color: var(--white); max-width: 720px; }
.page-hero p { color: var(--slate-400); font-size: 17px; max-width: 620px; margin-top: 16px; }

/* ---------- Reveal Animation ----------
   Pure CSS, load-triggered fade-in — no JS/IntersectionObserver dependency,
   so content is never at risk of staying invisible (works even if JS fails,
   is slow, or is blocked). */
.reveal { animation: fadeInUp 0.7s ease both; }
.reveal:nth-child(2) { animation-delay: 0.06s; }
.reveal:nth-child(3) { animation-delay: 0.12s; }
.reveal:nth-child(4) { animation-delay: 0.18s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .nav-links, .header-actions .btn-primary, .call-chip { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { max-width: 460px; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
}
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* THE FIX: this used to stay at 2 columns all the way down to the
     smallest phones. A 4-card grid (service cards, skill cards) squeezed
     into ~155px-wide columns forced card content wider than its share,
     which blew the grid — and the whole page — past the viewport edge
     (visible as a white strip / horizontal scroll on real phones). Full
     single-column stacking below this width is both the fix and the
     more readable layout on a narrow screen. */
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .cta-band { padding: 40px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .quote-strip { flex-direction: column; text-align: center; padding: 34px 26px; }
  .hero { padding: 140px 0 80px; }
  .page-hero { padding: 130px 0 56px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 22px; }
  .container { padding: 0 18px; }
}

/* Mobile nav drawer */
@media (max-width: 992px) {
  .nav-links {
    position: fixed; top: 78px; left: 0; right: 0; bottom: 0;
    background: var(--navy-950); flex-direction: column; align-items: flex-start;
    padding: 28px 24px; gap: 6px; transform: translateX(100%); transition: transform var(--transition);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; transform: translateX(0); }
  .nav-links a { width: 100%; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .has-dropdown { width: 100%; }
  .dropdown {
    position: static; transform: none; width: 100%; opacity: 1; visibility: visible; box-shadow: none;
    background: rgba(255,255,255,0.03); display: none; margin-top: 4px;
  }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown a { color: var(--slate-200); }
  .dropdown a:hover { background: rgba(255,255,255,0.06); }
  .nav-links .header-actions-mobile { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; width: 100%; }
}
.header-actions-mobile { display: none; }