/* =========================================================
   NERDWARE LABS — DESIGN SYSTEM V2
   =========================================================
   LIVE on index.php as of 2026-07-28 (see section 13 below for
   the production overlay that targets index.php's real markup).
   Every other page (about-us.php, services*.php, products.php,
   techstacks.php, hire-remote-developers-india.php) still links
   the V1 stack (styles.css + design-system.css) and is unaffected
   by anything in this file. Sections 1-12 also back the standalone
   preview, design-preview-v2.html, via invented `.v2-*` demo
   classes under a `.v2` body scope — that part is unchanged and
   still preview-only.

   Full rationale in /DESIGN_DIRECTION_V2.md. Short version:
   one confident accent (amber) instead of amber-everywhere,
   border-first elevation instead of heavy shadow/gradient,
   a true graphite neutral scale instead of navy-tinted "ink",
   retired corner-cut shapes, Inter Tight for display type,
   generous hairline-separated section rhythm, a documented
   12-column/1280px grid.

   Every class name a page's JS depends on (.nav-toggle, .nav,
   #contactForm, .tech-filters button, .tech-card) is restyled
   here with IDENTICAL structure/markup expectations to V1 —
   see the "LOAD-BEARING SELECTORS" comments throughout. Nothing
   is renamed.

   Contents:
     1. Design tokens
     2. Base / reset / accessibility
     3. Grid + layout primitives
     4. Type scale utilities
     5. Buttons
     6. Cards
     7. Icon tile
     8. Badges / eyebrow
     9. Nav bar
     10. Hero
     11. Section rhythm + dividers
     12. Footer
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* ---- Accent — ONE confident color, not a gradient family.
     Same amber hue as the brand mark, kept for recognition,
     but used flat and sparingly (see DESIGN_DIRECTION_V2.md §2).
     Values below are intentionally the same hex family as V1's
     --brand-* scale (recognizable, tested-for-contrast) — what
     changes is HOW OFTEN they appear, not the hue itself. ---- */
  --accent-100: #fef3e2;   /* badge/tint background on light surfaces */
  --accent-300: #fbbf24;   /* accent text/icons on dark surfaces */
  --accent-400: #f59e0b;   /* THE accent — button fill, active states */
  --accent-500: #d97706;   /* accent hover/pressed */
  --accent-600: #b45309;   /* accent text on light surfaces (AA-safe, ~4.8:1) */

  /* ---- Graphite neutral scale — true near-black, not navy.
     Reads as "premium product" rather than "fintech dashboard"
     because it has no blue-violet cast; it sits neutral against
     both the amber accent and the warm-toned team photo. ---- */
  --gray-950: #0c0c0d;
  --gray-900: #17171a;
  --gray-800: #212124;
  --gray-700: #3a3a3f;
  --gray-600: #55555c;
  --gray-500: #75757e;
  --gray-400: #9a9aa1;
  --gray-300: #c4c4c9;
  --gray-200: #e3e3e7;
  --gray-100: #eeeef1;
  --gray-50:  #f8f8fa;
  --white:    #ffffff;

  /* ---- Semantic surface / text tokens ---- */
  --surface: var(--white);
  --surface-2: var(--gray-50);       /* alternate section background */
  --surface-inverse: var(--gray-950);
  --surface-inverse-2: var(--gray-900);

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-inverse: rgba(255, 255, 255, 0.10);
  --border-inverse-strong: rgba(255, 255, 255, 0.18);

  --text-primary: var(--gray-950);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-on-inverse: var(--white);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.68);

  --focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.45);

  /* ---- Type families ----
     Inter stays for body (already proven to load — no change).
     Inter Tight added for display/headings: same Google Fonts
     host, one extra family= param, verified to resolve (HTTP 200)
     before being recommended here. No new font host, no self-
     hosting risk. ---- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale — bigger jump eyebrow -> h1 than V1, tighter
     tracking at the top of the scale (applied per-component below,
     since letter-spacing needs to vary with size, not be global). ---- */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.5rem;      /* 24px */
  --text-2xl: 1.875rem;   /* 30px */
  --text-3xl: clamp(2rem, 1.7rem + 1.2vw, 2.5rem);      /* 32-40px */
  --text-4xl: clamp(2.5rem, 2rem + 2vw, 3.25rem);       /* 40-52px */
  --text-5xl: clamp(3rem, 2.2rem + 3.2vw, 4.5rem);      /* 48-72px hero */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base, extended for generous rhythm) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */

  /* ---- Radii — uniform corners only; no asymmetric corner-cuts.
     20px is reserved for hero media exclusively (see §10) so that
     one deliberate geometric moment reads as intentional. ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadows — border-first elevation. shadow-xs is almost
     imperceptible; escalation only happens on hover/float. ---- */
  --shadow-xs: 0 1px 2px rgba(12, 12, 13, 0.04);
  --shadow-sm: 0 1px 3px rgba(12, 12, 13, 0.06), 0 1px 2px rgba(12, 12, 13, 0.04);
  --shadow-md: 0 8px 20px rgba(12, 12, 13, 0.08), 0 2px 6px rgba(12, 12, 13, 0.04);
  --shadow-lg: 0 20px 40px rgba(12, 12, 13, 0.14), 0 6px 12px rgba(12, 12, 13, 0.06);

  /* ---- Motion — small and quick; escalation on hover only. ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ---- Grid ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 5rem);
  --grid-cols: 12;
  --grid-gap: var(--space-6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   2. BASE / RESET / ACCESSIBILITY
   ========================================================= */
