/* ============================================================
   JamTech shared design system for redesigned service pages
   Reproduces the live site's tokens (globals.css) + component
   patterns (Tailwind classes) as portable CSS for hi-fi mockups.
   Brand: dark canvas, amber accent, Geist Sans + Geist Mono.
   ============================================================ */

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

:root {
  --bg:            #0a0a0a;
  --fg:            #f1f5f9;
  --accent:        #fbbf24;
  --accent-dark:   #f59e0b;
  --muted:         #9ca3af;
  --muted-dim:     #6b7280;
  --card:          #18181b;
  --card-2:        #141417;
  --card-border:   #27272a;
  --card-border-2: #1f1f23;
  --badge-bg:      #1c1917;

  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --maxw: 1152px;   /* max-w-6xl */
  --maxw-narrow: 896px; /* max-w-4xl */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: #0a0a0a; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: 24px; }
.wrap-narrow { width: 100%; max-width: var(--maxw-narrow); margin: 0 auto; padding-inline: 24px; }
.section { padding-block: 80px; }
.section-sm { padding-block: 56px; }
.divider-y { border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.divider-t { border-top: 1px solid var(--card-border); }

@media (max-width: 640px) {
  .section { padding-block: 56px; }
}

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
}
.eyebrow .num { color: var(--accent); }
.eyebrow.accent { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }

.h-hero { font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.12; }
.h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.h4 { font-size: 19px; line-height: 1.3; font-weight: 600; }

.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; color: var(--muted); }
.body { font-size: 16px; line-height: 1.65; color: var(--muted); }
.body-sm { font-size: 14px; line-height: 1.6; color: var(--muted); }
.text-accent { color: var(--accent); }
.text-fg { color: var(--fg); }
.mono { font-family: var(--font-mono); }
.max-46 { max-width: 46ch; }
.max-58 { max-width: 58ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  border-radius: 999px; padding: 15px 30px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--accent); color: #0a0a0a;
  box-shadow: 0 10px 24px -8px rgba(251,191,36,0.35);
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(251,191,36,0.4); }
.btn-ghost {
  background: transparent; color: var(--fg); border-color: var(--card-border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 11px 22px; font-size: 14px; }

/* ---------- Navbar ---------- */
.nav-shell {
  position: fixed; inset: 16px 16px auto 16px; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 22px;
  background: rgba(10,10,10,0.8); backdrop-filter: blur(16px);
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 8px 10px 8px 18px;
}
.nav-pill .logo-mark { height: 26px; width: auto; }
.nav-sep { width: 1px; height: 16px; background: var(--card-border); }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a.active { color: var(--accent); }
.nav-links a.nav-linkedin { display: inline-flex; align-items: center; gap: 7px; }
.nav-links a.nav-linkedin svg { width: 16px; height: 16px; }
.nav-links a.nav-cta {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  border-radius: 999px; background: var(--accent); color: #0a0a0a;
  font-size: 14px; font-weight: 600; transition: background 0.2s var(--ease);
}
.nav-links a.nav-cta:hover { background: var(--accent-dark); color: #0a0a0a; }
.nav-links a.nav-cta.active { color: #0a0a0a; }

/* ---------- Mobile nav: hamburger + full-screen overlay ---------- */
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--card-border); background: transparent;
  color: var(--fg); cursor: pointer; flex: none;
}
.mobile-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.mobile-overlay.open { display: flex; opacity: 1; }
.mobile-overlay-close {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--card-border); background: transparent; color: var(--fg); cursor: pointer;
}
.mobile-overlay-logo { margin-bottom: 48px; }
.mobile-overlay-logo img { height: 30px; width: auto; }
.mobile-overlay-nav { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mobile-overlay-nav a { font-size: 30px; font-weight: 600; color: var(--fg); transition: color 0.2s var(--ease); }
.mobile-overlay-nav a:hover, .mobile-overlay-nav a.active { color: var(--accent); }
.mobile-overlay-nav a.mobile-overlay-cta {
  margin-top: 12px; font-size: 18px; background: var(--accent); color: #0a0a0a;
  padding: 12px 30px; border-radius: 999px;
}
.mobile-overlay-nav a.mobile-overlay-cta:hover { background: var(--accent-dark); color: #0a0a0a; }
.mobile-overlay-tag {
  position: absolute; bottom: 32px; margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted);
}
@media (min-width: 761px) { .mobile-overlay { display: none !important; } }
@media (max-width: 760px) {
  .nav-pill { gap: 12px; padding: 7px 10px 7px 16px; }
  .nav-sep { display: none; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---------- Page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: 168px 0 72px; }
.page-hero .glow {
  position: absolute; left: -160px; top: 30%; width: 460px; height: 460px;
  border-radius: 50%; background: rgba(251,191,36,0.06); filter: blur(120px);
  pointer-events: none;
}
.page-hero-inner { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Trust / logo bar ---------- */
.trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 48px; }
.trust img { height: 30px; width: auto; opacity: 0.65; filter: grayscale(1) brightness(1.6); transition: opacity 0.2s var(--ease), filter 0.2s var(--ease); }
.trust img:hover { opacity: 0.9; filter: grayscale(0) brightness(1); }
.trust-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-dim); }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 20px; padding: 32px;
}
.card-lg { border-radius: 24px; padding: 40px; }
.card-hover { transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.card-hover:hover { border-color: rgba(251,191,36,0.5); transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(251,191,36,0.18); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  background: var(--badge-bg); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 6px 14px;
}
.tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  background: var(--badge-bg); border: 1px solid var(--card-border);
  border-radius: 999px; padding: 5px 12px;
}
.tag-accent { color: var(--accent); background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.2); }

