/* ============================================
   ETI Pro Services — Dark Theme
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; background: #0A1628; color: #CBD5E1; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 { font-weight: 800; line-height: 1.1; color: #ffffff; }
.eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: #22D3EE; margin-bottom: 10px; }

:root {
  --navy:   #0A1628;
  --card:   #111E35;
  --card2:  #172540;
  --border: rgba(255,255,255,0.09);
  --violet: #5B21B6;
  --purple: #7C3AED;
  --cyan:   #06B6D4;
  --bright: #22D3EE;
  --amber:  #F59E0B;
  --green:  #10B981;
  --muted:  #94A3B8;
}

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: var(--violet); color: #fff;
  padding: 13px 28px; border-radius: 8px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--purple); transform: translateY(-1px); }

.btn-outline-light {
  display: inline-block; color: #CBD5E1; padding: 13px 26px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2); font-size: 14px; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.btn-outline-light:hover { border-color: var(--bright); color: var(--bright); }

.btn-outline {
  display: inline-block; color: #CBD5E1; padding: 13px 26px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18); font-size: 14px; font-weight: 600;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--bright); color: var(--bright); }

/* ── NAV ── */
.site-nav {
  background: rgba(10,22,40,0.98);
  border-bottom: 1px solid rgba(34,211,238,0.15);
  box-shadow: 0 1px 30px rgba(6,182,212,0.07);
  padding: 0 60px;
  height: 70px; position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 44px; width: auto; border-radius: 4px; }
.nav-logo-text { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
.nav-logo-text span { color: var(--bright); }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.65);
  padding: 8px 14px; border-radius: 7px; transition: background .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,0.07); color: #fff; }
.nav-links a.active { color: var(--bright); }
.nav-cta {
  background: var(--violet); color: #fff; padding: 10px 22px; border-radius: 7px;
  font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: background .2s;
}
.nav-cta:hover { background: var(--purple); }