.v2 {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.v2 p {
  margin: 0;
  line-height: var(--leading-normal);
}

.v2 a,
.v2 button,
.v2 input,
.v2 textarea,
.v2 .nav-toggle {
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.v2 a:focus-visible,
.v2 button:focus-visible,
.v2 input:focus-visible,
.v2 textarea:focus-visible,
.v2 .nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* =========================================================
   3. GRID + LAYOUT PRIMITIVES
   ========================================================= */
.v2-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.v2-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Common column-span recipes so sections stop inventing ad-hoc
   flex/grid splits (DESIGN_DIRECTION_V2.md §2, "Grid"). */
.v2-col-12 { grid-column: span 12; }
.v2-col-7  { grid-column: span 7; }
.v2-col-6  { grid-column: span 6; }
.v2-col-5  { grid-column: span 5; }
.v2-col-4  { grid-column: span 4; }
.v2-col-3  { grid-column: span 3; }

@media (max-width: 900px) {
  .v2-col-7, .v2-col-6, .v2-col-5, .v2-col-4, .v2-col-3 {
    grid-column: span 12;
  }
}

/* =========================================================
   4. TYPE SCALE UTILITIES
   ========================================================= */
.v2-eyebrow-text { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.v2-text-5xl { font-size: var(--text-5xl); letter-spacing: -0.03em; }
.v2-text-4xl { font-size: var(--text-4xl); letter-spacing: -0.025em; }
.v2-text-3xl { font-size: var(--text-3xl); letter-spacing: -0.02em; }
.v2-text-2xl { font-size: var(--text-2xl); letter-spacing: -0.015em; }
.v2-text-xl  { font-size: var(--text-xl); }
.v2-text-lg  { font-size: var(--text-lg); }
.v2-text-md  { font-size: var(--text-md); }
.v2-text-base{ font-size: var(--text-base); }
.v2-text-sm  { font-size: var(--text-sm); }
.v2-text-xs  { font-size: var(--text-xs); }

.v2-text-secondary { color: var(--text-secondary); }
.v2-text-tertiary { color: var(--text-tertiary); }
.v2-text-on-inverse { color: var(--text-on-inverse); }
.v2-text-on-inverse-muted { color: var(--text-on-inverse-muted); }
.v2-text-accent { color: var(--accent-600); }

/* =========================================================
   5. BUTTONS
   ========================================================= */
/* Base recipe — every button variant shares this; only fill/
   border/color differ. Flat, no gradients (see DESIGN_DIRECTION_V2
   §2 "Color"). */
.v2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* LOAD-BEARING: .btn-primary is used site-wide, including as the
   nav "Contact Us" link and the #contactForm submit button — same
   class name as V1, restyled only. Flat accent fill with DARK text
   (not white-on-amber, which fails contrast) — reads confident and
   is distinct from generic white-on-blue SaaS buttons. */
.v2 .btn-primary {
  background: var(--accent-400);
  color: var(--gray-950);
  box-shadow: var(--shadow-xs);
}

.v2 .btn-primary:hover {
  background: var(--accent-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.v2 .btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

.v2 .btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.v2 .btn-secondary:hover {
  border-color: var(--gray-950);
  background: var(--gray-50);
}

.v2 .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding-inline: var(--space-3);
}

.v2 .btn-ghost:hover {
  color: var(--text-primary);
  background: var(--gray-50);
}

/* On-inverse variants for buttons sitting on the dark hero/footer-CTA */
.v2 .btn-secondary--on-dark {
  color: var(--text-on-inverse);
  border-color: var(--border-inverse-strong);
}

.v2 .btn-secondary--on-dark:hover {
  border-color: var(--accent-400);
  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   6. CARDS
   ========================================================= */
/* Flat: border-first, near-invisible shadow. This is the DEFAULT
   card treatment (hire-item, feature, staff, tech-card equivalents). */
.v2 .v2-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-8);
}

.v2 .v2-card--interactive {
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.v2 .v2-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Elevated: for cards that need to pop more without a section
   wrapper doing the work (testimonials). Shadow-first, border still
   present but quieter. */
.v2 .v2-card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.v2 .v2-card--elevated:hover {
  box-shadow: var(--shadow-lg);
}

/* Inverse: dark surface card (pricing, team, hero stat chip). Flat
   fill, no diagonal gradient — a single flat near-black, distinguished
   from the page background only by the hairline border. */
.v2 .v2-card--inverse {
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  color: var(--text-on-inverse);
  box-shadow: none;
}

/* Floating stat chip used in the hero (see §10) — small, elevated,
   overlaps the hero media by design as the one "floating" element
   on the page. */
.v2 .v2-stat-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-6);
}

.v2 .v2-stat-chip strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.v2 .v2-stat-chip span {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* =========================================================
   7. ICON TILE
   ========================================================= */
/* Standardizes the CONTAINER around the existing (already-clean,
   monochrome line-art) icon SVGs — see DESIGN_DIRECTION_V2.md §2
   "Icons". Fixed 56x56 tile, quiet fill, hairline border, 24px
   centered glyph. No new icon artwork introduced. */
.v2 .v2-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  border: 1px solid var(--border-subtle);
}

.v2 .v2-icon-tile img,
.v2 .v2-icon-tile svg {
  width: 24px;
  height: 24px;
}

.v2 .v2-icon-tile--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-inverse);
}

