/* =========================================================
   NASDAN — Web Development service page
   Extends tokens.css / main.css. Reuses the homepage's
   work-row/work-carousel classes for the case-study section.
   Section-specific styles only.
   ========================================================= */

/* =========================================================
   HERO — split layout, browser-window build mockup.
   Background now matches the Contact page hero treatment
   exactly (navy gradient + dot-grid mask + amber corner glow)
   per explicit request, instead of the page's own gradient.
   ========================================================= */
.webdev-hero {
  position: relative;
  padding-block: var(--sp-9) var(--sp-8);
  background: linear-gradient(150deg, var(--nasdan-navy) 0%, var(--nasdan-navy-700) 100%);
  overflow: hidden;
}
.webdev-hero-texture {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
  mask-image: linear-gradient(150deg, rgba(0,0,0,0.9) 0%, transparent 60%);
}
.webdev-hero-stripe {
  position: absolute; top: -10%; right: -8%; width: 46%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(255,193,7,0.28) 0%, rgba(255,193,7,0) 70%);
  filter: blur(6px); pointer-events: none;
}

.webdev-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: var(--sp-8); align-items: center; }
.webdev-hero-copy, .webdev-hero-visual { min-width: 0; }

.webdev-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--nasdan-amber); }
.webdev-hero-eyebrow .eyebrow-mark { background: var(--nasdan-amber); }
.webdev-hero-headline {
  font-size: var(--fs-h1); font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight); color: var(--white); margin-bottom: var(--sp-4); max-width: 16ch;
}
.webdev-hero-headline em { color: var(--nasdan-amber); font-style: normal; }
.webdev-hero-lead { font-size: var(--fs-body); max-width: 48ch; margin-bottom: var(--sp-6); color: var(--paper-300); }
.webdev-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.webdev-hero-actions .btn-ghost-nasdan { color: var(--white); border-color: rgba(255,255,255,0.32); }
.webdev-hero-actions .btn-ghost-nasdan:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }

/* ---- Code showcase — replaces the ship-pipeline card (and,
   before that, the browser-window/device-stack mockups) with a
   code-editor screen surrounded by floating language chips
   (HTML / CSS / JS / CODE / </>), echoing the layout of the
   reference illustration the client supplied — a monitor
   showing code with scattered language tags around it — but
   rendered in NASDAN's own flat, chip-based visual language
   instead of a cartoon/sticker illustration style, so it stays
   consistent with every other mockup on the site. The code
   itself is real, valid HTML (not placeholder bars), per the
   explicit "screen showing html code" request. Reuses the
   .code-line/.code-tag/.code-attr/.code-string/.code-indent-*
   classes already defined for the Approach section's code-mock
   further down this file — same syntax-highlight language, two
   different screens. ---- */
.webdev-hero-visual { position: relative; z-index: 1; }
.code-showcase { position: relative; padding: var(--sp-8) var(--sp-4) var(--sp-4); }

.code-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.5rem 1.05rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); box-shadow: var(--shadow-md);
}
.code-chip--js { top: 0; left: 10%; background: #1AC0B3; color: var(--white); transform: rotate(-6deg); }
.code-chip--html { top: 34%; left: -4%; background: #3D4FD6; color: var(--white); transform: rotate(-4deg); }
.code-chip--code { top: 2%; right: 2%; background: var(--nasdan-amber); color: var(--nasdan-navy); transform: rotate(5deg); }
.code-chip--css { top: 40%; right: -4%; background: #F2685C; color: var(--white); transform: rotate(4deg); }
.code-chip-icon {
  position: absolute; z-index: 2; top: 4%; left: 44%; width: 42px; height: 42px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--nasdan-navy);
  box-shadow: var(--shadow-md); transform: rotate(-3deg);
}
.code-chip-icon svg { width: 19px; height: 19px; }

.hero-code-mock {
  position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--nasdan-navy-700) 0%, var(--nasdan-navy-800) 100%);
  border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow-lg);
}
.hero-code-mock-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero-code-mock-dots { display: flex; gap: 6px; flex: none; }
.hero-code-mock-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.hero-code-mock-dots span:nth-child(1) { background: var(--nasdan-amber); }
.hero-code-mock-file { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.75rem; color: var(--paper-300); }
.hero-code-mock-body { padding: var(--sp-6); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.8125rem; line-height: 2; }

/* =========================================================
   PROOF BAND — compact 4-item row (matches the proof-band
   convention used across every other service page)
   ========================================================= */
.webdev-stats { padding-block: var(--sp-7); background: var(--cloud); border-bottom: 1px solid var(--ink-100); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.stats-item { display: flex; flex-direction: column; gap: 0.35rem; border-left: 1px solid var(--ink-200); padding-left: var(--sp-4); }
.stats-item:first-child { border-left: none; padding-left: 0; }
.stats-item strong { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--nasdan-navy); }
.stats-item span { font-size: 0.8438rem; color: var(--ink-500); }