/* ── PAGE HEADER (inner pages) ── */
.page-header {
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 70px 60px 60px; position: relative; overflow: hidden;
}
.page-header::after {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(91,33,182,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.page-header h1 { font-size: 52px; color: #fff; letter-spacing: -1px; position: relative; margin-bottom: 14px; }
.page-header p  { font-size: 18px; color: var(--muted); max-width: 600px; position: relative; }

/* ── SECTIONS ── */
.sec { padding: 80px 60px; }
.sec > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.sec-a { background: var(--navy); }
.sec-b { background: var(--card); }
.sec-c { background: #0C1525; }

.sec-title { font-size: 40px; letter-spacing: -1px; color: #fff; margin-bottom: 12px; }
.sec-sub   { font-size: 17px; color: var(--muted); max-width: 560px; margin-bottom: 48px; line-height: 1.7; }

/* ── SERVICE CARDS ── */
.svc-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

.svc-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 22px 18px 18px;
  border-top: 4px solid var(--violet);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.svc-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.2); box-shadow: 0 10px 32px rgba(0,0,0,0.4); }
.svc-card.hidden { display: none; }
.svc-card.tc { border-top-color: var(--cyan); }
.svc-card.tg { border-top-color: var(--green); }
.svc-card.ta { border-top-color: var(--amber); }
.svc-card.tr { border-top-color: #EF4444; }
.svc-card.ti { border-top-color: #818CF8; }
.svc-card.tp { border-top-color: #EC4899; }
.svc-card.tt { border-top-color: #2DD4BF; }
.svc-card.to { border-top-color: #FB923C; }

.svc-icon { font-size: 24px; margin-bottom: 10px; display: block; }
.svc-cat {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  background: rgba(99,102,241,0.2); color: #CBD5E1; margin-bottom: 7px;
}
.svc-card.tc .svc-cat { background: rgba(6,182,212,0.15);  color: var(--bright); }
.svc-card.tg .svc-cat { background: rgba(16,185,129,0.15); color: #6EE7B7; }
.svc-card.ta .svc-cat { background: rgba(245,158,11,0.15); color: #FCD34D; }
.svc-card.tr .svc-cat { background: rgba(239,68,68,0.15);  color: #FCA5A5; }
.svc-card.ti .svc-cat { background: rgba(129,140,248,0.15);color: #CBD5E1; }
.svc-card.tp .svc-cat { background: rgba(236,72,153,0.15); color: #F9A8D4; }
.svc-card.tt .svc-cat { background: rgba(45,212,191,0.15); color: #99F6E4; }
.svc-card.to .svc-cat { background: rgba(251,146,60,0.15); color: #FED7AA; }
.svc-card h3 { font-size: 15px; color: #fff; margin-bottom: 7px; line-height: 1.3; }
.svc-card p  { font-size: 13px; color: var(--muted); line-height: 1.6; }

.badge { display:inline-block; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-left:5px; vertical-align:middle; }
.badge.new { background: var(--violet); color: #fff; }
.badge.hot { background: #DC2626; color: #fff; }

/* ── TAB BUTTONS ── */
.tab-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; }
.tab-btn {
  background: var(--card2); border: 1px solid var(--border); color: var(--muted);
  padding: 9px 18px; border-radius: 7px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .2s;
}
.tab-btn:hover { border-color: var(--bright); color: var(--bright); }
.tab-btn.active { background: var(--violet); color: #fff; border-color: var(--bright); }

/* ── CLIENTS STRIP ── */
.clients-strip {
  background: var(--card); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 26px 60px; text-align: center;
}
.clients-lbl { font-size: 11px; color: #475569; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; }
.clients-row { display: flex; gap: 44px; justify-content: center; flex-wrap: wrap; }
.client-n { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.28); letter-spacing: 1px; text-transform: uppercase; transition: color .3s; }
.client-n:hover { color: rgba(255,255,255,0.7); }

/* ── STATS ROW ── */
.stats-row { display: grid; grid-template-columns: repeat(5,1fr); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.stat-cell { padding: 28px 20px; text-align: center; border-right: 1px solid var(--border); background: var(--card2); }
.stat-cell:last-child { border-right: none; }
.stat-v { font-size: 34px; font-weight: 900; color: #fff; line-height: 1; margin-bottom: 6px; }
.stat-v em { font-style: normal; color: var(--bright); }
.stat-l { font-size: 12px; color: #475569; line-height: 1.4; }

/* ── TAG ROW ── */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(99,102,241,0.18); color: #CBD5E1;
}

/* ── PILL ── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(34,211,238,0.35); background: rgba(34,211,238,0.08);
  color: var(--bright); font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; padding: 6px 16px; border-radius: 99px; margin-bottom: 22px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bright); }

/* ── FOOTER ── */
.site-footer {
  background: #060D1C; border-top: 1px solid var(--border);
  padding: 52px 60px 32px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-logo img { height: 40px; width: auto; border-radius: 4px; }
.footer-logo-text { font-size: 20px; font-weight: 900; color: #fff; }
.footer-logo-text span { color: var(--bright); }
.site-footer p { font-size: 13px; color: #94A3B8; line-height: 1.65; max-width: 240px; }
.site-footer h5 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #CBD5E1; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.site-footer ul a { font-size: 13px; color: #94A3B8; transition: color .2s; }
.site-footer ul a:hover { color: var(--bright); }

.footer-bottom {
  background: #060D1C; border-top: 1px solid rgba(255,255,255,0.04);
  padding: 18px 60px; display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p { font-size: 12px; color: #64748B; }

/* ── CTA BAND ── */
.cta-band { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 60px; text-align: center; }
.cta-band h2 { font-size: 52px; color: #fff; letter-spacing: -1.5px; margin-bottom: 14px; }
.cta-band h2 span { color: var(--bright); }
.cta-band p  { font-size: 17px; color: var(--muted); max-width: 480px; margin: 0 auto 36px; line-height: 1.7; }
.cta-btns { display: flex; gap: 14px; justify-content: center; }

/* ── DIVIDER ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* ── CHIPS ── */
.chip { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 99px; background: rgba(99,102,241,0.18); color: #CBD5E1; border: 1px solid rgba(99,102,241,0.3); display: inline-block; }

/* ============================================
   COLOR BOOST
   ============================================ */

/* Gradient body accent */
body {
  background: #0A1628;
}

/* Glowing card hover */
.svc-card:hover {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.2), 0 12px 40px rgba(0,0,0,0.5);
}

/* Colored top borders glow on hover */
.svc-card:hover { filter: brightness(1.04); }

/* Stats cells - accent value color */
.stat-v { color: var(--bright); }

/* Eyebrow gets a subtle glow */
.eyebrow {
  text-shadow: 0 0 20px rgba(34,211,238,0.4);
}

/* Hero gradient overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(91,33,182,0.18) 0%, rgba(6,182,212,0.08) 100%);
  pointer-events: none;
}

/* Page header gradient */
.page-header {
  background: linear-gradient(135deg, #0D1B35 0%, #150D2E 100%);
}

/* Nav bottom border glow */
.site-nav {
  border-bottom: 1px solid rgba(34,211,238,0.15);
  box-shadow: 0 1px 30px rgba(6,182,212,0.07);
}

/* Section alternation with subtle color tints */
.sec-a { background: #0A1628; }
.sec-b { background: #0E1A2E; }

/* Card backgrounds warmer */
.svc-card { background: linear-gradient(145deg, #131F38, #0F1A30); }

/* Stat cells gradient */
.stat-cell {
  background: linear-gradient(145deg, #131F38, #0F1A30);
}

/* Client names brighter */
.client-n { color: rgba(255,255,255,0.38); }
.client-n:hover { color: rgba(34,211,238,0.85); }

/* CTA band - vibrant gradient */
.cta-band {
  background: linear-gradient(135deg, #0D1B35 0%, #1a0545 50%, #0D1B35 100%);
  border-top: 1px solid rgba(91,33,182,0.3);
  border-bottom: 1px solid rgba(91,33,182,0.3);
}

/* Pill glow */
.pill {
  box-shadow: 0 0 20px rgba(34,211,238,0.15);
}

/* Footer top border accent */
.site-footer {
  border-top: 1px solid rgba(34,211,238,0.12);
}

/* Tag colors by card type */
.svc-card .tag { background: rgba(34,211,238,0.1); color: var(--bright); }

/* Cert dot pulse */
.cert-dot { box-shadow: 0 0 6px rgba(16,185,129,0.6); }

/* Why item left accent */
.why-item { border-left: 3px solid var(--violet); }
.why-item:nth-child(2) { border-left-color: var(--cyan); }
.why-item:nth-child(3) { border-left-color: var(--amber); }
.why-item:nth-child(4) { border-left-color: var(--green); }

/* Section title gradient on homepage */
.hero h1 .grad {
  background: linear-gradient(90deg, var(--bright), #818CF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Clients strip tinted */
.clients-strip {
  background: linear-gradient(135deg, #0C1525, #0E1A2E);
}

/* Stats row border glow */
.stats-row {
  box-shadow: 0 0 0 1px rgba(34,211,238,0.1), 0 8px 32px rgba(0,0,0,0.3);
}

/* Btn primary glow */
.btn-primary {
  box-shadow: 0 4px 20px rgba(91,33,182,0.4);
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(91,33,182,0.6);
}

/* Tab active glow */
.tab-btn.active {
  box-shadow: 0 4px 16px rgba(91,33,182,0.4);
}

/* Badge glow */
.badge.hot { box-shadow: 0 2px 10px rgba(220,38,38,0.4); }
.badge.new { box-shadow: 0 2px 10px rgba(91,33,182,0.4); }

/* ============================================
   CENTERED LAYOUT + MOBILE RESPONSIVE
   ============================================ */

/* ── WRAPPER — centers all content ── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Apply wrap to all sections */
.sec > *:not(style):not(script) { max-width: 1200px; margin-left: auto; margin-right: auto; }
.sec { padding: 80px 40px; }

.page-header { padding: 70px 40px 60px; }
.page-header > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.site-nav { padding: 0 40px; }
.clients-strip { padding: 26px 40px; }
.cta-band { padding: 80px 40px; }
.site-footer { padding: 52px 40px 32px; }
.footer-bottom { padding: 18px 40px; }

/* ── TABLET — 1024px ── */
@media (max-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .stats-row .stat-cell:nth-child(4),
  .stats-row .stat-cell:nth-child(5) { border-top: 1px solid var(--border); }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ── MOBILE — 768px ── */
@media (max-width: 768px) {
  /* Nav */
  .site-nav { padding: 0 20px; height: 60px; }
  .nav-links { display: none; }
  .nav-cta { padding: 8px 16px; font-size: 13px; }
  .nav-logo img { height: 36px; }

  /* Page header */
  .page-header { padding: 50px 20px 40px; }
  .page-header h1 { font-size: 34px; }
  .page-header p  { font-size: 15px; }

  /* Sections */
  .sec { padding: 52px 20px; }
  .sec-title { font-size: 28px; }
  .sec-sub   { font-size: 15px; margin-bottom: 32px; }

  /* Grids → single column */
  .svc-grid            { grid-template-columns: 1fr; }
  .card-grid-3         { grid-template-columns: 1fr; }
  .card-grid-4         { grid-template-columns: 1fr; }
  .feat-grid           { grid-template-columns: 1fr; }
  .case-preview        { grid-template-columns: 1fr; }
  .cases-grid          { grid-template-columns: 1fr; }
  .why-grid            { grid-template-columns: 1fr; }
  .team-grid           { grid-template-columns: 1fr; }
  .team-grid2          { grid-template-columns: 1fr; }
  .contact-grid        { grid-template-columns: 1fr; }
  .ind-grid            { grid-template-columns: repeat(2, 1fr); }
  .clients-grid        { grid-template-columns: repeat(2, 1fr); }
  .cp-nums             { grid-template-columns: repeat(2, 1fr); }
  .hero-stats          { flex-wrap: wrap; gap: 28px; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat-v    { font-size: 26px; }

  /* Hero */
  .hero { padding: 60px 20px 50px; }
  .hero h1 { font-size: 38px; letter-spacing: -1px; }
  .hero p  { font-size: 16px; }
  .hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* CTA band */
  .cta-band { padding: 52px 20px; }
  .cta-band h2 { font-size: 32px; }
  .cta-btns { flex-direction: column; align-items: center; gap: 10px; }

  /* Clients strip */
  .clients-strip { padding: 20px; }
  .clients-row   { gap: 20px; }
  .client-n      { font-size: 11px; }

  /* Case study */
  .cp-left  { padding: 28px 22px; }
  .cp-right { padding: 28px 22px; }
  .cp-left h3 { font-size: 22px; }
  .case-metrics { flex-wrap: wrap; gap: 10px; }

  /* Tab buttons */
  .tab-row { gap: 8px; }
  .tab-btn { font-size: 12px; padding: 7px 12px; }

  /* Footer */
  .site-footer     { grid-template-columns: 1fr; gap: 28px; padding: 40px 20px 28px; }
  .footer-bottom   { flex-direction: column; gap: 6px; text-align: center; padding: 16px 20px; }

  /* Case cards */
  .case-card .case-head { padding: 24px 22px 20px; }
  .case-card .case-body { padding: 22px; }

  /* Team cards */
  .team-card  { padding: 24px 20px; }
  .team-card2 { padding: 24px 20px; }
  .why-block  { grid-template-columns: 1fr; padding: 28px 22px; gap: 24px; }

  /* Contact */
  .contact-form   { padding: 28px 22px; }
  .form-row       { grid-template-columns: 1fr; }
  .calendly-card  { padding: 24px 20px; }
  .info-card      { padding: 22px; }

  /* Hiring band */
  .hiring-band { flex-direction: column; gap: 20px; padding: 28px 22px; text-align: center; }

  /* CTA strip */
  .cta-strip { flex-direction: column; gap: 20px; padding: 28px 22px; text-align: center; }
}

/* ── SMALL MOBILE — 480px ── */
@media (max-width: 480px) {
  .hero h1    { font-size: 30px; }
  .sec-title  { font-size: 24px; }
  .cta-band h2 { font-size: 26px; }
  .page-header h1 { font-size: 28px; }
  .stats-row  { grid-template-columns: 1fr 1fr; }
  .ind-grid   { grid-template-columns: 1fr 1fr; }
  .btn-primary, .btn-outline-light, .btn-outline { width: 100%; text-align: center; }
}

/* ── MOBILE HAMBURGER MENU ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s;
}

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: #0A1628;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 20px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  padding: 12px 16px;
  border-radius: 8px;
  display: block;
}
.nav-mobile-menu a:hover { background: rgba(255,255,255,0.07); color: var(--bright); }
.nav-mobile-menu .nav-cta-mob {
  margin-top: 8px;
  background: var(--violet);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
}

/* ============================================
   CENTERING + MOBILE RESPONSIVE
   ============================================ */

/* ── CENTERED WRAPPER ── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Apply wrap to all sections */
.sec > *:not(style):not(script) { }

.sec {
  padding: 80px 60px;
}

/* All direct section children get centered */
.sec > .eyebrow,
.sec > .sec-title,
.sec > .sec-sub,
.sec > .tab-row,
.sec > .svc-grid,
.sec > .feat-grid,
.sec > .why-grid,
.sec > .stats-row,
.sec > .case-preview,
.sec > .cases-grid,
.sec > .clients-grid,
.sec > .team-grid,
.sec > .team-grid2,
.sec > .team-why,
.sec > .why-block,
.sec > .hiring-band,
.sec > .contact-grid,
.sec > .ind-grid,
.sec > .cta-strip,
.sec > div,
.sec > form,
.sec > ul,
.sec > p {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Nav inner */
.site-nav { max-width: 100%; padding: 0 60px; }

/* Page header inner content */
.page-header > * { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; }

/* Clients strip */
.clients-strip { padding: 26px 60px; }
.clients-strip > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Footer */
.site-footer { max-width: 100%; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }

/* CTA band */
.cta-band { padding: 80px 60px; }
.cta-band > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 1024px) {
  .sec { padding: 60px 40px; }
  .site-nav { padding: 0 30px; }
  .page-header { padding: 50px 40px 44px; }
  .clients-strip { padding: 22px 30px; }
  .cta-band { padding: 60px 40px; }

  .svc-grid  { grid-template-columns: repeat(2, 1fr); }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .stats-row .stat-cell:nth-child(4),
  .stats-row .stat-cell:nth-child(5) { border-top: 1px solid var(--border); }
  .why-grid  { grid-template-columns: 1fr; }
  .case-preview { grid-template-columns: 1fr; }
  .cases-grid   { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid    { grid-template-columns: repeat(2, 1fr); }
  .team-grid2   { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .ind-grid     { grid-template-columns: repeat(2, 1fr); }
  .cp-nums      { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer  { grid-template-columns: 1fr 1fr; gap: 28px; }
  .why-block    { grid-template-columns: 1fr; gap: 24px; }
  .team-why     { grid-template-columns: 1fr; gap: 24px; }
  .cta-strip    { flex-direction: column; gap: 20px; text-align: center; }
  .hiring-band  { flex-direction: column; gap: 20px; text-align: center; }
}

@media (max-width: 768px) {
  .sec { padding: 48px 20px; }
  .site-nav { padding: 0 20px; height: 62px; }
  .page-header { padding: 40px 20px 36px; }
  .clients-strip { padding: 20px; }
  .cta-band { padding: 48px 20px; }
  .footer-bottom { padding: 16px 20px; flex-direction: column; gap: 6px; text-align: center; }
  .site-footer { padding: 40px 20px 28px; grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }

  /* Nav - hide links, show just logo + CTA */
  .nav-links { display: none; }
  .site-nav { justify-content: space-between; }

  /* Typography scale down */
  .hero h1 { font-size: 40px; letter-spacing: -1px; }
  .sec-title { font-size: 28px; }
  .page-header h1 { font-size: 36px; }
  .cta-band h2 { font-size: 34px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hs-n { font-size: 30px; }

  /* Grids → single column */
  .svc-grid     { grid-template-columns: 1fr; }
  .feat-grid    { grid-template-columns: 1fr; }
  .stats-row    { grid-template-columns: repeat(2, 1fr); }
  .why-grid     { grid-template-columns: 1fr; }
  .cases-grid   { grid-template-columns: 1fr; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid    { grid-template-columns: 1fr; }
  .team-grid2   { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .ind-grid     { grid-template-columns: repeat(2, 1fr); }
  .form-row     { grid-template-columns: 1fr; }
  .cp-nums      { grid-template-columns: repeat(2, 1fr); }
  .case-metrics { flex-wrap: wrap; }
  .clients-row  { gap: 20px; }
  .hero-btns    { flex-direction: column; }
  .cta-btns     { flex-direction: column; align-items: center; }
  .hero-btns .btn-primary,
  .hero-btns .btn-outline-light,
  .cta-btns .btn-primary,
  .cta-btns .btn-outline-light { width: 100%; text-align: center; }

  /* Cards full width */
  .why-item   { flex-direction: column; }
  .cp-left    { padding: 28px 24px; }
  .cp-right   { padding: 24px; }
  .case-head  { padding: 24px 20px 20px; }
  .case-body  { padding: 20px; }
  .team-why   { padding: 28px 24px; }
  .why-block  { padding: 28px 24px; }
  .cta-strip  { padding: 28px 24px; }
  .hiring-band { padding: 28px 24px; border-radius: 12px; }

  /* Tab buttons scroll horizontally */
  .tab-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 32px; }
  .sec-title { font-size: 24px; }
  .page-header h1 { font-size: 28px; }
  .cta-band h2 { font-size: 26px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: 1fr 1fr; }
  .ind-grid { grid-template-columns: 1fr 1fr; }
  .cp-nums  { grid-template-columns: 1fr 1fr; }
  .nav-cta  { padding: 8px 14px; font-size: 13px; }
}

/* ============================================
   LAYOUT — CENTERED MAX-WIDTH + MOBILE
   ============================================ */

/* Centered container for all sections */
.sec > *:not(style):not(script) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Inner wrapper approach — wrap content */
.sec {
  padding: 80px 60px;
}

.inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Fix nav and header to also use max-width inner */
.site-nav {
  padding: 0 60px;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.page-header {
  padding: 70px 60px 60px;
}
.page-header .inner {
  max-width: 1200px;
  margin: 0 auto;
}

.clients-strip { padding: 26px 60px; }
.clients-strip .inner { max-width: 1200px; margin: 0 auto; }

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================
   MOBILE RESPONSIVE — 768px
   ============================================ */
@media (max-width: 768px) {

  /* NAV */
  .site-nav { padding: 0 20px; height: auto; flex-wrap: wrap; }
  .nav-inner { flex-wrap: wrap; gap: 12px; padding: 14px 0; }
  .nav-links { display: none; } /* hide links on mobile, show hamburger ideally */
  .nav-cta { font-size: 13px; padding: 8px 16px; }

  /* HERO */
  .hero { padding: 60px 20px 50px; }
  .hero h1 { font-size: 40px; }
  .hero p  { font-size: 16px; }
  .hero-btns { flex-direction: column; }
  .hero-btns a { text-align: center; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .hs-n { font-size: 30px; }

  /* PAGE HEADER */
  .page-header { padding: 50px 20px 40px; }
  .page-header h1 { font-size: 36px; }
  .page-header p  { font-size: 15px; }

  /* SECTIONS */
  .sec { padding: 52px 20px; }

  /* TITLES */
  .sec-title { font-size: 28px; }
  .sec-sub   { font-size: 15px; }

  /* GRIDS — stack to 1 column */
  .svc-grid         { grid-template-columns: 1fr; }
  .card-grid-3      { grid-template-columns: 1fr; }
  .card-grid-4      { grid-template-columns: 1fr 1fr; }
  .feat-grid        { grid-template-columns: 1fr; }
  .why-grid         { grid-template-columns: 1fr; }
  .stats-row        { grid-template-columns: 1fr 1fr; }
  .stat-cell        { border-right: none; border-bottom: 1px solid var(--border); }
  .clients-row      { gap: 20px; }

  /* CASE STUDY */
  .case-preview     { grid-template-columns: 1fr; }
  .cp-left          { padding: 32px 24px; }
  .cp-right         { padding: 28px 24px; }
  .cp-nums          { grid-template-columns: 1fr 1fr; }
  .cp-cta           { flex-direction: column; }

  /* TEAM */
  .team-grid        { grid-template-columns: 1fr; }
  .team-grid2       { grid-template-columns: 1fr; }
  .why-block        { grid-template-columns: 1fr; padding: 28px 20px; }

  /* CONTACT */
  .contact-grid     { grid-template-columns: 1fr; }
  .form-row         { grid-template-columns: 1fr; }
  .calendly-card    { padding: 24px 20px; }

  /* CASES */
  .cases-grid       { grid-template-columns: 1fr; }
  .case-metrics     { flex-wrap: wrap; }
  .clients-grid     { grid-template-columns: 1fr 1fr; }

  /* FOOTER */
  .footer-inner     { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer      { padding: 40px 20px 24px; }
  .footer-bottom    { padding: 14px 20px; flex-direction: column; gap: 6px; text-align: center; }
  .footer-bottom-inner { flex-direction: column; gap: 6px; text-align: center; }

  /* CTA BAND */
  .cta-band { padding: 52px 20px; }
  .cta-band h2 { font-size: 34px; }
  .cta-btns { flex-direction: column; align-items: center; }

  /* TABS */
  .tab-row { gap: 8px; }
  .tab-btn { padding: 8px 14px; font-size: 12px; }

  /* HIRING / CTA STRIPS */
  .hiring-band      { flex-direction: column; gap: 20px; padding: 28px 20px; text-align: center; }
  .cta-strip        { flex-direction: column; gap: 20px; padding: 28px 20px; text-align: center; }

  /* SERVICES page section grids */
  .svc-grid-full    { grid-template-columns: 1fr; }
  .ind-grid         { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   TABLET — 1024px
   ============================================ */
@media (max-width: 1024px) {
  .sec { padding: 60px 32px; }
  .site-nav { padding: 0 32px; }
  .page-header { padding: 60px 32px 48px; }
  .clients-strip { padding: 24px 32px; }
  .site-footer { padding: 48px 32px 24px; }
  .footer-bottom { padding: 16px 32px; }
  .cta-band { padding: 64px 32px; }

  .svc-grid         { grid-template-columns: 1fr 1fr; }
  .card-grid-4      { grid-template-columns: 1fr 1fr; }
  .feat-grid        { grid-template-columns: 1fr 1fr; }
  .stats-row        { grid-template-columns: 1fr 1fr 1fr; }
  .team-grid        { grid-template-columns: 1fr 1fr; }
  .team-grid2       { grid-template-columns: 1fr 1fr; }
  .clients-grid     { grid-template-columns: 1fr 1fr 1fr; }
  .footer-inner     { grid-template-columns: 1fr 1fr; gap: 32px; }
  .case-preview     { grid-template-columns: 1fr; }
  .why-block        { grid-template-columns: 1fr; }
  .contact-grid     { grid-template-columns: 1fr; }
  .cases-grid       { grid-template-columns: 1fr; }
  .ind-grid         { grid-template-columns: 1fr 1fr; }

  .hero h1 { font-size: 54px; }
  .sec-title { font-size: 34px; }
}

/* ============================================
   LAYOUT — CENTERED CONTAINER + MOBILE RESPONSIVE
   ============================================ */

/* Inner wrapper to center all section content */
.sec { padding: 80px 0; }
.sec > .inner,
.sec > .eyebrow,
.sec > .sec-title,
.sec > .sec-title-white,
.sec > .sec-sub,
.sec > .sec-sub-white,
.sec > .svc-grid,
.sec > .feat-grid,
.sec > .card-grid-3,
.sec > .card-grid-4,
.sec > .stats-row,
.sec > .tab-row,
.sec > .why-grid,
.sec > .team-grid,
.sec > .team-grid2,
.sec > .cases-grid,
.sec > .clients-grid,
.sec > .contact-grid,
.sec > .ind-grid,
.sec > .cta-strip,
.sec > div,
.sec > p,
.sec > h2,
.sec > h3 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Nav inner */
.site-nav { padding: 0; }
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  width: 100%;
}

/* Page header inner */
.page-header { padding: 70px 0 60px; }
.page-header > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
}

/* Clients strip */
.clients-strip { padding: 26px 0; }
.clients-strip > * {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Hero */
.hero { padding: 100px 0 90px; }
.hero > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  position: relative;
}
.hero-glow, .hero-glow2 { 
  max-width: none !important; 
  padding: 0 !important; 
  margin: 0 !important;
}

/* CTA band */
.cta-band { padding: 80px 0; }
.cta-band > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* Footer */
.site-footer { padding: 52px 0 32px; }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-bottom { padding: 18px 0; }
.footer-bottom > * {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================
   MOBILE RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .svc-grid          { grid-template-columns: repeat(2, 1fr); }
  .feat-grid         { grid-template-columns: repeat(2, 1fr); }
  .card-grid-4       { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3       { grid-template-columns: repeat(2, 1fr); }
  .team-grid         { grid-template-columns: repeat(2, 1fr); }
  .team-grid2        { grid-template-columns: repeat(2, 1fr); }
  .cases-grid        { grid-template-columns: 1fr; }
  .clients-grid      { grid-template-columns: repeat(3, 1fr); }
  .ind-grid          { grid-template-columns: repeat(4, 1fr); }
  .stats-row         { grid-template-columns: repeat(3, 1fr); }
  .contact-grid      { grid-template-columns: 1fr; }
  .why-grid          { grid-template-columns: 1fr; }
  .footer-inner      { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero h1           { font-size: 52px; }
  .sec-title         { font-size: 32px; }
  .page-header h1    { font-size: 40px; }
  .case-preview      { grid-template-columns: 1fr; }
  .cp-left, .cp-right { border-radius: 0; }
  .why-block         { grid-template-columns: 1fr; gap: 28px; }
  .cta-strip         { flex-direction: column; gap: 20px; text-align: center; }
  .hiring-band       { flex-direction: column; gap: 20px; text-align: center; }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  /* Nav */
  .nav-inner         { padding: 0 20px; }
  .nav-links         { display: none; }
  .site-nav          { height: 60px; }

  /* Hero */
  .hero              { padding: 60px 0 50px; }
  .hero h1           { font-size: 38px; letter-spacing: -1px; }
  .hero p            { font-size: 16px; }
  .hero-stats        { flex-wrap: wrap; gap: 24px; }
  .hero-btns         { flex-direction: column; }
  .hero-btns a       { text-align: center; }

  /* Sections */
  .sec               { padding: 52px 0; }
  .sec > *           { padding-left: 20px; padding-right: 20px; }
  .page-header       { padding: 44px 0 36px; }
  .page-header > *   { padding-left: 20px; padding-right: 20px; }
  .page-header h1    { font-size: 32px; }
  .page-header p     { font-size: 15px; }
  .cta-band          { padding: 52px 0; }
  .cta-band > *      { padding-left: 20px; padding-right: 20px; }
  .clients-strip > * { padding-left: 20px; padding-right: 20px; }
  .hero > *          { padding-left: 20px; padding-right: 20px; }

  /* Grids → single column */
  .svc-grid          { grid-template-columns: 1fr; }
  .feat-grid         { grid-template-columns: 1fr; }
  .card-grid-4       { grid-template-columns: 1fr; }
  .card-grid-3       { grid-template-columns: 1fr; }
  .team-grid         { grid-template-columns: 1fr; }
  .team-grid2        { grid-template-columns: 1fr; }
  .clients-grid      { grid-template-columns: repeat(2, 1fr); }
  .ind-grid          { grid-template-columns: repeat(2, 1fr); }
  .stats-row         { grid-template-columns: repeat(2, 1fr); }
  .footer-inner      { grid-template-columns: 1fr; gap: 28px; }
  .cp-nums           { grid-template-columns: repeat(2, 1fr); }

  /* Typography */
  .sec-title         { font-size: 28px; }
  .cta-band h2       { font-size: 32px; }
  .hero h1           { font-size: 36px; }
  .hs-n              { font-size: 30px; }

  /* Clients row */
  .clients-row       { gap: 20px; }
  .client-n          { font-size: 11px; }

  /* CTA */
  .cta-btns          { flex-direction: column; align-items: center; }
  .cta-btns a        { width: 100%; max-width: 300px; text-align: center; }

  /* Footer */
  .footer-bottom > * { flex-direction: column; gap: 6px; text-align: center; }
  .footer-inner      { padding: 0 20px; }

  /* Forms */
  .form-row          { grid-template-columns: 1fr; }
  .contact-grid      { grid-template-columns: 1fr; }
  .contact-side      { order: -1; }

  /* Case study */
  .case-preview      { grid-template-columns: 1fr; }
  .cp-left           { padding: 32px 24px; }
  .cp-right          { padding: 28px 24px; }
  .case-metrics      { flex-wrap: wrap; }
  .cm                { min-width: 80px; }

  /* Why block */
  .why-block         { padding: 28px 24px; grid-template-columns: 1fr; }
  .hiring-band       { padding: 28px 24px; flex-direction: column; gap: 20px; text-align: center; }
  .cta-strip         { padding: 28px 24px; flex-direction: column; gap: 16px; text-align: center; }

  /* Tab buttons */
  .tab-row           { gap: 8px; }
  .tab-btn           { font-size: 12px; padding: 8px 12px; }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  .hero h1           { font-size: 30px; }
  .sec-title         { font-size: 24px; }
  .cta-band h2       { font-size: 26px; }
  .page-header h1    { font-size: 26px; }
  .stats-row         { grid-template-columns: 1fr 1fr; }
  .clients-grid      { grid-template-columns: 1fr 1fr; }
  .ind-grid          { grid-template-columns: 1fr 1fr; }
  .cp-nums           { grid-template-columns: 1fr 1fr; }
  .case-metrics      { flex-direction: column; }
  .nav-cta           { font-size: 12px; padding: 8px 14px; }
}

/* ── HAMBURGER + MOBILE MENU ── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #CBD5E1;
  border-radius: 2px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  flex-direction: column;
  background: #0D1B35;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px 20px 20px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: #CBD5E1;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color .2s;
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--bright); }
.mobile-menu .mobile-cta {
  margin-top: 16px;
  background: var(--violet);
  color: #fff;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  border-bottom: none;
  font-weight: 700;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-cta   { display: none; }
}