.v2 .v2-icon-tile--accent {
  background: var(--accent-100);
  border-color: rgba(245, 158, 11, 0.24);
}

/* =========================================================
   8. BADGES / EYEBROW
   ========================================================= */
/* LOAD-BEARING class name (.section-eyebrow already used site-wide) —
   restyled only. Flat tint, no gradient. */
.v2 .section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  background: var(--accent-100);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.v2 .section-eyebrow--on-dark {
  color: var(--accent-300);
  background: rgba(251, 191, 36, 0.14);
}

/* =========================================================
   9. NAV BAR
   ========================================================= */
/* LOAD-BEARING structure: .site-header > (logo link) + .nav-toggle
   button + nav.nav (links + .btn-primary). Same markup contract as
   V1/current site — nav.js toggles `.nav.open`, unchanged here. */
.v2 .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  padding-inline: var(--container-pad);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.v2 .site-header img {
  height: 40px;
  width: auto;
  display: block;
}

.v2 .nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.v2 .nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  position: relative;
}

.v2 .nav a:not(.btn-primary)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent-400);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.v2 .nav a:not(.btn-primary):hover::after {
  transform: scaleX(1);
}

.v2 .nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.v2 .nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: var(--radius-full);
}

@media (max-width: 860px) {
  .v2 .nav-toggle { display: flex; }

  .v2 .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-6) var(--container-pad);
    display: none;
  }

  .v2 .nav.open { display: flex; }
}

/* =========================================================
   10. HERO
   ========================================================= */
/* Structural replacement for the corner-cut hero-card/hero-image
   split. Same information (headline, subcopy, primary CTA, hero
   photo) — presented as a plain 7/5 grid, generous whitespace,
   ONE deliberate geometric moment (20px radius on the media, the
   only large radius anywhere in this system) instead of every box
   getting a cut corner. Background carries a very quiet dot-grid
   texture (pure CSS, not an image) rather than a saturated color
   block, echoing Linear/Vercel's habit of a barely-there hero
   backdrop instead of a hard-edged panel. */
.v2 .v2-hero {
  position: relative;
  padding-block: var(--space-32) var(--space-24);
  overflow: hidden;
}

/* Decorative dot-grid lives on its own layer behind the content and
   fades out toward the bottom of the section. The mask belongs here,
   not on .v2-hero itself — masking the section would also fade the
   real headline/CTA/photo sitting inside it. */
.v2 .v2-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--gray-200) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -14px -14px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.v2 .v2-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-16);
  align-items: center;
}

@media (max-width: 900px) {
  .v2 .v2-hero-inner { grid-template-columns: 1fr; }
}

.v2 .v2-hero h1 {
  font-size: var(--text-5xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  max-width: 16ch;
}

.v2 .v2-hero p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.v2 .v2-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.v2 .v2-hero-media {
  position: relative;
}

.v2 .v2-hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  display: block;
}

.v2 .v2-hero-stat {
  position: absolute;
  left: -28px;
  bottom: -24px;
}

@media (max-width: 900px) {
  .v2 .v2-hero-stat { left: 16px; bottom: -20px; }
}

/* =========================================================
   11. SECTION RHYTHM + DIVIDERS
   ========================================================= */
/* Sections separate via padding + a hairline rule, never a rounded
   color-block wrapper (see DESIGN_DIRECTION_V2.md §2 "Space"). */
.v2 .v2-section {
  padding-block: var(--space-24);
  border-top: 1px solid var(--border-subtle);
}

.v2 .v2-section:first-of-type {
  border-top: none;
}