/* checkmark list */
.check-row { display: flex; gap: 14px; align-items: flex-start; }
.check-ico {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(251,191,36,0.1); display: grid; place-items: center; margin-top: 2px;
}
.check-ico svg { width: 12px; height: 12px; color: var(--accent); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--card-border); padding: 56px 0; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer h5 { font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 14px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col span { font-size: 14px; color: var(--muted); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--fg); }
.footer-bottom { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--card-border); text-align: center; }
.footer-bottom p { margin: 0; font-size: 12px; color: var(--muted-dim); }

/* ---------- Placeholder marker (for unconfirmed content) ---------- */
.ph {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted-dim);
  border: 1px dashed var(--card-border); border-radius: 6px; padding: 3px 8px;
}

/* ---------- Image placeholder (striped) ---------- */
.img-ph {
  background-color: var(--card);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(255,255,255,0.025) 11px, rgba(255,255,255,0.025) 22px);
  border: 1px solid var(--card-border);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-dim);
}

/* ============================================================
   ENRICHMENT + PER-PAGE THEMES (engagement pass)
   Amber (--accent) stays the brand ACTION color (buttons, nav,
   logo). --accent-2 is each page's IDENTITY hue for content.
   ============================================================ */
:root         { --accent-2:#fbbf24; --accent-2-soft:rgba(251,191,36,0.12); --grid-line:rgba(255,255,255,0.05); }
.theme-build  { --accent-2:#38bdf8; --accent-2-soft:rgba(56,189,248,0.12);  --grid-line:rgba(56,189,248,0.07); }
.theme-advise { --accent-2:#a78bfa; --accent-2-soft:rgba(167,139,250,0.12); --grid-line:rgba(167,139,250,0.07); }
.theme-teach  { --accent-2:#34d399; --accent-2-soft:rgba(52,211,153,0.12);  --grid-line:rgba(52,211,153,0.08); }

/* Retint content accents to the page hue (actions stay amber) */
.theme-build .eyebrow, .theme-advise .eyebrow, .theme-teach .eyebrow,
.theme-build .eyebrow .num, .theme-advise .eyebrow .num, .theme-teach .eyebrow .num { color: var(--accent-2); }
.theme-build .text-accent, .theme-advise .text-accent, .theme-teach .text-accent { color: var(--accent-2); }
.theme-build .tag-accent, .theme-advise .tag-accent, .theme-teach .tag-accent {
  color: var(--accent-2); background: var(--accent-2-soft); border-color: var(--accent-2-soft);
}
.theme-build .check-ico, .theme-advise .check-ico, .theme-teach .check-ico { background: var(--accent-2-soft); }
.theme-build .check-ico svg, .theme-advise .check-ico svg, .theme-teach .check-ico svg { color: var(--accent-2); }
.theme-build .card-hover:hover, .theme-advise .card-hover:hover, .theme-teach .card-hover:hover {
  border-color: var(--accent-2); box-shadow: 0 20px 44px -22px var(--accent-2-soft);
}
.theme-build .btn-ghost:hover, .theme-advise .btn-ghost:hover, .theme-teach .btn-ghost:hover {
  border-color: var(--accent-2); color: var(--accent-2);
}
.theme-build .page-hero .glow  { background: rgba(56,189,248,0.07); }
.theme-advise .page-hero .glow { background: rgba(167,139,250,0.07); }
.theme-teach .page-hero .glow  { background: rgba(52,211,153,0.06); }

/* Hero texture layer */
.hero-texture { position:absolute; inset:0; pointer-events:none; z-index:0;
  -webkit-mask-image: radial-gradient(130% 90% at 26% 2%, #000, transparent 70%);
  mask-image: radial-gradient(130% 90% at 26% 2%, #000, transparent 70%); }
.theme-build .hero-texture {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px; }
.theme-advise .hero-texture { background-image: radial-gradient(var(--grid-line) 1.4px, transparent 1.4px); background-size: 26px 26px; }
.theme-teach .hero-texture  { background-image: radial-gradient(var(--grid-line) 1.5px, transparent 1.5px); background-size: 30px 30px; }

/* Dotgrid section background */
.dotgrid { background-image: radial-gradient(var(--grid-line) 1.3px, transparent 1.3px); background-size: 26px 26px; }

/* Icon ring in page hue */
.ring2 { width:46px; height:46px; border-radius:13px; background:var(--accent-2-soft); color:var(--accent-2); display:grid; place-items:center; flex:none; }

/* Numbered process steps with connector line */
.steps { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.steps::before { content:""; position:absolute; top:23px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, transparent, var(--card-border) 8%, var(--card-border) 92%, transparent); }
.step { position:relative; }
.step-node { position:relative; z-index:1; width:46px; height:46px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--accent-2); color:var(--accent-2);
  display:grid; place-items:center; font-family:var(--font-mono); font-weight:600; font-size:16px;
  box-shadow:0 0 0 6px var(--bg); transition:transform .25s var(--ease); }
.step:hover .step-node { transform:translateY(-4px); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr 1fr; } .steps::before{ display:none; } }

/* Marquee (tech stack) */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display:inline-flex; gap:12px; padding-right:12px; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* Segmented control */
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:5px; border:1px solid var(--card-border); border-radius:999px; background:var(--card); }
.seg button { font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--muted); background:transparent; border:none; border-radius:999px; padding:9px 18px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.seg button:hover { color:var(--fg); }
.seg button.active { background:var(--accent-2-soft); color:var(--accent-2); }

/* Editorial watermark numeral + pull quote */
.wm { font-family:var(--font-mono); font-weight:600; line-height:1; font-size:clamp(64px,11vw,140px);
  color:transparent; -webkit-text-stroke:1.5px var(--card-border); display:block; }
.pullquote { font-size:clamp(24px,3vw,36px); line-height:1.35; font-weight:600; letter-spacing:-0.02em; color:var(--fg); }

/* Small index label for cards */
.cardnum { font-family:var(--font-mono); font-size:12px; letter-spacing:0.15em; color:var(--muted-dim); }

/* ============================================================
   MOBILE RESPONSIVE: 768px and below
   Collapses all inline-style grids + fixes images / padding
   ============================================================ */

@media (max-width: 768px) {

  /* --- Multi-column grids → single column --- */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1.15fr"],
  [style*="grid-template-columns:1.3fr"],
  [style*="grid-template-columns:1.4fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns:1.7fr"],
  [style*="grid-template-columns:0.85fr"],
  [style*="grid-template-columns:0.9fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 4-col (app screen gallery) → 2×2 */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* --- Card padding --- */
  .card-lg { padding: 24px !important; }

  /* --- Hero stat vertical dividers (1px wide) --- */
  [style*="width:1px;background:var(--card-border)"] { display: none !important; }

  /* --- Floating decorative pills: hidden on mobile --- */
  .pill { display: none !important; }

  /* --- Case study portrait images: cap height --- */
  img[style*="height:560px"] { height: 300px !important; width: 100% !important; object-fit: cover; }
  img[style*="height:400px"] { height: 260px !important; width: 100% !important; max-width: none !important; object-fit: cover; }

  /* --- MTF dual phone images: stack vertically --- */
  [style*="justify-content:center;gap:16px"] { flex-direction: column !important; align-items: center !important; }
  [style*="justify-content:center;gap:16px"] img { margin-top: 0 !important; width: 100% !important; }

  /* --- Section image heights (hero overlays) --- */
  [style*="height:380px"] { height: 240px !important; }
  [style*="height:420px"] { height: 260px !important; }

  /* --- Bio card photo: shrink slightly --- */
  img[style*="width:168px;height:168px"] { width: 100px !important; height: 100px !important; }

  /* --- image-slot elements: cap height on mobile --- */
  image-slot[style*="height:440px"] { height: 200px !important; }

  /* --- Segment control: allow full width scroll --- */
  .seg { border-radius: 16px; overflow-x: auto; }

  /* --- Trust bar logos --- */
  .trust { gap: 20px; }
  .trust img { height: 22px; }

  /* --- Footer --- */
  .footer { padding: 36px 0; }
  .footer-grid { gap: 24px; }

  /* --- Case study stat sidebar (border-left stats) --- */
  [style*="border-left:1px solid var(--card-border);padding-left:32px"] {
    border-left: none !important;
    border-top: 1px solid var(--card-border) !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
  }

  /* --- Home hero padding reduction --- */
  .home-hero { padding: 110px 0 60px !important; }

  /* --- Page hero padding reduction --- */
  .page-hero { padding: 130px 0 48px !important; }
}