/* =========================================================
   CLIENT LOGOS — sliding marquee, reuses the homepage's
   .hero-marquee/.hero-marquee-track component as-is (it's
   already light-bg-safe — see main.css). Section-specific
   wrapper only.
   ========================================================= */
.webdev-logos { padding-block: var(--sp-7); background: var(--cloud); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.webdev-logos-label {
  display: block; text-align: center; font-size: 0.75rem; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-6);
}
.webdev-logos-marquee { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

/* =========================================================
   WHY CUSTOM — replaces the old "Who we build it for"
   industries grid. Editorial ranked list — large ghost index +
   copy per row (icon badges removed per explicit request), same
   visual language as the "Top 5 cost aspects" pattern established
   on the Mobile Development page. Section head is now a
   .split-head (title+CTA / description side by side) instead of
   the plain stacked .section-head.
   ========================================================= */
.webdev-why { padding-block: var(--section-pad-y); border-top: 1px solid var(--ink-100); }
.webdev-why-list { border-top: 1px solid var(--ink-200); }
.webdev-why-row {
  display: grid; grid-template-columns: 48px 1fr; align-items: flex-start; column-gap: var(--sp-5);
  padding-block: var(--sp-6); border-bottom: 1px solid var(--ink-200);
  transition: background-color var(--dur-base) var(--ease-out);
}
.webdev-why-row:hover { background: var(--cloud); }
.webdev-why-index {
  padding-top: 0.2rem; font-size: 1.375rem; font-weight: var(--fw-light); letter-spacing: var(--ls-tight);
  color: var(--ink-200); font-variant-numeric: tabular-nums; transition: color var(--dur-base) var(--ease-out);
}
.webdev-why-row:hover .webdev-why-index { color: var(--nasdan-amber); }
.webdev-why-body h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); margin-bottom: var(--sp-2); }
.webdev-why-body p { font-size: 0.9375rem; color: var(--ink-500); line-height: var(--lh-relaxed); margin: 0; max-width: 62ch; }

/* =========================================================
   CAPABILITIES — four-up numbered grid, no card chrome
   ========================================================= */
.webdev-capabilities { padding-block: var(--section-pad-y); border-top: 1px solid var(--ink-100); }
.capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink-200); border-left: 1px solid var(--ink-200); }
.capability-item { padding: var(--sp-7) var(--sp-5); border-right: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: var(--white); transition: background-color var(--dur-base) var(--ease-out); }
.capability-item:hover { background: var(--cloud); }
.capability-item-num { display: block; font-size: 0.75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); color: var(--ink-400); margin-bottom: var(--sp-4); font-variant-numeric: tabular-nums; }
.capability-item h3 { font-size: 1.0625rem; font-weight: var(--fw-medium); color: var(--ink-900); line-height: var(--lh-snug); margin-bottom: var(--sp-3); }
.capability-item p { font-size: 0.875rem; color: var(--ink-500); margin: 0; line-height: var(--lh-relaxed); }

/* =========================================================
   APPROACH — two column: description + navy statement visual
   ========================================================= */
.webdev-approach { padding-block: var(--section-pad-y); background: var(--surface-muted); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); }
.approach-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--sp-9); align-items: center; }

/* ---- Code-editor mockup ---- */
.code-mock { border-radius: var(--radius-lg); overflow: hidden; background: var(--nasdan-navy-700); box-shadow: var(--shadow-lg); }
.code-mock-bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: rgba(0,0,0,0.18); border-bottom: 1px solid rgba(255,255,255,0.08); }
.code-mock-dots { display: flex; gap: 6px; flex: none; }
.code-mock-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.code-mock-dots span:nth-child(1) { background: var(--nasdan-amber); }
.code-mock-file { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.75rem; color: var(--paper-300); }
.code-mock-body { padding: var(--sp-6); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.8125rem; line-height: 1.9; }
.code-line { display: flex; gap: var(--sp-3); white-space: pre; }
.code-line-num { flex: none; width: 20px; color: rgba(255,255,255,0.28); text-align: right; }
.code-tag { color: #7CA8FF; }
.code-attr { color: var(--nasdan-amber); }
.code-string { color: #8CE08A; }
.code-text { color: rgba(255,255,255,0.72); }
.code-indent-1 { padding-left: 1.25rem; }
.code-indent-2 { padding-left: 2.5rem; }

.approach-copy h2 { margin-bottom: var(--sp-5); max-width: 26ch; }
.approach-copy p { color: var(--ink-500); margin-bottom: var(--sp-6); max-width: 50ch; }
.approach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.approach-list li { position: relative; padding-left: var(--sp-5); font-size: 0.9375rem; color: var(--ink-700); }
.approach-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--nasdan-amber);
}

/* =========================================================
   PROCESS — amber band, navy numbered steps. Rebuilt as a
   proper connected stepper: previously each step drew its own
   short connector line via ::before with hand-tuned left/right
   calc() offsets that didn't line up with the numbered circles
   (the line sat above them, not through their center) and broke
   further at the 3-column and 2-row breakpoints. Now it's one
   continuous line spanning the strip, sitting BEHIND the (now
   centered, larger) numbered circles — the opaque circles
   naturally occlude the segment behind them via z-index, so it
   reads as a single connected thread instead of five disjointed
   fragments. The line is simply hidden once the grid wraps to
   fewer columns, where a straight "thread" no longer makes sense.
   ========================================================= */