.v2 .v2-section--alt {
  background: var(--surface-2);
}

.v2 .v2-section--inverse {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  border-top-color: var(--border-inverse);
}

@media (max-width: 900px) {
  .v2 .v2-section { padding-block: var(--space-16); }
}

.v2 .v2-section-head {
  max-width: 640px;
  margin-bottom: var(--space-12);
}

.v2 .v2-section-head h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.v2 .v2-section-head p {
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.v2 .v2-section--inverse .v2-section-head p {
  color: var(--text-on-inverse-muted);
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.v2 .site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-16) var(--space-8);
}

.v2 .footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

@media (max-width: 860px) {
  .v2 .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

.v2 .footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.v2 .footer-col a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  padding-block: var(--space-1);
}

.v2 .footer-col a:hover {
  color: var(--accent-600);
}

.v2 .footer-brand img { height: 32px; margin-bottom: var(--space-3); }

.v2 .footer-brand p {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  max-width: 32ch;
}

.v2 .footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* =========================================================
   13. PRODUCTION OVERLAY — REAL SITE CLASSNAMES (index.php)
   =========================================================
   Everything above this line (sections 1-12) is written for
   design-preview-v2.html and uses invented `.v2-*` demo classes
   under a `.v2` scope. This section is the actual implementation
   layer: it targets the SAME classnames index.php already renders
   (.hero, .hero-card, .site-header, .features, .testimonial-card,
   .hire-item, .stats, .staff-item, .contact-us-card, .site-footer,
   .btn-primary, .section-eyebrow, .nav, .nav-toggle, etc.) — same
   principle V1's design-system.css used: additive CSS only, zero
   markup changes, so linking this file is a straight swap.

   Usage on a page:
     <link rel="stylesheet" href="assets/css/styles.css" />
     <link rel="stylesheet" href="assets/css/design-system-v2.css" />
   (design-system.css / V1 is REMOVED from that page — V2 replaces
   it rather than layering on top, since V2 re-themes the same
   selectors with different values and layering both would just
   mean the last one wins anyway.)

   LOAD-BEARING SELECTORS — restyled only, never renamed/restructured:
   .nav-toggle, .nav (+ .open), #contactForm (+ field names),
   .tech-filters button (+ data-filter/.active), .tech-card.
   None of these appear on index.php except .nav-toggle/.nav — the
   tech-filters/tech-card ones are listed because this file will
   eventually extend to techstacks.php; they are NOT targeted below
   since index.php has no tech grid, but the class names are noted
   here so a future pass doesn't accidentally break them.
   ========================================================= */

/* ---- Back-compat token remap ----
   styles.css defines its own --yellow/--yellow-dark/--navy/--muted/--bg
   in its own :root and uses them in ~20 places we don't otherwise
   override below (e.g. .product-points li::before, .hire-grid-2 a
   hover). Redirecting them here re-themes every remaining raw usage
   to the V2 palette for free, the same trick V1 used. */
:root {
  --yellow: var(--accent-400);
  --yellow-dark: var(--accent-500);
  --navy: var(--gray-950);
  --muted: var(--gray-500);
  --bg: var(--white);
}

/* ---- Base ---- */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
}