.webdev-process { padding-block: var(--section-pad-y); background: linear-gradient(135deg, var(--nasdan-amber) 0%, var(--nasdan-amber-600) 100%); position: relative; overflow: hidden; }
.webdev-process::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,22,63,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.webdev-process::after {
  content: ""; position: absolute; top: -20%; left: -8%; width: 46%; height: 70%;
  background: radial-gradient(circle, rgba(11,22,63,0.14), transparent 70%); pointer-events: none;
}
.webdev-process .container-nasdan { position: relative; z-index: 1; }
.webdev-process .section-head h2 { color: var(--nasdan-navy); }
.webdev-process .section-head p { color: rgba(11,22,63,0.72); }
.webdev-process .eyebrow { color: var(--nasdan-navy); }
.webdev-process .eyebrow-mark { background: var(--nasdan-navy); }

.process-strip { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); }
.process-strip-line { position: absolute; top: 19px; left: 10%; right: 10%; height: 2px; background: rgba(11,22,63,0.22); z-index: 0; }
.process-strip-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.process-strip-step-num {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--nasdan-navy); color: var(--nasdan-amber); font-size: 0.75rem; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sp-5); box-shadow: 0 6px 16px -6px rgba(11,22,63,0.45);
}
.process-strip-step h3 { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--nasdan-navy); margin-bottom: var(--sp-2); }
.process-strip-step p { font-size: 0.875rem; color: rgba(11,22,63,0.72); margin: 0; line-height: var(--lh-relaxed); max-width: 22ch; }

/* =========================================================
   WORK — sliding carousel, same mechanism as the homepage's
   work-carousel; reuses work-row body classes from main.css.
   Visual now uses the brand-colored full-bleed treatment
   (.work-row-visual--brand / -mark / -brand) established on
   the homepage's Client Stories section and the Portfolio
   page's Featured Case Studies carousel — "the portfolio
   slider" — instead of the small logo-chip-on-navy card this
   page used before. Defined here (not shared in main.css)
   because portfolio.css documents that base .work-row-visual
   is intentionally reused as-is on other pages.
   ========================================================= */
.webdev-work { padding-block: var(--section-pad-y) 0; }
.work-row-visual--brand {
  background: radial-gradient(135% 135% at 72% 18%, var(--cs-color) 0%, var(--cs-color-deep) 68%, var(--cs-color-deep) 100%);
}
.work-row-visual--brand::before { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,0.16), transparent 60%); }
.work-row-mark {
  position: absolute; top: 48%; left: 50%; width: 42%; height: auto;
  transform: translate(-50%, -50%); filter: drop-shadow(0 16px 28px rgba(0,0,0,0.28));
  transition: transform var(--dur-base) var(--ease-out);
}
.work-row:hover .work-row-mark { transform: translate(-50%, -50%) scale(1.06); }
.work-row-brand {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6); z-index: 1;
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 0.9375rem; font-weight: var(--fw-semibold); color: var(--white);
}
.work-row-brand img { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.92); padding: 3px; }
.webdev-work-cta { margin-top: var(--sp-5); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .process-strip { grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-7); }
  .process-strip-line { display: none; }
}

@media (max-width: 991.98px) {
  .approach-grid { grid-template-columns: 1fr; }
  .code-mock { order: -1; }
  .webdev-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .webdev-hero-visual { width: 100%; max-width: 460px; margin-inline: auto; }
  .webdev-hero-headline { max-width: 100%; }
  .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-5); }
  .stats-item:nth-child(3) { border-left: none; padding-left: 0; }
}

@media (max-width: 767.98px) {
  .webdev-hero { padding-block: var(--sp-8) var(--sp-6); }
  .webdev-hero-headline { max-width: 100%; font-size: clamp(1.75rem, 1.5rem + 2.2vw, 2.25rem); }
  .webdev-hero-actions { flex-direction: column; align-items: stretch; }
  .webdev-hero-actions .btn-nasdan { width: 100%; justify-content: center; }
  .webdev-hero-visual { margin-top: var(--sp-9); }
  .code-chip { padding: 0.4rem 0.8rem; font-size: 0.6875rem; }
  .code-chip-icon { width: 34px; height: 34px; }
  .code-chip-icon svg { width: 15px; height: 15px; }
  .hero-code-mock-body { padding: var(--sp-5); font-size: 0.75rem; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .process-strip { grid-template-columns: 1fr; gap: var(--sp-6); }
  .webdev-why-row { grid-template-columns: 32px 1fr; column-gap: var(--sp-3); }
  .webdev-why-index { font-size: 1.125rem; }
  .stats-row { grid-template-columns: 1fr; }
  .stats-item { border-left: none; padding-left: 0; border-top: 1px solid var(--ink-200); padding-top: var(--sp-4); }
  .stats-item:first-child { border-top: none; padding-top: 0; }
}