a, button, input, textarea, .nav-toggle {
  transition: color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.nav-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Buttons (LOAD-BEARING: .btn-primary is the nav CTA, the
   hero CTA, the contact form submit button, and the Snuggle CTA —
   same class, restyled flat, dark text on accent instead of white
   on a gradient). ---- */
.btn-primary {
  background: var(--accent-400);
  color: var(--gray-950);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-primary:hover {
  background: var(--accent-500);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* Defensive override: styles.css's `.hero a{color:#fff}` (specificity
   0,1,1) would otherwise beat the bare `.btn-primary` rule above
   (0,1,0) regardless of load order. `.hero .btn-primary` (0,2,0)
   wins outright. Same story for `.contact-us-card .btn-primary`,
   which styles.css already defines explicitly at equal specificity
   (0,2,0) — here it wins on source order since this file loads
   after styles.css. */
.hero .btn-primary,
.contact-us-card .btn-primary {
  background: var(--accent-400);
  color: var(--gray-950);
  margin-top: 0;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.hero .btn-primary:hover,
.contact-us-card .btn-primary:hover {
  background: var(--accent-500);
}

/* Real bug found in final QA pass: styles.css's `.hero a{color:#fff}`
   was correct back when .hero-card was a dark box (V1) — every
   services/*.php hero paragraph has inline links ("helping
   <a>startups and businesses</a> design...") that rendered as
   literally invisible white-on-white text once V2 made .hero-card
   a plain light surface. index.php's own hero has no inline links
   so this never surfaced there — only caught by rendering every
   page's actual copy, not just index.php's. `.hero-card p a` only
   targets links inside hero body copy, not the CTA button (which
   is a direct child of .hero-card, never inside a <p>). */
.hero-card p a {
  color: var(--accent-600);
  text-decoration: underline;
  font-weight: 500;
}

.hero-card p a:hover {
  color: var(--accent-500);
}

/* ---- Badge / eyebrow (LOAD-BEARING classname, used on every
   section of index.php) ---- */
.section-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  background: var(--accent-100);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  display: inline-block;
}

/* On-dark surfaces (contact CTA, features band) need the lighter
   tint variant — NOT hero-card, which is no longer a dark card in
   V2 (see hero section below). */
.contact-us-card .section-eyebrow {
  color: var(--accent-300);
  background: rgba(251, 191, 36, 0.14);
}

/* ---- Nav bar (LOAD-BEARING: .nav-toggle / .nav / .nav.open are
   the exact hooks nav.js reads — structure and class names below
   are unchanged from what nav.js expects, only visuals differ.
   Breakpoint kept at 1024px to match styles.css's own mobile nav
   rules exactly, avoiding a dead zone between two different
   breakpoints governing the same toggle.) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--space-4);
}

.nav {
  gap: var(--space-8);
}

.nav a {
  color: var(--text-primary);
  font-weight: 500;
  position: relative;
}

.nav a:not(.btn-primary)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--accent-400);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav a:not(.btn-primary):hover::after {
  transform: scaleX(1);
}

.nav-toggle span {
  background: var(--text-primary);
  border-radius: var(--radius-full);
}

@media (max-width: 1024px) {
  .nav {
    background: var(--surface);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
  }
}

/* ---- Hero ----
   Structural replacement for the corner-cut hero-card / absolutely
   positioned hero-image split: a plain 7/5 CSS grid, no overlap, no
   asymmetric corners. hero-card is no longer a dark box — headline
   sits directly on the page background (matches Linear/Stripe hero
   convention: type + whitespace does the work, not a colored panel).
   One deliberate geometric moment: the hero image gets the system's
   only 20px radius. A quiet CSS dot-grid replaces the old flat white
   backdrop — no image asset added, pure CSS. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-32) var(--space-20) var(--space-24);
  margin-bottom: 0;
  overflow: visible;
}

/* Quiet dot-grid backdrop lives on a ::before, not on .hero itself —
   masking .hero directly would fade out the headline/photo along
   with the pattern (caught in local browser QA before this shipped:
   the mask was visibly eating the hero text). The pseudo-element is
   the only thing that fades. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--gray-200) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -14px -14px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero-card {
  position: relative;
  z-index: 1;
  width: auto;
  min-width: 0;
  min-height: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero-card h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  max-width: 16ch;
  margin-bottom: var(--space-6);
}

.hero-card p {
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hero-image {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
}

.hero-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    padding: var(--space-20) var(--space-6) var(--space-16);
  }

  .hero-image {
    margin-top: 0;
  }
}

/* ---- Product highlight ---- */
.product-highlight {
  padding-block: var(--space-24);
}

.snuggle-video-wrap video {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.product-card .section-eyebrow {
  color: var(--accent-600);
  background: var(--accent-100);
}

.product-card h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.product-desc {
  color: var(--text-secondary);
}

/* ---- Features ----
   Retired: full-bleed rounded gradient panel inset with side
   margins. Replaced: flat inverse section, hairline top border,
   generous padding — separated from neighbors by whitespace/border,
   not by being its own floating colored card. */
.features {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  margin-inline: 0;
  padding: var(--space-24) var(--space-20);
  gap: var(--space-10);
}

.feature {
  gap: var(--space-5);
}

.feature h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.feature p {
  color: var(--text-on-inverse-muted);
  font-size: var(--text-sm);
}

.feature p strong {
  color: var(--white);
}

.feature a {
  color: var(--accent-300);
}

/* Icon tile treatment applied to the existing feature icon
   container — same 48px raster icons, quieter frame (see
   DESIGN_DIRECTION_V2.md "Icons": the artwork was already fine,
   only the container needed standardizing). */
.feature-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-md);
}

.feature-icon img {
  width: 24px;
  height: 24px;
  /* These are black line-art SVGs (see DESIGN_DIRECTION_V2.md
     "Icons") — invert so they read as white on this dark tile.
     Caught in local QA: without this the glyph was nearly
     invisible (dark-on-near-black, well under WCAG contrast). */
  filter: invert(1) brightness(1.4);
}

@media (max-width: 1024px) {
  .features {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Testimonials ---- */
.testimonials {
  background: var(--surface-2);
  padding: var(--space-24) var(--space-20);
}

.testimonials h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.testimonial-author strong {
  color: var(--text-primary);
}

.testimonial-author span {
  color: var(--text-tertiary);
}

.testimonial-text {
  color: var(--gray-700);
}

/* Bug fix carried over from V1: styles.css sets a stray
   `.testimonial-text a{color:#fff}` (copy-paste from the dark hero
   rule) which makes the in-copy link in one testimonial invisible
   on this card's white background. */
.testimonial-text a {
  color: var(--accent-600) !important;
  text-decoration: underline;
}

.testimonial-text a:hover {
  color: var(--accent-500) !important;
}

@media (max-width: 1024px) {
  .testimonials {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Process ----
   Retired: full-bleed amber gradient block with side-margin inset.
   Replaced: quiet flat surface, hairline top border, numbered steps
   presented as icon tiles instead of icons floating on a bright
   gradient (the "process" content already IS the visual interest;
   it doesn't need a loud background to read as a section). */
.process {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  margin-inline: 0;
  padding: var(--space-24) var(--space-20);
  text-align: center;
}

.process h2 {
  font-size: var(--text-3xl);
  color: var(--text-primary);
  margin-bottom: var(--space-12);
}

.step {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 600;
}

/* These four step icons (msgbubble/proceed/negotiate/medal.svg) turned
   out to be solid WHITE artwork — designed for the old bright amber
   gradient background. Caught in local QA: on the new flat light
   surface they were nearly invisible. A dark tile (matching the
   feature-icon on-dark treatment) is what actually shows them off,
   rather than the light gray-50 tile used for the black line icons
   elsewhere in this file. */
.step img {
  background: var(--gray-950);
  border: 1px solid var(--gray-950);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 56px;
  height: 56px;
  box-sizing: content-box;
}

@media (max-width: 1024px) {
  .process {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Hire / expertise grid ---- */
.hire {
  padding: var(--space-24) var(--space-20);
}

.hire h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.hire-desc {
  color: var(--text-secondary);
  font-size: var(--text-md);
  max-width: 60ch;
}

.hire-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.hire-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.hire-icon {
  width: 56px;
  height: 56px;
  background: var(--gray-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.hire-icon img {
  width: 24px;
  height: 24px;
}

.hire-item h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: var(--space-5) 0 var(--space-2);
}

.hire-item p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.hire-grid-2 h4 a,
.hire-grid-2 h4 a:hover {
  font-weight: 600;
}

@media (max-width: 1024px) {
  .hire {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Stats ----
   Retired: bright amber gradient block forcing a hardcoded
   dark-navy number color for contrast. Replaced: flat alt surface,
   hairline top border, the number itself carries the accent —
   a much quieter way to make a stat feel important (Stripe/Linear
   both do this: color on the number, not the background). */
.stats {
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  margin-inline: 0;
  padding: var(--space-20);
}

.stat-item h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  color: var(--accent-600);
  margin-bottom: var(--space-2);
}

.stat-item p {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-sm);
}

@media (max-width: 1024px) {
  .stats {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Staff ---- */
.staff {
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-24) var(--space-20);
}

.staff h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

/* Bug fix carried over from V1: styles.css clips this grid to a
   hard-coded 5-row max-height via --staff-row-height, silently
   hiding any staff item beyond what happens to fit. Same 14 items
   shown, clip removed. */
.staff-grid {
  max-height: none;
  overflow: visible;
}

.staff-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.staff-item h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .staff {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- Contact ----
   Same corner-cut/absolute-overlap retirement as the hero — plain
   grid, uniform radius, no gradient. contact-us-card stays an
   inverse (dark) card deliberately: one quiet dark note near the
   end of the page (bookending the light hero at the top) rather
   than every section being light. */
.contact-us {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-24) var(--space-20);
  min-height: 0;
  overflow: visible;
}

.contact-us-image {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: none;
}

.contact-us-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.contact-us-card {
  position: relative;
  margin: 0;
  width: auto;
  min-width: 0;
  min-height: 0;
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: none;
}

.contact-us-card h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.contact-us-card input,
.contact-us-card textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-inverse-strong);
  border-radius: var(--radius-sm);
  color: var(--text-on-inverse);
  font-size: var(--text-sm);
}

.contact-us-card input::placeholder,
.contact-us-card textarea::placeholder {
  color: var(--text-on-inverse-muted);
}

.contact-us-card input:focus,
.contact-us-card textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-400);
  box-shadow: var(--focus-ring);
}

@media (max-width: 1024px) {
  .contact-us {
    grid-template-columns: 1fr;
    padding: var(--space-16) var(--space-6);
  }

  .contact-us-card {
    padding: var(--space-8);
  }
}

/* ---- Footer ----
   Fixes a pre-existing invisible-border bug too: styles.css's
   `.footer-bottom` border used a white-alpha color assuming a dark
   footer background, but `.site-footer` is actually light — the
   rule was effectively invisible. Uses a real neutral border now
   that the footer is intentionally light (surface-2). */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-16) var(--space-20) var(--space-8);
}

.footer-col h4 {
  color: var(--text-primary);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.footer-col a {
  color: var(--text-secondary);
}

.footer-col a:hover {
  color: var(--accent-600);
}

.footer-brand p {
  color: var(--text-tertiary);
}

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}

@media (max-width: 1024px) {
  .site-footer {
    padding: var(--space-12) var(--space-6) var(--space-6);
  }
}

/* =========================================================
   14. PRODUCTION OVERLAY — SITE-WIDE (2026-07-28)
   =========================================================
   Extends section 13's principle to every remaining page:
   about-us.php, services.php, products.php, techstacks.php,
   hire-remote-developers-india.php, and all six services/*.php
   pages. Same rule as always — restyle real classnames, zero
   markup changes, all V1 bug-fixes/behaviors carried forward.

   Cataloged by reading every page's actual markup (not just
   grepping styles.css) — see [[design-system-v2]] memory for the
   full list of real bugs this caught before rollout.
   ========================================================= */

/* ---- Secondary page hero ("tech-hero") ----
   Used identically on about-us.php, services.php, products.php,
   techstacks.php: a background-photo banner with a dark overlay.
   Quieter overlay, Inter Tight heading, consistent with the
   flat/restrained direction — the photo still does the work. */
.tech-hero {
  height: 360px;
}

.tech-hero-overlay {
  background: linear-gradient(180deg, rgba(12, 12, 13, 0.55), rgba(12, 12, 13, 0.72));
}

.tech-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.tech-hero p {
  font-size: var(--text-md);
  opacity: 0.92;
}

/* ---- .feature reused as plain content columns on services/*.php
   ----
   Real bug found reading software-development.php: styles.css's
   layout fix for this was scoped to `.service-web .feature`, but
   software-development.php's "Why Choose" block has NO
   `.service-web` wrapper — just `.feature` directly inside `.hire`
   — so the 3-column flex-nowrap default (no flex-basis) was
   crowding/overflowing there uncontested. Scoping to `.hire
   .feature` instead of `.service-web .feature` covers BOTH cases,
   since `.service-web .feature` is already a descendant of `.hire`
   wherever it appears. */
.hire .feature {
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-2);
}

.hire .feature > div {
  flex: 1 1 260px;
}

/* Text color here is already forced dark by styles.css's own
   `.hire .feature h3{color:#000}` (protects against the dark-text
   rule elsewhere) — this just adds V2 typography on top without
   touching that protection. */
.hire .feature h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.hire .feature p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Same class of bug as .hero-card p a above: styles.css's
   `.feature a{color:#fbbf24}` is a light accent color meant for
   dark surfaces (it's the same hex as --accent-300). These
   "Why Choose" blocks sit on the light .hire background, where
   #fbbf24 text measures roughly 1.6:1 contrast — barely legible,
   found by actually reading the rendered page. */
.hire .feature p a {
  color: var(--accent-600);
  text-decoration: underline;
}

.hire .feature p a:hover {
  color: var(--accent-500);
}

/* ---- Contact card defensive fix ----
   startup-mvp-development.php's contact-us section has NO
   `.contact-us-image` sibling — just a bare `.contact-us-card`.
   Without this, CSS grid auto-placement would drop the only child
   into the narrow 5fr column, squishing the whole form. */
.contact-us-card:only-child {
  grid-column: 1 / -1;
  max-width: 640px;
  margin-inline: auto;
}

/* ---- hire-remote-developers-india.php hero has two stacked
   .btn-primary CTAs with no wrapper — give them breathing room. */
.hero .btn-primary + .btn-primary {
  margin-left: var(--space-3);
}

/* ---- product-points reused as heading+paragraph cards on
   products.php (index.php uses it for plain text bullets — this
   is additive, only fires when an h3/p actually exist inside). ---- */
.product-points li h3 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.product-points li p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* ---- Technologies grid (techstacks.php) ----
   LOAD-BEARING: .tech-filters button (+ data-filter/.active) and
   .tech-card are read directly by assets/js/tech.js — restyled
   only, structure/classes unchanged. */
.technologies {
  padding: var(--space-24) var(--space-20);
}

.technologies h2 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.tech-desc {
  color: var(--text-secondary);
}

.tech-filters button {
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  border-radius: var(--radius-full);
}

.tech-filters button:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.tech-filters button.active {
  background: var(--accent-400);
  border-color: var(--accent-400);
  color: var(--gray-950);
  font-weight: 700;
}

.tech-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

@media (max-width: 1024px) {
  .technologies {
    padding: var(--space-16) var(--space-6);
  }
}

/* ---- About-us: authority / pillars ---- */
.authority-section {
  background: var(--surface-2);
  padding: var(--space-24) var(--container-pad);
}

.authority-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

.authority-text p {
  color: var(--text-secondary);
}

.authority-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.authority-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.authority-card strong {
  font-family: var(--font-display);
}

.authority-card span {
  color: var(--text-tertiary);
}

.pillar {
  background: var(--surface-inverse);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-md);
}

.pillar h4 {
  font-family: var(--font-display);
  color: var(--accent-300);
  font-size: var(--text-md);
}

.pillar p {
  color: var(--text-on-inverse-muted);
}

/* ---- About-us: founder ---- */
.founder-section {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-inverse);
}

.founder-text h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

/* Overrides styles.css's `.founder-text .section-eyebrow{color:var(--yellow)}`
   with the proper on-dark badge treatment used everywhere else. */
.founder-text .section-eyebrow {
  color: var(--accent-300);
  background: rgba(251, 191, 36, 0.14);
}

.founder-text p {
  color: var(--text-on-inverse-muted);
}

.founder-text a {
  color: var(--accent-300);
}

.founder-stats {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
}

.stat strong {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  color: var(--accent-300);
}

.stat span {
  color: var(--text-on-inverse-muted);
}

/* ---- About-us: trust strip ---- */
.trust-strip {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-inverse);
}

.trust-item h4 {
  font-family: var(--font-display);
  color: var(--accent-300);
  font-size: var(--text-md);
}

.trust-item p {
  color: var(--text-on-inverse-muted);
}

/* ---- hire-remote-developers-india.php: shared content column ---- */
.section-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-20) var(--container-pad);
}

/* ---- hire-remote-developers-india.php: pricing ----
   Also fixes a stray off-brand indigo (#4f46e5) baked into
   styles.css for `.price-box:hover` / `.price-box .price` /
   `.processs li::before` / `.processs-card .step` — leftover from
   what looks like a copy-pasted template section, unrelated to
   the amber/graphite system everywhere else on the site. */
.pricing {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-inverse);
}

.pricing h2 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: var(--text-3xl);
}

.pricing p {
  color: var(--text-on-inverse-muted);
}

.price-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.price-box:hover {
  transform: translateY(-6px);
  border-color: var(--accent-400);
}

.price-box h4 {
  font-family: var(--font-display);
  color: var(--accent-300);
}

.price-box .price {
  color: var(--accent-300);
  font-family: var(--font-display);
}

.price-box p {
  color: var(--text-on-inverse-muted);
}

/* ---- hire-remote-developers-india.php: tech stack pills ---- */
.tech-stack {
  background: var(--surface);
}

.tech-stack h2 {
  font-family: var(--font-display);
  color: var(--accent-600);
  font-size: var(--text-3xl);
}

.tech-list li {
  background: var(--gray-950);
  border: 1px solid var(--gray-950);
  border-radius: var(--radius-md);
  color: var(--gray-200);
}

/* ---- hire-remote-developers-india.php: process (sitewide
   "processs" spelling is the real classname — matched, not a typo
   introduced here) ---- */
.processs {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-inverse);
}

.processs h2 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: var(--text-3xl);
}

.processs-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
}

.processs-card h4 {
  font-family: var(--font-display);
  color: var(--accent-300);
}

.processs-card p {
  color: var(--text-on-inverse-muted);
}

.processs-card .step {
  color: var(--accent-400);
  opacity: 0.5;
}

.processs li {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-on-inverse-muted);
}

.processs li::before {
  background: var(--accent-400);
  color: var(--gray-950);
}

/* ---- hire-remote-developers-india.php: India advantage ---- */
.india-advantage {
  background: var(--surface);
}

.india-advantage h2 {
  font-family: var(--font-display);
  color: var(--accent-600);
  font-size: var(--text-3xl);
}

.india-advantage p {
  color: var(--text-secondary);
}

/* Pre-existing bug, unrelated to V2: styles.css never resets
   list-style for this plain <ul> (unlike .tech-list, which already
   does), so a default disc marker leaks outside each dark pill.
   One-line fix since this section is already being restyled. */
.india-advantage ul {
  list-style: none;
  padding: 0;
}

.india-advantage li {
  background: var(--gray-950);
  border-radius: var(--radius-md);
  color: var(--gray-200);
}

/* ---- hire-remote-developers-india.php: team ---- */
.team {
  background: var(--surface-inverse);
  border-top: 1px solid var(--border-inverse);
}

.team h2 {
  font-family: var(--font-display);
  color: var(--white);
  font-size: var(--text-3xl);
}

.team-intro,
.team-footnote {
  color: var(--text-on-inverse-muted);
}

.team-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-lg);
}

.team-card h4 {
  font-family: var(--font-display);
  color: var(--white);
}

.team-card p {
  color: var(--text-on-inverse-muted);
}

/* ---- hire-remote-developers-india.php: FAQs ---- */
.faqs h2 {
  font-family: var(--font-display);
  color: var(--accent-600);
  font-size: var(--text-3xl);
}

.faqs h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
}

.faqs p {
  color: var(--text-secondary);
}